/* KIRA DULU — V9 component library, ported for the live repo.
   Source: DNS/work/kiradulu-v5-build/assets/kd.css  sha fe8668bedb169bf2
   Transformed 2026-09-04 (KD-V9-PORT-A round 2). Mechanical scoping, no design change.

   TOKENS are namespaced `--kd-*`. The live playful.css / visual-v2.css token set
   (--cream --paper --ink --coral --mint --mint-deep --line …) is therefore never
   shadowed, and no live rule inside the body can resolve a V9 value.

   SCOPE has two levels. `body.kd-v9` styles the SHELL ONLY: .rail .rail-in
   .rail nav .brand (rail-confined) .burger .sheet .sheet-h .scrim .ctl
   [data-switch] .pv .foot. EVERY other rule — the button system, cards, tags,
   grids, tables and all bare-element rules — is gated behind the second opt-in
   class `body.kd-v9.kd-v9-full`, so a page carrying only kd-v9 keeps its body
   content exactly as it was.

   Removed: the draft review-ribbon rules and the lab footer's colour/type
   declarations. Renamed: the segmented control to .seg-v9. */
/* ═══════════════════════════════════════════════════════════════════════
   KIRA DULU — COMPONENT LIBRARY  v5
   Palette: BRAND_KIT kiradulu-brand.json (verbatim hexes)
   Motion:  fable-forge/references/motion-spec.md — harvested exact values
            from transitions.dev, beui.dev, rareui, beautifului.dev
   System:  2 container radii + 1 marker radius · 2 drop shadows · 1 easing
   ═══════════════════════════════════════════════════════════════════════ */
body.kd-v9{
  /* ── brand, verbatim ────────────────────────────────── */
  --kd-cream:#FFF7EE;  --kd-paper:#FFFDFA;  --kd-ink:#1E1B16;  --kd-ink-2:#5C564C;
  --kd-coral:#FF6B4A;  --kd-coral-deep:#E8512F;
  --kd-mint:#1FB98C;   --kd-mint-deep:#149A73;
  --kd-sky:#4A8CFF;    --kd-lemon:#FFC94A;  --kd-grape:#6E5BE8;
  --kd-line:#EDE4D6;

  /* derived, same family */
  --kd-ink-3:#8B8274;  --kd-line-2:#DFD2BC;  --kd-sunk:#F6EDE0;
  --kd-sand:#D9C7A7;    /* quiet chart secondary — the "cost" half of a bar, never a verdict */
  --kd-forest:#201C16;  --kd-forest-2:#2A251E;  --kd-forest-3:#3B342B;   /* warm charcoal, not green */
  --kd-forest-ink:#F6F1E7;  --kd-forest-dim:#A89F90;

  /* semantics — off the brand green so they read as signal */
  --kd-ok:var(--kd-mint-deep);  --kd-mid:#B07708;  --kd-mid-ink:#8A6206;  --kd-hot:#C4432B;
  --kd-ok-lit:#4FD8A6;  --kd-mid-lit:var(--kd-lemon);  --kd-hot-lit:#FF8E70;
  --kd-ok-ink:#06251B;  --kd-lemon-ink:#3A2C05;
  --kd-ok-wash:rgba(79,216,166,.05); --kd-ok-fill:rgba(79,216,166,.14); --kd-ok-line:rgba(79,216,166,.34);
  --kd-mid-wash:rgba(255,201,74,.22);

  /* ── form ───────────────────────────────────────────── */
  --kd-r-lg:22px;  --kd-r-sm:10px;  --kd-r-xs:3px;  --kd-w:9ch;  --kd-i:0;  --kd-c:var(--kd-mint-deep);  --kd-len:1;
  --kd-sh-1:0 1px 2px rgba(30,27,22,.05), 0 0 0 1px var(--kd-line);
  --kd-sh-2:0 30px 70px -28px rgba(30,27,22,.34);   /* warm ink shadow — the old one was green-tinted */

  /* ── motion (transitions.dev scale) ─────────────────── */
  --kd-e:cubic-bezier(.22,1,.36,1);
  --kd-e-io:var(--kd-e); --kd-e-bounce:var(--kd-e); --kd-e-bounce-hard:var(--kd-e); --kd-e-drawer:var(--kd-e);
  --kd-t-stagger:40ms; --kd-t-micro:80ms; --kd-t-quick:150ms; --kd-t-fast:250ms;
  --kd-t-med:350ms;    --kd-t-slow:400ms;  --kd-t-vslow:500ms;

  --kd-gut:clamp(18px,4vw,44px);
  --kd-col:min(1240px,100% - (var(--kd-gut) * 2));
  --kd-grain:.03;
  color-scheme:light;
}
/* ── WARM DARK: system default unless the user chose light ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.kd-v9.kd-v9-full{
      --kd-cream:#14120E; --kd-paper:#1C1915; --kd-sunk:#241F1A;
      --kd-ink:#F5F0E6;   --kd-ink-2:#B3AA9B; --kd-ink-3:#867D6F;
      --kd-line:#2C2721;  --kd-line-2:#3D362D;  --kd-sand:#4A4133;
      --kd-forest:#26211A; --kd-forest-2:#302A22; --kd-forest-3:#443C31;
      --kd-forest-ink:#F0EBE0; --kd-forest-dim:#A89F90;
      --kd-mint-deep:#2ACF9D; --kd-ok:#2ACF9D; --kd-hot:#F0674C; --kd-mid:#E5B23A;
      --kd-sh-1:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--kd-line);
      --kd-sh-2:0 30px 70px -28px rgba(0,0,0,.7);
      --kd-grain:.05;
      color-scheme:dark;
    }
}
:root[data-theme="dark"] body.kd-v9.kd-v9-full{
  --kd-cream:#14120E; --kd-paper:#1C1915; --kd-sunk:#241F1A;
  --kd-ink:#F5F0E6;   --kd-ink-2:#B3AA9B; --kd-ink-3:#867D6F;
  --kd-line:#2C2721;  --kd-line-2:#3D362D;  --kd-sand:#4A4133;
  --kd-forest:#26211A; --kd-forest-2:#302A22; --kd-forest-3:#443C31;
  --kd-forest-ink:#F0EBE0; --kd-forest-dim:#A89F90;
  --kd-mint-deep:#2ACF9D; --kd-ok:#2ACF9D; --kd-hot:#F0674C; --kd-mid:#E5B23A;
  --kd-sh-1:0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--kd-line);
  --kd-sh-2:0 30px 70px -28px rgba(0,0,0,.7);
  --kd-grain:.05;
  color-scheme:dark;
}
body.kd-v9.kd-v9-full,body.kd-v9.kd-v9-full *,
body.kd-v9.kd-v9-full::before,body.kd-v9.kd-v9-full *::before,
body.kd-v9.kd-v9-full::after,body.kd-v9.kd-v9-full *::after{box-sizing:border-box}
html:has(> body.kd-v9.kd-v9-full){-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;scrollbar-gutter:stable}
body.kd-v9.kd-v9-full{margin:0;background:var(--kd-cream);color:var(--kd-ink);
  transition:background-color var(--kd-t-fast) var(--kd-e),color var(--kd-t-fast) var(--kd-e);
  font:400 15px/1.55 "Plus Jakarta Sans",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
body.kd-v9.kd-v9-full img{max-width:100%;display:block}
body.kd-v9.kd-v9-full button,
body.kd-v9.kd-v9-full input,
body.kd-v9.kd-v9-full select,
body.kd-v9.kd-v9-full textarea{font:inherit;color:inherit}
body.kd-v9.kd-v9-full button{cursor:pointer;background:none;border:0;touch-action:manipulation}
body.kd-v9.kd-v9-full a{color:inherit}
body.kd-v9.kd-v9-full h1,
body.kd-v9.kd-v9-full h2,
body.kd-v9.kd-v9-full h3,
body.kd-v9.kd-v9-full h4{margin:0;font-family:"Bricolage Grotesque",system-ui,sans-serif;
  text-wrap:balance;letter-spacing:-.035em}
body.kd-v9.kd-v9-full p{margin:0;text-wrap:pretty}
body.kd-v9.kd-v9-full :where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--kd-coral);outline-offset:3px;border-radius:4px}
body.kd-v9.kd-v9-full ::selection{background:var(--kd-coral);color:#fff}
body.kd-v9.kd-v9-full::before{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:var(--kd-grain);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.kd-v9.kd-v9-full .wrap{width:var(--kd-col);margin-inline:auto}
body.kd-v9.kd-v9-full .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.kd-v9.kd-v9-full .mono{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .tnum{font-variant-numeric:tabular-nums}
/* ═══ BUTTONS ═════════════════════════════════════════════
   press 0.96 (better-ui law) · hover-in ≤250ms · properties named   */
body.kd-v9.kd-v9-full .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border-radius:999px;
  font-size:14.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:transform var(--kd-t-quick) var(--kd-e),background-color var(--kd-t-quick) var(--kd-e),
             box-shadow var(--kd-t-quick) var(--kd-e),color var(--kd-t-quick) var(--kd-e)}
body.kd-v9.kd-v9-full .btn:active{transform:scale(.96)}
body.kd-v9.kd-v9-full .btn:disabled{opacity:.32;pointer-events:none}
body.kd-v9.kd-v9-full .btn-p{background:var(--kd-ink);color:var(--kd-paper)}
body.kd-v9.kd-v9-full .btn-p:hover{transform:translateY(-1px);background:#2C271F}
body.kd-v9.kd-v9-full .btn-p:active{transform:scale(.96)}
body.kd-v9.kd-v9-full .btn-a{background:var(--kd-coral);color:#fff}
body.kd-v9.kd-v9-full .btn-a:hover{transform:translateY(-1px);background:var(--kd-coral-deep)}
body.kd-v9.kd-v9-full .btn-a:active{transform:scale(.96)}
body.kd-v9.kd-v9-full .btn-g{background:var(--kd-ok-lit);color:var(--kd-ok-ink)}
body.kd-v9.kd-v9-full .btn-g:hover{transform:translateY(-1px)}
body.kd-v9.kd-v9-full .btn-o{box-shadow:inset 0 0 0 1px var(--kd-line-2);color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full .btn-o:hover{background:var(--kd-paper);box-shadow:inset 0 0 0 1px var(--kd-ink-3);color:var(--kd-ink)}
body.kd-v9.kd-v9-full .btn-q{color:var(--kd-ink-3);min-height:44px;padding:0 14px}
body.kd-v9.kd-v9-full .btn-q:hover{background:var(--kd-sunk);color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full .btn-sm{min-height:44px;padding:0 15px;font-size:13px}
body.kd-v9.kd-v9-full .btn-lg{min-height:56px;padding:0 28px;font-size:16px}
/* arrow that leans on hover */
body.kd-v9.kd-v9-full .btn svg{transition:transform var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .btn:hover svg[data-lean]{transform:translateX(3px)}
/* ═══ CHIP / PILL / TOGGLE ════════════════════════════════ */
body.kd-v9.kd-v9-full .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;
  border-radius:999px;box-shadow:inset 0 0 0 1px var(--kd-line-2);
  font-size:13.5px;font-weight:600;color:var(--kd-ink-2);
  transition:box-shadow var(--kd-t-quick) var(--kd-e),background-color var(--kd-t-quick) var(--kd-e),
             color var(--kd-t-quick) var(--kd-e),transform var(--kd-t-quick) var(--kd-e)}
body.kd-v9.kd-v9-full .chip:hover{background:var(--kd-sunk);box-shadow:inset 0 0 0 1px var(--kd-ink-3)}
body.kd-v9.kd-v9-full .chip:active{transform:scale(.96)}
body.kd-v9.kd-v9-full .chip[aria-pressed="true"],
body.kd-v9.kd-v9-full .chip[data-on]{background:var(--kd-ink);color:var(--kd-paper);box-shadow:none}
body.kd-v9.kd-v9-full .chip-sm{min-width:44px;min-height:44px;padding:0 12px;font-size:12.5px;gap:6px}
body.kd-v9.kd-v9-full .mk{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  box-shadow:inset 0 0 0 1.5px var(--kd-line-2);font-size:10px;font-weight:800;color:transparent;
  transition:background-color var(--kd-t-quick) var(--kd-e),color var(--kd-t-quick) var(--kd-e),
             box-shadow var(--kd-t-quick) var(--kd-e),transform var(--kd-t-quick) var(--kd-e)}
body.kd-v9.kd-v9-full .chip[aria-pressed="true"] .mk{background:var(--kd-paper);color:var(--kd-ink);box-shadow:none;transform:scale(1)}
body.kd-v9.kd-v9-full .tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 11px;border-radius:999px;
  background:var(--kd-sunk);font-size:11.5px;font-weight:700;color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full .tag-ok{background:rgba(31,185,140,.13);color:var(--kd-mint-deep)}
body.kd-v9.kd-v9-full .tag-mid{background:var(--kd-mid-wash);color:var(--kd-mid-ink)}
body.kd-v9.kd-v9-full .dot-badge{width:19px;height:19px;min-height:19px;padding:0;display:grid;place-items:center;font-size:11px;margin-top:1px}
body.kd-v9.kd-v9-full .tag-hot{background:rgba(196,67,43,.11);color:var(--kd-hot)}
body.kd-v9.kd-v9-full .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
/* ═══ TABS — sliding indicator, 250ms symmetric ═══════════ */
body.kd-v9.kd-v9-full .tabs{display:inline-flex;position:relative;gap:2px;padding:4px;border-radius:999px;background:var(--kd-sunk)}
body.kd-v9.kd-v9-full .tabs .ind{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;
  background:var(--kd-paper);box-shadow:var(--kd-sh-1);z-index:0;
  transition:transform var(--kd-t-fast) var(--kd-e),width var(--kd-t-fast) var(--kd-e);will-change:transform,width}
body.kd-v9.kd-v9-full .tabs button{position:relative;z-index:1;min-height:44px;padding:0 16px;border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--kd-ink-3);
  transition:color var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .tabs button[aria-selected="true"]{color:var(--kd-ink)}
body.kd-v9.kd-v9-full .tabs.u{background:none;padding:0;gap:4px;border-bottom:1px solid var(--kd-line);border-radius:0}
body.kd-v9.kd-v9-full .tabs.u .ind{top:auto;bottom:-1px;height:2px;background:var(--kd-coral);box-shadow:none;border-radius:2px}
body.kd-v9.kd-v9-full .tabs.u button{min-height:46px;padding:0 4px 10px}
/* ═══ SEGMENTED ══════════════════════════════════════════ */
body.kd-v9.kd-v9-full .seg-v9{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:var(--kd-sunk)}
body.kd-v9.kd-v9-full .seg-v9 button{min-height:44px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:var(--kd-ink-3);transition:background-color var(--kd-t-fast) var(--kd-e),color var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .seg-v9 button[aria-pressed="true"]{background:var(--kd-paper);color:var(--kd-ink);box-shadow:var(--kd-sh-1)}
/* ═══ CARD / PANEL ═══════════════════════════════════════ */
body.kd-v9.kd-v9-full .card{background:var(--kd-paper);border-radius:var(--kd-r-lg);box-shadow:var(--kd-sh-1);
  padding:clamp(20px,2.6vw,30px)}
body.kd-v9.kd-v9-full .card-lift{transition:transform var(--kd-t-fast) var(--kd-e),box-shadow var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .card-lift:hover{transform:translateY(-2px);box-shadow:var(--kd-sh-2)}
body.kd-v9.kd-v9-full .slab{background:var(--kd-forest);color:var(--kd-forest-ink);position:relative;overflow:hidden}
body.kd-v9.kd-v9-full .slab::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--kd-forest-3);pointer-events:none;z-index:2}
body.kd-v9.kd-v9-full .slab > *{position:relative;z-index:1}
body.kd-v9.kd-v9-full .slab .mono{color:var(--kd-forest-dim)}
body.kd-v9.kd-v9-full .slab .btn-o{box-shadow:inset 0 0 0 1px var(--kd-forest-3);color:var(--kd-forest-ink)}
body.kd-v9.kd-v9-full .slab .btn-o:hover{background:var(--kd-forest-2);box-shadow:inset 0 0 0 1px var(--kd-forest-dim);color:var(--kd-forest-ink)}
/* ═══ ACCORDION — grid 0fr→1fr, padding on the INNER child ═ */
body.kd-v9.kd-v9-full .acc details{border-bottom:1px solid var(--kd-line)}
body.kd-v9.kd-v9-full .acc summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  list-style:none;cursor:pointer;padding:18px 0;min-height:44px;
  font:700 16px/1.4 "Bricolage Grotesque",sans-serif;letter-spacing:-.025em}
body.kd-v9.kd-v9-full .acc summary::-webkit-details-marker{display:none}
body.kd-v9.kd-v9-full .acc summary::after{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--kd-sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235C564C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform 300ms var(--kd-e),background-color var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .acc details[open] summary::after{transform:scaleY(-1)}
body.kd-v9.kd-v9-full .acc-body{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--kd-t-fast) var(--kd-e),opacity var(--kd-t-quick) var(--kd-e)}
body.kd-v9.kd-v9-full details[open] > .acc-body{grid-template-rows:1fr;opacity:1}
body.kd-v9.kd-v9-full .acc-body > div{overflow:hidden}
body.kd-v9.kd-v9-full .acc-body p{padding:0 46px 20px 0;font-size:14px;line-height:1.65;color:var(--kd-ink-2);max-width:72ch}
/* reveal — same mechanism, standalone */
body.kd-v9.kd-v9-full .reveal{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--kd-t-fast) var(--kd-e),opacity var(--kd-t-quick) var(--kd-e)}
body.kd-v9.kd-v9-full .reveal[data-open]{grid-template-rows:1fr;opacity:1}
body.kd-v9.kd-v9-full .reveal > div{overflow:hidden}
/* ═══ FIELDS ═════════════════════════════════════════════ */
body.kd-v9.kd-v9-full .fld{display:flex;flex-direction:column;gap:7px}
body.kd-v9.kd-v9-full .fld > label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .fld-in{display:flex;align-items:baseline;gap:4px;padding:10px 14px;border-radius:var(--kd-r-sm);
  background:var(--kd-paper);box-shadow:inset 0 0 0 1px var(--kd-line-2);
  transition:box-shadow var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .fld-in:focus-within{box-shadow:inset 0 0 0 1px var(--kd-coral)}
body.kd-v9.kd-v9-full .fld-in em{font-style:normal;font-size:13px;font-weight:600;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .fld-in input{flex:1;min-width:0;border:0;background:none;padding:0;min-height:30px;
  font:700 19px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
body.kd-v9.kd-v9-full .fld-in input:focus{outline:0}
body.kd-v9.kd-v9-full .fld small{font-size:11.5px;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .fld[data-err] .fld-in{box-shadow:inset 0 0 0 1px var(--kd-hot)}
body.kd-v9.kd-v9-full .fld-err{font-size:12px;color:var(--kd-hot);font-weight:600}
body.kd-v9.kd-v9-full .big{display:flex;align-items:baseline;gap:6px}
body.kd-v9.kd-v9-full .big em{font-style:normal;font:700 clamp(20px,2.4vw,26px)/1 "Bricolage Grotesque",sans-serif;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .big input{width:var(--kd-w,9ch);border:0;background:none;padding:0 0 4px;
  font:800 clamp(32px,4.6vw,50px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;border-bottom:2px solid var(--kd-line-2);
  transition:border-color var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .big input:focus{outline:0;border-bottom-color:var(--kd-coral)}
/* range — neutral by default; .risk only where higher really is worse */
body.kd-v9.kd-v9-full input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none}
body.kd-v9.kd-v9-full input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--kd-sunk)}
body.kd-v9.kd-v9-full input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;
  border-radius:50%;background:var(--kd-paper);box-shadow:0 0 0 3px var(--kd-coral),0 1px 2px rgba(30,27,22,.05);
  transition:transform var(--kd-t-quick) var(--kd-e)}
body.kd-v9.kd-v9-full input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
body.kd-v9.kd-v9-full input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--kd-sunk)}
body.kd-v9.kd-v9-full input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;
  background:var(--kd-paper);box-shadow:0 0 0 3px var(--kd-coral)}
/* stepper */
body.kd-v9.kd-v9-full .stp{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:var(--kd-r-sm);
  background:var(--kd-paper);box-shadow:inset 0 0 0 1px var(--kd-line-2)}
body.kd-v9.kd-v9-full .stp button{width:44px;height:44px;border-radius:var(--kd-r-sm);font:700 19px/1 "Bricolage Grotesque",sans-serif;
  color:var(--kd-ink-2);transition:background-color var(--kd-t-quick) var(--kd-e),transform var(--kd-t-quick) var(--kd-e)}
body.kd-v9.kd-v9-full .stp button:hover{background:var(--kd-sunk)}
body.kd-v9.kd-v9-full .stp button:active{transform:scale(.92)}
body.kd-v9.kd-v9-full .stp input{width:5ch;border:0;background:none;text-align:center;
  font:700 20px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
body.kd-v9.kd-v9-full .stp input:focus{outline:0}
/* ═══ ERROR SHAKE — 4 segments / 280ms, per-keyframe easing ═ */
@keyframes kd-shake{
  0%{transform:translateX(0);animation-timing-function:var(--kd-e)}
  28.57%{transform:translateX(6px);animation-timing-function:var(--kd-e)}
  57.14%{transform:translateX(-6px);animation-timing-function:var(--kd-e)}
  78.57%{transform:translateX(4px);animation-timing-function:var(--kd-e)}
  100%{transform:translateX(0)}
}
body.kd-v9.kd-v9-full .shake{animation:kd-shake 280ms both}
/* ═══ SUCCESS CHECK — pathLength draw, 80ms delay ═════════ */
body.kd-v9.kd-v9-full .check circle{opacity:0;transform:scale(.6);transform-origin:center;
  transition:opacity var(--kd-t-fast) var(--kd-e),transform var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .check path{stroke-dasharray:var(--kd-len,30);stroke-dashoffset:var(--kd-len,30);
  transition:stroke-dashoffset var(--kd-t-med) var(--kd-e) var(--kd-t-micro)}
body.kd-v9.kd-v9-full .check[data-on] circle{opacity:1;transform:scale(1)}
body.kd-v9.kd-v9-full .check[data-on] path{stroke-dashoffset:0}
/* ═══ SPINNER / SHIMMER / SKELETON ════════════════════════ */
@keyframes kd-spin{to{transform:rotate(360deg)}}
body.kd-v9.kd-v9-full .spin{display:inline-block;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--kd-line-2);border-top-color:var(--kd-coral);animation:kd-spin 700ms linear infinite}
@keyframes kd-pulse{0%,100%{opacity:.45}50%{opacity:1}}
body.kd-v9.kd-v9-full .shimmer{color:var(--kd-ink-3);animation:kd-pulse 1.4s var(--kd-e-io) infinite}
body.kd-v9.kd-v9-full .skel{position:relative}
body.kd-v9.kd-v9-full .skel > .sk-l,
body.kd-v9.kd-v9-full .skel > .sk-c{transition:opacity var(--kd-t-slow) var(--kd-e-io),filter var(--kd-t-slow) var(--kd-e-io)}
body.kd-v9.kd-v9-full .skel > .sk-l{opacity:1;filter:blur(0)}
body.kd-v9.kd-v9-full .skel > .sk-c{opacity:0;filter:blur(2px)}
body.kd-v9.kd-v9-full .skel[data-ready] > .sk-l{opacity:0;filter:blur(2px);pointer-events:none;position:absolute;inset:0}
body.kd-v9.kd-v9-full .skel[data-ready] > .sk-c{opacity:1;filter:blur(0)}
body.kd-v9.kd-v9-full .sk-bar{height:12px;border-radius:999px;background:var(--kd-sunk);margin-bottom:9px}
/* ═══ TOAST — open 350 / close 250, one composed transform ═ */
body.kd-v9.kd-v9-full .toasts{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column-reverse;
  gap:9px;pointer-events:none}
body.kd-v9.kd-v9-full .toast{pointer-events:auto;display:flex;align-items:flex-start;gap:11px;min-width:260px;max-width:360px;
  padding:14px 16px;border-radius:var(--kd-r-lg);background:var(--kd-paper);box-shadow:var(--kd-sh-2),0 0 0 1px var(--kd-line);
  opacity:0;transform:translateY(16px) scale(.97);filter:blur(2px);
  transition:opacity var(--kd-t-fast) var(--kd-e),transform var(--kd-t-fast) var(--kd-e),filter var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .toast[data-on]{opacity:1;transform:translateY(0) scale(1);filter:blur(0);
  transition-duration:var(--kd-t-med)}
body.kd-v9.kd-v9-full .toast i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-style:normal;font-size:12px;font-weight:800}
body.kd-v9.kd-v9-full .toast.ok i{background:rgba(31,185,140,.14);color:var(--kd-mint-deep)}
body.kd-v9.kd-v9-full .toast.err i{background:rgba(196,67,43,.11);color:var(--kd-hot)}
body.kd-v9.kd-v9-full .toast b{display:block;font-size:13.5px}
body.kd-v9.kd-v9-full .toast span{display:block;margin-top:3px;font-size:12.5px;color:var(--kd-ink-3)}
/* ═══ TOOLTIP — 150ms in / 50ms out, 80ms delay on hover only ═ */
body.kd-v9.kd-v9-full .tip{position:relative;display:inline-flex}
body.kd-v9.kd-v9-full .tip > .tip-b{position:absolute;bottom:calc(100% + 8px);left:50%;z-index:60;
  transform:translateX(-50%) scale(.98);opacity:0;pointer-events:none;
  padding:7px 11px;border-radius:var(--kd-r-sm);background:var(--kd-ink);color:var(--kd-paper);
  font-size:12px;font-weight:600;white-space:nowrap;
  transition:opacity 50ms ease-out,transform 50ms ease-out}
body.kd-v9.kd-v9-full .tip:hover > .tip-b,
body.kd-v9.kd-v9-full .tip:focus-within > .tip-b{opacity:1;transform:translateX(-50%) scale(1);
  transition:opacity var(--kd-t-quick) ease-out var(--kd-t-micro),transform var(--kd-t-quick) ease-out var(--kd-t-micro)}
/* ═══ ICON SWAP — scale .25→1, blur 2px, 250ms ════════════ */
body.kd-v9.kd-v9-full .iswap{position:relative;display:inline-grid;place-items:center;width:1em;height:1em}
body.kd-v9.kd-v9-full .iswap > *{grid-area:1/1;transition:opacity var(--kd-t-fast) var(--kd-e-io),transform var(--kd-t-fast) var(--kd-e-io),
  filter var(--kd-t-fast) var(--kd-e-io)}
body.kd-v9.kd-v9-full .iswap > [data-off]{opacity:0;transform:scale(.25);filter:blur(2px)}
/* ═══ PROGRESS DOTS ══════════════════════════════════════ */
body.kd-v9.kd-v9-full .dots{display:flex;gap:5px;align-items:center}
body.kd-v9.kd-v9-full .dots i{width:7px;height:7px;border-radius:50%;background:var(--kd-line-2);
  transition:background-color var(--kd-t-fast) var(--kd-e),transform var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .dots i[data-on]{background:var(--kd-ink);transform:scale(1.15)}
body.kd-v9.kd-v9-full .dots i[data-done]{background:var(--kd-mint)}
/* ═══ TABLE ══════════════════════════════════════════════ */
body.kd-v9.kd-v9-full .tbl-wrap{position:relative}
body.kd-v9.kd-v9-full .tbl-wrap::after{content:"";position:absolute;top:0;right:0;width:2px;height:100%;pointer-events:none;
  opacity:0;transition:opacity var(--kd-t-fast) var(--kd-e);background:var(--kd-line-2)}
body.kd-v9.kd-v9-full .tbl-wrap[data-xscroll]::after{opacity:1}
body.kd-v9.kd-v9-full .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
body.kd-v9.kd-v9-full table{width:100%;border-collapse:collapse;min-width:520px}
body.kd-v9.kd-v9-full th,
body.kd-v9.kd-v9-full td{text-align:right;padding:14px 13px;border-bottom:1px solid var(--kd-line);white-space:nowrap}
body.kd-v9.kd-v9-full thead th{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--kd-ink-3);
  padding-top:0;border-bottom:1px solid var(--kd-line-2)}
body.kd-v9.kd-v9-full tbody th,
body.kd-v9.kd-v9-full thead th:first-child{text-align:left}
body.kd-v9.kd-v9-full tbody th{font-weight:600;font-size:13.5px;color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full tbody tr:last-child th,
body.kd-v9.kd-v9-full tbody tr:last-child td{border-bottom:0}
body.kd-v9.kd-v9-full tbody tr{transition:background-color 100ms var(--kd-e)}
body.kd-v9.kd-v9-full tbody tr:hover{background:var(--kd-sunk)}
body.kd-v9.kd-v9-full td{font:700 16px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
body.kd-v9.kd-v9-full td small{display:block;margin-top:4px;font:500 11.5px/1 "Plus Jakarta Sans",sans-serif;color:var(--kd-ink-3);letter-spacing:0}
/* Phones: the 520px min-width made a 5-column schedule permanently overflow a
   ~318px card, so the Interest and Balance columns were clipped off-screen.
   Drop the floor and tighten the cells so the whole table fits without scrolling;
   the sub-label is allowed to wrap instead of forcing its column wide. */
@media (max-width:560px){
  body.kd-v9.kd-v9-full table{min-width:0}
  body.kd-v9.kd-v9-full th,
  body.kd-v9.kd-v9-full td{padding:9px 4px}
  body.kd-v9.kd-v9-full td{font-size:12.5px}
  body.kd-v9.kd-v9-full tbody th{font-size:12px}
  body.kd-v9.kd-v9-full thead th{font-size:9.5px;letter-spacing:.045em}
  body.kd-v9.kd-v9-full td small{font-size:10px;margin-top:2px;white-space:normal}
}
body.kd-v9.kd-v9-full col.here{background:var(--kd-sunk)}
body.kd-v9.kd-v9-full thead th.here{color:var(--kd-ink);position:relative}
body.kd-v9.kd-v9-full thead th.here::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--kd-coral)}
/* ═══ NAV RAIL ═══════════════════════════════════════════ */
body.kd-v9 .rail{border-bottom:1px solid var(--kd-line);background:var(--kd-cream);position:sticky;top:0;z-index:70;
  backdrop-filter:blur(14px) saturate(150%)}
body.kd-v9 .rail-in{display:flex;align-items:center;gap:20px;height:62px}
body.kd-v9 .rail .brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
body.kd-v9 .rail .brand img{width:34px;height:34px;border-radius:var(--kd-r-sm)}
body.kd-v9 .rail .brand b{font:700 17px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.035em}
body.kd-v9 .rail .brand i{display:block;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--kd-ink-3);margin-top:3px}
body.kd-v9 .rail nav{display:flex;gap:2px}
body.kd-v9 .rail nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:var(--kd-r-sm);
  font-size:13.5px;font-weight:500;color:var(--kd-ink-2);text-decoration:none;
  transition:background-color var(--kd-t-fast) var(--kd-e),color var(--kd-t-fast) var(--kd-e)}
body.kd-v9 .rail nav a:hover{background:var(--kd-sunk);color:var(--kd-ink)}
body.kd-v9 .rail nav a[aria-current]{background:var(--kd-ink);color:var(--kd-paper)}
body.kd-v9 .pv{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;border-radius:999px;
  background:var(--kd-paper);box-shadow:inset 0 0 0 1px var(--kd-line);font-size:12px;font-weight:600;color:var(--kd-ink-2)}
body.kd-v9 .pv i{width:6px;height:6px;border-radius:50%;background:var(--kd-mint);flex:0 0 auto}
body.kd-v9 .burger{display:none;width:44px;height:44px;border-radius:var(--kd-r-sm)}
body.kd-v9 .burger:hover{background:var(--kd-sunk)}
/* ═══ SHEET (mobile nav) — EASE_DRAWER 0.5s ═══════════════ */
body.kd-v9 .scrim{position:fixed;inset:0;z-index:98;background:rgba(30,27,22,.42);opacity:0;pointer-events:none;
  transition:opacity var(--kd-t-vslow) var(--kd-e-drawer)}
body.kd-v9 .scrim[data-on]{opacity:1;pointer-events:auto}
/* visibility rides along so the six closed-sheet links leave the tab order and the
   accessibility tree — previously keyboard users tabbed through an invisible menu. */
body.kd-v9 .sheet{position:fixed;left:0;right:0;bottom:0;z-index:99;max-height:88svh;overflow-y:auto;
  overscroll-behavior:contain;background:var(--kd-paper);border-radius:var(--kd-r-lg) var(--kd-r-lg) 0 0;
  padding:10px 18px calc(24px + env(safe-area-inset-bottom));visibility:hidden;
  transform:translateY(100%);will-change:transform;
  transition:transform var(--kd-t-vslow) var(--kd-e-drawer),visibility 0s linear var(--kd-t-vslow)}
body.kd-v9 .sheet[data-on]{transform:translateY(0);visibility:visible;transition:transform var(--kd-t-vslow) var(--kd-e-drawer),visibility 0s}
body.kd-v9 .sheet-h{display:grid;place-items:center;padding:8px 0 14px}
body.kd-v9 .sheet-h i{width:40px;height:5px;border-radius:999px;background:var(--kd-line-2)}
body.kd-v9 .sheet a{display:flex;align-items:center;min-height:52px;padding:0 6px;border-bottom:1px solid var(--kd-line);
  text-decoration:none;font-size:16px;font-weight:600}
/* ═══ CRUMB · HERO · SECTION · FOOT ═══════════════════════ */
body.kd-v9.kd-v9-full .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:18px 0 0;font-size:12.5px;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .crumb a{text-decoration:none;font-weight:600;color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full .crumb a:hover{color:var(--kd-ink)}
body.kd-v9.kd-v9-full .hero{padding:clamp(28px,4.4vw,54px) 0 clamp(24px,3.4vw,38px)}
/* Words sit at 600: big + lighter + tight reads expensive. Numbers stay 800 —
   on this site the number is the loud element, the headline supports it. */
body.kd-v9.kd-v9-full .hero h1{font:600 clamp(34px,5vw,64px)/1.0 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em;max-width:16ch}
body.kd-v9.kd-v9-full .hero h1 em{font-style:italic;font-weight:600;color:var(--kd-ink-3)}
/* Tool pages: the h1 names the tool; the answer number outranks it by ~2×. */
body.kd-v9.kd-v9-full .hero-tool h1{font-size:clamp(28px,3.3vw,42px);max-width:22ch}
body.kd-v9.kd-v9-full .hero-tool .lede{font-size:15px;max-width:54ch;margin-top:12px}
body.kd-v9.kd-v9-full .lede{margin-top:16px;max-width:58ch;font-size:clamp(15px,1.5vw,17px);line-height:1.6;color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full .sec{padding:clamp(34px,4.6vw,64px) 0 0}
body.kd-v9.kd-v9-full .sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
body.kd-v9.kd-v9-full .sec-h h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.035em}
body.kd-v9.kd-v9-full .sec-h p{margin-top:8px;font-size:14px;color:var(--kd-ink-2);max-width:60ch}
body.kd-v9.kd-v9-full .trust{display:flex;flex-wrap:wrap;gap:10px 28px;padding:16px 0;border-top:1px solid var(--kd-line);
  border-bottom:1px solid var(--kd-line);font-size:12.5px;font-weight:600;color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full .trust span{display:inline-flex;align-items:center;gap:8px}
body.kd-v9.kd-v9-full .trust i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:9px;font-weight:800;background:var(--kd-sunk);color:var(--kd-ink-2);flex:0 0 auto}
body.kd-v9 .foot{margin-top:clamp(44px,6vw,76px);padding:26px 0 44px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
body.kd-v9 .foot p{max-width:66ch}
/* ═══ GRIDS ══════════════════════════════════════════════ */
body.kd-v9.kd-v9-full .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
body.kd-v9.kd-v9-full .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
body.kd-v9.kd-v9-full .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
body.kd-v9.kd-v9-full .split{display:grid;grid-template-columns:330px minmax(0,1fr);gap:clamp(18px,2.6vw,34px);align-items:start}
body.kd-v9.kd-v9-full .stack{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px}
/* ═══ STAT / ANSWER ══════════════════════════════════════ */
body.kd-v9.kd-v9-full .ans-n{font:800 clamp(46px,6.6vw,88px)/.86 "Bricolage Grotesque",sans-serif;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums}
body.kd-v9.kd-v9-full .ans-n i{font-style:normal;font-size:.4em;font-weight:700;vertical-align:.44em;margin-right:.08em;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .slab .ans-n i{color:var(--kd-forest-dim)}
body.kd-v9.kd-v9-full .stat dt{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .stat dd{margin:8px 0 0;font:700 clamp(20px,2.3vw,27px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em}
body.kd-v9.kd-v9-full .stat p{margin-top:7px;font-size:12.5px;color:var(--kd-ink-3)}
/* bars */
body.kd-v9.kd-v9-full .bars{display:flex;align-items:flex-end;gap:2px;height:150px}
body.kd-v9.kd-v9-full .bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-width:0;
  transition:height var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .bars i{display:block;border-radius:var(--kd-r-xs)}
body.kd-v9.kd-v9-full .bars .p{background:var(--kd-mint-deep)}
body.kd-v9.kd-v9-full .bars .i{background:var(--kd-sand)}
body.kd-v9.kd-v9-full .key{display:flex;gap:18px;margin-top:14px;font-size:12px;font-weight:600;color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full .key span{display:inline-flex;align-items:center;gap:7px}
body.kd-v9.kd-v9-full .key i{width:9px;height:9px;border-radius:var(--kd-r-xs)}
body.kd-v9.kd-v9-full .rail-bar{height:44px;display:flex;border-radius:var(--kd-r-sm);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(30,27,22,.07)}
body.kd-v9.kd-v9-full .rail-bar span{display:flex;align-items:center;padding-left:11px;min-width:0;overflow:hidden;
  font-size:11px;font-weight:700;color:#fff;white-space:nowrap;transition:flex-basis var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .minibar{height:7px;border-radius:999px;background:var(--kd-sunk);overflow:hidden}
body.kd-v9.kd-v9-full .minibar i{display:block;height:100%;border-radius:999px;background:var(--kd-c,var(--kd-mint-deep));
  transition:width var(--kd-t-fast) var(--kd-e)}
/* gauge */
body.kd-v9.kd-v9-full .gauge{position:relative;display:grid;place-items:center}
body.kd-v9.kd-v9-full .gauge svg{width:100%;height:auto;overflow:visible}
body.kd-v9.kd-v9-full .g-t{fill:none;stroke:var(--kd-forest-3);stroke-width:15;stroke-linecap:round}
body.kd-v9.kd-v9-full .g-f{fill:none;stroke:var(--kd-ok-lit);stroke-width:15;stroke-linecap:round;
  transition:stroke-dashoffset var(--kd-t-fast) var(--kd-e),stroke var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .g-f.is-mid{stroke:var(--kd-mid-lit)}
body.kd-v9.kd-v9-full .g-f.is-hot{stroke:var(--kd-hot-lit)}
body.kd-v9.kd-v9-full .g-mid{position:absolute;top:52%;left:0;right:0;text-align:center;transform:translateY(-50%)}
body.kd-v9.kd-v9-full .g-mid strong{display:block;font:800 clamp(28px,3.2vw,40px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.045em}
body.kd-v9.kd-v9-full .g-mid > span{display:block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--kd-forest-dim)}
/* ═══ LEDGER — the house list: ruled rows, № · title · one line · arrow ═══
   Replaces the equal-weight card grids. One deliberate grid break per page
   comes from the featured slab above a ledger, not from more cards. */
body.kd-v9.kd-v9-full .ledger{border-top:1px solid var(--kd-line-2)}
body.kd-v9.kd-v9-full .ledger>*{display:grid;grid-template-columns:3ch minmax(0,1fr) auto;gap:6px 18px;align-items:baseline;
  padding:17px 10px;margin:0 -10px;border-bottom:1px solid var(--kd-line);text-decoration:none;color:inherit;
  border-radius:var(--kd-r-sm)}
body.kd-v9.kd-v9-full .ledger>a{transition:background-color var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .ledger>a:hover{background:var(--kd-sunk)}
body.kd-v9.kd-v9-full .ledger .n{font:700 11.5px/1 "Bricolage Grotesque",sans-serif;letter-spacing:.06em;color:var(--kd-ink-3);
  font-variant-numeric:tabular-nums}
body.kd-v9.kd-v9-full .ledger h3{font-size:clamp(17px,1.6vw,20px);font-weight:700;letter-spacing:-.03em}
body.kd-v9.kd-v9-full .ledger p{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--kd-ink-2);max-width:60ch}
body.kd-v9.kd-v9-full .ledger .go{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--kd-coral-deep);white-space:nowrap;align-self:center}
body.kd-v9.kd-v9-full .ledger .go svg{transition:transform var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .ledger>a:hover .go svg{transform:translateX(3px)}
body.kd-v9.kd-v9-full .ledger.cols{columns:2;column-gap:clamp(28px,4vw,56px)}
body.kd-v9.kd-v9-full .ledger.cols>*{break-inside:avoid}
@media (max-width:900px){
  body.kd-v9.kd-v9-full .ledger.cols{columns:1}
}
@media (max-width:560px){
  body.kd-v9.kd-v9-full .ledger>*{grid-template-columns:3ch minmax(0,1fr)}
  body.kd-v9.kd-v9-full .ledger .go{grid-column:2}
  /* The 11-tool index is a compact ledger on a phone: title + arrow, no blurb.
       The three question rows above keep their one line — they carry the pitch. */
  body.kd-v9.kd-v9-full .ledger.cols>*{grid-template-columns:3ch minmax(0,1fr) auto;padding:13px 10px;align-items:center}
  body.kd-v9.kd-v9-full .ledger.cols p{display:none}
  body.kd-v9.kd-v9-full .ledger.cols h3{font-size:16px}
  body.kd-v9.kd-v9-full .ledger.cols .go{grid-column:auto}
  body.kd-v9.kd-v9-full .ledger.cols .go span{display:none}
}
/* ═══ NOTE — ruled callout. Notes are not answers, so they lose the card chrome ═══ */
body.kd-v9.kd-v9-full .note{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--kd-line);
  border-bottom:1px solid var(--kd-line);font-size:13px;line-height:1.6;color:var(--kd-ink-2)}
body.kd-v9.kd-v9-full .note b{color:var(--kd-ink)}
body.kd-v9.kd-v9-full .note input[type=checkbox]{margin-top:3px;width:18px;height:18px;accent-color:var(--kd-coral);flex:0 0 auto}
/* ═══ HERO INSTRUMENT — the homepage hero IS a calculator ═══════════
   Left: the headline. Right: one live, sourced number the visitor can nudge,
   with the tiger presenting it. The number is the loudest thing on the page. */
body.kd-v9.kd-v9-full .hero-inst{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);
  gap:clamp(24px,5vw,72px);align-items:end}
body.kd-v9.kd-v9-full .hero-copy .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
body.kd-v9.kd-v9-full .hero-side{position:relative;padding-right:clamp(74px,8vw,112px)}
body.kd-v9.kd-v9-full .inst{box-shadow:var(--kd-sh-2)}
body.kd-v9.kd-v9-full .inst-n{display:flex;align-items:baseline;gap:4px;margin-top:10px;
  font:800 clamp(46px,5.6vw,74px)/.9 "Bricolage Grotesque",sans-serif;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
body.kd-v9.kd-v9-full .inst-n i{font-style:normal;font-size:.4em;font-weight:700;color:var(--kd-ink-3);vertical-align:.44em}
body.kd-v9.kd-v9-full .inst-n small{font:600 14px/1 "Plus Jakarta Sans",sans-serif;color:var(--kd-ink-3);letter-spacing:0;margin-left:4px}
body.kd-v9.kd-v9-full .inst-sub{margin-top:11px;font-size:13px;line-height:1.5;color:var(--kd-ink-2);max-width:40ch}
body.kd-v9.kd-v9-full .inst-ctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--kd-line)}
body.kd-v9.kd-v9-full .inst-ctl label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .inst-ctl label span{display:inline-flex;align-items:baseline;gap:3px;padding:5px 10px;border-radius:var(--kd-r-sm);
  background:var(--kd-sunk);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--kd-t-fast) var(--kd-e)}
body.kd-v9.kd-v9-full .inst-ctl label span:focus-within{box-shadow:inset 0 0 0 1px var(--kd-coral)}
body.kd-v9.kd-v9-full .inst-ctl em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--kd-ink-3)}
body.kd-v9.kd-v9-full .inst-ctl input{width:7ch;border:0;background:none;padding:0;min-height:30px;
  font:700 15px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
body.kd-v9.kd-v9-full .inst-ctl input:focus{outline:0}
body.kd-v9.kd-v9-full .inst-fixed{font-size:11.5px;color:var(--kd-ink-3);font-weight:600;margin-left:auto}
body.kd-v9.kd-v9-full .inst-go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:12.5px;font-weight:700;
  color:var(--kd-coral-deep);text-decoration:none}
body.kd-v9.kd-v9-full .inst-go:hover svg{transform:translateX(3px)}
body.kd-v9.kd-v9-full .inst-go svg{transition:transform var(--kd-t-fast) var(--kd-e)}
/* Tiger: anchored to the hero's bottom-right, feet on the trust rule, never floating. */
body.kd-v9.kd-v9-full .kd-mascot{position:absolute;right:0;bottom:-8px;margin:0;width:clamp(120px,11vw,160px);z-index:2;
  filter:drop-shadow(0 14px 14px rgba(30,27,22,.18))}
body.kd-v9.kd-v9-full .kd-mascot img{width:100%;height:auto;aspect-ratio:795/1200;object-fit:contain}
@media (max-width:1080px){
  body.kd-v9.kd-v9-full .hero-inst{grid-template-columns:minmax(0,1fr) minmax(320px,400px)}
}
@media (max-width:860px){
  body.kd-v9.kd-v9-full .hero-inst{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  /* On a phone the tiger stands beside the headline — anchored to the words, not adrift. */
  body.kd-v9.kd-v9-full .hero-copy{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:12px 14px;align-items:end}
  body.kd-v9.kd-v9-full .hero-copy>*{grid-column:1}
  body.kd-v9.kd-v9-full .hero-copy .lede,
  body.kd-v9.kd-v9-full .hero-copy .cta{grid-column:1/-1}
  body.kd-v9.kd-v9-full .kd-mascot{position:static;grid-column:2;grid-row:1/3;width:88px;align-self:end}
  body.kd-v9.kd-v9-full .hero-side{padding-right:0}
}
/* ═══ ENTRANCE — fade-up, first load only, 90ms stagger ═══ */
@keyframes kd-up{from{opacity:0;transform:translateY(8px);filter:blur(2px)}
                 to{opacity:1;transform:translateY(0);filter:blur(0)}}
body.kd-v9.kd-v9-full [data-up]{animation:kd-up var(--kd-t-slow) var(--kd-e) both;animation-delay:calc(var(--kd-i,0) * 90ms)}
/* ═══ RESPONSIVE ═════════════════════════════════════════ */
@media (max-width:1080px){
  body.kd-v9.kd-v9-full .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.kd-v9.kd-v9-full .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.kd-v9.kd-v9-full .split{grid-template-columns:minmax(0,1fr)}
  body.kd-v9.kd-v9-full .stack{position:static}
}
@media (max-width:900px){
  body.kd-v9 .pv{display:none}
  /* The theme switcher now lives in the rail. Keep the 44px touch targets but
       reclaim width from the decorative tagline so the header stays one line. */
  body.kd-v9 .rail-in{gap:10px}
  body.kd-v9 .rail .brand i{display:none}
  body.kd-v9 [data-switch] .ctl{margin-left:0!important}
  body.kd-v9 .ctl button{padding:0 4px;font-size:12px}
}
@media (max-width:760px){
  body.kd-v9.kd-v9-full .g2,
  body.kd-v9.kd-v9-full .g3,
  body.kd-v9.kd-v9-full .g4{grid-template-columns:minmax(0,1fr)}
  /* Cards carrying an inline grid-column:span 2 (the featured slab) would
       manufacture an implicit 2nd column once the grid is single-column, which
       squeezed the next card down to ~80px. Force every child back to one column. */
  body.kd-v9.kd-v9-full .g2>*,
  body.kd-v9.kd-v9-full .g3>*,
  body.kd-v9.kd-v9-full .g4>*{grid-column:auto!important}
  /* The featured slab is a flex ROW (copy + gauge) with min-height:230px and
       align-items:flex-end. On a phone that left a tall empty band above the copy. */
  body.kd-v9.kd-v9-full .slab[style*="span 2"]{flex-direction:column!important;align-items:flex-start!important;
      min-height:0!important;gap:18px!important}
  body.kd-v9.kd-v9-full .slab.feat{flex-direction:column!important;align-items:flex-start!important;min-height:0!important}
  body.kd-v9.kd-v9-full .slab.feat > div:last-child{text-align:left!important}
  body.kd-v9.kd-v9-full .sec-h{flex-direction:column;align-items:flex-start}
  body.kd-v9.kd-v9-full .sec-h .tag{order:-1}
  body.kd-v9.kd-v9-full .hero h1{max-width:none}
  /* Ask Kira band: let the CTA drop to its own line instead of crushing the copy. */
  body.kd-v9.kd-v9-full .kd-ask{flex-wrap:wrap;gap:14px!important}
  body.kd-v9.kd-v9-full .kd-ask>span:last-child{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html:has(> body.kd-v9.kd-v9-full){scroll-behavior:auto}
  body.kd-v9.kd-v9-full,body.kd-v9.kd-v9-full *,
  body.kd-v9.kd-v9-full::before,body.kd-v9.kd-v9-full *::before,
  body.kd-v9.kd-v9-full::after,body.kd-v9.kd-v9-full *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ═══ REVIEW RIBBON — draft build only, removed before launch ═══ */
/* ═══ SKIN + THEME SWITCHER ═══════════════════════════════ */
body.kd-v9 .ctl{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--kd-sunk);
  box-shadow:inset 0 0 0 1px var(--kd-line)}
body.kd-v9 .ctl button{height:44px;min-width:44px;padding:0 10px;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--kd-ink-3);
  transition:background-color var(--kd-t-quick) var(--kd-e),color var(--kd-t-quick) var(--kd-e)}
body.kd-v9 .ctl button:hover{color:var(--kd-ink)}
body.kd-v9 .ctl button[aria-pressed="true"]{background:var(--kd-paper);color:var(--kd-ink);box-shadow:var(--kd-sh-1)}
/* The privacy pill left the shared rail (the trust strip already says it); only the
   eligibility page keeps one because its wording changes once a form is on screen. */
@media (max-width:1180px){
  body.kd-v9 .pv{display:none}
}
body.kd-v9 .rail nav a{white-space:nowrap}
body.kd-v9 .ctl button{padding:0 8px}
/* Mascot placement now lives with .hero-inst above (desktop: anchored bottom-right
   of the hero; phone: beside the headline). The old centred-under-CTAs block is gone. */

/* ═══ PORT-ONLY ADDITIONS (not in the lab file) ══════════════════════════
   Everything below this line is hand-written for the live shell; everything
   above it is a mechanical transform of the lab stylesheet. */

/* --- Rail sizing -------------------------------------------------------
   The lab rail carried five links and no CTA. The live rail carries seven
   links, a brand, a theme switcher and a burger, and the lab's fixed-height
   no-wrap row overflowed at measured widths (17px at 768, 122px at 901,
   25px at 320). Letting it wrap at any width fixes all three and leaves the
   62px single row intact on desktop. */
body.kd-v9 .rail-in{flex-wrap:wrap;height:auto;min-height:62px;row-gap:6px;padding-block:6px}
body.kd-v9 .rail nav{flex-wrap:wrap;gap:2px 4px}
@media (max-width:1120px){
  body.kd-v9 .rail nav a{padding:0 9px;min-height:44px;font-size:13px}
}

/* --- Mobile sheet is a progressive enhancement -------------------------
   `.rail nav` is hidden and the burger shown only under `html.js`. Without
   JavaScript the rail wraps and all seven links stay visible and tappable. */
@media (max-width:760px){
  html.js body.kd-v9 .rail nav{display:none}
  html.js body.kd-v9 .burger{display:grid;place-items:center}
}

/* --- Rail CTA ----------------------------------------------------------
   `.rail nav a` (0,2,3) outranks the live `.btn` (0,1,0) and would strip the
   CTA back to a plain link. The button system itself is gated behind
   kd-v9-full, so the live playful.css colours still apply; only the rail
   geometry is set here. */
body.kd-v9 .rail nav a.btn{padding:0 18px;min-height:44px;border-radius:999px}

/* --- Footer ------------------------------------------------------------
   `.foot` contributes its box model only. The live mint footer keeps its own
   colour, size and weight contract (visual-v2.css:351-353, playful.css:238-245);
   the `--kd-` token namespace is what stops `footer{background:var(--mint-deep)}`
   resolving to a V9 value. */
body.kd-v9 .foot > .wrap{flex:1 1 100%}

/* --- Injection anchor for visual-v2.js ---------------------------------
   `addToolDock()` (visual-v2.js:52) and `manageConsentBanner()` (:98) both
   insert `afterend` of `.nav-shell`. The rail replaced that element, which
   silently deleted the eight-link tool dock and stranded the mobile consent
   banner below the footer. index.html keeps an empty `.nav-shell` anchor so
   both keep working; it must render at zero height. Both injectors use
   `afterend`, so the anchor stays `:empty`. */
body.kd-v9 > .nav-shell:empty{position:static;padding:0;margin:0;border:0;height:0;
  min-height:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}

/* --- Dark canvas -------------------------------------------------------
   Tokens live on the body, never on bare `:root`, so `visual-v2.css:36`
   `html{background:var(--cream)}` would keep the LIGHT live value while the body
   box went dark, leaving a light band on any page shorter than the viewport.
   These rules paint the canvas to match the body — and are gated on
   `kd-v9-full`, the same class that turns the body dark, so the canvas and the
   body can never disagree. Inert on a kd-v9-only page, where the body stays
   light. `:has()` keeps them off every unported page entirely. */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):has(body.kd-v9.kd-v9-full){background:#14120E;color-scheme:dark}
}
html[data-theme="dark"]:has(body.kd-v9.kd-v9-full){background:#14120E;color-scheme:dark}

/* --- Shell-only pages: no inert controls -------------------------------
   Every dark token is gated on `kd-v9-full`, so on a page carrying only
   `kd-v9` the theme switcher would change nothing visible. A control that
   does nothing is a defect on a live page; hide it until the interior is
   ported. (Reviewer patch, 2026-09-04, round-2 review item N-1.) */
body.kd-v9:not(.kd-v9-full) [data-switch]{display:none}