/* ============================================================
   sidehustlesummitreviews.com — design system v10
   "Trusted consumer review" (Shubham ruling 2026-08-31, replacing
   the 2026-08-29 paper/ink/navy retheme).

   v10 (Shubham 2026-09-01) adopts the AIFI READING MODEL, not its identity:
   serif display for h1 + deck, one sans for everything else, warm accent.
   AIFI runs Source Serif Pro + Inter + amber #d97706 off Google Fonts. We do
   NOT copy those: SHSR poses as independent under a pen name, and a shared
   font request or accent hex is a checkable fingerprint. We use Playfair
   Display + Plus Jakarta Sans (both already self-hosted, previously unused)
   and an ochre accent, so the site READS like AIFI without matching it.

   Register: Wirecutter / NerdWallet / Consumer Reports. White ground,
   Playfair Display for the h1 and deck, Plus Jakarta Sans for body and UI,
   IBM Plex Mono for labels, one warm ochre accent.

   Structure comes from hairline rules, not fills and elevation.
   Class names unchanged from v8. The claim ledger is the signature
   component and deliberately carries the most treatment.
   ============================================================ */

/* ---------- Fonts (self-hosted; every file already shipped) ---------- */
/* Figtree is variable 300-900: ONE face per file, range descriptor.
   Never declare a second face pointing at the same file. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* v10: both were already shipped and unused. Variable, so one file each. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/pjs-latin.woff2) format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/playfair-normal-latin.woff2) format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;
  src:url(/assets/fonts/playfair-italic-latin.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-serif-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-serif-600.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-serif-italic-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.woff2) format('woff2');}

/* ---------- Tokens ---------- */
:root{
  /* Ground: warm cream page (v12), white cards float on it. */
  --page:#faf6ed;        /* article/page ground: warm paper, easy on the eyes */
  --bg:#ffffff;
  --bg-2:#ffffff;        /* card: white, separated by border, pops on cream */
  --bg-3:#f6f1e4;        /* tinted panel: disclosure, caption — warmed to match */
  --bg-4:#efe8d6;        /* deepest panel: ledger caption bar, th */

  /* Ink: three values, no more. */
  --text:#0f1720;        /* 18.0:1 on white */
  --text-dim:#39434f;    /* 10.1:1 — body copy */
  --text-muted:#5b6773;  /* 5.8:1 — captions, sources, meta */

  /* Rules carry all structure now that cards have no fill. */
  --line:#e3e8ee;
  --line-mid:#cfd6de;
  --line-hard:#9aa5b1;

  /* One warm ochre. 5.9:1 as text on white AND white on fill.
     Deliberately NOT AIFI's #d97706/#b45309/#92400e, and held 35 degrees of
     hue clear of --against so a brand mark never reads as a failed status. */
  --accent:#8a5a00;
  --accent-deep:#6f4800;
  --accent-link:#8a5a00;
  --accent-pale:#fdf6e8;
  --accent-line:#e0cb9c;

  /* Legacy aliases: v8 named these navy-*. Kept so no rule goes dead. */
  --navy:var(--accent);
  --navy-2:var(--accent-deep);
  --navy-soft:var(--accent-link);
  --navy-pale:var(--accent-pale);
  --navy-line:var(--accent-line);

  /* Status: same semantics, darkened for AA on their own tints. */
  --verified:#14532d;  --verified-bg:#eaf6ee;
  /* v10: unconfirmed moved amber -> slate. With a warm brand accent an amber
     chip read as branding rather than as a status. Slate also says "unknown"
     more honestly than amber, which reads as a warning. 6.7:1 on its tint. */
  --pending:#475569;   --pending-bg:#eef1f5;
  --claimed:#5b21b6;   --claimed-bg:#f1ecfd;
  --against:#a32219;
  --star:#8a5a00;
  --amber:#8a5a00;

  /* Type */
  /* v10 role swap. Serif is now the DISPLAY face (h1 + deck only); one sans
     carries body, headings and UI, which is the AIFI reading model. */
  --f-disp:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-body:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  --f-ui:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* No bundled font carries a star, arrow or bullet glyph. Name the
     fallback instead of letting it happen by accident. */
  --f-glyph:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',sans-serif;

  /* Layout. 960 is the single biggest legibility lever: it drops every
     wide component from 95-110 characters to 55-75. */
  --container:960px;
  --measure:66ch;
  --measure-wide:78ch;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:112px;

  /* Consumer publications use 4-6px. 12px reads as a SaaS landing page. */
  --r-sm:3px;
  --r:6px;
  --r-lg:8px;

  --shadow-raise:0 1px 2px rgba(15,23,32,.06);
  --shadow-float:0 4px 12px rgba(15,23,32,.08),0 24px 48px -20px rgba(15,23,32,.28);
  --shadow-card:var(--shadow-raise);
  --shadow-pop:var(--shadow-float);

  --edge:1px solid var(--line);
  --edge-strong:1px solid var(--line-mid);
  --edge-accent:3px solid var(--accent);

  /* v11 editorial-colour: warm-dark FEATURE panels + gold accent, the way AIFI
     uses filled navy panels + amber. Warm, not cool, so it is not AIFI's exact
     look. Prose stays white for reading; colour lives on features. */
  --panel:#1c1813;
  --panel-2:#2a251d;
  --panel-line:#3d372c;
  --on-panel:#f4efe6;
  --on-panel-dim:#c9bfae;
  --gold:#e0a848;          /* accent on dark only */
  --gold-2:#eab764;
  --verified-lt:#7fd8a4;

  /* Measured pin bar height at <=760 is 76px. Keep this at or above it or the
     last footer link sits underneath the bar. */
  --pin-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--page);
  color:var(--text-dim);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.78;   /* v10: sans body wants slightly more leading than serif did */
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-link);text-decoration:underline;text-decoration-color:rgba(21,82,196,.35);text-underline-offset:2px;transition:color 180ms ease}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:3px solid var(--accent-link);outline-offset:2px;border-radius:2px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s5);position:relative;z-index:1}
.prose{max-width:var(--measure)}

/* ---------- Type ---------- */
/* v10: the body is sans now, so h3 can no longer lean on FAMILY contrast the
   way it did against the serif. It earns its rank on size and weight instead
   (1.5rem/700 against an 18px/400 body), which is how AIFI separates its own. */
h1,h2,h3,h4{margin:0;color:var(--text);font-feature-settings:'kern'}
h1{font-family:var(--f-disp);font-size:clamp(2.1rem,4.8vw,3.3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
h2,h3{font-family:var(--f-ui)}
h2{font-size:clamp(1.6rem,2.8vw,2.05rem);font-weight:800;line-height:1.2;letter-spacing:-.02em}
h3{font-size:clamp(1.3rem,1.8vw,1.5rem);font-weight:700;line-height:1.3;letter-spacing:-.015em}
h4{font-family:var(--f-mono);font-weight:500;font-size:.72rem;line-height:1.4;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
p{margin:0 0 var(--s5)}
strong{font-weight:600;color:var(--text)}
em,cite{font-style:italic}
/* v10: the deck is the second serif moment on the page, as on AIFI. */
.lede{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.5;color:var(--text-dim)}
.prose h2{margin-top:var(--s8);margin-bottom:var(--s3)}
.prose h3{margin-top:var(--s7);margin-bottom:var(--s3)}
.prose > *:first-child{margin-top:0}
.prose .table-wrap,.prose .callout,.prose .disclose{margin:var(--s5) 0}
.prose ul,.prose ol{margin:0 0 var(--s5);padding-left:var(--s5)}
.prose li{margin-bottom:var(--s3)}
.prose li::marker{color:var(--accent)}
.prose .split{margin:var(--s6) 0}
.prose .byline + h2{margin-top:var(--s6)}
.prose .shot{max-width:100%}
.mono{font-family:var(--f-mono);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.eyebrow{display:inline-block;padding:8px 0 0;border-top:var(--edge-accent);color:var(--accent);font-family:var(--f-mono);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--s4)}
.muted{color:var(--text-muted)}

/* ---------- Utility bar ---------- */
/* v10: this was accent-deep. A full-bleed band of the warm accent read as
   mustard, and the accent is worth more when it is rationed. Ink instead. */
.utility{background:var(--text);color:rgba(255,255,255,.86)}
.utility-inner{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;justify-content:space-between;padding:var(--s2) 0;font-family:var(--f-mono);font-weight:500;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em}
.utility a{color:rgba(255,255,255,.86)}
.utility .dot{color:#8fe0b0;font-size:1em;font-family:var(--f-glyph)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-mid)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:60px}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--text);font-family:var(--f-ui);font-weight:800;letter-spacing:-.02em;font-size:1.02rem;line-height:1.1}
.brand:hover{color:var(--text)}
.brand-mark{width:32px;height:32px;flex:none;border-radius:var(--r-sm)}
.brand span{display:block}
.brand small{display:block;font-family:var(--f-mono);font-weight:500;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:var(--s5);list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--f-ui);font-weight:600;font-size:.94rem;color:var(--text-dim);text-decoration:none;padding:var(--s2) 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line-mid);border-radius:var(--r-sm);width:40px;height:36px;cursor:pointer;align-items:center;justify-content:center;color:var(--text)}
.menu-toggle span{display:block;width:17px;height:2px;background:currentColor;position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:17px;height:2px;background:currentColor}
.menu-toggle span::before{top:-5px}.menu-toggle span::after{top:5px}

/* ---------- Buttons ---------- */
/* No translateY lift anywhere: a lift is a marketing tell. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--f-ui);font-weight:700;letter-spacing:-.01em;font-size:1rem;line-height:1.2;padding:14px 24px;border-radius:var(--r);text-decoration:none;border:none;cursor:pointer;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}
.btn-primary{background:var(--accent);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--accent-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent-line)}
.btn-ghost:hover{background:var(--accent-pale);color:var(--accent-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.deadline-note{font-size:.86rem;color:var(--text-muted);margin:var(--s3) 0 0}

/* ---------- Sections ---------- */
.section{padding:var(--s8) 0}
.section-tight{padding:var(--s7) 0}
.section-head{margin-bottom:var(--s6);max-width:var(--measure-wide)}
.section-head p{margin-top:var(--s3);margin-bottom:0}
.field{display:grid;grid-template-columns:170px 1fr;gap:var(--s7);align-items:start}
.field-label{font-family:var(--f-mono);font-weight:500;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);padding-top:8px;border-top:var(--edge-accent);line-height:1.5}

/* ---------- Document panel ---------- */
/* Outlined white on white reads as an official record. A shadowed
   floating card reads as a product tile. */
.doc{background:var(--bg);border:var(--edge-strong);border-radius:var(--r);box-shadow:var(--shadow-raise);position:relative}
.doc-pad{padding:var(--s6)}
.doc-top{border-top:var(--edge-accent)}

/* ---------- Hero / verdict card ---------- */
.hero{padding:var(--s8) 0 var(--s7)}
.verdict{position:relative;overflow:hidden}
/* v11: the verdict card is now a filled warm-dark panel, the site's one big
   colour moment, mirroring AIFI's filled verdict box. */
.verdict.doc{background:var(--panel);border:1px solid var(--panel-line);border-top:4px solid var(--gold)}
.verdict .doc-pad{padding:var(--s7) var(--s7) var(--s6)}
.verdict .eyebrow{color:var(--gold);border-top-color:var(--gold)}
.verdict h1{margin-bottom:var(--s4);max-width:19ch;color:var(--on-panel)}
.verdict .lede{max-width:62ch;margin-bottom:0;color:var(--on-panel-dim)}
.verdict .byline{color:var(--on-panel-dim);border-color:var(--panel-line)}
.verdict .byline a{color:var(--on-panel);border-bottom-color:var(--gold)}
.verdict .evidence{border-color:var(--panel-line)}
.verdict .evidence div{border-left-color:var(--panel-line)}
.verdict .evidence dt{color:var(--on-panel-dim)}
.verdict .evidence dd{color:var(--on-panel)}
.verdict .evidence dd small{color:var(--on-panel-dim)}
.verdict .btn-row{border-top:1px solid var(--panel-line);padding-top:var(--s5);margin-top:var(--s6)}
.verdict .btn-ghost{color:var(--gold);border-color:var(--panel-line)}
.verdict .btn-ghost:hover{background:rgba(224,168,72,.12);color:var(--gold-2)}
.verdict .deadline-note{color:var(--on-panel-dim)}

/* Scorecard, not a rubber stamp. "4.4/5" is the most scannable fact on
   the page and should be the largest number that is not the h1. */
.stamp{
  position:absolute;top:var(--s6);right:var(--s6);
  font-family:var(--f-mono);font-weight:500;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--panel);background:var(--gold);
  border:1px solid var(--gold-2);border-radius:var(--r);
  min-width:132px;padding:var(--s3) var(--s4);text-align:center;line-height:1.4;
}
.stamp b{display:block;font-family:var(--f-ui);font-weight:800;font-size:2.1rem;line-height:1.1;letter-spacing:-.02em;color:var(--panel);font-variant-numeric:tabular-nums}
.stamp .stamp-stars{display:block;font-family:var(--f-glyph);color:var(--panel);font-size:1rem;letter-spacing:.06em;margin-bottom:2px}

/* evidence strip: a bounded data band */
.evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:var(--edge-strong);border-bottom:var(--edge-strong);margin-top:var(--s6)}
.evidence div{padding:var(--s4) var(--s5);border-left:var(--edge)}
.evidence div:first-child{border-left:0;padding-left:0}
.evidence dt{font-family:var(--f-mono);font-weight:500;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:var(--s2)}
.evidence dd{margin:0;font-family:var(--f-ui);font-weight:800;font-size:1.5rem;line-height:1.15;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.evidence dd small{display:block;font-family:var(--f-body);font-weight:400;font-size:.84rem;color:var(--text-muted);letter-spacing:0;text-transform:none;margin-top:var(--s1);line-height:1.5}

/* ---------- THE SIGNATURE: claim ledger ---------- */
/* Numbered records are what make this table unmistakably this site's
   when it gets screenshotted or quoted. Pure CSS, no markup change. */
.ledger{
  border:1px solid var(--line-mid);border-top:4px solid var(--accent);
  border-radius:var(--r);background:var(--bg);overflow:hidden;
  counter-reset:claim;
}
.ledger::before{
  content:"Claim  /  Status  /  Source and date checked";
  display:block;background:var(--bg-4);border-bottom:1px solid var(--line-mid);
  padding:10px var(--s5);
  font:500 .68rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);
}
.ledger-row{display:grid;grid-template-columns:1fr 150px 200px;gap:var(--s5);align-items:start;padding:var(--s5);border-bottom:1px solid var(--line);counter-increment:claim}
.ledger-row:last-child{border-bottom:0}
.ledger-row:hover{background:var(--accent-pale)}
.ledger-claim{margin:0;font-size:1.02rem;line-height:1.6;color:var(--text-dim)}
.ledger-claim::before{content:counter(claim,decimal-leading-zero);display:block;font:500 .68rem/1 var(--f-mono);letter-spacing:.1em;color:var(--accent);margin-bottom:6px}
.ledger-claim strong{font-weight:600;color:var(--text)}
.ledger-claim small{display:block;color:var(--text-muted);font-size:.86rem;margin-top:6px}
.ledger-src{font-family:var(--f-mono);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding-top:22px;line-height:1.6;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;border-radius:var(--r-sm);border:1px solid currentColor;white-space:nowrap;margin-top:20px}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip-verified{color:var(--verified);background:var(--verified-bg)}
.chip-unconfirmed{color:var(--pending);background:var(--pending-bg)}
.chip-marketing{color:var(--claimed);background:var(--claimed-bg)}
.ledger-key{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s4);font-size:.88rem;color:var(--text-muted)}
.ledger-key span{display:flex;align-items:center;gap:var(--s2)}
.ledger-key .chip{margin-top:0}

/* ---------- Cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);max-width:var(--measure-wide)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);max-width:var(--measure-wide)}
.card{background:var(--bg);border:var(--edge);border-radius:var(--r);padding:var(--s5);box-shadow:none;transition:border-color 200ms ease,background 200ms ease}
a.card{display:block;text-decoration:none;color:var(--text-dim)}
/* A tint plus a border shift is a publication tell; a lift is not. */
a.card:hover{border-color:var(--accent-line);background:var(--accent-pale);color:var(--text-dim);box-shadow:none;transform:none}
.card h3{margin-bottom:var(--s2)}
.card p{margin-bottom:0;font-size:.95rem;color:var(--text-dim)}
.card .mono{color:var(--accent);display:block;margin-bottom:var(--s3)}
.card-cta{font-family:var(--f-ui);font-weight:700;font-size:.85rem;letter-spacing:-.01em;color:var(--accent-link);margin-top:var(--s3);display:inline-block}

/* verdict split: for / against */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5);max-width:var(--measure-wide)}
.split-col{background:var(--bg);border:var(--edge);border-radius:var(--r);padding:var(--s5) var(--s5) var(--s6)}
.split-for{border-top:3px solid var(--verified)}
.split-against{border-top:3px solid var(--against)}
.split-col h3{margin-bottom:var(--s4)}
.split-for h3{color:var(--verified)}
.split-against h3{color:var(--against)}
.split-col ul{margin:0;padding-left:var(--s5)}
.split-col li{margin-bottom:var(--s3);font-size:1rem;line-height:1.6;color:var(--text-dim)}
.split-col li:last-child{margin-bottom:0}
.split-col li::marker{color:var(--text-muted)}

/* ---------- Tables ---------- */
/* Explicitly exempt from any ch-based cap: narrowing the container makes
   a comparison table scroll, never crush. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--edge-strong);border-radius:var(--r);background:var(--bg);max-width:100%}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
th,td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:top;color:var(--text-dim)}
td{font-variant-numeric:tabular-nums}
th{font-family:var(--f-mono);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text);background:var(--bg-4);border-bottom:2px solid var(--line-mid);white-space:nowrap}
td:first-child{color:var(--text);font-weight:600}
tbody tr:hover{background:var(--bg-3)}
tbody tr:last-child td{border-bottom:0}

/* ---------- Callout ---------- */
.callout{border:var(--edge);border-left:4px solid var(--accent);background:var(--accent-pale);padding:var(--s5);border-radius:0 var(--r) var(--r) 0;max-width:var(--measure-wide)}
.callout p:last-child{margin-bottom:0}
.callout .mono{color:var(--accent);display:block;margin-bottom:var(--s2)}

/* ---------- FAQ ---------- */
.faq details{border:var(--edge);border-radius:var(--r);margin-bottom:var(--s3);background:var(--bg);overflow:hidden}
.faq summary{cursor:pointer;padding:var(--s4) var(--s8) var(--s4) var(--s5);font-family:var(--f-ui);font-weight:700;font-size:1.05rem;color:var(--text);letter-spacing:-.01em;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--s5);top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.5rem;font-weight:400;line-height:1}
.faq details[open] summary{background:var(--bg-3)}
.faq details[open] summary::after{content:"\2013"}
.faq .faq-body{padding:var(--s4) var(--s5);color:var(--text-dim)}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- Breadcrumb ---------- */
.crumb{font-family:var(--f-mono);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:var(--s5) 0 0}
.crumb a{color:var(--text-muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span{margin:0 var(--s2);color:var(--text-muted)}

/* ---------- Related / interlink ---------- */
.related{border-top:var(--edge-strong);padding-top:var(--s5);margin-top:var(--s7)}
.related h4{margin-bottom:var(--s4)}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3) var(--s5);max-width:var(--measure-wide)}
.related li{border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
.related a{font-family:var(--f-ui);font-weight:600;font-size:.97rem;text-decoration:none;color:var(--text);letter-spacing:-.01em}
.related a:hover{color:var(--accent)}
.related small{display:block;font-family:var(--f-body);color:var(--text-muted);font-size:.85rem;font-weight:400;margin-top:2px}

/* ---------- Author block (E-E-A-T) ---------- */
.byline{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;font-family:var(--f-mono);font-weight:500;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.byline a{color:var(--text);text-decoration:none;border-bottom:2px solid var(--accent)}

/* ---------- Disclosure strip ---------- */
.disclose{background:var(--bg-3);border:var(--edge);border-radius:var(--r);padding:var(--s4);font-size:.87rem;color:var(--text-dim);max-width:var(--measure-wide)}
.disclose p{margin:0}

/* ---------- Footer ---------- */
/* v12: filled warm-dark panel with gold headings, same palette as the verdict
   card and pin, so the page closes on the site's one big colour language. */
.footer{border-top:4px solid var(--gold);background:var(--panel);color:var(--on-panel-dim);margin-top:var(--s9);padding:var(--s8) 0 var(--s6);position:relative;z-index:1;font-size:.92rem}
.footer a{color:var(--on-panel-dim);text-decoration:none}
.footer a:hover{color:var(--gold-2);text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr .8fr;gap:var(--s5) var(--s6)}
.footer h4{color:var(--gold);margin-bottom:var(--s4)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:var(--s2);font-size:.92rem}
.footer-grid a{font-family:var(--f-ui);font-weight:500}
.footer-brand p{font-size:.92rem;color:var(--on-panel-dim);max-width:38ch}
.footer-bottom{border-top:1px solid var(--panel-line);margin-top:var(--s7);padding-top:var(--s5);font-size:.82rem;color:var(--on-panel-dim);line-height:1.6;max-width:80ch}
.footer-bottom p{margin:0 0 var(--s2)}

/* ---------- Affiliate popup ---------- */
.offer-modal{position:fixed;inset:0;z-index:200;background:rgba(15,23,32,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:var(--s5);overflow-y:auto;animation:fade .22s ease-out both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.offer-box{background:var(--bg);border:1px solid var(--line-mid);border-radius:var(--r-lg);max-width:520px;width:100%;margin:auto;position:relative;overflow:hidden;box-shadow:var(--shadow-float);animation:offerIn 350ms cubic-bezier(0.2,0.9,0.3,1.2)}
@keyframes offerIn{from{opacity:0;transform:translateY(20px) scale(0.96)}to{opacity:1;transform:none}}
.offer-close{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.95);border:0;width:34px;height:34px;border-radius:9999px;font-size:22px;font-weight:700;line-height:1;cursor:pointer;color:var(--text);box-shadow:var(--shadow-raise);display:flex;align-items:center;justify-content:center}
.offer-close:hover{background:#fff}
.offer-img{width:100%;height:auto;display:block;border-radius:var(--r-lg) var(--r-lg) 0 0}
.offer-cta{padding:var(--s4) var(--s4) var(--s5);text-align:center}
.offer-cta a{display:block;width:100%;text-align:center;text-decoration:none;background:var(--accent);color:#fff;font-family:var(--f-ui);font-weight:800;font-size:1.2rem;letter-spacing:-.01em;padding:16px 22px;border-radius:var(--r);transition:background .14s ease}
.offer-cta a:hover{background:var(--accent-deep);color:#fff}
@media (max-width:480px){.offer-cta a{font-size:1.08rem;padding:15px 16px}}

.offer-box--event{background:var(--bg);border:1px solid var(--line-mid);border-top:4px solid var(--accent)}
.offer-box--event .offer-body{padding:20px 26px 4px;text-align:center}
.offer-title{font-family:var(--f-disp);font-size:clamp(1.2rem,3.6vw,1.42rem);font-weight:800;letter-spacing:-.02em;color:var(--text);line-height:1.25;margin:0 0 8px}
.offer-title em{font-style:normal;color:var(--accent)}
.offer-sub{font-size:.95rem;color:var(--text-dim);line-height:1.5;margin:0 auto;max-width:420px}
.offer-box--event .offer-cta{padding:14px 22px 6px}
.offer-note{text-align:center;font-family:var(--f-mono);font-weight:500;font-size:.7rem;letter-spacing:.06em;color:var(--text-muted);padding:8px 16px 18px;margin:0}
.offer-box--event .offer-close{background:var(--bg-3);color:var(--text)}
.offer-box--event .offer-close:hover{background:var(--bg-4)}
.offer-cd{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-top:10px;font-variant-numeric:tabular-nums}
.offer-cd-phase{font-family:var(--f-mono);font-weight:500;font-size:.72rem;color:var(--text-muted);margin-right:6px;text-transform:uppercase;letter-spacing:.08em}
.offer-cd-num{font-family:var(--f-ui);font-size:1.2rem;font-weight:800;color:var(--accent)}
.offer-cd-lbl{font-family:var(--f-mono);font-size:.7rem;color:var(--text-muted);margin-right:4px}
.offer-cd-live{font-family:var(--f-ui);font-size:.98rem;font-weight:800;color:var(--verified)}
@media (max-width:480px){.offer-sub{font-size:.88rem}.offer-box--event .offer-body{padding:16px 18px 2px}.offer-close{width:44px;height:44px;font-size:22px;top:6px;right:6px}}

/* ---------- Sticky verdict card (sitewide, after 40% scroll) ---------- */
.verdict-pin{position:fixed;right:20px;bottom:20px;z-index:90;width:288px;background:var(--panel);border:1px solid var(--panel-line);border-top:4px solid var(--gold);border-radius:var(--r);box-shadow:var(--shadow-float);padding:var(--s4);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity 240ms ease,transform 240ms ease}
.verdict-pin.show{opacity:1;transform:none;pointer-events:auto}
.verdict-pin-score{display:flex;align-items:baseline;gap:var(--s2);font-family:var(--f-mono);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--on-panel-dim);margin-bottom:var(--s2)}
.verdict-pin-score b{font-family:var(--f-ui);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--gold);font-variant-numeric:tabular-nums}
.verdict-pin-score .pin-stars{font-family:var(--f-glyph);color:var(--gold);font-size:.85rem;letter-spacing:.05em}
.verdict-pin p{margin:0 0 var(--s3);font-size:.88rem;line-height:1.5;color:var(--on-panel-dim)}
.verdict-pin .btn{width:100%;padding:12px 16px;font-size:.94rem}
.verdict-pin-close{position:absolute;top:6px;right:6px;background:transparent;border:0;width:28px;height:28px;border-radius:var(--r-sm);font-size:18px;line-height:1;cursor:pointer;color:var(--on-panel-dim)}
.verdict-pin-close:hover{color:var(--on-panel);background:var(--panel-2)}
/* The pin yields to anything that owns the screen. */
body.has-offer-modal .verdict-pin{opacity:0;pointer-events:none;transform:translateY(100%)}
body.nav-open .verdict-pin{opacity:0;pointer-events:none}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .container{max-width:100%}
  .verdict-pin{width:264px}
}
@media (max-width:1024px){
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .footer-brand{grid-column:1 / -1}
  .evidence{grid-template-columns:repeat(2,1fr)}
  .field{grid-template-columns:140px 1fr;gap:var(--s6)}
}
@media (max-width:900px){
  [id]{scroll-margin-top:84px}
  .nav-links{display:none}
  .menu-toggle{display:flex}
  .nav.open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) var(--s5) var(--s5);border-bottom:1px solid var(--line-mid);box-shadow:var(--shadow-float)}
  .nav.open .nav-links a{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6)}
  .field{grid-template-columns:1fr;gap:var(--s4)}
  .field-label{border-top:0;border-left:var(--edge-accent);padding:0 0 0 var(--s3)}
  /* Keep the claim readable rather than crushing it to 3 words a line. */
  .ledger-row{grid-template-columns:1fr 150px;gap:var(--s3) var(--s5)}
  .ledger-src{grid-column:1 / -1;padding-top:var(--s2)}
  .chip{margin-top:20px}
}
@media (max-width:760px){
  body{font-size:17px}
  .section{padding:var(--s7) 0}
  .verdict .doc-pad{padding:var(--s5)}
  .doc-pad{padding:var(--s5)}
  .stamp{position:static;display:flex;align-items:baseline;gap:var(--s3);width:100%;min-width:0;text-align:left;margin-bottom:var(--s5)}
  .stamp b{font-size:1.6rem}
  .stamp .stamp-stars{display:inline-block;margin-bottom:0}
  .ledger::before{padding:10px var(--s4)}
  .ledger-row{grid-template-columns:1fr;gap:var(--s2);padding:var(--s4)}
  .ledger-src{padding-top:0}
  .chip{margin-top:var(--s1)}
  .evidence{grid-template-columns:1fr}
  .evidence div{border-left:0;border-bottom:1px solid var(--line);padding:var(--s4) 0}
  .evidence div:last-child{border-bottom:0}
  .footer-grid{grid-template-columns:1fr;gap:var(--s5)}
  /* The pin becomes a system bar, not an object competing with content. */
  .verdict-pin{left:0;right:0;bottom:0;width:auto;border-radius:0;border:0;border-top:3px solid var(--accent);padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3);transform:translateY(100%)}
  .verdict-pin.show{transform:none}
  .verdict-pin p{display:none}
  .verdict-pin-score{margin-bottom:0;flex:1 1 auto}
  .verdict-pin .btn{width:auto;flex:0 0 auto}
  .verdict-pin-close{position:static;flex:0 0 auto;order:3}
  body.has-verdict-pin{padding-bottom:var(--pin-h)}
  .offer-modal{align-items:flex-end;padding:0}
  .offer-box{border-radius:var(--r-lg) var(--r-lg) 0 0;max-width:100%}
}
@media (max-width:560px){
  .split{grid-template-columns:1fr}
  table{font-size:.9rem}
  .btn-row .btn{flex:1 1 100%}
}
@media (max-width:430px){
  h1{font-size:clamp(1.9rem,7vw,2.2rem)}
  .offer-modal{padding:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@media print{
  .nav,.utility,.verdict-pin,.offer-modal,.footer{display:none}
  body{background:#fff;color:#000;padding-bottom:0}
}

/* Figures / evidence screenshots */
.shot{margin:var(--s6) 0;border:var(--edge-strong);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:10px var(--s4);font-size:.84rem;line-height:1.5;color:var(--text-muted);border-top:1px solid var(--line);background:var(--bg-3)}
.shot-hero{margin-top:var(--s5)}
.headshots{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s4);margin:var(--s6) 0}
.headshots .shot{margin:0}
.headshots .shot figcaption{padding:8px 12px;font-family:var(--f-mono);font-weight:500;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.shot-portrait{max-width:320px}

/* ============================================================
   v9.1 — scanning aids (2026-09-01)
   Structure only. No token, font or colour is redefined here:
   every value below resolves to a v9 variable.
   ============================================================ */

/* ---------- Table of contents ---------- */
/* The container widens to 1060 ONLY to seat the rail. .prose stays pinned to
   --measure, so the 960 legibility lever survives intact: text never widens. */
.container-toc{max-width:1060px}
.toc-layout{display:block}

.toc{
  border-top:var(--edge-accent);
  padding-top:var(--s3);
  margin:0 0 var(--s6);
}
.toc-head{
  font-family:var(--f-mono);font-weight:500;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
  margin:0 0 var(--s3);
}
.toc-list{
  list-style:none;margin:0;padding:0;
  counter-reset:tocnum;
  font-family:var(--f-ui);
}
.toc-list li{margin:0 0 var(--s2);counter-increment:tocnum;line-height:1.4}
.toc-list a{
  display:block;position:relative;
  padding:3px 0 3px var(--s5);
  font-size:.87rem;font-weight:500;
  color:var(--text-muted);text-decoration:none;
  border-left:2px solid transparent;
  margin-left:-2px;
  transition:color 160ms ease,border-color 160ms ease;
}
.toc-list a::before{
  content:counter(tocnum,decimal-leading-zero);
  position:absolute;left:var(--s2);top:4px;
  font-family:var(--f-mono);font-weight:500;font-size:.62rem;letter-spacing:.06em;
  color:var(--line-hard);
}
.toc-list a:hover{color:var(--text);border-left-color:var(--line-mid)}
.toc-list a[aria-current="true"]{
  color:var(--accent);font-weight:700;
  border-left-color:var(--accent);
}
.toc-list a[aria-current="true"]::before{color:var(--accent)}

/* Mobile / tablet: collapsible block above the article. Default state is OPEN
   so a reader with JS disabled still gets the list; behaviour.js collapses it. */
.toc-toggle{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--bg-3);border:var(--edge);border-radius:var(--r);
  padding:var(--s3) var(--s4);
  font-family:var(--f-ui);font-weight:700;font-size:.94rem;color:var(--text);
}
.toc-toggle[hidden]{display:none}
.toc-toggle span{color:var(--text-muted);font-weight:500}
.toc-toggle::after{content:"+";float:right;color:var(--accent);font-size:1.2rem;line-height:1.2}
.toc-toggle[aria-expanded="true"]::after{content:"\2013"}
.toc.is-collapsed .toc-list{display:none}
.toc.is-collapsed{border-top:0;padding-top:0}
.toc.is-collapsed .toc-head{display:none}

/* Desktop: rail in the left gutter, sticky under the 60px nav. */
@media (min-width:1180px){
  .toc-layout{
    display:grid;
    grid-template-columns:200px minmax(0,1fr);
    gap:var(--s7);
    align-items:start;
  }
  .toc{
    position:sticky;top:84px;
    max-height:calc(100vh - 120px);overflow-y:auto;
    margin:0;
  }
  .toc-toggle{display:none}
  .toc.is-collapsed .toc-list{display:block}
  .toc.is-collapsed .toc-head{display:block}
  .toc.is-collapsed{border-top:var(--edge-accent);padding-top:var(--s3)}
  /* Homepage composes its own sections, so its rail floats in the gutter
     instead of being a grid sibling. */
  .toc-float{
    position:absolute;top:0;left:calc(50% - 530px);
    width:200px;height:100%;pointer-events:none;
  }
  .toc-float .toc{pointer-events:auto;position:sticky;top:84px}
}
@media (max-width:1179px){
  .toc-float{display:none}
}

/* ---------- Figure cards (v9.1 density work) ---------- */
/* .shot already styles evidence screenshots. Generated data figures sit on a
   tinted ground so they read as produced-by-us, not as captured evidence. */
.fig-data{background:var(--bg-3)}
.fig-data img{background:var(--bg)}
.fig-narrow{max-width:520px;margin-left:auto;margin-right:auto}

/* ---------- Mobile measure ---------- */
/* Measured 32 characters per line at 375px, well under the 45-75 comfortable
   band. The container padding, not the type size, was eating the column. */
@media (max-width:560px){
  .container{padding:0 var(--s4)}
}
@media (max-width:430px){
  .container{padding:0 var(--s3)}
}

/* ---------- Inline TOC (homepage) ---------- */
/* The homepage is full-width, so its TOC is a bordered box after the hero
   rather than a gutter rail. Two columns so a 12-item list stays compact. */
.toc-inline{
  border:1px solid var(--line-mid);border-top:4px solid var(--accent);
  border-radius:var(--r);background:var(--bg-3);
  padding:var(--s5) var(--s6);margin:var(--s6) 0 0;
}
.toc-inline .toc-head{margin-bottom:var(--s4)}
.toc-inline .toc-list{columns:2;column-gap:var(--s7)}
.toc-inline .toc-list li{break-inside:avoid}
.toc-inline .toc-toggle{display:none}
@media (max-width:640px){.toc-inline .toc-list{columns:1}}

/* ---------- Section eyebrow accent bump ---------- */
/* Give the FAQ its own gold rule so the page has more than one colour anchor. */
.faq summary::after{color:var(--accent)}