/* GENERATED by scripts/build-unified-css.mjs — do not hand-edit.
   sources: site-v2.css + site-v3.css · source-hash: ec0b7dba94f6272e
   Edit the sources, then re-run the build (guarded by check-unified-css.mjs, R4). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");
/* ^ World C faces (2026-09-03, founder: match resend.com): Inter (reading/UI) + Instrument Serif (display). Must stay the first statement — @import is ignored after any rule, and site.css = v2 + v3 keeps this order. */
/* === PEERS COMPARE TABLE (Phase 2, 2026-05-03) === */
.peers-compare { width: 100%; min-width: 720px; border-collapse: collapse; }
.peers-compare th, .peers-compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.peers-compare th { color: var(--ink-soft); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.peers-compare tr.self-row { background: var(--paper-alt); }
.peers-compare tr.self-row td { font-weight: 600; }
.peers-compare .self-badge { margin-left: 8px; padding: 2px 8px; background: var(--accent); color: var(--paper); border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.peers-compare a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--line-strong); }
.peers-compare a:hover { color: var(--accent-strong); border-bottom-color: var(--accent); }
/* === UPDATES TAB (Phase 2, 2026-05-03) === */
.updates-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
@media (max-width: 768px) {
.updates-grid { grid-template-columns: 1fr; }
}
.updates-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.updates-grid ul li { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.92rem; background: var(--surface); }
/* Screen-reader-only — used by form labels so the input has a programmatic
   name without occupying a visible grid cell. Without this, .newsletter-form's
   2-col grid wastes col 1 on the label and the Subscribe button wraps to row 2. */
.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;
}
:root {
  --paper: #faf9f5;           /* warm cream — Claude's palette */
  --paper-alt: #f3f0e8;       /* subtle band */
  --surface: #ffffff;         /* cards */
  --ink: #1a1a1a;             /* body */
  --ink-soft: #3a3a3a;        /* secondary */
  --muted: #6b6b68;           /* tertiary */
  --line: rgba(26, 26, 26, 0.10);
  --line-strong: rgba(26, 26, 26, 0.18);
  --accent: #d97757;          /* Claude orange-terracotta */
  --accent-strong: #a64a2c;   /* darker terracotta — for small labels on cream/white (passes WCAG 4.5:1) */
  --accent-soft: #f5e8dd;
  --green: #4a7c59;
  --amber: #c8973d;
  --red: #c44a3d;
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --max: 1040px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  display: block;
  max-width: 100%;
}
.shell {
  min-height: 100vh;
}
.container {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 249, 245, 0.88);
  backdrop-filter: blur(18px);
}
.nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(242, 171, 39, 0.22), rgba(88, 166, 255, 0.18));
  border: 1px solid rgba(242, 171, 39, 0.35);
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.brand-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.brand-copy span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-links,
.nav-actions,
.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.nav-links a,
.footer-links a {
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
}
.nav-links a[aria-current="page"],
.nav-links a:hover,
.footer-links a:hover {
  color: var(--ink);
}
.button,
button,
input,
textarea,
select {
  font: inherit;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  text-decoration: none;
  transition: none;
}
.button-primary {
  background: linear-gradient(135deg, var(--accent), #ffc85b);
  border-color: transparent;
  color: #09111d;
  font-weight: 700;
}
.button-secondary {
  background: transparent;
}
.hero,
.page-hero,
.section {
  border-bottom: 1px solid var(--line);
}
.hero {
  padding: 72px 0 56px;
}
.page-hero {
  padding: 56px 0 24px;
}
.section {
  padding: 56px 0;
}
.hero h1,
.page-hero h1,
.section-title,
.progress-copy h3,
.card h3,
.panel h3,
.ledger-card h3,
.peer-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero h1 {
  margin-top: 14px;
  margin-bottom: 16px;
  max-width: 10ch;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.92;
}
.page-hero h1,
.section-title {
  margin-bottom: 8px;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.95;
}
.hero-subtitle,
.page-hero p,
.section-head p,
.muted,
.card p,
.panel p,
.review-card p,
.proof-item span,
.checklist li,
.field label,
.success,
.callout,
.breadcrumb,
.coming-up-list li,
.tape-item span,
.ledger-meta,
.detail-row,
.progress-copy p,
.peer-card p {
  color: var(--muted);
}
.hero-subtitle {
  margin: 0 0 28px;
  max-width: 26ch;
  font-size: 1.15rem;
}
.page-hero p,
.section-head p {
  max-width: 34ch;
}
.eyebrow,
.tier-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
}
.card,
.panel,
.review-card,
.ledger-card,
.peer-card,
.progress-item,
.tape-item,
.table-shell,
.callout,
.proof-item,
.input,
.select,
.textarea,
.success {
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
}
.card,
.panel,
.review-card,
.ledger-card,
.peer-card {
  padding: 24px;
}
.review-card {
  text-decoration: none;
}
.table-shell {
  overflow-x: auto;
}
.score-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.score-table th,
.score-table td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.score-table th {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.score-table tbody tr:last-child td {
  border-bottom: none;
}
.score-table td:first-child {
  width: 72px;
}
.table-link,
.progress-link {
  text-decoration: none;
}
.table-link:hover,
.progress-link:hover {
  text-decoration: underline;
}
.score-value {
  font-weight: 600;
}
.score-high {
  color: var(--green);
}
.score-medium {
  color: var(--amber);
}
.score-low {
  color: var(--red);
}
.tier-high {
  border-color: rgba(41, 192, 132, 0.40);
  color: var(--green);
}
.tier-medium {
  border-color: rgba(242, 171, 39, 0.40);
  color: var(--amber);
}
.tier-low {
  border-color: rgba(255, 107, 107, 0.40);
  color: var(--red);
}
.empty-state {
  color: var(--muted);
}
.progress-grid,
.signal-board,
.proof-doctrine,
.two-column,
.proof-grid,
.proof-ledger,
.peer-review-grid,
.ticker-row {
  display: grid;
  gap: 16px;
}
.progress-grid,
.signal-board,
.proof-ledger,
.peer-review-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.two-column,
.proof-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ticker-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}
.progress-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
.progress-copy h3 {
  margin-bottom: 4px;
  font-size: 1.6rem;
  line-height: 1;
}
.progress-copy p {
  margin: 0;
  font-size: 0.95rem;
}
.status-badge {
  white-space: nowrap;
}
.status-active {
  border-color: rgba(242, 171, 39, 0.40);
  color: var(--amber);
}
.status-reviewed {
  border-color: rgba(41, 192, 132, 0.40);
  color: var(--green);
}
.status-scouted {
  color: var(--muted);
}
.coming-up-list,
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.coming-up-list {
  border-top: 1px solid var(--line);
}
.coming-up-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.proof-item {
  padding: 18px;
}
.proof-item strong {
  display: block;
  margin-bottom: 4px;
}
.checklist li + li {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.callout {
  margin-top: 20px;
  padding: 16px 18px;
}
.tape-item {
  padding: 16px 18px;
}
.tape-item strong {
  display: block;
  margin-bottom: 4px;
}
.ledger-card h3,
.peer-card h3 {
  margin-bottom: 10px;
  font-size: 1.9rem;
  line-height: 1;
}
.ledger-meta,
.detail-row,
.peer-card p {
  font-size: 0.95rem;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.form-stack,
.field {
  display: grid;
  gap: 12px;
}
.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--ink);
}
.textarea {
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.success {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
}
.success.is-visible {
  display: block;
}
.footer {
  padding: 32px 0 48px;
}
.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-grid strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
}
@media (max-width: 840px) {
.nav,
  .section-head,
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
  }
.progress-grid,
  .signal-board,
  .proof-doctrine,
  .two-column,
  .proof-grid,
  .proof-ledger,
  .peer-review-grid,
  .ticker-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
.nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 0;
  }
.nav-links,
  .nav-actions {
    width: 100%;
  }
.hero-frame,
  .newsletter,
  .card,
  .panel,
  .review-card {
    padding: 22px;
  }
.hero-copy h1 {
    max-width: none;
  }
.section-head,
  .metric-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
body.homepage {
  color: #eef3fb;
  background:
    radial-gradient(circle at top left, rgba(145, 240, 203, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(104, 136, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #07111b 0%, #0a1521 100%);
}
body.homepage .site-header {
  background: rgba(7, 17, 27, 0.88);
  border-bottom-color: rgba(226, 236, 248, 0.1);
}
body.homepage .brand-mark {
  background: #eef3fb;
  color: #07111b;
}
body.homepage .brand-copy strong,
body.homepage .nav-links a[aria-current="page"],
body.homepage .nav-links a:hover,
body.homepage .footer-links a:hover {
  color: #f6fbff;
}
/* Light text ONLY where the homepage is actually dark (header, hero cards,
   footer). The old blanket `body.homepage .muted` rule leaked dark-theme ink
   onto the cream sections and left every section intro nearly invisible
   (fixed 2026-07-04, founder narrative pass). */
body.homepage .brand-copy span,
body.homepage .nav-links a,
body.homepage .footer-links a,
body.homepage .home-hero .muted,
body.homepage .footer .muted,
body.homepage .home-hero .card p,
body.homepage .home-hero .panel p,
body.homepage .home-hero .step-desc,
body.homepage .hero-subtitle,
body.homepage .footer-contact span,
body.homepage .footer-entity,
body.homepage .latest-review-date,
body.homepage .latest-review-score span,
body.homepage .mini-card span {
  color: rgba(226, 236, 248, 0.74);
}
.home-hero {
  padding: 56px 0 28px;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 22px;
}
.home-hero-copy,
.home-hero-panel,
.latest-review-card,
.latest-review-placeholder,
.newsletter-inline {
  border-radius: 28px;
  border: 1px solid rgba(226, 236, 248, 0.1);
  box-shadow: 0 24px 48px rgba(2, 7, 15, 0.28);
}
.home-hero-copy {
  padding: clamp(28px, 5vw, 56px);
  /* contrast fix 2026-04-30: solid dark navy + light-tinted gradient overlay,
     no body-bg bleed-through that washed out body text against the cream
     page paper. */
  background:
    radial-gradient(circle at top right, rgba(145, 240, 203, 0.18), transparent 28%),
    linear-gradient(145deg, #0d1724, #0b141f);
  color: #e8eef5;
}
/* Body text inside the dark hero card must be explicitly light — otherwise
   it inherits the global --ink (dark) and disappears on the dark gradient. */
.home-hero-copy .hero-subtitle,
.home-hero-copy p {
  color: rgba(232, 238, 245, 0.86);
}
.home-hero-copy .home-proof-strip span {
  color: rgba(232, 238, 245, 0.92);
}
.home-hero-copy .eyebrow,
.newsletter-inline .eyebrow {
  background: rgba(226, 236, 248, 0.08);
  color: rgba(226, 236, 248, 0.82);
}
.home-hero-copy h1 {
  margin: 14px 0;
  max-width: 10.5ch;
  color: #f6fbff;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.05em;
}
.home-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.home-proof-strip span,
.checkbox-field {
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: rgba(226, 236, 248, 0.06);
  border: 1px solid rgba(226, 236, 248, 0.08);
}
.home-hero-panel {
  padding: 28px;
  /* contrast fix 2026-04-30: solid dark navy. Previous 92% rgba let cream
     body paper bleed through, making the panel look almost-white in some
     browsers and washing out the metric numbers + supporting copy. */
  background:
    radial-gradient(circle at top, rgba(104, 136, 255, 0.14), transparent 36%),
    #091220;
  color: #e8eef5;
}
/* Explicit light text for everything inside the right-panel — eyebrow, body
   copy, captions — so nothing depends on cascade order. */
.home-hero-panel .eyebrow,
.home-hero-panel span,
.home-hero-panel p,
.home-hero-panel a {
  color: rgba(232, 238, 245, 0.86);
}
.home-hero-panel a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-hero-panel h2 {
  margin: 14px 0 10px;
  color: #f6fbff;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.96;
}
body.homepage .mini-card strong,
body.homepage .latest-review-score strong {
  display: block;
  color: #f6fbff;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 0.92;
}
body.homepage .mini-card span,
body.homepage .latest-review-score span {
  /* explicit override — was inheriting an ink-soft (dark) value somewhere */
  color: rgba(232, 238, 245, 0.78) !important;
  font-size: 0.9rem;
}
/* contrast fix 2026-05-01: this used to set near-white text. But homepage
   sections after the dark hero (.narrative-section, .audience-section,
   .signal-section, .email-section) all have cream/paper backgrounds, so
   white text is invisible. Cards on those sections also have cream bg.
   The dark hero h1 + h2 already get their light color from #hero-title and
   .home-hero-panel h2 directly, so they don't need this override. */
body.homepage .section-title,
body.homepage .latest-review-card h3,
body.homepage .card h3 {
  color: var(--ink);
}
body.homepage .step-card,
body.homepage .card,
body.homepage .latest-review-card,
body.homepage .latest-review-placeholder {
  background: var(--surface);
  border-color: rgba(226, 236, 248, 0.08);
  box-shadow: none;
}
body.homepage .step-card {
  background: rgba(11, 20, 31, 0.88);
}
body.homepage .kicker,
body.homepage .pill,
body.homepage .step-num {
  background: rgba(226, 236, 248, 0.07);
  color: rgba(226, 236, 248, 0.78);
}
body.homepage .tier {
  background: rgba(145, 240, 203, 0.14);
  color: #91f0cb;
}
.latest-review-card {
  text-decoration: none;
}
.latest-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.latest-review-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 12px;
}
.newsletter-inline {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  background:
    radial-gradient(circle at top left, rgba(145, 240, 203, 0.16), transparent 30%),
    linear-gradient(145deg, #0d1724 0%, #132133 100%);
}
.newsletter-inline .input {
  background: rgba(226, 236, 248, 0.06);
  border-color: rgba(226, 236, 248, 0.14);
  color: #f6fbff;
}
.newsletter-inline .input::placeholder {
  color: rgba(226, 236, 248, 0.45);
}
/* Beehiiv-backed signup form (2026-05-03). Visual: dark on the home/reviews
   newsletter card; the Pages Function at /api/newsletter-subscribe forwards
   to Beehiiv server-side so the API key never reaches the browser. */
.newsletter-inline h2 {
  margin: 6px 0 8px;
  color: #f6fbff;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
}
.newsletter-inline p {
  color: rgba(232, 238, 245, 0.78);
  margin: 0 0 16px;
  font-size: 0.96rem;
  line-height: 1.55;
}
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.newsletter-form input[type="email"] {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(226, 236, 248, 0.18);
  border-radius: 8px;
  background: rgba(226, 236, 248, 0.07);
  color: #f6fbff;
  font: inherit;
}
.newsletter-form input[type="email"]::placeholder {
  color: rgba(226, 236, 248, 0.55);
}
.newsletter-form input[type="email"]:focus {
  outline: 3px solid rgba(217, 119, 87, 0.32);
  outline-offset: 2px;
  border-color: var(--accent);
}
.newsletter-form button {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #0b141f;
  font-weight: 700;
  cursor: pointer;
}
.newsletter-form button:hover { filter: brightness(1.07); }
.newsletter-form button:disabled { opacity: 0.55; cursor: progress; }
.newsletter-status {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 0.88rem;
  min-height: 1.2em;
  color: rgba(232, 238, 245, 0.85);
}
.newsletter-status.is-success { color: #b9f0c8; }
.newsletter-status.is-error { color: #ffb7ad; }
@media (max-width: 560px) {
.newsletter-form { grid-template-columns: 1fr; }
}
.checkbox-field {
  align-items: flex-start;
  padding: 12px 14px;
  color: rgba(226, 236, 248, 0.78);
}
.checkbox-field input {
  margin-top: 2px;
}
.error-message {
  margin: 0;
  color: #ffb7ad;
}
.footer-stack {
  display: grid;
  gap: 18px;
}
body.homepage .footer {
  padding-top: 24px;
}
body.homepage .footer-grid,
body.homepage .legal-links {
  border-top: 1px solid rgba(226, 236, 248, 0.08);
  padding-top: 18px;
}
body.homepage .footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.freshness-callout {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 18px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(18, 24, 37, 0.06);
}
.freshness-callout strong {
  font-size: 1rem;
}
.review-status-badge {
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(240, 180, 76, 0.16);
  color: #9a6510;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 1040px) {
.home-hero-grid,
  .latest-review-grid,
  .newsletter-inline {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
.home-hero-copy,
  .home-hero-panel,
  .newsletter-inline {
    padding: 22px;
  }
}
body.legal-page {
  color: #eef3fb;
  background:
    radial-gradient(circle at top left, rgba(104, 136, 255, 0.14), transparent 24%),
    linear-gradient(180deg, #08111b 0%, #101c29 100%);
}
body.legal-page .site-header {
  background: rgba(8, 17, 27, 0.88);
  border-bottom-color: rgba(226, 236, 248, 0.1);
}
body.legal-page .brand-mark {
  background: #eef3fb;
  color: #08111b;
}
body.legal-page .brand-copy strong,
body.legal-page .nav-links a[aria-current="page"],
body.legal-page .nav-links a:hover,
body.legal-page .footer-links a:hover {
  color: #f6fbff;
}
body.legal-page .brand-copy span,
body.legal-page .nav-links a,
body.legal-page .footer-links a,
body.legal-page .muted,
body.legal-page p,
body.legal-page li {
  color: rgba(226, 236, 248, 0.76);
}
.legal-shell {
  width: min(calc(100% - 32px), 920px);
  margin: 0 auto;
  padding: 48px 0 72px;
}
.legal-hero,
.legal-section {
  border-radius: 28px;
  border: 1px solid rgba(226, 236, 248, 0.08);
  background: var(--surface);
  box-shadow: none;
}
.legal-hero {
  padding: 32px;
}
.legal-hero h1,
.legal-section h2,
.legal-section h3 {
  color: #f6fbff;
  font-family: var(--font-display);
}
.legal-hero h1 {
  margin: 16px 0 12px;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 0.94;
}
.legal-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.legal-section {
  padding: 24px;
}
.legal-section h2,
.legal-section h3 {
  margin: 0 0 12px;
}
.legal-list,
.legal-links-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}
.legal-note {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(240, 180, 76, 0.16);
  color: #ffd796;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ============================================================
   v3 — Story-first homepage redesign (Claude-warm palette)
   ============================================================ */

.container.narrow { max-width: 720px; }
.brand-mark {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.brand-copy strong { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand-copy span { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.01em; }
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.home-hero {
  padding: 96px 0 80px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-alt) 100%);
  border-bottom: 1px solid var(--line);
}
.home-hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 860px) {
.home-hero { padding: 64px 0 48px; }
.home-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* contrast fix 2026-05-02: --accent (#d97757) on cream paper = 3.16:1, fails
     WCAG 4.5:1 for small text. --accent-strong is the darkened terracotta that
     passes. Dark-hero overrides at .home-hero-copy .eyebrow already use a light
     tint, so this only changes the cream-section eyebrows. */
  color: var(--accent-strong);
  margin-bottom: 20px;
}
#hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  /* contrast fix 2026-05-01: ID selector was beating .home-hero-copy h1's
     light color, leaving dark var(--ink) text on the dark hero gradient.
     The hero card always has a dark bg, so h1 must be light here. */
  color: #f6fbff;
}
#hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.hero-subtitle {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 0 36px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.button-primary {
  background: var(--ink);
  color: var(--paper);
}
.button-primary:hover { background: var(--accent); transform: translateY(-1px); }
.button-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.button-secondary:hover { border-color: var(--ink); }
.button-ghost {
  background: transparent;
  color: var(--accent-strong, #b8481f);
  border: 0;
  padding: 12px 4px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.button-ghost:hover { border-bottom-color: var(--accent-strong, #b8481f); }
.home-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
/* \00B7 = middot, written as an ASCII escape so the rule survives any
   stylesheet charset mis-detection (was a literal "·" rendering as "·"). */
.home-proof-strip span::before { content: "\00B7  "; color: var(--accent); margin-right: 4px; }
.home-proof-strip span:first-child::before { display: none; }
.home-hero-panel {
  /* contrast fix 2026-05-01: was overriding the dark navy bg from line ~798
     with var(--surface) (cream), which left the panel's light text invisible
     on a near-white panel. Keep only the structural styles here; the dark
     bg + light copy come from the earlier rule. */
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(7,17,32,0.18), 0 8px 24px rgba(7,17,32,0.22);
}
.home-hero-panel .kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* explicit light tint so the eyebrow reads on the dark panel bg */
  color: rgba(232, 238, 245, 0.78);
  display: block;
  margin-bottom: 20px;
}
.home-hero-panel .muted.small { font-size: 0.82rem; line-height: 1.5; margin: 0; }
.home-hero-panel .muted.small a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.section { padding: 80px 0; border-top: 1px solid var(--line); }
.narrative-section { background: var(--surface); }
.audience-section { background: var(--paper-alt); }
.section-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
@media (max-width: 720px) {
.section-head { grid-template-columns: 1fr; gap: 16px; }
}
.section-title {
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  color: var(--ink);
  line-height: 1.2;
}
/* contrast fix 2026-05-01: Fraunces at weight 500/400 rendered too thin on
   Windows ClearType + cream paper, making display headlines and narrative
   body look washed out. Bumped weights and switched body to --ink. */
.section-title.serif { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.section-head p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }
.narrative-body {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}
.narrative-body p { margin: 0 0 20px; }
.narrative-body strong { color: var(--ink); font-weight: 600; }
.narrative-body em { color: var(--accent); font-style: italic; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 760px) {
.steps-grid { grid-template-columns: 1fr; }
}
.step-card {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.15s;
}
.step-card:hover { border-color: var(--accent); }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 14px;
}
.step-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}
.step-desc { color: var(--ink-soft); font-size: 0.97rem; margin: 0; line-height: 1.6; }
.inline-link {
  /* contrast fix 2026-05-02: --accent on cream = 2.96:1 fails WCAG. */
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.inline-link:hover { border-bottom-color: var(--accent-strong); }
/* Sample verdict card — homepage "show, don't tell" (real data, links to the review). */
.verdict-sample { display: grid; grid-template-columns: 172px 1fr; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: var(--surface); text-decoration: none; max-width: 660px; margin: 0 auto 14px; transition: border-color 0.15s, transform 0.15s; }
.verdict-sample:hover { border-color: var(--accent); transform: translateY(-2px); }
.verdict-score-col { background: #0b141f; color: #f6fbff; padding: 24px 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; }
.verdict-laddoo { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.verdict-score { font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.verdict-score small { font-size: 1rem; opacity: 0.6; }
.verdict-tier { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #1a0f0a; }
.verdict-body { padding: 22px 24px; }
.verdict-kicker { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.verdict-body h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 6px 0 8px; color: var(--ink); }
.verdict-body p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; margin: 0 0 12px; }
.verdict-cta { color: var(--accent-strong); font-weight: 500; font-size: 0.9rem; }
@media (max-width: 560px) {
.verdict-sample { grid-template-columns: 1fr; }
.verdict-score-col { flex-direction: row; align-items: center; gap: 14px; }
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 760px) {
.cards-grid { grid-template-columns: 1fr; }
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
}
.card .kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}
.card p { color: var(--ink-soft); font-size: 0.96rem; margin: 0 0 18px; }
.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
  display: block;
}
.review-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.review-card .kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.review-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.review-card p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.section-cta { margin-top: 36px; text-align: center; }
.newsletter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 760px) {
.newsletter { grid-template-columns: 1fr; padding: 28px; }
}
.newsletter h2 { font-size: 1.7rem; margin: 8px 0 8px; line-height: 1.2; }
.newsletter .muted { color: var(--muted); font-size: 0.95rem; margin: 0; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-stack .field label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.checkbox-field {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.checkbox-field input { margin-top: 3px; }
.success { color: var(--green); font-size: 0.88rem; margin: 6px 0 0; }
.error-message { color: var(--red); font-size: 0.88rem; margin: 6px 0 0; }
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0 40px;
  margin-top: 80px;
}
.footer strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.footer a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(250,249,245,0.15); }
.footer a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.footer-entity { color: rgba(250,249,245,0.7); font-size: 0.88rem; margin-top: 6px; }
.footer-stack { display: flex; flex-direction: column; gap: 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
.footer-contact { display: flex; flex-direction: column; gap: 4px; }
.footer-contact .muted { color: rgba(250,249,245,0.6); font-size: 0.85rem; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: 0.9rem;
  border-top: 1px solid rgba(250,249,245,0.12);
  padding-top: 28px;
}
.muted.small { font-size: 0.85rem; }
/* Shared shell overrides */
.brand-copy {
  min-width: 0;
}
.brand-copy span {
  white-space: nowrap;
}
.nav {
  position: relative;
}
.nav-toggle {
  display: none;
  margin-left: auto;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover {
  border-color: var(--line-strong);
}
.nav-toggle-box {
  display: grid;
  gap: 5px;
}
.nav-toggle-box span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.mobile-nav {
  display: none;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  background: rgba(250, 249, 245, 0.98);
}
.mobile-nav a {
  display: block;
  width: 100%;
  padding: 15px 18px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child {
  border-bottom: none;
}
.mobile-nav a[aria-current="page"],
.mobile-nav a:hover {
  background: var(--paper-alt);
  color: var(--ink);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
}
.narrative-body p {
  max-width: 640px;
}
#hero-title {
  font-size: clamp(2rem, 5.2vw, 4.2rem);
}
.latest-review-card,
.latest-review-placeholder {
  min-width: 0;
}
.latest-review-head {
  align-items: flex-start;
}
.latest-review-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.latest-review-score strong {
  margin: 0;
}
.latest-review-score span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.review-id-pill {
  white-space: nowrap;
}
.footer {
  padding: 56px 0 40px;
}
.footer-grid {
  grid-template-columns: 2fr 1fr;
}
.footer-home-link {
  border-color: rgba(250, 249, 245, 0.28);
  border-bottom: 0;
  color: var(--paper);
}
.footer-home-link:hover {
  border-bottom: 0;
  border-color: var(--accent);
  color: var(--accent);
}
body.homepage .footer {
  padding: 56px 0 40px;
}
body.homepage .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  border-top: 0;
  padding-top: 0;
}
body.homepage .nav-links a[aria-current="page"],
body.homepage .nav-links a:hover,
body.homepage .mobile-nav a[aria-current="page"],
body.homepage .mobile-nav a:hover,
body.homepage .footer-links a:hover,
body.homepage .nav-toggle {
  color: #f6fbff;
}
/* Scoped like the block near line 745: light ink only in the dark regions
   (header, hero, footer) — never on the cream sections (2026-07-04 fix). */
body.homepage .brand-copy span,
body.homepage .nav-links a,
body.homepage .mobile-nav a,
body.homepage .footer-links a,
body.homepage .home-hero .muted,
body.homepage .footer .muted,
body.homepage .home-hero .card p,
body.homepage .home-hero .panel p,
body.homepage .home-hero .step-desc,
body.homepage .hero-subtitle,
body.homepage .footer-contact span,
body.homepage .footer-entity,
body.homepage .latest-review-date,
body.homepage .latest-review-score span,
body.homepage .mini-card span {
  color: rgba(226, 236, 248, 0.74);
}
body.homepage .mobile-nav,
body.homepage .nav-toggle {
  border-color: rgba(226, 236, 248, 0.12);
}
body.homepage .mobile-nav {
  background: rgba(7, 17, 27, 0.98);
}
body.homepage .mobile-nav a {
  border-bottom-color: rgba(226, 236, 248, 0.12);
}
body.homepage .mobile-nav a[aria-current="page"],
body.homepage .mobile-nav a:hover {
  background: rgba(226, 236, 248, 0.08);
}
body.legal-page .nav-links a[aria-current="page"],
body.legal-page .nav-links a:hover,
body.legal-page .mobile-nav a[aria-current="page"],
body.legal-page .mobile-nav a:hover,
body.legal-page .footer-links a:hover,
body.legal-page .nav-toggle {
  color: #f6fbff;
}
body.legal-page .brand-copy span,
body.legal-page .nav-links a,
body.legal-page .mobile-nav a,
body.legal-page .footer-links a,
body.legal-page .muted,
body.legal-page p,
body.legal-page li {
  color: rgba(226, 236, 248, 0.76);
}
body.legal-page .mobile-nav,
body.legal-page .nav-toggle {
  border-color: rgba(226, 236, 248, 0.14);
}
body.legal-page .mobile-nav {
  background: rgba(8, 17, 27, 0.98);
}
body.legal-page .mobile-nav a {
  border-bottom-color: rgba(226, 236, 248, 0.12);
}
body.legal-page .mobile-nav a[aria-current="page"],
body.legal-page .mobile-nav a:hover {
  background: rgba(226, 236, 248, 0.08);
}
@media (max-width: 1024px) {
.brand-copy span {
    display: none;
  }
.nav-links {
    gap: 14px;
  }
}
@media (max-width: 720px) {
.section {
    padding: 48px 0;
  }
.home-hero {
    padding: 48px 0 40px;
  }
.nav {
    min-height: 72px;
    padding: 12px 0;
    gap: 16px;
  }
.nav-links {
    display: none;
  }
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
.mobile-nav {
    display: flex;
    flex-direction: column;
  }
.mobile-nav[hidden] {
    display: none !important;
  }
.home-hero-grid,
  .audience-grid,
  .cards-grid,
  .steps-grid,
  .latest-review-grid,
  .newsletter,
  .footer-grid {
    grid-template-columns: 1fr;
  }
.section-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }
.home-hero-copy,
  .home-hero-panel,
  .newsletter,
  .newsletter-inline,
  .card,
  .panel,
  .review-card {
    padding: 22px;
  }
.latest-review-score strong {
    font-size: 2.2rem;
  }
.review-id-pill {
    display: none;
  }
.footer {
    padding: 40px 0 32px;
    margin-top: 64px;
  }
body.homepage .footer {
    padding: 40px 0 32px;
  }
body.homepage .footer-grid {
    grid-template-columns: 1fr;
  }
.footer-links {
    padding-top: 20px;
  }
}
/* === HOMEPAGE storyline (Phase 4, 2026-05-03) === */
.homepage .story-section .muted {
  color: var(--ink-soft);
}
.homepage .top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.homepage .top-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.homepage .top-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.07);
  border-color: var(--accent);
}
.homepage .top-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.homepage .top-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--ink);
}
.homepage .top-tier {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.homepage .score-gauge {
  position: relative;
  width: 84px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--score, 0) * 1%), var(--accent-soft) 0);
  color: var(--ink);
}
.homepage .score-gauge::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--surface);
}
.homepage .score-gauge strong,
.homepage .score-gauge span {
  position: relative;
  z-index: 1;
}
.homepage .score-gauge strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 0.9;
}
.homepage .score-gauge span {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--ink-soft);
}
.homepage .top-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}
.homepage .top-card-link {
  margin-top: auto;
  font-weight: 700;
  color: var(--accent-strong);
}
@media (max-width: 768px) {
.homepage .top-grid {
    grid-template-columns: 1fr;
  }
}
/* === CATEGORY LANDING storyline (Phase 3, 2026-05-03) === */
.category-landing-page .lead { max-width: 60ch; font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); margin: 12px 0 24px; }
.category-landing-page .picks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
@media (max-width: 768px) {
.category-landing-page .picks-grid { grid-template-columns: 1fr; }
}
.category-landing-page .pick-card { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.category-landing-page .pick-card h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.category-landing-page .pick-card .pick-score { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; color: var(--accent); }
.category-landing-page .pick-card a { text-decoration: none; color: inherit; }
/* === REVIEW TABS — scrollspy anchor pattern (Phase 1, 2026-05-03) === */
.review-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  margin: 0 -24px 24px;
  padding: 12px 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.review-tabs::-webkit-scrollbar { display: none; }
.review-tabs a {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.92rem;
  transition: background 0.18s, color 0.18s;
}
.review-tabs a:hover { background: var(--paper-alt); color: var(--ink); }
.review-tabs a.is-active {
  background: var(--ink);
  color: var(--paper);
}
.review-tab-section {
  scroll-margin-top: 80px;  /* offsets the sticky tab bar height */
  padding: 16px 0;
}
.review-tab-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* === REVIEW: vendor right-of-reply (A2, 2026-06-01) — shared so per-page HTML stays lean === */
.review-section--vendor-response { border-left: 3px solid var(--accent, #7c5cff); padding-left: 18px; background: rgba(124,92,255,.05); border-radius: 8px; }
.review-vendor-response__meta { color: var(--ink-soft, #9494a8); font-size: .9em; margin-bottom: 10px; }
.review-vendor-response__body { margin: 0 0 10px; font-style: italic; border: 0; padding: 0; }
.review-vendor-response__body p { margin: 0 0 8px; }
.review-vendor-response__note { color: var(--ink-soft, #9494a8); font-size: .85em; }
/* === REVIEW PAGE v2 SHELL (2026-06-12 impeccable pass 1) ===
   The 639 generated v2 review pages emit these classes but had ZERO rules in
   any linked stylesheet (rendered as bare browser-default text). Token-based
   so the block adapts to both the light system and theme-dark overrides. */
.review-page--v2 { width: min(calc(100% - 32px), 760px); margin: 0 auto; padding: 32px 0 64px; }
.review-page--v2 .review-hero { padding: 24px 0 28px; border-bottom: 1px solid var(--line); }
.review-hero__eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.review-page--v2 .review-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.15; margin: 0 0 12px; }
.review-hero__verdict { font-family: var(--font-mono); font-size: 1.05rem; margin: 0 0 10px; }
.review-hero__verdict strong { display: inline-block; padding: 2px 12px; border: 1px solid var(--line-strong); border-radius: 999px; }
.review-hero__headline { font-size: 1.15rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }
.review-hero__cta { display: inline-block; font-weight: 600; color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.review-opinion__byline { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin: 0 0 8px; }
.review-opinion__body p { font-size: 1.02rem; line-height: 1.7; }
.review-page--v2 .review-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
/* Quick answer + Pricing & access (2026-08-21, concept-eval awesome-aeo-seo) — BLUF block and
   the pricing spoke; both render only from scorecard pricing_facts (absent = absent). */
.review-quick { margin: 20px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); }
.review-quick h2 { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 6px; }
.review-quick p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.review-pricing { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.review-pricing li { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); align-items: start; }
.review-pricing__k { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.review-pricing__v { font-size: 0.98rem; line-height: 1.5; }
.review-pricing__v q { quotes: "\201C" "\201D"; }
.review-pricing__v q + q::before { content: " \201C"; }
.review-pricing__date { color: var(--muted); font-size: 0.85rem; }
.review-pricing__basis { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 560px) { .review-pricing li { grid-template-columns: 1fr; gap: 4px; } }
.review-page--v2 .review-section h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 12px; }
.review-section--two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.review-bullets { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.review-compared { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.review-compared li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.review-compared__axis { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-left: 8px; }
.review-compared li p { margin: 6px 0 0; }
.review-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.75rem; border: 1px solid var(--line-strong); }
.review-badge--off { color: var(--muted); }
.review-agent-score strong { font-family: var(--font-mono); }
.review-evidence, .review-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; }
.review-evidence li, .review-checklist li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.review-evidence__date { color: var(--muted); font-size: 0.85rem; }
.review-evidence__verified { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green); margin-left: 6px; }
.review-meta { padding: 24px 0 0; font-size: 0.9rem; color: var(--muted); }
.review-embed { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line, #d8cfc0); border-radius: 12px; }
.review-embed > summary { cursor: pointer; font-weight: 700; color: var(--fg, inherit); }
.review-embed__note { margin: 8px 0 10px; font-size: 0.85rem; }
.review-embed pre { overflow-x: auto; background: var(--accent-soft, #f6ede0); padding: 10px 12px; border-radius: 8px; margin: 4px 0 12px; }
.review-embed pre code { background: none; padding: 0; font-size: 0.82rem; white-space: pre; }
.site-header__inner { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.site-header__inner nav { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.site-header__inner nav a { text-decoration: none; color: var(--ink-soft); font-size: 0.92rem; white-space: nowrap; }
.site-header__inner nav a:hover { color: var(--accent-strong); }
/* === MOBILE NAV FALLBACK (2026-06-12 impeccable pass 1) ===
   .nav-links was display:none <=720px with a .nav-toggle/.mobile-nav system
   that only the 47 site-shell.js pages instantiate -- every other page lost
   ALL navigation on mobile. Pages without the toggle get a horizontally
   scrollable strip; pages with the JS toggle keep their menu untouched. */
@media (max-width: 720px) {
.nav:not(:has(.nav-toggle)) { flex-wrap: wrap; }
.nav:not(:has(.nav-toggle)) .nav-links { display: flex; flex-basis: 100%; order: 3; overflow-x: auto; gap: 14px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav:not(:has(.nav-toggle)) .nav-links::-webkit-scrollbar { display: none; }
}
/* === OVERFLOW HARDENING (2026-06-12 impeccable pass 1) ===
   /for-agents/ bare pre/code blocks overflowed 437px at 390vw; /reviews/
   ticker tape track floored at min-content of unbreakable slugs (54px bleed). */
pre { overflow-x: auto; max-width: 100%; }
:not(pre) > code { overflow-wrap: anywhere; }
@media (max-width: 768px) {
.ticker-row { grid-template-columns: minmax(0, 1fr); }
.tape-item strong { overflow-wrap: anywhere; }
}
/* === HOMEPAGE COMPONENTS — ported from index.html inline <style> blocks
   (2026-06-12 go-cream pass 2). Page-compactness invariant: shared assets
   only. Components authored on the retired neon-dark theme are re-expressed
   on the cream tokens; the deliberate dark-navy accents of the light system
   (.home-hero-panel, .developer-section, .scorecard-summary, .tp-code
   terminal) keep their designed dark surfaces. */

.agent-find-panel { display: grid; gap: 18px; align-content: start; }
.agent-find-panel .kicker { margin-bottom: 0; }
.agent-find-panel h2 { margin: 0; max-width: 11ch; color: #f6fbff; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 600; line-height: 0.98; }
.agent-search-form { display: grid; gap: 12px; }
.agent-search-form input { min-height: 48px; padding: 0 14px; border: 1px solid rgba(232, 238, 245, 0.22); border-radius: 8px; background: rgba(232, 238, 245, 0.08); color: #f6fbff; font: inherit; }
.agent-search-form input::placeholder { color: rgba(232, 238, 245, 0.68); }
.agent-search-form input:focus,
.agent-search-form button:focus-visible { outline: 3px solid rgba(217, 119, 87, 0.35); outline-offset: 2px; border-color: var(--accent); }
.agent-search-form button { min-height: 48px; border: 0; border-radius: 8px; background: var(--accent); color: #0b141f; cursor: pointer; font-weight: 800; }
.story-section { background: var(--paper); color: var(--ink); }
.story-section.alt { background: var(--paper-alt); }
.story-section p { color: #2a3542; }
.story-head { max-width: 760px; margin-bottom: 32px; }
.story-head .section-title { margin-top: 0; }
.use-case-top { color: #223041; font-weight: 750; }
/* Tool picker — re-expressed on cream (was authored on neon-dark). */
.tool-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 24px; padding: 12px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 14px; }
.tp-tab { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 96px; padding: 14px 10px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--ink-soft); font: inherit; font-size: 0.84rem; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.tp-tab svg { width: 26px; height: 26px; stroke-width: 1.6; }
.tp-tab:hover { background: rgba(26, 26, 26, 0.05); color: var(--ink); }
.tp-tab.is-active { background: var(--accent-soft); border-color: rgba(217, 119, 87, 0.45); color: var(--ink); }
.tp-tab.is-active svg { color: var(--accent-strong); }
@keyframes tp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
.tp-tab { min-width: 76px; font-size: 0.78rem; padding: 10px 8px; }
.tp-tab svg { width: 22px; height: 22px; }
}
.cp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 2px 6px; background: rgba(26, 26, 26, 0.07); border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--ink-soft); }
.scorecard-summary { padding: 28px; background: #0b141f; color: #f6fbff; }
.scorecard-summary p { color: rgba(232, 238, 245, 0.82); }
.scorecard-summary .inline-link { color: #f6e3d8; }
.scorecard-summary h3 { margin: 8px 0 12px; color: #f6fbff; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 0.98; }
.scorecard-score { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 22px; color: #f6fbff; font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.scorecard-score span { color: rgba(232, 238, 245, 0.72); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.scorecard-claims { padding: 8px 28px 24px; }
.claim-row { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.claim-row:last-child { border-bottom: 0; }
.claim-title { margin: 0; color: var(--ink); font-weight: 750; line-height: 1.35; }
.claim-evidence { margin: 0; color: #394555; font-size: 0.92rem; }
.claim-verdict { justify-self: start; min-height: 26px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid rgba(74, 124, 89, 0.28); border-radius: 999px; color: #2f6c47; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.mcp-code { overflow-x: auto; margin: 26px 0; padding: 20px; border: 1px solid rgba(232, 238, 245, 0.14); border-radius: 8px; background: #050a11; color: #f6fbff; font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.7; white-space: pre; }
@media (max-width: 760px) {
.scorecard-claims, .scorecard-summary { padding: 22px; }
}
/* In-flight strip — re-expressed on cream (was cyan pulse on dark). */
.in-flight-strip { padding: 18px 0; background: var(--accent-soft); border-top: 1px solid rgba(217, 119, 87, 0.25); border-bottom: 1px solid rgba(217, 119, 87, 0.25); }
.ifs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ifs-pulse { display: inline-block; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: ifs-pulse 1.6s ease-out infinite; }
@keyframes ifs-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(217, 119, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0); } }
@media (prefers-reduced-motion: reduce) {
.ifs-pulse { animation: none; }
}
.ifs-kicker { color: var(--accent-strong); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.ifs-text { flex: 1 1 auto; min-width: 200px; color: var(--ink-soft); font-size: 0.95rem; }
.ifs-cta { color: var(--ink); font-weight: 500; font-size: 0.92rem; text-decoration: none; border-bottom: 1px solid rgba(217, 119, 87, 0.5); padding-bottom: 2px; transition: border-color .15s ease, color .15s ease; }
.ifs-cta:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }
/* Flat footer nav — homepage-only component; its context is the designed
   dark-navy homepage footer (body.homepage), so it keeps light-on-dark ink. */
.footer-nav-flat { display: grid; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(232, 238, 245, 0.12); }
.fnf-group { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; column-gap: 18px; font-size: 0.9rem; }
.fnf-label { min-width: 88px; color: rgba(232, 238, 245, 0.46); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.fnf-group a { color: rgba(232, 238, 245, 0.72); text-decoration: none; transition: color 0.15s ease; }
.fnf-group a:hover { color: #f6e3d8; }
@media (max-width: 720px) {
.fnf-group { row-gap: 4px; column-gap: 14px; }
.fnf-label { min-width: 100%; margin-bottom: 4px; }
}
.api-cta-strip { background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; color: var(--ink); }
.api-cta-strip code { color: inherit; }
/* Footer contact label (ported from the retired theme-dark layer). */
p.footer-contact::before { content: "Questions? Disputes?"; display: block; color: var(--muted); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
/* Reviews view-toggle [hidden] fix (functional, ported from theme-dark.css):
   page CSS sets .review-grid-wrap{display:grid} at (0,2,0) which beats the UA
   [hidden]{display:none} at (0,1,0) — clicking "Compact" left cards visible. */
.reviews-page .review-grid-wrap[hidden],
.reviews-page .review-table-wrap[hidden],
.reviews-page [data-review-cards][hidden],
.reviews-page [data-review-table][hidden] { display: none !important; }
/* === HOMEPAGE NARRATIVE PASS (2026-07-04 founder directive) ===
   "How a review happens" strip + "three doors" CTA row — the missing story
   beat between the sample verdict and the audience cards. Token-based. */
.how-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 940px;
  margin: 26px auto 14px;
}
.how-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 20px;
}
.how-step-n {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-strong);
  color: var(--accent-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.how-step h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.how-step p { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; margin: 0; }
@media (max-width: 760px) {
.how-strip { grid-template-columns: 1fr; }
}
.home-doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 8px;
}
/* Hero primary CTA sits INSIDE the dark hero card — the default ink-on-paper
   .button-primary disappears there. Match the hero panel's accent button. */
.home-hero .hero-actions .button-primary { background: var(--accent); color: #0b141f; font-weight: 700; }
.home-hero .hero-actions .button-primary:hover { background: var(--accent-strong, #b8481f); color: #fff; }
.home-hero .hero-actions .button-ghost { color: rgba(238, 243, 251, 0.85); }
.home-hero .hero-actions .button-ghost:hover { color: #fff; }
/* Deadline lane (2026-07-24) — quiet, one line, plain language. Deliberately NOT a
   shouting banner: most visitors are not EU deployers, and the ones who are should
   find it instantly without everyone else being interrupted. */
.home-hero .hero-deadline {
  margin: 1.1rem 0 0; padding: .7rem .9rem; max-width: 46rem;
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  background: rgba(217, 119, 87, .1); color: rgba(238, 243, 251, .92);
  font-size: .96rem; line-height: 1.5;
}
.home-hero .hero-deadline a { color: var(--accent); font-weight: 700; }
.home-hero .hero-deadline a:hover { color: #fff; }
/* Small screens: let the minimal header nav wrap instead of clipping the
   last link behind a hidden horizontal scroll (2026-07-04 narrative pass). */
@media (max-width: 480px) {
.site-header__inner { flex-wrap: wrap; padding: 10px 0; gap: 8px 24px; }
.site-header__inner nav { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
}
/* Three-doors block (2026-07-24 simplification). Replaces a 4-door / 15-link grid.
   One card per kind of visitor, one destination each — the whole card is the target
   so there is nothing to aim at and no secondary links to weigh up. */
.ways-grid {
  display: grid; gap: 1rem; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.way-card {
  display: block; padding: 1.25rem 1.35rem; text-decoration: none; color: inherit;
  border: 1px solid var(--line, #d8cfc0); border-radius: 14px; background: var(--surface, #fff);
  transition: border-color .15s ease, transform .15s ease;
}
.way-card:hover { border-color: var(--accent, #d97757); transform: translateY(-2px); }
.way-card h3 { margin: 0 0 .45rem; font-size: 1.12rem; }
.way-card p { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.5; opacity: .85; }
.way-card .way-go { font-weight: 700; color: var(--accent, #d97757); font-size: .95rem; }
/* "The record" merged block (2026-07-24 pass 3). Was three separate sections telling
   three framings of the same thing. Sub-headings keep it scannable inside one section. */
.record-sub {
  margin: 1.8rem 0 .8rem; font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .65; font-weight: 700;
}
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-chip {
  display: inline-block; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--line, #d8cfc0); text-decoration: none; color: inherit;
  font-size: .9rem; transition: border-color .15s ease, background .15s ease;
}
.cat-chip:hover { border-color: var(--accent, #d97757); background: rgba(217,119,87,.1); }
.record-all { margin: 1.2rem 0 0; font-weight: 700; }
.record-all a { color: var(--accent, #d97757); }
/* ============================================================================
   site-v3.css — Hlido design layer · WORLD B "the consumer-test institute"
   (2026-08-21, founder pick after the impeccable critique — supersedes the
   2026-07-13 dark-default "Resend-grade" layer that lived in this file)
   ----------------------------------------------------------------------------
   Loaded AFTER site-v2.css on every page (hand-built pages link v2+v3; the
   generated review/compare surfaces load site.css = v2+v3 built by
   scripts/build-unified-css.mjs). v2 supplies structure + component classes;
   this file (a) remaps the shared design tokens so every v2 component inherits
   the new world, and (b) restyles the surfaces that carry the brand.

   THE WORLD (DESIGN.md is written from the built pages, not from here):
   - dTest / Stiftung Warentest / Which? grammar: the independent test magazine
     every EU reader recognises on sight. Verdict before prose; the seal is the
     loudest object on a page; "In short" carries the judgment in one sentence.
   - Colour strategy: COMMITTED. Institute blue carries the masthead, the seals
     and the section marks — and nowhere else (red → blue, founder 2026-08-21 evening). Black ink on white stock; a warm
     grey stock for panels; PASS/FAIL/tier colours are DATA, never decoration.
   - Type: Archivo (variable, wdth 75 = condensed black for display, seals,
     table numerals) + Libre Franklin (reading). Monospace is reserved for ids,
     dates and measurements — never as a "technical" costume.
   - Refusals honoured on the surfaces we rebuilt (home, review template): no
     eyebrow/kicker above a heading, no hero-metric tiles, no same-size card
     grids, no section numbers, no coloured side-tab borders, no glass/blur, no
     gradient text, squared corners (2–4px) throughout.
   - `.eyebrow` / `.kicker` still appear in ~4,000 generated pages from older
     builders; they are restyled here as quiet section marks and are DEBT —
     remove them template-by-template (tracked in brain/design/2026-08-21-revamp/).

   WCAG AA: every token pair below is ≥ 4.5:1 on its ground (blue text uses
   --accent-strong #083A8C = 9.6:1 on white; white on --accent #0A47A9 = 8.1:1).
   ========================================================================== */

/* ----------------------------------------------------------------
   1. TOKENS — the single light world (no dark variant by design: the
      record is read on a procurement desk in daylight and printed)
   ---------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --card: #0d0d0d;

  /* stock */
  --paper: #000000;              /* page */
  --paper-alt: #0a0a0a;          /* panels, zebra bands */
  --surface: #0d0d0d;            /* cards */
  --surface-raise: #131313;

  /* ink */
  --ink: #ffffff;                /* 18.5:1 on white */
  --ink-soft: rgba(255, 255, 255, 0.72);           /* 10.7:1 */
  --muted: rgba(255, 255, 255, 0.52);              /* 5.9:1 — small text AA */

  /* rules */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.24);
  --rule: var(--line);

  /* institute blue — the ONE accent (founder 2026-08-21: red → blue) */
  --accent: #ffffff;             /* fills (white text on it: 8.1:1) */
  --accent-strong: #ffffff;      /* blue as TEXT on white: 9.6:1 */
  --accent-soft: rgba(255, 255, 255, 0.08);
  --accent-ink: #000000;

  /* status (data colours) */
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;

  /* tier bands (public thresholds only; weights stay private) */
  --tier-vital: #4ade80;
  --tier-steady: #60a5fa;
  --tier-fading: #fbbf24;
  --tier-flatline: #f87171;

  /* "deep" contrast blocks (footer, scorecard summary, terminal panels) */
  --deep: #000000;
  --deep-2: #050505;
  --deep-ink: #ffffff;
  --deep-ink-soft: rgba(255, 255, 255, 0.74);
  --deep-line: rgba(255, 255, 255, 0.18);

  /* no gradients in this world — tokens kept so v2 rules resolve to solids */
  --grad-hero: var(--paper);
  --grad-band: var(--paper-alt);
  --grad-accent-line: var(--accent);

  /* elevation — flat world; depth comes from rules and stock, not shadow */
  --shadow-1: 0 24px 60px -40px rgba(0, 0, 0, 0.9);
  --shadow-2: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
  --shadow-3: 0 20px 48px -20px rgba(0, 0, 0, 0.35);

  /* radii — squared */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* spacing rhythm */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 22px;
  --space-4: 36px;
  --space-5: 56px;
  --space-6: 88px;

  /* type scale */
  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.14rem;
  --text-xl: clamp(1.35rem, 2.2vw, 1.7rem);
  --text-2xl: clamp(1.7rem, 3vw, 2.3rem);
  --text-3xl: clamp(2.3rem, 4.4vw, 3.4rem);
  --text-hero: clamp(2.6rem, 6vw, 4.6rem);

  /* fonts — loaded via @import at the top of site-v2.css (Google Fonts) */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --max: 1120px;
}
/* ----------------------------------------------------------------
   2. BASE
   ---------------------------------------------------------------- */
html { scroll-padding-top: 84px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--ink);
}
p { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; }
code, pre, kbd { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }
.muted { color: var(--muted); }
.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; }
/* ----------------------------------------------------------------
   3. MASTHEAD — the red band. Both header markups in use:
      hand-built: .site-header > .container.nav > .brand + .nav-links
      generated : .site-header > .site-header__inner > .site-brand + nav
      (`body[class]` matches v2's body.homepage / body.legal-page specificity)
   ---------------------------------------------------------------- */
body .site-header, body[class] .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--accent);
  color: #fff;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
body .site-header .nav, body[class] .site-header .nav,
body .site-header__inner, body[class] .site-header__inner { min-height: 60px; gap: 18px; }
body .brand-mark, body[class] .brand-mark { display: none !important; }
body .brand, body[class] .brand { gap: 12px; align-items: baseline; }
body .brand-copy strong, body[class] .brand-copy strong,
body .site-brand, body[class] .site-brand {
  display: inline-block;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #fff;
  line-height: 1;
}
body .brand-copy span, body[class] .brand-copy span {
  display: inline-block;
  margin: 0 0 0 10px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.9);
}
body .nav-links, body[class] .nav-links, body .site-header__inner nav, body[class] .site-header__inner nav { gap: 22px; }
body .nav-links a, body[class] .nav-links a,
body .site-header__inner nav a, body[class] .site-header__inner nav a {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
body .nav-links a:hover, body[class] .nav-links a:hover,
body .nav-links a[aria-current="page"], body[class] .nav-links a[aria-current="page"],
body .site-header__inner nav a:hover, body[class] .site-header__inner nav a:hover,
body .site-header__inner nav a[aria-current="page"], body[class] .site-header__inner nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: #fff;
}
/* the one pill: "Check a tool" — white on the blue band, markup-free */
body .nav-links a[href="/check/"], body[class] .nav-links a[href="/check/"],
body .site-header__inner nav a[href="/check/"], body[class] .site-header__inner nav a[href="/check/"] {
  background: var(--surface);
  color: var(--accent-strong);
  padding: 7px 12px;
  border-radius: 2px;
  border-bottom: 0;
}
body .nav-links a[href="/check/"]:hover, body[class] .nav-links a[href="/check/"]:hover,
body .site-header__inner nav a[href="/check/"]:hover, body[class] .site-header__inner nav a[href="/check/"]:hover { background: var(--paper-alt); }
body .nav-links a[href="/check/"], body[class] .nav-links a[href="/check/"] { order: 99; }
body .nav-toggle, body[class] .nav-toggle { color: #fff; }
body .mobile-nav, body[class] .mobile-nav { background: var(--accent); }
body .mobile-nav a, body[class] .mobile-nav a { color: #fff; }
@media (max-width: 760px) {
  body .site-header .nav, body[class] .site-header .nav { flex-wrap: wrap; min-height: 0; padding: 10px 0 8px; gap: 8px 14px; }
  body .nav-links, body[class] .nav-links { gap: 14px; width: 100%; }
  body .nav-links a, body[class] .nav-links a { font-size: 0.86rem; padding: 4px 0; }
  body .nav-links a[href="/check/"], body[class] .nav-links a[href="/check/"] { padding: 5px 9px; }
  body .brand-copy span, body[class] .brand-copy span { display: none; }
  body .site-header__inner, body[class] .site-header__inner { flex-wrap: wrap; min-height: 0; padding: 10px 0 8px; gap: 6px 14px; }
  body .site-header__inner nav a, body[class] .site-header__inner nav a { font-size: 0.86rem; }
  html { scroll-padding-top: 100px; }
}
/* ----------------------------------------------------------------
   4. CONTROLS
   ---------------------------------------------------------------- */
.button, body .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  box-shadow: none;
  line-height: 1;
  cursor: pointer;
}
.button:hover, body .button:hover { border-color: var(--accent); color: var(--accent-strong); background: transparent; transform: none; }
.button-primary, body .button-primary, body.homepage .home-hero .hero-actions .button-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.button-primary:hover, body .button-primary:hover, body.homepage .home-hero .hero-actions .button-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.button-secondary, body .button-secondary { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.button-ghost, body .button-ghost, body.homepage .home-hero .hero-actions .button-ghost { border-color: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; padding-left: 0; padding-right: 0; }
.button-ghost:hover, body .button-ghost:hover { color: var(--accent-strong); }
.inline-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--line-strong); }
.inline-link:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
input, select, textarea, .input, .select, .textarea {
  font-family: var(--font-body);
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
/* generic section marks: the accent block before a section title. */
.section-title, body.homepage .section-title, .page-hero h1 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
}
.section-title, body.homepage .section-title {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}
.section-title::before, body.homepage .section-title::before { content: ""; flex: none; width: 12px; height: 1em; background: var(--accent); }
.section-title small { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: auto; }
.section-head p, .story-head p, .page-hero p { color: var(--ink-soft); }
.story-head { max-width: 72ch; }
/* .eyebrow / .kicker — DEBT on older generated templates; quiet section mark */
.eyebrow, .kicker, body.homepage .kicker, .home-hero-panel .kicker, .review-card .kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 8px;
}
/* meta line — the information a former kicker carried, set BELOW its heading, quiet */
.meta-line { font-size: 0.86rem; color: var(--muted); margin: 4px 0 12px; }
/* tier chips — solid, squared, data colour */
.tier-chip, .top-tier, .tier {
  display: inline-block;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  padding: 5px 7px 4px;
  border-radius: 2px;
  border: 0;
  line-height: 1;
  vertical-align: middle;
}
.tier-chip--vital, .top-tier-vital { background: var(--tier-vital); color: #fff; }
.tier-chip--steady, .top-tier-steady { background: var(--tier-steady); color: #fff; }
.tier-chip--fading, .top-tier-fading { background: var(--tier-fading); color: #fff; }
.tier-chip--flatline, .top-tier-flatline { background: var(--tier-flatline); color: #fff; }
.tier-chip--reviewed, .top-tier-reviewed { background: var(--ink-soft); color: #fff; }
/* the TESTED seal — the loudest object on any surface that carries one */
.seal {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: none; text-align: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--accent);
}
.seal__n { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.seal__t { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; margin-top: 4px; line-height: 1; }
.seal__s { font-family: var(--font-display); font-weight: 600; font-size: 0.56rem; letter-spacing: 0.1em; margin-top: 6px; opacity: 0.92; line-height: 1; text-transform: uppercase; }
.seal--lg { width: 168px; height: 168px; }
.seal--lg .seal__n { font-size: 64px; }
.seal--lg .seal__t { font-size: 0.82rem; }
.seal--sm { width: 84px; height: 84px; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--accent); }
.seal--sm .seal__n { font-size: 30px; }
.seal--sm .seal__t { font-size: 0.56rem; }
.seal--sm .seal__s { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes seal-press { 0% { transform: scale(1.12); opacity: 0; } 60% { transform: scale(0.98); opacity: 1; } 100% { transform: scale(1); } }
  .seal--press { animation: seal-press 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
/* Harvey balls — dimension read-outs; --p is the fill percentage */
.hb {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--line-strong); vertical-align: -2px; margin-left: 2px;
  background: conic-gradient(var(--ink) var(--p, 0%), transparent 0);
}
/* ----------------------------------------------------------------
   5. HOMEPAGE
   ---------------------------------------------------------------- */
body.homepage { background: var(--paper); color: var(--ink); }
body.homepage .home-hero {
  padding: 52px 0 40px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
  position: relative;
}
body.homepage .home-hero::before, body.homepage .home-hero::after { content: none; }
body.homepage .home-hero-grid { grid-template-columns: 1.15fr 420px; gap: 52px; align-items: center; }
/* who we are — the first sentence a newcomer reads; plain language, before the headline */
body.homepage .home-hero .hero-who, body.homepage .hero-who {
  font-size: 1.2rem; line-height: 1.45; color: var(--ink); max-width: 50ch; margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--line-strong);
}
body.homepage .hero-who strong { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.01em; }
#hero-title, body.homepage .home-hero-copy h1 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  max-width: 12ch;
  margin: 0 0 22px;
}
#hero-title em { font-style: normal; font-weight: 900; color: var(--accent); }
body.homepage .hero-subtitle, body.homepage .home-hero-copy p, body.homepage .home-hero-copy .hero-subtitle {
  font-size: 1.15rem; line-height: 1.45; color: var(--ink-soft); max-width: 52ch; margin: 0 0 14px;
}
body.homepage .hero-subtitle--strong strong { color: var(--ink); font-weight: 700; }
body.homepage .home-hero .agent-search-form {
  display: flex; border: 1px solid var(--line-strong); max-width: 560px; margin: 24px 0 10px; background: var(--surface);
}
body.homepage .home-hero .agent-search-form input {
  flex: 1; min-height: 48px; border: 0; border-radius: var(--r-md); padding: 12px 14px; font: 1rem var(--font-body); background: transparent; color: var(--ink); box-shadow: none;
}
body.homepage .home-hero .agent-search-form input::placeholder { color: var(--muted); }
body.homepage .home-hero .agent-search-form button {
  min-height: 48px; border: 0; border-radius: var(--r-md); background: var(--ink); color: #fff;
  font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 20px; cursor: pointer; white-space: nowrap;
}
body.homepage .home-hero .agent-search-form button:hover { background: var(--accent); }
@media (max-width: 420px) { body.homepage .home-hero .agent-search-form button { padding: 0 12px; font-size: 0.82rem; } }
body.homepage .hero-note { font-size: 0.92rem; color: var(--muted); max-width: 58ch; margin: 0; }
body.homepage .hero-note a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); }
body.homepage .hero-note a:hover { color: var(--accent-strong); }
/* featured test panel */
body.homepage .home-hero-panel, body.homepage .featured-test {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-alt);
  padding: 22px 22px 18px;
  box-shadow: none;
  margin-top: 8px;
}
body.homepage .featured-test__tag {
  position: absolute; top: -13px; left: 18px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 10px; line-height: 1;
}
body.homepage .featured-test h2 {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 400; font-size: 2rem; text-transform: none; margin: 4px 0 0; color: var(--ink); line-height: 1;
}
body.homepage .featured-test__meta { font-size: 0.86rem; color: var(--muted); margin: 6px 0 0; }
body.homepage .featured-test__lead { display: block; font-size: 0.74rem; letter-spacing: 0.12em; color: var(--accent-strong); margin-bottom: 6px; font-stretch: 100%; font-weight: 700; }
body.homepage .featured-test__row { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
body.homepage .featured-test__short { font-size: 0.98rem; line-height: 1.45; margin: 0; color: var(--ink); }
body.homepage .featured-test__short b { font-weight: 700; }
body.homepage .featured-test__dims { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; row-gap: 6px; font-size: 0.88rem; }
body.homepage .featured-test__cta { margin: 14px 0 0; font-weight: 700; }
body.homepage .featured-test__cta a { color: var(--ink); text-decoration-color: var(--line-strong); }
body.homepage .featured-test__cta a:hover { color: var(--accent-strong); }
body.homepage .home-hero-panel p, body.homepage .home-hero-panel span { color: inherit; }
body.homepage .home-hero-panel a { color: var(--ink); }
/* v2 ships the hero copy as a dark rounded card and tints its text light; flatten both */
body.homepage .home-hero .home-hero-copy, body.homepage .home-hero-copy {
  background: none; border: 0; border-radius: var(--r-md); padding: 0; box-shadow: none; color: var(--ink);
}
body.homepage .home-hero .home-hero-copy::before, body.homepage .home-hero .home-hero-copy::after { content: none; }
body.homepage .home-hero .home-hero-copy p, body.homepage .home-hero .home-hero-copy .hero-subtitle,
body.homepage .home-hero .hero-subtitle, body.homepage .home-hero .muted { color: var(--ink-soft); }
body.homepage .home-hero .hero-subtitle--strong strong { color: var(--ink); }
body.homepage .home-hero .home-hero-panel p, body.homepage .home-hero .home-hero-panel span,
body.homepage .home-hero .home-hero-panel h2, body.homepage .home-hero .panel p { color: var(--ink); }
body.homepage .home-hero .home-hero-panel .featured-test__meta { color: var(--muted); }
body.homepage .home-hero .home-hero-panel .seal, body.homepage .home-hero .home-hero-panel .seal span { color: #fff; }
body.homepage .home-hero .home-hero-panel .featured-test__tag { color: #fff; }
body.homepage .home-hero .home-hero-panel a { color: var(--ink); }
body.homepage .home-hero .home-hero-panel h2 a { color: var(--ink); }
/* sections */
body.homepage .section { padding: 44px 0; border-bottom: 1px solid var(--line); }
body.homepage .story-section, body.homepage .story-section.alt, body.homepage .audience-section { background: var(--paper); }
body.homepage .section--stock { background: var(--paper-alt); }
/* the tests table */
.tests-table-wrap { overflow-x: auto; margin-top: 10px; }
.tests-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tests-table th {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; color: var(--ink-soft); padding: 10px 10px 8px 0; border-bottom: 1px solid var(--line-strong);
}
.tests-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tests-table tbody tr:nth-child(even) { background: var(--surface-raise); }
.tests-table th.c, .tests-table td.c { text-align: center; white-space: nowrap; }
.tests-table .tt-rank { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 1.2rem; color: var(--muted); width: 40px; }
.tests-table .tt-name { font-weight: 600; }
.tests-table .tt-name a { text-decoration: none; color: var(--ink); }
.tests-table .tt-name a:hover { color: var(--accent-strong); text-decoration: underline; }
.tests-table .tt-name small { display: block; font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.tests-table .tt-cat { color: var(--ink-soft); font-size: 0.9rem; white-space: nowrap; }
.tests-table .tt-score { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 1.55rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.tests-table .tt-score small { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; color: var(--muted); letter-spacing: 0; margin-right: 8px; }
.tests-table .tt-verdict { font-size: 0.9rem; color: var(--ink-soft); max-width: 40ch; overflow-wrap: anywhere; }
.tests-table .tt-verdict span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tests-table .tt-none { color: var(--muted); }
.tests-table .tt-date { font-variant-numeric: tabular-nums; font-size: 0.86rem; color: var(--ink-soft); white-space: nowrap; }
.tests-table .tt-group th { background: var(--paper-alt); color: var(--ink); font-size: 0.76rem; padding: 8px 10px; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.tests-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-strong); font-size: 0.92rem; color: var(--ink-soft); }
.tests-foot .how-box { border: 1px solid var(--line-strong); padding: 14px 18px; background: var(--paper-alt); max-width: 560px; margin: 0; }
.tests-foot .how-box b { display: block; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.tests-foot .tests-foot__links { text-align: left; margin: 0; }
.tests-foot .tests-foot__links a { color: var(--ink); font-weight: 600; }
.tests-foot .tests-foot__links a:hover { color: var(--accent-strong); }
/* how we test — a ruled three-up, no cards, no numbers */
body.homepage .how-strip, .how-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 8px 0 0; padding: 0; max-width: none; }
body.homepage .how-step, .how-step { border: 0; border-top: 1px solid var(--line-strong); padding: 12px 0 0; background: none; border-radius: var(--r-md); box-shadow: none; }
.how-step-n { display: none; }
body.homepage .how-step h3, .how-step h3 { font-size: 1.25rem; text-transform: none; margin: 0 0 8px; }
.how-step p { margin: 0; color: var(--ink-soft); }
.how-more { margin: 18px 0 0; font-size: 0.95rem; }
/* tiers — ONE band, four segments, colour = data */
.tier-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 14px; border: 1px solid var(--line-strong); background: var(--surface); }
.tier-card { --tier-color: var(--ink); border: 0; border-right: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0 18px 16px; background: var(--surface); box-shadow: none; }
.tier-card:last-child { border-right: 0; }
.tier-card::before { content: ""; display: block; height: 10px; background: var(--tier-color); margin: 0 -18px 12px; }
.tier-card--vital { --tier-color: var(--tier-vital); }
.tier-card--steady { --tier-color: var(--tier-steady); }
.tier-card--fading { --tier-color: var(--tier-fading); }
.tier-card--flatline { --tier-color: var(--tier-flatline); }
.tier-card .tier-name { display: block; font-family: var(--font-display); font-stretch: 100%; font-weight: 400; font-size: 1.3rem; text-transform: none; color: var(--ink); }
.tier-card .tier-range { display: block; font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); margin: 2px 0 8px; }
.tier-card p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.tier-card p strong { color: var(--ink); }
.tier-scale-note { margin: 14px 0 0; font-size: 0.92rem; color: var(--ink-soft); max-width: 72ch; }
.tier-scale-note a, .dev-line span, .how-more a { white-space: nowrap; }
.honest-line { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; }
.honest-line h3 { margin: 0; font-size: 1.15rem; text-transform: none; }
.honest-line p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.honest-line a { color: var(--ink); font-weight: 700; white-space: nowrap; }
.honest-line a:hover { color: var(--accent-strong); }
/* ways in — three ruled columns, not cards */
.ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.way-card { display: block; border: 0; border-top: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 14px 0 0; background: none; box-shadow: none; text-decoration: none; color: inherit; }
.way-card:hover { transform: none; box-shadow: none; }
.way-card:hover h3 { color: var(--accent-strong); }
.way-card h3 { font-size: 1.3rem; text-transform: none; margin: 0 0 8px; }
.way-card p { margin: 0 0 8px; color: var(--ink-soft); }
.way-go { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.way-card:hover .way-go { color: var(--accent-strong); }
.also-line { margin: 26px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-soft); }
.also-line a { color: var(--ink); font-weight: 600; }
.also-line a:hover { color: var(--accent-strong); }
/* browse by need — plain link list */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.cat-chip { border: 0; background: none; padding: 0; border-radius: var(--r-md); color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.cat-chip:hover { color: var(--accent-strong); }
.record-all { margin: 16px 0 0; font-size: 0.95rem; }
.record-all a { color: var(--ink); font-weight: 700; }
/* developers & agents */
.dev-line { font-size: 1rem; color: var(--ink-soft); max-width: 72ch; }
.dev-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; font-size: 0.95rem; }
.dev-links a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dev-links a:hover { color: var(--accent-strong); }
/* legacy homepage classes that may be hydrated by older scripts */
.home-proof-strip, .hero-stats, .stat-tile, .home-doors .button-ghost { font-family: inherit; }
.api-cta-strip, .in-flight-strip { background: var(--paper-alt); border-top: 1px solid var(--line); padding: 14px 0; }
.api-cta-strip .eyebrow { margin: 0; }
/* responsive */
@media (max-width: 960px) {
  body.homepage .home-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .how-strip, .ways-grid { grid-template-columns: 1fr 1fr; }
  .tier-scale { grid-template-columns: 1fr 1fr; }
  .tier-card:nth-child(2) { border-right: 0; }
  .tier-card:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
  .tests-foot { grid-template-columns: 1fr; }
  .tests-foot .tests-foot__links { text-align: left; }
}
@media (max-width: 600px) {
  body.homepage .home-hero { padding: 34px 0 28px; }
  .how-strip, .ways-grid, .tier-scale { grid-template-columns: 1fr; }
  .tier-card { border-right: 0; }
  .tier-card:nth-child(n+2) { border-top: 1px solid var(--line-strong); }
  body.homepage .featured-test__row { flex-direction: column; align-items: flex-start; }
  .tests-table .tt-cat, .tests-table .tt-verdict { display: none; }
}
/* ----------------------------------------------------------------
   6. FOOTER + NEWSLETTER (deep block)
   ---------------------------------------------------------------- */
.footer, body.homepage .footer, body[class] .footer {
  background: var(--deep); color: var(--deep-ink); border-top: 0; padding-top: 44px;
}
.footer a, body.homepage .footer a { color: #fff; }
.footer strong, body.homepage .footer strong { color: #fff; font-family: var(--font-display); font-stretch: 100%; font-weight: 400; font-size: 1.4rem; text-transform: none; }
.footer .muted, .footer-entity, .footer-contact .muted, .footer-contact span,
body.homepage .footer .muted, body.homepage .footer-contact span, body.homepage .footer-entity { color: var(--deep-ink-soft); }
.footer-grid, body.homepage .footer-grid { border-top-color: var(--deep-line); }
.fnf-group a { color: rgba(255, 255, 255, 0.86); }
.fnf-group a:hover { color: #fff; text-decoration: underline; }
.fnf-label { color: rgba(255, 255, 255, 0.55); font-family: var(--font-display); font-stretch: 100%; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem; }
.footer-nav-flat { border-top-color: var(--deep-line); }
.newsletter-inline {
  border: 2px solid rgba(255, 255, 255, 0.5); border-radius: var(--r-md); background: transparent; padding: 22px 24px; box-shadow: none;
}
.newsletter-inline h2 { color: #fff; font-size: 1.45rem; text-transform: none; margin: 0 0 6px; }
.newsletter-inline p, .newsletter-inline .muted { color: var(--deep-ink-soft); }
.newsletter-inline .eyebrow { display: none; }
.newsletter-inline .input, .newsletter-form input[type="email"] {
  border: 2px solid rgba(255, 255, 255, 0.5); border-radius: var(--r-md); background: transparent; color: #fff;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-form input[type="email"]:focus { border-color: #fff; outline: none; }
.newsletter-form button { background: var(--accent); color: #fff; border: 0; border-radius: var(--r-md); font-family: var(--font-display); font-stretch: 100%; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.newsletter-form button:hover { background: var(--surface); color: var(--accent-strong); }
.newsletter-status { color: var(--deep-ink-soft); }
.newsletter-status.is-success { color: #8fd3a6; }
.newsletter-status.is-error { color: #ff9a93; }
.site-footer { border-top: 1px solid var(--line-strong); margin-top: 40px; }
.site-footer__inner { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; padding: 20px 0 32px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9rem; }
.site-footer a { color: var(--ink); }
/* ----------------------------------------------------------------
   7. REVIEW PAGE — the template behind ~920 pages (v2) + the v1 holdouts.
      The verdict is the hero: seal + one-sentence "In short" in the first
      viewport; evidence and the claim checklist follow immediately.
   ---------------------------------------------------------------- */
.review-page { width: min(calc(100% - 32px), 980px); margin: 0 auto; padding: 0 0 64px; }
.review-page--v2 { width: min(calc(100% - 32px), 980px); padding: 0 0 64px; }
.review-page--v2 p, .review-page--v2 li { max-width: 72ch; }
.review-hero, .review-page--v2 .review-hero {
  display: grid; grid-template-columns: 1fr 300px; gap: 28px 36px; align-items: start;
  padding: 32px 0 26px; border-bottom: 1px solid var(--line-strong); margin: 0;
}
.review-hero__main { min-width: 0; }
.review-hero h1, .review-page--v2 .review-hero h1 {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 0.96; letter-spacing: -0.02em; text-transform: none;
  margin: 0 0 10px; max-width: 16ch;
}
.review-hero__sub { font-size: 0.95rem; color: var(--muted); margin: 0 0 16px; max-width: none; }
.review-hero__sub a { color: var(--ink); }
.review-hero__short, .review-hero__headline { font-size: 1.22rem; line-height: 1.4; color: var(--ink); margin: 0 0 14px; max-width: 56ch; }
.review-hero__short b { font-weight: 700; }
.review-hero__claims { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; font-size: 0.88rem; color: var(--ink-soft); }
.review-hero__claims .bar { display: inline-flex; gap: 4px; }
.review-hero__claims .bar i { display: block; height: 10px; width: 40px; background: var(--line-strong); }
.review-hero__claims .bar i.u { background: var(--line-strong); }
.review-hero__links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.92rem; margin: 0; }
.review-hero__links a, .review-hero__cta { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; border: 0; padding: 0; display: inline; }
.review-hero__links a:hover, .review-hero__cta:hover { color: var(--accent-strong); }
.review-hero__seal { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 22px 18px 18px; background: var(--paper-alt); border: 1px solid var(--line-strong); }
.review-hero__seal .seal { margin: 0 auto; }
.review-hero__compared { font-size: 0.85rem; color: var(--muted); margin: 0; }
.review-hero__compared a { color: var(--ink); }
.review-hero__dims { width: 100%; font-size: 0.86rem; text-align: left; border-collapse: collapse; }
.review-hero__dims td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.review-hero__dims td:last-child { text-align: right; font-family: var(--font-mono); font-size: 0.82rem; }
.review-hero__behavior-badge { display: block; width: max-content; margin: 8px 0 0 !important; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 7px; border-radius: 2px; border: 1px solid var(--line-strong); margin-left: 8px; vertical-align: middle; }
/* v1 holdout markup (tier/score spans) — keep readable if any page still emits it */
.review-hero__tier { display: inline-block; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 5px 7px 4px; border-radius: 2px; }
.review-hero__score { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 2.2rem; margin-left: 8px; }
.review-hero__cat, .review-hero__summary { color: var(--ink-soft); }
/* sticky mini-TOC — black rule, condensed tabs (no pills, no mono, no blur) */
.review-toc {
  position: sticky; top: 60px; z-index: 25; display: flex; gap: 0 22px; overflow-x: auto;
  padding: 0; margin: 0 0 6px; background: var(--paper);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--line-strong); scrollbar-width: none;
}
.review-toc::-webkit-scrollbar { display: none; }
.review-toc a {
  flex: none; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; padding: 10px 0 8px; border: 0; border-radius: var(--r-md); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.review-toc a:hover { color: var(--ink); border-bottom-color: var(--accent); }
html:has(.review-toc) { scroll-padding-top: 116px; }
.review-opinion { padding: 24px 0; border-bottom: 1px solid var(--line); }
.review-opinion__byline { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.review-opinion__body p { font-size: 1.04rem; line-height: 1.65; }
.review-page--v2 .review-section, .review-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.review-page--v2 .review-section h2, .review-section h2, .review-checklist h2 {
  font-family: var(--font-display); font-stretch: 100%; font-weight: 400; font-size: 1.25rem; text-transform: none; letter-spacing: -0.02em;
  margin: 0 0 12px; display: flex; align-items: center; gap: 12px;
}
.review-page--v2 .review-section h2::before, .review-section h2::before, .review-checklist h2::before { content: ""; flex: none; width: 10px; height: 1em; background: var(--accent); }
.review-section--two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 36px; }
.review-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.review-bullets li { position: relative; padding-left: 24px; line-height: 1.45; }
.review-bullets li::before { content: "·"; position: absolute; left: 2px; top: -1px; font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 1.1rem; color: var(--ink); }
#does-well .review-bullets li::before { content: "+"; color: var(--tier-vital); }
#falls-short .review-bullets li::before, #red-flags .review-bullets li::before { content: "–"; color: var(--red); }
.review-section--red { background: none; }
.review-compared { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.review-compared li { padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: var(--r-md); background: none; }
.review-compared li:first-child { border-top: 0; }
.review-compared li strong { font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; }
.review-compared__axis { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong); margin-left: 10px; }
.review-compared li p { margin: 6px 0 0; color: var(--ink-soft); }
.review-badge { display: inline-block; padding: 4px 8px; border-radius: 2px; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink); }
.review-badge--off { color: var(--muted); border-color: var(--line-strong); }
.review-badge--acr { border-color: var(--accent); color: var(--accent-strong); }
.review-agent-score strong { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 1.2rem; }
.review-acr-note, .review-agent-badges { margin: 0 0 8px; }
/* claims checklist — ruled rows; PASS/FAIL as bold condensed words in data colour */
.review-checklist ul, ul.review-checklist { list-style: none; padding: 0; margin: 10px 0; display: block; }
.review-evidence, .review-checklist { list-style: none; margin: 0; padding: 0; display: block; font-size: 0.95rem; max-width: 72ch; }
.check-item, .review-checklist li {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-md); background: none; color: var(--ink-soft); font-size: 0.95rem;
}
.check-item .check-chip { flex: 0 0 60px; }
.check-item .check-id { font-family: var(--font-mono); font-size: 0.86rem; color: var(--ink); }
.check-item em { color: var(--muted); font-style: normal; font-size: 0.85rem; }
.check-chip { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 0.82rem; letter-spacing: 0.06em; padding: 0; border-radius: var(--r-md); background: none !important; }
.check-item--pass .check-chip { color: var(--tier-vital); }
.check-item--fail .check-chip { color: var(--red); }
.check-item--fail { border-color: var(--line); }
.review-evidence li { padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-md); background: none; }
.review-evidence__claim { font-weight: 600; }
.review-evidence__verified { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tier-vital); margin-left: 6px; }
/* what we saw — evidence plates with figure numbers */
.review-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 6px; counter-reset: fig; }
.review-shots__item { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); counter-increment: fig; }
.review-shots__item img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; transition: none; }
.review-shots__item a:hover img { transform: none; filter: contrast(1.05); }
.review-shots__item figcaption { padding: 6px 9px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.review-shots__item figcaption::before { content: "Fig. " counter(fig) " · "; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; color: var(--ink); }
.review-shots__note { color: var(--ink-soft); font-size: 0.94rem; }
.review-lightbox { border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0; max-width: min(92vw, 1100px); background: var(--surface); box-shadow: var(--shadow-3); }
.review-lightbox::backdrop { background: rgba(17, 18, 20, 0.78); }
.review-lightbox img { display: block; max-width: min(90vw, 1060px); max-height: 78vh; margin: 0 auto; }
.review-lightbox__close { position: absolute; top: 8px; right: 10px; border: 0; background: var(--ink); color: #fff; width: 32px; height: 32px; border-radius: var(--r-md); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.review-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line-strong); }
.review-lightbox__bar button { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-md); padding: 6px 14px; cursor: pointer; font-size: 1rem; color: var(--ink); }
.review-lightbox__cap { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); overflow-wrap: anywhere; text-align: center; }
/* score over time */
.review-history__chart svg { display: block; width: 100%; max-width: 620px; height: auto; }
.review-history__chart polyline { stroke: var(--accent); stroke-width: 2.5; }
.review-history__chart circle { fill: var(--ink); }
.review-history__chart text { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.review-history__note { color: var(--ink-soft); font-size: 0.94rem; }
/* vendor reply / behavioural / meta */
.review-section--vendor-response { border-left: 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 16px 18px; background: var(--paper-alt); margin-top: 24px; }
.review-vendor-response__body { font-style: normal; }
.review-section--behavior { background: none; }
.review-behavior__tasks { list-style: none; padding: 0; }
.review-behavior__tasks li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.review-meta { padding: 22px 0 0; margin-top: 8px; border-top: 1px solid var(--line-strong); font-size: 0.9rem; color: var(--ink-soft); }
.review-meta a { color: var(--ink); }
.review-meta__attribution { color: var(--muted); }
.review-meta__ai-disclosure { font-size: 0.86rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 12px; max-width: 72ch; }
.review-meta__more { font-size: 0.88rem; color: var(--muted); }
.review-embed { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.review-embed pre { background: var(--paper-alt); border-radius: var(--r-md); }
.review-related, .review-related__grid { font-size: 0.95rem; }
@media (max-width: 760px) {
  .review-hero, .review-page--v2 .review-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
  .review-hero__seal { order: -1; flex-direction: row; justify-content: flex-start; text-align: left; gap: 18px; padding: 14px 16px; margin-top: 16px; }
  .review-hero__seal .seal { width: 120px; height: 120px; }
  .review-hero__seal .seal .seal__n { font-size: 44px; }
  .review-hero__dims { display: none; }
  .review-toc { top: 92px; }
  html:has(.review-toc) { scroll-padding-top: 150px; }
}
/* ----------------------------------------------------------------
   8. REVIEWS INDEX, /check, 404, deep panels, generated families
   ---------------------------------------------------------------- */
html body.reviews-page .page-hero { background: var(--paper); border-bottom: 1px solid var(--line-strong); padding: 36px 0 24px; }
html body.reviews-page .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: none; }
html body.reviews-page .page-hero p { color: var(--ink-soft); }
html body.reviews-page [data-reviewed-grid] .score-table tr { background: var(--surface); border-color: var(--line); }
html body.reviews-page [data-reviewed-grid] .score-table tr:hover { background: var(--paper-alt); }
html body.reviews-page .review-view-toggle .view-toggle-buttons { border: 1px solid var(--line-strong); border-radius: var(--r-md); }
html body.reviews-page .view-toggle-btn { border: 0; border-radius: var(--r-md); color: var(--ink); background: var(--surface); }
html body.reviews-page .view-toggle-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
html body.reviews-page .review-search input, html body.reviews-page .review-sort select, html body.reviews-page .review-page-size select { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
html body.reviews-page .review-search input:focus { border-color: var(--accent); outline: none; box-shadow: none; }
html body.reviews-page .facet-chip { border: 1.5px solid var(--line-strong); border-radius: 2px; background: var(--surface); color: var(--ink); font-family: var(--font-body); }
html body.reviews-page .facet-chip:hover { border-color: var(--ink); }
html body.reviews-page .facet-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
/* reviews-index tier badges (JS-rendered .tier-badge + static .review-tier): solid data colour, condensed */
html body.reviews-page .tier-badge, html body.reviews-page .review-tier, html body.reviews-page .score-table .tier-badge {
  display: inline-flex; align-items: center; min-height: 0; padding: 5px 7px 4px; border-radius: 2px; border: 0;
  background: var(--ink); color: #fff; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
html body.reviews-page [class*="tier"][class*="vital" i], html body.reviews-page .tier-badge[data-tier="VITAL"] { background: var(--tier-vital); color: #fff; }
html body.reviews-page [class*="tier"][class*="steady" i], html body.reviews-page .tier-badge[data-tier="STEADY"] { background: var(--tier-steady); color: #fff; }
html body.reviews-page [class*="tier"][class*="fading" i], html body.reviews-page .tier-badge[data-tier="FADING"] { background: var(--tier-fading); color: #fff; }
html body.reviews-page [class*="tier"][class*="flatline" i], html body.reviews-page .tier-badge[data-tier="FLATLINE"] { background: var(--tier-flatline); color: #fff; }
html body.reviews-page .review-card .review-score, html body.reviews-page .score-table .score-cell { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; }
.review-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: none; }
.review-card h3 { text-transform: none; }
.score-table { border-collapse: collapse; }
.score-table th { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); }
/* /check */
body.check-page { background: var(--paper); }
.check-tool { max-width: 860px; }
.check-hero { background: none; border-bottom: 1px solid var(--line-strong); }
.check-hero .eyebrow { color: var(--accent-strong); }
.check-tool h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: none; }
.check-tool .review-lead { color: var(--ink-soft); }
.check-search input { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.check-search input:focus { border-color: var(--accent); box-shadow: none; outline: none; }
.check-ac { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: none; }
.check-ac button { border-bottom: 1px solid var(--line); color: var(--ink); }
.check-ac button:hover, .check-ac button[aria-selected="true"] { background: var(--paper-alt); }
.check-ac .ac-cat { color: var(--muted); }
.check-hint { color: var(--muted); }
.check-try a { color: var(--ink); border: 0; background: none; border-radius: var(--r-md); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.check-try a:hover { color: var(--accent-strong); }
.check-card { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: none; }
.check-score { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; color: var(--ink); }
.check-card__name { font-family: var(--font-display); font-stretch: 100%; font-weight: 400; text-transform: none; }
.check-card__cat { color: var(--muted); }
.check-tier { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.t-VITAL { color: var(--tier-vital); }
.t-STEADY { color: var(--tier-steady); }
.t-FADING { color: var(--tier-fading); }
.t-FLATLINE { color: var(--tier-flatline); }
.b-COMMERCE-READY { color: var(--tier-vital); }
.b-INTEGRABLE { color: var(--tier-steady); }
.b-SURFACE-ONLY { color: var(--tier-fading); }
.b-CLOSED { color: var(--tier-flatline); }
.check-acr { background: var(--paper-alt); border-radius: var(--r-md); }
.check-grid h4 { color: var(--muted); font-family: var(--font-display); font-stretch: 100%; text-transform: none; letter-spacing: -0.02em; }
.check-red { background: #fbe9ea; border-radius: var(--r-md); }
.check-red b { color: var(--red); }
.check-cap { border-color: var(--line-strong); border-radius: var(--r-md); }
.check-cap.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.check-cta { background: var(--ink); color: #fff; border-radius: 2px; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.check-cta:hover { background: var(--accent); }
.check-miss { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper-alt); }
.check-agentbox { color: var(--ink-soft); }
.check-agentbox code, .check-embed__row code { background: var(--paper-alt); border-radius: var(--r-md); }
.check-embed__row button { background: var(--ink); color: #fff; border-radius: var(--r-md); }
.check-embed__row button:hover { background: var(--accent); }
/* 404 */
body.nf-page { background: var(--paper); }
.nf-eyebrow { color: var(--accent-strong); font-family: var(--font-display); font-stretch: 100%; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.nf-code { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--accent); }
.nf-title { text-transform: none; }
.nf-search input { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.nf-search button { background: var(--ink); color: #fff; border-radius: var(--r-md); font-family: var(--font-display); font-stretch: 100%; font-weight: 700; text-transform: uppercase; }
.nf-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: none; }
.nf-card:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.nf-cta { background: var(--ink); color: #fff; border-radius: 2px; }
.nf-cta:hover { background: var(--accent); }
.nf-machine code { background: var(--paper-alt); border-radius: var(--r-md); }
/* deep panels on review/dev pages */
.scorecard-summary, .developer-section { background: var(--deep); color: var(--deep-ink); border-radius: var(--r-md); border: 0; }
.developer-section .section-title, .developer-section h3, .scorecard-summary h3, .scorecard-summary, .scorecard-score { color: #fff; }
.scorecard-summary .inline-link, .developer-section .inline-link { color: #fff; }
.mcp-code { background: var(--deep-2); color: #fff; border: 1px solid var(--deep-line); border-radius: var(--r-md); }
.claim-evidence { color: var(--ink-soft); }
/* generated families (compare / alternatives / trust / vertical / glossary /
   category landings / passports) — inherit tokens; flatten card habits */
.card, .panel, .ledger-card, .peer-card, .audience-card, .verdict-sample, .latest-review-card {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: none;
}
.card:hover, .peer-card:hover, .audience-card:hover, .latest-review-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.page-hero { background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.top-card, body.homepage .top-card, .homepage .top-card { border: 0; border-top: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 14px 0; background: none; box-shadow: none; }
.top-card h3, body.homepage .top-card h3 { text-transform: none; }
.score-gauge, body.homepage .score-gauge { background: none; border: 0; box-shadow: none; width: auto; height: auto; }
.score-gauge strong, body.homepage .score-gauge strong { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 1.6rem; }
.review-status-badge, .review-id-pill { border-radius: 2px; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.review-tabs a { border-radius: var(--r-md); font-family: var(--font-display); font-stretch: 100%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.review-tabs a.is-active { background: var(--ink); color: #fff; }
.legal-hero { background: var(--paper); border-bottom: 1px solid var(--line-strong); }
table.compare-table th, .compare-table th { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); }
@media print {
  .site-header, .review-toc, .review-embed, .footer { display: none !important; }
  .seal { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .review-hero { break-inside: avoid; }
}
/* Quick answer + Pricing & access (landed on main 2026-08-21 by a parallel session) — World B treatment:
   BLUF box is a ruled stock panel with a condensed heading; no side-tab border, no mono kicker. */
.review-quick { margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--line-strong); border-left-width: 2px; border-radius: var(--r-md); background: var(--paper-alt); }
.review-quick h2 { font-family: var(--font-display); font-stretch: 100%; font-weight: 400; font-size: 0.95rem; letter-spacing: -0.02em; text-transform: none; color: var(--ink); margin: 0 0 6px; display: block; }
.review-quick h2::before { content: none; }
.review-quick p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.review-pricing { display: block; }
.review-pricing li { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 12px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-md); background: none; }
.review-pricing__k { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.review-pricing__basis { color: var(--muted); font-size: 0.85rem; }
body .cmp-quick, main .cmp-quick { border: 1px solid var(--line-strong); border-left-width: 2px; border-radius: var(--r-md); background: var(--paper-alt); }
/* ----------------------------------------------------------------
   8. THE OFFERING — "the record" (free) beside "the practice" (paid,
      buying-side). Shared by the homepage, /services/ and /about/ so a
      visitor meets the same two columns everywhere (2026-09-03, founder
      directive after the IPE event: the site must show the whole offering,
      including AI/technology consulting, to a first-time visitor).
      Ruled columns, not cards; the wall between the two halves is a rule
      and a sentence, never a colour.
   ---------------------------------------------------------------- */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 6px 0 0; }
.offer-col { border-top: 1px solid var(--line-strong); padding: 14px 0 0; min-width: 0; }
.offer-col--practice { border-top-color: var(--accent); }
.offer-col > h3 { font-size: 1.45rem; text-transform: none; margin: 0 0 4px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.offer-col > h3 small { font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; text-transform: none; letter-spacing: 0; color: var(--muted); }
.offer-col > p { margin: 0 0 10px; color: var(--ink-soft); max-width: 52ch; }
.offer-list { list-style: none; margin: 0; padding: 0; }
.offer-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.offer-list li:first-child { border-top: 0; }
.offer-list b { font-family: var(--font-display); font-stretch: 100%; font-weight: 400; font-size: 1.05rem; text-transform: none; letter-spacing: -0.02em; }
.offer-list b a { color: var(--ink); text-decoration: none; }
.offer-list b a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.offer-list span { font-size: 0.94rem; color: var(--ink-soft); }
.offer-list span a { color: var(--ink); font-weight: 600; }
.offer-list span a:hover { color: var(--accent-strong); }
.offer-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-strong); font-size: 0.95rem; }
.offer-foot a { color: var(--ink); font-weight: 700; }
.offer-foot a:hover { color: var(--accent-strong); }
/* the wall — one sentence set as a statement, read by both halves */
.wall-line { margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-soft); max-width: 78ch; }
.wall-line strong { color: var(--ink); }
/* the four doors (was three) — ruled columns, no cards */
.ways-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ways-grid--4 .way-card h3 { font-size: 1.15rem; }
@media (max-width: 960px) {
  .ways-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .offer-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .ways-grid--4 { grid-template-columns: 1fr; }
}
/* ----------------------------------------------------------------
   9. THE PRACTICE — homepage showcase band (2026-09-03, founder: "the
      homepage needs to showcase our services in a visually appealing
      rendering"). Same grammar as the tier band: ONE bordered band, four
      plates under blue bars, a stamp, a ruled engagement path. No cards
      with icons, no gradients; the appeal comes from scale and rules.
   ---------------------------------------------------------------- */
body.homepage .section.practice { background: var(--paper-alt); border-bottom: 1px solid var(--line-strong); padding: 48px 0 44px; }
.practice-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; margin: 0 0 22px; }
.practice-head .section-title { margin: 0; }
.practice-lede { font-size: 1.18rem; line-height: 1.45; color: var(--ink-soft); max-width: 60ch; margin: 12px 0 0; }
.practice-lede strong { color: var(--ink); }
.stamp { display: inline-grid; justify-items: center; gap: 3px; padding: 14px 18px 12px; border: 1px solid var(--line-strong); background: var(--surface); transform: rotate(-2.5deg); font-family: var(--font-display); font-stretch: 100%; font-weight: 400; text-transform: none; line-height: 1; text-align: center; }
.stamp b { font-size: 1.25rem; letter-spacing: 0.01em; }
.stamp span { font-size: 0.7rem; letter-spacing: 0.14em; color: var(--accent-strong); font-weight: 700; }
.practice-band { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); background: var(--surface); }
.practice-cell { display: flex; flex-direction: column; border-right: 1px solid var(--line-strong); padding: 0 20px 18px; text-decoration: none; color: inherit; min-width: 0; }
.practice-cell:last-child { border-right: 0; }
.practice-cell::before { content: ""; display: block; height: 12px; background: var(--accent); margin: 0 -20px 16px; }
.practice-cell h3 { font-size: clamp(1.3rem, 1.85vw, 1.65rem); line-height: 0.98; text-transform: none; margin: 0 0 10px; min-height: 1.96em; }
.practice-cell p { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.practice-cell .get { flex: 0; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--ink); }
.practice-cell .get b { display: block; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 3px; }
.practice-cell:hover { background: var(--paper-alt); }
.practice-cell:hover h3 { color: var(--accent-strong); }
.practice-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* engagement path — one rule, four squared nodes */
.practice-path { list-style: none; margin: 30px 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; position: relative; }
.practice-path::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; background: var(--ink); }
.practice-path li { position: relative; padding-top: 4px; }
.practice-path li::before { content: ""; position: absolute; left: 0; top: -22px; width: 14px; height: 14px; background: var(--ink); outline: 3px solid var(--paper-alt); }
.practice-path b { display: block; font-family: var(--font-display); font-stretch: 100%; font-weight: 400; font-size: 1.1rem; text-transform: none; margin: 0 0 4px; }
.practice-path span { font-size: 0.9rem; color: var(--ink-soft); }
.practice-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-strong); }
.practice-foot p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); max-width: 62ch; }
.practice-foot p strong { color: var(--ink); }
.practice-foot p a { color: var(--ink); font-weight: 600; }
.practice-foot p a:hover { color: var(--accent-strong); }
.practice-foot .actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.practice-foot .actions .inline-link { font-weight: 700; }
@media (max-width: 960px) {
  .practice-band { grid-template-columns: 1fr 1fr; }
  .practice-cell:nth-child(2) { border-right: 0; }
  .practice-cell:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
  .practice-path { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  .practice-path::before { display: none; }
  .practice-path li { padding-left: 24px; }
  .practice-path li::before { top: 8px; }
}
@media (max-width: 760px) {
  .practice-head { grid-template-columns: 1fr; }
  .stamp { justify-self: start; transform: rotate(-2deg); }
}
@media (max-width: 600px) {
  body.homepage .section.practice { padding: 36px 0 32px; }
  .practice-band, .practice-path { grid-template-columns: 1fr; }
  .practice-cell { border-right: 0; }
  .practice-cell:nth-child(n+2) { border-top: 1px solid var(--line-strong); }
  .practice-cell h3 { min-height: 0; }
}
/* ----------------------------------------------------------------
   10. HOMEPAGE CLARITY PASS (2026-09-03, founder: say what we do before
       any number; density reference resend.com). Hero = headline + one
       paragraph + two actions + a proof line. Sections = heading + a big
       one-line statement + two sentences + a visual.
   ---------------------------------------------------------------- */
body.homepage .home-hero--clear { padding: 64px 0 44px; }
body.homepage .home-hero--clear .container { max-width: var(--max); }
body.homepage .home-hero--clear h1 { max-width: 17ch; margin: 0 0 20px; }
body.homepage .home-hero--clear .hero-subtitle { font-size: 1.2rem; max-width: 58ch; margin: 0 0 24px; }
body.homepage .home-hero--clear .hero-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 0; }
body.homepage .home-hero--clear .hero-actions .button { border: 1px solid var(--line-strong); border-radius: 2px; padding: 12px 20px; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--surface); }
body.homepage .home-hero--clear .hero-actions .button-primary { background: var(--ink); color: #fff; }
body.homepage .home-hero--clear .hero-actions .button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
body.homepage .hero-proof { margin: 22px 0 0; font-size: 0.92rem; color: var(--muted); }
body.homepage .hero-proof span { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 1.1rem; color: var(--ink); }
.home-block-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 420px; gap: 40px 56px; align-items: center; }
.home-block-copy > p { color: var(--ink-soft); max-width: 54ch; margin: 0 0 14px; font-size: 1.05rem; }
.home-block-big { font-family: var(--font-display); font-stretch: 100%; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; text-transform: none; letter-spacing: -0.02em; color: var(--ink) !important; margin: 4px 0 12px !important; max-width: 20ch !important; }
.practice-head .home-block-big { margin-top: 4px !important; }
body.homepage .home-block .agent-search-form { margin: 18px 0 12px; }
.home-block-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.95rem; margin: 0; }
.home-block-links a { color: var(--ink); font-weight: 600; }
.home-block-links a:hover { color: var(--accent-strong); }
body.homepage .home-block .featured-test { margin-top: 0; }
.practice-band .practice-cell p:last-child { margin-bottom: 0; }
.practice-path--tight span { display: block; }
.record-sub { margin: 28px 0 0; font-size: 1.05rem; text-transform: none; }
body.homepage .tier-scale { margin-top: 10px; }
/* the featured panel + search now live in the record block (outside .home-hero); re-declare
   the ink colours and the search form at that scope so v2's dark-card defaults never show */
body.homepage .home-block .featured-test, body.homepage .home-block .featured-test p, body.homepage .home-block .featured-test span,
body.homepage .home-block .featured-test h2, body.homepage .home-block .featured-test h2 a, body.homepage .home-block .featured-test a { color: var(--ink); }
body.homepage .home-block .featured-test .featured-test__meta { color: var(--muted); }
body.homepage .home-block .featured-test .featured-test__lead { color: var(--accent-strong); }
body.homepage .home-block .featured-test .seal, body.homepage .home-block .featured-test .seal span { color: #fff; }
body.homepage .home-block .agent-search-form { display: flex; border: 1px solid var(--line-strong); max-width: 560px; background: var(--surface); }
body.homepage .home-block .agent-search-form input { flex: 1; min-height: 48px; border: 0; border-radius: var(--r-md); padding: 12px 14px; font: 1rem var(--font-body); background: transparent; color: var(--ink); box-shadow: none; }
body.homepage .home-block .agent-search-form input::placeholder { color: var(--muted); }
body.homepage .home-block .agent-search-form button { min-height: 48px; border: 0; border-radius: var(--r-md); background: var(--ink); color: #fff; font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 20px; cursor: pointer; white-space: nowrap; width: auto; }
body.homepage .home-block .agent-search-form button:hover { background: var(--accent); }
@media (max-width: 960px) { .home-block-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { body.homepage .home-hero--clear { padding: 40px 0 30px; } body.homepage .home-hero--clear .hero-actions .button { width: 100%; text-align: center; } }
/* ============================================================================
   11. WORLD C — the Resend grammar, site-wide (2026-09-03, founder: "roll it
   out to the whole site"). Black ground with a faint top glow, Inter for
   reading/UI, Instrument Serif for display (regular weight, sentence case),
   hairline panels, white pill buttons, outlined data chips. Appended last so
   it overrides the World B brand rules above at equal specificity; the tokens
   in section 1 already carry the palette, so generated pages inherit it too.
   ========================================================================== */
html { color-scheme: dark; background: #000; }
body { background: #000 !important; color: var(--ink); font-family: var(--font-body); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(55% 40% at 50% -6%, rgba(255,255,255,.11), transparent 70%); }
body > * { position: relative; z-index: 1; }
::selection { background: rgba(255,255,255,.9); color: #000; }
h1, h2, h3, h4, .section-title, .page-hero h1 { font-family: var(--font-display); font-weight: 400; font-stretch: 100%; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.section-title::before, body.homepage .section-title::before, .review-page--v2 .review-section h2::before, .review-section h2::before, .review-checklist h2::before, .about-page h2::before, .contact-card h2::before { content: none; }
.section-title small { font-family: var(--font-body); color: var(--muted); text-transform: none; letter-spacing: 0; }
p, li, td { color: var(--ink-soft); }
a { color: var(--ink); }
strong, b, th, dt, label { color: var(--ink); }
.muted, .meta-line { color: var(--muted); }
/* masthead — sticky, blurred black, white pill */
.site-header, body .site-header, body[class] .site-header { position: sticky; top: 0; z-index: 30; background: rgba(0,0,0,.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); box-shadow: none; }
.site-header .brand-mark, .site-brand .brand-mark { display: none; }
.site-header .brand strong, body .brand-copy strong, body[class] .brand-copy strong, .site-brand, body .site-brand, body[class] .site-brand { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; text-transform: none; color: #fff; }
.site-header .brand-copy span { color: var(--muted); font-size: 0.78rem; }
.site-header .nav-links a, .site-header__inner nav a, body .site-header .nav-links a { color: rgba(255,255,255,.72); font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; letter-spacing: 0; text-transform: none; border: 0; background: none; padding: 6px 0; text-decoration: none; }
.site-header .nav-links a:hover, .site-header__inner nav a:hover, .site-header .nav-links a[aria-current="page"], .site-header__inner nav a[aria-current="page"] { color: #fff; border: 0; }
.site-header .nav-links a[href="/check/"], .site-header__inner nav a[href="/check/"], body .site-header .nav-links a[href="/check/"] { background: #fff; color: #000; border-radius: 999px; padding: 8px 14px; font-weight: 600; border: 0; }
.site-header .nav-links a[href="/check/"]:hover, .site-header__inner nav a[href="/check/"]:hover { background: rgba(255,255,255,.86); color: #000; }
/* buttons — white pill primary, hairline ghost */
.button, body .button, .button-primary, body .button-primary, .button-secondary, .button-ghost, .rs-btn, .check-cta, .nf-cta, .tc-btn, .ef-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 20px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; text-decoration: none; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; }
.button-primary, body .button-primary, body.homepage .home-hero .hero-actions .button-primary, .rs-btn:not(.rs-btn--ghost), .check-cta, .nf-cta { background: #fff; color: #000; border-color: #fff; }
.button-primary:hover, body .button-primary:hover, .rs-btn:not(.rs-btn--ghost):hover { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); color: #000; }
.button:hover, body .button:hover, .button-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.45); color: #fff; }
button[type="submit"], .agent-search-form button, .newsletter-form button, .contact-form button, .nf-search button { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none; background: #fff; color: #000; border: 0; }
button[type="submit"]:hover, .agent-search-form button:hover, .newsletter-form button:hover { background: rgba(255,255,255,.86); color: #000; }
input, textarea, select, .agent-search-form input, .contact-form input, .contact-form textarea, .contact-form select, .newsletter-form input[type="email"] { background: rgba(255,255,255,.04); color: #fff; border: 1px solid var(--line-strong); border-radius: 10px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px; border-color: rgba(255,255,255,.5); }
.agent-search-form, body.homepage .home-hero .agent-search-form, body.homepage .home-block .agent-search-form { border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.04); }
.agent-search-form input { border: 0; background: transparent; border-radius: 0; }
.agent-search-form button { border-radius: 0; }
/* seals + chips — white seal, black numerals; chips outlined in data colour */
.seal, .seal--lg, .seal--sm, .review-hero__seal .seal, body.homepage .home-hero .home-hero-panel .seal { background: #fff; color: #000; box-shadow: 0 0 0 3px #000, 0 0 0 4px rgba(255,255,255,.35); animation: none; }
.seal span, .seal .seal__n, .seal .seal__t, .seal .seal__s, body.homepage .home-hero .home-hero-panel .seal span { color: #000 !important; font-family: var(--font-body); }
.seal .seal__n { font-weight: 700; letter-spacing: -0.02em; }
.seal .seal__t { font-weight: 600; letter-spacing: 0.08em; }
.tier-chip, .top-tier, .tier, .tier-badge, .review-tier, .check-tier, .review-hero__tier, .review-status-badge, .review-badge { background: transparent; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; }
.tier-chip--vital, .t-VITAL { color: var(--tier-vital); }
.tier-chip--steady, .t-STEADY { color: var(--tier-steady); }
.tier-chip--fading, .t-FADING { color: var(--tier-fading); }
.tier-chip--flatline, .t-FLATLINE { color: var(--tier-flatline); }
.tier-chip--reviewed { color: var(--muted); }
.review-hero__tier { color: #fff; border-color: rgba(255,255,255,.4); }
/* numerals — Inter, semibold, tabular */
.tests-table .tt-score, .review-hero__score, .check-score, .score-gauge strong, .review-agent-score, .pp-big { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: #fff; }
.tests-table .tt-rank { font-family: var(--font-body); font-weight: 500; }
/* panels + tables — hairlines, radius, no zebra */
.review-hero__seal, .home-hero-panel, .featured-test, .tier-scale, .tier-card, .card, .review-card, .check-card, .nf-card, .svc-start, .ab-cta, .practice-band, .contact-card, .how-box { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.tier-card, .practice-cell { border-radius: 0; background: transparent; border-right-color: var(--line); border-top-color: var(--line); }
.tier-card::before, .practice-cell::before { height: 3px; }
.tests-table th, .score-table th, .compare-table th, table.compare-table th, .contrast th { font-family: var(--font-body); color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.tests-table td, .contrast td, .peers-compare td, .peers-compare th { border-bottom: 1px solid var(--line); }
.tests-table tbody tr:nth-child(even) { background: transparent; }
.tests-table .tt-group th { background: rgba(255,255,255,.04); color: #fff; border-color: var(--line); }
.tests-foot, .offer-foot, .practice-foot, .honest-line, .also-line, .wall-line { border-color: var(--line); }
.how-step, .way-card, .offer-col, .svc-step, .step, .svc-ledger, .svc-rules, .svc-partners ul, .pledge, .ab-founder, .quick-row, .svc-row, .rs-step { border-color: var(--line-strong); }
.cat-chip, .review-tabs a, .review-toc a, .check-chip { color: var(--ink-soft); }
.cat-chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.cat-chip:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.review-toc { background: rgba(0,0,0,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.review-toc a:hover { border-bottom-color: #fff; }
.review-hero__claims .bar i.p { background: var(--tier-vital); }
.review-hero__claims .bar i.f { background: var(--red); }
.review-shots__item, .review-lightbox { background: var(--surface); border-color: var(--line); }
.stamp { background: #fff; color: #000; border-color: #fff; }
.stamp span { color: #000; }
.stamp b { font-family: var(--font-body); font-weight: 700; }
/* footer */
.footer, body.homepage .footer, body[class] .footer, .site-footer { background: #000; border-top: 1px solid var(--line); }
.footer strong, body.homepage .footer strong { font-family: var(--font-body); text-transform: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.fnf-label { font-family: var(--font-body); letter-spacing: 0.08em; }
.newsletter-inline { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.newsletter-inline h2 { font-family: var(--font-display); text-transform: none; font-size: 1.8rem; letter-spacing: -0.02em; font-weight: 400; }
.newsletter-form input[type="email"] { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 16px; background: rgba(255,255,255,.04); }
.newsletter-form button { border-radius: 999px; }
/* generated-header parity (the review/compare/trust families emit .site-header__inner) */
body .site-header__inner nav a, body[class] .site-header__inner nav a { color: rgba(255,255,255,.72); font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; letter-spacing: 0; text-transform: none; border: 0; background: none; padding: 6px 0; border-radius: 0; }
body .site-header__inner nav a:hover, body[class] .site-header__inner nav a:hover, body .site-header__inner nav a[aria-current="page"], body[class] .site-header__inner nav a[aria-current="page"] { color: #fff; background: none; border: 0; }
body .site-header__inner nav a[href="/check/"], body[class] .site-header__inner nav a[href="/check/"] { background: #fff; color: #000; border-radius: 999px; padding: 8px 14px; font-weight: 600; border: 0; }
body .site-header__inner nav a[href="/check/"]:hover, body[class] .site-header__inner nav a[href="/check/"]:hover { background: rgba(255,255,255,.86); color: #000; }
/* small labels are Inter, never the serif */
.review-toc a, .review-opinion__byline, .review-quick h2, .review-pricing__k, .review-hero__behavior-badge, .review-compared__axis, .review-badge, .review-evidence__verified, .review-status-badge, .review-id-pill, .tests-table th, .score-table th, .compare-table th, .fnf-label, .featured-test__lead, .featured-test__tag, .eyebrow, .kicker, .rs-num, .rs-panel__title, .svc-row .get b, .practice-cell .get b, .tier-chip, .tier, .top-tier, .check-tier, .check-acr__label, .check-band, .nf-eyebrow, .review-tabs a, .tests-foot .how-box b, .record-sub, .honest-line h3, .seal__t, .seal__s, .stamp span, .quick-row .qr code, .contact-form label, .practice-path b, .offer-list b, .svc-rules b, .svc-partners li b, .pledge b, .step strong, .ab-founder .name, .offer-list b a, .tier-card .tier-name, .review-compared li strong, .check-card__name, .check-grid h4, .top-card h3, .review-card h3 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.review-toc a, .review-opinion__byline, .review-quick h2, .review-pricing__k, .tests-table th, .score-table th, .compare-table th, .fnf-label, .featured-test__lead, .eyebrow, .kicker, .rs-num, .rs-panel__title, .svc-row .get b, .practice-cell .get b, .record-sub, .quick-row .qr code, .contact-form label, .check-acr__label, .nf-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-size: 0.74rem; color: var(--muted); }
.review-toc a { font-size: 0.78rem; }
.review-card h3, .check-card__name, .top-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.01em; }
.eyebrow, .kicker { color: var(--muted); }
/* the World B badge matcher [class*="tier"][class*="vital"] also matched the card class
   review-card-tier-vital and painted whole cards green; cards win here at equal specificity */
html body.reviews-page .review-grid-wrap .review-card-v2, html body.reviews-page .review-card-v2[class*="tier"] { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); color: inherit; border: 1px solid var(--line); border-radius: 14px; }
html body.reviews-page .review-card-v2[class*="tier"]:hover { border-color: rgba(255,255,255,.35); }
html body.reviews-page .facet-chip, html body.reviews-page .view-toggle-btn, html body.reviews-page .review-pagination .page-btn { border-radius: 999px; background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
html body.reviews-page .facet-chip[aria-pressed="true"], html body.reviews-page .view-toggle-btn[aria-pressed="true"], html body.reviews-page .review-pagination .page-btn[aria-current="page"] { background: #fff; color: #000; border-color: #fff; }
/* card tier badges on /reviews/: outlined chips in the tier colour, never a filled box */
html body.reviews-page .tier-badge, html body.reviews-page .review-card-top [class*="tier"], html body.reviews-page .review-card-score .tier-badge { background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 3px 9px; font: 600 0.7rem/1.4 var(--font-body); letter-spacing: 0.06em; }
html body.reviews-page .tier-badge[data-tier="VITAL"], html body.reviews-page .review-card-top [class*="vital" i] { color: var(--tier-vital); background: transparent; }
html body.reviews-page .tier-badge[data-tier="STEADY"], html body.reviews-page .review-card-top [class*="steady" i] { color: var(--tier-steady); background: transparent; }
html body.reviews-page .tier-badge[data-tier="FADING"], html body.reviews-page .review-card-top [class*="fading" i] { color: var(--tier-fading); background: transparent; }
html body.reviews-page .tier-badge[data-tier="FLATLINE"], html body.reviews-page .review-card-top [class*="flatline" i] { color: var(--tier-flatline); background: transparent; }
/* ============================================================================
   12. POLISH FROM THE RESEND AUDIT (2026-09-08, brain/design/2026-09-08-resend-audit/)
   Measured, not eyeballed: ink #f0f0f0, muted #a1a4a5, paragraphs 16/28 capped at
   ~58ch, 1024px measure, one 150ms cubic-bezier(.4,0,.2,1) transition on every
   interactive element, borderless secondary buttons, header without hairline,
   visible keyboard focus, scroll reveal (site-motion.js).
   ========================================================================== */
:root { --ink: #f0f0f0; --muted: #a1a4a5; --ink-soft: rgba(240,240,240,.78); --max: 1024px; --ease: cubic-bezier(.4, 0, .2, 1); }
body { color: var(--ink); }
p, li, td { line-height: 1.7; }
main p { max-width: 58ch; }
a, button, input, select, textarea, .button, .rs-btn, .rs-door, .rs-panel, .practice-cell, .cat-chip, .tier-chip, .review-card-v2, .svc-row, .offer-list a, .site-header .nav-links a, .site-header__inner nav a { transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), opacity .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.button, .rs-btn, button[type="submit"] { transition-duration: .2s; }
:focus-visible { outline: 2px solid rgba(240,240,240,.7); outline-offset: 3px; border-radius: 6px; }
.site-header, body .site-header, body[class] .site-header { border-bottom: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header .nav-links a, .site-header__inner nav a, body .site-header .nav-links a, body .site-header__inner nav a, body[class] .site-header__inner nav a { font-size: 14px; font-weight: 500; color: var(--muted); }
.site-header .nav-links a:hover, .site-header__inner nav a:hover, .site-header .nav-links a[aria-current="page"], .site-header__inner nav a[aria-current="page"] { color: #fff; }
.site-header .nav-links a[href="/check/"], .site-header__inner nav a[href="/check/"], body .site-header .nav-links a[href="/check/"], body .site-header__inner nav a[href="/check/"], body[class] .site-header__inner nav a[href="/check/"] { color: #000; height: 40px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 600; border-radius: 16px; }
/* buttons: primary white pill h48; secondary = text only, muted → white */
.button-primary, body .button-primary, .rs-btn:not(.rs-btn--ghost), button[type="submit"], .contact-form button { height: 48px; padding: 0 20px; font-size: 16px; font-weight: 600; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.button-primary:hover, body .button-primary:hover, .rs-btn:not(.rs-btn--ghost):hover { background: #fff; color: #000; opacity: .88; }
.button:not(.button-primary), body .button:not(.button-primary), .rs-btn--ghost, .button-ghost, .button-secondary { height: 48px; padding: 0 20px; font-size: 16px; font-weight: 600; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 16px; }
.button:not(.button-primary):hover, body .button:not(.button-primary):hover, .rs-btn--ghost:hover, .button-ghost:hover { color: #fff; background: rgba(255,255,255,.06); border-color: transparent; }
/* panels lift on hover, links brighten */
.rs-panel:hover, .rs-door:hover, .practice-cell:hover, .review-card-v2:hover { border-color: rgba(255,255,255,.35); }
.rs-links a, .home-block-links a, .offer-foot a { color: var(--ink); }
/* footer rhythm */
.footer, body.homepage .footer, body[class] .footer { padding-top: 96px; padding-bottom: 48px; }
/* scroll reveal — opt-in via data-reveal, applied by site-motion.js; instant when reduced motion */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } a, button, .rs-btn, .button { transition: none; } }
/* pages whose <main> is its own container (incidents, 404, changelog): give them the site measure */
main.wrap, .wrap, .nf-wrap, main.changelog-main, .changelog-page main { width: min(calc(100% - 40px), var(--max)); margin-left: auto; margin-right: auto; box-sizing: border-box; }
/* legal pages: v2 still carried the dark-era navy card; bring it onto the panel grammar */
.legal-section { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.legal-hero { border-radius: 14px; }