/* ==========================================================================
   AIRep - aireputation.app
   Tokens are Pixie's brand kit (crew-output/brand-kit.md), byte-identical to
   the SIGNAL tokens in backend/static/index.html. If one changes, both change.
   ========================================================================== */

/* Single self-hosted face. Display only; body runs on the system stack so
   nothing blocks first paint. swap = text is readable before the font lands. */
@font-face{
  font-family:"Space Grotesk";
  src:url("/assets/fonts/SpaceGrotesk-700.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;

  /* SIGNAL core */
  --void:#060A12; --surface:#0C1220; --surface-raised:#131C30;
  --hairline:#1E2A42; --hairline-bright:#2C3B5C;
  --ink:#EDF2FB; --ink-soft:#93A1BA; --ink-faint:#55627C;
  --signal:#3EE0FF; --rival:#FF5C7A; --violet:#A78BFA;
  --alarm:#FFB020; --control:#2EE6A8; --premium:#F2C14E;
  --chart-you:#0999C7; --chart-rival:#E23A66;
  --glow-signal:0 0 24px rgba(62,224,255,.35);

  /* Marketing-only additions */
  --site-bg:#080D18; --panel:#1A2540; --ink-body:#B6C2D9;
  --signal-hi:#7BE9FF; --signal-lo:#21C9EA;
  --on-signal:#04121C; --on-premium:#1A1204; --focus:#7BE9FF;
  --vignette:radial-gradient(1100px 500px at 50% -80px,#0E1730,transparent 60%);

  --band-invisible:#FF5C7A; --band-unranked:#FF9F45; --band-faint:#FFB020;
  --band-emerging:#3EE0FF; --band-strong:#2EE6A8; --band-dominant:#F2C14E;

  /* Semantic - components reference only these */
  --bg-page:var(--site-bg); --bg-hero:var(--void); --bg-card:var(--surface);
  --bg-card-hover:var(--surface-raised); --bg-elevated:var(--panel);
  --border:var(--hairline); --border-hover:var(--hairline-bright);
  --border-selected:var(--signal);
  --text-strong:var(--ink); --text-body:var(--ink-body);
  --text-muted:var(--ink-soft); --text-faint:var(--ink-faint);
  --link:var(--signal); --link-hover:var(--signal-hi);
  --cta-bg:var(--signal); --cta-bg-hover:var(--signal-hi);
  --cta-bg-active:var(--signal-lo); --cta-fg:var(--on-signal); --cta-glow:var(--glow-signal);
  --tier-recommended:var(--premium);
  --threat:var(--rival);

  --t-micro:.6875rem; --t-small:.8125rem; --t-caption:.9375rem; --t-body:1.0625rem;
  --t-lede:1.3125rem; --t-h3:1.6875rem; --t-h2:2.125rem;
  --t-hero:clamp(2.125rem,1.35rem + 3.6vw,3.75rem);
  --t-sect:clamp(1.6875rem,1.3rem + 1.9vw,2.625rem);
  --t-stat:clamp(2.625rem,1.8rem + 3.8vw,4.25rem);
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-6:1.5rem;--sp-8:2rem;
  --sp-12:3rem;--sp-16:4rem;--sp-24:6rem;
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-pill:999px;
  --container:1180px; --container-narrow:820px; --measure:66ch;
  --ease-snap:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
html,body{max-width:100%}
body{overflow-x:clip}  /* clip, NOT hidden: hidden makes body a scroll container and kills position:sticky */
body{margin:0;background:var(--bg-page);color:var(--text-body);
  font:var(--t-body)/1.65 var(--font-body);font-synthesis:none;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-synthesis:none}
h1{font-family:var(--font-display);font-weight:700;font-size:var(--t-hero);line-height:1.04;
   letter-spacing:-.035em;text-wrap:balance}
h2{font-family:var(--font-display);font-weight:700;font-size:var(--t-sect);line-height:1.12;
   letter-spacing:-.03em;text-wrap:balance}
h3{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);line-height:1.2;
   letter-spacing:-.02em;text-wrap:balance}
h4{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1.3;
   letter-spacing:-.01em}
p{margin:0 0 1em;max-width:var(--measure)}
ul{margin:0 0 1em;padding-left:1.15em}
li{margin:.35em 0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
strong,b{color:var(--text-strong);font-weight:700}
::selection{background:rgba(62,224,255,.22);color:var(--ink)}
::-webkit-scrollbar{height:8px;width:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--hairline-bright);border-radius:4px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;
  box-shadow:0 0 0 5px rgba(62,224,255,.20);border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--signal);
  color:var(--on-signal);padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6)}
.narrow{max-width:var(--container-narrow);margin-inline:auto}
.section{padding-block:clamp(3.5rem,7vw,7rem)}
.section--tight{padding-block:clamp(2.25rem,4vw,3.5rem)}
.micro{font-family:var(--font-body);font-weight:600;font-size:var(--t-micro);line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);display:block}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--text-body);max-width:34ch}
.sect-head{margin-bottom:var(--sp-8)}
.sect-head .micro{margin-bottom:var(--sp-3)}
.sect-head p{margin-top:var(--sp-4);font-size:var(--t-lede);line-height:1.5;max-width:46ch}
.stat{font-family:var(--font-display);font-weight:700;font-size:var(--t-stat);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.num{font-variant-numeric:tabular-nums}
.rule{border:0;border-top:1px solid var(--border);margin:0}

/* ---------- wordmark + mark ---------- */
.wordmark{font-family:var(--font-display);font-weight:700;font-synthesis:none;
  font-size:1.3125rem;letter-spacing:-.03em;line-height:1;color:var(--ink);white-space:nowrap}
.wordmark .rep{color:var(--signal)}
.lockup{display:inline-flex;align-items:center;gap:.625rem;color:var(--ink)}
.lockup:hover{color:var(--ink)}
.lockup svg{width:1.75em;height:1.75em;flex:none}
.lockup .wordmark .rep{color:var(--ink)} /* cyan appears once per lockup: it's on the mark */

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--cta-bg);color:var(--cta-fg);border:0;border-radius:var(--r-md);
  padding:.9375rem 1.75rem;font:700 var(--t-body)/1 var(--font-body);cursor:pointer;
  box-shadow:var(--cta-glow);text-align:center;min-height:44px;
  transition:background 120ms,transform 120ms,box-shadow 240ms}
.btn:hover{background:var(--cta-bg-hover);color:var(--cta-fg);box-shadow:0 0 32px rgba(62,224,255,.45)}
.btn:active{background:var(--cta-bg-active);transform:scale(.97)}
.btn--sm{padding:.6875rem 1.125rem;font-size:var(--t-caption)}
.btn--lg{padding:1.125rem 2.25rem;font-size:1.1875rem}
.btn--block{display:flex;width:100%}
.btn--ghost{background:transparent;color:var(--ink-soft);
  border:1px solid var(--hairline-bright);box-shadow:none}
.btn--ghost:hover{background:var(--surface-raised);color:var(--ink);box-shadow:none}
.linkarrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;
  font-size:var(--t-caption);color:var(--link)}
.linkarrow span{transition:transform 180ms var(--ease-snap)}
.linkarrow:hover span{transform:translateX(3px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;
  background:rgba(8,13,24,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color 240ms}
.hdr.stuck{border-bottom-color:var(--border)}
.hdr .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:64px;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6)}
.hdr nav{display:none;gap:var(--sp-6)}
.hdr nav a{color:var(--text-muted);font-size:var(--t-caption);font-weight:600}
.hdr nav a:hover{color:var(--ink)}
@media (min-width:900px){.hdr nav{display:flex}}
.hdr-actions{display:flex;align-items:center;gap:.5rem}
.mnav{position:relative}
@media (min-width:900px){.mnav{display:none}}
.mnav > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:0 .6875rem;border-radius:var(--r-md);
  border:1px solid var(--hairline-bright);color:var(--text-muted);
  font-size:var(--t-small);font-weight:600;white-space:nowrap}
.mnav > summary::-webkit-details-marker{display:none}
.mnav[open] > summary{color:var(--ink);border-color:var(--border-selected);
  background:var(--surface-raised);box-shadow:inset 0 0 0 1px rgba(62,224,255,.25)}
@media (max-width:399px){.mnav-word{display:none}.mnav > summary{padding:0 .8125rem}}
.mnav-bars{width:14px;height:10px;position:relative;display:block;flex:none}
.mnav-bars::before,.mnav-bars::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:currentColor;border-radius:1px}
.mnav-bars::before{top:0;box-shadow:0 4px 0 currentColor}
.mnav-bars::after{bottom:0}
.mnav-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:210px;
  display:flex;flex-direction:column;padding:.375rem;background:var(--surface);
  border:1px solid var(--border-hover);border-radius:var(--r-md);
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.mnav-panel a{display:flex;align-items:center;min-height:44px;padding:.5rem .875rem;
  border-radius:var(--r-sm);color:var(--ink);font-size:var(--t-caption);font-weight:600}
.mnav-panel a:hover{background:var(--surface-raised);color:var(--ink)}
/* the nav CTA has to survive a 360px viewport next to the lockup */
.cta-full{display:none}
@media (min-width:560px){.cta-full{display:inline}.cta-short{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--bg-hero) var(--vignette) no-repeat;
  border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background:repeating-radial-gradient(circle at 50% -4%,transparent 0 58px,var(--signal) 58px 59px)}
.hero-grid{position:relative;z-index:1;display:grid;gap:var(--sp-8);
  padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2.5rem,5vw,4rem)}
/* The hero breaks out of --container: the headline needs ~750px and the map
   needs ~520px, and both come out of the gutter rather than out of each other.
   Below 1200 it stacks, which is the render that already read best. */
@media (min-width:1280px){
  .hero-grid{max-width:1360px;
    grid-template-columns:minmax(0,1fr) minmax(0,520px);
    grid-template-areas:"a i" "b i";align-items:start;
    column-gap:2.5rem;row-gap:var(--sp-6)}
  .hero-copy-a{grid-area:a} .hero-copy-b{grid-area:b} .hero-instrument{grid-area:i}
  .hero-instrument .smap-body{padding:0}
}
.hero-instrument .smap-card{max-width:none}
@media (min-width:560px) and (max-width:1279px){
  .hero-instrument{width:100%;max-width:520px;margin-inline:auto}
}
.hero .eyebrow{color:var(--signal);margin-bottom:var(--sp-4)}
.hero h1{max-width:20ch}
.hero .sub{font-size:var(--t-lede);line-height:1.5;color:var(--text-body);
  max-width:46ch;margin:var(--sp-6) 0 var(--sp-8)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-6)}
.under-cta{margin-top:var(--sp-6);font-size:var(--t-caption);color:var(--text-muted);max-width:52ch}

/* ---------- the Sheridan trap ---------- */
.trap{background:var(--bg-hero);border-bottom:1px solid var(--border)}
.trap .box{border:1px solid var(--border);border-left:3px solid var(--threat);
  border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--surface);
  padding:clamp(1.25rem,3vw,2rem)}
.trap h2{margin:var(--sp-3) 0 var(--sp-4);max-width:22ch}
.trap .setup{font-size:var(--t-caption);color:var(--text-body);max-width:74ch}
.trap blockquote{margin:var(--sp-6) 0 var(--sp-4);padding:0}
.trap blockquote p{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1875rem,1rem + 1.1vw,1.75rem);line-height:1.35;
  letter-spacing:-.02em;color:var(--ink);max-width:30ch}
.trap cite{display:block;font-style:normal;font-size:var(--t-small);color:var(--text-muted);
  letter-spacing:.02em}
.trap .punch{margin:var(--sp-6) 0 0;font-size:var(--t-caption);color:var(--text-body);max-width:70ch}
.trap .punch b{color:var(--signal)}

/* ---------- proof block / source map ---------- */
.smap-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);max-width:900px;margin-inline:auto;overflow:hidden}
.smap-top{padding:var(--sp-6) var(--sp-6) var(--sp-4)}
.smap-top .micro{color:var(--text-muted)}
.smap-q{margin-top:var(--sp-3);display:inline-block;font-family:var(--font-body);
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.4375rem .9375rem;color:var(--ink);font-size:var(--t-caption)}
.smap-q::before{content:"“";color:var(--text-faint)}
.smap-q::after{content:"”";color:var(--text-faint)}
.smap-body{padding:0 var(--sp-3)}
@media(min-width:600px){.smap-body{padding:0 var(--sp-6)}}
.smap{display:block;width:100%;max-width:660px;margin-inline:auto}
.smap text{font-family:var(--font-body)}
/* step the diagram's type so the payoff line is readable, not effortful */
.smap .nd-dom{font-size:18px}
.smap .nd-sub{font-size:13.5px}
.smap .nd-note{font-size:13.5px;font-weight:600}
.smap .orb-name{font-size:12.5px}
.smap .orb-mono{font-size:14px}
.smap .col-head{font-size:12px}
@media (max-width:700px){
  /* read-counts are tertiary and repeated in the ladder - drop them rather than
     render them under the 11px floor, and give the payoff line the room */
  .smap .nd-sub{display:none}
  .smap .nd-note{font-size:16px;transform:translateY(-15px)}
  .smap .orb-name{font-size:16px}
  .smap .orb-mono{font-size:16px}
  .smap .col-head{font-size:16px}
}
.smap-legend{display:flex;flex-wrap:wrap;gap:.375rem .875rem;list-style:none;
  margin:0;padding:.75rem var(--sp-6) 0}
.smap-legend li{display:flex;align-items:center;gap:.4375rem;white-space:nowrap;
  font-size:var(--t-micro);color:var(--text-muted)}
/* teaching size: this is the reader's first encounter with the vocabulary.
   32px rather than the spec's 36-40 because this legend lives inside the hero
   card, which is already the tallest object above the fold. */
.smap-legend .cg{width:32px;height:32px}
/* the duel, from the sample: you against the one they actually name */
.smap-duel{padding:var(--sp-4) var(--sp-6) var(--sp-6);border-top:1px solid var(--border)}
.duel{height:24px;border-radius:var(--r-pill);background:var(--surface-raised);
  overflow:hidden;display:flex;margin:.625rem 0 .5rem}
.duel-you{width:3px;flex:none;background:var(--signal);box-shadow:var(--glow-signal)}
.duel-gap{flex:1}
.duel-rival{width:79%;flex:none;background:var(--chart-rival)}
.duel-labels{display:flex;justify-content:space-between;gap:.75rem;font-size:var(--t-small)}
.duel-labels .l{color:var(--signal)} .duel-labels .r{color:var(--threat)}
.duel-labels b{font-variant-numeric:tabular-nums}
.duel-labels .l b{color:var(--signal)} .duel-labels .r b{color:var(--threat)}

/* the verdict band - the most quotable fact on the site, set like one */
.verdict-band{background:var(--bg-hero);border-bottom:1px solid var(--border)}
.verdict-band h2{max-width:26ch}
.statband{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4) var(--sp-6);margin:var(--sp-8) 0;max-width:900px}
.statband > div{border-top:2px solid var(--hairline-bright);padding-top:var(--sp-4)}
.statband .stat{display:block}
.statband .stat.zero{color:var(--threat)}
.statband .micro{margin-top:.5rem;max-width:20ch}
.proof-note{margin:var(--sp-8) 0 0;max-width:900px}

/* D7 - THE PIPELINE. Multiplication drawn as a fan-out, reusing the Source Map's
   own cubic so the rhyme is visible. Labelled VERDICT SCAN because these are the
   12x3 numbers, not the sample's 19x4. */
.pipe{margin:0 0 var(--sp-8);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:clamp(1.125rem,2.5vw,1.5rem)}
.pipe-tier{margin-bottom:var(--sp-4);color:var(--signal)}
.pipe-flow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;list-style:none;margin:0;padding:0}
.pstage{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.pstage b{font-family:var(--font-display);font-weight:700;font-size:1.75rem;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.pstage span{font-size:var(--t-micro);color:var(--text-muted);white-space:nowrap}
.pstage.is-out b{color:var(--signal)}
.pc{flex:none;display:flex;flex-direction:column;align-items:center;gap:.125rem}
.pc-arrow{width:26px;height:2px;border-radius:1px;background:var(--ink-faint);margin-bottom:1.1rem}
.pc-fan svg{width:40px;height:40px;display:block}
.pc-fan g{stroke:var(--signal)}
.pc-fan em{font-style:normal;font-size:var(--t-micro);color:var(--text-muted);white-space:nowrap}
@media (max-width:760px){
  .pipe-flow{flex-direction:column;align-items:flex-start;gap:.5rem}
  .pc{flex-direction:row;align-items:center;gap:.5rem;margin-left:.5rem}
  .pc-arrow{width:2px;height:18px;margin:0 0 0 1.1rem}
  .pc-fan svg{transform:rotate(90deg)}
}

/* D10 - THE THREE QUIETS, and D6 - THE COLD ASK. One drawing vocabulary:
   circle = assistant, small circle = a page, arrow = the answer travelling. */
.quiet{display:block;width:104px;height:80px;margin-bottom:var(--sp-4)}
.quiet *{vector-effect:non-scaling-stroke}
.quiet > g{stroke:var(--ink-faint)}
.quiet-dim .acc{stroke:var(--ink-soft)}
.quiet-threat .acc{stroke:var(--threat)}

/* Unread Assets: what you own on the left, what any assistant opened on the right,
   and a connector that never lands. */
.utally{display:block;width:100%;max-width:230px;margin:0 0 .625rem}
.utally .ut-have{fill:var(--control)}
.utally .ut-break{stroke:var(--ink-faint)}
.utally .ut-none{stroke:var(--alarm)}

/* D8's replacement: the three doors in the order to open them. Sized by leverage,
   sequenced by ordinal. No axis and no dates - order is defensible, a timetable is not. */
.doors{margin:0 0 var(--sp-6);background:var(--void);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-4)}
.doors > .micro{margin-bottom:var(--sp-4)}
.doors-row{display:grid;gap:var(--sp-6);list-style:none;margin:0;padding:0}
@media (min-width:640px){.doors-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}}
.doors-row li{display:flex;flex-direction:column;gap:.375rem;min-width:0}
.ord{font-family:var(--font-display);font-weight:700;font-size:var(--t-caption);
  color:var(--signal);letter-spacing:.04em}
.dstack{display:flex;align-items:flex-end;gap:4px;height:84px}
.dstack i{display:block;width:22px;border-radius:3px 3px 0 0;background:var(--signal);
  height:calc(var(--lev,0) * 1.1px)}
.doors-row b{font-size:var(--t-small);color:var(--ink);overflow-wrap:break-word}
.doors-row em{font-style:normal;font-size:var(--t-micro);letter-spacing:.06em;color:var(--text-muted)}
.doors-note{margin:var(--sp-4) 0 0;font-size:var(--t-small);color:var(--text-body);max-width:66ch}

/* D9 - THE COVERAGE GRID. Same viewBox and same rendered width in both tiers, so
   what $14 buys is an area you can see rather than a bullet you must read. */
.cgrid{display:block;width:100%;max-width:300px;margin:0 0 .875rem}
.cgrid .cg-base{fill:var(--signal);opacity:.55}
.cgrid .cg-new{fill:var(--signal);opacity:1}
/* Campaign is repetition, not volume: the same grid, drawn three times. Selling it
   on answer count would use the one axis the measurements showed is exhausted. */
.cgrid-x3 .cg-ghost{fill:none}
.cgrid-x3 .cg-ghost:first-of-type{stroke:var(--hairline)}
.cgrid-x3 .cg-ghost:nth-of-type(2){stroke:var(--hairline-bright)}
.conf{margin:0 0 var(--sp-6)}
.conf > .micro{margin-bottom:.5rem}
.conf-row{display:grid;grid-template-columns:5.5rem minmax(0,1fr) 2.75rem;
  gap:.5rem;align-items:center;margin:.375rem 0}
.conf-lab{font-size:var(--t-micro);color:var(--text-muted)}
.conf-bar{height:8px;border-radius:4px;background:var(--surface-raised);overflow:hidden}
.conf-bar i{display:block;height:100%;width:var(--w,0);background:var(--ink-faint);border-radius:4px}
.conf-row.is-tight .conf-bar i{background:var(--signal)}
.conf-v{font-size:var(--t-small);font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text-muted);text-align:right}
.conf-row.is-tight .conf-v{color:var(--signal)}
.conf-note{margin:.625rem 0 0;font-size:var(--t-micro);line-height:1.6;color:var(--text-muted)}
.buyline{max-width:74ch;margin:var(--sp-6) 0 0;font-size:var(--t-small);color:var(--text-body)}


/* D11 - THE TWO ANSWERS. The trap card measured 1064px wide with a 621px widest
   child: 41-53% of a visibly bordered card unpainted. This is its right column.
   viewBox is 340 wide ON PURPOSE: at a 390px phone the container inner width is
   ~342px, so 1 user unit is ~1 CSS px and SVG type renders at its stated size. The
   "labels go in HTML, an 11px SVG label renders at 4.8px" rule was written for the
   806-wide Reading Field at 0.42 scale and does NOT apply here. Do not "fix" it by
   moving these labels into HTML. */
@media (min-width:980px){
  .trap .box{display:grid;grid-template-columns:minmax(0,1fr) 340px;
    gap:var(--sp-12);align-items:start}
}
.trap-copy > :last-child{margin-bottom:0}
.twoans-fig{margin:var(--sp-8) 0 0}
@media (min-width:980px){.twoans-fig{margin:0}}
.twoans{display:block;width:100%;max-width:340px}
.twoans text{font-family:var(--font-body)}
.twoans .ta-lab{font-size:11px;font-weight:600;letter-spacing:.8px;fill:var(--text-muted)}
.twoans .ta-rank{font-size:12px;font-weight:700;fill:var(--text-muted)}
.twoans .ta-pt{font-size:13px;fill:var(--text-muted)}
.twoans .ta-yout{fill:var(--signal);font-weight:700}
.twoans .ta-gapt{font-size:13px;font-weight:700;fill:var(--alarm)}
.twoans .ta-panel{stroke:var(--hairline)}
.twoans .ta-pill{stroke:var(--ink-faint)}
.twoans .ta-you{stroke:var(--signal)}
.twoans .ta-leave{stroke:var(--signal)}
.twoans .ta-break,.twoans .ta-ghost{stroke:var(--ink-faint)}
.twoans .ta-gap{stroke:var(--alarm)}
.js .twoans .ta-leave{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 420ms var(--ease-snap)}
.js .twoans.drawn .ta-leave{stroke-dashoffset:0}
.js .twoans .ta-ghost,.js .twoans .ta-gap,.js .twoans .ta-gapt{opacity:0;
  transition:opacity 320ms ease 460ms}
.js .twoans.drawn .ta-ghost,.js .twoans.drawn .ta-gap,.js .twoans.drawn .ta-gapt{opacity:1}
.twoans-fig figcaption{margin-top:.75rem;font-size:var(--t-micro);line-height:1.6;
  color:var(--text-muted);max-width:44ch}
.flagchip{display:inline-block;margin-right:.375rem;padding:.0625rem .4375rem;
  border-radius:var(--r-pill);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,176,32,.14);color:var(--alarm);border:1px solid rgba(255,176,32,.35)}

/* D12 - THE FOUR SECONDS. #problem left 504px, 45% of the row, void beside three
   consecutive paragraphs. This is its right column, and the teaching appearance of
   the category glyph set at 36px before the ladder uses it at 28px. */
@media (min-width:980px){
  .prob-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;
    gap:var(--sp-12);align-items:start}
}
.prob-copy > p:last-child{margin-bottom:0}
.foursec{margin:var(--sp-8) 0 0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-6);max-width:340px}
@media (min-width:980px){.foursec{margin:0}}
.fs-bracket{display:grid;grid-template-columns:10px auto minmax(0,1fr);gap:.75rem;align-items:stretch}
.fs-brline{border:2px solid var(--ink-faint);border-right:0;border-radius:5px 0 0 5px}
.fs-brlabel{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;
  align-self:center;font:600 var(--t-micro)/1 var(--font-body);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted)}
.fs-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.fs-steps > li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.625rem;align-items:start}
.fs-n{width:20px;height:20px;border-radius:50%;background:var(--surface-raised);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font:700 var(--t-micro)/1 var(--font-display);color:var(--text-muted)}
.fs-steps b{display:block;font-size:var(--t-small);color:var(--ink);font-weight:700}
.fs-q{display:inline-block;margin-top:.375rem;background:var(--surface-raised);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:.1875rem .625rem;
  font-size:var(--t-micro);color:var(--text-body)}
.fs-glyphs{list-style:none;margin:.5rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem .5rem}
.fs-glyphs li{display:flex;flex-direction:column;gap:.25rem;
  font-size:var(--t-micro);color:var(--text-muted)}
.fs-glyphs .cg{width:36px;height:36px}
.fs-rule{border:0;border-top:1px solid var(--border);margin:var(--sp-6) 0}
.fs-see .micro{margin-bottom:.5rem}
.fs-nothing{border:1.6px dashed var(--alarm);border-radius:var(--r-sm);
  padding:.875rem;text-align:center;font-family:var(--font-display);font-weight:700;
  font-size:1.25rem;color:var(--alarm);background:rgba(255,176,32,.05)}

/* D5 - THE SCORE CAP. 7.2px per point; the viewBox IS the 0-100 scale, so the
   emptiness to the right is the 72.6 points that were never in play. */
.cap-fig{margin-top:var(--sp-6)}
.cap-fig > .micro{margin-bottom:var(--sp-3)}
.cap-bar{position:relative;max-width:760px}
.capbar{display:block;width:100%}
.capbar .cap-track{fill:var(--surface-raised)}
.capbar .cap-s2{fill:var(--signal-lo)} .capbar .cap-s3{fill:var(--signal)}
.capbar .cap-s4{fill:var(--signal-hi)}
.capbar .cap-line{stroke:var(--band-unranked)}
.capbar .cap-hatchline{stroke:var(--band-unranked)}
.js .capbar .cap-seg{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;
  transition:transform 520ms var(--ease-snap);transition-delay:calc(var(--i,0)*110ms)}
.js .capbar.drawn .cap-seg{transform:none}
.js .capbar .cap-refused,.js .capbar .cap-line{opacity:0;transition:opacity 320ms ease 620ms}
.js .capbar.drawn .cap-refused,.js .capbar.drawn .cap-line{opacity:1}
/* the flag sits over the cap line at 19 points: (8 + 19*7.2) / 760 = 19.08% */
.cap-flag{position:absolute;left:19.08%;top:78%;transform:translateX(-2px);
  white-space:nowrap;font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--band-unranked)}
.cap-flag b{font-size:var(--t-caption);font-variant-numeric:tabular-nums}
.cap-key{display:flex;flex-wrap:wrap;gap:.375rem .875rem;list-style:none;
  margin:2.25rem 0 0;padding:0}
.cap-key li{display:flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:var(--t-micro);color:var(--text-muted)}
.cap-key b{color:var(--ink);font-variant-numeric:tabular-nums}
.cap-key i{width:10px;height:10px;border-radius:2px;flex:none}
.ck-s2{background:var(--signal-lo)} .ck-s3{background:var(--signal)}
.ck-s4{background:var(--signal-hi)}
.ck-void{background:transparent;box-shadow:inset 0 0 0 1px var(--hairline-bright)}
.ck-hatch{background:repeating-linear-gradient(45deg,transparent 0 2px,var(--band-unranked) 2px 3.4px)}
.cap-caption{margin:.75rem 0 0;font-size:var(--t-small);color:var(--text-body);max-width:60ch}
/* the 0-100 bar leaves an 8.4-point refusal 24px wide on a phone, so phones get a
   0-40 variant and are told the scale is truncated */
.cap-narrow,.cap-flag-narrow,.cap-scalenote{display:none}
.cap-flag-narrow{left:46.05%}
.cap-scalenote{margin:2.25rem 0 0;font-size:var(--t-micro);color:var(--text-muted)}

/* D1 - THE READING FIELD. 71 tiles, one per website the five assistants opened.
   Geometry: tile 34x34 rx4, pitch 42, 19/row, origin (8,18).
   x(i)=8+(i%19)*42  y(i)=18+floor(i/19)*42  - regenerate at any count from that. */
.field-wrap{max-width:806px;margin-top:var(--sp-8)}
.field-wrap > .micro{margin-bottom:var(--sp-3)}
.field{display:block;width:100%;max-width:806px}
.field .f-door{fill:var(--signal)} .field .f-rival{fill:var(--threat)}
.field .f-own{fill:var(--premium)} .field .fld-brk{stroke:var(--signal)}
.js .field .fld-hot rect{opacity:0;transform:scale(.35);transform-box:fill-box;
  transform-origin:center;transition:opacity 240ms var(--ease-snap),transform 240ms var(--ease-snap);
  transition-delay:calc(var(--i,0)*70ms)}
.js .field.drawn .fld-hot rect{opacity:1;transform:none}
/* labels live in HTML - an 11px SVG label renders at 4.8px on a 390px phone */
.field-key,.field-names{display:flex;flex-wrap:wrap;gap:.375rem .875rem;
  list-style:none;margin:.75rem 0 0;padding:0}
.field-key li,.field-names li{display:flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:var(--t-micro);color:var(--text-muted)}
.field-names li{color:var(--text-body)}
.field-key b{color:var(--ink);font-variant-numeric:tabular-nums}
.field-key i,.field-names i{width:10px;height:10px;border-radius:2px;flex:none}
.fk-door{background:var(--signal)} .fk-rival{background:var(--threat)}
.fk-own{background:var(--premium)}
.fk-dim{background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--hairline-bright)}
.proof-note p{font-size:var(--t-caption);color:var(--text-body);max-width:72ch}
.proof-note .fine{font-size:var(--t-small);color:var(--text-muted);margin:0}


/* subscore + ladder rows stack rather than crush at phone width */



/* SVG colours: literal hex lives on the presentation attribute (WebKit-safe),
   these class rules re-assert the token so a token change still propagates. */
.smap .lnk{stroke:var(--signal)}
.smap .lnk.own{stroke:var(--premium)}
.smap .dot-dir{fill:var(--control)}
.smap .dot-com{fill:var(--violet)}
.smap .dot-lst{fill:var(--signal)}
.smap .dot-own{fill:var(--premium)}
.smap .ring-threat{stroke:var(--threat)}
.smap .orb-face{fill:var(--surface-raised)}
.gauge-track{stroke:var(--hairline)}
.gauge-fill{stroke:var(--band-unranked)}
.icon-alarm{stroke:var(--alarm)}

/* map animation - only hidden when JS can bring it back */
.js .smap .lnk{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 500ms var(--ease-snap);transition-delay:calc(var(--i,0)*55ms)}
.js .smap.drawn .lnk{stroke-dashoffset:0}
.js .smap .nd,.js .smap .orb{opacity:0;transition:opacity 320ms ease;transition-delay:calc(var(--i,0)*40ms)}
.js .smap.drawn .nd,.js .smap.drawn .orb{opacity:1}

/* ---------- the objection ---------- */
.objection .box{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem);
  display:grid;gap:var(--sp-6)}
@media(min-width:860px){.objection .box{grid-template-columns:1fr 1.15fr;gap:var(--sp-12)}}
.obj-q{margin-top:var(--sp-4);font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.125rem,1rem + .8vw,1.5rem);line-height:1.35;
  letter-spacing:-.015em;color:var(--ink);max-width:26ch}
.objection .answer p{font-size:var(--t-caption);max-width:60ch}
.objection .answer p:last-child{margin-bottom:0}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:var(--sp-4)}
@media(min-width:760px){.grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--2{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(1.125rem,2.5vw,1.75rem)}
.card h3{font-size:1.25rem;margin-bottom:var(--sp-3)}
.card p{font-size:var(--t-caption);margin-bottom:0}
.card .idx{font:700 .8125rem/1 var(--font-display);color:var(--signal);
  letter-spacing:.1em;display:block;margin-bottom:var(--sp-3)}
.card--threat{border-left:3px solid var(--threat)}
.coined{display:inline-block;background:rgba(255,159,69,.14);color:var(--band-unranked);
  border-radius:var(--r-pill);padding:.125rem .625rem;font-weight:700;
  font-size:.8125rem;letter-spacing:.08em}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:var(--sp-6)}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}}
.step{position:relative;padding-top:var(--sp-6);border-top:2px solid var(--hairline-bright)}
.step::before{counter-increment:step;content:"STEP " counter(step);position:absolute;top:-.75rem;
  left:0;background:var(--bg-page);padding-right:.75rem;font:600 var(--t-micro)/1 var(--font-body);
  letter-spacing:.1em;color:var(--signal)}
.step h3{font-size:1.25rem;margin-bottom:var(--sp-3)}
.step p{font-size:var(--t-caption)}
.step p:last-child{margin-bottom:0}

/* ---------- what you get ---------- */
.feat{display:grid;gap:var(--sp-4)}
@media(min-width:860px){.feat{grid-template-columns:repeat(2,1fr)}}
.feat article{background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:clamp(1.125rem,2.5vw,1.5rem);
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--sp-4);align-items:start}
@media (max-width:559px){.feat article{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}}
/* D2 - each plate is a miniature of the real object, never a symbol for it.
   56x56 box, 48x48 live, stroke 1.8, one accent per plate, no glow. */
/* THE SEVEN CATEGORY GLYPHS. One inline <symbol> sprite - <use href> inherits
   currentColor only from an inline sprite, never an external file. No third-party
   logo ships: an icon system restrokes and recolours by definition, which every one
   of those brand books forbids, and App Store 5.2.1 would tax it per submission. */
.cg{display:inline-block;flex:none;color:var(--ink-soft)}
.cg.c-review,.cg.c-directory{color:var(--control)}
.cg.c-community{color:var(--violet)}
.cg.c-roundup{color:var(--signal)}
.cg.c-video{color:var(--alarm)}
.cg.c-own{color:var(--premium)}
.cg.c-rival{color:var(--rival)}

.plate{display:block;width:72px;height:72px}
.plate *{vector-effect:non-scaling-stroke}
.plate > g{stroke:var(--ink-faint)}
.plate-signal .acc{stroke:var(--signal)}
.plate-alarm .acc{stroke:var(--alarm)}
.plate-control .acc{stroke:var(--control)}
.plate circle[fill="#93A1BA"]{fill:var(--ink-soft)}
.feat h3{font-size:1.0625rem;font-family:var(--font-body);font-weight:700;
  letter-spacing:0;margin-bottom:var(--sp-3);line-height:1.35}
.feat .key{color:var(--signal);font-family:var(--font-display);margin-right:.4rem}
.feat p{font-size:var(--t-caption);margin-bottom:0}
.feat .tier{display:inline-block;margin-left:.4rem;padding:.0625rem .5rem;border-radius:var(--r-pill);
  background:var(--surface-raised);border:1px solid var(--border);
  font:600 var(--t-micro)/1.6 var(--font-body);letter-spacing:.06em;color:var(--text-muted);
  text-transform:uppercase;vertical-align:middle}

/* ---------- assistant orbs ---------- */
.orbs{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.orb-chip{display:inline-flex;align-items:center;gap:.5rem;
  background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:.25rem .75rem .25rem .25rem;font-size:var(--t-small);
  color:var(--text-muted)}
.orb-chip i{min-width:26px;height:26px;padding:0 .25rem;border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--hue,var(--hairline-bright));display:flex;align-items:center;
  justify-content:center;font:700 .6875rem/1 var(--font-display);font-style:normal;color:var(--ink)}

/* ==========================================================================
   SAMPLE REPORT - the shipping report UI, rendered inline.
   Class names deliberately mirror backend/static/index.html.
   ========================================================================== */
.sample{background:var(--bg-hero);border-block:1px solid var(--border)}
.report{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  max-width:940px;margin-inline:auto}  /* no overflow:hidden - it would kill the sticky #rnav */
.report-chip{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--sp-4);
  padding:var(--sp-4) var(--sp-6);background:var(--surface-raised);
  border-bottom:1px solid var(--border);border-radius:var(--r-xl) var(--r-xl) 0 0}
.report-chip .tag{display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(62,224,255,.12);color:var(--signal);border-radius:var(--r-pill);
  padding:.1875rem .6875rem;font:700 var(--t-micro)/1.6 var(--font-body);letter-spacing:.08em}
.report-chip .who{font-size:var(--t-small);color:var(--text-muted)}
.report-chip .who b{color:var(--ink)}
.rnav-wrap{position:sticky;top:64px;z-index:30;display:flex;align-items:center;
  background:rgba(12,18,32,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);padding-right:.75rem}
/* the strip scrolls past the right edge - say so, and say how far */
.rnav-wrap::after{content:"";position:absolute;right:4.5rem;top:1px;bottom:1px;width:40px;
  pointer-events:none;background:linear-gradient(90deg,rgba(12,18,32,0),rgba(12,18,32,.97))}
.rnav-count{flex:none;margin-left:.75rem;font-variant-numeric:tabular-nums;font-size:var(--t-micro);
  font-weight:700;letter-spacing:.06em;color:var(--text-muted);white-space:nowrap}
#rnav{flex:1;min-width:0;display:flex;gap:.4375rem;overflow-x:auto;
  padding:.5rem var(--sp-6);margin:0;scrollbar-width:none}
#rnav::-webkit-scrollbar{display:none}
#rnav a{flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:.375rem .8125rem;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--void);color:var(--text-muted);
  font-size:var(--t-small);font-weight:600;white-space:nowrap}
#rnav a:hover{color:var(--ink);background:var(--surface-raised)}
#rnav a.hot{border-color:var(--border-selected);color:var(--signal);
  background:rgba(62,224,255,.12);box-shadow:inset 0 0 0 1px rgba(62,224,255,.25)}
.rbody{padding:var(--sp-6)}
@media(min-width:760px){.rbody{padding:var(--sp-8)}}
.rsec{padding-block:var(--sp-8);border-top:1px solid var(--border);scroll-margin-top:120px}
.rsec:first-child{padding-top:0;border-top:0}
.rsec > .micro{margin-bottom:var(--sp-4)}

/* billboard */
.billboard{background:var(--void);border:1px solid var(--hairline-bright);
  border-radius:var(--r-lg);padding:clamp(1.125rem,3vw,1.75rem)}
.billboard h3{font-size:clamp(1.25rem,1rem + 1.4vw,1.875rem);max-width:22ch;margin-bottom:var(--sp-4)}
.billboard .urlrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;
  font-size:var(--t-small)}
.billboard code{background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.25rem .5rem;color:var(--ink);
  font-size:.75rem;overflow-wrap:anywhere}
.lev-pill{display:inline-flex;align-items:baseline;gap:.3rem;background:rgba(62,224,255,.12);
  color:var(--signal);border-radius:var(--r-pill);padding:.125rem .625rem;font-weight:700}
.route{display:inline-block;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.125rem .625rem;font:700 var(--t-micro)/1.7 var(--font-body);letter-spacing:.08em;
  color:var(--text-muted);text-transform:uppercase;white-space:nowrap}
.route--dontpay{border-color:rgba(255,176,32,.5);color:var(--alarm);
  background:rgba(255,176,32,.09)}

/* score hero */
.hero-gauge{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center}
.gw{position:relative;width:172px;height:172px;flex:none}
.gw svg{transform:rotate(135deg)}
.gn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gn .n{font:700 4rem/1 var(--font-display);font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;color:var(--band-unranked);text-shadow:0 0 26px rgba(255,159,69,.38)}
.gn .of{font-size:var(--t-small);color:var(--text-muted)}
.band-chip{display:inline-block;padding:.25rem .875rem;border-radius:var(--r-pill);
  font:700 var(--t-small)/1.6 var(--font-body);letter-spacing:.12em;
  background:rgba(255,159,69,.14);color:var(--band-unranked)}
.hero-gauge .side{flex:1;min-width:min(100%,260px)}
.hero-gauge .side p{margin:var(--sp-4) 0 0;font-size:var(--t-caption)}
.subscores{margin-top:var(--sp-6);display:grid;gap:.625rem}
.field-row{display:flex;align-items:center;gap:.75rem;font-size:var(--t-small)}
.field-row .nm{width:9.5rem;flex:none;color:var(--text-body)}
.field-row .fb{flex:1;min-width:60px;height:12px;background:var(--surface-raised);
  border-radius:6px;overflow:hidden}
.field-row .fb i{display:block;height:100%;width:0;background:var(--chart-you);
  transition:width 700ms var(--ease-snap);transition-delay:calc(var(--i,0)*90ms)}
.drawn .field-row .fb i{width:var(--w,0%)}
.field-row .pc{width:4.5rem;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.field-row.you .nm,.field-row.you .pc{color:var(--signal)}
.field-row.you .fb i{background:var(--signal)}
.field-row.rival .fb i{background:var(--chart-rival)}
.honesty{margin-top:var(--sp-6);background:var(--surface-raised);border:1px solid var(--border);
  border-left:3px solid var(--band-unranked);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--sp-4) var(--sp-6)}
.honesty p{font-size:var(--t-caption);margin-bottom:0}
.sent-strip{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:var(--sp-6);
  padding:.75rem 1rem;background:var(--void);border:1px solid var(--border);border-radius:var(--r-md)}
.sent-strip .ss{font-weight:800;font-variant-numeric:tabular-nums;font-size:var(--t-caption)}
.sent-strip .ss.pos{color:var(--chart-you)}
.sent-strip .ss.neg{color:var(--chart-rival)}
.sent-strip .ss.neu{color:var(--text-muted)}
.sent-strip .ss-bar{flex:1;min-width:110px;height:8px;border-radius:4px;overflow:hidden;display:flex;gap:2px}
.sent-strip .ss-bar i{display:block}
.sent-strip .ss-bar i.p{background:var(--chart-you)}
.sent-strip .ss-bar i.n{background:var(--chart-rival)}
.sent-strip .ss-bar i.u{background:rgba(237,242,251,.14)}

/* briefing */
/* briefing: teaser visible, wall behind a disclosure */
.brief-tease{font-size:var(--t-caption);color:var(--text-body);max-width:64ch;margin-bottom:var(--sp-4)}
details.brief{background:var(--void);border:1px solid var(--border);border-radius:var(--r-md)}
details.brief[open]{border-color:var(--border-hover)}
details.brief > summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;
  gap:.25rem;padding:.875rem 1rem;min-height:44px;justify-content:center;
  color:var(--signal);font-weight:700;font-size:var(--t-caption)}
details.brief > summary::-webkit-details-marker{display:none}
.brief-meta{font-weight:400;font-size:var(--t-small);color:var(--text-muted)}
details.brief[open] > summary{border-bottom:1px solid var(--border);margin-bottom:var(--sp-4)}
.brief-body{padding:0 1rem 1rem}
.brief-p{background:var(--void);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-6);margin-bottom:var(--sp-4)}
.brief-p .micro{margin-bottom:var(--sp-3)}
.brief-p p{font-size:var(--t-caption);line-height:1.68}
.brief-p p:last-child{margin-bottom:0}
.brief-p code{background:var(--surface-raised);border-radius:4px;padding:.0625rem .3125rem;
  font-size:.78rem;color:var(--ink);overflow-wrap:anywhere}

/* retrieval profiles */
.rp-grid{display:grid;gap:var(--sp-4)}
@media(min-width:700px){.rp-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rp-grid{grid-template-columns:repeat(5,1fr)}}
.rp{background:var(--void);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4)}
.rp-h{display:flex;align-items:center;gap:.5625rem;margin-bottom:.625rem}
.rp-h .o{min-width:28px;height:28px;padding:0 .25rem;border-radius:var(--r-pill);background:var(--surface-raised);
  border:1.5px solid var(--hue,var(--hairline-bright));display:flex;align-items:center;
  justify-content:center;font:700 .6875rem/1 var(--font-display);color:var(--ink);flex:none}
.rp-n{font-weight:700;color:var(--ink);font-size:var(--t-caption)}
/* D4 - THE RETRIEVAL FINGERPRINT. Two objects per card, both on scales shared
   across all five, so the cards can finally be compared by eye. The comb is one
   mark per answer; a dashed mark is an answer given without reading anything. */
.rp-comb{display:block;width:100%;margin-bottom:.125rem}
.rp-comb .comb-look{fill:var(--signal)}
.rp-comb .comb-mem{stroke:var(--ink-soft)}
.rp-rate{display:block;width:100%}
.rp-rate .rate-track{fill:var(--surface-raised)}
.rp-rate .rate-fill{fill:var(--signal-lo)}
.js .rp-rate .rate-fill{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;
  transition:transform 560ms var(--ease-snap)}
.js .rp-rate.drawn .rate-fill{transform:none}
.rp-metric{font-size:var(--t-micro);color:var(--text-muted);margin:.375rem 0 .625rem;line-height:1.5}
.rp-metric b{color:var(--ink);font-variant-numeric:tabular-nums}
.rp .sig{font-size:var(--t-small);color:var(--text-body);margin:0;line-height:1.5}

/* leverage ladder */
/* D3 - THE LEVERAGE DIVERGENCE. Built in HTML, not SVG: it is ~90% type, and a
   13px SVG label renders at 6.5px on a 390px phone. The missing connector on the
   two divergent rungs is the whole diagram. */
.dvg{margin:0 0 var(--sp-6)}
.dvg-cap{font-size:var(--t-small);color:var(--text-body);max-width:66ch;margin-bottom:var(--sp-4)}
.dvg-cap b{color:var(--signal);letter-spacing:.06em}
.dvg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(5.5rem,auto) minmax(0,1fr);
  gap:.5rem .625rem;align-items:center;background:var(--void);
  border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4)}
.dvg-nm{font-size:var(--t-small);font-weight:700;color:var(--ink);text-align:center;
  overflow-wrap:anywhere;padding-bottom:.375rem;border-bottom:1px solid var(--border)}
.dvg-v{text-align:center;font-size:var(--t-caption);font-weight:700;color:var(--ink)}
.dvg-v.is-signal{color:var(--signal)} .dvg-v.is-control{color:var(--control)}
.dvg-v.is-alarm{color:var(--alarm)}
.dvg-mid{display:flex;flex-direction:column;align-items:center;gap:.125rem;min-width:0}
.dvg-mid em{font-style:normal;font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.dvg-mid i{display:block;width:100%;height:2px;border-radius:1px;background:var(--ink-faint)}
.dvg-mid.tied i{background:var(--ink-faint)}
/* .split carries NO connector element at all. The absence IS the diagram - do not
   give it a dashed rule or a break marker; the two missing lines are the answer to
   "why does one score 71 and the other 2". */
.dvg-mid.split{padding-top:.125rem}
.dvg-lev{display:flex;flex-direction:column;align-items:center;line-height:1}
.dvg-lev b{font-family:var(--font-display);font-weight:700;font-size:2rem;
  font-variant-numeric:tabular-nums;color:var(--signal)}
.dvg-lev span{font-size:var(--t-micro);letter-spacing:.08em;color:var(--text-muted);margin-top:.25rem}
.dvg-lev.is-spent b{color:var(--text-muted)}
.dvg-note{font-size:var(--t-small);color:var(--text-body);max-width:66ch;margin:.75rem 0 0}
.ladder-key{margin:0 0 var(--sp-4);padding:.75rem 1rem;background:var(--void);
  border:1px solid var(--border);border-radius:var(--r-md);
  display:grid;grid-template-columns:auto 1fr;gap:.4rem .875rem;align-items:baseline}
.ladder-key dt{font-weight:700;color:var(--signal);font-size:var(--t-micro);letter-spacing:.06em;
  display:flex;gap:.2rem;white-space:nowrap}
.ladder-key dt i{min-width:20px;height:20px;padding:0 .25rem;border-radius:var(--r-pill);
  background:var(--surface-raised);
  border:1px solid var(--border);font-style:normal;font-size:var(--t-micro);font-weight:700;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.ladder-key dd{margin:0;font-size:var(--t-small);color:var(--text-body)}
.ladder{display:grid;gap:.5rem}
/* THE ONE CHANGE - a shared LEV axis. 71 / 61 / 46 / 45 / 44 / 40 / 13 / 13 / 2 / 2
   was ten separate numerals in ten separate boxes, which is a bar chart someone
   un-drew. One 4px bar per row on a common 0-100 origin makes the descending
   staircase - the section's entire argument - visible in a single fixation. */
.src-int{position:relative;display:flex;align-items:flex-start;gap:.75rem;
  padding:.875rem .875rem 1.125rem;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--void)}
.src-int .levbar{position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--surface-raised);border-radius:0 0 var(--r-md) var(--r-md);overflow:hidden}
.src-int .levbar i{display:block;height:100%;width:calc(var(--lev,0)*1%);background:var(--signal)}
.src-int.own .levbar i{background:var(--premium)}
.src-int.dontpay .levbar i{background:var(--alarm)}
.js .src-int .levbar i{width:0;transition:width 620ms var(--ease-snap);
  transition-delay:calc(var(--r,0)*60ms)}
.js .ladder.drawn .levbar i{width:calc(var(--lev,0)*1%)}
.src-int.dontpay{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.04)}
.src-int.own{border-color:rgba(46,230,168,.28)}
.src-int .lev{width:2.75rem;flex:none;text-align:center}
.src-int .lev b{display:block;font:700 1.25rem/1 var(--font-display);color:var(--signal);
  font-variant-numeric:tabular-nums}
.src-int.dontpay .lev b{color:var(--text-faint)}
.src-int .lev span{font-size:var(--t-micro);letter-spacing:.06em;color:var(--text-muted)}
.src-int .mid{flex:1;min-width:0}
.src-int .dom{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-weight:700;color:var(--ink);font-size:var(--t-caption)}
/* The row used to spend 28px of glyph and 11px of category word saying WHAT KIND of
   site this is, and 15px saying WHICH ONE - it stated its category twice and its
   identity once, at the lowest weight of the three. Identity is now the head.
   No third-party logo: legal 2026-08-21, zero of nine platforms licence our use. */
.src-int .dom .cg{width:20px;height:20px;--cgsw:1.4}
.src-int .dom-brand{flex:0 1 auto;min-width:0;font-size:1.25rem;line-height:1.25;
  font-weight:700;color:var(--ink);overflow-wrap:break-word}
.src-int .dom-n{flex:1 1 100%;min-width:0;font-size:var(--t-small);font-weight:500;
  line-height:1.5;color:var(--text-muted);overflow-wrap:anywhere}
.src-int .tags{display:flex;gap:.3125rem;flex-wrap:wrap;margin-top:.375rem}
.src-int .note{margin:.5rem 0 0;font-size:var(--t-small);color:var(--text-body);max-width:64ch}
.src-int .who{display:flex;gap:.25rem;flex:none;flex-wrap:wrap;max-width:15rem}
.src-int .who i{height:22px;padding:0 .5rem;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--surface-raised);
  border:1px solid var(--border);font-style:normal;font-size:var(--t-micro);font-weight:700;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.tg{font:700 var(--t-micro)/1.7 var(--font-body);letter-spacing:.05em;text-transform:uppercase;
  padding:.125rem .5rem;border-radius:var(--r-pill);background:var(--surface-raised);
  color:var(--text-muted);white-space:nowrap}
/* The six source-CLASS chip variants are gone. R1 cut the icons because the chips
   pair colour with the word; that was right about redundancy and wrong about scan
   speed - an 11px uppercase word is not a scan target in ten near-identical rows.
   The 28px glyph plus its word at the row head does that job now. What survives here
   is presence, reach and risk, which are not classes. */
.tg.reach{background:rgba(62,224,255,.13);color:var(--signal)}
.tg.risk{background:rgba(255,92,122,.13);color:var(--rival)}
.tg.absent{background:rgba(255,176,32,.13);color:var(--alarm)}

/* unread assets */
.unread{background:var(--void);border:1px solid var(--border);border-left:3px solid var(--alarm);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-4) var(--sp-6);margin-bottom:var(--sp-4)}
.unread h4{display:flex;align-items:center;gap:.5rem;margin-bottom:.375rem}
.unread h4 .cg{width:28px;height:28px}
.unread .where{font-size:var(--t-small);color:var(--text-muted);margin-bottom:.5rem;overflow-wrap:anywhere}
.unread p{font-size:var(--t-small);margin-bottom:.5rem}
.unread .do{margin:.625rem 0 0;padding:.625rem .75rem;border-radius:var(--r-sm);
  background:rgba(46,230,168,.06);font-size:var(--t-small);color:var(--text-body)}
.unread .do b{color:var(--control)}

/* moves */
details.act{background:var(--void);border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:.5rem}
details.act > summary{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;
  cursor:pointer;list-style:none}
details.act > summary::-webkit-details-marker{display:none}
details.act > summary::after{content:"";width:8px;height:8px;flex:none;margin-left:auto;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg) translateY(-2px);transition:transform 240ms}
details.act[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
details.act[open]{border-color:var(--border-selected);box-shadow:inset 3px 0 0 var(--signal)}
details.act .nb{width:26px;height:26px;border-radius:var(--r-pill);background:rgba(62,224,255,.12);
  color:var(--signal);display:flex;align-items:center;justify-content:center;
  font:700 .75rem/1 var(--font-display);flex:none}
details.act .at{min-width:0}
details.act h4{font-size:var(--t-caption)}
details.act .meta{margin-top:.1875rem;font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted)}
.imp{display:inline-block;padding:.0625rem .5rem;border-radius:var(--r-pill);
  font:700 var(--t-micro)/1.7 var(--font-body);letter-spacing:.06em;
  background:rgba(62,224,255,.14);color:var(--signal)}
.act-body{border-top:1px solid var(--border);padding:.875rem 1rem}
.act-body p{font-size:var(--t-small);margin-bottom:.625rem}
.act-body p:last-child{margin-bottom:0}
.act-body .honest{border-left:2px solid var(--alarm);padding-left:.75rem;color:var(--text-body)}
.act-body .honest b{color:var(--alarm)}
.url-chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface-raised);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:.4375rem .625rem;
  margin:.375rem .375rem 0 0;font-size:var(--t-small);color:var(--ink);overflow-wrap:anywhere}
.vtag{font:700 var(--t-micro)/1.6 var(--font-body);letter-spacing:.08em;padding:.0625rem .4375rem;
  border-radius:4px;flex:none;background:rgba(62,224,255,.14);color:var(--signal)}

/* flags + quote */
.flag-card{background:var(--surface-raised);border-left:3px solid var(--alarm);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-4) var(--sp-6)}
.flag-card .fh{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.flag-card .fh .micro{color:var(--alarm);margin:0}
.flag-card p{font-size:var(--t-small);margin-bottom:.5rem}
.flag-card p:last-child{margin-bottom:0}
.ci-quote{border-left:3px solid var(--signal);background:rgba(62,224,255,.05);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:.75rem 1rem;margin-top:var(--sp-4)}
.ci-quote p{font-size:var(--t-caption);line-height:1.55;color:var(--ink);margin-bottom:.4rem}
.ci-quote .who{font:600 var(--t-micro)/1.6 var(--font-body);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted)}
.factstrip{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);
  padding:var(--sp-4) var(--sp-6);background:var(--surface-raised);
  border-top:1px solid var(--border);border-radius:0 0 var(--r-xl) var(--r-xl)}
.factstrip div{min-width:0}
.factstrip b{display:block;font:700 1.375rem/1.1 var(--font-display);color:var(--ink);
  font-variant-numeric:tabular-nums}
.factstrip span{font-size:var(--t-small);color:var(--text-muted)}

/* ---------- Campaign-only report sections ---------- */
/* confidence range */
.range-lede{font-size:var(--t-caption);color:var(--text-body);max-width:64ch;margin-bottom:var(--sp-6)}
.range-fig{background:var(--void);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-6);max-width:560px}
.range-fig > .micro{margin-bottom:var(--sp-3)}
.rangebar{display:block;width:100%;max-width:500px;margin:0 auto}
.rangebar .rb-track{fill:var(--surface-raised)}
.rangebar .rb-band{fill:var(--band-unranked);opacity:.24}
.rangebar .rb-tick{stroke:var(--band-unranked);opacity:.8}
.rangebar .rb-median{stroke:var(--band-unranked)}
/* draw-on: the band grows from its centre, the ticks and median fade in after it */
.js .rangebar .rb-band{transform:scaleX(0);transform-box:fill-box;transform-origin:center;
  transition:transform 520ms var(--ease-snap)}
.js .rangebar.drawn .rb-band{transform:none}
.js .rangebar .rb-tick,.js .rangebar .rb-median{opacity:0;transition:opacity 300ms ease 300ms}
.js .rangebar.drawn .rb-tick{opacity:.8}
.js .rangebar.drawn .rb-median{opacity:1}
.range-key{display:flex;flex-wrap:wrap;gap:.375rem .875rem;list-style:none;margin:var(--sp-4) 0 0;padding:0}
.range-key li{font-size:var(--t-micro);color:var(--text-muted);white-space:nowrap}
.range-key b{color:var(--band-unranked);font-family:var(--font-display);margin-right:.3rem;
  font-size:var(--t-caption)}
.range-scale{margin:var(--sp-3) 0 0;font-size:var(--t-micro);color:var(--text-muted)}
.range-note{margin:var(--sp-6) 0 0;font-size:var(--t-caption);color:var(--text-body);max-width:66ch}
/* confirmed rivals */
.confirm-lede{font-size:var(--t-caption);color:var(--text-body);max-width:66ch;margin-bottom:var(--sp-6)}
.confirm{display:grid;gap:var(--sp-4)}
.confirm-row{background:var(--void);border:1px solid var(--border);border-left:3px solid var(--rival);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-4) var(--sp-6)}
.confirm-row .cr-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .625rem;margin-bottom:.625rem}
.confirm-row .dom-brand{font-size:1.0625rem;font-weight:700;color:var(--ink)}
.confirm-row .cr-dom{font-size:var(--t-small);color:var(--text-muted);overflow-wrap:anywhere}
.confirm-row .field-row{margin:0}
.confirm-row .who{display:flex;gap:.25rem .375rem;flex-wrap:wrap;margin-top:.625rem}
.confirm-row .who i{height:22px;padding:0 .5rem;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--surface-raised);border:1px solid var(--border);font-style:normal;
  font-size:var(--t-micro);font-weight:600;display:flex;align-items:center;color:var(--text-muted)}
.confirm-row .who i b{color:var(--ink)}
/* per-rival app-depth detail: why it wins, the page it wins on, the beatable angle.
   Reuses the confirm-row / ci-quote vocabulary, no new component. */
.confirm-row .cr-why{margin:.75rem 0 0;font-size:var(--t-small);color:var(--text-body);max-width:66ch}
.confirm-row .cr-wins{margin:.5rem 0 0;font-size:var(--t-small);color:var(--text-body);max-width:66ch}
.confirm-row .cr-wins b{color:var(--signal);font-weight:700}
.confirm-row .cr-angle{margin:.625rem 0 0;padding:.5rem .75rem;font-size:var(--t-small);
  color:var(--text-body);background:rgba(62,224,255,.05);
  border-left:2px solid var(--signal);border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:66ch}
.confirm-row .cr-angle b{color:var(--signal)}
.confirm-note{margin:var(--sp-6) 0 0;font-size:var(--t-small);color:var(--text-body);max-width:66ch}
/* access check */
.access-lede{font-size:var(--t-caption);color:var(--text-body);max-width:66ch;margin-bottom:var(--sp-6)}
.access-lede code{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.0625rem .375rem;font-size:.78rem;color:var(--ink);overflow-wrap:anywhere}
.access-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
/* draw-on: the five crawler rows arrive in a short stagger, one after another */
.js .access-list .access-row{opacity:0;transform:translateY(8px);
  transition:opacity 360ms var(--ease-snap),transform 360ms var(--ease-snap);
  transition-delay:calc(var(--i,0)*70ms)}
.js .access-list.drawn .access-row{opacity:1;transform:none}
.access-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem var(--sp-4);background:var(--void);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.625rem var(--sp-4)}
.ac-stat{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-small);font-weight:700;
  font-variant-numeric:tabular-nums}
.ac-stat::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.ac-stat.ok{color:var(--control)} .ac-stat.ok::before{background:var(--control)}
.ac-stat.blocked{color:var(--alarm)} .ac-stat.blocked::before{background:var(--alarm)}
.access-note{margin-top:var(--sp-4);background:var(--surface-raised);border:1px solid var(--border);
  border-left:3px solid var(--control);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--sp-4) var(--sp-6)}
.access-note p{font-size:var(--t-small);margin-bottom:.5rem}
.access-note p:last-child{margin-bottom:0}
.access-note .fine{color:var(--text-muted)}

/* ---------- pricing ---------- */
.tiers{display:grid;gap:var(--sp-6);align-items:start}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* one column = the buyer sees one price and no sign a second tier exists,
   so the recommended tier goes first there */
@media(max-width:899px){.tier--rec{order:-1}}
.tier{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(1.25rem,3vw,2rem);display:flex;flex-direction:column;height:100%}
.tier--rec{border-color:var(--tier-recommended);background:var(--surface-raised);
  box-shadow:0 0 0 1px rgba(242,193,78,.18),0 18px 50px rgba(0,0,0,.35)}
.tier .badge{display:inline-block;align-self:flex-start;margin-bottom:var(--sp-4);
  border:1px solid var(--tier-recommended);color:var(--tier-recommended);
  background:rgba(242,193,78,.1);border-radius:var(--r-pill);padding:.1875rem .75rem;
  font:700 var(--t-micro)/1.7 var(--font-body);letter-spacing:.1em}
.tier .tname{font:600 var(--t-micro)/1.4 var(--font-body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.tier .price{display:flex;align-items:baseline;gap:.5rem;margin:.5rem 0 .25rem}
.tier .price b{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.25rem,1.8rem + 2vw,3.25rem);line-height:1;
  letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.tier .price span{font-size:var(--t-small);color:var(--text-muted)}
.tier .tag{font-size:var(--t-caption);color:var(--text-body);margin-bottom:var(--sp-4)}
.tier .spec{font-size:var(--t-small);color:var(--text-muted);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);margin-bottom:var(--sp-4)}
.tier .spec b{color:var(--ink)}
.tier .orbs{margin:.625rem 0 0}
.tier ul{list-style:none;padding:0;margin:0 0 var(--sp-6);flex:1}
.tier ul li{position:relative;padding-left:1.5rem;margin:.625rem 0;font-size:var(--t-caption)}
.tier ul li::before{content:"";position:absolute;left:.1875rem;top:.55em;width:7px;height:7px;
  border-radius:2px;background:var(--signal)}
.tier--rec ul li::before{background:var(--signal)}
.tier .foot{margin-top:auto}
.tier .foot .fine{margin:.75rem 0 0;font-size:var(--t-small);color:var(--text-muted);text-align:center}
.checkout-note:empty{display:none}
.checkout-note{margin:.625rem 0 0;padding:.625rem .75rem;border-radius:var(--r-sm);
  border:1px solid rgba(255,176,32,.35);background:rgba(255,176,32,.08);
  font-size:var(--t-small);line-height:1.5;color:var(--alarm)}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.pricenotes{display:grid;gap:var(--sp-4);margin-top:var(--sp-8)}
@media(min-width:860px){.pricenotes{grid-template-columns:repeat(2,1fr)}}
.pricenote{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-6)}
.pricenote h3{font-size:1.0625rem;font-family:var(--font-body);letter-spacing:0;margin-bottom:.5rem}
.pricenote p{font-size:var(--t-small);margin-bottom:0}
.pricenote--wide{grid-column:1/-1}

/* ---------- testimonials ---------- */
.reviews{display:grid;gap:var(--sp-4)}
@media(min-width:640px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(1.125rem,2.5vw,1.5rem)}
.review .stars{display:inline-flex;gap:2px;color:var(--premium);line-height:0}
.review .star{display:block;width:16px;height:16px;flex:none}
.review-t{font-size:1.0625rem;font-family:var(--font-body);font-weight:700;
  letter-spacing:0;line-height:1.35;color:var(--ink);margin:0}
.review blockquote{margin:0;font-size:var(--t-caption);line-height:1.6;color:var(--text-body)}
.review figcaption{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border);
  font-weight:700;color:var(--ink);font-size:var(--t-small)}

/* ---------- faq ---------- */
.faq{display:grid;gap:.5rem;max-width:var(--container-narrow);margin-inline:auto}
details.q{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md)}
details.q[open]{border-color:var(--border-selected);background:var(--surface-raised)}
details.q > summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;display:flex;
  gap:1rem;align-items:flex-start;font-weight:700;color:var(--ink);font-size:var(--t-caption)}
details.q > summary::-webkit-details-marker{display:none}
details.q > summary::after{content:"";width:9px;height:9px;flex:none;margin-left:auto;
  margin-top:.35rem;border-right:2px solid var(--signal);border-bottom:2px solid var(--signal);
  transform:rotate(45deg);transition:transform 240ms}
details.q[open] > summary::after{transform:rotate(-135deg)}
details.q .a{padding:0 1.25rem 1.25rem}
details.q .a p{font-size:var(--t-caption);margin-bottom:.75rem}
details.q .a p:last-child{margin-bottom:0}

/* ---------- final ---------- */
.final{background:var(--bg-hero) var(--vignette) no-repeat;border-top:1px solid var(--border);
  text-align:center}
.final h2{margin-inline:auto;max-width:20ch}
.final p{margin-inline:auto}
.final .lede{margin:var(--sp-6) auto var(--sp-8);max-width:44ch}
.final .fine{margin-top:var(--sp-6);font-size:var(--t-caption);color:var(--text-muted)}

/* ---------- footer ---------- */
footer{background:var(--site-bg);border-top:1px solid var(--border);
  padding-block:var(--sp-12) var(--sp-16)}
footer .frow{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center;
  justify-content:space-between;margin-bottom:var(--sp-8)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6)}
footer nav a{color:var(--text-muted);font-size:var(--t-caption);font-weight:600}
footer nav a:hover{color:var(--ink)}
footer .disc{font-size:var(--t-small);color:var(--text-muted);max-width:78ch;margin:0}
footer .disc + .disc{margin-top:var(--sp-4)}

/* ---------- sticky mobile CTA ---------- */
#sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:.75rem 1rem 1rem;
  background:linear-gradient(180deg,rgba(6,10,18,0),rgba(6,10,18,.97) 38%);
  transform:translateY(120%);transition:transform 280ms var(--ease-snap);pointer-events:none}
#sticky.on{transform:none;pointer-events:auto}
#sticky .fine{text-align:center;font-size:.6875rem;color:var(--text-muted);margin:.4375rem 0 0}
@media(min-width:900px){#sticky{display:none}}
@media(max-width:899px){body{padding-bottom:0}}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity 480ms var(--ease-snap),transform 480ms var(--ease-snap)}
.js .reveal.in{opacity:1;transform:none}

/* ==========================================================================
   NARROW-VIEWPORT OVERRIDES - these must stay at the END of the stylesheet.
   Media queries add no specificity, so a base rule declared later wins. When
   these sat above the component rules, every override in them was dead.
   ========================================================================== */
@media (max-width:559px){
  .container{padding-inline:var(--sp-4)}
  .rbody{padding:var(--sp-4)}
  #rnav{padding-inline:var(--sp-4)}
  .report-chip{padding-inline:var(--sp-4)}
  .factstrip{padding-inline:var(--sp-4)}
  /* the map goes edge to edge - phone-shaped, and it buys the labels ~10% */
  .smap-card{border-radius:0;border-left:0;border-right:0;
    margin-inline:calc(var(--sp-4) * -1)}
  .smap-body{padding:0}
  .smap-top,.smap-duel,.smap-legend{padding-inline:var(--sp-4)}
}
@media (max-width:560px){
  .cap-wide,.cap-flag-wide{display:none}
  .cap-narrow,.cap-scalenote{display:block}
  .cap-flag-narrow{display:block}
  .cap-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .75rem}
  .cap-key li{white-space:normal}
  .cap-scalenote{margin-top:0}
  /* the third stat's label is much longer than the other two; let it span */
  .statband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statband > div:last-child{grid-column:1/-1}
}
@media (max-width:520px){
  .field-row{flex-wrap:wrap;gap:.25rem .5rem}
  .field-row .nm{width:100%;order:1}
  .field-row .fb{order:2;flex:1 1 auto}
  .field-row .pc{order:3;width:auto;flex:none}
}
@media (max-width:560px){
  .src-int .dom{gap:.4375rem}
  /* #r-ladder at 390px: .who reserved 140px at every width, so .mid computed to
     70px and every chip wrapped inside its own pill. These three rules are the
     fix; they only work because this block now sits AFTER the base rules. */
  .src-int{flex-wrap:wrap}
  .src-int .lev{width:2.5rem}
  .src-int .mid{flex:1 1 calc(100% - 3.25rem);min-width:0}
  .src-int .who{flex:0 0 100%;order:3;width:auto;max-width:none;
    padding-left:3.25rem;margin-top:.375rem}
  .tg-route > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tg-route::before{content:attr(data-short)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
  .js .smap .lnk{stroke-dashoffset:0}
  .js .smap .nd,.js .smap .orb{opacity:1}
  .js .reveal{opacity:1;transform:none}
  .js .field .fld-hot rect{opacity:1;transform:none}
  .js .capbar .cap-seg{transform:none}
  .js .capbar .cap-refused,.js .capbar .cap-line{opacity:1}
  .js .rp-rate .rate-fill{transform:none}
  .js .ladder .levbar i{width:calc(var(--lev,0)*1%)}
  .field-row .fb i{width:var(--w,0%)}
  .js .rangebar .rb-band{transform:none}
  .js .rangebar .rb-tick{opacity:.8}
  .js .rangebar .rb-median{opacity:1}
  .js .access-list .access-row{opacity:1;transform:none}
}