/* The Base Rate, shared theme: design tokens (single source of truth),
   light/dark, sticky header, and accessibility. Loaded on every page;
   tokens use !important so they unify each page's older inline :root. */

/* Poppins, self-hosted (20 Jul 2026). These are the exact latin-subset woff2
   files Google Fonts served, so rendering is identical; self-hosting removes
   two render-blocking third-party origins and the GDPR exposure of calling
   Google on every page view (German courts have ruled remote Google Fonts a
   violation). Glyphs outside the subset fall back per-glyph, same as before.
   If a weight is ever added to a page, add the file AND a block here.

   font-display is `optional`, not `swap` (changed 23 Jul 2026 after Lighthouse
   measured CLS 0.229, in Google's "needs improvement" band). `swap` paints the
   fallback first and re-flows when Poppins lands, and the two are not metrically
   equal: measured here, Poppins runs ~9.6% wider and 3px taller per line than
   system-ui, so every text block grew and pushed the page down. `optional` gives
   the font a short window and then commits for that page view, so a late font
   can never move content. Paired with <link rel=preload> in every page head:
   @font-face lives in this file, so without preload no font request could even
   START until this stylesheet had downloaded and parsed (measured: css done at
   64ms, first font at 78ms). Preload runs them in parallel with the CSS instead,
   which is what makes the short `optional` window winnable.

   Trade-off, accepted deliberately: a first-time visitor on a genuinely slow
   connection sees system-ui for that one page view rather than a jump. The font
   is cached from then on. */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:optional;
  src:url('fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:optional;
  src:url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:optional;
  src:url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:optional;
  src:url('fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:optional;
  src:url('fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --bg0:#080B12 !important; --bg1:#0D1426 !important;
  --card:#121a2e !important; --card2:#1a2440 !important;
  --teal:#1DB8A4 !important; --teal-br:#43E6CE !important;
  --gold:#E6BC4A !important; --white:#F4F7FC !important;
  --grey:#9DAAC4 !important; --dgrey:#8593B0 !important;   /* bumped for WCAG AA on dark */
  --edge:#2b3a5c !important; --red:#E25C5C !important;
  --amber-bg:#33280a !important; --amber-fg:#F2C14E !important;
  --page-bg:
      radial-gradient(900px 520px at 12% -5%, rgba(29,184,164,.16), transparent 60%),
      radial-gradient(820px 520px at 100% 8%, rgba(230,188,74,.12), transparent 55%),
      radial-gradient(1200px 800px at 50% 100%, #101b34 0%, #0D1426 40%, #080B12 100%) !important;
  --panel: linear-gradient(180deg,#16284a,#0f1c34) !important;
  --header-bg: rgba(9,13,22,.80) !important;
  --card-shadow: 0 20px 50px rgba(0,0,0,.40) !important;
  --logo-ink:#06231f;
}

:root[data-theme="light"]{
  --bg0:#EDF2F8 !important; --bg1:#E4EDF6 !important;
  --card:#FFFFFF !important; --card2:#FBFDFF !important;
  --teal:#0B7567 !important; --teal-br:#0B7567 !important;
  --gold:#9A7011 !important; --white:#11192A !important;   /* "white" = foreground ink in light mode */
  --grey:#46536E !important; --dgrey:#5C6883 !important;
  --edge:#D4DEEA !important; --red:#C23B3B !important;
  --amber-bg:#FDF6E3 !important; --amber-fg:#845200 !important;
  --page-bg:
      radial-gradient(900px 520px at 12% -5%, rgba(29,184,164,.10), transparent 60%),
      radial-gradient(820px 520px at 100% 8%, rgba(230,188,74,.12), transparent 55%),
      radial-gradient(1200px 800px at 50% 100%, #e8f0f9 0%, #f2f6fb 40%, #ffffff 100%) !important;
  --panel: linear-gradient(180deg,#ffffff,#f3f8fc) !important;
  --header-bg: rgba(255,255,255,.85) !important;
  --card-shadow: 0 14px 40px rgba(20,40,80,.10) !important;
  --logo-ink:#FFFFFF;
}

/* Tokenise surfaces that pages hardcoded, so they follow the theme */
body{ background: var(--page-bg) !important; color: var(--white); font-family:'Poppins',system-ui,sans-serif; padding:0 0 64px 0 !important; min-height:100vh; }
.wrap{ padding-left:clamp(14px,4vw,20px) !important; padding-right:clamp(14px,4vw,20px) !important; }

/* Every page's inline <style> opened with these two. A page that forgot them
   (uk-macro-dashboard) got a content-box .wrap and the browser's default body
   margin, so it measured 1040px and sat off-centre. */
*{ box-sizing:border-box; }
body{ margin:0; }

/* ---- Page base defaults ---------------------------------------------
   Historically every page carried its own inline <style> with .wrap, h1,
   .sub, .card, .disc and .email. A page that forgot them (uk-macro-dashboard)
   rendered full-bleed with unstyled headings.

   These are DEFAULTS, deliberately without !important. theme.css loads before
   each page's inline <style>, so any page that declares its own still wins and
   nothing existing changes. New pages get the house style for free. */
.wrap{ max-width:var(--w-wide,1080px); margin:0 auto; }
h1{ font-size:clamp(28px,5.4vw,44px); font-weight:800; line-height:1.14;
  margin:14px 0 10px; text-align:center; letter-spacing:-.01em; }
h1 .accent{ color:var(--teal); }
.sub{ text-align:center; color:var(--grey); font-size:16.5px; max-width:var(--w-sub,760px); margin:0 auto 26px; }
.disc{ color:var(--dgrey); font-size:12px; line-height:1.65; text-align:center; margin:26px auto 0; max-width:var(--w-prose,720px); }
.disc a{ color:var(--grey); }
.email{ display:flex; gap:8px; margin-top:13px; }
/* Identical in every page that used them, so they belong here rather than in
   23-28 copies. Same defaults-not-overrides rule as above: a page that needs a
   different .field or .pill still declares one and still wins. */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.field{ display:flex; align-items:center; gap:12px; }
.hint{ color:var(--grey); font-weight:400; font-size:12.5px; }
.pill{ display:inline-block; background:rgba(29,184,164,.14); border:1.5px solid var(--teal);
  color:var(--teal); font-weight:600; font-size:12.5px; padding:6px 15px; border-radius:30px; letter-spacing:.05em; }
.below{ max-width:var(--w-prose,720px); margin:18px auto 0; }
.center{ text-align:center; }

/* ---- Shared components ------------------------------------------------
   These were duplicated into 19-31 pages each, which is why paddings, row
   heights and the hero figure's line-height kept drifting apart. One copy
   here, defaults without !important, so a page that genuinely needs
   something different still declares it and still wins. */
/* The margin has to stay here: pages declared only padding, so every card has
   always taken its spacing and centring from this rule. Dropping it silently
   collapsed the gap between cards on every calculator. */
.card{ background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--edge);
  border-radius:20px; padding:26px; margin:0 auto 18px; box-shadow:var(--card-shadow); }
.big{ font-size:clamp(44px,9.5vw,68px); font-weight:800; color:var(--gold); text-align:center;
  line-height:1; margin:6px 0 2px; letter-spacing:-.02em; text-shadow:0 0 36px rgba(230,188,74,.28); }
.rows{ margin-top:16px; padding-top:6px; border-top:1px solid var(--edge); }
.rw{ display:flex; justify-content:space-between; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--edge); font-size:14.5px; }
.result{ position:sticky; top:78px; border:1px solid rgba(29,184,164,.45); background:var(--panel); }
.res-lead{ color:var(--grey); font-size:14.5px; text-align:center; font-weight:500; }
.share{ display:block; width:100%; margin-top:16px; background:transparent; border:1.5px solid var(--teal);
  color:var(--teal); font-family:inherit; font-weight:700; font-size:14.5px; padding:12px;
  border-radius:12px; cursor:pointer; transition:.15s; }
.note{ color:var(--dgrey); font-size:12px; text-align:center; margin-top:7px; line-height:1.5; }
.chip{ background:var(--bg0); border:1.5px solid var(--edge); color:var(--grey); font-family:inherit;
  font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:20px; cursor:pointer; transition:.15s; }
.email input{ flex:1; min-width:0; background:var(--bg0); border:1.5px solid var(--edge); color:var(--white);
  font-family:inherit; padding:12px 14px; border-radius:12px; font-size:15px; }
.email input:focus{ outline:none; border-color:var(--gold); }
/* Ink is #000, not var(--bg0). --gold does not invert between themes, it only
   darkens (#E6BC4A dark, #9A7011 light), so the ink must stay dark in both.
   var(--bg0) flips to near-white in light mode and lands at 3.97:1 on that
   gold, under WCAG AA, on the primary CTA of all 28 signup forms. #000 gives
   10.93 dark / 4.70 light. */
.email button{ background:var(--gold); color:#000; border:none; font-family:inherit; font-weight:700;
  padding:12px 20px; border-radius:12px; cursor:pointer; font-size:15px; white-space:nowrap; }
@media(max-width:560px){ .email{ flex-direction:column; } }
.card{ box-shadow: var(--card-shadow) !important; }
.result{ background: var(--panel) !important; }
/* Balance headings/subheads so the last line never drops a single orphan word */
h1, .sub{ text-wrap: balance; }
.seg{ color:#0A1018 !important; }   /* labels on bright bars: always dark for contrast */

/* ---- Sticky header / nav -------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  /* --frame is set per page by alignFrame() in site.js from the page's own .wrap
     content-box width, so the header content shares edges with the column below
     it on every page type. Falls back to the wide default if JS has not run. */
  padding:9px max(clamp(14px,4vw,26px), calc((100% - var(--frame,1040px))/2)); margin-bottom:8px;
  background:var(--header-bg); border-bottom:1px solid var(--edge);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:'Poppins',system-ui,sans-serif;
}
.site-header .logo{ display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--white); font-weight:800; font-size:15px; letter-spacing:.02em; white-space:nowrap; }
.site-header .logo .tile{ width:26px; height:26px; display:grid; place-items:center; background:transparent; border:0; }
.site-header .logo .tile svg{ display:block; width:26px; height:26px; }
.site-header nav{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:flex-end; }
.site-header nav a{ color:var(--grey); text-decoration:none; font-weight:600; font-size:13.5px;
  padding:7px 10px; border-radius:9px; white-space:nowrap; }
.site-header nav a:hover{ color:var(--white); background:color-mix(in srgb, var(--grey) 16%, transparent); }
.site-header nav a[aria-current="page"]{ color:var(--teal); }
.theme-toggle{ margin-left:4px; background:transparent; border:1.5px solid var(--edge);
  color:var(--white); width:38px; height:34px; border-radius:9px; cursor:pointer;
  font-size:15px; line-height:1; display:grid; place-items:center; font-family:inherit; }
.theme-toggle:hover{ border-color:var(--teal); }
@media(max-width:600px){
  .site-header{ flex-direction:column; align-items:stretch; gap:8px; padding-top:11px; }
  .site-header nav{ justify-content:center; }
}

/* ---- Breadcrumb trail ----------------------------------------------- */
.breadcrumb{ margin:4px 0 16px; font-family:'Poppins',system-ui,sans-serif; font-size:13px; line-height:1.4; }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; }
.breadcrumb li{ display:flex; align-items:center; gap:6px; color:var(--dgrey); }
.breadcrumb li + li::before{ content:"\203A"; color:var(--dgrey); opacity:.75; }
.breadcrumb a{ color:var(--grey); text-decoration:none; padding:1px 2px; border-radius:4px; }
.breadcrumb a:hover{ color:var(--teal); text-decoration:underline; }
.breadcrumb li[aria-current="page"]{ color:var(--white); font-weight:600; }
body.embed .breadcrumb{ display:none !important; }

/* ---- Trust row (under the hero on calculators) ---------------------- */
.trust-row{ display:flex; flex-wrap:wrap; gap:7px 18px; justify-content:center; align-items:center;
  margin:-16px auto 26px; color:var(--grey); font-size:13px; font-family:'Poppins',system-ui,sans-serif; }
.trust-row span{ white-space:nowrap; }
body.embed .trust-row{ display:none !important; }
/* Sits AFTER the tool now (see buildTrustRow in site.js), so the old -14px top
   margin that tucked it under the trust row would pull it into the tool. */
.eeat-byline{ text-align:center; color:var(--dgrey); font-size:13px; line-height:1.6;
  margin:18px auto 0; max-width:620px; font-family:'Poppins',system-ui,sans-serif; }
.eeat-byline a{ color:var(--grey); }
body.embed .eeat-byline{ display:none !important; }
.guide-link{ max-width:var(--w-prose,720px); margin:22px auto 0; text-align:center; background:var(--card);
  border:1px solid var(--edge); border-radius:14px; padding:13px 18px; font-size:14.5px;
  color:var(--grey); font-family:'Poppins',system-ui,sans-serif; }
.guide-link a{ color:var(--teal); font-weight:700; text-decoration:none; }
.guide-link a:hover{ text-decoration:underline; }
body.embed .guide-link{ display:none !important; }

/* ---- Related calculators -------------------------------------------- */
.related{ max-width:var(--w-prose,720px); margin:28px auto 0; font-family:'Poppins',system-ui,sans-serif; }
.related > h2{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); margin:0 0 13px; text-align:center; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:680px){ .related-grid{ grid-template-columns:1fr; } }
.related-grid a{ display:flex; align-items:center; justify-content:space-between; gap:8px; text-decoration:none;
  background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--edge); border-radius:14px;
  padding:14px 16px; color:var(--white); font-weight:600; font-size:14.5px; transition:.15s; }
.related-grid a:hover{ border-color:var(--teal); transform:translateY(-2px); }
.related-grid .r-arrow{ color:var(--teal); font-weight:700; }
body.embed .related{ display:none !important; }

/* ---- FAQ accordion (injected from FAQPage schema on calculator pages) ---- */
.faq-auto{ max-width:var(--w-prose,720px); margin:28px auto 0; font-family:'Poppins',system-ui,sans-serif; }
.faq-auto > h2{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); margin:0 0 13px; text-align:center; }
.faq-auto details{ background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--edge);
  border-radius:14px; margin-bottom:10px; overflow:hidden; }
.faq-auto summary{ cursor:pointer; list-style:none; padding:15px 18px; font-weight:600; font-size:15.5px;
  color:var(--white); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq-auto summary::-webkit-details-marker{ display:none; }
.faq-auto summary::after{ content:"+"; color:var(--teal); font-size:22px; font-weight:400; line-height:1; flex:none; }
.faq-auto details[open] summary::after{ content:"\2013"; }
.faq-auto details[open] summary{ border-bottom:1px solid var(--edge); }
.faq-auto .fa{ padding:14px 18px 16px; color:var(--grey); font-size:14.5px; line-height:1.65; }
body.embed .faq-auto{ display:none !important; }

/* ---- Content width system ------------------------------------------ */
/* TWO widths, not seven. The old set (1100/1000/880/860/820/760/720/640)
   accreted one page at a time and four of them differed for no reason.
   The rule: if a page is mostly interface or data, --w-wide; if it is mostly
   reading, --w-prose. Pages set .wrap{max-width:var(--w-wide|--w-prose)} and
   alignFrame() in site.js reads the resolved value, so the header and footer
   follow automatically. Change a width here and the whole site moves. */
:root{ --w-wide:1080px; --w-prose:720px; --w-sub:760px; }
/* --w-sub is the centred hero subhead. It had accreted five different values
   (560/580/600/620/640) across 29 pages, all far narrower than the 1040px frame,
   which forced 3 wrapped lines where 2 would do. Centred text also reads worse
   the more lines it runs to, because both edges are ragged. Widening it buys
   back vertical space above the fold AND reads better. */

/* ---- Readability floor (accessibility) ----------------------------- */
/* Our YouTube audience is 43% over 55 and retention rises with age, so the
   small-print tiers were genuinely too small: 12 to 13.5px for disclaimers,
   sources and assumptions that a YMYL reader actually needs to read. These lift
   the secondary tiers to a 13.5px floor and body prose to 17px. !important is
   needed because each page carries its own inline <style> after this file, the
   same reason the colour tokens use it. Scoped to prose selectors so calculator
   result typography (.big, .hw-sal, chips) is untouched. */
.disc, .foot-note, .src, .note{ font-size:13.5px !important; line-height:1.7 !important; }
.meta{ font-size:14.5px !important; }
.hint{ font-size:13px !important; }
.not-modelled li{ font-size:15px !important; }
.not-modelled > p{ font-size:14.5px !important; }
.sf-base{ font-size:13px !important; }
.sf-cols a{ font-size:14.5px !important; }
.trustline{ font-size:14px !important; }
.faq-auto summary{ font-size:16px !important; }
.faq-auto .fa{ font-size:15.5px !important; line-height:1.7 !important; }

/* ---- Site footer (injected by site.js on every page) --------------- */
.site-footer{ margin-top:56px; border-top:1px solid var(--edge); background:var(--card);
  font-family:'Poppins',system-ui,sans-serif; }
/* Same padding formula as .site-header so footer content lands on exactly the
   same left/right edge as the page column above it. */
.sf-inner{ max-width:none; margin:0 auto;
  padding:36px max(clamp(14px,4vw,20px), calc((100% - var(--frame,1040px))/2)) 28px; }
.sf-brand{ margin-bottom:26px; }
.sf-brand b{ display:block; color:var(--white); font-size:14px; letter-spacing:.08em; margin-bottom:4px; }
.sf-brand span{ color:var(--grey); font-size:13.5px; }
.sf-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:28px; }
@media(max-width:760px){ .sf-cols{ grid-template-columns:repeat(2,1fr); } }
.sf-cols h3{ color:var(--dgrey); font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin:0 0 10px; }
.sf-cols a{ display:block; color:var(--grey); text-decoration:none; font-size:14px; padding:3.5px 0; }
.sf-cols a:hover{ color:var(--teal); }
.sf-social{ display:flex; gap:10px; margin-bottom:18px; }
.sf-social a{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--edge); background:var(--bg0); color:var(--grey); transition:.15s; }
.sf-social a:hover{ color:var(--teal); border-color:var(--teal); transform:translateY(-1px); }
.sf-social svg{ width:17px; height:17px; fill:currentColor; display:block; }
.sf-base{ border-top:1px solid var(--edge); padding-top:16px; color:var(--dgrey);
  font-size:12px; line-height:1.7; }
.sf-base a{ color:var(--grey); text-decoration:none; }
.sf-base a:hover{ color:var(--teal); }
body.embed .site-footer{ display:none !important; }
@media print{ .site-footer{ display:none !important; } }

/* ---- What this does not model (calculator pages) ------------------- */
/* Stating the limits plainly is a trust signal, so it is styled as a calm
   informational block, not a warning. Gold rule, not red. */
.not-modelled{ max-width:var(--w-prose,720px); margin:28px auto 0; font-family:'Poppins',system-ui,sans-serif;
  background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--edge);
  border-left:3px solid var(--gold); border-radius:0 16px 16px 0; padding:20px 22px; }
.not-modelled > h2{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); margin:0 0 9px; }
.not-modelled > p{ color:var(--grey); font-size:14px; margin:0 0 12px; line-height:1.6; }
.not-modelled ul{ margin:0; padding-left:20px; }
.not-modelled li{ color:var(--grey); font-size:14.5px; line-height:1.55; margin-bottom:7px; }
.not-modelled li:last-child{ margin-bottom:0; }
body.embed .not-modelled{ display:none !important; }

/* ---- Video + Subscribe (calculator pages) -------------------------- */
.video-cta{ max-width:var(--w-prose,720px); margin:26px auto 0; font-family:'Poppins',system-ui,sans-serif; }
.yt-facade{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; cursor:pointer;
  border:1px solid var(--edge); background:#000; }
.yt-facade img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s, opacity .2s; }
.yt-facade:hover img{ transform:scale(1.03); opacity:.9; }
.yt-facade .yt-play{ position:absolute; inset:0; margin:auto; width:74px; height:52px; border-radius:14px;
  background:rgba(226,92,92,.95); box-shadow:0 6px 22px rgba(0,0,0,.4); }
.yt-facade .yt-play::after{ content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff; }
.yt-facade.loaded{ cursor:default; }
.yt-facade iframe{ width:100%; height:100%; border:0; display:block; }
.yt-facade.no-thumb{ background:linear-gradient(135deg,#16284a,#0d1c34); }
.yt-sub{ display:flex; align-items:center; gap:14px; margin-top:14px; text-decoration:none;
  background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--edge); border-radius:16px; padding:14px 16px; transition:.15s; }
.yt-sub:hover{ border-color:var(--teal); transform:translateY(-1px); }
.yt-sub-ico{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--red);
  color:#fff; display:grid; place-items:center; font-size:14px; }
.yt-sub-txt{ flex:1; color:var(--grey); font-size:13.5px; line-height:1.4; }
.yt-sub-txt b{ display:block; color:var(--white); font-size:15px; font-weight:700; }
.yt-sub-btn{ flex:0 0 auto; background:var(--red); color:#fff; font-weight:700; font-size:14px; padding:10px 18px; border-radius:10px; }
.yt-sub:hover .yt-sub-btn{ filter:brightness(1.08); }
body.embed .video-cta{ display:none !important; }
@media print{ .video-cta{ display:none !important; } }

/* ---- Mobile sticky result bar --------------------------------------- */
.sticky-result{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:none;
  align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
  padding:10px clamp(14px,4vw,20px); background:var(--header-bg); border-top:1px solid var(--edge);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-family:'Poppins',system-ui,sans-serif; }
.sticky-result .sr-label{ color:var(--grey); font-size:13px; }
.sticky-result .sr-val{ color:var(--gold); font-weight:800; font-size:20px; font-variant-numeric:tabular-nums; }
@media(max-width:840px){ .sticky-result.show{ display:flex; } }
body.embed .sticky-result{ display:none !important; }

/* skip link for keyboard/screen-reader users */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--teal);
  color:var(--logo-ink); padding:10px 16px; border-radius:0 0 10px 0; font-weight:700; text-decoration:none; }
.skip-link:focus{ left:0; }

/* ---- Accessibility -------------------------------------------------- */
*:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:3px; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto !important; }
}

/* ---- Print: clean white sheet (great for the tax cheat-sheet) ------- */
@media print {
  .site-header, .skip-link, .cookie-banner, .theme-toggle,
  .embed-cta, .embed-foot, .cta, .share, form.email, .toc, .breadcrumb,
  .related, .sticky-result, .trust-row, .eeat-byline, .guide-link { display:none !important; }
  body { background:#fff !important; color:#111 !important; padding:0 !important; }
  .wrap { max-width:100% !important; }
  .card { background:#fff !important; box-shadow:none !important; border:1px solid #bbb !important;
    break-inside:avoid; margin-bottom:12px; }
  h1,h2,h3,p,li,td,th,.big,.sub,.res-lead,.maths { color:#111 !important; text-shadow:none !important; }
  .pill,.crumb,.note,.disc,.hint,caption { color:#555 !important; }
  a { color:#111 !important; }
  thead th { color:#111 !important; border-bottom:1px solid #111 !important; }
  th,td { border-bottom:1px solid #ccc !important; }
  .rate,.seg,.mini,.tag { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ---- Cookie consent banner ------------------------------------------ */
.cookie-banner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:80; margin:0 auto;
  max-width:780px; background:var(--card2); border:1px solid var(--edge); border-radius:16px;
  padding:15px 18px; box-shadow:0 18px 50px rgba(0,0,0,.45);
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-family:'Poppins',system-ui,sans-serif; color:var(--grey); font-size:13.5px; line-height:1.5; }
.cookie-banner p{ margin:0; flex:1 1 300px; }
.cookie-banner a{ color:var(--teal); }
.cookie-banner .btns{ display:flex; gap:8px; flex:0 0 auto; flex-wrap:wrap; }
.cookie-banner button{ font-family:inherit; font-weight:700; font-size:13.5px; padding:10px 16px;
  border-radius:10px; cursor:pointer; border:1.5px solid var(--edge); }
.cookie-banner .accept{ background:var(--teal); border-color:var(--teal); color:var(--logo-ink); }
.cookie-banner .reject{ background:transparent; color:var(--white); }
/* Sits in the footer's last column, so it must match .sf-cols a exactly. */
.cookie-settings-link{ display:block; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:14.5px !important; color:var(--grey);
  text-align:left; text-decoration:none; padding:3.5px 0; }
.cookie-settings-link:hover{ color:var(--teal); }

/* ---- Embed mode (calculator inside someone else's page via ?embed) -- */
body.embed .site-header, body.embed .skip-link, body.embed .cookie-banner,
body.embed .cta, body.embed .below, body.embed .disc{ display:none !important; }
body.embed{ padding-bottom:8px !important; }
.embed-foot{ max-width:1000px; margin:14px auto 0; padding:11px 16px; border-top:1px solid var(--edge);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center;
  font-size:12px; color:var(--dgrey); font-family:'Poppins',system-ui,sans-serif; }
.embed-foot a{ color:var(--teal); text-decoration:none; font-weight:700; }

/* ---- "Embed this calculator" snippet box ---------------------------- */
.embed-cta{ max-width:var(--w-prose,720px); margin:18px auto 0; border:1px solid var(--edge); border-radius:18px;
  padding:18px 20px; background:linear-gradient(180deg,var(--card2),var(--card));
  font-family:'Poppins',system-ui,sans-serif; }
.embed-cta h2{ font-size:18px; font-weight:700; margin:0 0 6px; color:var(--white); }
.embed-cta p{ color:var(--grey); font-size:13.5px; margin:0 0 10px; }
.embed-cta textarea{ width:100%; height:84px; resize:vertical; background:var(--bg0);
  border:1.5px solid var(--edge); color:var(--grey); border-radius:10px; padding:10px 12px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.embed-cta textarea:focus{ outline:none; border-color:var(--teal); }
.embed-cta .copy{ margin-top:10px; background:var(--teal); border:none; color:var(--logo-ink);
  font-family:inherit; font-weight:700; font-size:13.5px; padding:10px 16px; border-radius:10px; cursor:pointer; }

/* ---------- outbound referral offers ---------- */
/* The "Ad / Referral" tag is injected by site.js into every a[data-offer].
   It must be legible BEFORE the click, so it sits inline at the start of the
   link, not in a footer. Deliberately quiet in colour but never hidden. */
.offer-tag{ display:inline-block; margin-right:8px; padding:2px 7px; border-radius:6px;
  background:var(--edge); color:var(--dgrey); font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; vertical-align:middle; }
a[data-offer]{ display:inline-flex; align-items:center; }

/* ---------- macro dashboard ---------- */
.dash{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin:22px 0 8px; }
.dash .freshness{ grid-column:1/-1; background:var(--amber-bg,#3a2c07); color:var(--amber-fg,#f2c14e);
  border:1.5px solid var(--amber-fg,#f2c14e); border-radius:12px; padding:12px 14px; font-size:14px; font-weight:600; }
.metric{ background:var(--card); border:1.5px solid var(--edge); border-radius:16px; padding:20px 22px; }
.metric h2{ margin:0; font-size:15px; font-weight:600; color:var(--dgrey); letter-spacing:.01em; }
.metric .figure{ margin:6px 0 2px; display:flex; align-items:baseline; gap:3px; }
.metric .num{ font-size:46px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.metric .unit{ font-size:22px; font-weight:700; color:var(--dgrey); }
.metric .meta{ margin:0 0 10px; font-size:13px; color:var(--dgrey); }
.metric .delta{ font-weight:700; }
.metric .delta.up{ color:#e2705f; }
.metric .delta.down{ color:var(--teal); }
.metric .delta.flat{ color:var(--dgrey); font-weight:600; }
.metric .spark{ color:var(--teal); display:block; margin:2px 0 12px; }
.metric .bridge{ margin:0 0 8px; font-size:14.5px; line-height:1.55; }
.metric .bridge-cta{ margin:0 0 12px; }
.metric .bridge-cta a{ color:var(--teal); font-weight:700; text-decoration:none; font-size:14.5px; }
.metric .bridge-cta a:hover{ text-decoration:underline; }
.metric .src{ margin:0; font-size:12px; color:var(--dgrey); }
.metric .src a{ color:var(--dgrey); }
/* A stale card must look wrong, not merely be annotated. */
.metric.is-stale{ border-color:var(--amber-fg,#f2c14e); }
.metric.is-stale .num{ opacity:.55; }
.next-release{ font-size:13.5px; color:var(--dgrey); margin:2px 0 20px; }

/* ---------- homepage live strip ---------- */
/* The only thing on the calculator hub that changes on its own. Rendered at
   build time by tools/fetch_dashboard.py, so it costs no JS and no fetch. */
.livestrip{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1.5px solid var(--edge); border-radius:14px;
  padding:12px 16px; margin:0 0 18px; text-decoration:none; color:inherit;
  transition:border-color .15s ease; }
.livestrip:hover{ border-color:var(--teal); }
.livestrip .ls-item{ font-size:14px; color:var(--dgrey); white-space:nowrap; }
.livestrip .ls-item b{ font-size:19px; font-weight:800; color:var(--white); margin-right:5px;
  font-variant-numeric:tabular-nums; }
.livestrip .ls-date{ font-size:12.5px; color:var(--dgrey); white-space:nowrap; }
.livestrip .ls-cta{ margin-left:auto; font-size:14px; font-weight:700; color:var(--teal); white-space:nowrap; }
@media (max-width:560px){
  .livestrip{ gap:10px 14px; }
  .livestrip .ls-cta{ margin-left:0; flex-basis:100%; }
}

/* ---------- inline subscribe (homepage, one screen in) ---------- */
/* The only email capture used to sit 5.6 screens down. Phase 1's metric is
   subscribers, so the offer now sits where people actually are: right after
   the most-popular tools, before the long tail of the catalogue. */
.subscribe-inline{ margin:34px 0 8px; padding:24px 26px; border-radius:20px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  display:grid; gap:18px 30px; }
.subscribe-inline h2{ font-size:21px; font-weight:700; line-height:1.25; margin:0 0 7px; color:var(--white); }
/* Prose caps at ~62ch because longer measures are hard to read. The block fills
   the width by putting the form beside the copy, not by stretching the text. */
.subscribe-inline .si-copy p{ color:var(--grey); font-size:14.5px; line-height:1.6; margin:0; max-width:62ch; }
.subscribe-inline .email{ display:flex; gap:8px; margin:0; }
.subscribe-inline .email input{ min-width:0; }
.subscribe-inline .note{ color:var(--dgrey); font-size:12px; margin-top:9px; }
@media(min-width:820px){
  .subscribe-inline{ grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); align-items:center; }
  /* Side by side, the button crushed the field to ~125px, too narrow to read an
     email address back. Stack them inside the column instead: both get full width. */
  .subscribe-inline .email{ flex-direction:column; }
  .subscribe-inline .email button{ padding:13px 20px; }
}
@media(max-width:560px){
  .subscribe-inline{ padding:20px 18px; }
  .subscribe-inline .email{ flex-direction:column; }
  .subscribe-inline .email button{ padding:13px 20px; }
}

/* ---------- orphan card in a 2-up grid ---------- */
/* An odd number of tools leaves a lonely card in the left column. Let the last
   one span the row so it reads as deliberate. Cheaper, and more honest, than
   writing filler content to make the count even. */
@media(min-width:561px){
  .grid > .tool:last-child:nth-child(odd){ grid-column:1 / -1; }
}