/* ===========================================================================
   LoanPay - "Deep Harbour"
   ---------------------------------------------------------------------------
   Light page with three deliberate dark bands (hero, stats, closing CTA).
   That is a colour-block device, not theme drift: the dark bands are always
   the same three, always full-bleed, and every section between them is light.

   Colour rules:
     - Navy is the page: text, dark bands, the edges. Never black.
     - Teal is interactive: links, focus, the brand mark.
     - Green is action: primary buttons and nothing else.
     - Amber means money: figures and highlighted totals.
     - pos/neg green and red are outcomes only, never decoration.
   Every text pair below was contrast-checked; nothing ships under 4.5:1.
   =========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Archivo";src:url("/static/fonts/archivo-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url("/static/fonts/archivo-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Instrument";src:url("/static/fonts/instrument-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument";src:url("/static/fonts/instrument-500.woff2") format("woff2");font-weight:500;font-display:swap}
/* Instrument ships 400 and 500 only. 600 is mapped to 500 rather than left to
   the browser, which would synthesise a smeared faux-bold. */
@font-face{font-family:"Instrument";src:url("/static/fonts/instrument-500.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrainsMono";src:url("/static/fonts/jetbrains-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrainsMono";src:url("/static/fonts/jetbrains-400.woff2") format("woff2");font-weight:400;font-display:swap}

/* --- Ramps ---------------------------------------------------------------- */
:root{
  /* Ink is navy, not black. The dark end anchors on the two supplied navies,
     #00112C and #002769; the middle steps desaturate deliberately, because body
     copy set in a saturated blue is tiring to read where a near-neutral slate is
     not. Nothing in the palette is a true black or a true grey. */
  --ink-950:#00112C; --ink-900:#001B42; --ink-850:#002050; --ink-800:#002769;
  --ink-700:#1B3A66; --ink-600:#3A5578; --ink-500:#566F8F; --ink-400:#7B90AB;
  --ink-300:#A3B4C8; --ink-200:#C8D4E1; --ink-100:#E3EAF1; --ink-50:#F7F7F8;

  /* Teal is the interactive colour: links, focus rings, the brand mark. It sits
     between the navy of the text and the green of the actions, so a link is never
     confusable with either a heading or a button. Anchored on #00818A. */
  --teal-800:#00454A; --teal-700:#00676E; --teal-600:#00818A; --teal-500:#009DA8;
  --teal-400:#22B8C4; --teal-300:#5FD3DC; --teal-200:#A0E8ED; --teal-100:#CDF3F6;
  --teal-50:#ECFBFC;

  /* Money green. The dark end sits at emerald (hue ~159) and warms toward grass
     (hue ~131) as it lightens, which keeps the bright steps from looking acid.
     800/700/400 are the exact hexes specified; the rest are interpolated to hold
     an even lightness curve. --green-700 is the brand and clears 4.86:1 on white. */
  --green-800:#006642; --green-700:#008254; --green-600:#008D3F; --green-500:#00A331;
  --green-400:#00BD24; --green-300:#4FD968; --green-200:#9CECAB; --green-100:#CDF6D5;
  --green-50:#ECFDF0;

  --amber-700:#8A5209; --amber-600:#AD6A08; --amber-500:#D2860B;
  --amber-400:#EFA318; --amber-300:#FFBF4D; --amber-200:#FFD68A; --amber-100:#FFEBC4;

  --pos-700:#0B5F42; --pos-600:#0E7A54; --pos-500:#12996A; --pos-400:#2CBA88; --pos-300:#6BD6AC;
  --neg-700:#8E1F1B; --neg-600:#B32B25; --neg-500:#D33B33; --neg-400:#EC6259; --neg-300:#F79289;

  /* --- The four surfaces -------------------------------------------------
     The band a section sits on says what kind of information it carries:
       white  neutral explanation, the long-form reading surface
       mist   the site's own analysis, tinted with the interactive teal
       sand   money, and only money: figures, totals, worked examples
       ink    the edges of the page, where you arrive and where you leave
     Verified by scripts/check_palette.py, which checks both text contrast and
     whether adjacent bands are actually distinguishable from one another. The
     palette this replaced failed the second test at dE 3.0 and read as one
     flat sheet on every page. */
  --surf-mist:#EAF6F7;   /* pale teal, tuned to the new interactive colour */
  /* The top stop of every page-opener gradient. It has to be a semantic token,
     not a ramp step: a ramp step does not change between themes, and the opener
     is one of the few places a background must invert. */
  --surf-open:#D6EDF1;
  --surf-sand:#FBE6C4;   /* the supplied cream: money, and only money */
  --surf-lime:#E5F2C6;   /* the supplied lime: outcomes and next steps */
  /* The supplied neutral. NOT a band: against white it scores dE 1.7, which is
     invisible across a full-bleed edge and is the exact failure check_palette.py
     was written to catch. It is a card and inset surface only. */
  --surf-nvl:#F7F7F8;

  /* Semantic, light theme */
  --bg:#FFFFFF;
  --bg-alt:var(--surf-mist);
  --surface:#FFFFFF;
  --surface-2:var(--surf-mist);
  /* Heat map scale. Deliberately fixed rather than theme-aware.
     The cells are a tint of --green-500 at varying opacity. Composited onto the
     theme surface, the same tint sits over white in light mode and over near
     black in dark mode, so no single ink colour is readable across the scale in
     both: light ink measured 1.6:1 on the darkest cells. Pinning the base keeps
     the scale identical in both themes, where --heat-ink is verified at 5.57:1
     worst case across the whole range. Do NOT redefine these in the dark block. */
  --heat-base:#FFFFFF;
  --heat-ink:#001B42;
  --text:var(--ink-900);
  --text-muted:var(--ink-600);
  --text-subtle:var(--ink-500);
  --line:var(--ink-100);
  --line-strong:var(--ink-200);
  /* Brand is the interactive teal. Actions are green. Keeping them apart means a
     link never looks like a button and a button never looks like a link, which is
     the one distinction a page full of both has to get right. */
  --brand:var(--teal-700);
  --brand-hover:var(--teal-800);
  --brand-soft:var(--teal-50);
  --brand-line:var(--teal-200);
  --cta:var(--green-700);
  --cta-hover:var(--green-800);
  --accent:var(--amber-400);
  --accent-text:var(--amber-700);
  --accent-soft:#FFF8EA;
  --pos:var(--pos-700); --pos-soft:#E8F6F0;
  --neg:var(--neg-700); --neg-soft:#FBECEB;
  --on-dark:var(--ink-100);

  --c1:var(--teal-600); --c2:var(--amber-500); --c3:#6C63C7;
  --c4:var(--pos-500); --c5:#C2557A; --c6:var(--ink-500);

  --shadow-sm:0 1px 2px rgba(10,20,33,.06),0 1px 3px rgba(10,20,33,.04);
  --shadow-md:0 4px 12px rgba(10,20,33,.07),0 2px 4px rgba(10,20,33,.04);
  --shadow-lg:0 18px 40px -12px rgba(10,20,33,.18),0 6px 14px rgba(10,20,33,.06);
  --shadow-brand:0 10px 30px -10px rgba(0,130,84,.38);

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --body:"Instrument","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrainsMono","SFMono-Regular",Consolas,monospace;

  /* Container width. Prose is capped separately (68ch in a post, 70ch in a tool
     page), so this number does not affect line length at all: it only sets how
     much room the data-dense parts get. At 1180 the offer tables, comparison
     tables and charts were squeezed while the page carried ~370px of dead margin
     each side on a 1920 screen. 1320 gives those components the width they need
     and still leaves a comfortable gutter. */
  --maxw:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --t-fast:150ms; --t:240ms; --t-slow:420ms;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Desaturated tonal variants, not inversions. Mist stays the teal band and
       sand stays the warm one, both at a fraction of their light-mode chroma. */
    --surf-mist:#062227;
    --surf-open:#0C333C;
    --surf-sand:#241B0C;
    --surf-lime:#1B2410;
    --surf-nvl:#0A1832;
    --bg:var(--ink-950); --bg-alt:var(--surf-mist);
    --surface:var(--ink-900); --surface-2:var(--ink-850);
    --text:var(--ink-100); --text-muted:var(--ink-300); --text-subtle:var(--ink-400);
    --line:var(--ink-800); --line-strong:var(--ink-700);
    --brand:var(--teal-300); --brand-hover:var(--teal-200);
    --brand-soft:rgba(0,157,168,.16); --brand-line:var(--teal-700);
    --cta:var(--green-400); --cta-hover:var(--green-300);
    --accent:var(--amber-400); --accent-text:var(--amber-300);
    --accent-soft:rgba(239,163,24,.13);
    --pos:var(--pos-300); --pos-soft:rgba(18,153,106,.15);
    --neg:var(--neg-300); --neg-soft:rgba(211,59,51,.15);
    --c6:var(--ink-300);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 14px rgba(0,0,0,.45);
    --shadow-lg:0 20px 46px -14px rgba(0,0,0,.7);
    --shadow-brand:0 10px 30px -10px rgba(0,0,0,.6);
  }
}

html{color-scheme:light dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.14;
  letter-spacing:-.022em;margin:0;text-wrap:balance}
p{margin:0 0 1rem;text-wrap:pretty}
a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--brand-hover)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
/* --brand is the dark green in light mode, which lands at 2.5:1 on an ink band
   and fails WCAG 1.4.11. Every page now opens with an ink band containing
   links, so the ring has to lift there. 9.16:1. */
.band-dark :focus-visible,.footer :focus-visible{outline-color:var(--teal-300)}

/* Windows High Contrast replaces every background, which erases the band
   system entirely. Keep the section boundaries as real borders so the page
   still reads as a sequence, and let the system draw the focus ring. */
@media (forced-colors:active){
  .band-dark,.band-mist,.band-sand,.band-lime,.sec-alt{border-top:1px solid CanvasText}
  .band-dark :focus-visible,.footer :focus-visible{outline-color:Highlight}
  .card,.tile,.callout,.faq details,.sbox{border:1px solid CanvasText}
}
::selection{background:var(--teal-200);color:var(--ink-950)}

a,button,input,select,textarea,label,summary,[role=button]{
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,[role=button],summary{cursor:pointer}

/* A heading that names a section for a screen reader without appearing on
   screen. Used where a card grid would otherwise jump from h1 straight to h3,
   which reads to assistive tech as a missing level. */
.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}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:#fff;
  padding:.7rem 1.1rem;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.15rem,4vw,2rem)}
.wrap-narrow{max-width:780px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
.small{font-size:.88rem}
.center{text-align:center}
.stack-sm>*+*{margin-top:.6rem}

/* --- Icons ---------------------------------------------------------------- */
.ico{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.22em;
  fill:currentColor;flex:none}
.ico-lg{width:1.7em;height:1.7em}
.ico-xl{width:2.1em;height:2.1em}

/* --- Header --------------------------------------------------------------- */
.masthead{position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(1px)){.masthead{background:var(--bg)}}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--display);
  font-weight:700;font-size:1.22rem;letter-spacing:-.03em;text-decoration:none;color:var(--text)}
.brand:hover{color:var(--text)}
.brand .mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--green-700),var(--green-800));color:#fff;
  box-shadow:var(--shadow-brand)}
.brand .mark .ico{width:20px;height:20px}
.brand em{font-style:normal;color:var(--green-700)}

.nav{display:flex;align-items:center;gap:.3rem}
/* :not(.btn) is load-bearing. `.nav a` is (0,1,1) and `.btn-primary` is (0,1,0),
   so without it the nav rule wins and strips the header call to action back to a
   plain grey text link: background:none and colour text-muted. It looked like
   navigation rather than a button on every page, and it passed the contrast
   sweep because grey on white is perfectly legible, just wrong. */
.nav a:not(.btn),.nav .navbtn{font-family:var(--body);font-size:.95rem;font-weight:500;
  color:var(--text-muted);text-decoration:none;padding:.5rem .8rem;border-radius:var(--r-sm);
  background:none;border:0;display:inline-flex;align-items:center;gap:.35rem;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav a:not(.btn):hover,.nav .navbtn:hover{color:var(--text);background:var(--surface-2)}
.nav a[aria-current=page]:not(.btn){color:var(--brand);background:var(--brand-soft)}
.nav .btn{margin-left:.4rem}

.menu{position:relative}
/* The panel lists eleven entries now, two hubs and the nine tools, which is tall
   enough to run off the bottom of a laptop viewport. Two things stop it being
   clipped: it splits into two columns once there is room, which roughly halves
   the height, and it scrolls rather than overflowing when there is not. Without
   the max-height the last item is simply cut off with no way to reach it. */
.menu-panel{position:absolute;top:calc(100% + .55rem);right:0;width:min(94vw,360px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:.5rem;opacity:0;visibility:hidden;
  max-height:calc(100vh - 5.5rem);overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
@media (min-width:900px){
  .menu-panel{width:min(94vw,660px);display:grid;grid-template-columns:1fr 1fr;
    gap:0 .3rem;align-content:start}
  .menu-item-lead,.menu-sep{grid-column:1 / -1}
}
.menu[data-open=true] .menu-panel{opacity:1;visibility:visible;transform:none}
.menu-item{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .7rem;
  border-radius:var(--r);text-decoration:none;color:var(--text);
  transition:background var(--t-fast) var(--ease)}
.menu-item:hover{background:var(--surface-2);color:var(--text)}
/* The two hub entries lead the menu, so they are tinted and set apart from the
   nine individual tools below the separator. */
.menu-item-lead{background:var(--brand-soft)}
.menu-item-lead:hover{background:var(--brand-line)}
.menu-item-lead b{color:var(--brand-hover)}
.menu-sep{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-subtle);padding:.85rem .7rem .35rem;
  margin-top:.35rem;border-top:1px solid var(--line)}
.menu-item .mi-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);flex:none}
.menu-item b{display:block;font-family:var(--body);font-weight:600;font-size:.92rem;line-height:1.35}
.menu-item span{display:block;font-size:.79rem;color:var(--text-muted);line-height:1.4}
.caret{transition:transform var(--t) var(--ease)}
.menu[data-open=true] .caret{transform:rotate(180deg)}

.burger{display:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:.5rem;color:var(--text);
  /* 44px is the minimum comfortable touch target. */
  min-width:44px;min-height:44px;align-items:center;justify-content:center}
.mobile-nav{display:none}
@media (max-width:940px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  /* The open menu is taller than a phone screen, and it lives inside a sticky
     masthead, so anything past the fold could not be reached by scrolling: the
     header stays put while the page moves beneath it. That put the last item,
     the primary call to action, permanently out of reach. It scrolls itself now. */
  .mobile-nav[data-open=true]{display:block;padding:.4rem 0 1.2rem;border-top:1px solid var(--line);
    max-height:calc(100vh - 4.6rem);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch}
  .mobile-nav a{display:flex;align-items:center;gap:.7rem;padding:.85rem .3rem;
    text-decoration:none;color:var(--text);font-weight:500;border-bottom:1px solid var(--line)}
  .mobile-nav a .ico{color:var(--brand)}
  .mobile-nav .btn{margin-top:1rem;width:100%}
}

/* --- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:600;font-size:1rem;line-height:1;
  padding:.92rem 1.6rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  text-decoration:none;white-space:nowrap;min-height:48px;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),
             background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}

.btn-primary{background:var(--cta);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--cta-hover);color:#fff}
@media (prefers-color-scheme:dark){
  .btn-primary{background:var(--cta);color:var(--ink-950)}
  .btn-primary:hover{background:var(--cta-hover);color:var(--ink-950)}
}
.btn-accent{background:var(--amber-400);color:var(--ink-950);
  box-shadow:0 10px 26px -10px rgba(239,163,24,.6)}
.btn-accent:hover{background:var(--amber-300);color:var(--ink-950)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.btn-sm{padding:.58rem 1.05rem;font-size:.9rem;min-height:42px}
.btn-lg{padding:1.05rem 2rem;font-size:1.06rem;min-height:56px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* --- Tinted bands ---------------------------------------------------------
   Full-bleed surfaces. Cards and tiles keep their own white fill plus a 1px
   border, so they still read as raised objects on any of the three. */
.band-mist{background:var(--surf-mist)}
.band-lime{background:var(--surf-lime)}
.band-sand{background:var(--surf-sand)}

/* Money surface. Figures on sand are set in the mono face at a larger size,
   because this is the band where the numbers are the subject. */
.band-sand .statrow .sv,.band-sand .num,.band-sand .figure{
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.band-sand .statrow .sv{font-size:clamp(1.9rem,4.4vw,2.6rem)}

/* --- Dark bands ----------------------------------------------------------- */
.band-dark{
  background:
    radial-gradient(1100px 520px at 78% -8%,rgba(20,173,182,.22),transparent 62%),
    radial-gradient(760px 420px at 8% 108%,rgba(239,163,24,.13),transparent 60%),
    linear-gradient(168deg,var(--ink-900) 0%,var(--ink-950) 62%,#04080F 100%);
  /* After the shorthand, never before: `background` resets background-color to
     transparent. This is the solid fallback if the gradients do not paint. */
  background-color:var(--ink-900);
  color:var(--on-dark);position:relative;overflow:hidden;isolation:isolate}
.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}
/* Cards on an ink band go ink-native rather than staying white, the same way
   .numcard already does. A white card would take the band's white heading
   colour and render white-on-white. */
.band-dark .card{background:rgba(255,255,255,.05);border-color:var(--ink-700)}
.band-dark .card:hover{background:rgba(255,255,255,.09);border-color:var(--teal-700)}
.band-dark .card p{color:var(--ink-300)}
.band-dark .card .c-ico{background:rgba(95,211,220,.16);color:var(--teal-200)}
.band-dark .card .card-go{color:var(--teal-200)}
.band-dark .disclaimer{background:rgba(255,255,255,.04);border-color:var(--ink-700);
  color:var(--ink-300)}
.band-dark .disclaimer strong{color:var(--ink-100)}
.band-dark .muted{color:var(--ink-300)}
.band-dark a:not(.btn){color:var(--teal-200)}
.band-dark::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.12) 1px,transparent 0);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 40%,#000 30%,transparent 78%)}

@media (prefers-color-scheme:dark){
  /* The page is already near-black, so a darker band would disappear. The
     device inverts: the ink band becomes the one surface that lifts. */
  .band-dark{
    background:
      radial-gradient(1100px 520px at 78% -8%,rgba(20,173,182,.16),transparent 62%),
      radial-gradient(760px 420px at 8% 108%,rgba(239,163,24,.10),transparent 60%),
      linear-gradient(168deg,#16273A 0%,#101E2E 62%,#0C1826 100%);
    background-color:#16273A}
  .band-dark::after{opacity:.28}
}

/* Opening band shared by /tools, /start, /plans and /blog. Matches the soft mint
   field the tool pages use, so every page in the site opens the same way instead
   of the calculators being the one exception. */
.page-open{
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(1rem,2.6vw,1.5rem);
  padding-bottom:clamp(1.3rem,3vw,1.9rem);
  background:linear-gradient(168deg,var(--surf-open) 0%,var(--surf-mist) 100%);
  border-bottom:1px solid var(--brand-line);
}
.page-open::before{
  content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  width:560px;height:560px;right:-160px;top:-280px;
  background:radial-gradient(circle,rgba(0,189,36,.13),transparent 68%);
}
.page-open h1,.page-open h2{color:var(--text)}
.page-open .crumbs{margin-bottom:.9rem}
.page-open .crumbs a{color:var(--brand)}
.page-open .crumbs span,.page-open .crumbs .ico{color:var(--text-muted)}
.page-open .sec-head p,.page-open p{color:var(--text-muted)}
.page-open .catbar{margin-top:1.15rem}
.page-open .catbar a{color:var(--text-muted);border-color:var(--brand-line);
  background:var(--surface)}
.page-open .catbar a:hover{color:var(--brand-hover);border-color:var(--brand);
  background:var(--brand-soft)}
/* teal-800 rather than teal-600 for the selected chip: the count badge sits on
   this background, and only the darkest step gives both the label and the badge
   comfortable headroom. Verified by scripts/check_palette.py. */
.page-open .catbar a[aria-current=page]{background:var(--teal-800);color:#fff;
  border-color:var(--teal-800)}
.page-open .catbar .n{color:var(--text-subtle)}
.page-open .catbar a[aria-current=page] .n{color:var(--teal-100)}

/* --- Hero ----------------------------------------------------------------- */
.hero{padding:clamp(2.8rem,6vw,4.8rem) 0 clamp(3rem,6vw,4.6rem)}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.2rem);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr}}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:.42rem .9rem;border-radius:var(--r-pill);
  background:rgba(239,163,24,.16);color:var(--amber-300);border:1px solid rgba(239,163,24,.32);
  margin-bottom:1.25rem}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--amber-300);
  animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}

.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);margin-bottom:1.05rem;max-width:16ch}
.hero h1 .hl{color:var(--amber-300)}
.hero .lede{font-size:clamp(1.02rem,2vw,1.16rem);color:var(--ink-200);
  max-width:50ch;margin-bottom:1.8rem}

/* --- Sections ------------------------------------------------------------- */
.sec{padding:clamp(3rem,6.5vw,5.2rem) 0}
.sec-tight{padding:clamp(2rem,4vw,3rem) 0}
.sec-alt{background:var(--bg-alt)}
.sec-head{max-width:660px;margin-bottom:clamp(1.7rem,4vw,2.6rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h1,.sec-head h2{font-size:clamp(1.65rem,3.6vw,2.4rem);margin-bottom:.7rem}
.sec-head p{color:var(--text-muted);font-size:1.03rem;margin:0}
.kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin-bottom:.7rem}
.band-dark .kicker{color:var(--teal-200)}

/* --- Stat band ------------------------------------------------------------ */
.stats{display:grid;gap:clamp(1.4rem,3vw,2rem);grid-template-columns:repeat(2,minmax(0,1fr));
  padding:clamp(2.3rem,5vw,3.2rem) 0}
@media (min-width:860px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(1.95rem,4.2vw,2.8rem);
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;display:block;margin-bottom:.4rem}
.stat .n .u{color:var(--amber-300)}
.stat .l{font-size:.9rem;color:var(--ink-300);line-height:1.45;display:block}
.stat .src{font-size:.74rem;color:var(--ink-400);display:block;margin-top:.3rem}

/* --- Cards ---------------------------------------------------------------- */
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:minmax(0,1fr)}
.grid-3{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.45rem;box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease)}
.card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.card-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);
  border-color:var(--brand-line);color:inherit}
.card-link:hover .card-go{background:var(--brand);color:#fff;transform:translateX(3px)}
.card .c-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);margin-bottom:.95rem;
  transition:transform var(--t) var(--ease-back)}
.card-link:hover .c-ico{transform:scale(1.08) rotate(-5deg)}
.card h3{font-size:1.1rem;margin-bottom:.4rem;letter-spacing:-.015em}
.card p{color:var(--text-muted);font-size:.93rem;margin:0 0 1rem}
.card-go{margin-top:auto;align-self:flex-start;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-2);color:var(--text-muted);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
.card-feature{border-color:var(--brand-line);
  background:linear-gradient(160deg,var(--brand-soft),var(--surface) 58%)}
.badge{display:inline-flex;align-self:flex-start;align-items:center;gap:.32rem;font-size:.7rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:.26rem .6rem;border-radius:var(--r-pill);
  background:var(--amber-400);color:var(--ink-950);margin-bottom:.75rem}

/* --- Steps ---------------------------------------------------------------- */
.steps{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr);counter-reset:s}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{position:relative;padding-left:3.4rem}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-3px;
  width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  background:var(--green-700);color:#fff;box-shadow:var(--shadow-brand)}
@media (prefers-color-scheme:dark){.step::before{background:var(--green-400);color:var(--ink-950)}}
.step h3{font-size:1.06rem;margin-bottom:.3rem}
.step p{color:var(--text-muted);font-size:.93rem;margin:0}

/* --- Split feature -------------------------------------------------------- */
.split{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:920px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.rev .split-media{order:-1}}
.split-media{min-width:0}
.split-media img{border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  aspect-ratio:3/2;object-fit:cover;width:100%}
.split h2{font-size:clamp(1.5rem,3.1vw,2.1rem);margin-bottom:.85rem}
.ticks{list-style:none;padding:0;margin:1.15rem 0 0;display:grid;gap:.75rem}
.ticks li{display:flex;gap:.65rem;align-items:flex-start;color:var(--text-muted);font-size:.96rem}
.ticks .ico{color:var(--pos);margin-top:.22em}
.ticks.x .ico{color:var(--neg)}

/* --- Callouts ------------------------------------------------------------- */
.callout{display:flex;gap:.85rem;align-items:flex-start;padding:1.05rem 1.2rem;
  border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);
  border-left:4px solid var(--brand)}
.callout .ico{color:var(--brand);flex:none;margin-top:.16em}
.callout p{margin:0;font-size:.94rem;color:var(--text-muted)}
.callout strong{color:var(--text)}
.callout-warn{border-left-color:var(--amber-500);background:var(--accent-soft)}
.callout-warn .ico{color:var(--accent-text)}
.callout-bad{border-left-color:var(--neg);background:var(--neg-soft)}
.callout-bad .ico{color:var(--neg)}
.callout-good{border-left-color:var(--pos);background:var(--pos-soft)}
.callout-good .ico{color:var(--pos)}

/* --- FAQ ------------------------------------------------------------------ */
.faq{max-width:800px;margin:0 auto;display:grid;gap:.65rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.faq details[open]{border-color:var(--brand-line);box-shadow:var(--shadow-sm)}
.faq summary{padding:1.02rem 1.2rem;font-weight:600;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{color:var(--brand);transition:transform var(--t) var(--ease);flex:none}
.faq details[open] summary .ico{transform:rotate(90deg)}
.faq .a{padding:0 1.2rem 1.1rem;color:var(--text-muted);font-size:.95rem}
.faq .a p:last-child{margin:0}

/* --- Footer --------------------------------------------------------------- */
.footer{background:var(--ink-950);color:var(--ink-300);padding:3rem 0 1.8rem;
  font-size:.91rem;border-top:1px solid var(--ink-800)}
.footer h2{font-family:var(--body);font-size:.76rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-400);margin:0 0 .75rem;font-weight:600}
.footer a{color:var(--ink-300);text-decoration:none}
.footer a:hover{color:var(--green-200);text-decoration:underline}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer .brand{color:#fff;margin-bottom:.8rem}
.footer-grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:780px){.footer-grid{grid-template-columns:2.2fr minmax(0,1fr) minmax(0,1fr) 1.4fr}}
.footer-bottom{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--ink-800);
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:space-between;font-size:.84rem;
  color:var(--ink-400)}
.safety{display:flex;gap:.6rem;align-items:flex-start;padding:.85rem 1rem;border-radius:var(--r);
  background:rgba(18,153,106,.1);border:1px solid rgba(18,153,106,.26);color:var(--ink-200);
  font-size:.85rem;margin-top:.9rem}
.safety .ico{color:var(--pos-300);flex:none;margin-top:.12em}

/* --- Motion --------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}.reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s}.reveal-d4{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .btn:hover,.card-link:hover{transform:none}
}

/* ===========================================================================
   LoanPay - forms, wizard, results, charts, tool pages
   Loaded after app.css, which owns the tokens.
   =========================================================================== */

/* --- Form fields ---------------------------------------------------------- */
.field{display:block;margin-bottom:1.15rem}
.field>label{display:block;font-weight:600;font-size:.96rem;margin-bottom:.4rem;color:var(--text)}
.field .hint{font-size:.85rem;color:var(--text-muted);margin:.4rem 0 0;line-height:1.5}
.field .err{font-size:.85rem;color:var(--neg);margin:.4rem 0 0;display:flex;gap:.35rem;
  align-items:center;font-weight:500}
.field .err .ico{flex:none}

.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .pre,.input-wrap .post{position:absolute;font-family:var(--mono);font-size:1rem;
  color:var(--text-muted);pointer-events:none;font-weight:500}
.input-wrap .pre{left:1rem}
.input-wrap .post{right:1rem}
.input-wrap.has-pre input{padding-left:2.2rem}
.input-wrap.has-post input{padding-right:2.7rem}

input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;font-family:var(--mono);font-size:1.02rem;font-variant-numeric:tabular-nums;
  padding:.85rem 1rem;color:var(--text);background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:var(--r);min-height:52px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
select{font-family:var(--body);cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
textarea{font-family:var(--body);min-height:100px;resize:vertical}
input:hover,select:hover{border-color:var(--ink-300)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-soft)}
input.is-bad,select.is-bad{border-color:var(--neg);box-shadow:0 0 0 4px var(--neg-soft)}
input::placeholder{color:var(--text-subtle)}

.field-row{display:grid;gap:1.15rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.field-row.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Choice cards replace dropdowns wherever the options carry an explanation. */
.choices{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.choices.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.choice{position:relative;display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.1rem;
  border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
  cursor:pointer;transition:border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.choice:hover{border-color:var(--brand);background:var(--brand-soft)}
.choice:active{transform:scale(.99)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice .mk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);
  flex:none;margin-top:.15em;display:grid;place-items:center;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.choice .mk::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform var(--t-fast) var(--ease-back)}
.choice:has(input:checked){border-color:var(--brand);background:var(--brand-soft);
  box-shadow:0 0 0 3px var(--brand-soft)}
.choice:has(input:checked) .mk{border-color:var(--brand);background:var(--brand)}
.choice:has(input:checked) .mk::after{transform:scale(1)}
.choice:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:3px}
.choice b{display:block;font-weight:600;font-size:.98rem;line-height:1.4}
.choice span{display:block;font-size:.86rem;color:var(--text-muted);line-height:1.45;margin-top:.15rem}

.check{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;border-radius:var(--r);
  border:1.5px solid var(--line-strong);background:var(--surface);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.check:hover{border-color:var(--brand);background:var(--brand-soft)}
.check:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.check input{width:20px;height:20px;margin-top:.15em;accent-color:var(--teal-700);flex:none}
.check b{display:block;font-weight:600;font-size:.95rem}
.check span{display:block;font-size:.85rem;color:var(--text-muted);line-height:1.45}

/* --- Wizard --------------------------------------------------------------- */
.wiz-shell{max-width:740px;margin:0 auto}
.wiz-progress{margin-bottom:1.5rem}
.wiz-track{height:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;
  margin-bottom:.85rem}
.wiz-fill{height:100%;width:20%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--teal-500),var(--teal-400));
  transition:width var(--t-slow) var(--ease)}
.wiz-dots{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.wiz-dot{display:flex;align-items:center;gap:.4rem;font-size:.79rem;font-weight:600;
  color:var(--text-subtle);transition:color var(--t) var(--ease)}
.wiz-dot .b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--line);color:var(--text-muted);font-size:.71rem;flex:none;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.wiz-dot[data-state=now]{color:var(--brand)}
.wiz-dot[data-state=now] .b{background:var(--brand);color:#fff}
.wiz-dot[data-state=done]{color:var(--pos)}
.wiz-dot[data-state=done] .b{background:var(--pos);color:#fff}
@media (prefers-color-scheme:dark){
  .wiz-dot[data-state=now] .b,.wiz-dot[data-state=done] .b{color:var(--ink-950)}
}
.wiz-dot .lbl{display:none}
@media (min-width:740px){.wiz-dot .lbl{display:inline}}

.wiz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.4rem,4vw,2.3rem);box-shadow:var(--shadow-lg)}
.wiz-step{animation:stepIn var(--t-slow) var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wiz-step .eyebrow-sm{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
  margin-bottom:.5rem}
.wiz-step h2{font-size:clamp(1.32rem,3vw,1.75rem);margin-bottom:.45rem}
.wiz-step .lead{color:var(--text-muted);margin-bottom:1.5rem;font-size:.98rem}
.wiz-nav{display:flex;gap:.7rem;justify-content:space-between;align-items:center;
  margin-top:1.7rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.wiz-nav .spacer{flex:1}
[data-submit][data-busy=true]::after{content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* No-JS fallback: show every step as one long form, hide the stepper chrome. */
[data-wizard]:not([data-mode=stepped]) .wiz-step{display:block}
[data-wizard]:not([data-mode=stepped]) .wiz-step+.wiz-step{margin-top:2.1rem;
  padding-top:1.9rem;border-top:1px solid var(--line)}
[data-wizard]:not([data-mode=stepped]) [data-next],
[data-wizard]:not([data-mode=stepped]) [data-prev]{display:none}
[data-wizard][data-mode=stepped] .nojs-submit{display:none}

/* --- Results -------------------------------------------------------------- */
.result-head{padding:clamp(1.8rem,4vw,2.8rem) 0 clamp(1.4rem,3vw,2rem)}
.result-head h1{font-size:clamp(1.72rem,4.2vw,2.6rem);margin-bottom:.55rem}


.kpis{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);margin-bottom:1.9rem}
@media (min-width:720px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.25rem;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--line-strong)}
.kpi[data-k=best]::before{background:var(--pos)}
.kpi[data-k=low]::before{background:var(--amber-400)}
.kpi[data-k=gap]::before{background:var(--teal-500)}
.kpi .k{display:flex;align-items:center;gap:.4rem;font-size:.77rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:.45rem}
.kpi .v{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,3vw,1.8rem);
  line-height:1.1;font-variant-numeric:tabular-nums;display:block;margin-bottom:.3rem}
.kpi[data-k=best] .v{color:var(--pos)}
.kpi[data-k=low] .v{color:var(--accent-text)}
.kpi .n{font-size:.86rem;color:var(--text-muted);margin:0;line-height:1.5}

.assumptions{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.9rem}
.assumptions .a{display:inline-flex;align-items:center;gap:.4rem;font-size:.83rem;
  padding:.4rem .8rem;border-radius:var(--r-pill);background:var(--surface-2);
  border:1px solid var(--line);color:var(--text-muted)}
.assumptions .a b{font-family:var(--mono);color:var(--text);font-weight:500}

/* Plan cards */
.plans{display:grid;gap:1rem}
.planc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.planc:hover{box-shadow:var(--shadow-md)}
.planc.best{border-color:var(--pos);box-shadow:0 0 0 3px var(--pos-soft)}
.planc-top{display:grid;gap:1rem;padding:1.3rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:780px){.planc-top{grid-template-columns:minmax(0,1fr) auto}}
.planc-rank{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--surface-2);color:var(--text-muted);font-family:var(--mono);
  font-size:.77rem;font-weight:500;margin-right:.55rem;flex:none}
.planc.best .planc-rank{background:var(--pos);color:#fff}
.planc h3{font-size:1.14rem;display:flex;align-items:center;margin-bottom:.35rem}
.planc .note{color:var(--text-muted);font-size:.91rem;margin:0;max-width:58ch}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.73rem;font-weight:600;
  padding:.25rem .6rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);color:var(--text-muted);background:var(--surface-2)}
.tag[data-k=best]{color:var(--pos);border-color:var(--pos);background:var(--pos-soft)}
.tag[data-k=low]{color:var(--accent-text);border-color:var(--amber-500);background:var(--accent-soft)}
.tag[data-k=bad]{color:var(--neg);border-color:var(--neg);background:var(--neg-soft)}
.tag[data-k=info]{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)}

.planc-figs{text-align:left;min-width:180px}
@media (min-width:780px){.planc-figs{text-align:right}}
.planc-figs .per{font-size:.71rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);font-weight:600;display:block;margin-bottom:.15rem}
.planc-figs .pay{font-family:var(--display);font-weight:700;font-size:1.8rem;line-height:1.1;
  font-variant-numeric:tabular-nums;display:block;color:var(--text)}
.planc.best .planc-figs .pay{color:var(--pos)}
.planc-figs .sub{font-size:.84rem;color:var(--text-muted);display:block;
  font-variant-numeric:tabular-nums}
.planc-bar{height:5px;background:var(--surface-2);position:relative;overflow:hidden}
.planc-bar i{position:absolute;top:0;bottom:0;left:0;
  background:linear-gradient(90deg,var(--teal-500),var(--teal-400));
  border-radius:0 var(--r-pill) var(--r-pill) 0}
.planc.best .planc-bar i{background:linear-gradient(90deg,var(--pos-500),var(--pos-400))}
.planc.inelig{opacity:.62}

/* --- Charts --------------------------------------------------------------- */
.chartbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.3rem;box-shadow:var(--shadow-sm)}
.chartbox h3{font-size:1.04rem;margin-bottom:.28rem}
.chartbox .cap{font-size:.86rem;color:var(--text-muted);margin:0 0 1rem}
/* Only the chart itself stretches. Without :not(.ico) this also hits the heading
   icons and blows them up to the full column width. */
.chartbox svg:not(.ico){width:100%;height:auto;display:block}
.chartbox h3 .ico{width:1.15em;height:1.15em}
/* Two charts side by side on a wide screen, stacked on a narrow one. A container
   query rather than a viewport one, because these sit inside a column whose
   width does not track the viewport. */
@media (min-width:900px){.chart-pair{grid-template-columns:1fr 1fr;align-items:start}}
/* The donut is a fixed 220px square, so its box would otherwise sit far shorter
   than the line chart beside it. */
/* Two routes out of the calculator: jump to your own breakdown, or post the
   form to compare plans. Stacked on mobile, side by side once there is room. */
.qbtns{display:grid;gap:.6rem;margin-top:.2rem}
@media (min-width:520px){.qbtns{grid-template-columns:1fr 1fr;align-items:stretch}}
.qbtns .btn{margin:0;justify-content:center}

/* Your breakdown: headline figures, the donut, and the balance line.
   One column on mobile; on a wide screen the figures sit narrow beside two
   charts of equal width. */
.breakdown-grid{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){
  .breakdown-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .breakdown-grid>.bd-figures{grid-column:1/-1}
}
@media (min-width:1180px){
  .breakdown-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1fr) minmax(0,1.15fr)}
  .breakdown-grid>.bd-figures{grid-column:auto}
}

.bd-figures{display:grid;gap:.75rem;align-content:start;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1180px){.bd-figures{grid-template-columns:minmax(0,1fr)}}
.bd-stat{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:.9rem 1.05rem;box-shadow:var(--shadow-sm)}
.bd-label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:.25rem}
.bd-value{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.32rem,2.6vw,1.72rem);line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--text)}
.bd-value.bd-amber{color:var(--amber-600)}
@media (prefers-color-scheme:dark){.bd-value.bd-amber{color:var(--amber-400)}}

/* The one-line, computed summary under the standfirst on a balance page. */
.amt-snapshot{margin:.9rem 0 0;padding:.85rem 1.05rem;border-radius:var(--r-md);
  background:var(--surf-open);border:1px solid var(--line);
  font-size:.94rem;line-height:1.6;color:var(--text)}
.amt-snapshot strong{font-weight:700}

/* Freshness and provenance strip under the H1. */
.byline{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;margin:.1rem 0 1rem;
  font-size:.83rem;color:var(--text-muted)}
.byline span{display:inline-flex;align-items:center;gap:.36rem}
.byline .ico{width:1em;height:1em;flex:none;opacity:.8}

/* Key takeaways beside the jump nav. Two columns on a wide screen so neither
   stands alone as a full-width slab. */
.takeaway-grid{display:grid;gap:1.2rem}
@media (min-width:900px){.takeaway-grid{grid-template-columns:1.6fr 1fr;align-items:start}}
.fastfacts,.onthispage{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.35rem 1.5rem;box-shadow:var(--shadow-sm)}
.fastfacts h2,.onthispage h2{font-size:1.02rem;margin:0 0 .8rem;
  display:flex;align-items:center;gap:.45rem}
.fastfacts h2 .ico,.onthispage h2 .ico{width:1.15em;height:1.15em;flex:none;color:var(--accent)}
.fastfacts ul{margin:0;padding-left:1.1rem;display:grid;gap:.6rem}
.fastfacts li{font-size:.93rem;line-height:1.55}
.onthispage ol{margin:0;padding-left:1.2rem;display:grid;gap:.42rem}
.onthispage li{font-size:.88rem;line-height:1.4}
.onthispage a{color:var(--text-muted);text-decoration:none}
.onthispage a:hover{color:var(--accent);text-decoration:underline}

/* Source list. */
.sources ul{margin:0;padding-left:1.1rem;display:grid;gap:.65rem}
.sources li{font-size:.92rem;line-height:1.55}
.srcnote{margin-top:1.1rem;font-size:.86rem;color:var(--text-muted);
  display:flex;align-items:flex-start;gap:.45rem;line-height:1.55}
.srcnote .ico{width:1.05em;height:1.05em;flex:none;margin-top:.15em}

/* The legend under a multi-line or donut chart.
   This had no rule at all until now, on this page or the flagship one. The
   swatch is an empty <i> carrying only a background colour, and an empty inline
   element with no dimensions collapses to zero width, so every legend on the
   site listed plan names next to nothing. Without a visible colour there is no
   way to tell which line belongs to which plan, which is most of what a
   multi-line chart is for. */
.chartlegend{display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;margin-top:.9rem;
  font-size:.84rem;color:var(--text-muted)}
.chartlegend span{display:inline-flex;align-items:center;gap:.42rem}
.chartlegend i{width:12px;height:12px;border-radius:3px;flex:none;display:block}
/* --- Chart interactivity ------------------------------------------------- */
/* The tooltip is positioned with a transform on a fixed element, so it never
   affects layout and never triggers a reflow while tracking the pointer. */
.ch-tip{position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow-md);padding:.55rem .7rem;min-width:132px;
  font-size:.82rem;line-height:1.45;color:var(--text)}
.ch-tip[hidden]{display:none}
.ch-tip strong{display:block;font-size:.8rem;color:var(--text-muted);font-weight:600;
  margin-bottom:.2rem}
.ch-tip-v{display:block;font-family:var(--display);font-size:1.05rem;font-weight:700}
.ch-tip-s{display:block;font-size:.78rem;color:var(--text-muted);margin-top:.1rem}
.ch-tip-r{display:flex;align-items:center;gap:.4rem;margin-top:.22rem;white-space:nowrap}
.ch-tip-r i{width:9px;height:9px;border-radius:2px;flex:none}
.ch-tip-r b{margin-left:auto;font-weight:700;padding-left:.7rem}

/* No focus style here on purpose: app.css already gives every focusable element
   a 3px brand outline, and duplicating it with a different colour would make
   charts the one place on the site where keyboard focus looks different. */
.ch-item{cursor:pointer}
/* Dim the rest of the chart while one item is being read, so the eye goes to
   the row the pointer is on. */
.ch.is-active .ch-item{opacity:.45;transition:opacity .12s var(--ease)}
.ch.is-active .ch-item.is-hot{opacity:1}
.ch-donut .ch-seg{transition:stroke-width .12s var(--ease)}
.ch-donut .ch-seg.is-hot{stroke-width:36}

.ch-guide{stroke:var(--text-subtle);stroke-width:1;stroke-dasharray:3 3}
.ch-cross{transition:opacity .12s var(--ease)}
.ch-dot{stroke:var(--surface);stroke-width:2}
.ch-lines{touch-action:pan-y}

@media (prefers-reduced-motion:reduce){
  .ch.is-active .ch-item,.ch-donut .ch-seg,.ch-cross{transition:none}
}

/* A chart beside its reading. The chart gets the space it needs and the note
   sits alongside rather than underneath, which is the layout the whole site now
   uses instead of a full-width chart with nothing next to it. */
.chart-side{display:grid;gap:1.2rem;align-items:start}
@media (min-width:980px){.chart-side{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.chart-note{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.25rem}
.chart-note h3{font-size:1.02rem;margin-bottom:.5rem}
.chart-note p{font-size:.9rem;line-height:1.62;color:var(--text-muted);margin:0 0 .7rem}
.chart-note p:last-child{margin-bottom:0}
.chart-note strong{color:var(--text)}
.chart-note-go{margin-top:1rem}
/* The heat map is the one chart with a natural minimum width: below it the
   cells stop fitting their own labels. Let it scroll rather than shrink. */
.ch-heat{min-width:560px}
.chartbox:has(.ch-heat){overflow-x:auto}

/* Blog charts: chart and caption side by side.
   A container query, not a viewport one, because these sit inside the article
   column whose width does not track the viewport: on a wide screen the column is
   still narrow, and a viewport query would split the chart when there is no room
   for it. */
.chartbox-split{container-type:inline-size}
.cs-cap{font-size:.87rem;line-height:1.6;color:var(--text-muted);margin-top:.9rem}
@container (min-width:640px){
  .chartbox-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:1.3rem;align-items:center}
  .cs-cap{margin-top:0;border-left:3px solid var(--line);padding-left:1rem}
}

.chart-cap{margin-bottom:1rem}
.chart-cap h3{font-size:1.02rem;margin-bottom:.3rem}
.chart-cap p{font-size:.87rem;color:var(--text-muted);margin:0;line-height:1.5}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.95rem;font-size:.84rem}
.legend .li{display:inline-flex;align-items:center;gap:.42rem;color:var(--text-muted)}
.legend .sw{width:12px;height:12px;border-radius:3px;flex:none}
.axis{font-family:var(--mono);font-size:10px;fill:var(--text-subtle)}
.gridline{stroke:var(--line);stroke-width:1}
.chart-anim{animation:draw 1.6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bar-anim{transform-origin:center bottom;animation:grow .9s var(--ease) backwards}
@keyframes grow{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){
  .chart-anim{animation:none;stroke-dashoffset:0}
  .bar-anim{animation:none}
}

/* --- Tables --------------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);max-height:560px}
table.data{width:100%;border-collapse:collapse;font-size:.91rem}
table.data th,table.data td{padding:.68rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
table.data thead th{position:sticky;top:0;background:var(--surface-2);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);font-weight:600;z-index:1}
table.data td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:0}
table.data tr.year td{background:var(--brand-soft);font-weight:600}

/* --- Tool pages ----------------------------------------------------------- */
.tool-hero{padding:clamp(1.6rem,4vw,2.6rem) 0 1.5rem}
.tool-hero .t-ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);margin-bottom:.95rem}
.tool-hero h1{font-size:clamp(1.65rem,4vw,2.4rem);margin-bottom:.55rem}
.tool-hero p{color:var(--text-muted);font-size:1.04rem;max-width:58ch;margin:0}
/* The hero was a full black band. It is now a soft mint field: lighter, shorter,
   and it hands the eye straight to the calculator instead of stopping it at a
   hard dark block. The two blobs are radial gradients rather than images, so
   there is no asset to load and nothing to go stale.
   These rules must stay AFTER the ones above: both are class-plus-element
   specificity, so source order decides the winner. */
.tool-hero-soft{
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(.9rem,2.4vw,1.35rem);
  padding-bottom:clamp(1.1rem,2.8vw,1.6rem);
  background:linear-gradient(168deg,var(--surf-open) 0%,var(--surf-mist) 100%);
  border-bottom:1px solid var(--brand-line);
}
.tool-hero-soft::before,.tool-hero-soft::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
}
.tool-hero-soft::before{
  width:520px;height:520px;right:-140px;top:-260px;
  background:radial-gradient(circle,rgba(0,189,36,.13),transparent 68%);
}
.tool-hero-soft::after{
  width:420px;height:420px;right:120px;bottom:-300px;
  background:radial-gradient(circle,rgba(0,130,84,.11),transparent 68%);
}
.tool-hero-soft .crumbs{margin-bottom:.85rem}
.tool-hero-soft .crumbs a{color:var(--brand)}
.tool-hero-soft .crumbs span,.tool-hero-soft .crumbs .ico{color:var(--text-muted)}
.tool-hero-soft .t-ico{
  width:46px;height:46px;border-radius:13px;margin:0;flex:none;
  background:#fff;color:var(--teal-700);box-shadow:var(--shadow-sm);
}
.tool-hero-soft h1{margin:0;color:var(--text)}
.tool-hero-soft p{color:var(--text-muted)}

/* Title left, blurb right. Filling the container this way is what lets the band
   lose roughly a third of its height without the copy feeling cramped, and it
   keeps the blurb at a readable measure instead of one 130-character line. */
.hero-split{display:flex;flex-wrap:wrap;gap:.85rem 2.4rem;align-items:center}
.hero-split .hs-l{display:flex;align-items:center;gap:.9rem;flex:1 1 22rem;min-width:0}
.hero-split .hs-r{flex:1 1 24rem;min-width:0;max-width:none;
  font-size:1.02rem;line-height:1.6;margin:0;
  padding-left:1.6rem;border-left:3px solid var(--brand-line)}
@media (max-width:720px){
  .hero-split .hs-r{padding-left:0;border-left:0}
}
.tool-grid{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){.tool-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.tool-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.25rem,3vw,1.8rem);box-shadow:var(--shadow-md)}
@media (min-width:960px){.tool-form{position:sticky;top:92px}}
.tool-form h2{font-size:1.15rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem}
.tool-out{display:grid;gap:1.05rem}
.outcome{border-radius:var(--r-xl);padding:clamp(1.25rem,3vw,1.8rem);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-sm)}
.outcome .big{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,5.2vw,2.9rem);
  line-height:1;font-variant-numeric:tabular-nums;display:block;margin:.2rem 0 .45rem}
.outcome .lbl{font-size:.79rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  color:var(--text-muted);display:flex;align-items:center;gap:.4rem}
.outcome .sub{color:var(--text-muted);font-size:.94rem;margin:0}
.outcome.good{border-color:var(--pos);background:linear-gradient(160deg,var(--pos-soft),var(--surface) 60%)}
.outcome.good .big{color:var(--pos)}
.outcome.bad{border-color:var(--neg);background:linear-gradient(160deg,var(--neg-soft),var(--surface) 60%)}
.outcome.bad .big{color:var(--neg)}
.outcome.warn{border-color:var(--amber-500);background:linear-gradient(160deg,var(--accent-soft),var(--surface) 60%)}
.outcome.warn .big{color:var(--accent-text)}
.pairs{display:grid;margin-top:1rem}
.pair{display:flex;justify-content:space-between;gap:1rem;padding:.68rem 0;
  border-bottom:1px solid var(--line);font-size:.93rem}
.pair:last-child{border-bottom:0}
.pair .pk{color:var(--text-muted)}
.pair .pv{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.pair.hi .pv{color:var(--pos);font-weight:600}
.pair.lo .pv{color:var(--neg);font-weight:600}

.empty-state{border:1.5px dashed var(--line-strong);border-radius:var(--r-xl);
  padding:2.5rem 1.5rem;text-align:center;color:var(--text-muted);background:var(--surface-2)}
.empty-state .ico{color:var(--brand);margin-bottom:.65rem}
.empty-state h3{font-size:1.08rem;margin-bottom:.35rem;color:var(--text)}
.empty-state p{margin:0;font-size:.92rem}

.crumbs{display:flex;gap:.4rem;align-items:center;font-size:.85rem;color:var(--text-muted);
  padding:1rem 0 0;flex-wrap:wrap}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs .ico{width:.9em;height:.9em;opacity:.6}

.related{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.related{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.related a{display:flex;gap:.7rem;align-items:center;padding:.9rem 1rem;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--text);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.related a:hover{border-color:var(--brand);transform:translateX(3px);color:var(--text)}
.related a .ri{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);flex:none}
.related a b{font-size:.92rem;font-weight:600;display:block}

.disclaimer{margin-top:2rem;padding:1.05rem 1.2rem;border-radius:var(--r);
  border:1px solid var(--line-strong);background:var(--surface-2);
  font-size:.86rem;color:var(--text-muted)}
.disclaimer strong{color:var(--text)}

.prose{max-width:70ch}
.prose h2{font-size:clamp(1.38rem,3vw,1.85rem);margin:2.1rem 0 .75rem}
.prose h3{font-family:var(--body);font-weight:600;font-size:1.05rem;margin:1.4rem 0 .4rem;
  letter-spacing:0}
.prose ul,.prose ol{padding-left:1.3rem;color:var(--text-muted)}
.prose li{margin-bottom:.5rem}
.prose p{color:var(--text-muted)}
.prose strong{color:var(--text)}

/* --- /calculators hub ------------------------------------------------------
   The hub used to define a second palette of its own, an indigo ramp scoped to
   .calchub. That meant two sets of colour tokens to keep in step and a page that
   drifted whenever the theme moved. It now uses the theme tokens directly, so it
   inherits every future palette change for free and there is one palette in the
   codebase rather than two. The layout is what makes the page distinct, not a
   private set of colours. */
@media (prefers-color-scheme:dark){
  }

.calchub-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(1.3rem,3vw,2rem) 0 clamp(1.6rem,3.5vw,2.4rem);
  background:linear-gradient(150deg,var(--surf-open) 0%,var(--surf-mist) 100%);
  border-bottom:1px solid var(--brand-line);
}
.calchub-hero::before{
  content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  width:620px;height:620px;right:-180px;top:-320px;
  background:radial-gradient(circle,rgba(0,129,138,.10),transparent 68%);
}
.calchub-hero .crumbs{margin-bottom:1rem}
.calchub-hero .crumbs a{color:var(--brand-hover)}
.calchub-hero .crumbs span,.calchub-hero .crumbs .ico{color:var(--text-muted)}
.calchub .kicker{color:var(--brand-hover)}
.calchub-hero h1{color:var(--text);font-size:clamp(1.8rem,4.2vw,2.75rem);margin-bottom:.8rem}
.ch-lede{color:var(--text-muted);font-size:1.06rem;max-width:56ch;margin:0}

.ch-hero-grid{display:grid;gap:1.6rem 2.6rem;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:940px){.ch-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.ch-hero-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.ch-stat{background:rgba(255,255,255,.72);border:1px solid var(--brand-line);
  border-radius:var(--r);padding:.85rem .95rem}
@media (prefers-color-scheme:dark){.ch-stat{background:rgba(255,255,255,.05)}}
.ch-stat .n{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;
  color:var(--brand-hover);line-height:1.1}
.ch-stat .l{display:block;font-size:.79rem;color:var(--text-muted);margin-top:.15rem}

.ch-chooser{padding-top:1.4rem;padding-bottom:.2rem}
.ch-chooser-t{color:var(--text-muted);font-size:.94rem;margin:0 0 .7rem;
  display:flex;align-items:center;gap:.45rem}
.ch-chooser-t .ico{color:var(--brand)}
.ch-chooser-t strong{color:var(--text)}
.ch-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.ch-chip{display:inline-flex;align-items:center;gap:.38rem;font-size:.85rem;font-weight:500;
  padding:.42rem .8rem;border-radius:var(--r-pill);text-decoration:none;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text-muted);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease)}
.ch-chip .ico{width:1em;height:1em;color:var(--brand)}
.ch-chip:hover{border-color:var(--brand);color:var(--brand-hover);background:var(--brand-soft)}

.ch-group{padding:clamp(2rem,4.5vw,3.2rem) 0}
.ch-group-alt{background:var(--brand-soft)}
.ch-group-head{display:flex;gap:1.1rem;align-items:flex-start;margin-bottom:1.7rem;
  max-width:70ch}
.ch-num{font-family:var(--mono);font-size:.95rem;font-weight:500;color:#fff;flex:none;
  background:var(--brand-hover);width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;margin-top:.2rem}
/* brand-hover is a dark teal in light mode and a pale one in dark, so the chip
   text has to follow it rather than stay white. */
@media (prefers-color-scheme:dark){.ch-num{color:var(--ink-950)}}
.ch-group-head h2{font-size:clamp(1.35rem,3vw,1.9rem);margin:.15rem 0 .55rem;color:var(--text)}
.ch-group-head p{color:var(--text-muted);margin:0;font-size:1rem;line-height:1.7}

.ch-cards{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.ch-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ch-card{display:flex;flex-direction:column;gap:.7rem;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:1.3rem 1.4rem;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             transform var(--t) var(--ease)}
.ch-card:hover{border-color:var(--teal-400);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ch-card-top{display:flex;gap:.85rem;align-items:center}
.ch-ico{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-hover)}
.ch-card h3{font-size:1.13rem;margin:0 0 .18rem}
.ch-card h3 a{color:var(--text);text-decoration:none}
.ch-card h3 a:hover{color:var(--brand-hover)}
.ch-time{display:inline-flex;align-items:center;gap:.32rem;font-family:var(--mono);
  font-size:.76rem;color:var(--text-subtle)}
.ch-time .ico{width:1em;height:1em}
.ch-q{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--brand-hover);
  margin:0;line-height:1.4}
.ch-blurb{color:var(--text-muted);font-size:.95rem;margin:0;line-height:1.65}
.ch-meta{margin:.15rem 0 0;display:grid;gap:.55rem;
  padding-top:.85rem;border-top:1px solid var(--line)}
.ch-meta dt{display:flex;align-items:center;gap:.35rem;font-size:.73rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-subtle);margin-bottom:.12rem}
.ch-meta dt .ico{width:1em;height:1em;color:var(--brand)}
.ch-meta dd{margin:0;font-size:.9rem;color:var(--text-muted);line-height:1.55}
.ch-go{margin-top:auto;padding-top:.9rem;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:.92rem;color:var(--brand-hover);text-decoration:none}
.ch-go .ico{transition:transform var(--t-fast) var(--ease)}
.ch-card:hover .ch-go .ico{transform:translateX(3px)}

.ch-table-sec{padding:clamp(2rem,4.5vw,3.2rem) 0}
.ch-table-sec .block-head h2{color:var(--text)}
.ch-table td a{display:inline-flex;align-items:center;gap:.45rem;color:var(--brand-hover);
  font-weight:600;text-decoration:none;white-space:nowrap}
.ch-table td a:hover{text-decoration:underline}
.ch-table td a .ico{width:1.05em;height:1.05em}
.ch-table td{font-size:.92rem}

.ch-close{padding:clamp(2.2rem,5vw,3.4rem) 0;background:var(--ink-950);color:#fff}
/* Dark teal rather than navy in dark mode, so the closing panel still separates
   from the page. It stays a DARK panel either way, which is why the text below
   does not flip: an earlier override turned it navy-on-teal at 2.83. */
@media (prefers-color-scheme:dark){.ch-close{background:var(--teal-800)}}
.ch-close h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem);margin:.4rem 0 .7rem}
.ch-close .kicker{color:var(--teal-200)}
.ch-close-p{color:var(--teal-100);max-width:58ch;margin:0 auto 1.5rem;font-size:1.02rem}

/* --- /student-loan-calculator ---------------------------------------------- */
.slc-hero{padding-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.slc-hero h1{font-size:clamp(1.9rem,4.6vw,3rem);margin-bottom:.7rem;color:var(--text)}
.slc-lede{color:var(--text-muted);font-size:1.06rem;max-width:54ch;line-height:1.7}
.slc-hero-grid{display:grid;gap:1.8rem 2.8rem;grid-template-columns:minmax(0,1fr);
  align-items:start}
@media (min-width:980px){.slc-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}}
.slc-ticks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.slc-ticks li{display:flex;gap:.55rem;align-items:flex-start;font-size:.96rem;
  color:var(--text-muted)}
.slc-ticks .ico{color:var(--pos);flex:none;margin-top:.2em}

.slc-charts{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.slc-charts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tsub{font-size:.83rem;color:var(--text-subtle)}
.tnote{display:flex;gap:.45rem;align-items:flex-start;font-size:.87rem;
  color:var(--text-subtle);margin:1rem 0 0}
.tnote .ico{flex:none;margin-top:.2em}

/* --- Page-top wave texture -------------------------------------------------
   One SVG, inlined via mask so it takes currentColor from whichever section
   uses it. That means one file serves the teal page openers, the indigo hub
   and anything added later, instead of one recoloured copy per palette.
   Purely decorative, so it sits behind content and is masked out of print. */
.wave-top{position:relative;overflow:hidden;isolation:isolate}
.wave-top::after{
  content:"";position:absolute;left:0;right:0;top:0;height:340px;z-index:-1;
  pointer-events:none;opacity:.45;
  background-color:currentColor;
  -webkit-mask:url("/static/img/hero-wave.svg") no-repeat center top / 100% 340px;
  mask:url("/static/img/hero-wave.svg") no-repeat center top / 100% 340px;
}
@media print{.wave-top::after{display:none}}
/* On a phone the band is short and the copy long, so a full-height wave sits
   directly behind most of the text. Shorter and fainter there. */
@media (max-width:640px){
  .wave-top::after{height:190px;opacity:.3}
}

/* The page openers already draw two radial blobs. The wave replaces them:
   keeping both was noisy. */
.page-open{color:var(--teal-500)}
.page-open::before{display:none}
.tool-hero-soft{color:var(--teal-400)}
.tool-hero-soft::before,.tool-hero-soft::after{display:none}
.calchub-hero{color:var(--teal-300)}
.calchub-hero::before{display:none}

/* --- Per-amount calculator pages ------------------------------------------- */
.amt-h{display:flex;align-items:center;gap:.5rem;font-size:1.08rem;margin:0 0 .8rem}
.amt-h .ico{color:var(--brand)}

.amt-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.3rem}
.amt-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.85rem;
  padding:.42rem .8rem;border-radius:var(--r-pill);text-decoration:none;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text-muted);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease)}
.amt-chip:hover{border-color:var(--brand);color:var(--brand-hover);background:var(--brand-soft)}
/* The current balance is the one chip that must not look clickable. */
.amt-chip.is-current{background:var(--brand);border-color:var(--brand);color:#fff;
  font-weight:500}
@media (prefers-color-scheme:dark){.amt-chip.is-current{color:var(--ink-950)}}
.amt-nav{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ===========================================================================
   LoanPay - long-form content sections for the tool pages
   Each block is visually distinct so a long page reads as a sequence of
   different things rather than one undifferentiated wall.
   =========================================================================== */

.article{max-width:none}
.block{padding:clamp(2.2rem,5vw,3.4rem) 0;border-top:1px solid var(--line)}
.block:first-child{border-top:0}
.block-head{margin-bottom:1.6rem;max-width:64ch}
.block-head h2{font-size:clamp(1.4rem,3.2vw,2rem);margin-bottom:.55rem}
.block-head p{color:var(--text-muted);margin:0}
.block-lede{font-size:1.08rem;color:var(--text-muted);max-width:68ch;line-height:1.7}

/* --- How it works: numbered rail ------------------------------------------ */
.howlist{display:grid;gap:0;counter-reset:h;max-width:66ch}
.howstep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.1rem;
  padding:0 0 1.5rem;position:relative}
.howstep:last-child{padding-bottom:0}
.howstep::before{counter-increment:h;content:counter(h);width:2.1rem;height:2.1rem;
  border-radius:50%;display:grid;place-items:center;font-family:var(--display);
  font-weight:700;font-size:.9rem;background:var(--brand);color:#fff;
  grid-row:1 / span 2;box-shadow:var(--shadow-brand)}
@media (prefers-color-scheme:dark){.howstep::before{background:var(--teal-400);color:var(--ink-950)}}
/* Connecting line down the rail */
.howstep:not(:last-child)::after{content:"";position:absolute;left:1.05rem;top:2.3rem;
  bottom:.3rem;width:2px;background:var(--line-strong);border-radius:2px}
.howstep h3{font-family:var(--body);font-weight:600;font-size:1.02rem;margin-bottom:.25rem;
  letter-spacing:0;padding-top:.28rem}
.howstep p{color:var(--text-muted);font-size:.95rem;margin:0;grid-column:2}

/* --- Formula box ----------------------------------------------------------- */
.formula{background:var(--ink-900);color:var(--ink-100);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,1.9rem);box-shadow:var(--shadow-lg);position:relative;
  overflow:hidden;isolation:isolate}
.formula::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.4;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.1) 1px,transparent 0);
  background-size:26px 26px}
.formula h3{color:#fff;font-size:1.08rem;margin-bottom:1rem;display:flex;
  align-items:center;gap:.5rem}
.formula h3 .ico{color:var(--teal-300)}
.formula ol{list-style:none;counter-reset:f;margin:0;padding:0;display:grid;gap:.65rem}
.formula li{counter-increment:f;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.75rem;align-items:start;font-family:var(--mono);font-size:.9rem;line-height:1.6;
  color:var(--ink-200)}
.formula li::before{content:counter(f);font-size:.7rem;font-weight:600;width:1.5rem;
  height:1.5rem;border-radius:6px;display:grid;place-items:center;
  background:rgba(95,211,220,.16);color:var(--teal-200);font-family:var(--body);flex:none}
.formula .fnote{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--ink-700);
  font-family:var(--body);font-size:.92rem;color:var(--ink-300);line-height:1.65}

/* --- Options / mistakes cards --------------------------------------------- */
.tiles{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.3rem;border-left:3px solid var(--brand);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.tile:hover{transform:translateY(-2px);border-left-color:var(--teal-400)}
.tile h3{font-family:var(--body);font-weight:600;font-size:1rem;margin-bottom:.35rem;
  letter-spacing:0;display:flex;gap:.5rem;align-items:flex-start}
.tile h3 .ico{color:var(--brand);flex:none;margin-top:.12em}
.tile p{color:var(--text-muted);font-size:.93rem;margin:0}
.tiles-bad .tile{border-left-color:var(--neg)}
.tiles-bad .tile:hover{border-left-color:var(--neg-500)}
.tiles-bad .tile h3 .ico{color:var(--neg)}

/* --- Context / news strip -------------------------------------------------- */
.news{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.news{grid-template-columns:repeat(2,minmax(0,1fr))}}
.newsitem{display:flex;gap:.9rem;align-items:flex-start;padding:1.15rem 1.25rem;
  border-radius:var(--r);background:var(--brand-soft);border:1px solid var(--brand-line)}
.newsitem .ni{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface);color:var(--brand);flex:none;box-shadow:var(--shadow-sm)}
.newsitem h3{font-family:var(--body);font-weight:600;font-size:.98rem;margin-bottom:.25rem;
  letter-spacing:0}
.newsitem p{color:var(--text-muted);font-size:.92rem;margin:0}

/* --- Worked examples ------------------------------------------------------- */
.worked{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.worked .wcap{padding:1rem 1.2rem;border-bottom:1px solid var(--line);
  background:var(--surface-2);font-size:.9rem;color:var(--text-muted)}

/* --- Glossary -------------------------------------------------------------- */
.gloss{display:grid;gap:.65rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.gloss{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gterm{padding:1rem 1.1rem;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line)}
.gterm dt{font-weight:600;font-size:.95rem;margin-bottom:.25rem}
.gterm dd{margin:0;color:var(--text-muted);font-size:.9rem;line-height:1.55}

/* --- On-page nav ----------------------------------------------------------- */
.onpage{display:flex;flex-wrap:wrap;gap:.45rem;padding:1rem 0}
.onpage a{display:inline-flex;align-items:center;gap:.35rem;font-size:.86rem;font-weight:500;
  padding:.45rem .85rem;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line-strong);color:var(--text-muted);text-decoration:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.onpage a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
[id]{scroll-margin-top:90px}

/* --- Homepage quick calculator -------------------------------------------- */
/* This card is a light surface sitting inside .band-dark, so the band's white
   heading colour would otherwise make its text invisible. Everything inside the
   card resets to the normal light-surface palette. */
.quickcalc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.2rem,3vw,1.6rem);box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  color:var(--text)}
.band-dark .quickcalc h1,.band-dark .quickcalc h2,
.band-dark .quickcalc h3,.quickcalc h2{color:var(--text)}
.quickcalc h2{font-size:1.08rem;margin-bottom:.2rem;display:flex;align-items:center;gap:.5rem}
.quickcalc h2 .ico{color:var(--brand)}
.quickcalc .qsub{font-size:.87rem;color:var(--text-muted);margin:0 0 1.1rem}
.quickcalc .qn{color:var(--text-muted)}
.band-dark .quickcalc .muted{color:var(--text-muted)}
.band-dark .quickcalc a:not(.btn){color:var(--brand)}
.quickcalc .qout>.ico{color:var(--brand);opacity:.5}
.qgrid{display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.qgrid .qfull{grid-column:1 / -1}
.qf label{display:block;font-size:.83rem;font-weight:600;margin-bottom:.3rem;color:var(--text)}
.qf .input-wrap input,.qf select{min-height:46px;font-size:.98rem;padding:.6rem .8rem}
.qf .input-wrap.has-pre input{padding-left:2rem}
.qf .input-wrap.has-post input{padding-right:2.4rem}

.qout{margin-top:1.1rem;padding:1.1rem 1.2rem;border-radius:var(--r);
  background:linear-gradient(150deg,var(--brand-soft),var(--surface-2));
  border:1px solid var(--brand-line);display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:nowrap}
.qout>div{min-width:0}
.qout .ql{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  color:var(--text-muted);display:block;margin-bottom:.15rem}
.qout .qv{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4vw,2.1rem);
  line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;display:block}
.qout .qn{font-size:.82rem;color:var(--text-muted);margin:.3rem 0 0}
.qcompare{font-size:.84rem;color:var(--text-muted);margin:.75rem 0 0;display:flex;
  align-items:center;gap:.4rem}
.qcompare .ico{color:var(--accent-text);flex:none}

/* --- Tool rail (homepage, above the fold) ---------------------------------- */
.rail{padding:1.5rem 0 .4rem}
.rail-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(148px,1fr);
  gap:.7rem;overflow-x:auto;padding:.3rem .1rem 1rem;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
@media (min-width:1000px){
  .rail-scroll{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));
    overflow:visible;padding-bottom:.3rem}
}
.railitem{scroll-snap-align:start;display:flex;flex-direction:column;gap:.5rem;
  padding:.95rem .9rem;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);text-decoration:none;color:var(--text);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease)}
.railitem:hover{border-color:var(--brand);transform:translateY(-3px);
  box-shadow:var(--shadow-md);color:var(--text)}
.railitem .ri{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);flex:none}
.railitem b{font-size:.87rem;font-weight:600;line-height:1.3}

/* --- What this site is (clarity strip) ------------------------------------- */
.whatis{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);padding:1.4rem 0}
@media (min-width:760px){.whatis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.whatis .wi{display:flex;gap:.8rem;align-items:flex-start}
.whatis .wi .ico{color:var(--brand);flex:none;margin-top:.15em}
.whatis .wi b{display:block;font-size:.97rem;font-weight:600;margin-bottom:.1rem}
.whatis .wi span{display:block;font-size:.89rem;color:var(--text-muted);line-height:1.5}

/* ===========================================================================
   Long-form section types
   Modelled on the reference layout: numbered pills, paired good/bad panels,
   scenario columns and audience cards, alternating with the existing blocks so
   a long page reads as a sequence rather than one slab.
   =========================================================================== */

/* Numbered kicker, e.g. "03 - How it works" */
.kicker-n{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:.7rem}
.kicker-n .n{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;
  border-radius:var(--r-sm);background:var(--brand);color:#fff;font-family:var(--mono);
  font-size:.72rem;letter-spacing:0}
@media (prefers-color-scheme:dark){.kicker-n .n{background:var(--teal-400);color:var(--ink-950)}}
.band-dark .kicker-n{color:var(--teal-200)}
.band-dark .kicker-n .n{background:var(--teal-400);color:var(--ink-950)}

/* Numbered card grid, two columns */
.numgrid{display:grid;gap:.85rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.numgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.numcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .9rem;padding:1.1rem 1.2rem;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.numcard:hover{border-color:var(--brand-line);transform:translateY(-2px)}
.numcard .nn{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-family:var(--mono);font-size:.78rem;
  font-weight:500;grid-row:1 / span 2;align-self:start}
.numcard h3{font-family:var(--body);font-weight:600;font-size:.99rem;margin:.1rem 0 .25rem;
  letter-spacing:0}
.numcard p{margin:0;font-size:.91rem;color:var(--text-muted);line-height:1.6;grid-column:2}
.band-dark .numcard{background:rgba(255,255,255,.04);border-color:var(--ink-700)}
.band-dark .numcard .nn{background:rgba(95,211,220,.16);color:var(--teal-200)}
.band-dark .numcard p{color:var(--ink-300)}

/* Paired good / bad panels */
.paired{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.paired{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panelx{padding:1.3rem 1.4rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface)}
.panelx h3{font-family:var(--body);font-weight:600;font-size:1.02rem;margin:0 0 .9rem;
  display:flex;align-items:center;gap:.5rem;letter-spacing:0}
.panelx ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.panelx li{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;
  color:var(--text-muted);line-height:1.6}
.panelx li .ico{flex:none;margin-top:.2em;width:1.05em;height:1.05em}
.panelx.good{border-color:var(--pos);background:linear-gradient(160deg,var(--pos-soft),var(--surface) 62%)}
.panelx.good h3{color:var(--pos)} .panelx.good li .ico{color:var(--pos)}
.panelx.bad{border-color:var(--neg);background:linear-gradient(160deg,var(--neg-soft),var(--surface) 62%)}
.panelx.bad h3{color:var(--neg)} .panelx.bad li .ico{color:var(--neg)}

/* Scenario columns: "if this, then do that" */
.scenarios{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.scenarios{grid-template-columns:repeat(3,minmax(0,1fr))}}
.scen{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  overflow:hidden;display:flex;flex-direction:column}
.scen-h{padding:.75rem 1.1rem;font-size:.73rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--brand)}
.scen[data-k=good] .scen-h{background:var(--pos-600)}
/* amber-600 gives white text only 4.34:1. amber-700 reaches 6.38:1. */
.scen[data-k=warn] .scen-h{background:var(--amber-700)}
.scen[data-k=bad]  .scen-h{background:var(--neg-600)}
.scen ul{list-style:none;margin:0;padding:1.1rem 1.2rem;display:grid;gap:.6rem;flex:1}
.scen li{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;color:var(--text-muted);
  line-height:1.55}
.scen li .ico{flex:none;margin-top:.2em;width:1em;height:1em;color:var(--brand)}

/* Audience cards */
.audience{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.audience{grid-template-columns:repeat(3,minmax(0,1fr))}}
.aud{padding:1.3rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);border-top:3px solid var(--brand)}
.aud .ai{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);margin-bottom:.8rem}
.aud h3{font-size:1.04rem;margin-bottom:.4rem}
.aud p{font-size:.92rem;color:var(--text-muted);margin:0}

/* Inline stat band inside an article */
.statrow{display:grid;gap:1.1rem;grid-template-columns:repeat(2,minmax(0,1fr));
  padding:1.4rem 0}
@media (min-width:860px){.statrow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.statrow .si{text-align:center}
.statrow .sv{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,4vw,2.3rem);line-height:1;color:var(--brand);
  font-variant-numeric:tabular-nums;margin-bottom:.35rem}
.statrow .sl{display:block;font-size:.88rem;color:var(--text-muted);line-height:1.45}
.band-dark .statrow .sv{color:var(--amber-300)}
.band-dark .statrow .sl{color:var(--ink-300)}

/* Definition rows: term on the left, meaning on the right */
.defrows{display:grid;gap:0;border-top:1px solid var(--line)}
.defrow{display:grid;gap:.3rem 1.4rem;grid-template-columns:minmax(0,1fr);
  padding:1rem 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){.defrow{grid-template-columns:minmax(0,.9fr) minmax(0,2fr)}}
.defrow dt{font-weight:600;font-size:.97rem}
.defrow dd{margin:0;font-size:.93rem;color:var(--text-muted);line-height:1.6}


/* --- Long-form essay sections ---------------------------------------------
   The card sections above scan well but cap out around 150 words each. These
   are the ones that carry real argument: ordinary body copy, one column, held
   to a readable measure. Everything else on the page is a summary of these. */
/* Prose column plus a sticky rail. The prose keeps its 70ch measure; the rail
   takes the width that used to sit empty beside it. Below 1000px there is not
   enough room for two columns, so the rail stacks underneath. */
.prose-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1000px){
  /* The rail is capped rather than taking every spare pixel: past about 380px a
     sidebar card stops reading as a sidebar. */
  .prose-grid{grid-template-columns:minmax(0,76ch) minmax(0,360px);gap:2.6rem;
    justify-content:start}
  .prose-rail{position:sticky;top:1.6rem}
}
.prose-rail{display:flex;flex-direction:column;gap:1.05rem;min-width:0}
.prose-rail > *{margin:0}

.longform{max-width:76ch}
.longform > p{color:var(--text-muted);line-height:1.75;font-size:1.01rem;margin:0 0 1.05rem}
.longform > p:last-child{margin-bottom:0}
.longform strong{color:var(--text);font-weight:600}
.longform a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.longform a:hover{text-decoration-thickness:2px}

.lf-sub{margin-top:1.9rem}
.lf-sub:first-child{margin-top:0}
.lf-sub h3{font-family:var(--body);font-weight:600;font-size:1.06rem;line-height:1.4;
  margin-bottom:.55rem;padding-left:.85rem;border-left:3px solid var(--brand)}
.lf-sub p{color:var(--text-muted);line-height:1.75;font-size:1.01rem;margin:0 0 1.05rem}
.lf-sub p:last-child{margin-bottom:0}

.longform ul{margin:.1rem 0 1.15rem;padding-left:1.2rem}
.longform li{color:var(--text-muted);line-height:1.7;margin-bottom:.5rem;font-size:.99rem}
.longform li:last-child{margin-bottom:0}
.longform li::marker{color:var(--brand)}
.longform li strong{color:var(--text)}

/* The pull quote and callouts are shared components; they only need spacing
   when they sit inside a run of paragraphs. */
.longform .pullq,.longform .callout{margin:1.5rem 0}
.longform .pullq:last-child,.longform .callout:last-child{margin-bottom:0}

/* ===========================================================================
   LoanPay - offer placements and reusable boxes
   Accent per offer is set with data-accent so a partner can be visually
   distinguished without touching the brand palette.
   =========================================================================== */

/* teal-700, not teal-600: the monogram sits on the tinted teal-50 rather than on
   white, which costs enough contrast to put 600 at 4.39 and under the floor. */
[data-accent=brand]   { --oa:var(--teal-700);  --oab:var(--teal-50) }
/* amber-700, not amber-600. The monogram and the award label sit on the tinted
   #FFF8EA rather than on white, which puts 600 at 4.10 and under the floor. */
[data-accent=amber]  { --oa:var(--amber-700); --oab:#FFF8EA }
[data-accent=green]  { --oa:var(--pos-600);   --oab:#E8F6F0 }
[data-accent=violet] { --oa:#5B52B8;          --oab:#EFEDFB }
[data-accent=rose]   { --oa:#A8447A;          --oab:#FBEDF4 }
[data-accent=slate]  { --oa:var(--ink-600);   --oab:var(--ink-50) }
@media (prefers-color-scheme:dark){
  [data-accent=brand]   { --oa:var(--teal-300);  --oab:rgba(0,157,168,.16) }
  [data-accent=amber]  { --oa:var(--amber-300); --oab:rgba(239,163,24,.13) }
  [data-accent=green]  { --oa:var(--pos-300);   --oab:rgba(18,153,106,.15) }
  [data-accent=violet] { --oa:#A79EF0;          --oab:rgba(91,82,184,.2) }
  [data-accent=rose]   { --oa:#E895BE;          --oab:rgba(168,68,122,.2) }
  [data-accent=slate]  { --oa:var(--ink-300);   --oab:var(--ink-850) }
}

/* --- Disclosure ----------------------------------------------------------- */
.disclose{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .9rem;
  border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);
  font-size:.82rem;color:var(--text-muted);margin-bottom:1.1rem}
.disclose .ico{flex:none;margin-top:.12em;color:var(--text-subtle);width:1.05em;height:1.05em}
.disclose p{margin:0;line-height:1.55}
.disclose a{color:var(--brand);text-decoration:underline}
.disclose-long{font-size:.9rem;padding:1rem 1.1rem}
.disclose-warn{background:var(--accent-soft);border-color:var(--amber-500)}
.disclose-warn .ico{color:var(--accent-text)}
.disclose-warn code{font-family:var(--mono);font-size:.9em;background:rgba(0,0,0,.06);
  padding:.1em .35em;border-radius:4px}

/* --- Offer block shell ---------------------------------------------------- */
.offerblock{margin:2rem 0;padding:clamp(1.1rem,3vw,1.6rem);border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-md);
  container-type:inline-size;container-name:offerblock}
.offerblock-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.offerblock-head h2{font-size:1.18rem;display:flex;align-items:center;gap:.5rem;margin:0}
.offerblock-head h2 .ico{color:var(--brand)}
.offerblock-head p{margin:.3rem 0 0;font-size:.9rem;color:var(--text-muted)}
.meth{font-size:.83rem;font-weight:500;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.3rem}
.meth .ico{width:.9em;height:.9em}

/* --- Logo monogram -------------------------------------------------------- */
.ologo{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--oab,var(--brand-soft));color:var(--oa,var(--brand));
  font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
  border:1px solid color-mix(in srgb,var(--oa,var(--brand)) 25%,transparent)}
.ologo.sm{width:40px;height:40px;border-radius:10px;font-size:.88rem}

/* --- Stars ---------------------------------------------------------------- */
.stars{display:inline-flex;align-items:center;gap:.1rem;margin-top:.2rem}
.stars .st .ico{width:.92em;height:.92em}
/* Empty stars need to read as clearly absent, not just slightly paler, or a 4.6
   and a 5.0 look identical at this size. */
@media (prefers-color-scheme:dark){.stars .st-empty{color:var(--ink-700);opacity:1}}
.oaward,.aaward{text-wrap:balance}
.stars b{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--text-muted);
  margin-left:.35rem}

/* --- Comparison table ----------------------------------------------------- */
.otable{display:grid;gap:.7rem}
.orow{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);padding:1.1rem;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-alt);
  align-items:center;transition:border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.orow:hover{border-color:var(--oa);box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* Four columns when the BLOCK is wide enough, not when the viewport is.
   This was a viewport media query, which fired at 900px of window even though
   inside a blog post the block only gets the 748px article column. Each column
   then came out around 150px and a button reading "View parent options" ran
   straight out under the sidebar. A container query asks the right question. */
@container offerblock (min-width:560px){
  /* Two columns first: brand and headline stat on one line, facts and the CTA
     under them. In a blog post this is as wide as the block ever gets. */
  .orow{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
/* 780, not 820: inside a post the block's content box measures 817px, so an 820
   threshold missed the four-column layout by three pixels. Measured, not guessed. */
@container offerblock (min-width:780px){
  .orow{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.35fr) minmax(0,1.15fr)}
}
/* Fallback for anything without container query support: stay single-column,
   which is the safe direction. */
@supports not (container-type:inline-size){
  @media (min-width:1100px){
    .orow{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.35fr) minmax(0,1.15fr)}
  }
}
.obrand{display:flex;gap:.85rem;align-items:center;min-width:0}
.obrand h3{font-size:1.05rem;margin:.1rem 0 0;letter-spacing:-.015em}
.oaward{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--oa);background:var(--oab);padding:.18rem .5rem;
  border-radius:var(--r-pill)}
.ostat{min-width:0}
.osl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);font-weight:600;margin-bottom:.15rem}
.osv{display:block;font-family:var(--mono);font-weight:500;font-size:1.12rem;
  font-variant-numeric:tabular-nums;color:var(--text);line-height:1.2}
.ofacts{margin:0;display:grid;gap:.35rem;min-width:0}
.ofacts>div{display:flex;justify-content:space-between;gap:.7rem;font-size:.85rem;
  border-bottom:1px dotted var(--line);padding-bottom:.28rem}
.ofacts>div:last-child{border-bottom:0;padding-bottom:0}
.ofacts dt{color:var(--text-muted);margin:0}
.ofacts dd{margin:0;font-weight:500;text-align:right;font-family:var(--mono);font-size:.83rem}
.oact{display:grid;gap:.35rem;justify-items:stretch}
.oact .btn{width:100%;white-space:normal;text-align:center;padding-left:1rem;
  padding-right:1rem;hyphens:auto}
.onote{font-size:.72rem;color:var(--text-subtle);text-align:center;display:block;line-height:1.4}
.onote.center{margin-top:.6rem}

/* --- Award cards ---------------------------------------------------------- */
.awards{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.awards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.awards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.award{padding:1.15rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--bg-alt);display:flex;flex-direction:column;gap:.45rem;
  border-top:3px solid var(--oa);transition:transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease)}
.award:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.aaward{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--oa)}
.award h3{font-size:1.02rem;margin:0;letter-spacing:-.015em}
.astat{display:flex;flex-direction:column;padding:.55rem 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin:.35rem 0}
.astat span{font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);font-weight:600}
.astat b{font-family:var(--mono);font-size:1.02rem;font-weight:500;
  font-variant-numeric:tabular-nums}
.ablurb{font-size:.86rem;color:var(--text-muted);margin:0 0 .5rem;flex:1}
.award .btn{margin-top:auto}

/* --- Inline CTA ----------------------------------------------------------- */
.inlinecta{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;padding:1rem 1.15rem;
  border-radius:var(--r);background:var(--oab);border:1px solid var(--oa);margin:1.8rem 0}
.inlinecta>div{flex:1;min-width:180px}
.inlinecta b{display:block;font-size:.95rem;font-weight:600;line-height:1.35}
.inlinecta span{display:block;font-size:.8rem;color:var(--text-muted);line-height:1.45;
  margin-top:.15rem}

/* ===================== content boxes ====================================== */
.sbox{padding:1.15rem 1.25rem;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);margin-bottom:1.1rem}
.sbox h3{font-family:var(--body);font-weight:600;font-size:1rem;margin:0 0 .7rem;
  letter-spacing:0;display:flex;align-items:center;gap:.45rem}
.sbox h3 .ico{color:var(--brand)}
.sbox-tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);
  margin-bottom:.5rem}

.sbox-key{background:linear-gradient(155deg,var(--brand-soft),var(--surface) 65%);
  border-color:var(--brand-line)}
.sbox-key ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sbox-key li{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;
  color:var(--text-muted);line-height:1.55}
.sbox-key li .ico{color:var(--pos);flex:none;margin-top:.18em}

.sbox-tool{text-align:center}
.sbox-tool .tp-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);margin:0 auto .7rem}
.sbox-tool h3{justify-content:center;margin-bottom:.35rem}
.sbox-tool p{font-size:.89rem;color:var(--text-muted);margin:0 0 .9rem}

.sbox-deadline{background:linear-gradient(155deg,var(--accent-soft),var(--surface) 65%);
  border-color:var(--amber-500)}
.sbox-deadline .sbox-tag{color:var(--accent-text)}
.sbox-deadline p{font-size:.89rem;color:var(--text-muted);margin:0 0 .9rem}

.sbox-stat{text-align:center;background:var(--ink-900);border-color:var(--ink-700)}
.sbox-stat .sv{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,5vw,2.5rem);line-height:1;color:var(--amber-300);
  font-variant-numeric:tabular-nums;margin-bottom:.3rem}
.sbox-stat .sl{display:block;font-size:.9rem;color:var(--ink-200);line-height:1.45}
.sbox-stat .sn{display:block;font-size:.74rem;color:var(--ink-400);margin-top:.4rem}

.sbox-check ol{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.sbox-check li{font-size:.91rem;color:var(--text-muted);line-height:1.55}

.sbox-offer{border-left:3px solid var(--oa)}
.oc-head{display:flex;gap:.6rem;align-items:center;margin-bottom:.7rem}
.oc-head b{display:block;font-size:.95rem;line-height:1.3}
.oc-stat{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  padding:.55rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:.8rem}
.oc-stat span{font-size:.75rem;color:var(--text-muted)}
.oc-stat b{font-family:var(--mono);font-size:.95rem;font-weight:500}

.sbox-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:toc}
.sbox-toc li a{display:block;padding:.34rem 0;font-size:.88rem;color:var(--text-muted);
  text-decoration:none;border-left:2px solid transparent;padding-left:.6rem;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.sbox-toc li a:hover{color:var(--brand);border-left-color:var(--brand)}

.pullq{margin:1.8rem 0;padding:1.2rem 0 1.2rem 1.4rem;border-left:3px solid var(--brand);
  font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2.4vw,1.32rem);
  line-height:1.45;letter-spacing:-.015em}
.pullq p{margin:0}
.pullq cite{display:block;margin-top:.6rem;font-family:var(--body);font-style:normal;
  font-weight:400;font-size:.85rem;color:var(--text-muted)}

/* --- Shortcode boxes -------------------------------------------------------
   Everything below is reachable from a markdown post via app/shortcodes.py.
   They sit inside .post, which caps its children at 68ch, so each one opts out
   of that measure explicitly: a comparison table at 68ch is unreadable. */
.post > .verdict,.post > .scorebox,.post > .comptable,.post > .chartbox,
.post > .sc-error{max-width:none}

/* Single-product review card */
.verdict{border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface);padding:1.3rem 1.4rem;margin:2rem 0;
  box-shadow:var(--shadow-sm)}
.v-head{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.v-id{flex:1 1 12rem;min-width:0}
.verdict h3{font-size:1.2rem;margin:0 0 .2rem}
.v-best{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;
  font-weight:600;color:var(--brand)}
.v-best .ico{width:1em;height:1em}
.v-rate{text-align:center;flex:none;padding:.5rem .9rem;border-radius:var(--r);
  background:var(--brand-soft);border:1px solid var(--brand-line)}
.v-num{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;
  line-height:1.1;color:var(--brand-hover)}
.v-outof{display:block;font-size:.7rem;color:var(--text-muted)}
.v-sum{margin:1rem 0 0;color:var(--text-muted);font-size:.97rem;line-height:1.7}
.v-grid{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr);margin-top:1.1rem}
@media (min-width:640px){.v-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v-col{border-radius:var(--r);padding:.95rem 1.05rem;border:1px solid var(--line)}
.v-col.good{background:var(--pos-soft);border-color:color-mix(in srgb,var(--pos) 22%,transparent)}
.v-col.bad{background:var(--neg-soft);border-color:color-mix(in srgb,var(--neg) 22%,transparent)}
.v-col h4{font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;margin:0 0 .55rem;display:flex;align-items:center;gap:.35rem}
.v-col.good h4{color:var(--pos)}
.v-col.bad h4{color:var(--neg)}
.v-col h4 .ico{width:1em;height:1em}
.v-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.v-col li{display:flex;gap:.45rem;align-items:flex-start;font-size:.92rem;
  line-height:1.55;color:var(--text)}
.v-col li .ico{flex:none;margin-top:.22em;width:.95em;height:.95em}
.v-col.good li .ico{color:var(--pos)}
.v-col.bad li .ico{color:var(--neg)}
.v-act{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}

/* Score breakdown */
.scorebox{border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface);padding:1.2rem 1.35rem;margin:2rem 0}
.sb-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}
.sb-head h3{font-size:1.05rem;margin:0;display:flex;align-items:center;gap:.45rem}
.sb-head h3 .ico{color:var(--brand)}
.sb-overall{font-size:.85rem;color:var(--text-muted)}
.sb-overall b{font-family:var(--display);font-size:1.25rem;color:var(--brand-hover)}
.sb-rows{margin:0;display:grid;gap:.7rem}
.sb-row{display:grid;gap:.2rem .9rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.sb-row{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:center}}
.sb-row dt{font-size:.92rem;font-weight:600}
.sb-note{display:block;font-weight:400;font-size:.8rem;color:var(--text-subtle)}
.sb-row dd{margin:0;display:flex;align-items:center;gap:.6rem}
.sb-track{flex:1;height:9px;border-radius:var(--r-pill);background:var(--line);
  overflow:hidden;min-width:0}
.sb-fill{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--teal-600),var(--teal-400))}
.sb-row dd b{font-family:var(--mono);font-size:.85rem;color:var(--text-muted);
  min-width:2.1rem;text-align:right}

/* Comparison table */
.comptable{margin:2rem 0}
.ct-title{font-family:var(--display);font-weight:700;font-size:1.05rem;
  margin-bottom:.7rem;display:flex;align-items:center;gap:.45rem}
.ct-title .ico{color:var(--brand)}
.ct-note{font-size:.85rem;color:var(--text-subtle);margin:.7rem 0 0}

/* A malformed shortcode is loud on purpose. tests/test_shortcodes.py asserts no
   published post ever renders one. */
.sc-error{display:flex;flex-direction:column;gap:.3rem;margin:1.6rem 0;
  padding:.9rem 1.1rem;border-radius:var(--r);background:var(--neg-soft);
  border:1px solid var(--neg);color:var(--neg);font-size:.9rem;
  font-family:var(--mono)}

/* Where the rate figures came from and when. Small, but it is the difference
   between a table a reader can judge and one they have to trust blindly. */
.ratesrc{display:flex;gap:.45rem;align-items:flex-start;font-size:.8rem;
  color:var(--text-subtle);margin:0 0 1rem;line-height:1.5}
.ratesrc .ico{flex:none;margin-top:.15em;width:1em;height:1em}
.ratesrc strong{color:var(--text-muted)}

/* ===========================================================================
   LoanPay - the blog
   Minimal and elegant means: one column of well-set text, generous measure,
   nothing competing with the sentence you are reading. Ornament is limited to
   the boxes, which earn their place by carrying information.
   =========================================================================== */

/* --- Index ---------------------------------------------------------------- */
.bloghero{padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(1.4rem,3vw,2rem)}
.bloghero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.7rem;max-width:94%}
.bloghero p{font-size:clamp(1.02rem,2.2vw,1.15rem);color:var(--text-muted);max-width:94%;margin:0}
/* The blog hero is now the same soft mint field as every other page opener.
   blog.css loads after app.css, so the .page-open rule there loses at equal
   specificity and the on-light colour has to be restated here. */
.bloghero.page-open p{color:var(--text-muted)}

.catbar{display:flex;gap:.5rem;flex-wrap:wrap;padding:1.2rem 0 0}
.catbar a{display:inline-flex;align-items:center;gap:.4rem;font-size:.87rem;font-weight:500;
  padding:.5rem .95rem;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line-strong);color:var(--text-muted);text-decoration:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.catbar a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.catbar a[aria-current=page]{background:var(--teal-800);border-color:var(--teal-800);color:#fff}
@media (prefers-color-scheme:dark){
  .catbar a[aria-current=page]{background:var(--teal-400);border-color:var(--teal-400);
    color:var(--ink-950)}
}
.catbar a .n{font-family:var(--mono);font-size:.78rem;opacity:.65}

/* --- Post list ------------------------------------------------------------ */
.postlist{display:grid;gap:0;margin-top:1.6rem}
.postcard{display:grid;gap:.45rem;padding:1.5rem 0;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;transition:opacity var(--t) var(--ease)}
.postcard:last-child{border-bottom:1px solid var(--line)}
.postcard:hover{color:inherit}
.postcard:hover h2{color:var(--brand)}
.pc-top{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;font-size:.78rem;
  color:var(--text-subtle);font-family:var(--mono)}
.pc-cat{display:inline-flex;align-items:center;gap:.32rem;font-family:var(--body);
  font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--brand);background:var(--brand-soft);padding:.2rem .55rem;
  border-radius:var(--r-pill)}
.pc-cat .ico{width:.95em;height:.95em}
.postcard h2{font-size:clamp(1.18rem,2.6vw,1.5rem);letter-spacing:-.02em;line-height:1.25;
  transition:color var(--t-fast) var(--ease);max-width:94%}
.postcard p{color:var(--text-muted);font-size:.96rem;margin:0;max-width:94%}
.pc-feat{display:inline-flex;align-items:center;gap:.28rem;font-family:var(--body);
  font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-950);background:var(--amber-400);padding:.2rem .5rem;
  border-radius:var(--r-pill)}

/* --- Article layout ------------------------------------------------------- */
.article-wrap{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:minmax(0,1fr);
  padding:0 0 clamp(2.5rem,5vw,4rem)}
@media (min-width:1040px){
  .article-wrap{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .article-side{position:sticky;top:92px}
}

.posthead{padding:.9rem 0 0}
/* The title band spans the container above the article grid, so the byline rule
   would otherwise run the full 1180px and read as a page divider. Cap it. */
.posthead-band .byline{max-width:94%}
/* The band carried 48px of padding below the byline and sat flush against both
   the article and the sidebar, so it read as one heavy block rather than a header
   above content. Bottom padding down to 4px, and a 5px gap opened underneath so
   the two sections are visibly separate. The top padding stays: it is what keeps
   the breadcrumb clear of the sticky masthead. */
.posthead-band{padding-bottom:4px}
.posthead-band + .wrap > .article-wrap,
.posthead-band ~ .wrap > .article-wrap{margin-top:5px}
.posthead h1{font-size:clamp(1.85rem,4.6vw,2.85rem);line-height:1.14;margin-bottom:.9rem;
  max-width:94%}
.posthead .standfirst{font-size:clamp(1.05rem,2.3vw,1.22rem);color:var(--text-muted);
  line-height:1.6;max-width:94%;margin:0 0 1.3rem}
.byline{display:flex;gap:.6rem 1.2rem;flex-wrap:wrap;align-items:center;font-size:.85rem;
  color:var(--text-subtle);padding-top:1.1rem;border-top:1px solid var(--line)}
.byline .b{display:inline-flex;align-items:center;gap:.38rem}
.byline .ico{width:1em;height:1em;color:var(--text-subtle)}
.byline b{color:var(--text);font-weight:500}

/* --- The prose ------------------------------------------------------------ */
.post{font-size:1.09rem;line-height:1.78;color:var(--text);max-width:none}
/* Measured, not assumed: a ch is the width of "0", and real characters are
   narrower, so the character count runs about 3% above the ch value here.
   62ch left 195px of dead space inside an 868px article column, which reads as a
   ragged right edge rather than a deliberate measure. 76ch fills it to within
   about 50px at roughly 78 characters a line, which the 1.78 line-height carries
   comfortably. */
.post > *{max-width:76ch}
.post > .offerblock,.post > .otable,.post > figure,.post > .inlinecta{max-width:none}
.post p{margin:0 0 1.35rem}
.post h2{font-size:clamp(1.4rem,3vw,1.85rem);margin:2.6rem 0 .9rem;letter-spacing:-.02em;
  scroll-margin-top:92px}
.post h3{font-family:var(--body);font-weight:600;font-size:1.14rem;margin:2rem 0 .6rem;
  letter-spacing:0;scroll-margin-top:92px}
.post h4{font-family:var(--body);font-weight:600;font-size:1rem;margin:1.5rem 0 .5rem;
  letter-spacing:0}
.post ul,.post ol{margin:0 0 1.35rem;padding-left:1.4rem}
.post li{margin-bottom:.55rem}
.post li::marker{color:var(--brand)}
/* Links inside a post are the brand green, matching the logo, rather than the
   site-wide interactive teal. Prose is where a link most needs to be obviously a
   link, and green reads as one here without competing with the teal chrome.
   #008254 on white is 4.86:1.

   :not(.btn) is load-bearing. `.post a` outranks `.btn-accent` on specificity, so
   without it this rule repaints every affiliate button inside a post green on
   amber, which is 2.3:1 and unreadable. Boxes that set their own link colour are
   restored below for the same reason. */
.post a:not(.btn){color:var(--green-700);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
.post a:not(.btn):hover{text-decoration-thickness:2px}
/* #008254 is 4.86 on white and 3.87 on the dark reading surface, so the prose
   link needs the light step in dark mode. This rule also outranks .post .meth
   below, which is why that link failed with it. */
@media (prefers-color-scheme:dark){
  .post a:not(.btn){color:var(--green-300)}
}
/* Box chrome inside a post keeps the interactive teal, not the prose green. */
.post .disclose a,.post .meth,.post .onote a{color:var(--brand)}
.post strong{font-weight:600;color:var(--text)}
.post blockquote{margin:1.8rem 0;padding:.2rem 0 .2rem 1.3rem;
  border-left:3px solid var(--brand-line);color:var(--text-muted);font-style:normal}
.post blockquote p:last-child{margin-bottom:0}
.post hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.post code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);
  padding:.15em .4em;border-radius:5px;border:1px solid var(--line)}
.post pre{background:var(--ink-900);color:var(--ink-100);padding:1.1rem 1.2rem;
  border-radius:var(--r);overflow-x:auto;font-size:.88rem;line-height:1.6;margin:0 0 1.35rem}
.post pre code{background:none;border:0;padding:0;color:inherit}
.post img{border-radius:var(--r-lg);margin:1.8rem 0;box-shadow:var(--shadow-md)}
.post figure{margin:1.8rem 0}
.post figcaption{font-size:.85rem;color:var(--text-subtle);margin-top:.6rem;text-align:center}

/* Tables inside prose get the same treatment as the tool pages */
.post table{width:100%;border-collapse:collapse;font-size:.94rem;margin:0 0 1.6rem;
  display:block;overflow-x:auto;white-space:nowrap}
@media (min-width:760px){.post table{display:table;white-space:normal}}
.post thead th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);font-weight:600;padding:.65rem .8rem;background:var(--surface-2);
  border-bottom:1px solid var(--line-strong)}
.post tbody td{padding:.65rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.post tbody tr:last-child td{border-bottom:0}
.post tbody tr:hover{background:var(--surface-2)}

/* First paragraph after the byline reads slightly larger */
.post > p:first-of-type{font-size:1.14rem;color:var(--text-muted)}

/* --- Footer of a post ----------------------------------------------------- */
.postfoot{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.tagrow{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.6rem}
.tagrow a{font-size:.8rem;padding:.3rem .7rem;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-muted);
  text-decoration:none}
.tagrow a:hover{border-color:var(--brand);color:var(--brand)}

.relposts{display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.relposts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.relpost{display:block;padding:1.1rem 1.2rem;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.relpost:hover{border-color:var(--brand);transform:translateY(-2px);color:inherit}
.relpost span{display:block;font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--brand);font-weight:600;margin-bottom:.35rem}
.relpost b{display:block;font-size:.96rem;font-weight:600;line-height:1.35}

/* --- Reading progress ----------------------------------------------------- */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--teal-400);z-index:150;
  width:0;transition:width .1s linear}
@media (prefers-reduced-motion:reduce){.progress{transition:none}}