/* ═══════════════════════════════════════════════════════════════════════════
   MONEYED EXPLAINERS — shared shell

   One stylesheet behind every scroll-driven explainer, so a change to the
   treatment lands on all of them instead of being copied page to page.

   Palette contrast was measured, not assumed:
     ivory on forest   14.09   body text fine
     lime  on forest   12.46   body text fine
     emerald on forest  3.01   LARGE TEXT ONLY — never body copy
   Emerald is therefore a surface and a bar fill here, never type on the dark.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --forest:#082C24; --forest-2:#0B3A2F; --emerald:#087F5B;
  --ivory:#F7F8F2; --lime:#D4F77D; --amber:#F2994A;
  --ivory-dim:rgba(247,248,242,.66);
  /* .38 read 3.25:1 on the forest at 11px — the axis labels under the
     chart ("3 yr", "5 yr") were the faintest thing on the page and the
     only part of it that failed. .58 clears 5.05:1 against the surface
     those labels actually sit on — the chart panel, not the page
     ground, which is why .52 computed clear and measured 4.37. */
  --ivory-faint:rgba(247,248,242,.58);
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--forest);color:var(--ivory);font-family:'Sora',system-ui,sans-serif;
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 16px}}

/* ── navigation ──────────────────────────────────────────────────────── */
.hw-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:12px 24px;
  background:rgba(8,44,36,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(247,248,242,.1)}
.hw-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ivory);
  font-weight:800;letter-spacing:-.02em;font-size:17px}
.hw-logo img{border-radius:8px;display:block}
.hw-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hw-nav a{color:var(--ivory-dim);text-decoration:none;font-size:13.5px;font-weight:600;
  padding:10px 13px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;
  transition:color .2s ease,background .2s ease}
.hw-nav a:hover{color:var(--ivory);background:rgba(247,248,242,.07)}
.hw-nav .hw-cta{background:var(--lime);color:var(--forest);font-weight:700}
@media(max-width:760px){
  .hw-topbar{padding:10px 14px;flex-wrap:wrap}
  .hw-nav{width:100%;justify-content:flex-start;gap:2px}
  .hw-nav a{font-size:12.5px;padding:10px}
}

/* ── intro ───────────────────────────────────────────────────────────── */
.intro{padding:56px 0 30px}
.intro .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);margin-bottom:16px}
.intro h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.04em;
  line-height:1.02;max-width:18ch;margin-bottom:16px}
.intro p{font-size:17px;color:var(--ivory-dim);max-width:52ch}

/* ── the scrolling story ─────────────────────────────────────────────── */
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:20px 0 90px;align-items:start}
@media(max-width:860px){.story{grid-template-columns:1fr;gap:0}}
.stage{position:sticky;top:0;height:100vh;display:flex;align-items:center}
@media(max-width:860px){
  .stage{height:62vh;top:0;z-index:2;padding-top:14px;align-items:flex-start;
         background:linear-gradient(180deg,var(--forest) 72%,transparent)}
}
.card{background:var(--forest-2);border:1px solid rgba(247,248,242,.1);
  border-radius:20px;padding:28px;width:100%}
@media(max-width:860px){.card{padding:20px}}
.card-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ivory-faint);margin-bottom:6px}
.card-amount{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;letter-spacing:-.05em;
  line-height:1;font-variant-numeric:tabular-nums;margin-bottom:4px;color:var(--lime)}
.card-sub{font-size:13px;color:var(--ivory-dim);min-height:2.6em}

.rows{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid rgba(247,248,242,.1)}
.rw{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(247,248,242,.07);opacity:.28;transition:opacity .45s ease}
.rw.on{opacity:1}
.rw span{font-size:13px;color:var(--ivory-dim)}
.rw b{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums}

.steps{display:flex;flex-direction:column}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;
  padding:30px 0;opacity:.34;transition:opacity .5s ease}
.step.on{opacity:1}
@media(max-width:860px){.step{min-height:64vh}}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--lime);margin-bottom:12px}
.step h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.12;max-width:18ch;margin-bottom:12px}
.step p{font-size:15.5px;color:var(--ivory-dim);max-width:44ch}

/* ── tenure comparison (lower-EMI explainer) ─────────────────────────── */
.tenures{display:flex;flex-direction:column;gap:9px;margin:20px 0 4px}
.ten{display:grid;grid-template-columns:52px 1fr auto;gap:11px;align-items:center;
  opacity:.4;transition:opacity .4s ease}
.ten.on{opacity:1}
.ten-y{font-family:var(--mono);font-size:11px;color:var(--ivory-faint)}
.ten-track{display:flex;height:14px;border-radius:7px;overflow:hidden;
  background:rgba(247,248,242,.07)}
.ten-track i{height:100%;width:0;transition:width .8s cubic-bezier(.22,1,.36,1)}
.ten-principal{background:var(--emerald)}
.ten-interest{background:var(--lime)}
.ten-emi{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.ten-track i{transition:none}}

/* ── close ───────────────────────────────────────────────────────────── */
.close{padding:60px 0 90px;border-top:1px solid rgba(247,248,242,.1)}
.close h2{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:800;letter-spacing:-.035em;
  max-width:20ch;margin-bottom:14px}
.close p{font-size:15.5px;color:var(--ivory-dim);max-width:56ch;margin-bottom:26px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:var(--forest);
  border-radius:999px;padding:0 28px;min-height:54px;font-weight:700;font-size:15px;
  text-decoration:none;transition:transform .24s cubic-bezier(.34,1.12,.64,1)}
.btn:hover{transform:translateY(-2px)}
footer{padding:26px 0 46px;font-family:var(--mono);font-size:10.5px;color:var(--ivory-faint);
  border-top:1px solid rgba(247,248,242,.08);line-height:1.8}