/* ==========================================================================
   CHANUA KE — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Editorial publication first, financial platform second. The reference points
   are a well-set weekly magazine and a research note — not a bank, not a
   fintech dashboard, not a university portal.

   Three deliberate choices:
   1. WARM PAPER, NOT WHITE. The whole Kenyan personal-finance set is cool
      white plus a saturated brand colour. Warm paper reads as print.
   2. CLAY, NOT GREEN. Every competitor studied leans green or teal. Clay is
      warm, East African without resorting to flag colours, and unclaimed.
      Ochre is reserved exclusively for CHANUA+ so premium has its own signal.
   3. MONO LABELS. IBM Plex Mono on the editorial system numbers (01, 02, 03,
      04) is the signature. It makes the four-part system recognisable at a
      glance, on the site and in a carousel, which is the whole idea.
   ========================================================================== */

/* --- TOKENS ------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --paper:        #fbf8f3;
  --paper-sunk:   #f3ede3;
  --surface:      #ffffff;
  --surface-alt:  #f7f2e9;
  --ink-block:    #1a1612;

  /* Text */
  --ink:          #181410;
  --ink-2:        #4d443a;
  --ink-3:        #6f6458;
  --on-dark:      #f6f1e8;
  --on-dark-2:    #b9ae9f;

  /* Lines */
  --rule:         #e4dcd0;
  --rule-strong:  #cdc2b2;

  /* Accents */
  --clay:         #b4441f;
  --clay-deep:    #8c3316;
  --clay-wash:    #f7e9e2;
  --clay-on-ink:  #e8845c;   /* accent on the dark bands, same in both themes */
  --blue:         #1b3a5c;
  --blue-wash:    #e9eef4;

  /* Premium — ochre is used for CHANUA+ and nothing else */
  --plus:         #8a6412;
  --plus-bright:  #c9a227;
  --plus-wash:    #f7f0dc;

  /* Semantic */
  --up:           #9a3412;
  --down:         #15616d;
  --flat:         #6b6257;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero:  clamp(2.45rem, 7.2vw, 4.4rem);
  --fs-h1:    clamp(2rem, 5.2vw, 3.1rem);
  --fs-h2:    clamp(1.5rem, 3.4vw, 2.05rem);
  --fs-h3:    clamp(1.2rem, 2.4vw, 1.45rem);
  --fs-lead:  clamp(1.08rem, 2.1vw, 1.32rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-mono:  0.75rem;

  /* Space — 4px base */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --measure: 40rem;     /* reading width */
  --container: 74rem;
  --radius: 4px;
  --radius-lg: 10px;

  --shadow: 0 1px 2px rgba(24,20,16,.05), 0 8px 24px -12px rgba(24,20,16,.14);
  --ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #14110e;
    --paper-sunk:  #100e0b;
    --surface:     #1c1815;
    --surface-alt: #221d18;
    --ink-block:   #0c0a08;

    --ink:         #f2ece3;
    --ink-2:       #c0b6a8;
    --ink-3:       #9a8f81;
    --on-dark:     #f2ece3;
    --on-dark-2:   #a99e90;

    --rule:        #2e2822;
    --rule-strong: #453d34;

    --clay:        #e8845c;
    --clay-deep:   #f0a183;
    --clay-wash:   #2a1c16;
    --blue:        #8fb4d8;
    --blue-wash:   #16202b;

    --plus:        #e0b84a;
    --plus-bright: #e0b84a;
    --plus-wash:   #26200f;

    --up:          #f0906a;
    --down:        #6fc4cf;
    --flat:        #968b7d;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --paper:       #14110e;
  --paper-sunk:  #100e0b;
  --surface:     #1c1815;
  --surface-alt: #221d18;
  --ink-block:   #0c0a08;
  --ink:         #f2ece3;
  --ink-2:       #c0b6a8;
  --ink-3:       #9a8f81;
  --on-dark:     #f2ece3;
  --on-dark-2:   #a99e90;
  --rule:        #2e2822;
  --rule-strong: #453d34;
  --clay:        #e8845c;
  --clay-deep:   #f0a183;
  --clay-wash:   #2a1c16;
  --blue:        #8fb4d8;
  --blue-wash:   #16202b;
  --plus:        #e0b84a;
  --plus-bright: #e0b84a;
  --plus-wash:   #26200f;
  --up:          #f0906a;
  --down:        #6fc4cf;
  --flat:        #968b7d;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* --- RESET -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--clay); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--clay-deep); }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--clay); color: #fff; }

/* --- TYPE --------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.018em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}
.eyebrow--clay { color: var(--clay); }
.eyebrow--plus { color: var(--plus); }

.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; }
.muted { color: var(--ink-3); }
mark { background: var(--clay-wash); color: inherit; padding: .05em .2em; border-radius: 2px; }
code { font-family: var(--font-mono); font-size: .875em; background: var(--surface-alt); padding: .1em .32em; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0; }

/* --- LAYOUT ------------------------------------------------------------- */

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
@media (min-width: 48rem) { .container { width: min(100% - 4rem, var(--container)); } }

.measure { width: min(100%, var(--measure)); }
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section--sunk { background: var(--paper-sunk); }
.section--ink { background: var(--ink-block); color: var(--on-dark); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--on-dark); }
/* Ink bands are dark in BOTH themes, so they need the light-on-dark accent.
   Overriding --clay wholesale would leak into the light cards that sit inside
   them, so the override is targeted at the elements that actually use it. */
.section--ink .lead, .section--ink p { color: var(--on-dark-2); }
.section--ink .eyebrow--clay,
.section--ink .section-head__link,
.section--ink .flow__num,
.section--ink a:not(.btn) { color: var(--clay-on-ink); }
.section--ink .card a { color: var(--ink); }
.section--ink .card:hover .card__title a { color: var(--clay); }
.section--ink .btn--primary { background: var(--clay-on-ink); color: #201008; }
.section--ink .btn--primary:hover { background: #f0a183; color: #201008; }
/* Cards keep their own light surface inside an ink band, so text inside them
   must not inherit the band's on-dark colours. */
.section--ink .card { background: var(--surface); color: var(--ink); }
.section--ink .card h1, .section--ink .card h2, .section--ink .card h3 { color: var(--ink); }
.section--ink .card p, .section--ink .card .lead { color: var(--ink-2); }
.section--ink .card .card__foot, .section--ink .card .card__foot span { color: var(--ink-3); }

.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head__link { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.section-head__link:hover { text-decoration: underline; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* --- HEADER ------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner { display: flex; align-items: center; gap: var(--s4); min-height: 4rem; }

.wordmark { display: inline-flex; align-items: baseline; gap: .4rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.wordmark__name { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.028em; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 20; }
.wordmark__ke {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .16em;
  color: var(--clay); border: 1px solid currentColor; border-radius: 2px;
  padding: .12rem .28rem; transform: translateY(-.28em);
}

.nav { display: none; gap: var(--s5); align-items: center; }
@media (min-width: 56rem) { .nav { display: flex; } }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  padding-block: .35rem; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--clay); }

.masthead__actions { display: flex; align-items: center; gap: var(--s2); }

.theme-toggle {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; color: var(--ink-2);
}
.theme-toggle:hover { border-color: var(--rule-strong); color: var(--ink); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

.menu-btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
@media (min-width: 56rem) { .menu-btn { display: none; } }
.menu-btn svg { width: 1.1rem; height: 1.1rem; }

.drawer {
  display: none; border-top: 1px solid var(--rule); background: var(--paper);
  padding: var(--s4) 0 var(--s5);
}
.drawer[data-open="true"] { display: block; }
@media (min-width: 56rem) { .drawer { display: none !important; } }
.drawer a {
  display: block; padding: .85rem 0; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 1.35rem; border-bottom: 1px solid var(--rule);
}
.drawer .btn { margin-top: var(--s4); width: 100%; }

/* --- BUTTONS ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.005em;
  padding: .72rem 1.15rem; border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; min-height: 2.75rem;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--clay); color: #fff; }
.btn--primary:hover { background: var(--clay-deep); color: #fff; }
:root[data-theme="dark"] .btn--primary,
.section--ink .btn--primary { color: #201008; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--primary { color: #201008; } }

.btn--ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.section--ink .btn--ghost { border-color: rgba(255,255,255,.26); color: var(--on-dark); }
.section--ink .btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.07); }

.btn--plus { background: var(--plus); color: #fff; }
:root[data-theme="dark"] .btn--plus { color: #241c06; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--plus { color: #241c06; } }
.btn--plus:hover { filter: brightness(1.08); }

.btn--sm { padding: .5rem .85rem; min-height: 2.25rem; font-size: var(--fs-xs); }
.btn--lg { padding: .95rem 1.6rem; min-height: 3.25rem; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --- BADGES ------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 2px; white-space: nowrap;
}
.badge--free { color: var(--ink-3); border: 1px solid var(--rule-strong); }
.badge--plus { color: var(--plus); background: var(--plus-wash); border: 1px solid color-mix(in srgb, var(--plus) 30%, transparent); }
.badge--cat { color: var(--clay); background: var(--clay-wash); }
.badge--sample { color: var(--ink-3); background: var(--surface-alt); border: 1px dashed var(--rule-strong); }

/* --- HERO --------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4rem); position: relative; }
.hero__inner { display: grid; gap: var(--s6); }
@media (min-width: 62rem) { .hero__inner { grid-template-columns: 1.35fr .9fr; gap: var(--s8); align-items: start; } }

.hero h1 {
  font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.035em;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
}
.hero h1 .l2 { display: block; }
.hero h1 .accent { color: var(--clay); font-style: italic; font-variation-settings: "SOFT" 8, "WONK" 1, "opsz" 144; }
.hero__lead { margin-top: var(--s5); max-width: 34rem; }
.hero__cta { margin-top: var(--s6); }
.hero__proof { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-xs); color: var(--ink-3); }
.hero__proof span { display: inline-flex; align-items: center; gap: .4rem; }
.hero__proof span::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--clay); }

/* --- MARKET SNAPSHOT ---------------------------------------------------- */

.snapshot { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.snapshot__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--rule); }
.snapshot__title { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.snapshot__date { font-size: var(--fs-xs); color: var(--ink-3); }
.snapshot__grid { display: grid; }
.tile { padding: var(--s4); border-bottom: 1px solid var(--rule); display: grid; gap: .3rem; }
.tile:last-child { border-bottom: 0; }
@media (min-width: 30rem) {
  .snapshot__grid { grid-template-columns: 1fr 1fr; }
  .tile { border-right: 1px solid var(--rule); }
  .tile:nth-child(2n) { border-right: 0; }
}
.tile__label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.tile__value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.tile__value sup { font-family: var(--font-mono); font-size: .42em; font-weight: 500; letter-spacing: .02em; margin-left: .12em; top: -.55em; position: relative; }
.tile__change { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; }
.tile__change[data-dir="up"] { color: var(--up); }
.tile__change[data-dir="down"] { color: var(--down); }
.tile__change[data-dir="flat"] { color: var(--flat); }
.tile__context { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.tile__src { font-size: .6875rem; color: var(--ink-3); }
.tile__src a { color: inherit; }
.tile--pending .tile__value { color: var(--ink-3); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding-block: .5rem; }
.snapshot__note { padding: var(--s4); background: var(--surface-alt); border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }

/* --- THE PROBLEM -------------------------------------------------------- */

.problem { display: grid; gap: var(--s6); }
@media (min-width: 56rem) { .problem { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; } }
.scroll-sim { display: grid; gap: var(--s2); }
.scroll-sim__item {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s3) var(--s4); font-size: var(--fs-sm); color: var(--ink-2); position: relative;
}
.scroll-sim__item .src { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: .25rem; }
.scroll-sim__gap {
  margin-top: var(--s3); padding: var(--s4); border-radius: var(--radius);
  background: var(--clay-wash); border: 1px solid color-mix(in srgb, var(--clay) 24%, transparent);
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; color: var(--ink);
}

/* --- THE SYSTEM DIAGRAM ------------------------------------------------- */

.flow { display: grid; gap: var(--s3); counter-reset: flow; }
@media (min-width: 48rem) { .flow { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } }
.flow__step {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s5) var(--s4); position: relative; display: grid; gap: .5rem; align-content: start;
}
.flow__step::after {
  content: "↓"; position: absolute; left: 50%; bottom: calc(var(--s3) * -1);
  transform: translate(-50%, 50%); color: var(--clay); font-size: 1rem; line-height: 1;
  background: var(--paper-sunk); padding: .15rem; z-index: 1;
}
.flow__step:last-child::after { display: none; }
@media (min-width: 48rem) {
  .flow__step::after { content: "→"; left: auto; right: calc(var(--s4) * -1); bottom: auto; top: 50%; transform: translate(50%, -50%); }
}
.flow__num { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; color: var(--clay); }
.flow__title { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -.02em; }
.flow__desc { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }

/* --- CARDS -------------------------------------------------------------- */

.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: grid; gap: var(--s3); align-content: start;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s5); position: relative;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover { border-color: var(--rule-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.card__title { font-size: 1.22rem; line-height: 1.2; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:hover .card__title a { color: var(--clay); }
.card__excerpt { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.card__foot { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--ink-3); margin-top: auto; padding-top: var(--s2); }
.card--plus { border-color: color-mix(in srgb, var(--plus) 36%, var(--rule)); background: linear-gradient(180deg, var(--plus-wash) 0%, var(--surface) 34%); }
.card--lead { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .card--lead { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s6); padding: var(--s6); align-items: center; }
  .card--lead .card__title { font-size: clamp(1.6rem, 3.2vw, 2.15rem); }
}
.card--lead .card__body { display: grid; gap: var(--s3); align-content: start; }

.flow-list { list-style: none; padding: 0; display: grid; gap: .6rem; margin: 0; }
.flow-list li { display: grid; grid-template-columns: 1.9rem 1fr; gap: .6rem; align-items: baseline; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.flow-list li span { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; color: var(--clay); }

/* --- LIST ROWS ---------------------------------------------------------- */

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); position: relative;
}
@media (min-width: 48rem) {
  .row { grid-template-columns: 8rem 1fr auto; align-items: baseline; gap: var(--s5); }
}
.row__date { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.row__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.row__title a { color: inherit; text-decoration: none; }
.row__title a::after { content: ""; position: absolute; inset: 0; }
.row:hover .row__title a { color: var(--clay); }
.row__excerpt { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .3rem; }
.row__meta { display: flex; gap: var(--s2); align-items: center; }

/* --- ARTICLE ------------------------------------------------------------ */

.article { padding-block: var(--s6) var(--s8); }
.article__head { width: min(100%, var(--measure)); margin-inline: auto; margin-bottom: var(--s6); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.article__title { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.032em; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72; }
.article__lead { margin-top: var(--s4); }
.article__byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule);
  font-size: var(--fs-xs); color: var(--ink-3);
}

.prose { width: min(100%, var(--measure)); margin-inline: auto; }
.prose > * + * { margin-top: var(--s4); }
.prose > h2 { margin-top: var(--s7); font-size: var(--fs-h2); }
.prose > h3 { margin-top: var(--s6); font-size: var(--fs-h3); }
.prose > h4 { margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .4rem; }
.prose blockquote {
  border-left: 3px solid var(--clay); padding-left: var(--s4); margin-left: 0;
  font-family: var(--font-display); font-size: 1.22rem; line-height: 1.4; color: var(--ink);
}
.prose blockquote p + p { margin-top: var(--s3); }
.prose > .sys, .prose > .sources, .prose > .keynum, .prose > .callout,
.prose > .lesson, .prose > .mech, .prose > .premium-open, .prose > .paywall { margin-top: var(--s6); }

/* The editorial system blocks */
.sys { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.sys--edge { border-top-color: var(--clay); }
.sys__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.sys__num { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--clay); }
.sys__label { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.022em; }
.sys__hint { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: auto; }
.sys__body > * + * { margin-top: var(--s4); }
.sys__body ul { padding-left: 1.3rem; }
.sys__body li + li { margin-top: .4rem; }

/* Interview Edge sub-blocks */
.sys--edge .sys__body { display: grid; gap: var(--s3); }
.edge__part {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--s4); display: grid; gap: .5rem;
}
.edge__part--answer { background: var(--clay-wash); border-color: color-mix(in srgb, var(--clay) 26%, transparent); }
.edge__part--push { background: transparent; border-style: dashed; }
.edge__label {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.edge__part--answer .edge__label { color: var(--clay-deep); }
.edge__icon { width: .85rem; height: .85rem; flex: none; border-radius: 50%; background: var(--ink-3); }
.edge__icon.i-target { background: var(--blue); }
.edge__icon.i-bulb { background: var(--plus); }
.edge__icon.i-speak { background: var(--clay); }
.edge__icon.i-push { background: var(--ink-3); }
.edge__text > * + * { margin-top: var(--s3); }
.edge__part--answer .edge__text { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.5; }

/* Provenance — the trust mechanism on every interview question */
.prov {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem;
  padding: .55rem .75rem; border-radius: var(--radius); font-size: var(--fs-xs);
  background: var(--surface-alt); border: 1px solid var(--rule);
}
.prov__dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: var(--ink-3); transform: translateY(-.05em); }
.prov--strong { background: var(--blue-wash); border-color: color-mix(in srgb, var(--blue) 28%, transparent); }
.prov--strong .prov__dot { background: var(--blue); }
.prov--mid .prov__dot { background: var(--plus); }
.prov__label { font-weight: 600; color: var(--ink); }
.prov__detail { color: var(--ink-3); }

/* Key number */
.keynum { border-left: 3px solid var(--clay); padding-left: var(--s4); display: grid; gap: .25rem; }
.keynum__value { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.keynum__meta { display: grid; gap: .15rem; }
.keynum__label { font-size: var(--fs-sm); color: var(--ink-2); }
.keynum__source { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; color: var(--ink-3); }

/* Mechanism chain */
.mech { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: var(--s4); background: var(--surface-alt); border-radius: var(--radius-lg); border: 1px solid var(--rule); }
.mech__step { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; background: var(--surface); border: 1px solid var(--rule); padding: .35rem .55rem; border-radius: 2px; }
.mech__arrow { color: var(--clay); font-size: .9rem; }

.callout, .lesson { padding: var(--s5); border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--rule); }
.lesson { background: var(--blue-wash); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }
.callout__title, .lesson__title, .sources__title { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s3); }
.callout > div > * + *, .lesson > div > * + * { margin-top: var(--s3); }

.sources { border-top: 1px solid var(--rule); padding-top: var(--s4); font-size: var(--fs-sm); }
.sources__title { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s3); }
.sources__body ul { padding-left: 1.2rem; color: var(--ink-2); }
.sources__body li + li { margin-top: .35rem; }

.note { font-size: var(--fs-sm); color: var(--ink-3); font-style: italic; }

/* --- PAYWALL / PREMIUM LAYER -------------------------------------------- */

.premium-open { border: 1px dashed color-mix(in srgb, var(--plus) 45%, transparent); border-radius: var(--radius-lg); padding: var(--s5); background: color-mix(in srgb, var(--plus-wash) 55%, transparent); }
.premium-open > * + * { margin-top: var(--s4); }
.premium-open__flag { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--ink-2); }

.paywall {
  border: 1px solid color-mix(in srgb, var(--plus) 40%, var(--rule));
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface);
}
.paywall__head { padding: var(--s6) var(--s5) var(--s4); background: var(--plus-wash); border-bottom: 1px solid color-mix(in srgb, var(--plus) 26%, transparent); display: grid; gap: var(--s3); }
.paywall__title { font-size: var(--fs-h2); line-height: 1.1; }
.paywall__body { padding: var(--s5); display: grid; gap: var(--s4); }
.paywall__list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.paywall__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; font-size: var(--fs-sm); }
.paywall__list li::before { content: "✓"; color: var(--plus); font-weight: 700; line-height: 1.5; }
.paywall__price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; padding-top: var(--s2); }
.paywall__amount { font-family: var(--font-display); font-size: 2.3rem; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.paywall__period { color: var(--ink-3); font-size: var(--fs-sm); }
.paywall__fine { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }

/* --- FORMS -------------------------------------------------------------- */

.signup { display: grid; gap: var(--s3); }
.signup__row { display: grid; gap: var(--s2); }
@media (min-width: 30rem) { .signup__row { grid-template-columns: 1fr auto; } }
.field {
  width: 100%; padding: .78rem 1rem; min-height: 2.9rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.field::placeholder { color: var(--ink-3); }
.field:focus-visible { border-color: var(--clay); outline-offset: 1px; }
.section--ink .field { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--on-dark); }
.section--ink .field::placeholder { color: var(--on-dark-2); }
.signup__fine { font-size: var(--fs-xs); color: var(--ink-3); }
.section--ink .signup__fine { color: var(--on-dark-2); }
.signup__ok, .signup__err { display: none; font-size: var(--fs-sm); padding: .7rem .9rem; border-radius: var(--radius); }
.signup__ok { background: var(--blue-wash); color: var(--ink); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); }
.signup__err { background: var(--clay-wash); color: var(--ink); border: 1px solid color-mix(in srgb, var(--clay) 30%, transparent); }
.signup[data-state="ok"] .signup__ok { display: block; }
.signup[data-state="ok"] .signup__row, .signup[data-state="ok"] .signup__fine { display: none; }
.signup[data-state="err"] .signup__err { display: block; }

label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: .35rem; }
textarea.field { min-height: 7rem; resize: vertical; line-height: 1.5; }

/* --- CTA BANDS ---------------------------------------------------------- */

.cta-band { display: grid; gap: var(--s5); }
@media (min-width: 56rem) { .cta-band { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; } }
.cta-band h2 { font-size: var(--fs-h2); }

/* --- CONTRIBUTE (the interview-question flywheel) ----------------------- */

.contribute { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s5); background: var(--surface); display: grid; gap: var(--s4); }
.contribute__head { display: grid; gap: var(--s2); }

/* --- Q ARCHIVE ---------------------------------------------------------- */

.qlist { display: grid; gap: var(--s3); }
.qitem { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.qitem summary { padding: var(--s4); cursor: pointer; display: grid; gap: .5rem; list-style: none; }
.qitem summary::-webkit-details-marker { display: none; }
.qitem summary:hover { background: var(--surface-alt); }
.qitem__q { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.3; padding-right: 1.5rem; position: relative; }
.qitem__q::after { content: "+"; position: absolute; right: 0; top: -.1em; color: var(--clay); font-family: var(--font-mono); font-weight: 400; }
.qitem[open] .qitem__q::after { content: "−"; }
.qitem__tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.qitem__body { padding: 0 var(--s4) var(--s4); display: grid; gap: var(--s3); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.qitem__body > p { font-size: var(--fs-sm); }

/* --- TABLE -------------------------------------------------------------- */

.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; padding: .7rem var(--s4); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--surface-alt); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* --- FOOTER ------------------------------------------------------------- */

.footer { background: var(--ink-block); color: var(--on-dark-2); padding-block: var(--s8) var(--s6); margin-top: var(--s8); }
.footer__top { display: grid; gap: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 48rem) { .footer__top { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); } }
.footer__brand { display: grid; gap: var(--s3); align-content: start; max-width: 22rem; }
.footer .wordmark__name { color: var(--on-dark); }
.footer__meaning { font-size: var(--fs-sm); line-height: 1.55; }
.footer__col h2 { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--s3); }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer__col a { color: var(--on-dark-2); text-decoration: none; font-size: var(--fs-sm); }
.footer__col a:hover { color: var(--on-dark); text-decoration: underline; }
.footer a { color: var(--on-dark-2); }
.footer a:hover { color: var(--on-dark); }
.footer__bottom { padding-top: var(--s5); display: grid; gap: var(--s4); font-size: var(--fs-xs); }
@media (min-width: 48rem) { .footer__bottom { grid-template-columns: 1fr auto; align-items: center; } }
.footer__disclaimer { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: var(--s4); font-size: var(--fs-xs); line-height: 1.6; margin-top: var(--s5); }
.footer__disclaimer strong { color: var(--on-dark); }
.social { display: flex; gap: var(--s2); margin-left: -.55rem; }
.social a { color: var(--on-dark-2); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); }
.social a:hover { background: rgba(255,255,255,.08); }
.social a:hover { color: var(--on-dark); }
.social svg { width: 1.1rem; height: 1.1rem; }

/* --- BANNER (build-the-list mode) --------------------------------------- */

.banner {
  background: var(--ink-block); color: var(--on-dark);
  font-size: var(--fs-xs); text-align: center; padding: .6rem 1rem; line-height: 1.5;
}
.banner a { color: var(--plus-bright); text-underline-offset: .2em; }
.banner strong { color: var(--on-dark); }

/* --- UTILITY ------------------------------------------------------------ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.center .lead, .center p { margin-inline: auto; }
.center .btn-row { justify-content: center; }
.narrow { width: min(100%, 46rem); margin-inline: auto; }

.breadcrumb { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--clay); text-decoration: underline; }

.pagenav { display: grid; gap: var(--s3); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--rule); }
@media (min-width: 40rem) { .pagenav { grid-template-columns: 1fr 1fr; } }
.pagenav a { display: grid; gap: .3rem; padding: var(--s4); border: 1px solid var(--rule); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); }
.pagenav a:hover { border-color: var(--rule-strong); }
.pagenav__dir { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pagenav__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }

.empty { border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg); padding: var(--s7) var(--s5); text-align: center; color: var(--ink-3); display: grid; gap: var(--s3); }
.empty h3 { color: var(--ink); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.filters button {
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .7rem; border: 1px solid var(--rule-strong); border-radius: 2px;
  background: transparent; color: var(--ink-2); cursor: pointer; min-height: 2.1rem;
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

[hidden] { display: none !important; }

/* ==========================================================================
   MOTION
   --------------------------------------------------------------------------
   Everything here is gated behind [data-motion="on"], which motion.js sets
   only when the reader has not asked for reduced motion. With JS off, or
   with reduced motion on, the attribute is absent and every element below
   renders in its final state. Nothing is ever hidden by default.
   ========================================================================== */

[data-motion="on"] .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-motion="on"] .reveal[data-revealed="true"] { opacity: 1; transform: none; will-change: auto; }

/* Hero intro — load-in, reading order, once. */
[data-motion="on"] .hero [data-intro] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--intro-delay, 0ms);
}
[data-motion="on"] .hero[data-intro-run="true"] [data-intro] { opacity: 1; transform: none; }

[data-motion="on"] .flow__step {
  opacity: 0; transform: translateY(16px) scale(.985);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
[data-motion="on"] .flow__step[data-in="true"] { opacity: 1; transform: none; }
[data-motion="on"] .flow__step::after { opacity: 0; transition: opacity .4s var(--ease) .25s; }
[data-motion="on"] .flow__step[data-in="true"]::after { opacity: 1; }

/* Masthead condenses once you leave the top. */
.masthead { transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.masthead__inner { transition: min-height .3s var(--ease); }
.masthead[data-stuck="true"] { box-shadow: 0 1px 0 var(--rule), 0 6px 20px -16px rgba(0,0,0,.35); }
[data-motion="on"] .masthead[data-stuck="true"] .masthead__inner { min-height: 3.4rem; }

/* Reading progress hairline. */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--clay); transform-origin: 0 50%; transform: scaleX(0); z-index: 2; }
.progress[data-native="true"] { animation: progress-grow linear both; animation-timeline: scroll(); }
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Pointer-follow highlight. Very low opacity on purpose — you should feel
   it rather than see it. */
[data-motion="on"] .card, [data-motion="on"] .qitem, /* Hero intro — load-in, reading order, once. */
[data-motion="on"] .hero [data-intro] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--intro-delay, 0ms);
}
[data-motion="on"] .hero[data-intro-run="true"] [data-intro] { opacity: 1; transform: none; }

[data-motion="on"] .flow__step { position: relative; }
[data-motion="on"] .card::before, [data-motion="on"] .qitem::before, [data-motion="on"] .flow__step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(28rem circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--clay) 7%, transparent), transparent 42%);
  opacity: 0; transition: opacity .35s var(--ease); z-index: 0;
}
[data-motion="on"] .card:hover::before, [data-motion="on"] .qitem:hover::before, [data-motion="on"] .flow__step:hover::before { opacity: 1; }
.card > *, .qitem > *, .flow__step > * { position: relative; z-index: 1; }

/* Card affordance: the arrow steps forward on hover. */
.card__arrow { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--clay); display: inline-block; transition: transform .25s var(--ease); }
.card:hover .card__arrow { transform: translateX(4px); }
.card--tool { border-left: 2px solid transparent; transition: border-color .2s var(--ease), border-left-color .2s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.card--tool:hover { border-left-color: var(--clay); }

.section-head__link { transition: color .2s var(--ease); }

/* Press feedback. */
.btn[data-press="true"], .chip[data-press="true"] { transform: translateY(1px) scale(.985); }

/* Links get a wipe underline rather than a static one. */
[data-motion="on"] .prose p > a, [data-motion="on"] .prose li > a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .28s var(--ease);
}
[data-motion="on"] .prose p > a:hover, [data-motion="on"] .prose li > a:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ==========================================================================
   TOOLS
   ========================================================================== */

.tool__head { display: grid; gap: var(--s5); }
@media (min-width: 56rem) { .tool__head { grid-template-columns: 1.5fr .9fr; gap: var(--s8); align-items: end; } }
.tool__why { background: var(--surface-alt); border-left: 3px solid var(--clay); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--s4) var(--s5); }
.tool__why-label { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem; }
.tool__why p:last-child { font-size: var(--fs-sm); color: var(--ink-2); }

.calc { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 62rem) { .calc { grid-template-columns: 1fr 1.15fr; gap: var(--s7); } }

.calc__inputs { display: grid; gap: var(--s4); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s5); }
.calc__h { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.fld-grid { display: grid; gap: var(--s4); }
.fld { display: grid; gap: .35rem; }
.fld label { margin-bottom: 0; }
.fld__hint { font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); }
.fld__wrap { position: relative; display: flex; align-items: stretch; }
/* Reserve space only for an affix that actually exists. Padding both sides
   unconditionally left the budget inputs with about 37px of usable width, so
   "2500" rendered as "25" — correct arithmetic, unreadable field. */
.fld__wrap--suffix .field { padding-right: 2.6rem; }
.fld__wrap--prefix .field { padding-left: 3.1rem; }
.fld__prefix, .fld__suffix { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); pointer-events: none; letter-spacing: .04em; }
.fld__prefix { left: .9rem; }
.fld__suffix { right: .9rem; }
.fld-note { font-size: var(--fs-xs); color: var(--ink-3); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.1rem) 1.25rem, calc(100% - .75rem) 1.25rem; background-size: .35rem .35rem; background-repeat: no-repeat; }

.calc__presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-top: var(--s2); border-top: 1px dashed var(--rule); }
.calc__presets-label { font-size: var(--fs-xs); color: var(--ink-3); }
.chip { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; padding: .38rem .6rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: transparent; color: var(--ink-2); cursor: pointer; min-height: 2rem; transition: border-color .15s, color .15s, transform .15s; }
.chip:hover { border-color: var(--clay); color: var(--clay); }

.calc__out { display: grid; gap: var(--s4); background: var(--ink-block); color: var(--on-dark); border-radius: var(--radius-lg); padding: var(--s5); }
.calc__out .calc__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.calc__big { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; font-variant-numeric: tabular-nums; margin-top: .3rem; }
.calc__mid { font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vw, 1.75rem); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: .25rem; }
.calc__sub { font-size: var(--fs-sm); color: var(--on-dark-2); margin-top: .5rem; line-height: 1.5; }
.calc__verdict { font-size: var(--fs-sm); color: var(--on-dark-2); line-height: 1.55; }
.calc__split { display: grid; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.14); }
@media (min-width: 30rem) { .calc__split { grid-template-columns: 1fr 1fr; } }
.calc__split--accent .calc__mid { color: #e8845c; }

/* A second input group living inside the dark results panel — used by the
   passive income tool, where "how long would it take you" belongs beside the
   answer rather than back up in the form. Everything in here has to be
   re-tokenised for the dark ground; inherited ink greys fail contrast on it. */
.calc__sub-block { display: grid; gap: var(--s4); padding-top: var(--s5); margin-top: var(--s2); border-top: 1px solid rgba(255,255,255,.14); }
.calc__sub-block .calc__h { color: var(--on-dark-2); }
.calc__sub-block label { color: var(--on-dark); font-size: var(--fs-sm); }
.calc__sub-block .fld__hint { color: var(--on-dark-2); }
.calc__sub-block .fld__prefix, .calc__sub-block .fld__suffix { color: var(--on-dark-2); }
.calc__sub-block .field { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: var(--on-dark); }
.calc__sub-block .field:focus-visible { border-color: var(--clay-on-ink); }
@media (min-width: 30rem) { .calc__sub-block .fld-grid { grid-template-columns: 1fr 1fr; } }
.calc__years { font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark); }

.calc__bar { display: flex; height: .85rem; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); }
.calc__bar-seg { display: block; height: 100%; width: 0; transition: width .5s var(--ease); }
.calc__bar-seg--net, .calc__bar-seg--left { background: #6fc4cf; }
.calc__bar-seg--paye { background: #e8845c; }
.calc__bar-seg--nssf { background: #e0b84a; }
.calc__bar-seg--shif { background: #8fb4d8; }
.calc__bar-seg--ahl { background: #b9ae9f; }
.calc__bar-seg--needs { background: #e8845c; }
.calc__bar-seg--wants { background: #e0b84a; }
.calc__bar-seg--future { background: #6fc4cf; }

.calc__legend { list-style: none; padding: 0; display: grid; gap: .45rem; font-size: var(--fs-sm); }
@media (min-width: 30rem) { .calc__legend { grid-template-columns: 1fr 1fr; } }
.calc__legend li { display: flex; align-items: center; gap: .5rem; color: var(--on-dark-2); }
.calc__legend b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--on-dark); font-weight: 600; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.dot--net, .dot--future { background: #6fc4cf; }
.dot--paye, .dot--needs { background: #e8845c; }
.dot--nssf, .dot--wants { background: #e0b84a; }
.dot--shif { background: #8fb4d8; }
.dot--ahl { background: #b9ae9f; }

.work { border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--s3); }
.work summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.work summary:hover { color: var(--on-dark); }
.work__steps { list-style: none; padding: 0; margin-top: var(--s3); display: grid; gap: .3rem; }
.work__steps li { display: flex; gap: var(--s3); justify-content: space-between; font-size: var(--fs-sm); padding: .3rem 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
.work__steps li:last-child { border-bottom: 0; font-weight: 600; color: var(--on-dark); }
.work__label { color: var(--on-dark-2); }
.work__val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.work__note { font-size: var(--fs-xs); color: var(--on-dark-2); line-height: 1.55; margin-top: var(--s3); }

.srcnote { margin-top: var(--s5); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s4); background: var(--surface-alt); }
.srcnote summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.srcnote ul { margin-top: var(--s3); padding-left: 1.1rem; display: grid; gap: .5rem; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55; }

/* Budget --------------------------------------------------------------
   Two real columns: a scrolling main column (income, then the category
   tables) and a genuinely separate sticky aside. The previous version made
   the summary sticky inside a grid cell while the table spanned both columns
   on the next row — so the two overlapped as you scrolled and the inputs
   painted over the panel. A sticky element needs its own column, not a cell
   in a row something else spans. */
.budget { display: grid; gap: var(--s5); }
.budget__main { display: grid; gap: var(--s6); min-width: 0; }
@media (min-width: 64rem) {
  .budget { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s7); align-items: start; }
  .budget__summary { position: sticky; top: 5.5rem; z-index: 2; }
}
.budget__income { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s5); display: grid; gap: var(--s4); }
.budget__summary { display: grid; gap: var(--s4); background: var(--ink-block); color: var(--on-dark); border-radius: var(--radius-lg); padding: var(--s5); }
.budget__summary .calc__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.budget__summary .calc__big { font-size: clamp(2rem, 5vw, 2.6rem); }
.budget__summary .calc__legend { grid-template-columns: 1fr; }
.budget__summary .signup__fine { color: var(--on-dark-2); }
.budget__summary .btn--ghost { border-color: rgba(255,255,255,.26); color: var(--on-dark); }
.budget__summary .btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }
.budget__summary .btn-row { gap: var(--s2); }
.budget__summary .btn-row .btn { flex: 1 1 auto; justify-content: center; }
.budget__table { display: grid; gap: var(--s6); min-width: 0; }
.b__group-head { display: grid; grid-template-columns: 1fr auto; gap: .25rem var(--s3); align-items: baseline; margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.b__group-head h3 { font-size: var(--fs-h3); }
.b__group-head p { grid-column: 1 / 2; font-size: var(--fs-sm); color: var(--ink-3); }
.b__group-total { grid-row: 1; grid-column: 2; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.b__hint { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: .1rem; }
.b__amt { width: 10rem; }
/* Tighter affixes than a standalone field: at phone widths the table already
   owns three columns, and the default 3.1rem prefix gutter left barely 49px of
   content — enough to clip a four-digit figure. */
.b__amt .field { padding: .45rem .6rem .45rem 2.7rem; min-height: 2.4rem; font-variant-numeric: tabular-nums; }
.b__amt .fld__prefix { left: .6rem; }
.b__pct { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-3); text-align: right; white-space: nowrap; }
.budget td label { font-weight: 500; margin: 0; }

/* Phone running total. Sticky to the bottom of the viewport but scoped to the
   tracker, so it appears while you are filling rows and disappears with the
   block rather than hovering over the footer. Desktop has the side panel. */
.budget__mini { position: sticky; bottom: var(--s3); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: .7rem var(--s4); border-radius: 999px; background: var(--ink-block); color: var(--on-dark);
  box-shadow: 0 .5rem 1.4rem rgba(28, 22, 16, .28); font-size: var(--fs-sm); }
.budget__mini-label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.budget__mini b { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.budget__mini[data-state="short"] b { color: var(--clay-on-ink); }
.budget__mini[data-state="idle"] { opacity: .8; }
@media (min-width: 64rem) { .budget__mini { display: none; } }

/* ==========================================================================
   QUIZZES
   One card at a time, big tappable answers, a progress bar that actually
   moves. The result panel is the payoff and it is styled as a statement
   rather than a form output.
   ========================================================================== */

.quiz { display: grid; gap: var(--s5); }
.quiz__shell { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.quiz__progress { height: .3rem; background: var(--rule); }
.quiz__progress-fill { display: block; height: 100%; width: 0; background: var(--clay); transition: width .45s cubic-bezier(.22,.61,.36,1); }
.quiz__stage { padding: var(--s5); }
@media (min-width: 44rem) { .quiz__stage { padding: var(--s6); } }
.quiz__card { display: grid; gap: var(--s4); animation: quizIn .38s cubic-bezier(.22,.61,.36,1) both; }
@keyframes quizIn { from { opacity: 0; transform: translateY(.6rem); } }
@media (prefers-reduced-motion: reduce) { .quiz__card { animation: none; } }
.quiz__n { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.quiz__q { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 600; letter-spacing: -.022em; line-height: 1.3; }
.quiz__opts { display: grid; gap: var(--s3); }
.quiz__opt { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; text-align: left;
  padding: var(--s3) var(--s4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  font: inherit; font-size: var(--fs-sm); color: var(--ink); cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s; }
.quiz__opt:hover:not(:disabled) { border-color: var(--clay); background: var(--clay-wash); }
.quiz__opt:active:not(:disabled) { transform: scale(.995); }
.quiz__opt:disabled { cursor: default; }
.quiz__opt-key { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: .3rem; padding: .1rem .4rem; flex: none; margin-top: .1rem; }
.quiz__opt-t { flex: 1; line-height: 1.45; }
.quiz__opt.is-chosen { border-color: var(--clay); background: var(--clay-wash); }
.quiz__opt.is-chosen .quiz__opt-key { border-color: var(--clay); color: var(--clay); }
.quiz__opt.is-right { border-color: #2f7d5c; background: color-mix(in srgb, #2f7d5c 9%, transparent); }
.quiz__opt.is-right .quiz__opt-key { border-color: #2f7d5c; color: #2f7d5c; }
.quiz__opt.is-wrong { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 10%, transparent); }
.quiz__fb { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--radius);
  background: var(--surface-alt); border: 1px solid var(--rule); font-size: var(--fs-sm); line-height: 1.6; }
.quiz__fb--warn { border-color: color-mix(in srgb, var(--clay) 40%, transparent); background: var(--clay-wash); }
.quiz__fb-verdict { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; }
.quiz__fb-verdict.is-right { color: #2f7d5c; }
.quiz__fb-verdict.is-wrong { color: var(--clay); }
.quiz__fb-src { font-size: var(--fs-xs); color: var(--ink-3); }
.quiz__next-row { display: flex; justify-content: flex-end; }
.quiz__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s5); border-top: 1px solid var(--rule); background: var(--surface-alt); }
.quiz__hint { font-size: var(--fs-xs); color: var(--ink-3); margin-left: auto; }

.quiz__result { display: grid; gap: var(--s4); padding: var(--s6) var(--s5); border-radius: var(--radius-lg);
  background: var(--ink-block); color: var(--on-dark); }
@media (min-width: 44rem) { .quiz__result { padding: var(--s7) var(--s6); } }
.quiz__result .eyebrow { color: var(--clay-on-ink); }
.quiz__result-label { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 600; letter-spacing: -.028em; line-height: 1.1; }
.quiz__result-score { font-family: var(--font-mono); font-size: 1.1rem; color: var(--clay-on-ink); }
.quiz__result-body { font-size: var(--fs-lg); line-height: 1.65; color: var(--on-dark); max-width: 42ch; }
.quiz__watch { display: grid; gap: .4rem; padding: var(--s4); border-radius: var(--radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: var(--fs-sm); line-height: 1.6; }
.quiz__watch-k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--clay-on-ink); }
.quiz__flag { padding: var(--s3) var(--s4); border-left: 2px solid var(--clay-on-ink); font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark-2); }
.quiz__review { display: grid; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.16); }
.quiz__review-h { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.quiz__review-item { display: grid; gap: .25rem; font-size: var(--fs-sm); line-height: 1.55; }
.quiz__review-q { font-weight: 600; }
.quiz__review-a { color: var(--clay-on-ink); }
.quiz__review-w { color: var(--on-dark-2); }
.quiz__result .btn--ghost { border-color: rgba(255,255,255,.26); color: var(--on-dark); }
.quiz__result .btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }
.quiz__disclaimer { font-size: var(--fs-xs); color: var(--on-dark-2); line-height: 1.55; }

/* Interview Edge drill */
.drill { display: grid; gap: var(--s5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s5); }
.drill__stage { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 48rem) { .drill__stage { grid-template-columns: auto 1fr; gap: var(--s6); } }
.drill__timer { position: relative; width: 7rem; height: 7rem; margin-inline: auto; display: grid; place-items: center; }
.drill__timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.drill__track, .drill__arc { fill: none; stroke-width: 6; }
.drill__track { stroke: var(--rule); }
.drill__arc { stroke: var(--clay); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.drill__count { position: absolute; font-family: var(--font-display); font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.drill__timer[data-running="true"] .drill__count { color: var(--clay); }
.drill__timer[data-done="true"] .drill__count { color: var(--clay); animation: pulse .5s 2; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.drill__cards { min-height: 9rem; display: grid; align-items: center; }
.drill__card { display: grid; gap: var(--s3); }
.drill__tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.drill__q { font-family: var(--font-display); font-size: clamp(1.3rem, 3.2vw, 1.75rem); font-weight: 600; letter-spacing: -.024em; line-height: 1.25; }
.drill__reveal { display: grid; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: var(--fs-sm); }
.drill__controls { display: flex; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.drill__hint { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.55; }

/* ==========================================================================
   THE BRIEF HUB / FINANCE FRIDAYS
   ========================================================================== */

.ff { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); display: grid; grid-template-rows: auto 1fr; }
.ff__head { padding: var(--s5); background: var(--surface-alt); border-bottom: 1px solid var(--rule); display: grid; gap: var(--s2); }
.ff__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; }
.ff__body { padding: var(--s5); display: grid; gap: var(--s4); align-content: start; }
.ff__body .btn-row { margin-top: auto; }
.ff__grid { display: grid; gap: var(--s4); }
@media (min-width: 44rem) { .ff__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 58rem) { .ff__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.ff__col { display: grid; gap: .5rem; align-content: start; padding: var(--s4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.ff__col--primary { border-color: color-mix(in srgb, var(--clay) 36%, transparent); background: var(--clay-wash); }
.ff__k { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--clay); }
.ff__col:not(.ff__col--primary) .ff__k { color: var(--ink-3); }
.ff__v { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.ff__author { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); color: var(--ink-3); }
.ff__avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--clay); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; flex: none; }