/* ==========================================================================
   Resource Hub IQ — resourcehubiq.com
   One stylesheet, no preprocessor, no build step. Keep it that way.

   The visual language is the product's own "Signal" direction, deliberately:
   meters, mono uppercase labels and tabular figures. That is what lets this
   site show the product without a screenshot — which it may not have, because
   the only real instance holds staff ratings of named people. See
   RHIQ/design/2026-08-18-signal-direction.md.
   ========================================================================== */

:root{
  /* ---- Brand. From RHIQ/brand/resource-hub-iq-brand-guide.md. Do not invent
     new brand colours. Three of these five are not safe as text; the
     text-safe derivations below exist for that and are marked. ---- */
  --navy:#0B2345;          /* deep navy   — hero band, footer, dark surfaces */
  --blue:#3E67C6;          /* medium blue — buttons, fills, rules            */
  --teal:#18AAA6;          /* teal        — meters and accents. NOT text on light */
  /* Light header blue. Decoration, or text on navy (5.37:1) — never a word on
     a light background: it is 2.92:1 on white, which fails even the 3:1 bar
     for large text. It was the stage numerals until axe-core caught it. */
  --blue-light:#6F95ED;

  /* Text-safe derivations. Brand teal is 2.86:1 on white, so it can never be
     a word on a light background; --teal-text is the darkened version that
     clears AA (5.16:1 on white, 4.85:1 on --bg-2). Brand blue happens to
     clear AA as text (5.30:1) and is used directly. */
  --teal-text:#0E7A77;

  /* ---- Surfaces. --bg-2 is Signal's page grey. ---- */
  --bg:#FFFFFF;
  --bg-2:#F6F8FA;
  --bg-3:#EDF2F7;
  --navy-2:#122F58;        /* cards sitting on --navy */
  --navy-3:#1B3A66;        /* borders on --navy */
  --line:#DCE3EA;          /* Signal's rule colour */

  /* ---- Ink. --ink-3 was #5F7385, which fails AA (4.36:1) on --bg-3.
     Darkened until the worst of its three backgrounds cleared 4.5. ---- */
  --ink:#0F1E30;
  --ink-2:#41566E;
  --ink-3:#5A6E80;
  --on-navy:#B9C9E8;       /* muted text on navy — 9.39:1 */

  /* ---- Confidence semantics, carried over from the product so the meters
     here mean what they mean in the app. Amber darkened from Signal's
     #A66A00, which was 4.00:1 on its own pill background. ---- */
  --ok-fg:#12694A;  --ok-bg:#E4F1EA;
  --warn-fg:#8A5800; --warn-bg:#FBF1DF;

  --r:10px;
  --wrap:1140px;
  --header-h:88px;
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
         'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}

/* --------------------------------------------------------------- fonts --
   Poppins, self-hosted, subset to latin and converted to woff2 from the
   TTFs the application ships. SIL Open Font License 1.1 — see fonts/OFL.txt.
   Self-hosted rather than linked from Google Fonts for the same two reasons
   the app does it: the CSP has no reason to allow a third-party font host,
   and no visitor's IP is handed to anyone else — which is what lets the
   privacy page stay as short and as true as it is.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/poppins-700.woff2') format('woff2')}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}

/* --------------------------------------------- text resize (WCAG 1.4.4) --
   At 200% text on a phone a single long word — "correspondence", or the
   address sales@resourcehubiq.com, which has no break opportunity at all —
   is wider than the viewport. Two things are needed and neither alone is
   enough:

   1. `overflow-wrap`, so the word wraps instead of spilling out of its box.
   2. `min-width:0` on grid and flex children, because their default `auto`
      minimum is their *min-content* width — the longest word — so the track
      itself grows and the whole page scrolls sideways. `overflow-wrap:
      break-word` does not reduce min-content; `anywhere` does, which is why
      the addresses use `anywhere` and ordinary prose does not.

   This was caught by testing at 200%, not by reading the CSS: every layout
   here reflows correctly at 320px and still failed this.
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,p,li,dt,dd,figcaption,blockquote,th,td{overflow-wrap:break-word}
.hero-grid > *,.split > *,.stage > *,.footer-grid > *,.rules > div > *,
.seam-col,.seam-mid,.kpi,.card,.aside-card,.mailcard{min-width:0}

h1,h2,h3{margin:0;line-height:1.16;letter-spacing:-.022em}
h1{font-size:clamp(2.05rem,5vw,3.35rem);font-weight:700}
h2{font-size:clamp(1.5rem,3.1vw,2.1rem);font-weight:700}
h3{font-size:1.08rem;font-weight:600;letter-spacing:-.01em}
p,ul,ol{margin:0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* A link sitting inside a block of text must be distinguishable without colour
   (WCAG 1.4.1), so links in running prose are underlined always, not just on
   hover. Navigation, buttons and link lists are exempt — they are not text
   blocks — which is why this is scoped rather than applied to every `a`. */
.prose a,.aside-card a,.mailcard p a,.checklist a{
  text-decoration:underline;text-underline-offset:2px;
}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

/* Numbers are tabular everywhere they are compared — the whole point of a
   roster is that two scores line up under each other. */
.num{font-variant-numeric:tabular-nums}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;padding:12px 20px;
  border-radius:0 0 var(--r) 0;font-weight:600;
}
.skip:focus{left:0;text-decoration:none}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.lede{font-size:clamp(1.04rem,2vw,1.22rem);color:var(--ink-2);line-height:1.6}
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-text);margin-bottom:15px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* -------------------------------------------------------------- header -- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .site-header{backdrop-filter:saturate(180%) blur(12px)}
}
.nav{display:flex;align-items:center;gap:32px;height:var(--header-h)}
.logo{display:flex;align-items:center}
.logo img{height:40px;width:auto}
.nav-links{margin-left:auto;display:flex;gap:30px}
.nav-links a{color:var(--ink-2);font-size:.95rem;font-weight:500}
.nav-links a:hover{color:var(--navy);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--navy);font-weight:600}

.btn{
  display:inline-block;background:var(--blue);color:#fff;
  font-weight:600;font-size:.95rem;padding:11px 22px;
  border-radius:var(--r);border:1px solid var(--blue);cursor:pointer;
  transition:background .16s ease;
}
.btn:hover{background:#3358AF;border-color:#3358AF;text-decoration:none;color:#fff}
.btn--ghost{background:transparent;color:var(--blue);border-color:#C2D0EE}
.btn--ghost:hover{background:var(--bg-3);color:var(--blue);border-color:#C2D0EE}
/* On navy, the ghost button needs a light border and light text to stay AA. */
.btn--onnavy{background:transparent;color:#fff;border-color:#4A6EA8}
.btn--onnavy:hover{background:var(--navy-2);color:#fff;border-color:#5C82BE}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--ink-2);line-height:0;
}
.nav-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

/* ---------------------------------------------------------------- hero -- */
.hero{
  background:var(--navy);color:#fff;position:relative;overflow:hidden;
  padding:86px 0 90px;
}
/* The four-tile mark, echoed as a grid wash. Decoration only — masked out
   before it reaches any text. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--navy-3) 1px,transparent 1px),
                   linear-gradient(90deg,var(--navy-3) 1px,transparent 1px);
  background-size:64px 64px;opacity:.75;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 84% 6%,#000 0%,transparent 68%);
          mask-image:radial-gradient(ellipse 70% 80% at 84% 6%,#000 0%,transparent 68%);
}
.hero > .wrap{position:relative}
.hero .eyebrow{color:var(--teal)}   /* 5.47:1 on navy */
.hero h1{max-width:19ch}
.hero .lede{max-width:50ch;margin-top:22px;color:var(--on-navy)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.trust{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--navy-3);
  display:flex;flex-wrap:wrap;gap:12px 36px;list-style:none;padding-left:0;
}
.trust li{font-size:.84rem;color:var(--on-navy);font-weight:400}
.trust b{color:#fff;font-weight:600}

/* ------------------------------------------------------------ sections -- */
.section{padding:88px 0}
.section--alt{background:var(--bg-2);border-block:1px solid var(--line)}
.section--flush{padding-top:0}
.section--navy{background:var(--navy);color:#fff}
.section--navy .lede{color:var(--on-navy)}
.section--navy .eyebrow{color:var(--teal)}
.section-head{max-width:62ch;margin-bottom:46px}
.section-head p{margin-top:14px}

.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

/* --------------------------------------------------------------- cards -- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.card:hover{
  box-shadow:0 12px 28px -14px rgba(11,35,69,.22);
  border-color:#C7D5E4;transform:translateY(-2px);
}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-2);font-size:.96rem}
.card-icon{
  width:42px;height:42px;border-radius:11px;background:var(--bg-3);
  display:grid;place-items:center;margin-bottom:18px;
}
.card-icon svg{
  width:21px;height:21px;stroke:var(--blue);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
/* Numbered variant, for the lifecycle sequence on the home page. */
.card-n{
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  color:var(--teal-text);display:block;margin-bottom:8px;
}

/* -------------------------------------------------------- demo roster --
   An invented roster fragment. It is the product's real markup shape —
   semantic table, meter as decoration, confidence as a word — with data that
   is entirely made up. The constraint it satisfies is absolute: no real
   speaker name, organisation or rating appears anywhere on this site.
   -------------------------------------------------------------------------- */
.demo{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);overflow:hidden;color:var(--ink);
}
.demo-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 18px;background:var(--bg-2);border-bottom:1px solid var(--line);
}
.demo-bar span{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.demo-dots{display:flex;gap:5px;margin-right:6px}
.demo-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.demo-body{padding:18px}

/* KPI strip — Signal's summary tiles. Rater count is on screen permanently
   because single-rater bias is the product's standing risk. */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.kpi{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;
}
.kpi span{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;
}
.kpi b{font-size:1.22rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi--warn{background:var(--warn-bg);border-color:#EBD9B4}
.kpi--warn b{color:var(--warn-fg)}

.roster{width:100%;border-collapse:collapse;font-size:.9rem}
.roster th{
  font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--line);
}
.roster td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.roster tbody tr:last-child td{border-bottom:0}
.roster th[scope="row"]{
  font-family:var(--sans);font-size:.9rem;font-weight:600;text-transform:none;
  letter-spacing:normal;color:var(--ink);border-bottom:1px solid var(--line);
  padding:11px 10px;
}
.roster tbody tr:last-child th[scope="row"]{border-bottom:0}
.roster small{display:block;font-weight:400;font-size:.76rem;color:var(--ink-3)}

/* The meter. Decoration — never the only signal for anything. The number and
   the confidence word next to it stay the accessible source of truth, which
   is a non-negotiable rule carried over from the application. */
.meter{display:flex;align-items:center;gap:8px}
.meter i{
  display:block;width:52px;height:7px;border-radius:4px;background:var(--bg-3);
  overflow:hidden;flex:none;
}
.meter i u{display:block;height:100%;text-decoration:none;background:var(--ok-fg)}
.meter--warn i u{background:var(--warn-fg)}
/* Demo bar lengths. These were `style="width:92%"` attributes until the
   production CSP — `style-src 'self'` — blocked them outright and the bars
   rendered as empty tracks, while every local check passed because serve.py
   does not apply _headers. `tools/check-csp.py` now fails if a style attribute
   reappears anywhere. */
.meter i u.w92{width:92%}
.meter i u.w84{width:84%}
.meter i u.w98{width:98%}
.meter b{font-weight:700;font-variant-numeric:tabular-nums}
.meter em{font-style:normal;font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

.pill{
  display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  white-space:nowrap;
}
.pill--ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill--warn{background:var(--warn-bg);color:var(--warn-fg)}
.pill--none{background:var(--bg-3);color:var(--ink-3)}

.demo-note{
  margin-top:14px;font-size:.78rem;color:var(--ink-3);
  padding-top:12px;border-top:1px solid var(--line);
}

/* ------------------------------------------------------ the seam figure --
   The market-scan finding, as a diagram: two categories of tool and the gap
   between them. Everything it asserts comes from
   RHIQ/research/2026-08-18-speaker-inventory-market-scan.md.
   -------------------------------------------------------------------------- */
.seam{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.seam-col{padding:30px 28px}
.seam-col h3{margin-bottom:12px;font-size:1rem}
.seam-col p{color:var(--ink-2);font-size:.94rem}
.seam-col ul{margin-top:12px;padding-left:18px;color:var(--ink-3);font-size:.88rem}
.seam-col li + li{margin-top:5px}
.seam-mid{
  background:var(--navy);color:#fff;padding:30px 26px;display:flex;
  flex-direction:column;justify-content:center;text-align:center;width:220px;
}
.seam-mid .eyebrow{color:var(--teal);margin-bottom:10px}
.seam-mid b{display:block;font-size:1.05rem;line-height:1.35;font-weight:600}
.seam-mid p{margin-top:10px;font-size:.85rem;color:var(--on-navy)}
.pricenote{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;
  font-size:.9rem;color:var(--ink-3);
}
.pricenote b{font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- honesty list --
   The three display rules. These are real product decisions, not slogans;
   each one exists because getting it wrong misrepresents a person.
   -------------------------------------------------------------------------- */
.rules{display:grid;gap:0;border-top:1px solid var(--navy-3)}
.rules > div{
  display:grid;grid-template-columns:180px 1fr;gap:32px;
  padding:26px 0;border-bottom:1px solid var(--navy-3);align-items:start;
}
.rules dt{font-weight:600;color:#fff;font-size:1rem;margin:0}
.rules dd{margin:0;color:var(--on-navy);font-size:.96rem}
.rules .tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:6px;
}

/* ----------------------------------------------------------- CTA band --- */
.band{
  background:linear-gradient(135deg,var(--navy) 0%,#1D4585 100%);
  color:#fff;border-radius:18px;padding:54px 46px;text-align:center;
}
.band h2{color:#fff}
/* Hierarchy in the band comes from size and weight, not a dimmer colour — a
   tinted paragraph could not hold 4.5:1 across the whole gradient. */
.band p{color:#fff;max-width:54ch;margin:16px auto 0}
.band .btn{background:#fff;color:var(--navy);border-color:#fff;margin-top:28px}
.band .btn:hover{background:#E8EFFA;color:var(--navy);border-color:#E8EFFA}
.band .addr{
  display:block;margin-top:18px;font-family:var(--mono);font-size:.8rem;
  letter-spacing:.04em;color:#fff;overflow-wrap:anywhere;
}

/* -------------------------------------------------------------- footer -- */
.site-footer{background:var(--navy);color:var(--on-navy);padding:52px 0 44px;font-size:.9rem}
.footer-grid{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between}
.footer-mark{height:34px;width:auto;margin-bottom:14px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;padding-left:0;margin:0}
.footer-links li,.footer-links a{min-width:0;overflow-wrap:anywhere}
.site-footer a{color:#fff}
.site-footer small{display:block;margin-top:10px;color:var(--on-navy);font-size:.82rem}

/* ---------------------------------------------------------- page header -- */
.page-head{
  background:var(--navy);color:#fff;padding:72px 0 62px;position:relative;overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--navy-3) 1px,transparent 1px),
                   linear-gradient(90deg,var(--navy-3) 1px,transparent 1px);
  background-size:64px 64px;opacity:.75;
  -webkit-mask-image:radial-gradient(ellipse 60% 90% at 90% 4%,#000 0%,transparent 66%);
          mask-image:radial-gradient(ellipse 60% 90% at 90% 4%,#000 0%,transparent 66%);
}
.page-head > .wrap{position:relative}
.page-head .eyebrow{color:var(--teal)}
.page-head h1{max-width:20ch;font-size:clamp(1.85rem,4.3vw,2.85rem)}
.page-head .lede{max-width:58ch;margin-top:18px;color:var(--on-navy)}

/* --------------------------------------------------------------- prose -- */
.prose{max-width:70ch}
.prose--spaced{margin-top:38px}
.prose > * + *{margin-top:20px}
.prose h2{margin-top:46px}
.prose h3{margin-top:30px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:8px}
.prose strong{color:var(--ink);font-weight:600}
.prose dl{margin:0}
.prose dt{color:var(--ink);font-weight:600;margin-top:20px}
.prose dd{margin:6px 0 0;color:var(--ink-2)}

/* ------------------------------------------------------- lifecycle stages -- */
.stage{
  display:grid;grid-template-columns:92px 1fr;gap:32px;align-items:start;
  padding:42px 0;border-bottom:1px solid var(--line);
}
.stage:last-child{border-bottom:0}
/* --blue, not --blue-light. The numerals are content — they are the sequence
   the page is built on — and --blue-light is 2.92:1 on white, under even the
   3:1 large-text threshold. --blue is 5.30:1, which holds if this ever gets
   smaller than "large" too. */
.stage .stage-n{
  font-family:var(--mono);font-size:2.1rem;font-weight:700;line-height:1;
  color:var(--blue);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.stage h2{font-size:1.5rem;margin-bottom:14px}
.stage p{color:var(--ink-2)}
.stage p + p,.stage ul + p,.stage p + ul{margin-top:15px}
.stage ul{margin:0;padding-left:20px;color:var(--ink-2)}
.stage li + li{margin-top:7px}

/* ---------------------------------------------------- contact / aside --- */
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.mailcard{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 32px;
}
.mailcard .eyebrow{margin-bottom:10px}
.mailcard .addr{
  display:inline-block;margin:6px 0 4px;font-size:clamp(1.15rem,2.6vw,1.6rem);
  font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere;
}
.mailcard p{color:var(--ink-2);font-size:.96rem}
.mailcard p + p{margin-top:14px}
.aside-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:26px 24px;
}
.aside-card h3{margin-bottom:12px}
.aside-card p{color:var(--ink-2);font-size:.94rem}
.aside-card p + p{margin-top:13px}
.aside-card + .aside-card{margin-top:20px}
.checklist{margin:14px 0 0;padding-left:20px;color:var(--ink-2);font-size:.96rem}
.checklist li + li{margin-top:8px}

/* ----------------------------------------------------------------- 404 -- */
.notfound{text-align:center;padding:118px 0}
.notfound h1{font-size:clamp(2.3rem,7vw,3.9rem)}
.notfound p{margin-top:18px}
.notfound .cta-row{justify-content:center}
.notfound-hint{margin-top:30px;font-size:.92rem;color:var(--ink-3)}

/* --------------------------------------------------------- breakpoints -- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:46px}
  .hero h1,.hero .lede{max-width:none}
  .seam{grid-template-columns:1fr}
  .seam-mid{width:auto;border-block:1px solid var(--navy-3)}
}
@media (max-width:900px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:34px}
  .rules > div{grid-template-columns:1fr;gap:8px}
}
@media (max-width:640px){
  :root{--header-h:74px}
  body{font-size:16px}
  .logo img{height:34px}
  .nav-toggle{display:block}

  /* Nav collapses to a panel under the header. No JS means no panel, so every
     link in it is also in the footer — see the pages. */
  .nav-links{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;gap:0;margin:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:8px 24px 20px;
    box-shadow:0 18px 30px -22px rgba(15,30,48,.5);
    display:none;
  }
  .nav-links[data-open="true"]{display:flex}
  /* 44px minimum touch target — the most-repeated constraint in the product. */
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav-links a:last-child{border-bottom:0}
  .nav .btn{display:none}

  .grid--2,.grid--3{grid-template-columns:1fr}
  .section{padding:60px 0}
  .hero{padding:56px 0 62px}
  .band{padding:40px 24px;border-radius:14px}
  .stage{grid-template-columns:1fr;gap:12px;padding:32px 0}
  .stage .stage-n{font-size:1.6rem}
  /* Three tiles stay three across. Stacked, they pushed the roster itself
     below the fold, and the rater-count tile only does its job next to the
     other two. */
  .kpis{grid-template-columns:repeat(3,1fr);gap:6px}
  .kpi{padding:8px 9px}
  .kpi b{font-size:1.02rem}
  .demo-body{padding:14px}
  .mailcard{padding:26px 22px}

  /* On a phone the roster keeps exactly the three things that carry meaning —
     who, the number, and the confidence *word* — and drops everything that
     does not. Confidence behind a horizontal scroll would have been the one
     unacceptable outcome: the whole argument of this design is that the word
     is the signal and the bar is decoration, so the decoration is what goes
     when there is not room for both.
       · Talks column: the rating count is already beside the score as "·7".
       · The meter bar: decorative by definition, and stated to be.
     What is left fits at 320px with no scroll, so there is no scrollable
     region here and therefore no tab stop on it — see index.html. */
  .roster th:nth-child(4),.roster td:nth-child(4){display:none}
  .demo-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .roster th,.roster td,.roster th[scope="row"]{padding-inline:5px}
  .roster th[scope="row"]{font-size:.85rem}
  .meter i{display:none}
  .pill{font-size:.53rem;padding:4px 7px;letter-spacing:.05em}

  .footer-grid{flex-direction:column;align-items:flex-start;gap:22px}
  .footer-links{gap:10px 20px}
  .notfound{padding:78px 0}
}

/* ---------------------------------------------------------------- print -- */
@media print{
  .site-header,.nav-toggle,.band,.skip,.hero::before,.page-head::before{display:none}
  body{font-size:11pt;color:#000}
  .hero,.page-head,.section--navy,.site-footer{background:#fff!important;color:#000!important}
  .hero .lede,.page-head .lede,.rules dd,.site-footer{color:#333!important}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}