/* WealthPillar page illustrations (18 Oct 2026). Cartoon images in the same style as Wealthy Wave. CSS only. */
.wpimg{padding:clamp(40px,6vw,80px) 20px;background:#faf8f3}
.wpimg__in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.wpimg__fig{margin:0;border-radius:22px;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 2px 4px #13245a14,0 24px 56px #13245a24;transition:transform .35s ease,box-shadow .35s ease}
.wpimg__fig img{display:block;width:100%;height:auto}
.wpimg__copy h2{font-size:clamp(26px,3vw,40px);line-height:1.12;color:#13245a;margin:0 0 14px}
.wpimg__copy p{font-size:17px;line-height:1.65;color:#3b4a6b;margin:0 0 18px}
.wpimg__btn{display:inline-block;background:#13245a;color:#fff!important;text-decoration:none;font-weight:700;padding:14px 24px;border-radius:12px;box-shadow:0 4px 0 #b8913f;transition:transform .2s,box-shadow .2s}
.wpimg__note{display:block;font-size:12.5px;color:#6b7690;margin-top:12px}
/* Story (home): 4 steps */
.wpst{padding:clamp(56px,8vw,100px) 20px;background:linear-gradient(180deg,#fff,#faf8f3 50%,#fff)}
.wpst__head{max-width:760px;margin:0 auto 44px;text-align:center}
.wpst__head p.k{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b8913f;margin:0 0 10px}
.wpst__head h2{font-size:clamp(28px,3.6vw,46px);line-height:1.1;color:#13245a;margin:0 0 12px}
.wpst__head p{font-size:18px;color:#5b6687;margin:0}
.wpst__list{list-style:none;padding:0;margin:0 auto;max-width:1180px;display:grid;gap:clamp(44px,7vw,90px)}
.wpst__step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,64px);align-items:center}
.wpst__step:nth-child(even) .wpimg__fig{order:2}
.wpst__num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#13245a;color:#fff;font-weight:700;margin-right:10px;box-shadow:0 0 0 6px #13245a1a;vertical-align:middle}
.wpst__tag{display:inline-block;vertical-align:middle;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:#eef0f8;color:#13245a}
.wpst__tag--b{background:#fbe9e7;color:#9b2c2c}.wpst__tag--a{background:#e4f4ea;color:#1f6b45}
.wpst__step h3{font-size:clamp(23px,2.4vw,31px);line-height:1.15;color:#13245a;margin:16px 0 10px}
.wpst__step p{font-size:17px;line-height:1.65;color:#3b4a6b;margin:0}
.wpst__go{text-align:center;margin-top:clamp(44px,6vw,76px)}
@media (hover:hover) and (pointer:fine){.wpimg__fig:hover{transform:translateY(-6px);box-shadow:0 2px 4px #13245a14,0 32px 66px #13245a30}.wpimg__btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #b8913f,0 12px 24px #13245a33}}
@media (max-width:820px){.wpimg__in,.wpst__step{grid-template-columns:1fr}.wpst__step:nth-child(even) .wpimg__fig{order:0}}
@supports (animation-timeline: view()){
  @keyframes wpi-l{from{opacity:0;transform:translateX(-60px) scale(.95)}to{opacity:1;transform:none}}
  @keyframes wpi-r{from{opacity:0;transform:translateX(60px) scale(.95)}to{opacity:1;transform:none}}
  @keyframes wpi-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .wpimg__fig{animation:wpi-l linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .wpst__step:nth-child(even) .wpimg__fig{animation-name:wpi-r}
  .wpimg__copy,.wpst__step>div{animation:wpi-up linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
@media (prefers-reduced-motion:reduce){.wpimg__fig,.wpimg__copy,.wpst__step>div{animation:none!important}}