/* ============================================================
   Rung Design Language 3.0 — Base + Component Library
   Tokens live in tokens.css (imported below).

   3.0 restyles every v1 component class in the publication
   language — editorial serif display, sans UI, rounded/pill
   geometry, panel-on-page surfaces — so the existing pages
   adopt the identity without markup changes. New narrative
   components (Cost Story, Mechanism, Reality Check, Next Rung,
   Confidence, Tradeoff) are at the end of this file.
   ============================================================ */
@import "tokens.css?v=dl3";

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--rung-surface); color:var(--rung-text-body);
  font-family:var(--rung-font-sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:proportional-nums lining-nums; }
h1,h2,h3{ font-family:var(--rung-font-serif); color:var(--rung-text); line-height:1.04;
  margin:0; letter-spacing:-.04em; font-weight:400; }
h1{ letter-spacing:-.055em; }
h4{ font-family:var(--rung-font-sans); font-weight:700; color:var(--rung-text);
  line-height:1.2; margin:0; letter-spacing:-.01em; }
p{ margin:0 0 var(--rung-space-4); }
a{ color:var(--rung-ember-deep); text-underline-offset:2px; }
strong{ color:var(--rung-text); font-weight:700; }
code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em; }
/* 3.0: figures are sans + proportional. Tabular is opt-in. */
.fig{ font-family:var(--rung-font-sans); font-variant-numeric:proportional-nums lining-nums;
  font-feature-settings:normal; letter-spacing:-.02em; }
.fig-table, td.tableNum, .compare .cost, .minitable .fig{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1; }
.label{ font-family:var(--rung-font-sans); text-transform:uppercase; font-weight:700;
  letter-spacing:var(--rung-label-tracking); font-size:11px; color:var(--rung-text-muted); }
.kicker,.eyebrow{ font-family:var(--rung-font-sans); text-transform:uppercase; font-weight:700;
  letter-spacing:.16em; font-size:11px; color:var(--rung-ember-deep); }
.capsule{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--rung-text-muted); }
.shell{ max-width:1240px; margin:0 auto; padding:0 var(--rung-space-5); }
.measure{ max-width:720px; }
section{ scroll-margin-top:80px; }
.illus{ font-size:13px; color:var(--rung-text-muted); }

/* ---------- global header / nav ---------- */
rung-header, rung-footer{ display:contents; }
header.site{ position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--rung-surface) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--rung-line); }
.site-inner{ max-width:1240px; margin:0 auto; padding:var(--rung-space-3) var(--rung-space-5);
  display:flex; align-items:center; gap:var(--rung-space-5); }
.lockup{ display:flex; align-items:center; text-decoration:none; flex:none; }
.rung-logo-adaptive{ position:relative; display:block; width:149px; height:40px; }
.rung-logo{ display:block; width:149px; height:40px; object-fit:contain; object-position:left center; }
.rung-logo-adaptive .rung-logo{ position:absolute; inset:0; }
.rung-logo-dark{ opacity:0; }
[data-theme="dark"] .rung-logo-light{ opacity:0; }
[data-theme="dark"] .rung-logo-dark{ opacity:1; }
.rung-logo-fixed-dark{ width:131px; height:35px; }
footer.site .rung-logo-fixed-dark{ width:131px; height:35px; }
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .rung-logo-light{ opacity:0; }
  html:not([data-theme="light"]) .rung-logo-dark{ opacity:1; }
}
nav.primary{ display:flex; gap:2px; margin-left:auto; }
nav.primary a{ text-decoration:none; color:var(--rung-text-muted); font-family:var(--rung-font-sans);
  font-weight:600; font-size:14px; padding:8px 14px; border-radius:var(--rung-pill); }
nav.primary a:hover{ background:var(--rung-surface-alt); color:var(--rung-text); }
nav.primary a[aria-current="page"]{ background:var(--rung-surface-alt); color:var(--rung-text); }
nav.primary a.start{ color:var(--rung-ember-deep); }
nav.primary details{ position:relative; }
nav.primary details summary{ list-style:none; text-decoration:none; color:var(--rung-text-muted);
  font-family:var(--rung-font-sans); font-weight:600; font-size:14px; padding:8px 14px;
  border-radius:var(--rung-pill); cursor:pointer; }
nav.primary details summary::-webkit-details-marker{ display:none; }
nav.primary details summary::after{ content:" +"; color:var(--rung-text-faint); font-size:12px; }
nav.primary details[open] summary, nav.primary details.active summary,
nav.primary details:hover summary{ background:var(--rung-surface-alt); color:var(--rung-text); }
nav.primary .nav-panel{ position:absolute; top:calc(100% + 8px); left:0; min-width:230px; display:grid;
  gap:4px; padding:var(--rung-space-3); border:1px solid var(--rung-line);
  border-radius:var(--rung-radius-lg); background:var(--rung-surface); box-shadow:var(--rung-shadow-md); }
nav.primary .nav-panel a{ padding:8px 12px; }
nav.primary .nav-panel a[aria-current="page"]{ background:var(--rung-surface-alt); }
.toggle{ font-family:var(--rung-font-sans); font-weight:700; font-size:12px; letter-spacing:.02em;
  background:var(--rung-surface); color:var(--rung-text); border:1px solid var(--rung-line);
  border-radius:var(--rung-pill); padding:8px 14px; cursor:pointer; flex:none; }
.toggle:hover{ border-color:var(--rung-text-muted); }
.toggle:focus-visible, nav.primary a:focus-visible, nav.primary summary:focus-visible,
.mobile-group summary:focus-visible, .mobile-nav a:focus-visible, button:focus-visible,
a:focus-visible{ outline:3px solid color-mix(in srgb, var(--rung-ember) 30%, transparent); outline-offset:2px; }
.menu-btn{ display:none; }
.mobile-drawer{ display:none; }
.mobile-drawer[hidden]{ display:none !important; }
@media(max-width:980px){
  nav.primary{ display:none; }
  .menu-btn{ display:inline-flex; margin-left:auto; }
  body.menu-open{ overflow:hidden; }
  .mobile-drawer{ display:block; border-top:1px solid var(--rung-line); background:var(--rung-surface);
    padding:var(--rung-space-4) var(--rung-space-5); }
  .mobile-nav{ display:grid; gap:6px; }
  .mobile-nav a, .mobile-group summary{ display:block; text-decoration:none; color:var(--rung-text-muted);
    font-family:var(--rung-font-sans); font-weight:600; font-size:15px; padding:11px 14px;
    border:1px solid var(--rung-line); border-radius:var(--rung-radius-md); background:var(--rung-surface); }
  .mobile-nav a[aria-current="page"]{ background:var(--rung-surface-alt); color:var(--rung-text); }
  .mobile-group summary{ list-style:none; cursor:pointer; }
  .mobile-group summary::-webkit-details-marker{ display:none; }
  .mobile-group summary::after{ content:" +"; color:var(--rung-text-faint); }
  .mobile-group[open] summary{ background:var(--rung-surface-alt); color:var(--rung-text); }
  .mobile-group-links{ display:grid; gap:6px; margin:6px 0 2px; padding:0 0 0 12px; }
}

/* ---------- buttons ---------- */
.btn{ font-family:var(--rung-font-sans); font-weight:700; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px;
  border:1px solid transparent; border-radius:var(--rung-pill); text-decoration:none;
  transition:transform .2s var(--rung-ease-enter), background .2s, border-color .2s; }
.btn-feature, .btn-fill{ background:var(--rung-ember-deep); color:var(--rung-white); }
.btn-feature:hover, .btn-fill:hover{ transform:translateY(-2px); background:var(--rung-ember); }
.btn-secondary{ background:var(--rung-surface); color:var(--rung-text); border-color:var(--rung-line); }
.btn-secondary:hover{ border-color:var(--rung-text-muted); }
.btn-quiet{ background:var(--rung-surface-alt); color:var(--rung-text); }
.btn-ink{ background:var(--rung-ink); color:var(--rung-white); }
.btn-ink:hover{ transform:translateY(-2px); background:var(--rung-ink-2); }
:root[data-theme="dark"] .btn-ink{ background:var(--rung-surface-alt); border-color:var(--rung-line-strong); }
.btn-sm{ padding:9px 15px; font-size:13.5px; }
.link-step{ font-family:var(--rung-font-sans); font-weight:700; color:var(--rung-ember-deep);
  text-decoration:none; font-size:15px; display:inline-flex; align-items:center; gap:5px; }
.link-step:hover{ text-decoration:underline; }

/* ---------- badges + tags ---------- */
.badge{ display:inline-flex; align-items:center; padding:5px 11px; border-radius:var(--rung-pill);
  background:var(--rung-surface); border:1px solid var(--rung-line); font-size:12px; font-weight:700;
  font-family:var(--rung-font-sans); }
.badge.good{ background:color-mix(in srgb, var(--rung-success) 12%, var(--rung-surface));
  color:var(--rung-success); border-color:color-mix(in srgb, var(--rung-success) 30%, var(--rung-line)); }
.badge.warn{ background:color-mix(in srgb, var(--rung-warning) 12%, var(--rung-surface));
  color:var(--rung-warning); border-color:color-mix(in srgb, var(--rung-warning) 30%, var(--rung-line)); }
.badge.bad{ background:color-mix(in srgb, var(--rung-danger) 12%, var(--rung-surface));
  color:var(--rung-danger); border-color:color-mix(in srgb, var(--rung-danger) 30%, var(--rung-line)); }
/* Taxonomy tag keeps the leading rule — it reads as a publication category mark. */
.tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--rung-font-sans);
  font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--rung-text); }
.tag::before{ content:""; width:14px; height:4px; border-radius:2px; background:var(--tag,var(--rung-dusk));
  display:inline-block; transform:skewX(-24deg); }
.tag.cash{ --tag:var(--rung-ember); } .tag.credit{ --tag:var(--rung-dusk); }
.tag.debt{ --tag:var(--rung-warning); } .tag.equity{ --tag:var(--rung-success); }
.tag.essentials{ --tag:var(--rung-clay); }

/* ---------- stars ---------- */
.stars{ display:inline-flex; gap:2px; color:var(--rung-ember); font-size:14px; line-height:1; }
.stars .off{ color:var(--rung-line-strong); }

/* ---------- breadcrumb ---------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:13px;
  color:var(--rung-text-muted); padding:var(--rung-space-5) 0 0; }
.crumbs a{ color:var(--rung-text-muted); text-decoration:none; }
.crumbs a:hover{ color:var(--rung-text); }
.crumbs .sep{ color:var(--rung-text-faint); }
.crumbs .here{ color:var(--rung-text-body); }

/* ---------- disclosure bar ---------- */
.disclosure-bar{ display:flex; align-items:flex-start; gap:10px; background:var(--rung-surface-alt);
  border:1px solid var(--rung-line); border-radius:var(--rung-radius-md); padding:12px 16px;
  font-size:13px; color:var(--rung-text-muted); }
.disclosure-bar svg{ flex:none; margin-top:2px; color:var(--rung-text-faint); }
.disclosure-bar a{ color:var(--rung-text-body); font-weight:700; }

/* ---------- byline ---------- */
.byline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.byline .avatar{ width:44px; height:44px; border-radius:var(--rung-pill); background:var(--rung-dusk-tint);
  display:flex; align-items:center; justify-content:center; font-family:var(--rung-font-sans);
  font-weight:700; color:var(--rung-dusk-deep); font-size:15px; flex:none; }
:root[data-theme="dark"] .byline .avatar{ color:var(--rung-dusk); }
.byline .who{ font-size:14px; line-height:1.4; }
.byline .who .name{ font-weight:700; color:var(--rung-text); }
.byline .who .role{ color:var(--rung-text-muted); }
.byline .stamp{ margin-left:auto; text-align:right; font-size:12.5px; color:var(--rung-text-muted); }
.byline .stamp .verified{ color:var(--rung-success); font-weight:700; display:inline-flex; align-items:center; gap:4px; }
@media(max-width:520px){ .byline .stamp{ margin-left:0; text-align:left; width:100%; } }

/* ---------- answer box ---------- */
.answer-box{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  background:var(--rung-surface-alt); padding:var(--rung-space-6); box-shadow:var(--rung-shadow-sm); }
.answer-box .label{ margin-bottom:10px; display:block; color:var(--rung-ember-deep); }
.answer-box h4{ font-family:var(--rung-font-serif); font-weight:400; font-size:27px;
  line-height:1.1; letter-spacing:-.035em; margin-bottom:16px; }
.answer-box ul{ margin:0; padding:0; list-style:none; }
.answer-box li{ position:relative; padding-left:24px; margin-bottom:11px; font-size:16px; }
.answer-box li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border-radius:var(--rung-pill); background:var(--rung-dusk); }
.answer-box li.catch::before{ background:var(--rung-warning); }
.answer-box li:last-child{ margin-bottom:0; }

/* ---------- the catch / reality check ---------- */
.the-catch, .reality-check{ background:color-mix(in srgb, var(--rung-warning) 9%, var(--rung-surface));
  border:1px solid color-mix(in srgb, var(--rung-warning) 32%, var(--rung-line));
  border-left:4px solid var(--rung-warning); border-radius:var(--rung-radius-md); padding:var(--rung-space-5); }
.reality-check{ background:color-mix(in srgb, var(--rung-danger) 8%, var(--rung-surface));
  border-color:color-mix(in srgb, var(--rung-danger) 30%, var(--rung-line)); border-left-color:var(--rung-danger); }
.the-catch .label{ color:var(--rung-warning); margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.reality-check .label{ color:var(--rung-danger); margin-bottom:6px; display:block; }
.the-catch p, .reality-check p{ margin:0; font-size:15px; color:var(--rung-text-body); }
.the-catch p+p, .reality-check p+p{ margin-top:10px; }

/* ---------- right/wrong fit ---------- */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:var(--rung-space-4); }
.fit-col{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  padding:var(--rung-space-5); background:var(--rung-surface); }
.fit-col.right{ border-left:4px solid var(--rung-success); }
.fit-col.wrong{ border-left:4px solid var(--rung-danger); }
.fit-col h4{ font-size:17px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.fit-col.right h4{ color:var(--rung-success); } .fit-col.wrong h4{ color:var(--rung-danger); }
.fit-col ul{ margin:0; padding:0; list-style:none; }
.fit-col li{ padding-left:24px; position:relative; margin-bottom:10px; font-size:15px; }
.fit-col li:last-child{ margin-bottom:0; }
.fit-col.right li::before{ content:"✓"; position:absolute; left:0; color:var(--rung-success); font-weight:700; }
.fit-col.wrong li::before{ content:"✕"; position:absolute; left:0; color:var(--rung-danger); font-weight:700; }
@media(max-width:620px){ .fit{ grid-template-columns:1fr; } }

/* ---------- figure block / metrics ---------- */
.figblock{ display:flex; gap:var(--rung-space-4); flex-wrap:wrap; }
.figstat, .metric{ flex:1; min-width:170px; border:1px solid var(--rung-line);
  border-radius:var(--rung-radius-lg); padding:var(--rung-space-5); background:var(--rung-surface); }
.figstat .big, .metric .value{ font-family:var(--rung-font-sans); font-weight:700; font-size:40px;
  color:var(--rung-text); line-height:1; letter-spacing:-.045em;
  font-variant-numeric:proportional-nums lining-nums; }
.figstat .big.ember, .metric .value.ember{ color:var(--rung-ember-deep); }
.figstat .cap, .metric .eyebrow{ font-size:13px; color:var(--rung-text-muted); margin-top:8px; }
.metric .eyebrow{ margin:0 0 8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.figstat .sub{ font-size:12.5px; color:var(--rung-text-faint); margin-top:4px; }

/* ---------- panel + callout ---------- */
.panel{ background:var(--rung-surface-alt); border:1px solid var(--rung-line);
  border-radius:var(--rung-radius-lg); box-shadow:var(--rung-shadow-sm); padding:var(--rung-space-5); }
.callout{ padding:var(--rung-space-5); border-radius:var(--rung-radius-md); border:1px solid var(--rung-line);
  background:var(--rung-surface); }
.callout.good{ border-left:4px solid var(--rung-success); }
.callout.bad{ border-left:4px solid var(--rung-danger); }
.callout.warn{ border-left:4px solid var(--rung-warning); }
.callout.info{ border-left:4px solid var(--rung-info); }
.callout h4{ margin-bottom:6px; }
.callout p{ margin:0; color:var(--rung-text-body); font-size:15px; }

/* ---------- provider card ---------- */
.provider{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  background:var(--rung-surface); display:grid; grid-template-columns:1fr 250px; overflow:hidden; }
.provider .body{ padding:var(--rung-space-5); }
.provider .logo{ width:50px; height:50px; border-radius:var(--rung-radius-md); background:var(--rung-ink);
  color:var(--rung-white); display:flex; align-items:center; justify-content:center; font-family:var(--rung-font-serif);
  font-weight:400; font-size:24px; margin-bottom:14px; }
.provider h4{ font-family:var(--rung-font-serif); font-weight:400; font-size:23px;
  letter-spacing:-.035em; margin-bottom:4px; }
.provider .rating{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px;
  color:var(--rung-text-muted); }
.provider .rating .num{ font-weight:700; color:var(--rung-text); }
.provider .bestfor{ font-size:14px; margin-bottom:12px; }
.provider .bestfor .label{ display:block; margin-bottom:3px; }
.proscons{ display:grid; grid-template-columns:1fr 1fr; gap:var(--rung-space-4); font-size:14px; }
.proscons ul{ margin:0; padding:0; list-style:none; }
.proscons li{ padding-left:19px; position:relative; margin-bottom:7px; }
.proscons .pro li::before{ content:"+"; position:absolute; left:0; color:var(--rung-success); font-weight:700; }
.proscons .con li::before{ content:"–"; position:absolute; left:2px; color:var(--rung-danger); font-weight:700; }
.provider .rail{ background:var(--rung-surface-alt); padding:var(--rung-space-5); display:flex;
  flex-direction:column; gap:12px; border-left:1px solid var(--rung-line); }
.provider .rail .cost .label{ display:block; margin-bottom:4px; }
.provider .rail .cost .amt{ font-weight:700; font-size:29px; color:var(--rung-text); letter-spacing:-.04em; }
.provider .rail .cost .amt small{ font-size:13px; color:var(--rung-text-muted); font-weight:400; }
.provider .rail .alt{ margin-top:auto; font-size:12.5px; color:var(--rung-text-muted);
  border-top:1px solid var(--rung-line); padding-top:10px; }
.provider .rail .alt a{ font-weight:700; }
.provider.top{ border-color:var(--rung-ember); box-shadow:var(--rung-shadow-md); }
.provider .pickflag{ font-family:var(--rung-font-sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:10.5px; color:var(--rung-ember-deep); margin-bottom:8px;
  display:flex; align-items:center; gap:7px; }
.provider .pickflag::before{ content:""; width:14px; height:4px; border-radius:2px;
  background:var(--rung-ember); transform:skewX(-24deg); }
@media(max-width:680px){ .provider{ grid-template-columns:1fr; }
  .provider .rail{ border-left:0; border-top:1px solid var(--rung-line); } .proscons{ grid-template-columns:1fr; } }

/* ---------- tables ---------- */
.compare-wrap{ overflow-x:auto; border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg); }
table.compare{ width:100%; border-collapse:collapse; min-width:560px; font-size:15px; }
table.compare caption{ text-align:left; padding:var(--rung-space-4) var(--rung-space-5) 0;
  color:var(--rung-text-muted); font-size:13px; }
table.compare th, table.compare td{ text-align:left; padding:14px var(--rung-space-5);
  border-bottom:1px solid var(--rung-line); }
table.compare thead th{ font-family:var(--rung-font-sans); text-transform:uppercase; letter-spacing:.1em;
  font-size:11px; color:var(--rung-text-muted); background:var(--rung-surface-alt);
  border-bottom:1px solid var(--rung-line-strong); font-weight:700; }
table.compare tbody tr:last-child td{ border-bottom:0; }
table.compare .name{ font-weight:700; color:var(--rung-text); }
table.compare .cost{ color:var(--rung-text); font-weight:600; }
table.compare .rank{ color:var(--rung-text-faint); }
table.compare tr.cheapest td{ background:color-mix(in srgb,var(--rung-success) 8%, transparent); }
table.compare .flag{ font-size:11px; font-weight:700; color:var(--rung-success); letter-spacing:.04em; }

.minitable{ width:100%; border-collapse:collapse; font-size:15px; border:1px solid var(--rung-line);
  border-radius:var(--rung-radius-lg); overflow:hidden; }
.minitable th, .minitable td{ text-align:left; padding:12px var(--rung-space-4);
  border-bottom:1px solid var(--rung-line); }
.minitable thead th{ font-family:var(--rung-font-sans); text-transform:uppercase; letter-spacing:.1em;
  font-size:11px; color:var(--rung-text-muted); background:var(--rung-surface-alt); font-weight:700; }
.minitable tbody tr:last-child td{ border-bottom:0; }
.minitable .name{ font-weight:700; color:var(--rung-text); }
.minitable .fig{ color:var(--rung-text); font-weight:600; }
.minitable tr.this td{ background:var(--rung-ember-tint); }

/* ---------- phase ladder ---------- */
.phase-ladder{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  background:var(--rung-surface); box-shadow:var(--rung-shadow-sm); overflow:hidden; }
.phase-ladder ol{ list-style:none; margin:0; padding:0; }
.phase-ladder li{ border-top:1px solid var(--rung-line); }
.phase-ladder li:first-child{ border-top:0; }
.phase-ladder a, .phase-ladder .row{ text-decoration:none; display:grid;
  grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:13px 16px; }
.phase-ladder a:hover{ background:var(--rung-surface-alt); }
.phase-ladder .num{ font-size:12px; color:var(--rung-text-faint); font-weight:700; }
.phase-ladder .txt .t{ display:block; font-family:var(--rung-font-serif); font-weight:400; font-size:18px;
  color:var(--rung-text); line-height:1.15; letter-spacing:-.03em; }
.phase-ladder .txt .m{ display:block; font-size:13px; color:var(--rung-text-muted); margin-top:3px; }
.phase-ladder .go{ font-family:var(--rung-font-sans); font-weight:700; color:var(--rung-ember-deep); font-size:13px; }
.phase-ladder li.goal{ background:var(--rung-ember-tint); }
.phase-ladder li.goal .txt .t{ color:var(--rung-ember-deep); }
@media(max-width:620px){ .phase-ladder .txt .m{ display:none; } }

/* ---------- graduation ladder ---------- */
.gradmod{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  background:var(--rung-surface-alt); padding:var(--rung-space-5); }
.gradmod .label{ color:var(--rung-ember-deep); display:block; margin-bottom:14px; }
.ladder{ list-style:none; margin:0; padding:0; }
.ladder li{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--rung-line); }
.ladder li:last-child{ border-bottom:0; }
.ladder .bar{ width:52px; height:8px; background:var(--rung-line-strong); border-radius:var(--rung-pill); flex:none; }
.ladder li[data-state="done"] .bar{ background:var(--rung-success); }
.ladder li[data-state="now"] .bar{ background:var(--rung-ember); width:62px; height:10px; }
.ladder li[data-state="next"] .bar{ background:var(--rung-dusk); }
.ladder .lab{ font-size:15px; }
.ladder .lab .step{ font-weight:700; color:var(--rung-text); }
.ladder li[data-state="now"] .lab .step{ color:var(--rung-ember-deep); }
.ladder .lab .meta{ display:block; font-size:13px; color:var(--rung-text-muted); }
.ladder .go{ margin-left:auto; }
.gradmod .grad-foot{ margin-top:14px; font-size:14px; color:var(--rung-text-body); }

/* ---------- on-page nav ---------- */
.onpage{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  background:var(--rung-surface-alt); padding:var(--rung-space-4) var(--rung-space-5); }
.onpage .label{ display:block; margin-bottom:10px; }
.onpage ol{ margin:0; padding:0; list-style:none; counter-reset:toc; }
.onpage li{ counter-increment:toc; }
.onpage a{ display:flex; gap:12px; padding:8px 0; text-decoration:none; color:var(--rung-text-body); font-size:15px; }
.onpage a:hover{ color:var(--rung-text); }
.onpage a::before{ content:counter(toc,decimal-leading-zero); font-size:12px;
  color:var(--rung-text-faint); font-weight:700; }

/* ---------- FAQ ---------- */
.faq{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  background:var(--rung-surface); overflow:hidden; }
.faq details{ border-bottom:1px solid var(--rung-line); }
.faq details:last-child{ border-bottom:0; }
.faq summary{ list-style:none; cursor:pointer; padding:17px var(--rung-space-5); display:flex;
  align-items:center; justify-content:space-between; gap:14px; font-family:var(--rung-font-serif);
  font-weight:400; font-size:19px; letter-spacing:-.03em; color:var(--rung-text); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ico{ flex:none; width:20px; height:20px; position:relative; }
.faq summary .ico::before, .faq summary .ico::after{ content:""; position:absolute;
  background:var(--rung-ember); left:50%; top:50%; transform:translate(-50%,-50%); border-radius:2px; }
.faq summary .ico::before{ width:13px; height:2px; }
.faq summary .ico::after{ width:2px; height:13px; transition:opacity .3s; }
.faq details[open] summary .ico::after{ opacity:0; }
.faq .a{ padding:0 var(--rung-space-5) 18px; font-size:15px; color:var(--rung-text-body); }
.faq .a p{ margin:0; }

/* ---------- related cluster ---------- */
.related{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--rung-space-3); }
.related a{ display:block; border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  padding:var(--rung-space-5); text-decoration:none; background:var(--rung-surface);
  transition:transform .2s var(--rung-ease-enter), border-color .2s, box-shadow .2s; }
.related a:hover{ transform:translateY(-3px); border-color:var(--rung-line-strong); box-shadow:var(--rung-shadow-md); }
.related a .label{ display:block; margin-bottom:8px; }
.related a .t{ font-family:var(--rung-font-serif); font-weight:400; color:var(--rung-text);
  font-size:18px; line-height:1.15; letter-spacing:-.03em; }

/* ---------- trust strip ---------- */
.trust-strip{ display:flex; flex-wrap:wrap; gap:var(--rung-space-5); align-items:center;
  background:var(--rung-ink); border-radius:var(--rung-radius-xl); padding:var(--rung-space-5) var(--rung-space-6); }
.trust-strip .ts{ color:var(--rung-fog); font-size:14px; display:flex; align-items:center; gap:10px; }
.trust-strip .ts .n{ font-weight:700; font-size:26px; color:var(--rung-white); letter-spacing:-.04em; }
.trust-strip .ts.div{ width:1px; height:32px; background:color-mix(in srgb, var(--rung-white) 16%, transparent); padding:0; }
.trust-strip a{ color:var(--rung-white); font-weight:700; }

/* ---------- spoke index ---------- */
.spokes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--rung-space-2); }
.spokes a{ display:flex; align-items:center; gap:10px; padding:13px var(--rung-space-4);
  border:1px solid var(--rung-line); border-radius:var(--rung-pill); text-decoration:none;
  background:var(--rung-surface); color:var(--rung-text-body); font-size:14.5px;
  transition:border-color .2s, transform .2s var(--rung-ease-enter); }
.spokes a:hover{ border-color:var(--rung-ember); transform:translateY(-2px); color:var(--rung-text); }
.spokes a .q{ font-size:11px; color:var(--rung-text-faint); font-weight:700; }

/* ---------- intent lane cards ---------- */
.lanes{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--rung-space-4); }
.lane{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg); background:var(--rung-surface);
  padding:var(--rung-space-5); text-decoration:none; display:block;
  transition:transform .2s var(--rung-ease-enter), border-color .2s, box-shadow .2s; }
.lane:hover{ transform:translateY(-3px); border-color:var(--rung-line-strong); box-shadow:var(--rung-shadow-md); }
.lane .tag{ margin-bottom:14px; }
.lane h3{ font-size:24px; margin-bottom:8px; }
.lane p{ font-size:15px; color:var(--rung-text-muted); margin:0 0 12px; }
.lane .inside{ font-size:13px; color:var(--rung-text-faint); }
.lane .go{ color:var(--rung-ember-deep); font-family:var(--rung-font-sans); font-weight:700;
  font-size:14px; margin-top:12px; display:inline-block; }
@media(max-width:680px){ .lanes{ grid-template-columns:1fr; } }

/* ---------- tool cards ---------- */
.tools-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--rung-space-4); }
.toolcard{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  background:var(--rung-surface); padding:var(--rung-space-5); text-decoration:none;
  transition:transform .2s var(--rung-ease-enter), border-color .2s, box-shadow .2s; display:block; }
.toolcard:hover{ transform:translateY(-3px); border-color:var(--rung-line-strong); box-shadow:var(--rung-shadow-md); }
.toolcard .ic{ width:42px; height:42px; border-radius:var(--rung-pill); background:var(--rung-dusk-tint);
  color:var(--rung-dusk-deep); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
:root[data-theme="dark"] .toolcard .ic{ color:var(--rung-dusk); }
.toolcard h3{ font-size:20px; margin-bottom:6px; }
.toolcard p{ font-size:14px; color:var(--rung-text-muted); margin:0; }
@media(max-width:760px){ .tools-row{ grid-template-columns:1fr; } }

/* ---------- "different" section ---------- */
.diff{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--rung-space-5); }
.diff .d .num{ font-size:13px; color:var(--rung-text-faint); font-weight:700;
  border-top:3px solid var(--rung-ember); padding-top:12px; display:inline-block; width:100%; }
.diff .d h3{ font-size:21px; margin:12px 0 8px; }
.diff .d p{ font-size:15px; color:var(--rung-text-muted); margin:0; }
@media(max-width:760px){ .diff{ grid-template-columns:1fr; } }

/* ---------- homepage structure ---------- */
@media(max-width:900px){ .home-hero-grid{ grid-template-columns:1fr !important; } }
@media(max-width:520px){ .home-coverage-grid{ grid-template-columns:1fr !important; } }

/* ---------- calculator ---------- */
.calc{ border:1px solid var(--rung-line); border-radius:var(--rung-radius-lg);
  background:var(--rung-surface); overflow:hidden; box-shadow:var(--rung-shadow-sm); }
.calc-head{ padding:var(--rung-space-5); border-bottom:1px solid var(--rung-line); display:flex;
  justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--rung-surface-alt); }
.calc-head h4{ font-family:var(--rung-font-serif); font-weight:400; font-size:21px; letter-spacing:-.03em; }
.calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.calc-inputs{ padding:var(--rung-space-5); border-right:1px solid var(--rung-line); }
.calc-field{ margin-bottom:var(--rung-space-5); }
.calc-field:last-child{ margin-bottom:0; }
.calc-field label{ display:flex; justify-content:space-between; font-size:13px; font-weight:700;
  color:var(--rung-text-muted); margin-bottom:8px; }
.calc-field label .val{ font-weight:700; color:var(--rung-text); font-variant-numeric:tabular-nums; }
.calc-field input[type=range]{ width:100%; accent-color:var(--rung-ember); }
.calc-out{ padding:var(--rung-space-5); background:var(--rung-surface-alt); }
.calc-out .row{ display:flex; justify-content:space-between; align-items:baseline; padding:9px 0;
  border-bottom:1px solid var(--rung-line); }
.calc-out .row:last-of-type{ border-bottom:0; }
.calc-out .row .k{ font-size:13.5px; color:var(--rung-text-muted); }
.calc-out .row .v{ font-weight:700; font-size:21px; color:var(--rung-text); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums; }
.calc-out .row .v.ember{ color:var(--rung-ember-deep); }
.calc-meaning{ margin-top:var(--rung-space-4); font-size:14px; color:var(--rung-text-body);
  border-left:3px solid var(--rung-info); padding-left:12px; }
@media(max-width:640px){ .calc-grid{ grid-template-columns:1fr; }
  .calc-inputs{ border-right:0; border-bottom:1px solid var(--rung-line); } }

/* ---------- section rhythm ---------- */
.sec{ padding:var(--rung-space-8) 0; }
.sec-sm{ padding:var(--rung-space-7) 0; }
.sec h2{ font-size:clamp(30px,4.4vw,42px); margin-bottom:var(--rung-space-3); }
.sec .sub{ color:var(--rung-text-muted); margin-bottom:var(--rung-space-6); max-width:62ch; font-size:19px; }
.stack > * + *{ margin-top:var(--rung-space-6); }
.hr{ height:1px; background:var(--rung-line); border:0; margin:0; }
p.lede{ font-size:21px; line-height:1.55; color:var(--rung-text-muted); max-width:850px; }

/* ---------- footer ---------- */
footer.site{ background:var(--rung-ink); color:var(--rung-fog); margin-top:var(--rung-space-9);
  padding:var(--rung-space-8) 0 var(--rung-space-6); }
footer.site .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--rung-space-6); }
footer.site h4{ font-family:var(--rung-font-sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:11px; color:var(--rung-fog); margin-bottom:14px; }
footer.site a{ display:block; color:var(--rung-fog); text-decoration:none; font-size:14.5px; padding:5px 0; }
footer.site a:hover{ color:var(--rung-white); }
footer.site .brandcol p{ font-size:14px; color:var(--rung-fog); max-width:30ch; }
footer.site .legal{ border-top:1px solid rgba(255,255,255,.12); margin-top:var(--rung-space-7);
  padding-top:var(--rung-space-5); display:flex; flex-wrap:wrap; gap:var(--rung-space-4); align-items:center; }
footer.site .legal a{ display:inline; font-size:13px; color:var(--rung-fog); }
footer.site .legal .disc{ font-size:12.5px; color:var(--rung-fog); width:100%; margin-top:8px; }
@media(max-width:760px){ footer.site .cols{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ footer.site .cols{ grid-template-columns:1fr; } }

/* ---------- reveal ---------- */
.rise{ opacity:0; transform:translateY(16px); }
.rise.in{ opacity:1; transform:none;
  transition:opacity var(--rung-dur-enter) var(--rung-ease-enter), transform var(--rung-dur-enter) var(--rung-ease-enter); }
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }

/* ============================================================
   DL 3.0 narrative components
   ============================================================ */

/* Cost Story — total cost outranks the monthly payment */
.cost-story{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--rung-space-4); }
.cost-story .cs-figures{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--rung-space-3); }
.cost-story .metric.total{ border-color:var(--rung-ember); background:var(--rung-ember-tint); }
.cost-story .metric.total .value{ color:var(--rung-ember-deep); font-size:44px; }
.costLine{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--rung-line); }
.costLine:last-child{ border-bottom:0; }
@media(max-width:820px){ .cost-story{ grid-template-columns:1fr; }
  .cost-story .cs-figures{ grid-template-columns:1fr; } }

/* Mechanism Explainer — three calm steps */
.mechanism{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--rung-space-4); }
.mechanism .step{ padding:var(--rung-space-5); border:1px solid var(--rung-line);
  border-radius:var(--rung-radius-lg); background:var(--rung-surface); }
.mechanism .stepNo{ width:36px; height:36px; border-radius:var(--rung-pill); display:grid;
  place-items:center; background:var(--rung-surface-alt); font-weight:800; color:var(--rung-text);
  border:1px solid var(--rung-line); }
.mechanism .step h4{ margin:14px 0 6px; font-size:17px; }
.mechanism .step p{ margin:0; color:var(--rung-text-muted); font-size:14.5px; }
@media(max-width:820px){ .mechanism{ grid-template-columns:1fr; } }

/* Tradeoff Card */
.tradeoff{ display:grid; grid-template-columns:1fr 1fr; gap:var(--rung-space-4); }
@media(max-width:620px){ .tradeoff{ grid-template-columns:1fr; } }

/* Confidence Meter */
.confidence{ display:grid; gap:10px; }
.confidence .conf-head{ display:flex; justify-content:space-between; align-items:baseline; }
.confidence .conf-head strong{ font-size:15px; }
.confidence .conf-head span{ color:var(--rung-text-muted); font-size:14px; font-weight:700; }
.bar{ height:10px; background:var(--rung-line); border-radius:var(--rung-pill); overflow:hidden; }
.bar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--rung-ember),var(--rung-dusk)); }
.confidence p{ margin:0; font-size:14px; color:var(--rung-text-muted); }

/* Next Rung — graduation, always before the CTA */
.next-rung{ display:flex; align-items:center; justify-content:space-between; gap:var(--rung-space-5);
  padding:var(--rung-space-6); border-radius:var(--rung-radius-xl); border:1px solid var(--rung-line);
  background:linear-gradient(135deg, color-mix(in srgb,var(--rung-ember) 10%, var(--rung-surface)),
    color-mix(in srgb,var(--rung-dusk) 12%, var(--rung-surface))); }
.next-rung h3{ font-size:26px; margin-top:8px; }
.next-rung p{ margin:8px 0 0; color:var(--rung-text-muted); font-size:15px; max-width:56ch; }
.next-rung .btn{ flex:none; }
@media(max-width:760px){ .next-rung{ flex-direction:column; align-items:flex-start; } }

/* Form controls */
.field{ display:grid; gap:8px; }
.field label{ font-size:13px; font-weight:700; color:var(--rung-text-muted); }
.input,.select{ height:48px; border-radius:var(--rung-radius-md); border:1px solid var(--rung-line);
  background:var(--rung-surface); color:var(--rung-text); padding:0 14px; font-family:var(--rung-font-sans);
  font-size:15px; }