/* ============================================================
   OPPORTUNITY GRADE — design system
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* Palette note. Revised 8 Sep 2026, twice in one day, and the second revision
   is the one that stands: LIGHT is the default. Dark shipped as the default that
   morning and was flipped back the same afternoon, so treat any comment claiming
   otherwise as stale and check the shells in build.py and build_pages.js, which
   are what a reader actually receives.

   Both palettes are real. Light is not the dark values inverted and dark is not
   the light values inverted - they are two solutions to the same hues, each
   solved against its own surfaces. The hero and every review header are
   permanently dark in BOTH, which is why --deep and --on-deep exist: an element
   sitting on those needs a colour that does not flip underneath it.

   Every value here is measured by `node tools/contrast.mjs`, which reads
   site/dist, resolves the real cascade in both themes, and is wired into
   `npm run gates`. Nothing in this block is eyeballed.

   Grade hues carry meaning, so they are the one thing that must read the same
   in both themes. They are NOT the same hex in both - a green that clears 4.5:1
   on #090c10 is washed out on #f7f7f4 - they are two solutions to one hue. */

:root{
  color-scheme:light;
  --page:#f7f7f4;
  --surface:#ffffff;
  --surface-2:#fbfbf9;
  --surface-sunk:#eeeeea;
  --ink:#14181d;
  --ink-2:#4a4f57;
  --muted:#656a73;
  --hair:#e3e3dd;
  --hair-strong:#cfcfc7;

  --brand:#097670;
  --brand-2:#12938c;
  --brand-soft:#e6f5f3;
  --brand-ink:#0a4b47;

  --gA:#087d38; --gB:#4b781a; --gC:#936100; --gD:#b34b0f; --gF:#c0392f;
  --gA-soft:#e8f5ec; --gB-soft:#eef4e5; --gC-soft:#faf1dd; --gD-soft:#fbeade; --gF-soft:#fae9e9;

  --good:#087d38; --warning:#936100; --serious:#b34b0f; --critical:#c0392f;
  --good-soft:#e8f5ec; --warning-soft:#faf1dd; --serious-soft:#fbeade; --critical-soft:#fae9e9;

  --s1:#2a78d6; --s2:#b34b0f; --s3:#097670;
  /* Grade colours are used two opposite ways: as TEXT on a page
     surface, and as the BACKGROUND of the badge. One token cannot
     serve both, so the badge carries its own foreground. Light keeps
     white - every grade clears 4:1 against it and the badge glyph is
     large text, where the bar is 3:1. */
  --on-grade:#ffffff;
  --on-brand:#ffffff;
  /* The hero is dark in BOTH themes, so anything on it needs an on-dark
     value that does not flip. */
  --on-deep-brand:#7fe3dd;

  --grid:#e9e8e2; --axis:#c8c7bf;

  /* The permanently dark surfaces - hero, review header - and the text that
     sits on them. Those greys were hardcoded in 66 places before this;
     these tokens are what let the hero meet the body without a seam in dark. */
  --deep:#0b0d13;
  --deep-2:#12161c;
  --on-deep:#ffffff;
  --on-deep-2:#c3c6d0;
  --on-deep-3:#989dab;
  --deep-hair:rgba(255,255,255,.13);
  --deep-hair-2:rgba(255,255,255,.22);
  --deep-fill:rgba(255,255,255,.07);
  --deep-fill-2:rgba(255,255,255,.12);

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:ui-serif,Georgia,Cambria,"Times New Roman",serif;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(14,17,22,.05),0 1px 1px rgba(14,17,22,.03);
  --sh-2:0 4px 16px rgba(14,17,22,.07),0 1px 3px rgba(14,17,22,.04);
  --sh-3:0 18px 48px rgba(14,17,22,.13),0 3px 10px rgba(14,17,22,.05);
  --sh-brand:0 10px 30px rgba(15,124,118,.24);
  --wrap:1180px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --page:#090c10;
  --surface:#12161c;
  --surface-2:#171c23;
  --surface-sunk:#0e1116;
  --ink:#e9edf2;
  --ink-2:#98a2b0;
  --muted:#8b95a3;
  --hair:#232a33;
  --hair-strong:#323a45;
  --brand:#3fd0c9;
  --brand-2:#5ce0d9;
  --brand-soft:#102a2b;
  --brand-ink:#7fe3dd;
  --gA:#34d17a;--gB:#8fd14f;--gC:#f0b429;--gD:#f2762e;--gF:#ec4753;
  --gA-soft:#0e2419;--gB-soft:#18240f;--gC-soft:#2a2110;--gD-soft:#2b1a12;--gF-soft:#2b1417;
  --good:#34d17a;--warning:#f0b429;--serious:#f2762e;--critical:#ec4753;
  --good-soft:#0e2419;--warning-soft:#2a2110;--serious-soft:#2b1a12;--critical-soft:#2b1417;
  --s1:#3987e5;--s2:#f2762e;--s3:#3fd0c9;
  /* Dark brightens every grade hue so it reads as text on #090c10.
     That same brightness makes white-on-badge 1.84:1 - unreadable.
     Near-black on the badge instead: 4.86:1 at worst, 10.35 at best. */
  --on-grade:#08120a;
  --on-brand:#04211f;
  --on-deep-brand:#7fe3dd;
  --grid:#1c222a;--axis:#333b45;

  /* The hero was already this dark. In dark mode it now has to MEET the body
     rather than sit slightly above it, so --deep resolves to the page colour
     and the seam disappears. This is the whole reason the tokens exist. */
  --deep:#090c10;
  --deep-2:#12161c;
  --on-deep:#f4f7fa;
  --on-deep-2:#98a2b0;
  --on-deep-3:#7c8593;
  --deep-hair:#232a33;
  --deep-hair-2:#323a45;
  --deep-fill:rgba(255,255,255,.045);
  --deep-fill-2:rgba(255,255,255,.09);

  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 4px 16px rgba(0,0,0,.5);
  --sh-3:0 18px 48px rgba(0,0,0,.6);
  --sh-brand:0 10px 30px rgba(63,208,201,.18);
}

body{
  font-family:var(--sans);
  background:var(--page);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;line-height:1.13;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem)}
h3{font-size:clamp(1.25rem,2.1vw,1.6rem)}
h4{font-size:1.06rem;font-family:var(--sans);font-weight:700;letter-spacing:-.005em}

/* SUBSECTION HEADING, H4 LOOK, H3 LEVEL.
   Every heading inside a report body that sits under an <h2> is an <h3
   class="h4"> - the level the outline requires, the size the design has always
   used. Do not "simplify" this back to a bare <h4>.

   WHY, 14 Sep 2026. Until today the report renderer emitted <h4> directly under
   <h2>, so all 210 reports shipped an outline that skipped a level - h1, h4,
   h4, h2, h4 - on the densest pages this site owns. Heading hierarchy is the
   strongest structural correlate in the retrieval research, and a skipped level
   is also a plain accessibility defect: a screen-reader user tabbing the
   outline is told a subsection is two levels down from nothing.

   Promoting the tag alone would have shrunk these to h3's serif clamp(1.25rem,
   2.1vw,1.6rem) and changed the look of every report. So the style moved here
   instead of the tag changing meaning.

   The disclosure banner is an <h2 class="h4"> rather than an h3: it is a
   top-level section of the report that renders directly under the <h1>, not a
   subsection of anything above it. Same look, the level its position requires. */
h2.h4,h3.h4{font-size:1.06rem;font-family:var(--sans);font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1.05em}
.lede{font-size:1.16rem;line-height:1.66;color:var(--ink-2)}
.dim{color:var(--ink-2)}
.tiny{font-size:.79rem}
.mono{font-variant-numeric:tabular-nums}

.eyebrow{
  font-size:.71rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);margin:0 0 12px;display:flex;align-items:center;gap:9px;font-family:var(--sans)
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;flex:none}
.eyebrow.ctr{justify-content:center}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;
  font-weight:650;font-size:.94rem;letter-spacing:-.005em;cursor:pointer;
  text-decoration:none;transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,background .16s,border-color .16s;
  white-space:nowrap
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--brand-2);box-shadow:0 14px 36px color-mix(in srgb,var(--brand) 34%,transparent);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--hair-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-light{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(8px)}
.btn-light:hover{background:rgba(255,255,255,.19)}
.btn-sm{padding:8px 16px;font-size:.85rem}
.btn-lg{padding:15px 30px;font-size:1.02rem}
.btn-block{width:100%}

/* ── Header ──────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--hair);
}
.hdr-in{display:flex;align-items:center;gap:14px;height:64px;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.028em;font-size:1.09rem;flex:none}
.logo-mk{
  width:32px;height:32px;border-radius:9px;flex:none;overflow:hidden;
  background:linear-gradient(145deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.06rem;font-weight:700;
  box-shadow:0 3px 10px color-mix(in srgb,var(--brand) 34%,transparent)
}
.logo small{display:block;font-size:.6rem;letter-spacing:.14em;font-weight:700;color:var(--muted);text-transform:uppercase;margin-top:-3px}
.nav{display:flex;gap:2px;margin-left:20px}
.nav a{
  padding:7px 13px;border-radius:9px;text-decoration:none;font-size:.9rem;font-weight:550;color:var(--ink-2);
  transition:background .14s,color .14s
}
.nav a:hover{background:var(--surface-sunk);color:var(--ink)}
.nav a.on{color:var(--ink);font-weight:700;background:var(--surface-sunk)}
.hdr-sp{flex:1}
.icon-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--hair);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;transition:border-color .14s,background .14s;flex:none
}
.icon-btn:hover{border-color:var(--hair-strong);background:var(--surface-sunk)}
.burger{display:none}
@media(max-width:900px){
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--hair);padding:12px;gap:2px;box-shadow:var(--sh-2);margin:0
  }
  .burger{display:grid}
  .hdr-cta{display:none}
}
@media(max-width:560px){
  .logo small{display:none}
  .logo{font-size:1rem;gap:8px}
  .hdr-in{gap:8px;padding:0 14px}
  .wrap,.wrap-narrow{padding:0 16px}
  .hero-in{padding:56px 16px 68px}
  .rhero-in{padding:26px 16px 34px}
  .optin{padding:26px 22px}
  .card-pad{padding:20px}
  .sec{padding:52px 0}
  .rsec{padding:40px 0}
  .hero-sub{font-size:1.02rem;line-height:1.55;margin:16px 0 24px}
  .hero h1{font-size:2.35rem}
  .hero-trust{gap:18px;margin-top:32px}
  .btn-lg{padding:13px 24px;font-size:.96rem}
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--deep);color:var(--on-deep);isolation:isolate}
.hero::before{
  content:"";pointer-events:none;position:absolute;inset:-40% -20% auto -20%;height:150%;z-index:-2;
  background:
    radial-gradient(60% 50% at 18% 8%,rgba(63,208,201,.34),transparent 62%),
    radial-gradient(45% 40% at 84% 4%,rgba(235,104,52,.30),transparent 60%),
    radial-gradient(50% 44% at 62% 78%,rgba(27,175,122,.24),transparent 62%);
  filter:blur(8px)
}
.hero::after{
  content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(80% 70% at 50% 30%,#000 20%,transparent 78%)
}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:78px 24px 96px;position:relative}
.hero .eyebrow{color:var(--on-deep-brand)}
.hero h1{color:var(--on-deep);max-width:16ch}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#3fd0c9,#8fd14f 55%,#c9e77a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:1.18rem;line-height:1.62;color:var(--on-deep-2);max-width:56ch;margin:22px 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid var(--deep-fill-2)}
.hero-trust div{min-width:0}
.hero-trust b{display:block;font-family:var(--serif);font-size:1.55rem;color:#fff;line-height:1.1}
.hero-trust span{font-size:.79rem;color:var(--on-deep-3);letter-spacing:.01em}


/* The hero grade rail (.hero-rail, .hrail*, .rail-note) was removed on
   8 Sep 2026 along with its markup. It listed the same six featured reports the
   "Six from the shelf" cards render in full one screen below, from the same
   source - two passes at the same six, the first one truncated. Deleted rather
   than left orphaned; git has it if the rail ever comes back. */

/* ── Sections ────────────────────────────────────────────── */
.sec{padding:76px 0}
.sec-sm{padding:52px 0}
.sec-sunk{background:var(--surface-sunk)}
.sec-ink{background:var(--ink);color:var(--page)}
.sec-head{max-width:640px;margin-bottom:38px}
.sec-head.ctr{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{margin-top:12px;color:var(--ink-2);font-size:1.06rem}
.sec-ink .sec-head p{color:var(--surface-2)}

/* ── Cards ───────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-pad{padding:26px}

/* Grade card (homepage) */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.gcards{grid-template-columns:1fr}}
.gcard{
  position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  box-shadow:var(--sh-1);transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s,border-color .24s
}
.gcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--hair-strong)}
.gcard-top{position:relative;padding:24px 24px 18px;overflow:hidden}
.gcard-top::before{content:"";pointer-events:none;position:absolute;inset:0;opacity:.055;background:var(--c)}
.gcard-glow{pointer-events:none;position:absolute;width:150px;height:150px;right:-46px;top:-64px;border-radius:50%;background:var(--c);filter:blur(44px);opacity:.28}
.gcard-row{position:relative;display:flex;align-items:flex-start;gap:16px}
.gbadge{
  width:74px;height:74px;border-radius:18px;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;color:var(--on-grade);line-height:1;position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.16)
}
.gbadge span{font-size:2.15rem;letter-spacing:-.03em}
.gbadge small{position:absolute;bottom:7px;font-size:.6rem;letter-spacing:.06em;opacity:.92;font-family:var(--sans);font-weight:700}
.gbadge.sm{width:52px;height:52px;border-radius:13px}
.gbadge.sm span{font-size:1.5rem}
.gbadge.sm small{display:none}
.gbadge.xl{width:104px;height:104px;border-radius:26px}
.gbadge.xl span{font-size:3.1rem}
.gcard-name{flex:1;min-width:0;padding-top:3px}
.gcard-name h3{font-size:1.28rem;margin-bottom:3px}
.gcard-name .cat{font-size:.73rem;color:var(--ink-2);font-weight:600;letter-spacing:.01em;line-height:1.35}
.gcard-tag{position:relative;margin-top:16px;font-size:.94rem;color:var(--ink-2);line-height:1.5}
.gcard-body{padding:0 24px 22px;flex:1;display:flex;flex-direction:column;gap:16px}
.gcard-spark{display:flex;gap:4px;align-items:flex-end;height:62px;padding-top:4px;border-bottom:1px solid var(--hair)}
.gcard-spark i{flex:1;border-radius:3px 3px 0 0;opacity:.92;transition:height .6s cubic-bezier(.2,.7,.3,1)}
.gcard-lbl{display:flex;justify-content:space-between;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.gcard-axis{display:flex;justify-content:space-between;font-size:.66rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:5px;font-weight:700}
.gcard-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcard-stats .v{font-family:var(--serif);font-size:1.36rem;letter-spacing:-.028em;line-height:1.1}
.gcard-stats .k{font-size:.73rem;color:var(--muted);line-height:1.35;margin-top:2px}
.gcard-flag{
  display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border-radius:11px;
  background:var(--critical-soft);border:1px solid color-mix(in srgb,var(--critical) 20%,transparent);margin-top:auto
}
.gcard-flag .ic{color:var(--critical);flex:none;margin-top:1px}
.gcard-flag b{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--critical);margin-bottom:2px}
.gcard-flag span{font-size:.83rem;line-height:1.45;color:var(--ink-2)}
.gcard-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px;border-top:1px solid var(--hair);background:var(--surface-2)
}
.gcard-foot .rd{font-size:.79rem;color:var(--muted);font-weight:600}
.gcard-foot .go{font-size:.86rem;font-weight:700;color:var(--brand);display:flex;align-items:center;gap:6px;white-space:nowrap}
.gcard:hover .go svg{transform:translateX(3px)}
.gcard-foot .go svg{transition:transform .18s}

/* verdict pill */
.vpill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-size:.71rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.3
}
.vpill.good{background:var(--good-soft);color:var(--good)}
.vpill.caution{background:var(--warning-soft);color:var(--warning)}
.vpill.bad{background:var(--critical-soft);color:var(--critical)}
.vpill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);padding:22px 20px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:6px}
.stat .l{font-size:.86rem;font-weight:650;line-height:1.35}
.stat .s{font-size:.77rem;color:var(--muted);margin-top:3px;line-height:1.4}

/* ── Tables ──────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{
  text-align:left;padding:12px 16px;font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--hair);white-space:nowrap
}
tbody td{padding:13px 16px;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.5}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-compact tbody td{padding:9px 14px;font-size:.86rem}

/* ── Flags ───────────────────────────────────────────────── */
.flagcols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:900px){.flagcols{grid-template-columns:1fr}}
.flaghead{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.flaghead .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.flaghead h3{font-size:1.22rem}
.flaghead .n{margin-left:auto;font-size:.78rem;font-weight:800;padding:3px 10px;border-radius:999px}
.flag{
  border:1px solid var(--hair);border-left:3px solid var(--c);border-radius:var(--r-sm);
  background:var(--surface);margin-bottom:9px;overflow:hidden
}
.flag summary{
  padding:13px 16px;cursor:pointer;list-style:none;display:flex;gap:11px;align-items:flex-start;
  font-weight:620;font-size:.93rem;line-height:1.45;transition:background .14s
}
.flag summary::-webkit-details-marker{display:none}
.flag summary:hover{background:var(--surface-2)}
.flag summary .chev{margin-left:auto;flex:none;color:var(--muted);transition:transform .2s;margin-top:3px}
.flag[open] summary .chev{transform:rotate(90deg)}
.flag summary .idx{
  flex:none;width:21px;height:21px;border-radius:6px;display:grid;place-items:center;
  font-size:.68rem;font-weight:800;background:var(--cs);color:var(--ink);margin-top:1px
}
.flag-body{padding:0 16px 15px 48px;font-size:.9rem;color:var(--ink-2);line-height:1.62}

/* ── Scorecard bars ──────────────────────────────────────── */
.scrow{display:grid;grid-template-columns:minmax(150px,1.15fr) 46px minmax(120px,2.6fr);gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair)}
.scrow:last-child{border-bottom:0}
@media(max-width:720px){.scrow{grid-template-columns:1fr 46px;row-gap:6px}.scrow .scbarwrap{grid-column:1/-1}}
.scrow .nm{font-size:.9rem;font-weight:620;line-height:1.35}
.scrow .nm i{display:block;font-style:normal;font-size:.72rem;color:var(--muted);font-weight:600;margin-top:2px}
.scrow .wt{font-size:.74rem;color:var(--muted);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.scbarwrap{position:relative}
.scbar{height:12px;border-radius:0 4px 4px 0;background:var(--c);transition:width .8s cubic-bezier(.2,.7,.3,1)}
.sctrack{height:12px;background:var(--surface-sunk);border-radius:4px;overflow:hidden;position:relative}
.scval{position:absolute;right:0;top:-19px;font-size:.75rem;font-weight:800;font-variant-numeric:tabular-nums}
.scwhy{font-size:.85rem;color:var(--ink-2);line-height:1.55;margin-top:7px}

/* ── Callouts ────────────────────────────────────────────── */
.callout{
  border-radius:var(--r-lg);padding:22px 24px;border:1px solid var(--hair);background:var(--surface-2);
  display:flex;gap:16px;align-items:flex-start
}
.callout .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.callout h4{margin-bottom:5px}
.callout p{margin:0;font-size:.93rem;color:var(--ink-2);line-height:1.6}
.callout.crit{background:var(--critical-soft);border-color:color-mix(in srgb,var(--critical) 28%,transparent)}
.callout.warn{background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}
.callout.good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 26%,transparent)}
.callout.brand{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 24%,transparent)}

.pull{
  font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.34;letter-spacing:-.02em;
  border-left:3px solid var(--brand);padding:4px 0 4px 24px;margin:30px 0;color:var(--ink)
}

/* ── Long unbreakable tokens ─────────────────────────────────
   Added 8 Sep 2026. `corrections@opportunitygrade.com` is 32 characters with
   no break opportunity in it. Inside a card on /about/ at a 390px viewport it
   lays out 352px wide and pushes the document to 395 - a 5px horizontal scroll
   on the whole page from one email address.

   `anywhere` rather than `break-word` on purpose: only `anywhere` shrinks the
   element's min-content width, which is what actually stops the parent being
   widened. `break-word` wraps the glyphs and leaves the overflow.

   Scoped to the tokens that are long by nature - addresses, URLs, case numbers,
   the `.mono` runs - rather than set globally, so ordinary prose keeps normal
   word breaking. The same email inside a table was already fine: .tbl-wrap
   scrolls, which is why the table was the wrong suspect for this. */
a[href^="mailto:"],a[href^="http"],.mono,code{overflow-wrap:anywhere}

/* ── Chart shell ─────────────────────────────────────────── */
.viz{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.viz-head{margin-bottom:4px}
.viz-head h4{font-size:1rem;margin-bottom:3px}
.viz-head p{font-size:.83rem;color:var(--muted);margin:0}
.viz svg{width:100%;height:auto;overflow:visible}
.viz text{font-family:var(--sans)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:.81rem;color:var(--ink-2)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:7px;vertical-align:-1px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  padding:6px 14px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);
  font-size:.83rem;font-weight:620;cursor:pointer;transition:all .15s;color:var(--ink-2)
}
.chip:hover{border-color:var(--hair-strong);color:var(--ink)}
.chip.on{background:var(--deep-2);border-color:var(--deep-2);color:var(--on-deep)}
/* Removed 8 Sep 2026: `.chip.on[data-c]{background:var(--cc)...}`. It had never
   applied to anything. No chip anywhere carries a data-c attribute - the three
   chip rows use data-f, data-d and data-w - and --cc was defined in no theme,
   so even a match would have resolved to nothing. Deleted rather than wired up,
   because there is no grade-coloured chip row for it to serve. Noting it here
   so the next person does not reintroduce it assuming --cc exists. */

/* ── Review page ─────────────────────────────────────────── */
.rhero{position:relative;overflow:hidden;color:var(--on-deep);background:var(--deep);isolation:isolate}
.rhero::before{
  content:"";pointer-events:none;position:absolute;inset:-30% -10% auto -10%;height:150%;z-index:-2;
  background:radial-gradient(55% 55% at 22% 10%,var(--cGlow),transparent 62%),
             radial-gradient(45% 45% at 88% 20%,var(--deep-fill),transparent 60%)
}
.rhero::after{
  content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;opacity:.42;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(85% 80% at 40% 40%,#000 15%,transparent 80%)
}
.rhero-in{max-width:var(--wrap);margin:0 auto;padding:34px 24px 44px}
.crumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--on-deep-3);margin-bottom:26px}
.crumb a{text-decoration:none;color:var(--on-deep-2)}
.crumb a:hover{color:#fff}
.rhero-grid{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}
@media(max-width:1000px){.rhero-grid{grid-template-columns:1fr;gap:30px}}
.rhero h1{color:var(--on-deep);font-size:clamp(2.1rem,4.6vw,3.3rem)}
.rhero .cat{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--on-deep-2);margin-bottom:12px}
.rhero-tag{font-size:1.1rem;color:var(--on-deep-2);line-height:1.6;margin:16px 0 0;max-width:52ch}
.rhero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mchip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:var(--deep-fill);border:1px solid var(--deep-hair-2);font-size:.79rem;color:var(--on-deep-2)
}
.scorebox{
  background:var(--deep-fill);border:1px solid var(--deep-hair-2);border-radius:var(--r-xl);
  padding:26px;backdrop-filter:blur(12px);text-align:center
}
.scorebox .gbadge{margin:0 auto 16px}
.scorebox .num{font-family:var(--serif);font-size:2.5rem;line-height:1;color:#fff;letter-spacing:-.03em}
.scorebox .num sub{font-size:1rem;color:var(--on-deep-3);vertical-align:baseline;font-family:var(--sans);font-weight:600}
.scorebox .lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-3);font-weight:700;margin-top:8px}
.scorebox hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:18px 0}
.scorebox .vd{font-size:.95rem;font-weight:700;color:#fff}

/* sticky sub nav */
.subnav{
  position:sticky;top:64px;z-index:60;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hair)
}
.subnav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{
  padding:13px 13px;font-size:.85rem;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .14s,border-color .14s
}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--brand);border-bottom-color:var(--brand)}

.rsec{padding:54px 0;border-bottom:1px solid var(--hair);scroll-margin-top:118px}
.rsec:last-child{border-bottom:0}
.rsec > .wrap > .eyebrow{margin-bottom:10px}
.rsec h2{margin-bottom:18px}
.prose{max-width:74ch;font-size:1.03rem;line-height:1.72}
.prose p{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:650}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}

/* people */
.person{display:flex;gap:15px;padding:18px;border:1px solid var(--hair);border-radius:var(--r);background:var(--surface)}
.pav{
  width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--ink);
  background:var(--surface-sunk);box-shadow:inset 0 0 0 2px var(--c)
}
.person b{display:block;font-size:1rem;letter-spacing:-.01em}
.person .role{font-size:.76rem;color:var(--brand);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:1px 0 7px}
.person p{margin:0;font-size:.87rem;color:var(--ink-2);line-height:1.58}

/* calculator */
.calc{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.calc-in{padding:22px;background:var(--surface-2);border-right:1px solid var(--hair);align-self:start}
.calc-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.calc-presets .chip{padding:5px 11px;font-size:.76rem}
@media(max-width:860px){.calc-in{border-right:0;border-bottom:1px solid var(--hair)}}
.calc-out{padding:24px}
.field{margin-bottom:20px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;font-weight:700;margin-bottom:9px}
.field label b{font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--brand);font-weight:800}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;
  background:var(--hair-strong);outline:none;cursor:pointer
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--brand);
  border:3px solid var(--surface);box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 38%,transparent);cursor:grab
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--brand);border:3px solid var(--surface);cursor:grab
}
.calc-hero{text-align:center;padding:6px 0 18px}
.calc-hero .big{font-family:var(--serif);font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.calc-hero .cap{font-size:.8rem;color:var(--muted);font-weight:650;letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.calc-rows{border-top:1px solid var(--hair)}
.calc-rows div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--hair);font-size:.88rem}
.calc-rows div:last-child{border-bottom:0;font-weight:800}
.calc-rows span:last-child{font-variant-numeric:tabular-nums}

/* channel matrix */
.chan{display:grid;grid-template-columns:200px 150px 1fr;gap:0;font-size:.88rem}
@media(max-width:760px){.chan{grid-template-columns:1fr}.chan .cn{border-bottom:0;padding-bottom:2px}.chan .cs{padding-top:0;border-bottom:0}}
.chan > div{padding:12px 14px;border-bottom:1px solid var(--hair)}
.chan .cn{font-weight:650}
.chan .cnote{color:var(--ink-2);font-size:.85rem;line-height:1.5}
.sbadge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:6px;font-size:.71rem;font-weight:800;letter-spacing:.03em;white-space:nowrap}
.sbadge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── Lead capture ────────────────────────────────────────── */
.optin{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:40px;color:#fff;
  background:linear-gradient(135deg,#0a1f22 0%,#12504e 52%,#1c7a74 100%);box-shadow:var(--sh-3)
}
.optin::before{
  content:"";position:absolute;width:340px;height:340px;right:-90px;bottom:-150px;border-radius:50%;
  pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,214,110,.4),transparent 68%)
}
.optin::after{
  content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--deep-fill) 1px,transparent 1px),linear-gradient(90deg,var(--deep-fill) 1px,transparent 1px);
  background-size:36px 36px
}
.optin > *{position:relative;z-index:1}
.optin h3{color:#fff;font-size:clamp(1.5rem,3vw,2.05rem)}
.optin p{color:#e6f7f5;font-size:1rem;margin:12px 0 22px;max-width:52ch}
.optin-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:38px;align-items:center}
@media(max-width:860px){.optin-grid{grid-template-columns:1fr;gap:26px}}
.optin ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px}
.optin li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:#e6f7f5}
.optin li svg{flex:none;margin-top:3px}
.form-row{display:flex;gap:9px;flex-wrap:wrap}
.form-row input{
  flex:1;min-width:190px;padding:13px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:var(--deep-hair);color:#fff;font-size:.94rem;outline:none;transition:border-color .15s,background .15s
}
.form-row input::placeholder{color:rgba(255,255,255,.6)}
.form-row input:focus{border-color:#fff;background:rgba(255,255,255,.2)}
.form-note{font-size:.76rem;color:#dff2f0;margin-top:11px}
.optin-vis{display:grid;place-items:center}
.mockdoc{
  width:100%;max-width:250px;aspect-ratio:8.5/11;background:#fff;border-radius:10px;box-shadow:0 26px 60px rgba(0,0,0,.42);
  padding:20px;transform:rotate(-3.5deg);transition:transform .4s cubic-bezier(.2,.7,.3,1)
}
.mockdoc:hover{transform:rotate(0deg) scale(1.04)}

/* sticky bar */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;transform:translateY(110%);
  transition:transform .38s cubic-bezier(.2,.7,.3,1);
  background:var(--deep-2);color:var(--on-deep);border-top:1px solid var(--deep-hair);
  box-shadow:0 -8px 32px rgba(0,0,0,.28)
}
.stickybar.show{transform:translateY(0)}
.stickybar-in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px}
.stickybar b{font-size:.94rem;font-weight:650}
.stickybar span{font-size:.83rem;color:var(--on-deep-2)}
@media(max-width:720px){.stickybar span{display:none}}
.stickybar .sp{flex:1}
.stickybar .x{background:none;border:0;color:var(--on-deep-3);cursor:pointer;font-size:1.15rem;padding:0 4px;line-height:1}

/* modal */
.modal-bd{
  position:fixed;inset:0;z-index:100;background:rgba(8,9,12,.72);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .26s
}
.modal-bd.show{opacity:1;pointer-events:auto}
.modal{
  background:var(--surface);border-radius:var(--r-xl);max-width:520px;width:100%;overflow:hidden;
  box-shadow:var(--sh-3);transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.7,.3,1)
}
.modal-bd.show .modal{transform:none}
.modal-top{padding:30px 30px 0;position:relative}
.modal-top .x{position:absolute;right:16px;top:14px;background:none;border:0;font-size:1.4rem;color:var(--muted);cursor:pointer;line-height:1}
.modal-body{padding:18px 30px 30px}
.modal .form-row input{background:var(--surface-2);border-color:var(--hair);color:var(--ink)}
.modal .form-row input::placeholder{color:var(--muted)}
.modal .form-row input:focus{border-color:var(--brand)}

.thanks{text-align:center;padding:14px 0}
.thanks .ic{width:56px;height:56px;border-radius:50%;background:var(--good-soft);color:var(--good);display:grid;place-items:center;margin:0 auto 16px}

/* ── Compare page ────────────────────────────────────────── */
.cmp-tbl{border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.cmp-tbl table{font-size:.9rem}
.cmp-tbl thead th{background:var(--surface-2);padding:0}
.cmp-th{padding:20px 16px;text-align:center}
.cmp-th .gbadge{margin:0 auto 10px}
.cmp-th .cmp-nm{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-family:var(--sans)}
.cmp-th .cmp-cat{display:block;font-size:.72rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600}
.cmp-tbl tbody th{
  text-align:left;padding:13px 16px;font-size:.85rem;font-weight:650;border-bottom:1px solid var(--hair);
  background:var(--surface-2);white-space:nowrap;position:sticky;left:0
}
.cmp-tbl tbody td{text-align:center;font-size:.88rem}
.rowgrp td{background:var(--deep-2);color:var(--on-deep);font-size:.7rem !important;letter-spacing:.11em;text-transform:uppercase;font-weight:800;padding:8px 16px !important;text-align:left !important}

/* ── Footer ──────────────────────────────────────────────── */
.ftr{background:var(--ink);color:var(--on-deep-2);padding:56px 0 30px;font-size:.9rem}
html[data-theme="dark"] .ftr{background:#08090b;border-top:1px solid var(--hair)}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
@media(max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}}
.ftr h5{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 14px;font-weight:800;font-family:var(--sans)}
.ftr a{display:block;color:var(--on-deep-2);text-decoration:none;padding:4px 0;transition:color .14s}
.ftr a:hover{color:#fff}
.ftr .logo{color:#fff;margin-bottom:14px}
.ftr-bot{border-top:1px solid rgba(255,255,255,.11);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.79rem;color:#8a8d94}
.disclaimer{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:16px 18px;font-size:.8rem;line-height:1.6;color:var(--on-deep-3);margin-bottom:32px}

/* ── Misc ────────────────────────────────────────────────── */
.ticker{overflow:hidden;background:var(--ink);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
html[data-theme="dark"] .ticker{background:#08090b}
.ticker-track{display:flex;gap:0;animation:tick 46s linear infinite;width:max-content}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-item{display:flex;align-items:center;gap:10px;padding:13px 26px;font-size:.83rem;color:var(--on-deep-2);white-space:nowrap}
.ticker-item .dot{width:6px;height:6px;border-radius:50%;flex:none}
.ticker-item b{color:#fff;font-weight:650}

.badge-row{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:7px;
  font-size:.74rem;font-weight:700;background:var(--surface-sunk);color:var(--ink-2);border:1px solid var(--hair)
}

.steps{counter-reset:s;display:grid;gap:14px}
.step{display:flex;gap:16px;align-items:flex-start;counter-increment:s}
.step::before{
  content:counter(s);flex:none;width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:.86rem
}
.step b{display:block;margin-bottom:3px}
.step p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.58}

.ulist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ulist li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;line-height:1.58;color:var(--ink-2)}
.ulist li svg{flex:none;margin-top:4px}

.srcs{font-size:.83rem;color:var(--ink-2);line-height:1.68}
.srcs li{margin-bottom:7px}

/* ── hyperlinked sources ──────────────────────────────────────
   Tier is carried on a left border rather than as a coloured badge, so the
   hierarchy reads at a glance without adding another colour to the page. */
.src-intro{font-size:.82rem;color:var(--ink-2);line-height:1.62;max-width:62ch;margin:0 0 18px}
.srcs-linked{list-style:none;padding:0;margin:0}
.srcs-linked li.src{margin:0 0 15px;padding:0 0 0 15px;border-left:2px solid var(--hair-strong)}
.src-t1{border-left-color:var(--good)}
.src-t2{border-left-color:var(--brand-2)}
.src-t3{border-left-color:var(--muted)}
.src-t4{border-left-color:var(--hair-strong)}
a.src-t{
  font-size:.88rem;font-weight:600;line-height:1.45;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:var(--hair-strong)
}
a.src-t:hover{text-decoration-color:currentColor}
.src-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:5px;font-size:.72rem;line-height:1.4}
.src-tag{
  display:inline-block;padding:1px 7px;border-radius:3px;
  background:var(--surface-sunk);color:var(--ink-2);
  font-size:.68rem;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums
}
.src-t1 .src-tier{background:var(--good-soft);color:var(--good)}
.src-pub{color:var(--muted)}
a.src-arch{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
a.src-arch:hover{color:var(--ink-2)}
.src-note{margin:6px 0 0;font-size:.79rem;line-height:1.62;color:var(--ink-2);max-width:68ch}
.src-gap{
  margin:6px 0 0;padding:7px 10px;border-radius:var(--r-sm);
  background:var(--warning-soft);border-left:2px solid var(--warning);
  font-size:.76rem;line-height:1.55;color:var(--ink-2);max-width:68ch
}
.src-legacy{color:var(--critical)}
@media(max-width:560px){.src-meta{gap:6px}.srcs-linked li.src{padding-left:12px}}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ticker-track{animation:none}
  *{scroll-behavior:auto !important}
}

.tt{
  position:fixed;z-index:120;pointer-events:none;background:var(--deep-2);color:var(--on-deep);
  padding:9px 12px;border-radius:9px;font-size:.79rem;line-height:1.45;box-shadow:var(--sh-3);
  opacity:0;transition:opacity .12s;max-width:250px
}
html[data-theme="dark"] .tt{background:#2a2d34;border:1px solid var(--hair)}
.tt.show{opacity:1}
.tt b{display:block;font-size:.83rem;margin-bottom:2px}
.tt i{font-style:normal;color:var(--on-deep-3)}

/* ── Lookup ──────────────────────────────────────────────── */
.lookup{margin:26px 0 0}
.lookup-bar{
  display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--hair);box-shadow:var(--sh-2);
  transition:border-color .16s,box-shadow .16s
}
.lookup-bar:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent),var(--sh-2)}
.lookup-ic{color:var(--muted);flex:none;display:grid;place-items:center}
.lookup-bar input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:1rem;
  padding:9px 0;color:var(--ink)
}
.lookup-bar input::placeholder{color:var(--muted)}
.lookup-bar .btn{flex:none}
.lookup-sug{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px;font-size:.82rem;color:var(--muted)}
.lookup-sug button{
  background:transparent;border:1px solid var(--hair-strong);border-radius:999px;padding:4px 12px;
  font-size:.79rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .14s
}
.lookup-sug button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}

.lookup-dark .lookup-bar{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);backdrop-filter:blur(12px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.lookup-dark .lookup-bar:focus-within{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.lookup-dark .lookup-bar input{color:#fff}
.lookup-dark .lookup-bar input::placeholder{color:rgba(255,255,255,.55)}
.lookup-dark .lookup-ic{color:rgba(255,255,255,.6)}
.lookup-dark .lookup-sug{color:var(--on-deep-3)}
.lookup-dark .lookup-sug button{border-color:rgba(255,255,255,.22);color:var(--on-deep-2)}
.lookup-dark .lookup-sug button:hover{border-color:#fff;color:#fff;background:var(--deep-fill-2)}

.lookup-out{margin-top:16px}
.lk-card{
  background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:var(--sh-2);animation:lkIn .3s cubic-bezier(.2,.7,.3,1)
}
.lookup-out{color:var(--ink)}
@keyframes lkIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lk-hit{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lk-badge{flex:none}
.lk-txt{flex:1;min-width:200px}
.lk-kicker{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px}
.lk-txt b{display:block;font-size:1.05rem;letter-spacing:-.015em;margin-bottom:3px}
.lk-txt span{display:block;font-size:.86rem;color:var(--ink-2);line-height:1.55}
/* Removed 7 Sep 2026 with the simulated lookup: .lk-run-head, .lk-pct,
   .spinner, @keyframes spin, .lk-steps, .dotc and .lk-done. Every one of them
   existed only to dress a progress bar that measured nothing. .lk-prog stays -
   lookupWatch uses it to show a real queue position. */
.lk-prog{height:5px;border-radius:99px;background:var(--surface-sunk);overflow:hidden;margin-bottom:16px}
.lk-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .26s linear}

/* ── Capture card ────────────────────────────────────────── */
.lk-capture{margin-top:10px}
.lk-capture .lk-txt{margin-bottom:14px}
.cap-form{display:flex;gap:8px;flex-wrap:wrap}
.cap-form input[type=email]{
  flex:1;min-width:220px;padding:11px 13px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--hair);color:var(--ink);font:inherit
}
.cap-form input[type=email]::placeholder{color:var(--muted)}
.cap-form input[type=email]:focus{border-color:var(--brand);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.cap-form button[disabled]{opacity:.6;cursor:progress}
/* The honeypot. Not display:none - some bots skip hidden fields, and some
   screen readers would announce a visually-hidden one, so it is pushed out of
   the layout and taken out of the a11y tree with aria-hidden in the markup. */
.cap-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cap-msg{margin:12px 0 0;font-size:.88rem;line-height:1.5}
.cap-msg.ok{color:var(--good)}
.cap-msg.err{color:var(--critical)}


/* ── Queue ───────────────────────────────────────────────── */
.queue{margin-top:26px;color:var(--ink)}
.queue-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.queue-head h3{font-size:1.25rem}
.queue-grid{display:grid;gap:10px}
.qcard{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:14px 16px}
.qcard-top{display:flex;gap:11px;align-items:center;margin-bottom:11px}
.qmark{
  width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--surface-sunk);color:var(--ink-2);font-size:.75rem;font-weight:800;letter-spacing:.02em
}
.qcard-top b{display:block;font-size:.93rem;letter-spacing:-.012em}
.qcard-top span{display:block;font-size:.76rem;color:var(--muted)}
.qcard-top > div:nth-child(2){flex:1;min-width:0}
.qnew{
  flex:none;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--brand-soft);color:var(--brand);padding:3px 9px;border-radius:6px
}
.qbar{height:4px;border-radius:99px;background:var(--surface-sunk);overflow:hidden}
.qbar i{display:block;height:100%;border-radius:99px;background:var(--brand);opacity:.75}
.qfoot{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:7px;font-weight:600}

@media(max-width:640px){
  .lookup-bar{flex-wrap:wrap;border-radius:var(--r-lg);padding:12px}
  .lookup-bar input{width:100%;flex:1 1 100%;padding:4px 4px 10px}
  .lookup-bar .btn{width:100%}
  .lookup-ic{display:none}
}

/* keep the money panel in view while the narrative runs long */
@media(min-width:901px){
  #what .grid2 > div:last-child{position:sticky;top:122px}
}

/* ── Watchlist / tiers ───────────────────────────────────── */
.tierpill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:7px;white-space:nowrap;
  font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase
}
.tierpill.sm{padding:3px 8px;font-size:.64rem}
.tierpill.t1{background:var(--critical-soft);color:var(--critical)}
.tierpill.t2{background:var(--serious-soft);color:var(--serious)}
.tierpill.t3{background:var(--warning-soft);color:var(--warning)}
.tierpill.t4{background:var(--surface-sunk);color:var(--muted)}
.wl-pub{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.82rem;color:var(--brand)}
.wl-pub:hover{text-decoration:underline}
#wlTable tbody td{vertical-align:middle}
.qhead-sp{flex:1}
.lk-watch-top{display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}
.lk-rankbadge{
  flex:none;width:58px;height:58px;border-radius:14px;display:grid;place-items:center;align-content:center;
  background:var(--brand-soft);color:var(--brand);line-height:1
}
.lk-rankbadge b{font-family:var(--serif);font-size:1.3rem;letter-spacing:-.03em}
.lk-rankbadge span{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-top:3px}
.lk-watch-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.lk-watch-grid{grid-template-columns:1fr}}
.lk-watch-grid b{
  display:block;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px
}
.lk-watch-grid span{font-size:.87rem;line-height:1.55;color:var(--ink-2)}

/* ── comparison form ────────────────────────────────────── */
.cmpf{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--sh-1)
}
.cmpf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cmpf-field{display:block;min-width:0}
.cmpf-field>span{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px
}
.cmpf-field select{
  width:100%;padding:11px 13px;font:inherit;font-size:.93rem;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--hair-strong);
  border-radius:var(--r-sm);cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px
}
.cmpf-field select:focus{outline:2px solid var(--brand);outline-offset:1px}
.cmpf-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px}
@media(max-width:760px){
  .cmpf-row{grid-template-columns:1fr}
  .cmpf{padding:18px}
}

/* ── dimension cell in the comparison matrix ────────────── */
.dimcell{display:flex;align-items:center;gap:9px;justify-content:center;cursor:help}
.dimcell .dimbar{
  display:block;flex:1;max-width:86px;height:7px;border-radius:4px;
  background:var(--surface-2);border:1px solid var(--hair);overflow:hidden
}
.dimcell .dimbar>i{display:block;height:100%;border-radius:4px}
.dimcell>b{font-variant-numeric:tabular-nums;font-size:.86rem;min-width:26px;text-align:right}

/* ============================================================
   Standalone report pages — related-report cards and the FAQ
   accordion. Previously injected by build_pages.js as EXTRA_CSS;
   folded in here so every page in the site links ONE stylesheet.
   ============================================================ */
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.relcard{display:flex;gap:13px;align-items:center;padding:15px 17px;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r);text-decoration:none;color:inherit;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.relcard:hover{transform:translateY(-3px);border-color:var(--hair-strong);box-shadow:var(--sh-2)}
.relt{min-width:0}
.relt b{display:block;font-size:.98rem;letter-spacing:-.012em}
.relt span{display:block;font-size:.82rem;color:var(--ink-2);line-height:1.45;margin-top:2px}
.faq details{border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--surface);margin-bottom:9px;overflow:hidden}
.faq summary{padding:15px 18px;cursor:pointer;list-style:none;font-weight:650;font-size:1rem;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface-2)}
.faq summary .q{color:var(--brand);font-weight:800;flex:none}
.faq .a{padding:0 18px 17px 44px;font-size:.94rem;color:var(--ink-2);line-height:1.65}

/* The no-JS / pre-hydration fallback list inside <main id="app">. It is real
   markup a crawler reads; once the app boots it is replaced. Keep it legible
   rather than invisible — a reader with JS off still gets the whole index. */
#app > .boot-fallback{max-width:var(--wrap);margin:0 auto;padding:48px 24px}
#app > .boot-fallback ul{line-height:1.9}

/* ── THE MONEY CALL ──────────────────────────────────────────────────────────
   The first section of every report, and the only one written to be read
   standing up. Deliberately plainer than the visualisations below it: a reader
   mid-decision does not need a chart, they need a sentence. */
.mcall{padding-top:34px;padding-bottom:10px}
.mcall-q{font-size:clamp(1.5rem,3.2vw,2.15rem);margin:6px 0 20px;max-width:24ch}
.mcall-box{border:1px solid var(--hair);border-left-width:5px;border-radius:14px;padding:22px 24px;background:var(--surface)}
.mcall-box.crit{border-left-color:var(--critical);background:var(--critical-soft)}
.mcall-box.warn{border-left-color:var(--warning);background:var(--warning-soft)}
.mcall-box.good{border-left-color:var(--good);background:var(--good-soft)}
.mcall-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:13px}
.mcall-head b{font-family:var(--serif);font-size:1.12rem;letter-spacing:-.01em}
.mcall-pill{font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;white-space:nowrap}
.mcall-pill.good{background:var(--good);color:var(--on-grade)}
.mcall-pill.caution{background:var(--warning);color:var(--on-grade)}
.mcall-pill.bad{background:var(--critical);color:var(--on-grade)}
.mcall-body p{font-size:1.02rem;line-height:1.68;margin:0 0 13px;max-width:70ch}
.mcall-body p:last-child{margin-bottom:0}
.mcall-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px;margin-top:20px}
.mcall-cost,.mcall-ifs{border:1px solid var(--hair);border-radius:14px;padding:18px 20px;background:var(--surface)}
.mcall-cost b{display:block;font-family:var(--serif);font-size:1.55rem;letter-spacing:-.02em;margin:8px 0 7px}
.mcall-cost p{margin:0;font-size:.88rem;color:var(--ink-2);line-height:1.6}
.mcall-ifs ul{list-style:none;margin:11px 0 0;padding:0}
.mcall-ifs li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--hair);
  font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.mcall-ifs li:last-child{border-bottom:0;padding-bottom:0}
.mcall-ifs li svg{flex:none;margin-top:3px;color:var(--brand)}
.mcall-foot{margin:16px 0 0;max-width:78ch;line-height:1.6}
@media(max-width:820px){.mcall-grid{grid-template-columns:1fr}}