/* ==========================================================================
   Investace Mutual Funds — landing page (Oct 2026 rebuild).
   Black / white / greys only. Product screens are HTML, white on black.
   Colours for the page chrome come from ../shared/ic-theme.css tokens, so the
   page works in dark and light. "Stage" bands (goals, how it works, CTA) stay
   black in both themes, like the homepage product stack.
   Hidden-before-animation states live under html.motion only, which is set in
   <head> when motion is allowed and removed again if GSAP fails to load.
   ========================================================================== */
:root {
  --t-hero: clamp(17px, calc(0.625vw + 10px), 22px); --t-read: 17px; --t-read-lh: 1.6; --t-intro: clamp(17px, calc(0.31vw + 14px), 19px); --t-support: 15.5px; --t-label: 14px; --t-micro: 13px;
  --f: "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --spring: cubic-bezier(.2, .9, .25, 1);
  --pad: clamp(20px, 4vw, 56px);
  --hdr: 72px;                       /* global header only; the sub-bar overlays once you scroll */
  --pin: 52px;                       /* scrolling down: only the sub-bar remains */
  --ink: #0B0B0C; --ink-2: #2A2925; --g1: #F5F5F3; --g2: #EDEDEA; --g3: #E2E1DD; --g4: #B9B8B3; --g5: #6B6964; --g6: #6E6D69; --g7: #55534E;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--f); background: var(--bg); color: var(--text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--text); color: var(--bg); padding: 10px 14px; }
.skip:focus { top: 12px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
main { display: block; }

/* stage bands: always black, light text, whatever the theme */
.stage { --text: #ECECEA; --mute: rgba(236,236,234,.72); --dim: rgba(236,236,234,.58); --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --surface-2: #18181C;
  --metal: linear-gradient(180deg, #FFFFFF 0%, #E6E5E1 40%, #A09E99 80%, #7E7C78 100%); --btn-bg: #fff; --btn-fg: #0A0A0B; --btn-line: rgba(255,255,255,.24);
  background: #000; color: var(--text); }

/* ---------- type ---------- */
.metal { background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h2 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.045em; font-weight: 400; padding-bottom: .06em; }
.chip { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 26px; padding: 4px 10px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; font-size: 15.5px; font-weight: 500; white-space: nowrap; border-radius: 2px; transition: transform .45s var(--spring), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn--solid { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--text) 40%, transparent); }
.btn--solid:hover { box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--text) 50%, transparent); }
.btn--line { border: 1px solid var(--btn-line); color: var(--text); }
.btn--line:hover { border-color: var(--text); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn--dark { background: var(--ink); color: #fff; border-radius: 999px; }
.btn--dark:hover { background: #2A2A2C; }
.btn--ghost { border: 1px solid #D9D8D4; color: var(--ink); border-radius: 999px; }
.btn--ghost:hover { background: #F2F2F0; }
.btn--white { background: #fff; color: var(--ink); border-radius: 999px; }
.btn--white:hover { background: #E9E9E6; }

/* ---------- shared product-screen atoms (white UI) ---------- */
.ui, .tp, .scr { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.ui { width: min(440px, 100%); padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 #E6E5E1, 0 30px 60px -30px rgba(0,0,0,.28); }
.ui-top { display: flex; align-items: center; gap: 10px; }
.ui-top b { font-weight: 600; font-size: 15px; color: var(--ink); }
.ui-tag { margin-left: auto; font-style: normal; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--g5); border: 1px solid #E6E5E1; border-radius: 999px; padding: 3px 8px; }
.ui-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--g2); flex: none; }
.ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.ui-kpis div { padding: 10px 12px; border-radius: 12px; background: var(--g1); min-width: 0; }
.ui-kpis small { display: block; font-size: var(--t-micro); color: var(--g5); }
.ui-kpis b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-cap { margin-top: 18px; font-size: var(--t-micro); color: var(--g5); }
.ui-fine { margin-top: 12px; font-size: var(--t-micro); color: var(--g5); }
.ui-ok { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 11px 14px; border-radius: 12px; background: var(--g1); font-size: var(--t-label); color: var(--ink-2); }
.ui-ok span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 11px; }
.ui-legend { display: flex; gap: 16px; margin-top: 12px; font-size: var(--t-micro); color: var(--g6); }
.ui-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ui-legend i { width: 10px; height: 10px; border-radius: 3px; }
.k-a { background: var(--ink); } .k-b { background: var(--g3); }
.ring { width: 44px; height: 44px; transform: rotate(-90deg); flex: none; }
.ring circle { fill: none; stroke: var(--g3); stroke-width: 4; }
.ring circle.p { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 * (1 - var(--p))); }

/* HERO: see "HERO v3" at the end of this file */
/* the statutory line: readable, not fine print */
.statut { border-block: 1px solid var(--line); background: var(--bg-2); }
.statut p { max-width: 1320px; margin: 0 auto; padding: 18px var(--pad); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 18px; text-align: center; }
.statut b { font-size: var(--t-support); font-weight: 500; color: var(--text); }
.statut span { font-size: var(--t-label); color: var(--mute); }

/* ==========================================================================
   GOALS — stacking cards
   ========================================================================== */
.gstack { position: relative; }
.gstack__head { height: 86vh; }
.gstack__head-in { position: sticky; top: 30vh; text-align: center; padding: 0 var(--pad); }
.gstack__head-in .chip { margin-inline: auto; }
.gstack__head-in .h2 { margin-top: 20px; font-size: clamp(52px, 7.6vw, 120px); line-height: .96; letter-spacing: -.055em; }
.gstack__lede { margin: 20px auto 0; max-width: 40ch; font-size: var(--t-intro); color: var(--mute); }
.gstack__cards { position: relative; z-index: 2; width: min(1280px, 100% - var(--pad) * 2); margin: -40vh auto 0; padding-bottom: 12vh; display: grid; gap: 7vh; }
.gcard { position: sticky; top: calc(var(--pin) + 14px + var(--i) * 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; min-height: min(calc(100vh - var(--pin) - 110px), 660px); padding: clamp(28px, 4vw, 56px); border-radius: 30px; background: #fff; color: var(--ink); box-shadow: 0 -24px 80px rgba(0,0,0,.55); transform-origin: 50% 0; }
.gcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--shade, 0); pointer-events: none; }
/* mf.js scales these cards, fades their shade and swaps the How-it-works screens on every scroll frame. Their own GPU
   layers mean that is pure compositing: without them the big soft shadows were repainted each frame (20-30 fps). */
.gcard { will-change: transform; }
.gcard::after { will-change: opacity; }
.motion .scr { will-change: transform, opacity; }
.gcard__copy, .gcard__ui { min-width: 0; }
.gcard__eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--g6); }
.gcard h3 { margin-top: 14px; font-size: clamp(30px, 3.1vw, 48px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; max-width: 15ch; }
.gcard__ticks { list-style: none; margin-top: 26px; border-left: 2px solid #E6E5E1; display: grid; }
.gcard__ticks li { position: relative; padding: 8px 0 8px 18px; font-size: var(--t-read); line-height: 1.5; color: var(--g7); }
.gcard__ticks li:first-child { color: var(--ink); font-weight: 500; }
.gcard__ticks li:first-child::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.gcard__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.gcard__ui { align-self: stretch; display: grid; place-items: center; padding: clamp(18px, 2.4vw, 34px); border-radius: 22px; background: #F2F2F0; }

/* goal 1: glide path */
.glide { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.glide__col { display: grid; gap: 6px; justify-items: center; }
.glide__col i { position: relative; width: 100%; height: 128px; border-radius: 7px; background: var(--g3); overflow: hidden; }
.glide__col i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--g) * 100%); background: var(--ink); border-radius: 0 0 7px 7px; }
.glide__col span { font-size: 12px; color: var(--g5); font-variant-numeric: tabular-nums; }
/* goal 2: inflation + step-up */
.infl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 16px; }
.infl > div:not(.infl__arrow) { padding: 10px 14px; border-radius: 12px; background: var(--g1); }
.infl small { display: block; font-size: var(--t-micro); color: var(--g5); }
.infl b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.infl .infl__b { background: var(--ink) !important; } .infl__b small { color: rgba(255,255,255,.6); } .infl__b b { color: #fff; }
.infl__arrow { display: grid; gap: 4px; justify-items: center; text-align: center; }
.infl__arrow i { position: relative; width: 100%; height: 2px; background: var(--ink); transform-origin: left; }
.infl__arrow i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.infl__arrow span { font-size: 12.5px; color: var(--g6); line-height: 1.3; }
.steps { display: flex; align-items: flex-end; gap: 5px; height: 96px; margin-top: 10px; }
.steps i { flex: 1; height: calc(var(--s) * 100%); border-radius: 5px 5px 2px 2px; background: var(--ink); transform-origin: bottom; }
.steps i:nth-child(-n+3) { background: var(--g6); }
.steps__l { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--t-micro); color: var(--g5); }
/* goal 3: phases */
.phase { display: grid; grid-template-columns: 52.8fr 47.2fr; gap: 4px; margin-top: 10px; }
.phase > div { display: grid; gap: 2px; }
.phase i { height: 40px; border-radius: 10px; background: var(--ink); transform-origin: left; }
.phase__b i { background: repeating-linear-gradient(135deg, var(--g3) 0 6px, #D2D1CC 6px 12px); }
.phase b { margin-top: 8px; font-size: 14px; color: var(--ink); }
.phase small { font-size: var(--t-micro); color: var(--g6); }
.phase__ages { position: relative; height: 16px; margin-top: 8px; font-size: 12px; color: var(--g5); }
.phase__ages span { position: absolute; } .phase__ages span:nth-child(1) { left: 0; } .phase__ages span:nth-child(2) { left: 52.8%; transform: translateX(-50%); } .phase__ages span:nth-child(3) { right: 0; }
/* goal 4: safety */
.months { margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--g1); }
.months p { font-size: var(--t-label); color: var(--g6); } .months p b { font-size: 22px; color: var(--ink); font-weight: 600; margin-right: 2px; }
.months__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.months__row i { height: 30px; border-radius: 7px; background: var(--g3); }
.months__row i.on { background: var(--ink); }
.checks { list-style: none; margin-top: 12px; display: grid; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--g2); font-size: var(--t-label); color: var(--ink); }
.checks li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--g2); color: var(--ink); }
.checks li.ok span { background: var(--ink); color: #fff; }
.checks em { font-style: normal; font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--g1); color: var(--g7); }

/* alongside your goals */
.also { position: relative; z-index: 2; padding-top: 4vh; padding-bottom: clamp(80px, 12vh, 140px); }
.also__h { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.also__grid { list-style: none; margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.also__grid li { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 26px; background: #050506; }
.also__grid b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.also__grid span { font-size: var(--t-support); line-height: 1.55; color: var(--mute); }
.also__grid a { margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.also__grid a + a { margin-top: 0; padding-top: 0; }
.also__grid a:hover { text-decoration-color: var(--text); }

/* ==========================================================================
   HOW IT WORKS — static by default; pinned + scrubbed under html.motion
   ========================================================================== */
.how { position: relative; border-top: 1px solid var(--line); }
.how__pin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: center; max-width: 1360px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--pad); }
.how__left { position: relative; }
.how__left .h2 { margin-top: 18px; }
.how__steps { list-style: none; margin-top: clamp(24px, 4vh, 44px); display: grid; gap: 4px; counter-reset: s; }
.how__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.how__n { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--dim); padding-top: 4px; font-variant-numeric: tabular-nums; }
.how__steps b { display: block; font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.how__steps p { margin-top: 6px; font-size: var(--t-read); line-height: 1.55; color: var(--mute); max-width: 46ch; }
.how__rail, .how__dots { display: none; }
.how__right { display: grid; gap: 18px; }
.how__device { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.scr { padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 #E6E5E1, 0 50px 100px -40px rgba(0,0,0,.9); }

/* screen 1: goals call */
.call { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--g1); font-size: var(--t-label); }
.call__live { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 0 rgba(11,11,12,.3); animation: livep 2s ease-out infinite; }
@keyframes livep { 70% { box-shadow: 0 0 0 7px rgba(11,11,12,0); } 100% { box-shadow: 0 0 0 0 rgba(11,11,12,0); } }
.chips { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.chips li { display: grid; padding: 10px 12px; border-radius: 12px; border: 1px solid #E6E5E1; }
.chips b { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.chips span { font-size: var(--t-micro); color: var(--g6); }
/* screen 2: written plan */
.doc { margin-top: 14px; border-radius: 12px; border: 1px solid #E6E5E1; overflow: hidden; }
.doc__row { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1.1fr); gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--g2); font-size: var(--t-label); color: var(--ink); }
.doc__head { border-top: 0; background: var(--g1); font-size: 12.5px; color: var(--g5); }
.doc__row span:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--g6); }
.mix { position: relative; height: 8px; border-radius: 999px; background: var(--g3); overflow: hidden; }
.mix i { position: absolute; inset: 0 auto 0 0; width: calc(var(--m) * 100%); background: var(--ink); border-radius: inherit; transform-origin: left; }
.doc__rules { list-style: none; display: grid; gap: 6px; margin-top: 12px; }
.doc__rules li { font-size: var(--t-micro); color: var(--ink-2); }
.doc__rules b { display: inline-block; min-width: 46px; margin-right: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--g5); }
.doc__sign { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.doc__sign i { flex: 1; height: 1.5px; background: var(--ink); transform-origin: left; }
.doc__sign span { font-size: var(--t-micro); font-style: italic; color: var(--g6); }
/* screen 3: where your money goes */
.path { position: relative; display: grid; grid-template-columns: auto minmax(14px, 1fr) auto minmax(14px, 1fr) auto; align-items: center; gap: 6px; margin-top: 16px; }
.path__n { padding: 8px 10px; border-radius: 10px; background: var(--g1); text-align: center; }
.path__n b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.path__n small { font-size: 12px; color: var(--g6); white-space: nowrap; }
.path__n--you { background: var(--ink); } .path__n--you b { color: #fff; } .path__n--you small { color: rgba(255,255,255,.65); }
.path__l { position: relative; height: 2px; background: var(--g3); }
.path__l i { position: absolute; top: -3.5px; left: 0; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--ink); opacity: 0; }
.folios { list-style: none; display: grid; margin-top: 12px; }
.folios li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--g2); font-size: var(--t-label); }
.folios span { font-size: 12.5px; color: var(--g5); font-variant-numeric: tabular-nums; }
.folios b { color: var(--ink); font-weight: 600; }
.folios em { font-style: normal; font-size: var(--t-micro); color: var(--g6); }
.zero { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff; }
.zero b { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.zero span { font-size: var(--t-label); color: rgba(255,255,255,.75); }
/* screen 4: quarterly review */
.drift { list-style: none; display: grid; gap: 4px; margin-top: 8px; }
.drift li { display: grid; grid-template-columns: 84px minmax(0, 1fr) 92px; gap: 10px; align-items: center; padding: 8px 0; font-size: var(--t-label); }
.drift b { font-weight: 600; color: var(--ink); }
.drift__bar { position: relative; height: 10px; border-radius: 999px; background: var(--g2); }
.drift__bar .band { position: absolute; left: 35%; right: 35%; top: 0; bottom: 0; border-radius: 999px; background: var(--g3); box-shadow: inset 0 0 0 1px #CFCEC9; }
.drift__bar .mark { position: absolute; top: -4px; left: calc(var(--d) * 100%); width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.drift em { justify-self: end; font-style: normal; font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--g1); color: var(--g7); white-space: nowrap; }
.drift li.flag em { background: var(--ink); color: #fff; }

/* ---- pinned mode (html.motion) ---- */
.motion .how { height: 440vh; }
.motion .how__pin { position: sticky; top: var(--pin); height: calc(100vh - var(--pin)); min-height: 560px; padding-block: clamp(20px, 4vh, 48px); }
.motion .how__left .h2 { font-size: clamp(34px, min(4.2vw, 7vh), 64px); }
.motion .how__steps li { opacity: .38; transition: opacity .5s var(--spring); }
.motion .how__steps li p { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; transition: opacity .4s, margin .5s var(--spring); overflow: hidden; max-height: 0; }
.motion .how__steps li.is-on { opacity: 1; }
.motion .how__steps li.is-on p { opacity: 1; margin-top: 6px; max-height: 8em; transition: opacity .6s .1s, max-height .6s var(--spring), margin .5s var(--spring); }
.motion .how__rail { display: block; position: absolute; left: 0; bottom: -16px; width: 100%; height: 2px; background: var(--line); }
.motion .how__rail i { position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(0); }
.motion .how__device { display: grid; grid-template-columns: minmax(0, 1fr); justify-self: center; width: min(500px, 100%); }
.motion .scr { grid-area: 1 / 1; visibility: hidden; }
.motion .scr.scr--1 { visibility: visible; }
.motion .how__right { justify-items: center; }

/* ==========================================================================
   CALCULATORS
   ========================================================================== */
.calc { padding: clamp(90px, 13vh, 150px) 0 clamp(70px, 10vh, 120px); }
.calc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.calc__head .h2 { margin-top: 16px; }
.qc { margin-top: 36px; padding: clamp(14px, 1.6vw, 22px); border-radius: 30px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 60px 120px -60px rgba(0,0,0,.6); }
.qc__tabs { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 5px; border-radius: 999px; background: var(--g2); max-width: 100%; }
.qc__tabs button { position: relative; z-index: 1; height: 42px; padding: 0 22px; border-radius: 999px; font-size: 15.5px; font-weight: 500; color: var(--g6); white-space: nowrap; transition: color .35s; }
.qc__tabs button[aria-selected="true"] { color: #fff; }
.qc__tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.qc__ink { position: absolute; left: 0; top: 5px; height: 42px; width: 10px; border-radius: 999px; background: var(--ink); transform-origin: 0 50%; transition: transform .55s var(--spring), width .55s var(--spring); }
.qc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: 14px; }
.qc__inputs { display: grid; align-content: start; gap: 6px; padding: clamp(14px, 2vw, 28px) clamp(10px, 1.6vw, 20px); }
.qf { padding: 16px 0 18px; border-bottom: 1px solid var(--g2); }
.qf:last-of-type { border-bottom: 0; }
.qf__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.qf__top label { font-size: 16px; font-weight: 500; color: var(--ink); }
.qf__top label small { display: block; font-size: var(--t-label); font-weight: 400; color: var(--g6); }
.qf__val { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #DCDBD7; background: #fff; transition: border-color .2s, box-shadow .2s; }
.qf__val:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,11,12,.08); }
.qf__val input { width: 96px; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.qf__u { font-size: var(--t-label); color: var(--g6); white-space: nowrap; }
.qf input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin-top: 10px; background: transparent; cursor: pointer; }
.qf input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--ink) var(--p, 50%), var(--g3) var(--p, 50%)); }
.qf input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--ink) var(--p, 50%), var(--g3) var(--p, 50%)); }
.qf input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .3s var(--spring); }
.qf input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.qf input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.qf input[type="range"]:focus-visible { outline: none; }
.qf input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(11,11,12,.18); }
.qc__note { margin-top: 10px; font-size: var(--t-label); line-height: 1.5; color: var(--g6); }
.qc__out { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 36px); border-radius: 22px; background: var(--ink); color: #fff; }
.qc__label { font-size: var(--t-support); color: rgba(255,255,255,.72); }
.qc__big { margin-top: 6px; font-size: clamp(44px, 5vw, 72px); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.qc__split { display: flex; gap: 3px; height: 12px; margin-top: 24px; border-radius: 999px; overflow: hidden; }
.qc__split i { flex-basis: 0; flex-grow: 1; min-width: 4px; transition: flex-grow .7s var(--spring); }
.qc__split i:first-child { background: rgba(255,255,255,.4); }
.qc__split i:last-child { background: #fff; }
.qc__legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.qc__legend span { display: inline-flex; align-items: center; gap: 8px; }
.qc__legend em { font-style: normal; }
.qc__legend b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.qc__legend i { width: 10px; height: 10px; border-radius: 3px; }
.qc__legend i.a { background: rgba(255,255,255,.4); } .qc__legend i.b { background: #fff; }
.qc__assume { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.qc__assume b { color: #fff; font-weight: 500; }
.qc__cta { margin-top: auto; align-self: flex-start; }
.qc__assume + .qc__cta { margin-top: 22px; }
.qc__fine { margin: 14px 8px 4px; font-size: var(--t-label); line-height: 1.55; color: var(--g6); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: clamp(70px, 11vh, 130px) 0; border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--pin) + 32px); }
.faq__head .h2 { margin-top: 16px; }
.faq__sub { margin-top: 18px; font-size: var(--t-read); color: var(--mute); }
.faq__sub a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.acc { border-bottom: 1px solid var(--line-2); }
.acc details { border-top: 1px solid var(--line-2); }
.acc summary, .regs__d summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 24px 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; cursor: pointer; }
.acc summary::-webkit-details-marker, .regs__d summary::-webkit-details-marker { display: none; }
.acc summary i, .regs__d summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, box-shadow .3s; }
.acc summary i::before, .acc summary i::after, .regs__d summary i::before, .regs__d summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: calc(50% - .75px); height: 1.5px; background: var(--text); transition: transform .45s var(--spring); }
.acc summary i::after, .regs__d summary i::after { transform: rotate(90deg); }
.acc details[open] summary i, .regs__d[open] summary i { background: var(--text); }
.acc details[open] summary i::before, .acc details[open] summary i::after, .regs__d[open] summary i::before, .regs__d[open] summary i::after { background: var(--bg); }
.acc details[open] summary i::after, .regs__d[open] summary i::after { transform: rotate(0deg); }
.acc summary:hover i { box-shadow: inset 0 0 0 1px var(--text); }
.acc__a { overflow: hidden; }
.acc__a p { padding: 0 44px 26px 0; font-size: var(--t-read); line-height: 1.65; color: var(--mute); max-width: 62ch; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { padding: clamp(100px, 16vh, 180px) 0; text-align: center; overflow: hidden; }
.cta__in { display: grid; justify-items: center; }
.cta__rings { display: flex; gap: 14px; margin-bottom: 34px; }
.cta__rings .ring { width: 54px; height: 54px; }
.cta__rings .ring circle { stroke: rgba(255,255,255,.16); stroke-width: 3; }
.cta__rings .ring circle.p { stroke: #fff; }
.cta__h { font-size: clamp(48px, 7vw, 112px); line-height: .98; letter-spacing: -.055em; }
.cta__sub { margin-top: 22px; font-size: var(--t-intro); color: var(--mute); }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.cta__wa { margin-top: 20px; font-size: 15.5px; color: var(--mute); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.cta__wa:hover { color: var(--text); }
.cta__reg { margin-top: 42px; font-size: 14.5px; font-weight: 500; color: rgba(236,236,234,.82); max-width: 60ch; }

/* registrations */
.regs { padding: 8px 0 40px; border-top: 1px solid var(--line); }
.regs__d summary { padding: 22px 0; font-size: 16px; font-weight: 500; }
.regs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.regs__grid div { background: var(--bg); padding: 14px 16px; }
.regs__grid dt { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.regs__grid dd { margin-top: 4px; font-size: 14.5px; }
.regs__grid a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.regs__d > p { margin-top: 16px; font-size: var(--t-label); line-height: 1.6; color: var(--mute); max-width: 1040px; }

/* ==========================================================================
   Pre-animation states (only when motion is on)
   ========================================================================== */

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .also__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .gstack__head { height: 62vh; }
  .gstack__head-in { top: 26vh; }
  .gstack__head-in .h2 { font-size: clamp(46px, 13vw, 72px); }
  .gstack__lede { font-size: var(--t-intro); }
  .gstack__cards { width: auto; margin: -30vh var(--pad) 0; gap: 4vh; padding-bottom: 8vh; }
  .gcard { top: var(--stick, calc(var(--pin) + 8px)); grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 22px; padding: 26px 20px 20px; border-radius: 24px; box-shadow: 0 -16px 50px rgba(0,0,0,.6); }
  .gcard h3 { font-size: 27px; }
  .gcard__ticks { margin-top: 18px; }
  .gcard__ticks li { font-size: var(--t-read); padding: 6px 0 6px 14px; }
  .gcard__btns { margin-top: 20px; }
  .gcard__ui { padding: 12px; border-radius: 18px; }
  .ui { padding: 16px; }
  .how__pin { grid-template-columns: minmax(0, 1fr); }
  .how__device { grid-template-columns: minmax(0, 1fr); }
  .qc__body { grid-template-columns: minmax(0, 1fr); }
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
}
/* phone pinned mode: steps share one slot, the device sits below */
@media (max-width: 960px) {
  .motion .how { height: 420vh; }
  .motion .how__pin { align-content: start; align-items: start; gap: 14px; min-height: 0; padding: 18px var(--pad) 16px; height: calc(100svh - var(--pin)); }
  .motion .how__left .chip { display: none; }
  .motion .how__left .h2 { margin-top: 0; font-size: clamp(28px, 8vw, 40px); }
  .motion .how__left .h2 br { display: none; }
  .motion .how__steps { margin-top: 10px; display: grid; gap: 0; }
  .motion .how__steps li { grid-area: 1 / 1; opacity: 0; border-top: 0; padding: 0; pointer-events: none; }
  .motion .how__steps li.is-on { opacity: 1; pointer-events: auto; }
  .motion .how__steps li p { opacity: 1; max-height: none; margin-top: 4px; font-size: 16px; }
  .motion .how__steps b { font-size: 19px; }
  .motion .how__rail { display: none; }
  .motion .how__dots { display: flex; gap: 6px; justify-content: center; }
  .motion .how__dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background .4s; }
  .motion .how__dots i.is-on { background: var(--text); }
  .motion .how__right { gap: 12px; }
  .motion .scr { padding: 16px; }
}
@media (max-width: 640px) {
  .statut b { font-size: var(--t-support); }
  .statut span { font-size: var(--t-label); }
  .gcard__btns .btn { height: 44px; padding: 0 18px; font-size: 15.5px; }
  .glide__col i { height: 96px; }
  .glide { gap: 5px; }
  .infl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .infl__arrow { grid-column: 1 / -1; grid-row: 2; }
  .also__grid { grid-template-columns: minmax(0, 1fr); }
  .chips b { font-size: 14px; }
  .doc__row { grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); padding: 8px 10px; font-size: 13.5px; }
  .path { grid-template-columns: auto minmax(8px, 1fr) auto minmax(8px, 1fr) auto; gap: 4px; }
  .path__n { padding: 6px 7px; }
  .path__n b { font-size: 12px; } .path__n small { font-size: 12px; }
  .drift li { grid-template-columns: 74px minmax(0, 1fr) auto; font-size: 13.5px; }
  .qc { border-radius: 24px; padding: 12px; }
  .qc__tabs { display: grid; width: 100%; }
  .qc__tabs button { padding: 0 8px; font-size: 15px; }
  .qc__inputs { padding: 6px 6px 0; }
  .qf__top { flex-wrap: wrap; }
  .qf__val input { width: 84px; }
  .qc__out { border-radius: 18px; }
  .qc__cta { align-self: stretch; }
  .acc summary { padding: 20px 0; }
  .acc__a p { padding-right: 0; font-size: var(--t-read); }
  .cta__rings .ring { width: 44px; height: 44px; }
  .cta__btns .btn { flex: 1 1 100%; }
  .regs__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
}
@media (prefers-reduced-motion: reduce) {
  .call__live { animation: none; }
  .qc__ink, .qc__split i { transition: none; }
}

/* how: the big step numeral behind the device (pinned mode only) */
.how__num { display: none; }
.motion .how__right { position: relative; }
.motion .how__num { display: block; position: absolute; z-index: 0; right: -2%; top: 50%; transform: translateY(-58%); font-size: clamp(200px, 26vw, 400px); font-weight: 500; letter-spacing: -.07em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.1); pointer-events: none; font-variant-numeric: tabular-nums; }
.motion .how__device { position: relative; z-index: 1; width: min(540px, 100%); }
@media (max-width: 960px) { .motion .how__num { font-size: 46vw; top: 40%; right: -4%; } }

/* static (no-motion) 2-up screens are narrow: let the money path wrap */
.path__n { min-width: 0; }
.path__n b, .path__n small { white-space: normal; overflow-wrap: anywhere; }

/* Header: "one bar at a time" now lives in ../shared/ic-nav.css + ic-nav.js (html.hdr-up). */

/* ==========================================================================
   HERO v3 — centred copy, then a white product panel that rises and settles.
   The panel is a goal timeline: Today (your bank) → Emergency → Home →
   Education → Retirement; SIP pulses run along the line into each goal.
   ========================================================================== */

}

/* ---- hero panel v4: bank → flow lines (thickness = monthly amount) → four goals ---- */
.mh__panel { position: relative; z-index: 1; width: min(1180px, 100%); margin: 0 auto; }
.tp { padding: clamp(20px, 2.6vw, 36px); border-radius: 32px; background: #fff; color: var(--ink-2); font-size: 14px; line-height: 1.45; text-align: left; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 60px 120px -50px rgba(0,0,0,.9); transform-origin: 50% 0; will-change: transform; }
[data-theme="light"] .tp { box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 50px 100px -50px rgba(40,38,34,.45); }
.tp .ui-top b { font-size: 16px; }
.tp__flow { position: relative; display: grid; grid-template-columns: minmax(210px, 260px) minmax(110px, 1fr) minmax(0, 600px); align-items: center; margin-top: 26px; }
.tp__bank { position: relative; z-index: 1; grid-column: 1; display: grid; gap: 4px; padding: 22px; border-radius: 22px; background: var(--ink); color: #fff; }
.tp__bi { width: 44px; height: 44px; margin-bottom: 10px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.tp__bi svg, .tp__gi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tp__bank b { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.75); }
.tp__bamt { font-size: clamp(28px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp__bamt small { font-size: 14px; letter-spacing: 0; color: rgba(255,255,255,.6); font-weight: 400; }
.tp__bank > small { font-size: var(--t-label); color: rgba(255,255,255,.6); }
.tp__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.tp__svg .fl { fill: none; stroke: #D7D6D2; stroke-linecap: butt; transition: stroke .35s, opacity .35s; }
.tp__svg .dt { fill: var(--ink); transition: opacity .35s; }
.tp__goals { grid-column: 3; list-style: none; display: grid; gap: 10px; }
.tp__g { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--g1); cursor: default; outline: none; transition: background .35s, box-shadow .35s, opacity .35s; }
.tp__gi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px #E6E5E1; }
.tp__gn b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.tp__gn small, .tp__ga small { font-size: var(--t-label); color: var(--g6); font-variant-numeric: tabular-nums; }
.tp__ga { text-align: right; }
.tp__ga b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp__g em { font-style: normal; font-size: var(--t-micro); color: var(--g7); padding: 3px 9px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E6E5E1; white-space: nowrap; }
/* focus one goal: its line darkens, the rest step back */
.tp__flow[data-focus] .fl { opacity: .35; }
.tp__flow[data-focus] .dt { opacity: .2; }
.tp__flow[data-focus] .fl.on { opacity: 1; stroke: #8E8C87; }
.tp__flow[data-focus] .dt.on { opacity: 1; }
.tp__flow[data-focus] .tp__g { opacity: .55; }
.tp__flow[data-focus] .tp__g.on { opacity: 1; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tp__g:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.tp__note { margin-top: 22px; font-size: var(--t-label); color: var(--g6); text-align: center; }

@media (max-width: 960px) {
  .tp__flow { grid-template-columns: minmax(0, 1fr); align-items: stretch; margin-top: 18px; }
  .tp__bank { grid-column: 1; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px; border-radius: 18px; }
  .tp__bi { grid-row: span 3; margin: 0; }
  .tp__goals { grid-column: 1; margin-top: 48px; padding-left: 54px; }
  .tp__note { text-align: left; }
}
@media (max-width: 720px) {
  .tp { padding: 16px 14px; border-radius: 24px; }
  .tp .ui-top b { font-size: 14.5px; }
  .tp__goals { padding-left: 46px; gap: 8px; }
  .tp__g { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px; border-radius: 14px; }
  .tp__gi { width: 36px; height: 36px; border-radius: 10px; grid-row: span 2; }
  .tp__gi svg { width: 19px; height: 19px; }
  .tp__gn b, .tp__ga b { font-size: 15.5px; }
  .tp__g em { grid-column: 2 / 4; justify-self: start; font-size: var(--t-micro); }
}

/* ---- hero: shared .xhero system + this page's touches ---- */
:root, [data-theme="dark"] { --on: 255,255,255; }
[data-theme="light"] { --on: 14,12,10; }
.xhero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 46%, rgba(var(--on), .07), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgba(var(--on), .05), transparent 60%); }
.xhero__bg::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 89px, rgba(var(--on), .045) 89px 90px); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%); }
.xhero__h .soft { color: rgba(var(--on), .42); }
.xshow { padding-top: clamp(24px, 6vh, 72px); }
/* phone sub-bar: links scroll sideways with a fade instead of being cut off */
@media (max-width: 720px) {
  .snav { gap: 12px; padding-right: 0; }
  .snav__links { gap: 16px; padding-right: 28px; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .snav__links a { font-size: 13.5px; }
}

/* button with a lighter trailing note, e.g. "Find your risk profile · 2 min" */
.btn small { font-size: .87em; font-weight: 400; opacity: .58; margin-left: -2px; white-space: nowrap; }

/* ==========================================================================
   HOW IT WORKS — tablet composition (761–1100px, pinned mode)
   Title, then a horizontal 4-step rail, then the screen mock-up centred and
   scaled (by mf.js, --fit) to fill the rest of the frame.
   ========================================================================== */
@media (min-width: 761px) and (max-width: 1100px) {
  .motion .how { height: 440vh; }
  .motion .how__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; align-content: stretch; gap: clamp(20px, 3vh, 36px); height: calc(100svh - var(--pin)); min-height: 0; padding: clamp(24px, 4vh, 48px) var(--pad) clamp(20px, 3vh, 36px); }
  .motion .how__left { display: grid; gap: 0; }
  .motion .how__left .chip { display: inline-flex; }
  .motion .how__left .h2 { margin-top: 14px; font-size: clamp(36px, 5.4vw, 56px); }
  .motion .how__left .h2 br { display: none; }
  .motion .how__steps { order: 2; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 16px; padding-top: 0; }
  .motion .how__steps li { grid-area: auto; display: block; padding: 0; border-top: 0; opacity: .38; pointer-events: auto; }
  .motion .how__steps li.is-on { opacity: 1; }
  .motion .how__n { display: block; padding: 0 0 6px; }
  .motion .how__steps b { font-size: clamp(16px, 2vw, 19px); line-height: 1.3; }
  .motion .how__steps li p { opacity: 1; max-height: none; margin-top: 6px; font-size: 15px; line-height: 1.5; overflow: visible; display: block; }
  .motion .how__steps li:not(.is-on) p { opacity: .8; }
  .motion .how__rail { order: 1; display: block; position: relative; left: auto; bottom: auto; width: 100%; height: 2px; margin-top: clamp(18px, 3vh, 30px); background: var(--line-2); }
  .motion .how__dots { display: none; }
  .motion .how__num { display: none; }
  .motion .how__right { position: relative; display: grid; place-items: center; min-height: 0; height: 100%; gap: 0; }
  .motion .how__device { width: 520px; max-width: none; transform: scale(var(--fit, 1)); transform-origin: 50% 50%; }
}

/* hero sub: reading size from the homepage type roles (Oct 3) */
.xhero__sub { font-size: var(--t-hero); }

/* phone readability: step text matches the homepage reading size; chart years/ages one step up */
@media (max-width: 960px) { .motion .how__steps li p { font-size: 17px; } }
@media (max-width: 760px) {
  .glide__col span, .phase__ages { font-size: 13px; }
  .phase__ages { height: 18px; }
  .path__n b, .path__n small { font-size: 13px; }
}
/* tiny phones: columns are narrower than a year label, so label every other year */
@media (max-width: 360px) { .glide__col:nth-child(even) span { visibility: hidden; } }

/* ---- What you get (review + portal), added 22 Oct 2026 ---- */
.get { padding: clamp(72px, 10vw, 140px) clamp(16px, 4vw, 48px); }
.get__in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.get__lede { margin: 18px 0 28px; max-width: 34em; color: var(--mute); }
.get__list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 20px; }
.get__list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.get__list b { display: block; font-weight: 600; font-size: 17px; }
.get__list p { margin: 4px 0 0; color: var(--mute); font-size: 15px; line-height: 1.55; }
.get__i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-2); }
.get__i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.get__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.get__fig { margin: 0; }
.get__fig img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); background: #F3F2EF; }
.get__fig figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); }
@media (max-width: 900px) { .get__in { grid-template-columns: 1fr; } .get__fig { max-width: 560px; } }