/* How it works: a stepped, illustrated page. Brand blue, soft gradients, glass cards, light motion. */
.how{--ink:var(--ink);overflow:clip}
.how-hero{position:relative;color:#fff;padding:74px 0 90px;background:radial-gradient(900px 420px at 85% -10%,#53b2fe 0,transparent 60%),radial-gradient(700px 380px at 0% 110%,#2f7cf0 0,transparent 58%),linear-gradient(160deg,#0a3fb0 0%,#06235a 100%)}
.how-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.how-hero .crumbs{font-size:.85rem;color:#b9d4f7;margin-bottom:14px}.how-hero .crumbs a{color:#fff}
.how-hero h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.06;margin:0 0 16px;letter-spacing:-.02em;color:#fff}.how-hero h1 em{font-style:normal;background:linear-gradient(90deg,#ffd27a,#ff9a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.how-hero p.lead{color:#cfe2fb;font-size:1.1rem;max-width:560px;margin:0 0 24px;text-align:left}
.how-hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.how-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.how-pills span{font-size:.8rem;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border-radius:99px;padding:6px 12px;color:#e4f0ff}
.how-hero .art{position:relative}.how-hero .art svg{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,10,50,.45))}
.how-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;background:var(--bg);clip-path:ellipse(60% 100% at 50% 100%)}
.how-body{padding:46px 0 20px}.how-layout{display:grid;grid-template-columns:210px 1fr;gap:38px;align-items:start}
.how-rail{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line);padding-left:0}
.how-rail a{display:flex;gap:10px;align-items:center;padding:9px 12px;margin-left:-2px;border-left:2px solid transparent;color:var(--mute);font-size:.9rem;font-weight:500}.how-rail a b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.76rem;background:var(--card);border:1px solid var(--line);flex:none}
.how-rail a.on{color:var(--ink);border-left-color:var(--brand,#0a56d8);font-weight:700}.how-rail a.on b{background:var(--brand,#0a56d8);color:#fff;border-color:transparent}
.how-steps{display:grid;gap:26px}
.step{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);border-radius:28px;background:var(--card);overflow:hidden;scroll-margin-top:90px;box-shadow:0 18px 50px -30px rgba(10,40,100,.35)}
.step:nth-child(even){grid-template-columns:.95fr 1.05fr}.step:nth-child(even) .art{order:-1}
.step .txt{padding:30px 30px 28px}.step .tag{display:inline-flex;gap:8px;align-items:center;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand,#0a56d8)}.step .tag b{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--brand,#0a56d8);color:#fff;font-size:.9rem;letter-spacing:0}
.step .tag i{font-style:normal;margin-left:6px;color:var(--mute);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:2px 9px;text-transform:none;letter-spacing:0;font-weight:600}
.step h2{margin:12px 0 8px;font-size:1.5rem;text-align:left;letter-spacing:-.01em}.step p{margin:0 0 12px;color:var(--mute);line-height:1.7}
.step ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.step li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem}.step li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;background:#e4f6ea;color:#1f9d55;font-size:.72rem;font-weight:800;display:grid;place-items:center;margin-top:2px}
.step .art{display:grid;place-items:center;padding:22px;background:radial-gradient(260px 200px at 70% 20%,var(--g1,#d9ecff),transparent 70%),linear-gradient(160deg,var(--g2,#eef6ff),var(--card))}
.step .art svg{width:100%;max-width:360px;height:auto}
.step:nth-child(1){--g1:#cfe6ff;--g2:#eaf4ff}.step:nth-child(2){--g1:#d9f3e2;--g2:#eefaf2}.step:nth-child(3){--g1:#ffe6c9;--g2:#fff6ea}.step:nth-child(4){--g1:#cfe6ff;--g2:#eaf4ff}.step:nth-child(5){--g1:#e6dcff;--g2:#f4efff}.step:nth-child(6){--g1:#ffd9d9;--g2:#fff1f1}.step:nth-child(7){--g1:#d9f3e2;--g2:#eefaf2}
.how-day{padding:30px 0 20px}.how-day h2{text-align:center;margin:0 0 6px}.how-day .lead{text-align:center;margin:0 auto 26px}
.day{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}.day::before{content:"";position:absolute;left:8%;right:8%;top:30px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.day .d{position:relative;border:1px solid var(--line);border-radius:22px;background:var(--card);padding:56px 20px 20px;text-align:left}.day .d .t{position:absolute;left:20px;top:14px;display:flex;gap:10px;align-items:center;font-weight:800;color:var(--ink)}.day .d .t b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#53b2fe,#0a56d8);color:#fff;box-shadow:0 0 0 6px var(--bg)}
.day .d h3{margin:0 0 6px;font-size:1.05rem}.day .d p{margin:0;color:var(--mute);font-size:.92rem;line-height:1.6}
.how-more{padding:34px 0 10px}.how-more h2{text-align:center}
@media(max-width:980px){.how-hero .wrap{grid-template-columns:1fr}.how-hero .art{max-width:420px;margin:0 auto}.how-layout{grid-template-columns:1fr}.how-rail{display:none}.step,.step:nth-child(even){grid-template-columns:1fr}.step:nth-child(even) .art{order:0}.day{grid-template-columns:1fr}.day::before{display:none}}
@media(prefers-reduced-motion:no-preference){
  .bob{animation:bob 5s ease-in-out infinite}.bob2{animation:bob 6.5s ease-in-out -2s infinite}@keyframes bob{50%{transform:translateY(-7px)}}
  .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.12)}}
  .grow{transform-box:fill-box;transform-origin:bottom;animation:grow 3.2s ease-in-out infinite alternate}@keyframes grow{from{transform:scaleY(.82)}to{transform:scaleY(1)}}
  .dash{stroke-dasharray:6 6;animation:dash 1.6s linear infinite}@keyframes dash{to{stroke-dashoffset:-24}}
}