/* ============================================================
   OWN Financial — How it works (v2) · sample-first journey
   Builds on styles.css + home.css tokens & chart primitives.
   ============================================================ */

/* ---------- HERO ---------- */
.hiw-hero{ background:var(--ivory); color:var(--ink); padding:clamp(140px,18vh,196px) 0 clamp(56px,8vh,100px); }
.hiw-hero-grid{ display:grid; grid-template-columns:1.04fr 0.96fr; gap:clamp(38px,5vw,82px); align-items:center; }
.hiw-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(42px,5.4vw,78px); line-height:1.0; letter-spacing:-0.032em; color:var(--ink); margin:18px 0 0; max-width: none; text-wrap:balance; }
.hiw-hero h1 em{ font-style:normal; color:var(--ocean); }
.hiw-hero .lead{ margin:24px 0 0; max-width: none; }
.hiw-hero .hero-ctas{ display:flex; gap:13px; margin-top:32px; flex-wrap:wrap; }
.hiw-trust{ margin-top:26px; display:flex; gap:9px 22px; flex-wrap:wrap; font-family:var(--sans); font-size:13px; color:var(--ink-mute); }
.hiw-trust span{ display:inline-flex; gap:8px; align-items:center; }
.hiw-trust .d{ width:5px; height:5px; border-radius:50%; background:var(--ocean); flex-shrink:0; }

/* ---------- ROUTE PREVIEW CARD (mini timeline, draws in) ---------- */
.route-card{ background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card-lg); padding:clamp(22px,2.4vw,30px); }
.route-card-head{ display:flex; justify-content:space-between; align-items:center; }
.route-pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ocean); }
.route-pill .d{ width:7px; height:7px; border-radius:50%; background:var(--ocean); }
.route-count{ font-family:var(--sans); font-size:12.5px; color:var(--ink-mute); }
.route-card h3{ font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.2vw,26px); line-height:1.15; letter-spacing:-0.015em; color:var(--ink); margin:16px 0 0; }
.rp-list{ position:relative; margin-top:18px; padding-left:2px; }
.rp-list::before{ content:""; position:absolute; left:18px; top:19px; bottom:19px; width:2px; background:var(--line-strong); border-radius:2px; }
.rp-fill{ position:absolute; left:18px; top:19px; width:2px; background:var(--ocean); border-radius:2px; height:0; transition:height 1.7s var(--ease) .15s; }
.reveal.in .rp-fill{ height:calc(100% - 38px); }
.rp-row{ position:relative; display:grid; grid-template-columns:38px 1fr auto; gap:13px; align-items:center; padding:7px 0; z-index:1; }
.rp-node{ width:38px; height:38px; border-radius:50%; background:var(--ivory); border:1.5px solid var(--line-strong); display:grid; place-items:center; font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--ink-mute); transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.reveal.in .rp-node{ background:var(--ocean); color:#fff; border-color:var(--ocean); }
.rp-name{ font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.2; }
.rp-sub{ font-family:var(--sans); font-size:12px; color:var(--ink-mute); margin-top:2px; }
.rp-tag{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.rp-tag.sample{ background:rgba(14,58,62,0.08); color:var(--ocean); }
.rp-tag.live{ background:rgba(47,107,84,0.12); color:var(--gain); }

/* ---------- JOURNEY INTRO (full-width: title left, lead right) ---------- */
.jrn-intro{ max-width:none; display:grid; grid-template-columns:1.08fr 0.92fr; gap:clamp(28px,5vw,72px); align-items:end; }
.jrn-intro-head{ min-width:0; }
.jrn-intro .eyebrow{ margin-bottom:18px; }
.jrn-intro h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.4vw,56px); line-height:1.04; letter-spacing:-0.026em; color:var(--ink); margin:0; }
.jrn-intro h2 em{ font-style:normal; color:var(--ocean); }
.jrn-intro .lead{ margin:0 0 8px; max-width: none; }

/* ---------- JOURNEY + LEFT RAIL ---------- */
.journey{ background:var(--ivory); }
.jrn{ position:relative; margin-top:clamp(40px,6vh,76px); --rail:88px; }
/* spine runs down the centre of the rail column, between first & last node */
.jrn-spine{ position:absolute; left:calc(var(--rail) / 2); top:42px; bottom:42px; width:3px; transform:translateX(-50%); background:rgba(10,10,10,0.10); border-radius:6px; pointer-events:none; }
.jrn-spine-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(180deg, var(--ocean), #15565b); border-radius:6px; box-shadow:0 0 18px rgba(14,58,62,0.26); }
/* glowing leading marker that travels down the spine */
.jrn-spine-fill::after{ content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--ocean); box-shadow:0 0 0 4px rgba(14,58,62,0.16), 0 0 16px rgba(14,58,62,0.5); }

.stn{ position:relative; display:grid; grid-template-columns:var(--rail) minmax(270px,330px) 1fr; column-gap:clamp(24px,3vw,56px); align-items:center; }
.stn + .stn{ margin-top:clamp(44px,7vh,92px); }
.stn-node{ grid-column:1; justify-self:center; align-self:center; width:58px; height:58px; border-radius:50%; background:var(--ivory); border:2px solid var(--line-strong); display:grid; place-items:center; font-family:var(--serif); font-weight:400; font-size:22px; color:var(--ink-mute); z-index:2; transition:background .55s var(--ease), color .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), transform .55s var(--ease); }
.stn.reveal.in .stn-node{ background:var(--ocean); color:#fff; border-color:var(--ocean); box-shadow:0 16px 34px -12px rgba(14,58,62,0.6); transform:scale(1.05); }
.stn-copy{ grid-column:2; }
.stn-art{ grid-column:3; }

.stn-copy .step-num{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--ocean); margin:0; }
.stn-copy h3{ font-family:var(--serif); font-weight:400; font-size:clamp(27px,2.7vw,39px); line-height:1.04; letter-spacing:-0.026em; color:var(--ink); margin:13px 0 0; }
.stn-copy h3 em{ font-style:normal; color:var(--ocean); }
.stn-copy p{ font-family:var(--sans); font-size:clamp(15.5px,1.5vw,17px); line-height:1.62; color:var(--ink-soft); margin:18px 0 0; max-width: none; }
.stn-copy .step-link{ display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--ocean); cursor:pointer; background:none; border:none; padding:0; }
.stn-copy .step-link .arr{ transition:transform .25s var(--ease); }
.stn-copy .step-link:hover .arr{ transform:translateX(4px); }

/* ---------- STATION ART CARD ---------- */
.stn-art{ width:100%; min-width:0; overflow:hidden; contain:paint; }
/* the inline Station 03 embed stays static — no hover tooltip pill popping over/off the card
   (the full-chart modal keeps its tooltip) */
.stn-art .bp-chart-tip{ display:none !important; }
.stn-card{ position:relative; background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card-lg); padding:clamp(20px,2.1vw,28px); }
.stn-card.dark{ background:radial-gradient(150% 130% at 0% 0%, #16201B 0%, var(--obsidian) 60%); border-color:var(--line-dark); color:var(--ivory); box-shadow:var(--shadow-hero); }
.stn-expand{ position:absolute; top:15px; right:15px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--paper-warm); display:grid; place-items:center; cursor:pointer; color:var(--ocean); transition:border-color .2s, transform .2s var(--ease), background .2s; z-index:4; }
.stn-expand:hover{ border-color:var(--ocean); transform:translateY(-1px); }
.stn-card.dark .stn-expand{ background:rgba(255,255,255,0.07); border-color:var(--line-dark); color:var(--sea); }
.stn-card.dark .stn-expand:hover{ border-color:var(--sea); }

/* shared card sub-parts */
.sc-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; padding-right:40px; }
.sc-label{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); }
.stn-card.dark .sc-label{ color:var(--paper-mute); }
.sc-pill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.06em; color:var(--ocean); border:1px solid rgba(14,58,62,0.2); border-radius:var(--r-pill); padding:5px 11px; white-space:nowrap; }
.sc-pill .d{ width:6px; height:6px; border-radius:50%; background:var(--ocean); }
.stn-card.dark .sc-pill{ color:var(--sea); border-color:var(--line-dark-strong); }
.stn-card.dark .sc-pill .d{ background:var(--sea); }

/* net-worth header block */
.sc-bignum{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:6px; }
.sc-big{ font-family:var(--serif); font-weight:400; font-size:clamp(38px,5vw,54px); line-height:0.95; color:var(--ink); }
.sc-sub{ font-family:var(--sans); font-size:13px; color:var(--ink-mute); margin-top:7px; }
.sc-now{ text-align:right; }
.sc-now span{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:0.16em; color:var(--ink-faint); display:block; }
.sc-now b{ font-family:var(--serif); font-weight:400; font-size:24px; color:var(--ink); display:block; margin-top:3px; }
.sc-now i{ font-family:var(--sans); font-style:normal; font-size:12px; color:var(--ink-mute); }

/* ---------- REAL CHART FRAME (embedded product chart) ---------- */
.chart-frame{ position:relative; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card-lg); background:#fff; overflow:hidden; padding:clamp(20px,2.1vw,28px); }
/* the embedded chart fills the frame flush (flush=1), so the frame is the single
   card — no nested card-within-a-card. The chart ships its own "How to read this",
   and the copy has an "Open the full net-worth chart" link, so the corner expand
   would only collide with the chart's own controls. */
.chart-frame .stn-expand{ display:none; }
.chart-frame .rc{ display:block; width:100%; min-height:500px; }
.chart-frame .rc-frame{ display:block; width:100%; border:0; background:#fff; }

/* ---------- STATION 1 · selectable plan picker (real tiers, ported from signup) ---------- */
.pp{ display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.pp-opt{ border:1px solid var(--line); border-radius:var(--r-nested); background:var(--ivory); overflow:hidden;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.pp-opt:hover{ box-shadow:var(--shadow-card); }
.pp-opt[aria-checked="true"]{ border-color:var(--ocean); box-shadow:var(--shadow-hero);
  background:radial-gradient(150% 130% at 0% 0%, #17211C 0%, var(--obsidian) 60%); }
.pp-head{ display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; }
.pp-opt:focus-visible{ outline:2px solid var(--ocean); outline-offset:2px; }
.pp-radio{ width:20px; height:20px; border-radius:50%; flex-shrink:0; position:relative; border:1.5px solid var(--line-strong); transition:border-color .2s; }
.pp-opt[aria-checked="true"] .pp-radio{ border-color:var(--sea); }
.pp-opt[aria-checked="true"] .pp-radio::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--sea); }
.pp-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pp-name{ font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; transition:color .2s; }
.pp-opt[aria-checked="true"] .pp-name{ color:var(--ivory); }
.pp-pop{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ocean); margin-left:9px; }
.pp-pop.alt{ color:var(--ink-soft); }
.pp-opt[aria-checked="true"] .pp-pop.alt{ color:var(--paper-soft); }
.pp-opt[aria-checked="true"] .pp-pop{ color:var(--sea); }
.pp-tag{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); }
.pp-opt[aria-checked="true"] .pp-tag{ color:var(--paper-soft); }
.pp-price{ margin-left:auto; text-align:right; font-family:var(--serif); font-size:21px; color:var(--ink); line-height:1; white-space:nowrap; transition:color .2s; }
.pp-opt[aria-checked="true"] .pp-price{ color:var(--ivory); }
.pp-price small{ font-family:var(--sans); font-size:12px; color:var(--ink-mute); }
.pp-price .yr{ display:block; margin-top:4px; font-family:var(--sans); font-size:11px; color:var(--ink-mute); }
.pp-opt[aria-checked="true"] .pp-price small, .pp-opt[aria-checked="true"] .pp-price .yr{ color:var(--paper-mute); }
.pp-chev{ flex-shrink:0; color:var(--ink-mute); transition:transform .25s var(--ease), color .2s; }
.pp-opt[aria-checked="true"] .pp-chev{ transform:rotate(180deg); color:var(--sea); }
.pp-drawer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease); }
.pp-opt[aria-checked="true"] .pp-drawer{ grid-template-rows:1fr; }
.pp-drawer-inner{ overflow:hidden; min-height:0; }
.pp-hl{ list-style:none; margin:0; padding:2px 18px 16px 50px; display:flex; flex-direction:column; gap:8px; }
.pp-hl li{ display:flex; gap:9px; align-items:flex-start; font-family:var(--sans); font-size:13px; line-height:1.4; color:var(--paper-soft); }
.pp-hl svg{ color:var(--sea); flex-shrink:0; margin-top:2px; }
.pp-plan-foot{ font-family:var(--sans); font-size:12px; line-height:1.45; color:var(--paper-soft); margin:0 0 4px; padding:0 18px 0 50px; }
.pp-youth-link{ display:inline-block; margin:0 0 16px 50px; font-family:var(--sans); font-size:13px; color:var(--sea); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(120,190,200,0.4); }
.pp-foot{ display:flex; flex-direction:column; gap:13px; align-items:center; margin-top:6px; }
.pp-continue{ width:100%; justify-content:center; }
.pp-compare{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ocean); text-decoration:none; transition:color .18s; }
.pp-compare:hover{ color:var(--ocean-deep); }
.pp-compare .pp-ar{ transition:transform .2s var(--ease); }
.pp-compare:hover .pp-ar{ transform:translateX(4px); }
.pp-atlas-note{ font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-mute); text-align:center; max-width:44ch; margin:0; }
.pp-atlas-note strong{ color:var(--ink-soft); font-weight:600; }

/* one-time “sonar” ping that draws the eye to the picker affordance */
.pp-expand{ overflow:visible; }
.pp-expand.ping::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid var(--ocean); pointer-events:none; animation:ppPing 1.7s var(--ease-out) 2; }
@keyframes ppPing{ 0%{ transform:scale(1); opacity:0.5; } 100%{ transform:scale(2.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pp-expand.ping::after{ animation:none; } }

/* ---------- STATION 2 · households ---------- */
.hh-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.hh{ border:1px solid var(--line); border-radius:var(--r-nested); background:var(--ivory); padding:16px; position:relative; }
.hh.on{ border-color:var(--ocean); background:#fff; box-shadow:0 0 0 1px rgba(14,58,62,0.12); }
.hh h4{ font-family:var(--serif); font-weight:400; font-size:19px; color:var(--ink); margin:0; }
.hh p{ font-family:var(--sans); font-size:12.5px; line-height:1.45; color:var(--ink-soft); margin:7px 0 0; }
.hh .hh-tag{ display:inline-block; margin-top:11px; font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:var(--ocean); border-radius:var(--r-pill); padding:4px 9px; }

/* ---------- STATION 4 · link / modes / accounts ---------- */
.link-modes{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:16px; }
.mode-chip{ border:1px solid var(--line); border-radius:var(--r-nested); padding:13px 15px; background:var(--ivory); }
.mode-chip.on{ background:var(--ocean); border-color:var(--ocean); color:#fff; }
.mode-chip .mc-l{ font-family:var(--sans); font-size:14px; font-weight:600; }
.mode-chip .mc-s{ font-family:var(--sans); font-size:12px; color:var(--ink-mute); margin-top:3px; }
.mode-chip.on .mc-s{ color:rgba(255,255,255,0.74); }

/* ---------- STATION 2 · archetype profile (Maya Chen → Independent Builder) ---------- */
.arc{ display:flex; flex-direction:column; gap:20px; }
.arc-head{ padding-right:44px; }
.arc-job{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ocean); }
.arc-name{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,34px); line-height:1.05; letter-spacing:-0.02em; color:var(--ink); margin:8px 0 0; }
.arc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.arc-tag{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:5px 13px; }
.arc-desc{ font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-soft); margin:14px 0 0; text-wrap:pretty; }
.arc-sec{ border-top:1px solid var(--line); padding-top:18px; }
.arc-label{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px; }
.arc-bars{ display:flex; flex-direction:column; gap:11px; }
.arc-bar{ display:grid; grid-template-columns:88px 1fr 28px; align-items:center; gap:14px; }
.arc-bar-l{ font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); }
.arc-track{ height:8px; border-radius:var(--r-pill); background:rgba(10,10,10,0.08); overflow:hidden; }
.arc-fill{ display:block; height:100%; width:0; border-radius:var(--r-pill); background:var(--ocean); transition:width 900ms var(--ease-out); }
.reveal.in .arc-fill{ width:var(--w); }
.arc-bar-v{ font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.arc-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.arc-chip{ font-family:var(--sans); font-size:12.5px; color:#6E5A33; background:rgba(164,135,88,0.14); border:1px solid rgba(164,135,88,0.26); border-radius:var(--r-pill); padding:6px 13px; }
.arc-hh{ display:flex; align-items:center; justify-content:space-between; gap:16px; border:1.5px solid var(--ocean); border-radius:var(--r-nested); background:var(--ivory); padding:15px 18px; }
.arc-hh-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.arc-hh-meta b{ font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); }
.arc-hh-meta span{ font-family:var(--sans); font-size:13px; color:var(--ink-mute); }
.arc-hh-tag{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:var(--ocean); border-radius:var(--r-pill); padding:6px 13px; white-space:nowrap; }

/* ---------- STATION 4 · accounts grid + collapsible transaction drawer ---------- */
.lk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.lk-acct{ border:1px solid var(--line); border-radius:var(--r-nested); background:var(--ivory); padding:14px 15px; min-width:0; }
.lk-acct-n{ font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lk-acct-i{ font-family:var(--sans); font-size:11.5px; color:var(--ink-mute); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lk-acct-b{ font-family:var(--serif); font-weight:400; font-size:23px; color:var(--ink); margin-top:12px; line-height:1; }
.lk-acct-b.neg{ color:var(--clay); }
.lk-acct-l{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:7px; }
.lk-net{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.lk-net-l{ display:block; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); }
.lk-net-v{ font-family:var(--serif); font-weight:400; font-size:32px; color:var(--ocean); line-height:1; margin-top:5px; display:block; }
.lk-net-meta{ font-family:var(--sans); font-size:13px; color:var(--ink-mute); }
.lk-net-meta b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.lk-drawer{ margin-top:16px; border:1px solid var(--line); border-radius:var(--r-nested); overflow:hidden; }
.lk-drawer summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; cursor:pointer; font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ocean); list-style:none; }
.lk-drawer summary::-webkit-details-marker{ display:none; }
.lk-chev{ transition:transform .25s var(--ease); color:var(--ink-mute); flex-shrink:0; }
.lk-drawer[open] .lk-chev{ transform:rotate(180deg); }
.lk-tx-head, .lk-tx{ display:grid; grid-template-columns:1.7fr 1fr 1.2fr 0.7fr 0.85fr; gap:12px; align-items:center; padding:10px 16px; }
.lk-tx-head{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); border-top:1px solid var(--line); background:var(--paper-warm); }
.lk-tx{ border-top:1px solid var(--line); font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); }
.lk-tx-m{ font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lk-tx-a, .lk-tx-d{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lk-tx-v{ text-align:right; font-variant-numeric:tabular-nums; color:var(--clay); font-weight:600; }
.lk-tx-head .lk-tx-v{ color:var(--ink-faint); font-weight:600; }
.lk-tx-v.pos{ color:var(--forest); }
@media (max-width:620px){
  .lk-grid{ grid-template-columns:1fr 1fr; }
  .lk-tx-head, .lk-tx{ grid-template-columns:1.6fr 1fr 0.9fr; }
  .lk-tx-head .lk-tx-a, .lk-tx-head .lk-tx-d, .lk-tx .lk-tx-a, .lk-tx .lk-tx-d{ display:none; }
}

/* ---------- STATION 5 · Atlas tiers (trial Insights → committed live Atlas) ---------- */
.atlas-tiers{ display:flex; align-items:stretch; gap:12px; margin-top:24px; }
.atlas-tiers .mode-chip{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.atlas-tiers .at-k{ display:block; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; }
.atlas-tiers .mode-chip.on .at-k{ color:var(--sea); }
.atlas-tiers .at-arrow{ display:flex; align-items:center; color:var(--ink-mute); flex-shrink:0; }
@media (max-width:600px){ .atlas-tiers{ flex-direction:column; } .atlas-tiers .at-arrow{ transform:rotate(90deg); align-self:center; } }

/* ---------- STATION 5 · allocation-engine "more priorities" drawer ---------- */
.ae-more{ border:none; }
.ae-more > summary{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 0; cursor:pointer; list-style:none; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--forest); border-top:1px solid var(--line); transition:color .18s; }
.ae-more > summary::-webkit-details-marker{ display:none; }
.ae-more > summary:hover{ color:var(--ocean); }
.ae-more .ae-chev{ transition:transform .25s var(--ease); flex-shrink:0; }
.ae-more[open] > summary{ color:var(--ink-mute); }
.ae-more[open] .ae-chev{ transform:rotate(180deg); }
.ae-more .ae-more-hide{ display:none; }
.ae-more[open] .ae-more-show{ display:none; }
.ae-more[open] .ae-more-hide{ display:inline; }
.ae-more .ae-rows .ae-row:first-child{ border-top:1px solid var(--line); }
/* the long-tail "waiting for more surplus" placeholder bar reads right-aligned + muted */
.ae-bar:has(.ae-handled):not(.handled){ background:rgba(10,10,10,0.04); justify-content:flex-end; }

/* ---------- STATION 7 · retirement scenario (levers + funded path) ---------- */
.rsc-controls{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; margin-top:22px; }
.rsc-ctrl{ min-width:0; }
.rsc-lr{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.rsc-l{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); }
.rsc-v{ font-family:var(--serif); font-weight:400; font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums; }
.rsc-seg{ display:flex; background:var(--bone); border-radius:var(--r-pill); padding:4px; gap:2px; }
.rsc-opt{ appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; flex:1; text-align:center; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink-mute); padding:8px 6px; border-radius:var(--r-pill); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all .2s; }
.rsc-opt.on{ background:var(--ocean); color:#fff; font-weight:600; box-shadow:var(--shadow-card); }
.rsc-track{ position:relative; height:4px; border-radius:999px; background:var(--line-strong); margin:14px 0 0; }
.rsc-knob{ position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:var(--ocean); transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,0.2); }
/* live range sliders (alloc Route + retirement levers) — self-contained, no deps */
.ae-range, .rsc-range{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; background:var(--line-strong); outline:none; cursor:pointer; margin:14px 0 0; }
.ae-range{ flex:1; min-width:160px; margin:0; }
.ae-range::-webkit-slider-thumb, .rsc-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--ocean); box-shadow:0 2px 8px rgba(0,0,0,0.2); cursor:pointer; border:none; }
.ae-range::-moz-range-thumb, .rsc-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--ocean); box-shadow:0 2px 8px rgba(0,0,0,0.2); cursor:pointer; border:none; }
.ae-range:focus-visible::-webkit-slider-thumb, .rsc-range:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--ocean); outline-offset:2px; }
/* responsive re-pour while dragging the Route slider (overrides home.css 1.1s) */
.ae .ae-bar i{ transition:width .26s var(--ease); }
.rsc-cap{ font-family:var(--sans); font-size:12px; color:var(--ink-mute); margin:12px 0 0; }
.rsc-cap b{ color:var(--ink); font-weight:600; }
.rsc-chart{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.ae-mode-note{ font-family:var(--sans); font-size:12.5px; color:var(--ink-mute); margin:-10px 0 16px; min-height:1em; }
.rsc-svg{ display:block; height:auto; }
.rsc-tx{ font-family:var(--sans); font-size:12.5px; font-weight:600; }
.rsc-tx-dim{ fill:var(--ink-mute); font-weight:600; font-size:11px; letter-spacing:0.04em; }
@media (max-width:560px){ .rsc-controls{ grid-template-columns:1fr; gap:18px; } }
.acct-list{ border:1px solid var(--line); border-radius:var(--r-nested); overflow:hidden; }
.acct{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; }
.acct + .acct{ border-top:1px solid var(--line); }
.acct .bank{ display:flex; align-items:center; gap:11px; font-family:var(--sans); font-size:14.5px; color:var(--ink); }
.acct .logo{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-family:var(--sans); font-size:12px; font-weight:700; color:#fff; }
.acct b{ font-family:var(--sans); font-weight:600; font-variant-numeric:tabular-nums; }
.acct b.neg{ color:var(--clay); }
.status-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.st-tile{ border:1px solid var(--line); border-radius:var(--r-input); padding:13px; background:var(--ivory); }
.st-tile h5{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-mute); margin:0; }
.st-tile b{ font-family:var(--serif); font-weight:400; font-size:19px; color:var(--ink); display:block; margin-top:7px; }
.st-tile.standby{ opacity:0.55; }
.st-tile.standby b{ font-family:var(--sans); font-size:13px; color:var(--ink-mute); }

/* ---------- STATION 6 · found money (dark) ---------- */
.found-big{ font-family:var(--serif); font-weight:400; font-size:clamp(44px,6vw,64px); line-height:0.95; color:var(--ivory); }
.found-big span{ font-size:0.42em; color:var(--paper-mute); }
.found-cap{ font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--paper-soft); margin:12px 0 20px; max-width: none; }
.found-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r-nested); overflow:hidden; margin-top:20px; }
.found-tiles .ft{ background:var(--obsidian); padding:16px; }
.found-tiles h5{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-mute); margin:0; }
.found-tiles b{ font-family:var(--serif); font-weight:400; font-size:24px; color:var(--ivory); display:block; margin-top:8px; }
.stn-card.dark .chart-legend{ color:var(--paper-soft); }
.stn-card.dark .s100{ height:38px; }

/* ---------- STATION 7 · standing + goals ---------- */
.standing{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.grade{ width:78px; height:78px; flex-shrink:0; border-radius:50%; background:var(--ocean); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-weight:400; font-size:32px; }
.standing-h{ font-family:var(--serif); font-weight:400; font-size:24px; color:var(--ink); margin:4px 0 0; }

/* ---------- ATLAS BAND (ivory + radar mark) ---------- */
.atlas-band{ position:relative; background:var(--ivory); text-align:center; }
.atlas-band::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(1100px,96%); height:560px; pointer-events:none; z-index:0; background:radial-gradient(50% 50% at 50% 42%, rgba(14,58,62,0.06), transparent 72%); }
.atlas-band .wrap{ position:relative; z-index:1; }
.aa-mark{ width:clamp(86px,8vw,110px); height:clamp(86px,8vw,110px); margin:0 auto clamp(20px,2.4vw,28px); display:grid; place-items:center; border-radius:50%; background:radial-gradient(120% 120% at 30% 22%, #1B2620 0%, var(--obsidian) 62%); box-shadow:0 20px 46px -18px rgba(12,16,14,0.5); }
.aa-mark svg{ width:72%; height:72%; color:var(--ivory); }
.aa-mark-cta{ width:clamp(72px,7vw,92px); height:clamp(72px,7vw,92px); margin:0 auto clamp(18px,2vw,24px); background:radial-gradient(120% 120% at 30% 22%, #18302C 0%, #0F1715 64%); border:1px solid rgba(134,199,192,0.22); }

/* ---------- Atlas + CTA banner (header row + body) ---------- */
.cta-flat{ display:flex; flex-direction:column; gap:clamp(28px,3vw,40px); padding:clamp(44px,4.6vw,64px) clamp(48px,5.5vw,80px); text-align:left; }
.cta-flat-head{ position:relative; z-index:1; display:flex; align-items:center; gap:clamp(20px,2.4vw,32px); }
.cta-flat .aa-mark-cta{ margin:0; flex:0 0 auto; }
.cta-flat-headtext{ flex:1 1 auto; }
.cta-flat .eyebrow{ justify-content:flex-start; }
.cta-flat-headtext h2{ margin-top:10px; max-width: none; }
.cta-flat-body{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(24px,2.8vw,32px); padding-top:clamp(26px,2.8vw,36px); border-top:1px solid rgba(244,244,241,0.14); }
.cta-flat .lead{ margin:0; max-width:none; }
.cta-flat-tail{ display:flex; flex-direction:row; flex-wrap:wrap; gap:13px; align-items:center; min-width:0; }
.cta-flat-btn{ width:auto; justify-content:center; }
.cta-flat-link{ font-family:var(--sans); font-size:14px; font-weight:500; color:var(--sea); text-align:left; margin:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:color .16s; }
.cta-flat-link:hover{ color:#A6D8D2; }
.cta-flat-note{ flex-basis:100%; font-family:var(--sans); font-size:12px; letter-spacing:0.02em; color:rgba(244,244,241,0.5); text-align:left; margin:4px 0 0; }
@media (max-width: 860px){
  .cta-flat{ text-align:center; }
  .cta-flat-head{ flex-direction:column; text-align:center; gap:18px; }
  .cta-flat .eyebrow{ justify-content:center; }
  .cta-flat-headtext h2{ margin-left:auto; margin-right:auto; }
  .cta-flat-body{ gap:28px; justify-items:center; }
  .cta-flat .lead{ margin-left:auto; margin-right:auto; }
  .cta-flat-tail{ width:100%; justify-content:center; }
}
.atlas-wedge{ transform-origin:256px 256px; transform-box:view-box; animation:wedge 3.6s linear infinite; }
@keyframes wedge{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .atlas-wedge{ animation:none; } }
.atlas-band h2{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,62px); line-height:1.04; letter-spacing:-0.028em; color:var(--ink); margin:16px auto 0; max-width:18ch; }
.atlas-band h2 em{ font-style:normal; color:var(--ocean); }
.atlas-band .lead{ max-width:58ch; margin:22px auto 0; }
.atlas-band .hero-ctas{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }

/* ---------- MODAL ---------- */
.hiw-modal{ position:fixed; inset:0; z-index:3000; display:none; }
.hiw-modal.show{ display:block; }
.hiw-scrim{ position:absolute; inset:0; background:rgba(10,10,10,0.42); opacity:0; transition:opacity .28s var(--ease-standard); }
.hiw-modal.show .hiw-scrim{ opacity:1; }
.hiw-sheet{ position:absolute; left:50%; top:50%; transform:translate(-50%,-46%); width:min(960px,92vw); max-height:88vh; overflow:auto; background:var(--ivory); border-radius:var(--r-card-lg); box-shadow:var(--shadow-hero); padding:clamp(26px,3.2vw,46px); opacity:0; transition:opacity .3s var(--ease), transform .34s var(--ease); }
.hiw-modal.show .hiw-sheet{ opacity:1; transform:translate(-50%,-50%); }
.hiw-x{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ink-soft); transition:border-color .2s, color .2s; z-index:2; }
.hiw-x:hover{ border-color:var(--ink); color:var(--ink); }
.hiw-modal .m-eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--ocean); }
.hiw-modal .m-title{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.4vw,42px); line-height:1.05; letter-spacing:-0.022em; color:var(--ink); margin:12px 0 0; max-width: none; }
.hiw-modal .m-art{ margin-top:24px; }
.hiw-modal .m-note{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--ink-mute); margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }

/* ---------- "How to read this" popup (inline panels) ---------- */
.hiw-read{ z-index:3600; }
.hiw-read-sheet{ width:min(600px,92vw); }
.hiw-read .m-title{ font-size:clamp(24px,3vw,32px); max-width: none; }
.rd-blocks{ margin-top:26px; display:flex; flex-direction:column; gap:18px; }
.rd-block{ padding-top:18px; border-top:1px solid var(--line); }
.rd-block:first-child{ padding-top:0; border-top:none; }
.rd-l{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ocean); margin-bottom:8px; }
.rd-block p{ font-family:var(--sans); font-size:15px; line-height:1.62; color:var(--ink); margin:0; text-wrap:pretty; }
.rd-block p b{ font-weight:600; }

/* ---------- ATLAS INSIGHT · collapsible dropdown ----------
   Faithful port of the real product chart footer (charts-lib AtlasNote):
   rests as the radar disc + "Atlas Insight" label + chevron; clicking opens
   the insight in place with a JS-measured height animation. Namespaced as
   .atlas-drop so it never collides with home.css's static .atlas-note. */
.atlas-drop{ margin-top:24px; border-radius:18px; background:transparent; padding:0;
  transition:background var(--dur-card,220ms) var(--ease-standard), padding 340ms var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.atlas-drop.open{ background:rgba(14,58,62,0.05); padding:12px 14px; }
.atlas-drop-head{ appearance:none; -webkit-appearance:none; border:0; background:none; margin:0; padding:0; width:auto;
  display:inline-flex; align-items:center; gap:11px; cursor:pointer; font:inherit; color:inherit; text-align:left;
  border-radius:999px; transition:transform 200ms var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.atlas-drop[data-open="false"] .atlas-drop-head:hover{ transform:translateY(-1px); }
.atlas-drop .atlas-disc{ display:grid; place-items:center; border-radius:999px; background:#181716; color:#F4F0E8 !important;
  flex-shrink:0; width:40px; height:40px; box-shadow:0 6px 16px rgba(20,18,15,.16), 0 1px 4px rgba(20,18,15,.10);
  transition:box-shadow 220ms var(--ease-standard); }
.atlas-drop .atlas-disc svg{ width:29px; height:29px; color:#F4F0E8; fill:currentColor; stroke:currentColor; shape-rendering:geometricPrecision; }
.atlas-drop.open .atlas-disc{ box-shadow:0 2px 8px rgba(20,18,15,.12); }
.atlas-drop .atlas-label{ font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ocean); white-space:nowrap; }
.atlas-drop .atlas-chev{ width:15px; height:15px; flex:none; color:var(--ink-faint); opacity:.5;
  transition:opacity 200ms var(--ease-standard), transform 260ms var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.atlas-drop-head:hover .atlas-chev{ opacity:.85; }
.atlas-drop.open .atlas-chev{ transform:rotate(180deg); opacity:.6; }
.atlas-drop .atlas-reveal{ overflow:hidden; height:0; transition:height 360ms var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.atlas-drop .atlas-body{ font-family:var(--sans); font-size:13.5px; color:var(--ink); line-height:1.55; text-wrap:pretty; padding-top:9px;
  opacity:0; transform:translateY(-4px);
  transition:opacity 240ms var(--ease-standard) 60ms, transform 300ms var(--ease-out,cubic-bezier(.16,1,.3,1)) 60ms; }
.atlas-drop .atlas-body b{ font-weight:600; }
.atlas-drop.open .atlas-body{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .atlas-drop, .atlas-drop-head, .atlas-chev, .atlas-reveal, .atlas-body{ transition:none; }
}

/* ---------- SECTION SEPARATOR ---------- */
.sec-rule{ border-top:1px solid var(--line); }

/* ---------- CUSTOM FOOTER (this page) ---------- */
.hiw-foot{ background:var(--obsidian); border-top:1px solid var(--line-dark); padding:clamp(40px,6vh,64px) 0 36px; }
.hiw-foot-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid var(--line-dark); }
.hiw-foot-logo img{ height:30px; width:auto; display:block; }
.hiw-foot-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hiw-foot-legal{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; margin-top:26px; }
.hiw-foot-links{ display:flex; gap:22px; flex-wrap:wrap; }
.hiw-foot-links a{ font-family:var(--sans); font-size:14px; color:var(--paper-soft); transition:color .16s; }
.hiw-foot-links a:hover{ color:var(--sea); }
.hiw-foot-disc{ font-family:var(--sans); font-size:12px; line-height:1.6; color:var(--paper-mute); max-width:64ch; }
.hiw-foot-meta{ font-family:var(--sans); font-size:12px; color:var(--paper-faint); letter-spacing:0.02em; margin-top:18px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hiw-hero-grid{ grid-template-columns:1fr; gap:42px; }
  .route-card{ max-width:560px; }
}
@media (max-width:880px){
  .jrn-intro{ grid-template-columns:1fr; gap:18px; align-items:start; }
  .jrn-intro .lead{ margin-bottom:0; }
  .jrn{ margin-top:32px; --rail:0px; }
  .jrn-spine{ display:none; }
  .stn{ grid-template-columns:1fr; row-gap:18px; align-items:start; }
  .stn-node{ grid-column:1; justify-self:start; align-self:start; width:48px; height:48px; font-size:19px; order:0; }
  .stn-copy{ grid-column:1; order:1; }
  .stn-art{ grid-column:1; order:2; }
  .plan-grid, .hh-grid, .link-modes{ grid-template-columns:1fr; }
  .status-tiles{ grid-template-columns:1fr 1fr; }
  .found-tiles{ grid-template-columns:1fr; }
}

/* ---------- PRINT ---------- */
@page{ size:A4 portrait; margin:14mm; }
@media print{
  *,*::before,*::after{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; transition-duration:0s !important; animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .reveal.in .rp-fill{ height:calc(100% - 38px) !important; }
  header[data-nav], .scroll-progress, footer[data-footer], [data-creator], .creator-fab, .creator-notes-panel, .stn-expand, .hiw-modal{ display:none !important; }
  body{ background:#fff !important; }
  .jrn-spine{ display:none !important; }
  .stn{ grid-template-columns:1fr !important; gap:16px !important; break-inside:avoid; }
  .stn .stn-copy, .stn .stn-art{ grid-column:1 !important; }
  .stn-node{ grid-column:1 !important; }
  .hiw-hero{ padding:0 0 24px !important; }
  .atlas-band::before{ display:none !important; }
}