/* ===========================================================
   ATRAYU — shared stylesheet
   One container. One type scale. One spacing scale.
   Every color pair below meets WCAG AA at the size it is used.
   =========================================================== */

:root {
  /* ---- surfaces ---- */
  --ink:        #141413;
  --paper:      #FFFFFF;
  --surface:    #FAFAF8;
  --surface-2:  #F2F2EE;
  --line:       #D8D8D1;
  --line-soft:  #E8E8E2;

  /* ---- text on light. ratios vs #FFFFFF ---- */
  --body:       #4A4A44;   /* 8.92:1 */
  --muted:      #5F5F56;   /* 6.45:1 */
  --faint:      #6F6F66;   /* 5.07:1  — was #8C8C83 at 3.39:1, failed */

  /* ---- accent ---- */
  --accent:     #1E80FF;   /* 7.11:1 on white, white 7.11:1 on it */
  --accent-bg:  #12304F;
  --focus:      #1E80FF;   /* 5.01:1 on white, 3.68:1 on ink */
  --focus-dark: #1E80FF;   /* 9.32:1 on ink */

  /* ---- text on ink #141413 ---- */
  --dark-line:  #2A2A28;
  --dark-body:  #9A9A92;   /* 6.51:1 */
  --dark-faint: #8E8E85;   /* 5.57:1  — was #7E7E75 at 4.50:1, borderline */
  --dark-accent:#1E80FF;   /* 8.14:1 */

  /* ---- flags ---- */
  --flag:       #9A6B1F;
  --flag-bg:    #FDF8EC;

  /* ---- control borders ---- */
  --ctrl-line:  #88887F;   /* 3.57:1 on white, clears 1.4.11 */

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- type scale. sentence case; uppercase only in the label tier ---- */
  --t-d1:    clamp(34px, 4.44vw, 64px);
  --t-d2:    clamp(26px, 2.78vw, 40px);
  --t-d3:    clamp(20px, 1.81vw, 26px);
  --t-lead:  clamp(17px, 1.46vw, 21px);
  --t-body:  17px;
  --t-sm:    15px;
  --t-cap:   13.5px;       /* source lines. the proof tier */
  --t-label: 12px;         /* floor. nothing on this site is smaller */
  --t-fig:   clamp(28px, 2.64vw, 38px);

  /* ---- grid ---- */
  --container: 1200px;
  --gutter:    clamp(16px, 3vw, 40px);
  --col-gap:   24px;

  /* ---- spacing, 8px base ---- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 80px; --s-8: 96px;
  --section-y: clamp(56px, 6vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: #000; }
button { font-family: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- focus, site-wide ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible, .band-ink :focus-visible, .hero :focus-visible,
.band-grad :focus-visible { outline-color: var(--focus-dark); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-2); top: var(--s-2); z-index: 99; background: var(--ink);
              color: #fff; padding: 12px 18px; border-radius: 5px; }

/* ===========================================================
   GRID — one container for every page
   =========================================================== */
.container,
.wrap,                 /* deprecated alias, kept so old markup lands on the grid */
.band-wrap {           /* deprecated alias */
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.narrow { max-width: none; }   /* deprecated: column width now comes from .grid */

.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--col-gap); }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(8, minmax(0,1fr)); --col-gap: 20px; } }
@media (max-width: 767px)  { .grid { grid-template-columns: repeat(4, minmax(0,1fr)); --col-gap: 16px; } }

/* column spans */
.c-text  { grid-column: 1 / span 6; }
.c-head  { grid-column: 1 / span 8; }
.c-side  { grid-column: 9 / span 4; }
.c-full  { grid-column: 1 / span 12; }
.c-vis   { grid-column: 8 / span 5; }
@media (max-width: 1023px) {
  .c-text, .c-head, .c-side, .c-full, .c-vis { grid-column: 1 / span 8; }
}
@media (max-width: 767px) {
  .c-text, .c-head, .c-side, .c-full, .c-vis { grid-column: 1 / span 4; }
}

/* ===========================================================
   TYPE
   =========================================================== */
.d1 { font-weight: 700; font-size: var(--t-d1); line-height: 1.05; letter-spacing: -.02em;
      margin: 0; max-width: 24ch; }
.d2 { font-weight: 700; font-size: var(--t-d2); line-height: 1.12; letter-spacing: -.018em;
      margin: 0; max-width: 24ch; }
.d3 { font-weight: 600; font-size: var(--t-d3); line-height: 1.25; letter-spacing: -.01em; margin: 0; }

/* legacy heading names, remapped onto the scale above */
.h1 { font-weight: 700; font-size: var(--t-d1); line-height: 1.05; letter-spacing: -.02em;
      margin: 0; text-transform: none; max-width: 24ch; }
.h2 { font-weight: 700; font-size: var(--t-d2); line-height: 1.12; letter-spacing: -.018em;
      margin: 0; text-transform: none; max-width: 24ch; }
.h3 { font-weight: 600; font-size: var(--t-d3); line-height: 1.25; letter-spacing: -.01em; margin: 0; }

.mono { font-family: var(--mono); }
.label, .eyebrow { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
                   font-weight: 600; color: var(--faint); line-height: 1.3; }
.lede, .dsub { font-size: var(--t-lead); line-height: 1.5; color: var(--body); max-width: 60ch; }
.small { font-size: var(--t-sm); color: var(--muted); }
.cap, .tiny { font-size: var(--t-cap); color: var(--muted); line-height: 1.5; }
p { max-width: 68ch; }

/* source attribution. the most credible thing on the page, sized like it */
.src { font-size: var(--t-cap); color: var(--muted); line-height: 1.5; }
.src .date { font-family: var(--mono); }
.src a { color: var(--muted); }

.lead { display: flex; gap: 18px; margin-top: var(--s-3); max-width: 640px; }
.lead .rule { flex: 0 0 28px; height: 1px; background: #A8A8A0; margin-top: 14px; }
.lead p { margin: 0; }

/* ===========================================================
   SECTIONS AND BANDS
   Background color bleeds. Content never leaves the container.
   Max three colored bands per page, never two adjacent.
   =========================================================== */
.sec, .band { padding: var(--section-y) 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.band-ink, .dark { background: var(--ink); color: #fff; }
.band-ink .d1, .band-ink .d2, .band-ink .d3,
.dark .h1, .dark .h2, .dark .h3 { color: #fff; }
.band-ink .label, .band-ink .eyebrow, .dark .eyebrow { color: var(--dark-faint); }
.band-ink .lede, .band-ink .dsub, .band-ink p, .dark p { color: var(--dark-body); }
.band-ink .src, .dark .src { color: var(--dark-faint); }
.band-ink a, .dark a { color: #fff; }

/* gradient never gets lighter than #1E80FF, so white labels stay legible */
.band-grad { background: linear-gradient(100deg, #1E80FF 0%, #1E80FF 55%, #1E80FF 100%); color: #fff; }
.band-grad .d1, .band-grad .d2, .band-grad .d3 { color: #fff; }
.band-grad .label, .band-grad .eyebrow { color: #fff; }
.band-grad .lede, .band-grad .dsub, .band-grad p { color: rgba(255,255,255,.92); }

/* ===========================================================
   HEADER / FOOTER
   =========================================================== */
.site-head { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
             background: rgba(255,255,255,.95); backdrop-filter: blur(10px); }
.site-head .container, .site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding-top: 14px; padding-bottom: 14px; }
.mark { font-size: clamp(20px, 1.8vw, 25px); font-weight: 400; letter-spacing: .13em;
        text-transform: uppercase; text-decoration: none; color: var(--ink); line-height: 1; }
.nav { display: flex; gap: var(--s-3); align-items: center; }
/* plain nav links only. a button in the nav keeps its own color. */
.nav a:not([class*="btn"]) { font-size: var(--t-sm); text-decoration: none; color: var(--muted); }
.nav a:not([class*="btn"]):hover { color: var(--ink); }
.nav .btn-sm { margin-left: var(--s-1); }
@media (max-width: 599px) { .nav .hide-sm { display: none; } }

.site-foot { border-top: 1px solid var(--line); padding: var(--s-5) 0 var(--s-6); background: var(--surface); }
.disc { color: var(--muted); font-size: var(--t-cap); line-height: 1.65; max-width: 72ch; }
.disc b { color: var(--ink); font-weight: 600; }
.disc p { margin: 0 0 12px; max-width: none; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.foot-nav a { font-size: var(--t-sm); color: var(--muted); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); }

/* ===========================================================
   BUTTONS
   Primary appears at most five times on a page and never twice in a row.
   =========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 6px; border: 0;
  font: 600 var(--t-body)/1 var(--font); text-decoration: none;
  background: var(--accent); color: #fff; cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.btn:hover { background: #1E80FF; color: #fff; transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(28,88,160,.28); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: #D6D6CE; color: var(--faint); box-shadow: none; transform: none; cursor: not-allowed; }

.btn-2, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 6px;
  font: 600 var(--t-body)/1 var(--font); text-decoration: none;
  background: transparent; color: var(--ink); border: 1.5px solid var(--ctrl-line); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn-2:hover, .btn-ghost:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); }

.btn-3 {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 16px/1.4 var(--font); color: var(--ink); background: 0; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.btn-3:hover { color: var(--accent); text-decoration-thickness: 3px; }

.btn-sm { min-height: 40px; padding: 0 18px; font-size: var(--t-sm); }
.btn-wide { display: flex; width: 100%; }

.on-dark .btn, .band-ink .btn, .hero .btn, .band-grad .btn { background: #fff; color: var(--ink); }
.on-dark .btn:hover, .band-ink .btn:hover, .hero .btn:hover, .band-grad .btn:hover {
  background: var(--surface-2); color: var(--ink); }
.on-dark .btn-2, .band-ink .btn-2, .hero .btn-2, .band-grad .btn-2,
.on-dark .btn-ghost, .band-ink .btn-ghost, .hero .btn-ghost, .band-grad .btn-ghost {
  border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.on-dark .btn-2:hover, .band-ink .btn-2:hover, .hero .btn-2:hover, .band-grad .btn-2:hover,
.on-dark .btn-ghost:hover, .band-ink .btn-ghost:hover, .hero .btn-ghost:hover, .band-grad .btn-ghost:hover {
  border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ===========================================================
   COMPONENTS
   =========================================================== */

/* trust row: the four facts, static, under the hero */
.trust { display: flex; flex-wrap: wrap; gap: 10px var(--s-3); margin-top: var(--s-4); }
.trust li { list-style: none; font-size: var(--t-sm); display: flex; align-items: center; gap: 9px; }
.trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
                    background: var(--accent); flex: 0 0 auto; }
.on-dark .trust li, .hero .trust li, .band-ink .trust li { color: #fff; }
.on-dark .trust li::before, .hero .trust li::before { background: var(--dark-accent); }
.trust ul { margin: 0; padding: 0; }

/* evidence card. no shadow; shadows read as marketing */
.card, .ev { border: 1px solid var(--line); border-radius: 8px; padding: var(--s-3);
             background: var(--paper); box-shadow: none; }
@media (min-width: 560px) { .card, .ev { padding: var(--s-4); } }
.ev-head { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline;
           margin-bottom: var(--s-2); }
.ev figcaption { margin-top: 12px; }

/* could-not-verify callout. the honesty differentiator, given a shape */
.gap {
  border-left: 3px solid var(--flag); background: var(--flag-bg);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: 0 6px 6px 0;
  margin-top: var(--s-4); font-size: var(--t-sm); line-height: 1.6; color: var(--body); }
.gap .label { color: var(--flag); margin-bottom: 8px; display: block; }
.gap b { color: var(--ink); }
.gap p { max-width: none; margin: 0 0 10px; }
.gap p:last-child { margin-bottom: 0; }

.note { margin-top: var(--s-4); padding: var(--s-3); background: var(--surface-2);
        border: 1px solid var(--line); border-radius: 6px; font-size: var(--t-sm);
        line-height: 1.65; color: var(--body); }
.note b { color: var(--ink); font-weight: 600; }
.note p { max-width: none; }
.band-ink .note, .dark .note { background: #1C1C1A; border-color: var(--dark-line); color: var(--dark-body); }
.band-ink .note b, .dark .note b { color: #fff; }

.chip { display: inline-block; border: 1px solid var(--ctrl-line); border-radius: 999px;
        padding: 6px 13px; font-size: var(--t-cap); color: var(--body); background: var(--paper);
        white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.rows { margin-top: var(--s-3); }
.row { display: flex; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; }
.row .num { font-family: var(--mono); font-size: var(--t-cap); color: var(--accent); flex: 0 0 30px; }
.row p { margin: 5px 0 0; color: var(--muted); font-size: var(--t-sm); }
.band-ink .row, .dark .row { border-color: var(--dark-line); }
.band-ink .row p, .dark .row p { color: var(--dark-body); }
.band-ink .row .num, .dark .row .num { color: var(--dark-accent); }

/* attributed quote. no portrait, full source */
.quote { border-left: 3px solid var(--accent); padding: 2px 0 2px 22px; margin: 0 0 var(--s-4); }
.quote blockquote { margin: 0; font-size: var(--t-d3); line-height: 1.4; letter-spacing: -.012em;
                    font-weight: 500; max-width: 34ch; }
.quote cite { display: block; font-style: normal; margin-top: 12px; font-size: var(--t-cap);
              color: var(--muted); line-height: 1.5; }
.quote cite b { color: var(--ink); font-weight: 600; }
.quote cite a { color: var(--muted); }
.band-ink .quote, .dark .quote { border-left-color: var(--dark-accent); }
.band-ink .quote cite, .dark .quote cite { color: var(--dark-faint); }
.band-ink .quote cite b, .dark .quote cite b { color: #fff; }

/* ledger */
.ledger { border-top: 1px solid var(--line); }
.lrow { display: flex; flex-wrap: wrap; gap: 10px var(--s-4); align-items: baseline;
        justify-content: space-between; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.lrow .ll { flex: 1 1 300px; min-width: 0; }
.lrow .lname { font-weight: 600; font-size: var(--t-body); }
.lrow .ldesc { margin-top: 6px; font-size: var(--t-sm); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.lrow .lfig { font-family: var(--mono); font-size: var(--t-fig); font-weight: 500;
              letter-spacing: -.02em; white-space: nowrap; flex: 0 0 auto; }
.lrow .lsrc { margin-top: 7px; font-size: var(--t-cap); color: var(--muted); text-align: right; }
.lrow .lsrc a { color: var(--muted); }
.lrow.zero { border-bottom: 0; }
.lrow.zero .lname, .lrow.zero .lfig { color: var(--accent); }
.band-ink .ledger, .band-ink .lrow, .dark .ledger, .dark .lrow { border-color: var(--dark-line); }
.band-ink .lrow .lfig, .dark .lrow .lfig { color: var(--dark-accent); }
.band-ink .lrow .ldesc, .band-ink .lrow .lsrc,
.dark .lrow .ldesc, .dark .lrow .lsrc { color: var(--dark-faint); }

/* subject tiles: seven cells, no eighth pretending to be a company */
.wall { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
        background: var(--line); border: 1px solid var(--line); }
.wall > div { background: var(--paper); padding: var(--s-3) var(--s-2); }
.wall .wn { font-weight: 600; font-size: var(--t-body); letter-spacing: -.015em; }
.wall .wd { font-family: var(--mono); font-size: var(--t-label); color: var(--muted); margin-top: 8px; }
@media (max-width: 767px) { .wall { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* stats: three, not four */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); }
.stats > div { background: var(--paper); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2); }
.stats .sv { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; color: var(--accent);
             font-size: var(--t-fig); line-height: 1; }
.stats .sl { font-size: var(--t-sm); color: var(--muted); margin-top: 12px; line-height: 1.5; }
.band-ink .stats, .dark .stats { background: var(--dark-line); }
.band-ink .stats > div, .dark .stats > div { background: var(--ink); }
.band-ink .stats .sv, .dark .stats .sv { color: var(--dark-accent); }
.band-ink .stats .sl, .dark .stats .sl { color: var(--dark-body); }
@media (max-width: 767px) { .stats { grid-template-columns: repeat(1, minmax(0,1fr)); } }

/* big link cards */
.cards { border-top: 1px solid var(--line); }
.bigcard { display: grid; grid-template-columns: 34px minmax(0,1fr) minmax(0,.62fr) 28px;
           gap: var(--s-3); align-items: start; padding: var(--s-4) 0;
           border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
           text-decoration: none; color: var(--ink); transition: border-left-color .18s, background .18s; }
.bigcard:hover { background: var(--surface); border-left-color: var(--accent); }
.bigcard .bn { font-family: var(--mono); font-size: var(--t-cap); color: var(--accent); padding-top: 7px; }
.bigcard .bh { font-weight: 700; font-size: var(--t-d3); line-height: 1.2; letter-spacing: -.014em; }
.bigcard p { margin: 10px 0 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.6; max-width: none; }
.bigcard .bin { font-size: var(--t-cap); color: var(--muted); padding-top: 6px; }
.bigcard .bin li { list-style: none; padding: 4px 0 4px 15px; position: relative; }
.bigcard .bin li::before { content: "·"; position: absolute; left: 2px; color: var(--accent); }
.bigcard .bin ul { margin: 0; padding: 0; }
.bigcard .ba { font-size: 21px; color: var(--faint); padding-top: 5px;
               transition: transform .18s, color .18s; justify-self: end; }
.bigcard:hover .ba { transform: translateX(5px); color: var(--accent); }
@media (max-width: 1023px) {
  .bigcard { grid-template-columns: 30px minmax(0,1fr) 24px; }
  .bigcard .bin { grid-column: 2; padding-top: 0; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff;
        padding: clamp(48px, 6vw, 80px) 0 clamp(44px, 5vw, 72px); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
           -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 64%, transparent);
                   mask-image: linear-gradient(180deg, transparent, #000 20%, #000 64%, transparent); }
.hero-bg .col { position: absolute; top: 0; font-family: var(--mono); font-size: var(--t-label);
                line-height: 2.2; color: rgba(255,255,255,.11); white-space: pre;
                overflow: hidden; animation: drift linear infinite; }
@keyframes drift { from { transform: translateY(0) } to { transform: translateY(-50%) } }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1;
              background: linear-gradient(95deg, #141413 0%, #141413 36%,
                          rgba(20,20,19,.88) 56%, rgba(20,20,19,.58) 80%, rgba(20,20,19,.4) 100%); }
@media (max-width: 860px) {
  .hero-scrim { background: linear-gradient(180deg, rgba(20,20,19,.84) 0%, rgba(20,20,19,.92) 55%, #141413 100%); }
}
.hero .container, .hero .band-wrap { position: relative; z-index: 2; }
.hero .lede, .hero .dsub { color: rgba(255,255,255,.88); }
.hero .label, .hero .eyebrow { color: var(--dark-faint); }

/* ===========================================================
   SCROLL REVEAL
   Hidden only once the inline head script confirms JS is alive.
   =========================================================== */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s } .rv-d2 { transition-delay: .16s } .rv-d3 { transition-delay: .24s }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .hero-bg .col { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===========================================================
   THE CHECK
   =========================================================== */
.q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.q-pct { font-family: var(--mono); font-size: var(--t-label); color: var(--muted); }
.bar { height: 3px; background: var(--line); margin-top: 12px; }
.bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .28s ease; }

.q-prompt { font-weight: 700; letter-spacing: -.018em; line-height: 1.18; margin: var(--s-3) 0 0;
            font-size: var(--t-d2); max-width: 22ch; }
.q-hint { margin: 10px 0 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }

.opts { display: grid; gap: 10px; margin-top: var(--s-3); max-width: 620px; }
.opt { display: block; width: 100%; text-align: left; cursor: pointer; background: var(--paper);
       border: 1.5px solid var(--line); border-radius: 6px; padding: 16px 18px;
       font-size: var(--t-body); color: var(--ink); transition: border-color .12s, background .12s; }
.opt:hover { border-color: var(--accent); background: var(--accent-bg); }
.opt .lbl { display: block; font-weight: 500; }
.opt .sub2 { display: block; margin-top: 4px; font-size: var(--t-cap); color: var(--muted); font-weight: 400; }

/* number entry: field on top, full-width advance button under it */
.numwrap { display: block; margin-top: var(--s-3); max-width: 620px; position: relative; }
.numwrap input { display: block; width: 100%; font-family: var(--mono); font-size: 22px;
                 padding: 16px 150px 16px 16px; border: 1.5px solid var(--ctrl-line); border-radius: 6px;
                 background: var(--paper); color: var(--ink); -moz-appearance: textfield; }
.numwrap input::-webkit-outer-spin-button,
.numwrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numwrap input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.numwrap .unit { position: absolute; right: 16px; top: 31px; transform: translateY(-50%);
                 font-size: var(--t-sm); color: var(--muted); white-space: nowrap; pointer-events: none; }
.numwrap .btn { display: flex; width: 100%; margin-top: 10px; }

.q-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
          margin-top: var(--s-3); flex-wrap: wrap; max-width: 620px; }
.linky { background: 0; border: 0; padding: 0; cursor: pointer; font-size: var(--t-sm);
         color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.linky:hover { color: var(--ink); }

.tag { display: inline-block; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em;
       text-transform: uppercase; padding: 7px 12px; border-radius: 3px; }
.tag-yes { background: var(--accent-bg); color: var(--accent); }
.tag-no  { background: var(--surface-2); color: var(--muted); }

.ask { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ---------- utility ---------- */
.hidden { display: none !important; }
.chain { width: 100%; height: auto; display: block; margin-top: var(--s-4); }

/* ===========================================================
   LANDING COMPONENTS
   Split hero, quiz card, quote cards, FAQ, sticky bar.
   =========================================================== */

/* ---- split hero: pitch left, quiz card right ---- */
.hero-split { padding: clamp(40px, 5vw, 72px) 0 clamp(44px, 5vw, 72px); background: var(--paper); }
.hero-split .pitch { grid-column: 1 / span 6; }
.hero-split .panel,
.hero-split .visual { grid-column: 7 / span 6; align-self: center; }
@media (max-width: 1023px) {
  .hero-split .pitch, .hero-split .panel, .hero-split .visual { grid-column: 1 / span 8; }
  .hero-split .panel, .hero-split .visual { margin-top: var(--s-5); }
}
@media (max-width: 767px) {
  .hero-split .pitch, .hero-split .panel { grid-column: 1 / span 4; }
  /* the diagram is unreadable below ~6px of type at phone width, so it goes */
  .hero-split .visual { display: none; }
}
.accent-phrase { color: var(--accent); }

/* ---- 2x2 data-type grid with icons ---- */
.dtypes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-3) var(--s-4);
          margin-top: var(--s-4); }
.dtype { display: flex; gap: 12px; align-items: flex-start; }
.dtype svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }
.dtype .dt { font-weight: 600; font-size: var(--t-sm); }
.dtype .dd { font-size: var(--t-cap); color: var(--muted); margin-top: 3px; line-height: 1.45; }
@media (max-width: 480px) { .dtypes { grid-template-columns: minmax(0,1fr); } }

.reassure { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s-4);
            font-size: var(--t-cap); color: var(--muted); line-height: 1.5; max-width: 52ch; }
.reassure svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }

/* ---- the quiz card ---- */
.qcard { border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
         box-shadow: 0 1px 2px rgba(20,20,19,.04), 0 12px 32px rgba(20,20,19,.08);
         padding: var(--s-4) var(--s-3) var(--s-3); }
@media (min-width: 560px) { .qcard { padding: var(--s-4); } }
.qcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
             padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.qcard-top .step { font-family: var(--mono); font-size: var(--t-label); color: var(--muted);
                   letter-spacing: .08em; }
.qcard .bar { margin-top: 0; }
.qcard .q-prompt { font-size: var(--t-d3); margin-top: var(--s-3); max-width: none; }
.qcard .q-hint { font-size: var(--t-cap); }
.qcard .opts { max-width: none; grid-template-columns: minmax(0,1fr); }
.qcard .opts.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.qcard .opt { padding: 14px 16px; font-size: var(--t-sm); }
@media (max-width: 520px) { .qcard .opts.two { grid-template-columns: minmax(0,1fr); } }
.qcard .numwrap { max-width: none; }
.qcard .q-foot { max-width: none; }
.qcard-note { margin-top: var(--s-3); padding-top: 14px; border-top: 1px solid var(--line-soft);
              font-size: var(--t-cap); color: var(--muted); text-align: center; }
@media (max-width: 420px) { .qcard .opts { grid-template-columns: minmax(0,1fr); } }

/* result inside the card */
.qcard .tag { margin-bottom: 14px; }
.qcard .rtitle { font-weight: 700; font-size: var(--t-d3); line-height: 1.2; letter-spacing: -.012em; }
.qcard .rbody { font-size: var(--t-sm); color: var(--body); margin-top: 12px; line-height: 1.6; }

/* email capture */
.capture { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.capture label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: 10px; }
.capture .fieldrow { display: flex; gap: 10px; flex-wrap: wrap; }
.capture input { flex: 1 1 200px; min-width: 0; font-family: var(--font); font-size: var(--t-body);
                 padding: 14px 15px; border: 1.5px solid var(--ctrl-line); border-radius: 6px;
                 background: var(--paper); color: var(--ink); }
.capture input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.capture .fine { font-size: var(--t-cap); color: var(--muted); margin-top: 11px; line-height: 1.5; }
.capture .err { color: #9A2B1F; font-size: var(--t-cap); margin-top: 9px; }
.capture.done { text-align: left; }

/* ---- the bar: three criteria ---- */
.bar3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.bar3 .n { font-family: var(--mono); font-size: var(--t-cap); color: var(--accent); }
.bar3 .t { font-weight: 700; font-size: var(--t-d3); margin-top: 10px; letter-spacing: -.012em; }
.bar3 p { font-size: var(--t-sm); color: var(--muted); margin: 10px 0 0; max-width: none; }
@media (max-width: 767px) { .bar3 { grid-template-columns: minmax(0,1fr); gap: var(--s-3); } }

/* ---- quote cards with photos ---- */
/* Pull quotes, set at headline scale. No photographs: these are people
   quoted from the press who have no connection to Atrayu, and putting a
   face next to our copy would imply one. The words carry it. */
.qgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
          gap: var(--s-3); margin-top: var(--s-4); }
@media (max-width: 1023px) { .qgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .qgrid { grid-template-columns: minmax(0,1fr); } }
.qc { border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
      background: var(--paper); display: flex; flex-direction: column; }
.qc .ph { aspect-ratio: 16 / 7; background: var(--surface-2); border-bottom: 1px solid var(--line);
          display: flex; align-items: center; justify-content: center; padding: 14px; }
.qc .ph .src-in { font-size: var(--t-cap); color: var(--muted); text-align: center; line-height: 1.5; }
.qc .ph .src-in b { display: block; color: var(--ink); font-weight: 600; font-size: var(--t-sm); }
.qc .bd { padding: var(--s-3); display: flex; flex-direction: column; flex: 1 1 auto; }
.qc blockquote { margin: 0; font-size: var(--t-d3); line-height: 1.16;
                 letter-spacing: -.019em; font-weight: 700; text-wrap: balance; }
.qc blockquote::before { content: "\201C"; }
.qc blockquote::after  { content: "\201D"; }
.qc blockquote em { font-style: normal; color: inherit; font-weight: inherit; }
.qc .who { margin-top: auto; padding-top: var(--s-3); }
.qc .who .nm { font-weight: 600; font-size: var(--t-body); }
.qc .who .rl { font-size: var(--t-sm); color: var(--muted); margin-top: 5px; line-height: 1.5; }
.qc .who .rl a { color: var(--muted); }

.qnote { font-size: var(--t-cap); color: var(--muted); margin-top: var(--s-3); max-width: none; }

/* ---- big stat callout ---- */
.callout { display: flex; gap: var(--s-4); align-items: baseline; flex-wrap: wrap;
           padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.callout .big { font-family: var(--mono); font-weight: 500; letter-spacing: -.03em;
                font-size: clamp(34px, 5.2vw, 62px); line-height: 1; flex: 0 0 auto; }
.callout .side { flex: 1 1 280px; min-width: 0; }
.callout .side .t { font-weight: 600; font-size: var(--t-body); }
.callout .side p { font-size: var(--t-sm); color: var(--muted); margin: 7px 0 0; }
.callout.tint { background: var(--accent-bg); border: 0; border-radius: 8px;
                padding: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.callout.tint .big { color: var(--accent); }

/* ---- tool logo cluster ---- */
.tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-3); }
.tool { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line);
        border-radius: 8px; padding: 10px 15px; background: var(--paper); font-size: var(--t-sm);
        font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.tool:hover { border-color: #BDBDB4; box-shadow: 0 2px 8px rgba(20,20,19,.06); }
.tool img { width: 19px; height: 19px; flex: 0 0 19px; object-fit: contain; }
/* if the logo fails to load the chip still reads correctly */
.tool img[data-failed] { display: none; }

/* logo grid for the "where your records live" block */
.logogrid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1px;
            background: var(--line); border: 1px solid var(--line); border-radius: 8px;
            overflow: hidden; margin-top: var(--s-3); }
.logogrid > div { background: var(--paper); display: flex; flex-direction: column;
                  align-items: center; justify-content: center; gap: 11px; padding: 22px 10px; }
/* marks come in different aspect ratios, so height is fixed and width follows */
.logogrid img { height: 30px; width: auto; max-width: 76px; object-fit: contain; }
.logogrid .nm { font-size: var(--t-label); color: var(--muted); text-align: center; line-height: 1.3; }
@media (max-width: 1023px) { .logogrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 560px)  { .logogrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-3) 44px var(--s-3) 0;
               font-weight: 600; font-size: var(--t-body); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                      font-family: var(--mono); font-size: 19px; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--accent); }
.faq .ans { padding: 0 44px var(--s-3) 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.65; }
.faq .ans p { max-width: none; margin: 0 0 10px; }
.faq .ans p:last-child { margin-bottom: 0; }

/* ---- sticky bottom CTA ---- */
.sticky { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(140%);
          z-index: 50; background: var(--ink); color: #fff; border-radius: 999px;
          display: flex; align-items: center; gap: var(--s-3); padding: 9px 9px 9px 22px;
          box-shadow: 0 8px 28px rgba(20,20,19,.3); transition: transform .3s ease;
          max-width: calc(100% - 32px); }
.sticky.show { transform: translateX(-50%) translateY(0); }
.sticky span { font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky .btn { min-height: 40px; padding: 0 20px; font-size: var(--t-sm); border-radius: 999px; }
@media (max-width: 520px) { .sticky span { display: none; } .sticky { padding: 9px; } }
/* keep the floating CTA from sitting on top of the last thing on the page */
body:has(.sticky) { padding-bottom: 84px; }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* ---- hero graphics on the inner pages ---- */
.hgfx2 { width: 100%; height: auto; display: block; overflow: visible; }
.js .hgfx2 .bar-a, .js .hgfx2 .bar-b, .js .hgfx2 .bar-c {
  transform-origin: left center; animation: barIn .7s cubic-bezier(.2,.7,.3,1) both; }
.js .hgfx2 .bar-b { animation-delay: .12s } .js .hgfx2 .bar-c { animation-delay: .24s }
@keyframes barIn { from { transform: scaleX(.04); opacity: 0 } to { transform: scaleX(1); opacity: 1 } }
.js .hgfx2 .tick-y, .js .hgfx2 .tick-y2 { animation: popIn .45s ease-out both; animation-delay: .5s; transform-origin: center }
.js .hgfx2 .tick-y2 { animation-delay: .72s }
@keyframes popIn { from { transform: scale(.3); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.js .hgfx2 .sweep2 { animation: dashIn .9s ease-out both; animation-delay: .45s }
@keyframes dashIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .js .hgfx2 .bar-a, .js .hgfx2 .bar-b, .js .hgfx2 .bar-c,
  .js .hgfx2 .tick-y, .js .hgfx2 .tick-y2, .js .hgfx2 .sweep2 { animation: none; opacity: 1; transform: none; }
}

/* ---- explanatory figures ---- */
.fig { margin-top: var(--s-5); }
.fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.fig figcaption { font-size: var(--t-cap); color: var(--muted); margin-top: var(--s-2);
                  max-width: 70ch; line-height: 1.55; }
.fig figcaption b { color: var(--ink); font-weight: 600; }
.dark .fig figcaption, .band-ink .fig figcaption { color: var(--dark-faint); }
.dark .fig figcaption b, .band-ink .fig figcaption b { color: #fff; }

/* ---- onward links on the result screen ---- */
.rnext { margin-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.rnext a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-soft);
           font-size: var(--t-sm); color: var(--accent); text-decoration: none; }
.rnext a:hover { text-decoration: underline; }

/* ---- selected state on option buttons, restored when you go Back ---- */
.opt.is-sel { border-color: var(--accent); background: var(--accent-bg); }
.opt.is-sel .lbl { color: var(--accent); }

/* ---- centered disclosure ---- */
.disc-center { max-width: 860px; margin-inline: auto; text-align: center; }
.disc-center .disc { max-width: none; }
.disc-center .foot-nav { justify-content: center; }

/* ---- top notice bar ---- */
.topbar { background: var(--accent); color: #fff; font-size: var(--t-cap); }
.topbar .container {
  display: flex; gap: 6px 16px; align-items: center; justify-content: center;
  padding-top: 11px; padding-bottom: 11px; text-align: center; flex-wrap: wrap;
}
.topbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.topbar a:hover { color: #fff; text-decoration-thickness: 2px; }

/* ===========================================================
   HEADER GRAPHIC
   Scattered records resolving into one connected chain.
   Our own argument, drawn. Pauses under prefers-reduced-motion.
   =========================================================== */
.hgfx { width: 100%; height: auto; display: block; overflow: visible; }
.hgfx .frag      { animation: fragIn 7s ease-in-out infinite; }
.hgfx .frag:nth-child(2) { animation-delay: .6s }
.hgfx .frag:nth-child(3) { animation-delay: 1.2s }
.hgfx .frag:nth-child(4) { animation-delay: 1.8s }
.hgfx .frag:nth-child(5) { animation-delay: 2.4s }
.hgfx .frag:nth-child(6) { animation-delay: 3.0s }
@keyframes fragIn {
  0%, 8%   { opacity: 0; transform: translateX(-14px); }
  22%, 64% { opacity: 1; transform: translateX(0); }
  86%,100% { opacity: 0; transform: translateX(10px); }
}
.hgfx .pulse { animation: pulseRun 4.6s linear infinite; }
@keyframes pulseRun {
  0%   { opacity: 0; transform: translateX(0); }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(486px); }
}
.hgfx .nodeA { animation: nodeLight 4.6s linear infinite; }
.hgfx .nodeB { animation: nodeLight 4.6s linear infinite; animation-delay: 1.15s }
.hgfx .nodeC { animation: nodeLight 4.6s linear infinite; animation-delay: 2.3s }
.hgfx .nodeD { animation: nodeLight 4.6s linear infinite; animation-delay: 3.45s }
@keyframes nodeLight {
  0%, 10%  { fill: #FFFFFF; stroke: #D8D8D1; }
  16%, 32% { fill: #12304F; stroke: #1E80FF; }
  48%,100% { fill: #FFFFFF; stroke: #D8D8D1; }
}
.hgfx .sweep { animation: sweep 7s ease-in-out infinite; }
@keyframes sweep { 0%,100% { opacity: .35 } 50% { opacity: .9 } }

@media (prefers-reduced-motion: reduce) {
  .hgfx .frag, .hgfx .pulse, .hgfx .nodeA, .hgfx .nodeB,
  .hgfx .nodeC, .hgfx .nodeD, .hgfx .sweep { animation: none; }
  .hgfx .frag { opacity: 1; }
  .hgfx .pulse { opacity: 0; }
}

/* hero that carries a graphic rather than the quiz card */
.hero-gfx .pitch  { grid-column: 1 / span 6; }
.hero-gfx .visual { grid-column: 7 / span 6; align-self: center; }
@media (max-width: 1023px) {
  .hero-gfx .pitch, .hero-gfx .visual { grid-column: 1 / span 8; }
  .hero-gfx .visual { margin-top: var(--s-5); }
}
@media (max-width: 767px) {
  .hero-gfx .pitch, .hero-gfx .visual { grid-column: 1 / span 4; }
}

/* ===========================================================
   CHECK v2 — mobile order, verdict states, handoff, share
   =========================================================== */
@media (max-width: 1023px) {
  .hero-split .panel { grid-row: 1; margin-top: 0; }
  .hero-split .pitch { grid-row: 2; margin-top: var(--s-5); }
}
.tag-warn { background: var(--flag-bg); color: var(--flag); }
.handoff { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.handoff .btn { font-size: var(--t-body); min-height: 56px; }
.handoff .fine { font-size: var(--t-cap); color: var(--muted); margin-top: 12px; line-height: 1.55; }
.handoff .fine b { color: var(--ink); font-weight: 600; }
.share { margin-top: var(--s-4); padding: var(--s-3); background: var(--surface-2); border-radius: 8px; }
.share .sh-t { font-weight: 600; font-size: var(--t-sm); }
.share .sh-p { font-size: var(--t-cap); color: var(--muted); margin: 6px 0 12px; line-height: 1.5; }
.share .sh-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share input { flex: 1 1 190px; min-width: 0; font-family: var(--mono); font-size: var(--t-cap);
               padding: 11px 12px; border: 1px solid var(--ctrl-line); border-radius: 6px;
               background: var(--paper); color: var(--muted); }
.share input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.share .btn-2 { min-height: 42px; padding: 0 16px; font-size: var(--t-sm); white-space: nowrap; }
.nav-tag { font-size: var(--t-cap); color: var(--muted); }
.chainfig { margin-top: var(--s-5); max-width: 620px; }
@media (max-width: 767px) { .chainfig { display: none; } }

/* eligibility strip */
.elig { border-bottom: 1px solid var(--line); background: var(--surface); }
.elig .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                   gap: 8px 14px; padding-top: 11px; padding-bottom: 11px;
                   font-size: var(--t-cap); color: var(--muted); }
.elig i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); flex: 0 0 3px; }
@media (max-width: 600px) { .elig i { display: none; } .elig .container { gap: 4px 12px; } }

/* centerd landing layout */
.lp { text-align: center; padding: clamp(32px,4vw,56px) 0 clamp(40px,5vw,72px); }
.lp-inner { max-width: 680px; margin-inline: auto; }
.lp h1 { max-width: none; }
.lp .lede { margin-inline: auto; }
.lp .qcard { text-align: left; margin-top: var(--s-4); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--s-3); }
.chip-i { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
          border-radius: 999px; padding: 7px 14px; font-size: var(--t-cap); color: var(--muted); }
.chip-i svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--accent); }
.sec-c { text-align: center; }
.sec-c .lede { margin-inline: auto; }
.sec-c .d2 { max-width: none; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-3); margin-top: var(--s-4); text-align: left; }
@media (max-width: 767px) { .tiers { grid-template-columns: minmax(0,1fr); } }
.tier { border: 1px solid var(--line); border-radius: 10px; padding: var(--s-3); background: var(--surface); }
.tier.top { border-color: var(--accent); }
.tier .tv { font-family: var(--mono); font-size: var(--t-fig); font-weight: 500;
            letter-spacing: -.02em; color: var(--accent); }
.tier .tl { font-weight: 600; font-size: var(--t-sm); margin-top: 10px; }
.tier .td { font-size: var(--t-cap); color: var(--muted); margin-top: 7px; line-height: 1.55; }
.tier .tb { display: inline-block; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em;
            text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-3); margin-top: var(--s-4); text-align: left; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0,1fr); } }
.step-c { border-top: 2px solid var(--line); padding-top: 14px; }
.step-c .sn { font-family: var(--mono); font-size: var(--t-cap); color: var(--accent); }
.step-c .sh { font-weight: 600; font-size: var(--t-sm); margin-top: 8px; }
.step-c .sd { font-size: var(--t-cap); color: var(--muted); margin-top: 7px; line-height: 1.55; }
.whatgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
            background: var(--line); border: 1px solid var(--line); border-radius: 10px;
            overflow: hidden; margin-top: var(--s-4); text-align: left; }
@media (max-width: 860px) { .whatgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .whatgrid { grid-template-columns: minmax(0,1fr); } }
.whatgrid > div { background: var(--paper); padding: var(--s-3); }
.whatgrid .wh { font-weight: 600; font-size: var(--t-sm); }
.whatgrid .wd { font-size: var(--t-cap); color: var(--muted); margin-top: 6px; line-height: 1.55; }

/* grouped FAQ */
.faqgroup { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em;
            text-transform: uppercase; color: var(--accent); margin-top: var(--s-5); margin-bottom: 2px; }
.faqgroup:first-of-type { margin-top: var(--s-4); }
.faq .ans p + p { margin-top: 11px; }

/* anonymization before/after demo */
.anon { margin-top: var(--s-4); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.anon-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); }
.anon-tab { display: block; text-align: left; cursor: pointer; border: 0; padding: 14px 18px;
            background: var(--surface); font-family: var(--font); }
.anon-tab .at { display: block; font-weight: 600; font-size: var(--t-sm); color: var(--muted); }
.anon-tab .ad { display: block; font-size: var(--t-cap); color: var(--faint); margin-top: 2px; }
.anon-tab.is-on { background: var(--paper); }
.anon-tab.is-on .at { color: var(--accent); }
.anon-tab:hover .at { color: var(--ink); }
.anon-tab.is-on:hover .at { color: var(--accent); }
.anon-body { background: #141413; padding: var(--s-3); }
.anon-pre { margin: 0; font-family: var(--mono); font-size: var(--t-cap); line-height: 1.75; color: #C9C9C0;
            white-space: pre-wrap; word-break: break-word; }
.anon-pre .hit { background: rgba(255,120,110,.16); color: #FFB3AC; border-radius: 3px;
                 padding: 1px 4px; transition: background .2s ease, color .2s ease; }
.anon-pre.is-clean .hit { background: rgba(30,128,255,.24); color: #1E80FF; }
.anon-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
             margin-top: 16px; padding-top: 12px; border-top: 1px solid #2A2A28;
             font-size: var(--t-cap); color: #8E8E85; }
@media (max-width: 480px) { .anon-pre { font-size: 12px; } }

/* ===========================================================
   DISPLAY TYPE
   =========================================================== */
.d1, .d2, .d3, .h1, .h2, .h3,
.q-prompt, .rtitle, .qc blockquote,
.tier .tv, .bigcard .bh, .bar3 .t {
  font-family: 'Paytone One', 'Space Grotesk', 'Archivo', system-ui, sans-serif;
  font-weight: 400;
}
.d1, .h1 { line-height: 1.08; letter-spacing: -.018em; }
.d2, .h2 { line-height: 1.14; letter-spacing: -.015em; }
.d3, .h3, .q-prompt, .rtitle { line-height: 1.26; letter-spacing: -.008em; }

/* the wordmark: ATRAYU, all caps, with the linked-squares mark */
.mark {
  font-family: 'Paytone One', 'Space Grotesk', system-ui, sans-serif;
  font-weight: 400; text-transform: uppercase; letter-spacing: .035em;
  font-size: clamp(19px, 1.7vw, 24px);
  display: inline-flex; align-items: center; gap: 0; line-height: 1;
  text-decoration: none; color: var(--ink);
}
/* The square mark is off. The wordmark stands on its own.
   Switch display back to inline-block to bring it back. */
.mark::before {
  display: none;
  content: ""; width: 12px; height: 12px; flex: 0 0 12px; border-radius: 2px;
  background: var(--accent);
  clip-path: polygon(0 0, 55% 0, 55% 45%, 100% 45%, 100% 100%, 45% 100%, 45% 55%, 0 55%);
}
span.mark { cursor: default; }

/* ===========================================================
   DARK THEME
   The handoff goes to micro1, whose pages are near-black, so the
   landing page should not flash white and then drop someone onto
   a dark form.
   =========================================================== */
body.dark {
  --paper: #0C0C0B; --surface: #141413; --surface-2: #1A1A18;
  --line: #2A2A28; --line-soft: #222220;
  --ink: #F5F5F2; --body: #B4B4AC; --muted: #9A9A92; --faint: #8E8E85;
  --accent: #1E80FF; --accent-bg: rgba(30,128,255,.18);
  --ctrl-line: #3A3A36; --flag: #E0B061; --flag-bg: rgba(224,176,97,.12);
  background: #0C0C0B; color: #F5F5F2;
}
body.dark .site-head { background: rgba(12,12,11,.92); border-bottom-color: #2A2A28; }
body.dark .mark { color: #F5F5F2; }
body.dark .alt { background: #141413; }
body.dark .d1, body.dark .d2, body.dark .d3,
body.dark .h1, body.dark .h2, body.dark .h3 { color: #F5F5F2; }
body.dark .site-foot { background: #0A0A09; border-top-color: #2A2A28; }
body.dark .btn { background: #1E80FF; color: #fff; }
body.dark .btn:hover { background: #1E80FF; color: #fff; }
body.dark .btn-2 { border-color: #3A3A36; color: #F5F5F2; background: transparent; }
body.dark .btn-2:hover { border-color: #1E80FF; background: rgba(30,128,255,.14); color: #fff; }
body.dark .linky { color: #9A9A92; }
body.dark .linky:hover { color: #F5F5F2; }
body.dark .qcard { background: #161614; border-color: #2A2A28;
                   box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.45); }
body.dark .qcard-top, body.dark .qcard-note { border-color: #262624; }
body.dark .bar { background: #262624; }
body.dark .opt { background: #1C1C1A; border-color: #32322E; color: #F5F5F2; }
body.dark .opt:hover { border-color: #1E80FF; background: rgba(30,128,255,.16); }
body.dark .opt.is-sel { border-color: #1E80FF; background: rgba(30,128,255,.20); }
body.dark .opt.is-sel .lbl { color: #1E80FF; }
body.dark .numwrap input, body.dark .capture input, body.dark .share input {
  background: #1C1C1A; border-color: #3A3A36; color: #F5F5F2; }
body.dark .numwrap input::placeholder { color: #6A6A63; }
body.dark .note { background: #161614; border-color: #2A2A28; color: #B4B4AC; }
body.dark .note b { color: #F5F5F2; }
body.dark .share { background: #161614; border: 1px solid #2A2A28; }
body.dark .faq details, body.dark .faq, body.dark .ledger, body.dark .lrow,
body.dark .row, body.dark .cards, body.dark .bigcard, body.dark .rnext a,
body.dark .handoff, body.dark .ask { border-color: #2A2A28; }
body.dark .bigcard:hover { background: #161614; }
body.dark .stats { background: #2A2A28; }
body.dark .stats > div { background: #141413; }
body.dark .tag-yes { background: rgba(30,128,255,.20); color: #1E80FF; }
body.dark .tag-no  { background: #1C1C1A; color: #9A9A92; }
body.dark .tag-warn{ background: rgba(224,176,97,.12); color: #E0B061; }
body.dark .anon-tab { background: #141413; }
body.dark .anon-tab.is-on { background: #1C1C1A; }
body.dark .anon-tabs, body.dark .anon { background: #2A2A28; border-color: #2A2A28; }
body.dark .qc { background: #141413; border-color: #2A2A28; }
body.dark .callout { border-bottom-color: #2A2A28; }
body.dark .callout.tint { background: rgba(30,128,255,.14); }

/* logo marks need a light surface to read in their own colors */
body.dark .logogrid { background: #26261F; border-color: #2A2A28; }
body.dark .logogrid > div { background: #F7F7F4; }
body.dark .logogrid .nm { color: #5F5F56; }

/* sticky CTA: --ink inverts here, which would make it white on white */
body.dark .sticky { background: #16161A; border: 1px solid #32322E; color: #F5F5F2;
                    box-shadow: 0 10px 34px rgba(0,0,0,.6); }
body.dark .sticky span { color: #D8D8D2; }
body.dark .sticky .btn { background: #1E80FF; color: #fff; }
body.dark .sticky .btn:hover { background: #1E80FF; }

/* inline SVG figures were authored on white paper */
body.dark .hgfx rect[fill="#fff"], body.dark .hgfx2 rect[fill="#fff"] { fill: #1A1A18; }
body.dark .hgfx rect[fill="#F2F2EE"], body.dark .hgfx2 rect[fill="#F2F2EE"] { fill: #222220; }
body.dark .hgfx text[fill="#141413"], body.dark .hgfx2 text[fill="#141413"] { fill: #F5F5F2; }
body.dark .hgfx text[fill="#5F5F56"], body.dark .hgfx2 text[fill="#5F5F56"],
body.dark .hgfx2 text[fill="#6F6F66"] { fill: #A8A8A0; }
body.dark .hgfx [stroke="#D8D8D1"], body.dark .hgfx2 [stroke="#D8D8D1"],
body.dark .hgfx2 [stroke="#E8E8E2"] { stroke: #32322E; }
body.dark .hgfx [fill="#12304F"], body.dark .hgfx2 [fill="#12304F"] { fill: rgba(30,128,255,.18); }
body.dark .hgfx [stroke="#1E80FF"], body.dark .hgfx2 [stroke="#1E80FF"] { stroke: #1E80FF; }
body.dark .hgfx [fill="#1E80FF"], body.dark .hgfx2 [fill="#1E80FF"],
body.dark .hgfx2 text[fill="#1E80FF"] { fill: #1E80FF; }
body.dark .hgfx .nodeA, body.dark .hgfx .nodeB,
body.dark .hgfx .nodeC, body.dark .hgfx .nodeD { animation: none; fill: #1A1A18; stroke: #32322E; }
body.dark .fig figcaption { color: #8E8E85; }
body.dark .fig figcaption b { color: #fff; }

/* ===========================================================
   FORM TREATMENT
   One blue, white inputs, blue question heading. The card should
   read as a form on the page, not as another block of text.
   =========================================================== */

/* 1. one accent. The button now uses the same blue as the headline,
      with dark text on it so contrast holds. */
body.dark .btn { background: #1E80FF; color: #fff; }
body.dark .btn:hover { background: #1E80FF; color: #fff; }
body.dark .sticky .btn { background: #1E80FF; color: #fff; }
body.dark .sticky .btn:hover { background: #1E80FF; color: #fff; }
body.dark .handoff .btn { background: #1E80FF; color: #fff; }

/* 2. white inputs. On a near-black card these read as fields you
      fill in rather than panels you look at. */
body.dark .opt {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #141413;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
body.dark .opt .lbl { color: #141413; }
body.dark .opt .sub2 { color: #5F5F56; }
body.dark .opt:hover { background: #FFFFFF; border-color: #1E80FF;
                       box-shadow: 0 0 0 3px rgba(30,128,255,.32); }
body.dark .opt.is-sel { background: #FFFFFF; border-color: #1E80FF;
                        box-shadow: 0 0 0 3px rgba(30,128,255,.50); }
body.dark .opt.is-sel .lbl { color: #1E80FF; }

body.dark .numwrap input,
body.dark .capture input,
body.dark .fieldrow input {
  background: #FFFFFF; border-color: #FFFFFF; color: #141413;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
body.dark .numwrap input::placeholder,
body.dark .capture input::placeholder { color: #8E8E85; }
body.dark .numwrap input:focus-visible,
body.dark .capture input:focus-visible {
  outline: 3px solid rgba(30,128,255,.60); outline-offset: 2px; border-color: #1E80FF; }
body.dark .numwrap .unit { color: #5F5F56; }

/* the share field stays muted: it is an output, not an input */
body.dark .share input { background: #101010; border-color: #32322E; color: #9A9A92; box-shadow: none; }

/* 3. the question itself, in the accent */
.qcard .q-prompt { color: var(--accent); }
body.dark .qcard .q-prompt { color: #1E80FF; }

/* one line of instruction above the choices. Choice questions advance on
   click, which is the bit people hesitate over. */
.pickone { font-size: var(--t-cap); color: var(--faint); margin-top: var(--s-3); }
.qcard .opts { margin-top: 10px; }


/* body copy inside the dark feature sections. Was seven inline
   font-size:16.5px declarations across about and contract. */
.prose { font-size: var(--t-lead); line-height: 1.6; }


/* ===========================================================
   V2 ADDITIONS
   Everything below was added in the 23 Oct rebuild. Grouped and
   fenced so it can be reviewed or reverted as one block.
   =========================================================== */

/* ---- hero: quiz above the fold on mobile ------------------
   .pitch-rest is a sibling of .panel rather than a child of
   .pitch, which is the whole trick: on small screens the lede,
   the chips and the proof row fall BELOW the quiz card instead
   of pushing it off the screen. Measured at 390px.           */
.hero-grid .pitch      { grid-column: 1 / span 6; }
.hero-grid .panel      { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: start; }
.hero-grid .pitch-rest { grid-column: 1 / span 6; margin-top: var(--s-4); }
@media (max-width: 1023px) {
  .hero-grid .pitch, .hero-grid .panel, .hero-grid .pitch-rest { grid-column: 1 / span 8; grid-row: auto; }
  .hero-grid .panel { margin-top: var(--s-3); }
}
@media (max-width: 767px) {
  .hero-grid .pitch, .hero-grid .panel, .hero-grid .pitch-rest { grid-column: 1 / span 4; }
}

.hero-sub { font-size: var(--t-lead); line-height: 1.5; margin-top: 14px; max-width: 46ch; }
.dark .hero-sub { color: var(--dark-body); }

/* the headline wrapped to three lines at 390px in Paytone One */
@media (max-width: 520px) {
  .hero-split { padding-top: var(--s-4); }
  .hero-grid .pitch .d1 { font-size: 30px; line-height: 1.12; }
  .hero-sub { font-size: 16px; margin-top: 10px; }
  .elig .container { padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
}

/* ---- proof row, above the fold ---- */
.proofrow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
            background: var(--line); border: 1px solid var(--line); border-radius: 8px;
            overflow: hidden; margin-top: var(--s-4); text-align: left; }
.proofrow .pf { background: var(--paper); padding: 14px 16px; }
.proofrow b { display: block; font-family: var(--mono); font-weight: 500; color: var(--accent);
              font-size: 20px; line-height: 1.1; letter-spacing: -.01em; }
.proofrow span { display: block; font-size: var(--t-label); color: var(--muted);
                 margin-top: 7px; line-height: 1.45; }
/* No .dark background overrides here. body.dark INVERTS the tokens:
   --paper becomes #0C0C0B and --ink becomes #F5F5F2. The base rules above
   already resolve correctly in both themes. Re-specifying them flipped these
   panels to light with white text on top. */
.dark .proofrow span { color: var(--dark-faint); }
@media (max-width: 560px) { .proofrow { grid-template-columns: minmax(0,1fr); } }

/* ---- video slot. sized now so the asset drops in later ---- */
.vslot { margin-top: var(--s-4); }
.vslot video { width: 100%; height: auto; display: block; border-radius: 10px;
               border: 1px solid var(--line); background: #000; aspect-ratio: 16 / 9; }
.dark .vslot video { border-color: var(--dark-line); }

/* ---- the chain, mobile ------------------------------------
   The SVG was display:none below 767px, which hid the best
   explanation on the site from most of the paid traffic.     */
.chain-m { display: none; }
@media (max-width: 767px) {
  .chain-m { display: block; list-style: none; margin: var(--s-4) 0 0; padding: 0;
             border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .dark .chain-m { border-color: var(--dark-line); }
  .chain-m li { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px;
                border-bottom: 1px solid var(--line-soft); position: relative; }
  .dark .chain-m li { border-bottom-color: var(--dark-line); }
  .chain-m li:last-child { border-bottom: 0; }
  .chain-m .cm-k { font-weight: 600; font-size: var(--t-sm); flex: 0 0 auto; min-width: 74px; }
  .dark .chain-m .cm-k { color: #fff; }
  .chain-m .cm-v { font-size: var(--t-cap); color: var(--muted); line-height: 1.45; }
  .dark .chain-m .cm-v { color: var(--dark-body); }
  .chain-m .cm-out { background: var(--accent-bg); }
  .chain-m .cm-out .cm-k, .dark .chain-m .cm-out .cm-k,
  .chain-m .cm-out .cm-v, .dark .chain-m .cm-out .cm-v { color: var(--accent); min-width: 0; }
}

/* ---- logo grid: static, 15th cell fills the 3-col mobile row ----
   It was briefly a picker. Removed: tapping brand logos has no payoff for a
   business owner and the counter underneath did nothing. Ventra's version of
   this works because the taps are INSIDE the quiz and change the result.
   Ours was decorative interactivity, which is worse than none. */
.logogrid .lg-more .plus { font-family: var(--mono); font-size: 26px; line-height: 30px;
                           height: 30px; color: var(--faint); font-weight: 400; }

/* ---- the five clauses, on page ---- */
.clauses { margin-top: var(--s-5); text-align: left; border-top: 1px solid var(--line); }
.dark .clauses { border-top-color: var(--dark-line); }
.clauses .cl { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: var(--s-2);
               padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.dark .clauses .cl { border-bottom-color: var(--dark-line); }
.clauses .cn { font-family: var(--mono); font-size: var(--t-cap); color: var(--accent); padding-top: 3px; }
.clauses .ch { font-weight: 600; font-size: var(--t-d3); line-height: 1.25; }
.dark .clauses .ch { color: #fff; }
.clauses p { font-size: var(--t-sm); color: var(--muted); margin-top: 9px; line-height: 1.6; }
.dark .clauses p { color: var(--dark-body); }
@media (max-width: 560px) { .clauses .cl { grid-template-columns: minmax(0,1fr); gap: 4px; } }

/* ---- wind-down block ---- */
.winddown { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 1px;
            background: var(--line); border: 1px solid var(--line); border-radius: 10px;
            overflow: hidden; margin-top: var(--s-5); text-align: left; }
.dark .winddown { background: var(--dark-line); border-color: var(--dark-line); }
.winddown .wdl, .winddown .wdr { background: var(--paper); padding: var(--s-3); }
.winddown .wdh { font-weight: 600; font-size: var(--t-sm); margin-bottom: 12px; }
.dark .winddown .wdh { color: #fff; }
.winddown ul { list-style: none; margin: 0; padding: 0; }
.winddown li { font-size: var(--t-sm); color: var(--muted); padding: 8px 0 8px 20px; position: relative; }
.dark .winddown li { color: var(--dark-body); }
.winddown li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 2px;
                       background: var(--accent); }
.winddown .wdr p { font-size: var(--t-cap); color: var(--muted); line-height: 1.6; }
.dark .winddown .wdr p { color: var(--dark-body); }
.winddown .wdr p + p { margin-top: 12px; }
.winddown .wdr b { color: var(--ink); font-weight: 600; }
.dark .winddown .wdr b { color: #fff; }
@media (max-width: 767px) { .winddown { grid-template-columns: minmax(0,1fr); } }

/* ---- founder block ---- */
.founder { max-width: 64ch; margin: var(--s-4) auto 0; text-align: left; }
.founder p { font-size: var(--t-body); line-height: 1.65; }
.founder p + p { margin-top: 14px; }

/* ---- FAQ tabs ---- */
.faqtabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
           margin-top: var(--s-5); margin-bottom: var(--s-3); }
.faqtab { font: inherit; font-size: var(--t-sm); cursor: pointer; border-radius: 999px;
          padding: 9px 16px; border: 1px solid var(--line); background: transparent;
          color: var(--muted); transition: all .14s ease; }
.dark .faqtab { border-color: var(--dark-line); color: var(--dark-body); }
.faqtab:hover { border-color: var(--ctrl-line); }
.faqtab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.faqtab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.dark .faqtab.is-on { color: #fff; }
/* with JS off every pane stays open and it degrades to the old stacked list */
.faq-js .faqpane { display: none; }
.faq-js .faqpane.is-on { display: block; }
.faqpane + .faqpane { margin-top: var(--s-5); }
.faq-js .faqpane + .faqpane { margin-top: 0; }

/* ---- reported deals. markup is commented out in index.html
   until every figure has been verified at source. ---- */
.deals { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
         background: var(--line); border: 1px solid var(--line); border-radius: 10px;
         overflow: hidden; margin-top: var(--s-4); text-align: left; }
.deals .deal { background: var(--paper); padding: var(--s-3); }
.dark .deals { background: var(--dark-line); border-color: var(--dark-line); }
.deals .dk { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em;
             text-transform: uppercase; color: var(--muted); display: block; }
.deals b { display: block; font-family: var(--mono); font-weight: 500; color: var(--accent);
           font-size: var(--t-fig); line-height: 1; margin-top: 12px; }
.deals .dn { display: block; font-size: var(--t-sm); margin-top: 10px; }
.dark .deals .dn { color: #fff; }
.deals .ds { display: block; font-size: var(--t-label); color: var(--faint); margin-top: 8px; }
.dark .deals .ds { color: var(--dark-faint); }
@media (max-width: 900px) { .deals { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .deals { grid-template-columns: minmax(0,1fr); } }

/* ---- result: position bar --------------------------------
   The substitute for a payout calculator. Four of nine
   competitors run one; we cannot, because we publish no
   numbers of our own. This shows a TRUE position against the
   three figures micro1 itself states, which is the thing the
   calculator only pretends to do.                            */
.posbar { margin-top: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-2);
          border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.dark .posbar { border-color: var(--dark-line); background: #121211; }
.posbar .pb-h { font-size: var(--t-label); font-family: var(--mono); letter-spacing: .12em;
                text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.posbar .pb-track { position: relative; height: 3px; background: var(--line); border-radius: 2px;
                    margin: 30px 0 10px; }
.dark .posbar .pb-track { background: var(--dark-line); }
.posbar .pb-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent);
                   border-radius: 2px; }
.posbar .pb-tick { position: absolute; top: -5px; width: 1px; height: 13px; background: var(--ctrl-line); }
.dark .posbar .pb-tick { background: #4A4A44; }
.posbar .pb-tl { position: absolute; top: 14px; transform: translateX(-50%); white-space: nowrap;
                 font-family: var(--mono); font-size: 11px; color: var(--faint); }
.dark .posbar .pb-tl { color: var(--dark-faint); }
.posbar .pb-you { position: absolute; top: -9px; transform: translateX(-50%);
                  width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
                  border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--accent); }
.dark .posbar .pb-you { border-color: var(--ink); }
.posbar .pb-youl { position: absolute; top: -34px; transform: translateX(-50%); white-space: nowrap;
                   font-size: var(--t-label); font-weight: 600; color: var(--accent); }
.posbar .pb-foot { font-size: var(--t-label); color: var(--muted); line-height: 1.5;
                   margin-top: 34px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.dark .posbar .pb-foot { color: var(--dark-faint); border-top-color: var(--dark-line); }

/* ---- result: the catch, below the handoff ---- */
.capture .cap-h { font-weight: 600; font-size: var(--t-sm); margin-bottom: 4px; }
.capture .cap-s { font-size: var(--t-cap); color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.capture.is-soft { border-top-style: dashed; }
.capture .cap-done { font-size: var(--t-sm); font-weight: 600; color: var(--accent); }

/* ---- scroll-reveal disabled -------------------------------
   The .rv system on the inner pages starts every element at
   opacity:0 / translateY(18px) and reveals it on intersection.
   Measured on whats-it-worth.html: 20 elements, 16 still at
   opacity 0 after load, and the page reads as dim and broken
   while you scroll. Content that is not there yet cannot
   convert, and it disappears entirely if the observer never
   fires. Markup left in place so this is one rule to revert.
   Motion that earns its place on this site: the anonymization
   Before/After and the chain diagram. Not fading in body copy. */
.js .rv,
.js .rv.in,
.js .rv.rv-d1, .js .rv.rv-d2, .js .rv.rv-d3 {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ===========================================================
   V2 ROUND TWO — mobile-first pass
   =========================================================== */

/* ---- button contrast ---------------------------------------
   White on #1E80FF measures 3.76:1 and fails AA for text. That
   is every button on the site, including the primary CTA. The
   fix is NOT to darken --accent: that token is also used as
   TEXT on the near-black background, where #1E80FF is 5.21:1
   and a darker blue would fail instead. So buttons get their
   own token and the text color is left alone.
     white on #1765D8 ....... 5.40:1  (buttons)
     #1E80FF on #0C0C0B ..... 5.21:1  (text, unchanged)          */
:root { --accent-strong: #1765D8; }
.btn, body.dark .btn { background: var(--accent-strong); color: #fff; }
.btn:hover, body.dark .btn:hover { background: #1159C4; color: #fff; }
.faqtab.is-on, body.dark .faqtab.is-on { background: var(--accent-strong); border-color: var(--accent-strong); }
body.dark .sticky .btn { background: var(--accent-strong); }

/* ---- header: gets out of the way of the form ----------------
   Sticky in flow at all times, so switching states never causes
   a layout jump, but translated out of view the moment you
   start working through the quiz. It comes back once the card
   is behind you. Same behavior on phone, tablet and desktop.  */
.site-head { position: sticky; top: 0; z-index: 60;
             transition: transform .22s ease, box-shadow .22s ease; }
.site-head.is-hidden { transform: translateY(-101%); }
.site-head.is-pinned { box-shadow: 0 6px 20px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .site-head { transition: none; } }

/* ---- one floating element at a time ------------------------
   Thumb-reachable bottom bar on phones, the returning header
   does the job on tablet and desktop. Both at once is clutter. */
@media (min-width: 768px) { .sticky { display: none !important; } body:has(.sticky) { padding-bottom: 0; } }

/* ---- hero: the form is the page ----------------------------
   Eligibility strip gone, header not pinned, sub cut to one
   line. Measured at 375px: card top ~196px, was ~400px.       */
@media (max-width: 767px) {
  .hero-split { padding-top: var(--s-3); padding-bottom: var(--s-5); }
  .hero-grid .pitch > .label { display: none; }  /* card already says SEE IF YOU QUALIFY */
  .hero-grid .pitch .d1 { font-size: 30px; line-height: 1.1; }
  .hero-sub { font-size: 15.5px; margin-top: 8px; max-width: none; }
  .hero-grid .panel { margin-top: var(--s-3); }
  .hero-grid .pitch-rest { margin-top: var(--s-5); }
  .site-head .container { padding-top: 11px; padding-bottom: 11px; }
}

/* ---- source bar --------------------------------------------
   Out of the 13px grey tier. Two real citations, legible.     */
.sourcebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
             margin-top: var(--s-4); padding: 12px 14px; border: 1px solid var(--line);
             border-radius: 8px; font-size: var(--t-cap); }
.sourcebar .sb-k { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em;
                   text-transform: uppercase; color: var(--muted); }
.sourcebar a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor;
               padding-bottom: 1px; }
body.dark .sourcebar a { color: var(--accent); }
.sourcebar a:hover { color: #fff; }
.sourcebar .sb-p { color: var(--muted); }

/* ---- founder card ------------------------------------------ */
.fo-card { display: flex; align-items: center; gap: 14px; padding-bottom: var(--s-3);
           margin-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.fo-avatar { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px; overflow: hidden;
             background: var(--surface-2); border: 1px solid var(--line);
             display: flex; align-items: center; justify-content: center;
             font-family: var(--mono); font-size: 11px; color: var(--faint); }
.fo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fo-name { font-weight: 700; font-size: var(--t-d3); line-height: 1.2; }
body.dark .fo-name { color: #fff; }
.fo-role { font-size: var(--t-cap); color: var(--muted); margin-top: 4px; }

/* ---- result: the reward stays visible while you give an address
   Mode keeps its estimated range pinned at the top of the form.
   Ours had the capture sitting under the handoff with no reminder
   of what had just been earned.                                   */
.capture .cap-verdict { display: flex; align-items: center; gap: 8px; font-size: var(--t-label);
                        font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase;
                        color: var(--accent); margin-bottom: 10px; }
.capture .cap-verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                                background: var(--accent); flex: 0 0 6px; }

/* ===========================================================
   THE CHECK AS ONE PANEL
   Rebuilt 24 Oct to behave like data.mode.inc's calculator:
   every input on one card, sliders for the banded questions,
   and a result that updates live underneath them.
   Supersedes the stepped one-question-at-a-time styling and
   the v1 note "form inputs are white on the dark card".
   =========================================================== */

body.dark .qcard {
  background: #171715;
  border: 1px solid #3A3A35;
  border-top: 2px solid var(--accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 22px 56px rgba(0,0,0,.55);
}
body.dark .qcard-top, body.dark .qcard-note { border-color: #2E2E2A; }

/* ---- a field ---- */
.qf { border: 1px solid var(--line); border-radius: 10px; padding: 14px 15px 15px;
      margin-top: 12px; background: var(--surface); }
body.dark .qf { border-color: #32322E; background: #1C1C1A; }
.qf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qf-l { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em;
        text-transform: uppercase; color: var(--muted); line-height: 1.45; }
body.dark .qf-l { color: #A6A69D; }
.qf-q { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
        border: 1px solid var(--ctrl-line); background: transparent; color: var(--muted);
        font: 600 12px/1 var(--font); padding: 0; }
.qf-q:hover { border-color: var(--accent); color: var(--accent); }
.qf-q:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the answer, stated large. Mode shows the number here; we show
   the band, because we do not publish numbers of our own. */
.qf-v { font-family: var(--mono); font-size: 25px; line-height: 1.15; color: var(--accent);
        margin-top: 10px; letter-spacing: -.01em; }
.qf-h { font-size: var(--t-cap); color: var(--muted); margin-top: 7px; line-height: 1.5; }
body.dark .qf-h { color: #8E8E85; }
.qf-sub { font-size: var(--t-cap); color: var(--muted); margin-top: 9px; min-height: 1.4em; }
body.dark .qf-sub { color: #A6A69D; }
.qf-help { font-size: var(--t-cap); line-height: 1.6; color: var(--muted); margin-top: 11px;
           padding-top: 11px; border-top: 1px dashed var(--line); }
body.dark .qf-help { color: #B4B4AC; border-top-color: #32322E; }
.qf-help.hidden { display: none; }

/* ---- slider ---- */
.qf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
            margin: 14px 0 0; background: transparent; cursor: pointer; display: block; }
.qf-range:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.qf-range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) 0 var(--pct, 50%), #383833 var(--pct, 50%)); }
.qf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%; background: #fff; margin-top: -9.5px;
  border: 5px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.qf-range::-moz-range-track { height: 5px; border-radius: 3px; background: #383833; }
.qf-range::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--accent); }
.qf-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 5px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.qf-ticks { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; }
.qf-ticks span { font-size: 10.5px; font-family: var(--mono); color: var(--faint);
                 text-align: center; flex: 1 1 0; min-width: 0; }
body.dark .qf-ticks span { color: #76766E; }
.qf-ticks span:first-child { text-align: left; }
.qf-ticks span:last-child  { text-align: right; }

/* ---- pills ---- */
.pills { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 11px; }
.pills.tight { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pill { font: inherit; text-align: left; cursor: pointer; border-radius: 8px;
        padding: 12px 14px; background: #212120; border: 1.5px solid #3E3E39; color: #F5F5F2;
        transition: border-color .12s ease, background .12s ease; }
.pill .pl { display: block; font-weight: 600; font-size: var(--t-sm); color: #fff; }
.pill .ps { display: block; font-size: var(--t-cap); color: #A6A69D; margin-top: 3px; font-weight: 400; }
.pill:hover { background: #292927; border-color: var(--accent); }
.pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pill.is-on { background: var(--accent-strong); border-color: var(--accent-strong); }
.pill.is-on .pl { color: #fff; }
.pill.is-on .ps { color: rgba(255,255,255,.85); }
.pills.tight .pill { text-align: center; padding: 12px 10px; }

/* ---- the live panel ---- */
.qres { margin-top: 18px; padding: 16px 15px 15px; border-radius: 10px;
        border: 1px solid var(--line); background: var(--surface-2); }
body.dark .qres { border-color: #3A3A35; background: #121211; }
.qr-k { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.qres.is-idle { border-style: dashed; }
.qr-idle { font-size: var(--t-cap); color: var(--muted); line-height: 1.6; margin: 0; }
.qres .rtitle { margin-top: 10px; }
.qres .posbar { margin-top: 14px; }
.qres .handoff { margin-top: var(--s-3); padding-top: var(--s-3); }
.qr-link { margin-top: 14px; }
.qres .share { margin-top: var(--s-3); }

@media (max-width: 400px) {
  .pills.tight { grid-template-columns: minmax(0,1fr); }
  .pills.tight .pill { text-align: left; }
  .qf-ticks span { font-size: 9.5px; }
}

/* card header: two mono strings side by side wrapped at 375px */
.qcard-top { flex-wrap: nowrap; }
.qcard-top .label { white-space: nowrap; }
.qcard-top .step { white-space: nowrap; font-size: 11px; }
@media (max-width: 400px) {
  .qcard-top .label { font-size: 11px; }
  .qcard-top .step { font-size: 10px; }
}
.qf-h b { color: var(--body); font-weight: 600; }
body.dark .qf-h b { color: #D2D2CA; }

/* ---- last four AA failures, all found by the audit ---------
   1. body.dark .handoff .btn (line ~959) is more specific than
      the --accent-strong rule above, so the one button that
      matters most was still the failing 3.76:1 blue.
   2/3. Position-bar tick and "You" labels sit ON the track,
      not on the card, so they are measured against #2A2A28.
   4. Slider tick labels were 10.5px at 3.73:1.                */
body.dark .handoff .btn,
body.dark .handoff .btn:hover { background: var(--accent-strong); color: #fff; }

body.dark .posbar .pb-tl { color: #A6A69D; }
body.dark .posbar .pb-youl { color: #fff; font-weight: 700; }
body.dark .qf-ticks span { color: #9A9A92; }

/* two-up pills survive 375px. Seven full-width geography rows was
   a lot of scroll for the shortest answers on the card. */
@media (max-width: 400px) and (min-width: 341px) {
  .pills.tight { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pills.tight .pill { text-align: center; padding: 12px 8px; }
  .pills.tight .pl { font-size: 13.5px; line-height: 1.3; }
}

/* ---- stepped flow ------------------------------------------
   The card holds one question at a time again. The result, when
   it comes, IS the card, so the .qres box loses its own border
   and background: a panel inside a panel reads as a mistake.   */
.qcard .qf:first-of-type { margin-top: var(--s-3); }
.qf-next { margin-top: 14px; }
.q-left { font-family: var(--mono); font-size: var(--t-label); color: var(--faint); }
body.dark .q-left { color: #9A9A92; }

body.dark .qcard .qres,
.qcard .qres { border: 0; background: transparent; padding: 0; margin-top: var(--s-3); }
.qcard .qres .qr-k { display: none; }

/* ---- receipts (§2) -----------------------------------------
   Replaces a second copy of the hero's three display figures.
   The claim is made once, above the fold; this is the sourcing.  */
.receipts { margin-top: var(--s-5); text-align: left; border-top: 1px solid var(--line); }
body.dark .receipts { border-top-color: var(--dark-line); }
.receipts .rc { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
body.dark .receipts .rc { border-bottom-color: var(--dark-line); }
.receipts .rc-c { font-weight: 600; font-size: var(--t-d3); line-height: 1.25; }
body.dark .receipts .rc-c { color: #fff; }
.receipts .rc-s { font-size: var(--t-sm); color: var(--muted); margin-top: 8px; line-height: 1.6; }
body.dark .receipts .rc-s { color: var(--dark-body); }
.receipts .rc-s b { color: var(--ink); font-weight: 600; }
body.dark .receipts .rc-s b { color: #fff; }

/* ===========================================================
   TYPOGRAPHY AND HERO SPACING FIXES
   =========================================================== */

/* An en dash is a legal break point, so "$100K–$2M+" was wrapping
   as "$100K–" / "$2M+?" and the question mark could orphan on its
   own line. The whole money phrase and its punctuation now travel
   together. Use .nb on any figure, range or unit that must not be
   split: prices, dates, "30 to 200", "$1B". */
.nb { white-space: nowrap; }

/* Defensive: nothing on this site should ever auto-hyphenate, and
   a display face hyphenating a dollar figure is unforgivable. */
h1, h2, h3, .d1, .d2, .d3, .q-prompt, .rtitle, .qf-v, .fo-name, .receipts .rc-c {
  hyphens: none; -webkit-hyphens: none;
}

/* The hero fought the 12-column grid for its gutter and lost: a
   6+6 split with a 24px gap put the quiz card 24px from the
   headline at 1280px. The hero gets its own two-column track and
   a gutter that scales. */
@media (min-width: 1024px) {
  .hero-split { padding-top: clamp(56px, 6vw, 88px); }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    column-gap: clamp(44px, 5.5vw, 88px);
    row-gap: 0;
    align-items: start;
  }
  .hero-grid .pitch      { grid-column: 1; grid-row: 1; }
  .hero-grid .panel      { grid-column: 2; grid-row: 1 / span 2; }
  .hero-grid .pitch-rest { grid-column: 1; grid-row: 2; margin-top: var(--s-5); }
  .hero-grid .pitch .d1  { line-height: 1.04; }
  .hero-sub { margin-top: 20px; }
}

/* ===========================================================
   LIGHT SKIN  ( /index.html?theme=light )
   Borrowed from joinhandshake.com/ai, which Ty picked for its
   cleaner colored look. What was actually taken:

     - mostly white page, one colored wash at the top that
       fades out fast, a second at the foot
     - very large, very tight display type over near-black
     - big soft-cornered white cards with real padding
     - NEAR-BLACK primary buttons, not colored ones. This is
       most of why their page reads clean, and it leaves the
       blue free to mean "this is a figure" or "this is live"
     - color used in small doses: dots, fills, markers

   What was NOT taken: their cyan (#7AF4FF) and their orange
   (#E24800). The wash here is our own #1E80FF desaturated, so
   the skin is a restyle rather than a costume.

   Prefixed .hs body.dark so every rule outranks its dark-theme
   counterpart without touching a single existing declaration.
   =========================================================== */

.hs body.dark {
  --paper: #FFFFFF; --surface: #F7F8FA; --surface-2: #EEF1F6;
  --line: #E2E6EC; --line-soft: #EDF0F4;
  --ink: #14151C; --body: #43454F; --muted: #5A5D68; --faint: #6E7280;
  --ctrl-line: #B9BFC9;
  background: #FFFFFF; color: #14151C;
}

/* the wash. Fades out by 7% of the hero, exactly like theirs. */
.hs body.dark .hero-split {
  background: linear-gradient(#D9E9FF -5%, #FFFFFF 7%, #FFFFFF 100%);
}
.hs body.dark .site-foot {
  background: linear-gradient(#FFFFFF 30%, #E6F0FF 100%);
  border-top-color: #E2E6EC;
}

.hs body.dark .site-head { background: rgba(255,255,255,.88); border-bottom-color: #E8ECF1; }
.hs body.dark .site-head.is-pinned { box-shadow: 0 6px 20px rgba(20,21,28,.07); }
.hs body.dark .mark { color: #14151C; }
.hs body.dark .nav-tag { color: #5A5D68; }
.hs body.dark .alt { background: #F7F8FA; }

/* display type: bigger, tighter, darker */
.hs body.dark .d1, .hs body.dark .d2, .hs body.dark .d3,
.hs body.dark .h1, .hs body.dark .h2, .hs body.dark .h3 {
  color: #14151C; letter-spacing: -.035em;
}
.hs body.dark .lede, .hs body.dark p { color: #43454F; }
.hs body.dark .hero-sub { color: #43454F; }
.hs body.dark .label { color: #6E7280; }
.hs body.dark .src, .hs body.dark .fine { color: #5A5D68; }
.hs body.dark a { color: #14151C; }

/* near-black buttons, their single most copyable move */
.hs body.dark .btn,
.hs body.dark .handoff .btn { background: #14151C; color: #fff; border-radius: 12px; }
.hs body.dark .btn:hover,
.hs body.dark .handoff .btn:hover { background: #2B2D38; color: #fff; }
.hs body.dark .btn-2 { border-color: #C8CED8; color: #14151C; background: #fff; border-radius: 12px; }
.hs body.dark .btn-2:hover { border-color: #14151C; background: #F7F8FA; }
.hs body.dark .sticky { background: #14151C; border-color: #14151C; color: #fff; }
.hs body.dark .sticky .btn { background: #fff; color: #14151C; }

/* cards: white, soft corners, real shadow instead of a border */
.hs body.dark .qcard {
  background: #FFFFFF; border: 1px solid #E6EAF0; border-top: 2px solid var(--accent);
  border-radius: 18px; box-shadow: 0 1px 2px rgba(20,21,28,.04), 0 18px 44px rgba(20,21,28,.09);
}
.hs body.dark .qcard-top, .hs body.dark .qcard-note { border-color: #EDF0F4; }
.hs body.dark .qf { background: #F7F8FA; border-color: #E6EAF0; border-radius: 14px; }
.hs body.dark .qf-l { color: #6E7280; }
.hs body.dark .qf-h { color: #5A5D68; }
.hs body.dark .qf-h b { color: #14151C; }
.hs body.dark .qf-sub { color: #5A5D68; }
.hs body.dark .qf-help { color: #43454F; border-top-color: #DDE2EA; }
.hs body.dark .qf-q { border-color: #C8CED8; color: #5A5D68; }

/* choice tiles */
.hs body.dark .pill { background: #FFFFFF; border-color: #D7DCE4; border-radius: 12px; }
.hs body.dark .pill .pl { color: #14151C; }
.hs body.dark .pill .ps { color: #5A5D68; }
.hs body.dark .pill:hover { background: #F2F6FD; border-color: var(--accent); }
.hs body.dark .pill::after { border-color: #BFC6D1; }
.hs body.dark .pill.is-on { background: #14151C; border-color: #14151C; }
.hs body.dark .pill.is-on .pl { color: #fff; }
.hs body.dark .pill.is-on .ps { color: rgba(255,255,255,.78); }

/* slider */
.hs body.dark .qf-v { color: var(--accent); }
.hs body.dark .qf-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--accent) 0 var(--pct, 50%), #DDE2EA var(--pct, 50%)); }
.hs body.dark .qf-range::-moz-range-track { background: #DDE2EA; }
.hs body.dark .qf-ticks span { color: #6E7280; }
.hs body.dark .q-left { color: #6E7280; }

/* result */
.hs body.dark .posbar { background: #F7F8FA; border-color: #E6EAF0; border-radius: 14px; }
.hs body.dark .posbar .pb-track { background: #DDE2EA; }
.hs body.dark .posbar .pb-tick { background: #B9BFC9; }
.hs body.dark .posbar .pb-tl { color: #6E7280; }
.hs body.dark .posbar .pb-youl { color: #14151C; }
.hs body.dark .posbar .pb-you { border-color: #fff; }
.hs body.dark .posbar .pb-foot { color: #5A5D68; border-top-color: #E6EAF0; }
.hs body.dark .note { background: #F2F6FD; border-color: #D9E4F7; color: #43454F; border-radius: 12px; }
.hs body.dark .note b { color: #14151C; }
.hs body.dark .share { background: #F7F8FA; border: 1px solid #E6EAF0; border-radius: 14px; }
.hs body.dark .tag-yes { background: #E8F0FE; color: #1655B8; }
.hs body.dark .tag-warn { background: #FBF0DC; color: #8A5B12; }
.hs body.dark .tag-no { background: #F0F1F4; color: #5A5D68; }

/* page furniture */
.hs body.dark .proofrow { background: #E6EAF0; border-color: #E2E6EC; border-radius: 14px; }
.hs body.dark .proofrow .pf { background: #fff; }
.hs body.dark .proofrow span { color: #5A5D68; }
.hs body.dark .receipts { border-top-color: #E2E6EC; }
.hs body.dark .receipts .rc { border-bottom-color: #EDF0F4; }
.hs body.dark .receipts .rc-c, .hs body.dark .receipts .rc-s b { color: #14151C; }
.hs body.dark .receipts .rc-s { color: #43454F; }
.hs body.dark .sourcebar { border-color: #E2E6EC; background: #fff; border-radius: 12px; }
.hs body.dark .sourcebar .sb-p, .hs body.dark .sourcebar .sb-k { color: #5A5D68; }
.hs body.dark .sourcebar a { color: var(--accent); }
.hs body.dark .sourcebar a:hover { color: #14151C; }
.hs body.dark .chip-i { border-color: #DDE2EA; color: #43454F; background: #fff; }
.hs body.dark .logogrid { background: #E6EAF0; border-color: #E2E6EC; border-radius: 14px; }
.hs body.dark .logogrid > div { background: #fff; }
.hs body.dark .logogrid .nm { color: #5A5D68; }
.hs body.dark .whatgrid { background: #E6EAF0; border-color: #E2E6EC; border-radius: 14px; }
.hs body.dark .whatgrid > div { background: #fff; }
.hs body.dark .whatgrid .wd { color: #5A5D68; }
.hs body.dark .tiers .tier { background: #fff; border-color: #E2E6EC; border-radius: 16px; }
.hs body.dark .clauses, .hs body.dark .clauses .cl { border-color: #E6EAF0; }
.hs body.dark .clauses .ch { color: #14151C; }
.hs body.dark .clauses p { color: #43454F; }
.hs body.dark .winddown { background: #E6EAF0; border-color: #E2E6EC; border-radius: 16px; }
.hs body.dark .winddown .wdl, .hs body.dark .winddown .wdr { background: #fff; }
.hs body.dark .winddown .wdh, .hs body.dark .winddown .wdr b { color: #14151C; }
.hs body.dark .winddown li, .hs body.dark .winddown .wdr p { color: #43454F; }
.hs body.dark .chain-m { border-color: #E2E6EC; }
.hs body.dark .chain-m li { border-bottom-color: #EDF0F4; }
.hs body.dark .chain-m .cm-k { color: #14151C; }
.hs body.dark .chain-m .cm-v { color: #43454F; }
.hs body.dark .chain-m .cm-out { background: #E8F0FE; }
.hs body.dark .faqtab { border-color: #DDE2EA; color: #43454F; }
.hs body.dark .faqtab.is-on { background: #14151C; border-color: #14151C; color: #fff; }
.hs body.dark .faq, .hs body.dark .faq details { border-color: #E6EAF0; }
.hs body.dark .stats { background: #E6EAF0; }
.hs body.dark .stats > div { background: #fff; }
.hs body.dark .stats .sl { color: #5A5D68; }
.hs body.dark .bar3 p { color: #43454F; }
.hs body.dark .fo-card { border-bottom-color: #E2E6EC; }
.hs body.dark .fo-avatar { background: #F0F1F4; border-color: #DDE2EA; color: #6E7280; }
.hs body.dark .fo-name { color: #14151C; }
.hs body.dark .fo-role { color: #5A5D68; }
.hs body.dark .anon, .hs body.dark .anon-tabs { background: #E6EAF0; border-color: #E2E6EC; }
.hs body.dark .anon-tab { background: #F7F8FA; }
.hs body.dark .anon-tab.is-on { background: #fff; }
.hs body.dark .anon-pre { background: #fff; color: #14151C; }
.hs body.dark .hgfx text[fill="#141413"] { fill: #14151C; }
.hs body.dark .disc { color: #5A5D68; }
.hs body.dark .foot-nav a { color: #14151C; }
.hs body.dark .elig { background: #F7F8FA; }
.hs body.dark .capture input, .hs body.dark .share input {
  background: #fff; border-color: #C8CED8; color: #14151C; }
.hs body.dark .capture .cap-h { color: #14151C; }
.hs body.dark .linky { color: #5A5D68; }
.hs body.dark .linky:hover { color: #14151C; }

/* ---- light skin: the accent has to get darker ---------------
   #1E80FF is 5.21:1 on the near-black page and only 3.76:1 on
   white, so the same token cannot serve both skins as text.
   The light skin runs #1765D8 (5.40:1 on white, 5.08:1 on the
   #F7F8FA panels). Fills and borders keep plenty of contrast at
   that value, so nothing else has to change.                   */
.hs body.dark { --accent: #1765D8; --focus: #1765D8; --accent-strong: #14151C; }

/* the redaction highlight was tuned for a dark code panel */
.hs body.dark .anon-pre .hit { background: rgba(200,40,30,.10); color: #A32015; }
.hs body.dark .anon-pre.is-clean .hit { background: rgba(23,101,216,.12); color: #1159C4; }

/* small accent-on-light bits that sat just under the line */
.hs body.dark .clauses .cn,
.hs body.dark .steps .sn,
.hs body.dark .bar3 .n,
.hs body.dark .tiers .tb { color: #1159C4; }
.hs body.dark .tiers .tb { background: #E8F0FE; }
.hs body.dark .fo-avatar span { color: #5A5D68; }

/* ---- light skin: result panel text ------------------------- */
.hs body.dark .qcard .rtitle { color: #14151C; }
.hs body.dark .qcard .rbody { color: #43454F; }
.hs body.dark .handoff { border-top-color: #E6EAF0; }
.hs body.dark .handoff .fine { color: #5A5D68; }
.hs body.dark .handoff .fine b { color: #14151C; }
.hs body.dark .qr-link a, .hs body.dark .rnext a { color: #1765D8; }
.hs body.dark .capture { border-top-color: #DDE2EA; }
.hs body.dark .capture .cap-s, .hs body.dark .capture .fine { color: #5A5D68; }
.hs body.dark .capture .cap-verdict { color: #1159C4; }
.hs body.dark .capture .cap-verdict::before { background: #1159C4; }
.hs body.dark .share .sh-t { color: #14151C; }
.hs body.dark .share .sh-p { color: #5A5D68; }
.hs body.dark .posbar .pb-tl { color: #5A5D68; }
.hs body.dark .posbar .pb-h { color: #5A5D68; }

/* ===========================================================
   REDACTION SCRUB
   Line-by-line: the raw value is struck through and the token
   slides in over it. Works on both skins; the light skin
   recolors below.
   =========================================================== */
.anon-pre .ln { display: block; min-height: 1.45em; position: relative;
                padding: 1px 6px; margin: 0 -6px; border-radius: 4px;
                transition: background .25s ease; }
.anon-pre .ln-raw, .anon-pre .ln-clean { display: inline-block; transition: opacity .22s ease; }
.anon-pre .ln-clean { display: none; }

/* untouched state: the identifiers are flagged, nothing replaced */
.anon-pre .ln.is-hit { background: rgba(255,120,110,.14); }
.anon-pre .ln.is-hit .ln-raw { color: #FFB3AC; }

/* the line currently being worked */
.anon-pre .ln.working { background: rgba(255,200,90,.20); }
.anon-pre .ln.working .ln-raw { text-decoration: line-through;
                                text-decoration-thickness: 2px; opacity: .55; }

/* replaced */
.anon-pre .ln.done { background: rgba(30,128,255,.16); }
.anon-pre .ln.done .ln-raw   { display: none; }
.anon-pre .ln.done .ln-clean { display: inline-block; color: var(--accent);
                               animation: tokenIn .26s ease-out both; }
@keyframes tokenIn { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }

/* a hairline that travels while the scrub runs */
.anon-pre.is-running::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform-origin: left center;
  animation: scrubBar 3.2s linear both;
}
@keyframes scrubBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.anon-pre { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .anon-pre .ln, .anon-pre .ln-raw, .anon-pre .ln-clean { transition: none; animation: none; }
  .anon-pre.is-running::after { animation: none; display: none; }
}

/* ---- light skin: the code panel ----------------------------
   A dark code block dropped onto a white page reads as a bug.
   This is a proper light console: tinted panel, real mono, and
   redactions as chips rather than colored text.               */
.hs body.dark .anon { background: #E6EAF0; border-color: #E2E6EC; border-radius: 16px; overflow: hidden; }
.hs body.dark .anon-tabs { background: #EEF1F6; border-color: #E2E6EC; }
.hs body.dark .anon-tab { background: transparent; color: #5A5D68; }
.hs body.dark .anon-tab .at { color: #14151C; }
.hs body.dark .anon-tab.is-on { background: #fff; }
.hs body.dark .anon-tab.is-on .at { color: #1159C4; }
.hs body.dark .anon-body { background: #FBFCFD; }
.hs body.dark .anon-pre { background: #FBFCFD; color: #2A2C35; }
.hs body.dark .anon-pre .ln.is-hit { background: #FDECEA; }
.hs body.dark .anon-pre .ln.is-hit .ln-raw { color: #A32015; }
.hs body.dark .anon-pre .ln.working { background: #FFF4D6; }
.hs body.dark .anon-pre .ln.working .ln-raw { color: #8A5B12; }
.hs body.dark .anon-pre .ln.done { background: #E8F0FE; }
.hs body.dark .anon-pre .ln.done .ln-clean { color: #1159C4; font-weight: 500; }
.hs body.dark .anon-foot { background: #F2F4F8; color: #5A5D68; border-top-color: #E2E6EC; }

/* ===========================================================
   LIGHT SKIN: BLUE BACK ON THE ACTIONS
   Near-black buttons were the Handshake move, but Ty wants the
   brand blue on anything that is a call to action. Blue is
   #1765D8 (5.40:1 with white). Near-black is retained ONLY for
   a selected answer, so a chosen pill never reads as a CTA.
   =========================================================== */
.hs body.dark .btn,
.hs body.dark .handoff .btn { background: #1765D8; color: #fff; }
.hs body.dark .btn:hover,
.hs body.dark .handoff .btn:hover { background: #1159C4; color: #fff; }

/* ---- sticky bar: white card, blue button, not a black slab ---- */
.hs body.dark .sticky {
  background: rgba(255,255,255,.96); border: 1px solid #DDE2EA; color: #14151C;
  box-shadow: 0 10px 30px rgba(20,21,28,.14); backdrop-filter: blur(10px);
}
.hs body.dark .sticky span { color: #43454F; }
.hs body.dark .sticky .btn { background: #1765D8; color: #fff; }
.hs body.dark .sticky .btn:hover { background: #1159C4; }

/* ===========================================================
   ARROWS ON THE ANSWER PILLS
   They advance the form, so they should look like it. Replaces
   the radio mark: a radio says "choose", an arrow says "choose
   and move", which is what actually happens on tap.
   =========================================================== */
.pill::after {
  content: ""; position: absolute; right: 15px; top: 50%; margin-top: -6px;
  width: 11px; height: 11px; border-right: 2.5px solid var(--accent);
  border-top: 2.5px solid var(--accent); transform: rotate(45deg);
  border-radius: 1px; opacity: .85; transition: transform .14s ease, opacity .14s ease;
}
.pills:not(.tight) .pill { position: relative; padding-right: 44px; }
.pills.tight .pill::after { display: none; }
.pill:hover::after { transform: rotate(45deg) translate(2px, -2px); opacity: 1; }
.pill.is-on::after { border-color: #fff; opacity: 1; }
body.dark .pill::after { border-color: var(--accent); }
.hs body.dark .pill::after { border-color: #1765D8; }
.hs body.dark .pill.is-on::after { border-color: #fff; }
/* tab sub-labels ("Raw company record") were 4.23:1 on the light panel */
.hs body.dark .anon-tab .ad { color: #5A5D68; }

/* ===========================================================
   THE QUESTION IS THE HEADING
   It was a bold lead-in on the 13px hint line, which made the
   single most important string in the card the hardest one on
   it to read. Brand face, real size, full contrast. The mono
   label above it is now only the category.
   =========================================================== */
.qf-ask { font-family: 'Paytone One', var(--font); font-weight: 400;
          font-size: 19px; line-height: 1.22; letter-spacing: -.012em;
          margin: 10px 0 0; color: var(--ink); }
@media (min-width: 560px) { .qf-ask { font-size: 21px; } }
body.dark .qf-ask { color: #fff; }
.hs body.dark .qf-ask { color: #14151C; }
.qf-ask + .pills, .qf-ask + .qf-v { margin-top: 13px; }
.qf-l { font-size: 11px; }

/* ===========================================================
   THE WIN STATE
   A verdict should feel like something was achieved. Green is
   introduced here and ONLY here: a check, a tag and the card's
   top edge. Body copy stays in the normal ink so nothing has to
   be read in a color.
   =========================================================== */
:root { --win: #15703F; --win-bg: #E6F5ED; --win-line: #2EA86A; }

.win-mark { width: 46px; height: 46px; border-radius: 50%; display: flex;
            align-items: center; justify-content: center; margin-bottom: 14px;
            background: var(--win-bg); color: var(--win);
            animation: winPop .42s cubic-bezier(.2,1.3,.4,1) both; }
.win-mark svg { width: 24px; height: 24px; stroke-dasharray: 32; stroke-dashoffset: 32;
                animation: winTick .4s ease-out .18s forwards; }
@keyframes winPop  { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes winTick { to { stroke-dashoffset: 0; } }

.qres.is-win .tag-yes,
body.dark .qres.is-win .tag-yes,
.hs body.dark .qres.is-win .tag-yes { background: var(--win-bg); color: var(--win); }
.qcard:has(.qres.is-win) { border-top-color: var(--win-line); }
body.dark .qcard:has(.qres.is-win) { border-top-color: var(--win-line); }

@media (prefers-reduced-motion: reduce) {
  .win-mark, .win-mark svg { animation: none; stroke-dashoffset: 0; }
}

/* ===========================================================
   SECTION SPACING
   The sections were running together. More air between them,
   and more between a section's heading block and its content.
   =========================================================== */
:root { --section-y: clamp(68px, 7.5vw, 116px); }
.sec-c .lede { margin-bottom: 4px; }
.sec .stats, .sec .tiers, .sec .whatgrid, .sec .logogrid,
.sec .clauses, .sec .winddown, .sec .steps, .sec .receipts { margin-top: var(--s-5); }
@media (max-width: 560px) {
  :root { --section-y: 58px; }
}

/* ===========================================================
   MORE OF THE SCRUB
   The redaction panel works because something resolves in front
   of you. Two more places earn the same treatment, and neither
   needs new copy.
   =========================================================== */

/* 1. the position bar draws itself when the result lands, so the
      marker arrives at your number rather than being there      */
.qres .posbar .pb-fill { animation: barFill .72s cubic-bezier(.25,.9,.3,1) .12s both; }
.qres .posbar .pb-you,
.qres .posbar .pb-youl { animation: markerIn .5s cubic-bezier(.2,1.2,.4,1) .62s both; }
@keyframes barFill   { from { width: 0 !important; } }
@keyframes markerIn  { from { opacity: 0; transform: translateX(-50%) scale(.3); }
                       to   { opacity: 1; transform: translateX(-50%) scale(1); } }

/* 2. the decision chain assembles instead of just sitting there.
      This is the argument of the whole page, so it should move.  */
/* FAIL-SAFE: visible by default. Only a successfully-armed element
   hides, and the arming code carries a timeout that un-hides it if
   the observer never fires. Content waiting on an observer that may
   not come is the .rv bug this site already had once. */
.chain-m.is-armed li { opacity: 0; transform: translateY(10px); }
.chain-m.is-in li { animation: chainIn .42s cubic-bezier(.2,.8,.3,1) both; }
.chain-m.is-in li:nth-child(1) { animation-delay: .05s }
.chain-m.is-in li:nth-child(2) { animation-delay: .20s }
.chain-m.is-in li:nth-child(3) { animation-delay: .35s }
.chain-m.is-in li:nth-child(4) { animation-delay: .50s }
.chain-m.is-in li:nth-child(5) { animation-delay: .72s }
.chain-m.is-in .cm-out { animation: chainOut .5s cubic-bezier(.2,1.1,.3,1) .72s both; }
@keyframes chainIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes chainOut { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* the desktop SVG version builds the same way */
.js .chainfig.is-armed .frag { opacity: 0; }
.js .chainfig.is-in .frag { animation: fadeFrag .5s ease-out both; }
.js .chainfig.is-in .frag:nth-of-type(1) { animation-delay: .05s }
.js .chainfig.is-in .frag:nth-of-type(2) { animation-delay: .12s }
.js .chainfig.is-in .frag:nth-of-type(3) { animation-delay: .19s }
.js .chainfig.is-in .frag:nth-of-type(4) { animation-delay: .26s }
.js .chainfig.is-in .frag:nth-of-type(5) { animation-delay: .33s }
.js .chainfig.is-in .frag:nth-of-type(6) { animation-delay: .40s }
@keyframes fadeFrag { from { opacity: 0; transform: translateX(-8px); } to { opacity: .9; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .qres .posbar .pb-fill, .qres .posbar .pb-you, .qres .posbar .pb-youl,
  .chain-m li, .chain-m.is-armed li, .chain-m.is-in li, .chain-m.is-in .cm-out,
  .js .chainfig .frag, .js .chainfig.is-armed .frag, .js .chainfig.is-in .frag { animation: none; opacity: 1; transform: none; }
}

/* ===========================================================
   COUNT-UP AND SEQUENCED REVEAL
   Numbers big enough to count, count. $4B and $1B are not, so
   they pop in staggered instead of crawling 0 to 4, which looks
   broken rather than impressive.
   Fail-safe like everything else: visible unless armed, armed
   only below the fold, revealed anyway after 4s.
   =========================================================== */
.proofrow.is-armed .pf { opacity: 0; transform: translateY(8px); }
.proofrow.is-in .pf { animation: pfIn .42s cubic-bezier(.2,.9,.3,1) both; }
.proofrow.is-in .pf:nth-child(1) { animation-delay: .04s }
.proofrow.is-in .pf:nth-child(2) { animation-delay: .16s }
.proofrow.is-in .pf:nth-child(3) { animation-delay: .28s }
@keyframes pfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tiers.is-armed .tier { opacity: 0; transform: translateY(12px); }
.tiers.is-in .tier { animation: pfIn .46s cubic-bezier(.2,.9,.3,1) both; }
.tiers.is-in .tier:nth-child(1) { animation-delay: .05s }
.tiers.is-in .tier:nth-child(2) { animation-delay: .22s }
.tiers.is-in .tier:nth-child(3) { animation-delay: .39s }
.tiers .tv { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .proofrow.is-armed .pf, .proofrow.is-in .pf,
  .tiers.is-armed .tier, .tiers.is-in .tier { animation: none; opacity: 1; transform: none; }
}

/* ===========================================================
   RESTRUCTURE, 24 OCT
   =========================================================== */

/* "Why they pay": the argument and the diagram were stacked
   because they sat in separate rows. Side by side on desktop,
   stacked on phones where there is no width to share. */
.grid.twocol { align-items: start; }
.grid.twocol .tc-text { grid-column: 1 / span 6; }
.grid.twocol .tc-vis  { grid-column: 7 / span 6; }
@media (min-width: 1024px) {
  .grid.twocol { column-gap: clamp(40px, 4.5vw, 72px); }
  .grid.twocol .tc-vis { padding-top: 6px; }
}
@media (max-width: 1023px) {
  .grid.twocol .tc-text, .grid.twocol .tc-vis { grid-column: 1 / span 8; }
  .grid.twocol .tc-vis { margin-top: var(--s-4); }
}
@media (max-width: 767px) {
  .grid.twocol .tc-text, .grid.twocol .tc-vis { grid-column: 1 / span 4; }
}
.twocol .chainfig { margin-top: 0; max-width: none; }

/* 12 logos, so every row is full at every breakpoint. The 15th
   "Something else" tile is gone: it was an empty-looking cell
   nobody was ever going to click. */
.logogrid { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1023px) { .logogrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 560px)  { .logogrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* each record type gets its own mark */
.whatgrid .wi { display: flex; align-items: center; justify-content: center;
                width: 34px; height: 34px; border-radius: 9px; margin-bottom: 12px;
                background: var(--surface-2); color: var(--accent); }
.whatgrid .wi svg { width: 18px; height: 18px; }
body.dark .whatgrid .wi { background: rgba(30,128,255,.14); }
.hs body.dark .whatgrid .wi { background: #E8F0FE; color: #1765D8; }

/* hero image slot, ready for the asset */
.hero-img { margin: var(--s-4) 0 0; }
.hero-img img { width: 100%; height: auto; display: block; border-radius: 14px;
                border: 1px solid var(--line); aspect-ratio: 16 / 10; object-fit: cover; }
body.dark .hero-img img { border-color: var(--dark-line); }

/* ---- sources sit under their claim, not in a box at the end ---- */
.receipts .rc-src { display: inline-block; margin-top: 6px; font-size: var(--t-label);
                    font-family: var(--mono); color: var(--accent);
                    border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.receipts .rc-src.is-plain { color: var(--faint); border-bottom: 0; }
body.dark .receipts .rc-src { color: var(--dark-accent); }
body.dark .receipts .rc-src.is-plain { color: var(--dark-faint); }
.hs body.dark .receipts .rc-src { color: #1765D8; }
.hs body.dark .receipts .rc-src.is-plain { color: #6E7280; }

/* ---- pull quote ------------------------------------------------
   Attribution and source sit directly beneath the words, which is
   where a reader looks to decide whether to believe them. No
   portrait: see the note in index.html. .pq-face is the slot if a
   licensed one is ever bought.                                     */
.pullquote { margin: 0 0 var(--s-4); padding: 0 0 0 20px;
             border-left: 3px solid var(--accent); }
.pullquote blockquote { margin: 0; font-family: 'Paytone One', var(--font); font-weight: 400;
                        font-size: clamp(21px, 2.3vw, 29px); line-height: 1.22;
                        letter-spacing: -.022em; color: var(--ink); }
body.dark .pullquote blockquote { color: #fff; }
.hs body.dark .pullquote blockquote { color: #14151C; }
.pullquote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
                        margin-top: 14px; }
.pullquote .pq-face { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pullquote .pq-who { font-weight: 700; font-size: var(--t-sm); }
body.dark .pullquote .pq-who { color: #fff; }
.hs body.dark .pullquote .pq-who { color: #14151C; }
.pullquote .pq-src { font-size: var(--t-label); font-family: var(--mono); color: var(--muted);
                     border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.pullquote .pq-src:hover { color: var(--accent); }

/* ---- hero: close the dead gap under the sub ---- */
.hero-grid .pitch-rest { margin-top: var(--s-3); }
@media (min-width: 1024px) { .hero-grid .pitch-rest { margin-top: var(--s-3); } }
@media (max-width: 767px)  { .hero-grid .pitch-rest { margin-top: var(--s-4); } }

/* ---- case card: a real, named, sourced deal ----------------------
   The strongest proof on the page for the wind-down segment, so it
   gets the weight. Attribution sits under the words, where a reader
   looks to decide whether to believe them.                          */
.casecard { margin: var(--s-4) auto 0; max-width: 62ch; text-align: left;
            padding: var(--s-3) var(--s-3) var(--s-3) 20px;
            border-left: 3px solid var(--accent); background: var(--surface);
            border-radius: 0 12px 12px 0; }
body.dark .casecard { background: #16161E; }
.hs body.dark .casecard { background: #F2F6FD; }
.casecard blockquote { margin: 0; font-family: 'Paytone One', var(--font); font-weight: 400;
                       font-size: clamp(17px, 1.7vw, 21px); line-height: 1.3;
                       letter-spacing: -.016em; color: var(--ink); }
body.dark .casecard blockquote { color: #fff; }
.hs body.dark .casecard blockquote { color: #14151C; }
.casecard figcaption { margin-top: 14px; }
.casecard .cc-who { display: block; font-weight: 700; font-size: var(--t-sm); }
body.dark .casecard .cc-who { color: #fff; }
.hs body.dark .casecard .cc-who { color: #14151C; }
.casecard .cc-what { display: block; font-size: var(--t-cap); color: var(--muted);
                     line-height: 1.6; margin-top: 6px; }
body.dark .casecard .cc-what { color: var(--dark-body); }
.hs body.dark .casecard .cc-what { color: #43454F; }
.casecard .cc-what b { color: var(--ink); font-weight: 600; }
body.dark .casecard .cc-what b { color: #fff; }
.hs body.dark .casecard .cc-what b { color: #14151C; }
.casecard .cc-src { display: inline-block; margin-top: 10px; font-family: var(--mono);
                    font-size: var(--t-label); color: var(--accent);
                    border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.hs body.dark .casecard .cc-src { color: #1765D8; }

/* ---- H1 turn line ----------------------------------------------------
   The second line of the hero headline. Same face, same ink, 0.68em.
   It is not a subtitle and it must never be set in body copy: an ad that
   promised money lands on "isn't worth selling", and this is the line that
   catches them. Grey 15px body copy three lines down does not catch them.
   Line-height is tightened because Paytone One at display size already
   carries loose leading and the two lines have to read as one thought. */
.h1-turn { display: block; font-size: .68em; line-height: 1.12;
           margin-top: .34em; color: inherit; }
@media (max-width: 480px) { .h1-turn { font-size: .72em; margin-top: .3em; } }

/* The headline is now five lines on a phone, which pushed the quiz card from
   334px to 412px. Leading comes back rather than type size: the H1 is the
   page's only real weapon above the fold and shrinking it to protect a
   scroll measurement is the wrong trade. */
@media (max-width: 767px) {
  .hero-grid .pitch .d1 { line-height: 1.02; }
  .hero-grid .pitch .h1-turn { line-height: 1.06; margin-top: .26em; }
  .hero-grid .pitch .hero-sub { margin-top: 12px; }
}

/* 48px of empty space sat between the header and the H1 on phones. It was
   breathing room for the eyebrow, and the eyebrow is display:none under
   768px, so it was padding above nothing. That is 48px spent pushing the
   quiz card down the screen. */
@media (max-width: 767px) { .hero-grid .pitch { margin-top: 12px; } }

/* The hero chain strip was removed on 24 Oct; its rules went with it. */

/* ---- the Musk pull quote, in blue ----------------------------------- */
.pullquote blockquote { color: var(--accent); }
body.dark .pullquote blockquote { color: #1E80FF; }
.hs body.dark .pullquote { border-left-color: var(--accent-strong); }
.hs body.dark .pullquote blockquote { color: #1655B8; }

/* ---- how it works, as a process rather than four paragraphs --------
   Ty: "every number should have the word STEP next to it, maybe the
   numbers are made big." The rail is the part that makes it read as a
   sequence: a 2px track across the top of each card with a filled node
   at the left of each, so the eye runs 01 -> 04 instead of reading four
   unrelated blocks. */
.step-c { position: relative; }
.step-c::before {                       /* the node on the rail */
  content: ""; position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--paper);
}
.s-top { display: flex; align-items: flex-start;
         justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.s-lab { display: block; font-family: var(--mono); font-size: 10.5px;
         letter-spacing: .16em; text-transform: uppercase;
         color: var(--muted); margin-bottom: 1px; }
.s-n   { display: block; font-family: var(--mono); font-weight: 500;
         font-size: 40px; line-height: 1; letter-spacing: -.03em;
         color: var(--accent); font-variant-numeric: tabular-nums; }
.s-ico { flex: none; width: 42px; height: 42px; border-radius: 11px;
         display: flex; align-items: center; justify-content: center;
         background: #E8F0FE; color: var(--accent); }
.s-ico svg { width: 21px; height: 21px; }
.step-c .sh { margin-top: 0; }

/* 40px numerals are "large text" at AA, so #1E80FF at 3.76:1 on white is
   fine for .s-n. The 10.5px STEP label is not accent-colored for exactly
   that reason. */
body.dark .step-c::before { box-shadow: 0 0 0 3px #0C0C0B; }
body.dark .s-ico { background: rgba(30,128,255,.16); color: #1E80FF; }
body.dark .s-lab { color: var(--dark-faint); }
.hs body.dark .step-c::before { background: var(--accent); box-shadow: 0 0 0 3px #fff; }
.hs body.dark .s-ico { background: #E8F0FE; color: #1655B8; }
.hs body.dark .s-lab { color: #5A5D68; }
.hs body.dark .s-n { color: #1E80FF; }
/* .alt sections have a tinted background, so the node's halo has to match
   it or it reads as a white dot sitting on grey. */
.alt .step-c::before { box-shadow: 0 0 0 3px var(--alt-bg, #F7F8FA); }
body.dark .alt .step-c::before { box-shadow: 0 0 0 3px #141413; }
.hs body.dark .alt .step-c::before { box-shadow: 0 0 0 3px #F7F8FA; }
@media (max-width: 520px) {
  .s-n { font-size: 34px; }
  .s-ico { width: 38px; height: 38px; }
}

/* ---- the hero chips are not buttons --------------------------------
   Ty: "all those toggles look like buttons." They were: a pill border, a
   fill and 7x14 padding is button shape, and four of them in a row under
   a headline reads as a control group nobody can click. They are a list
   of promises, so they are set as a list. Border and fill gone, tick kept.

   Grid, not flex-wrap, so it can never land 3 + 1 again. Two by two at
   every width in the hero column: four across would squeeze "We'll say
   no if it's no" at the widths this column actually gets. */
.pitch-rest .chips { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
                     gap: 11px 18px; justify-content: start; margin-top: var(--s-4); }
.pitch-rest .chip-i { border: 0; background: none; padding: 0; border-radius: 0;
                      align-items: flex-start; gap: 8px; font-size: 13.5px;
                      line-height: 1.35; color: var(--muted); }
.pitch-rest .chip-i svg { margin-top: 2px; stroke-width: 2.5; }
.hs body.dark .pitch-rest .chip-i { border: 0; background: none; color: #5A5D68; }
.hs body.dark .pitch-rest .chip-i svg { color: var(--accent-strong); }
body.dark .pitch-rest .chip-i { border: 0; background: none; color: var(--dark-faint); }

/* ---- the quote now opens the page ----------------------------------
   It sits above the H1 in place of the old eyebrow, so it carries the
   job that slot used to do: tell a stranger in one line why any of this
   is happening. Attribution trimmed to the domain, because "Its own home
   page, checked 24 Oct 2026" is provenance for us and clutter for them.
   The date still lives in the footer disclosure and on every figure in
   the receipts row, which is where the sourcing rule is actually met. */
.pitch > .m1quote { margin: 0 0 18px; }
.pitch > .m1quote blockquote { font-size: 15.5px; }
@media (max-width: 767px) {
  .pitch > .m1quote { margin-bottom: 14px; }
  .pitch > .m1quote blockquote { font-size: 14.5px; line-height: 1.45; }
}

/* ---- the opening quote, corrected ----------------------------------
   Two fixes. The bold "micro1" and the domain ran together as
   "micro1micro1.ai", so the attribution is now the domain alone, which
   is what Ty asked for anyway. And the left rule pushed the quote out of
   line with the H1 directly under it, which made the hero look ragged
   down its left edge. As the opening element it wants to be flush, so
   the rule is gone and the blue does the work. */
.pitch > .m1quote { border-left: 0; padding-left: 0; max-width: 50ch; }
.pitch > .m1quote blockquote { line-height: 1.45; }
.pitch > .m1quote figcaption { margin-top: 7px; }
.pitch > .m1quote .m1-src { letter-spacing: .04em; }

/* ---- micro1 in its own words (RESTORED) ----------------------------
   These rules, and the §4 diagram rules below, were destroyed on 24 Oct
   by a slice between two comment markers that had other blocks sitting
   between them. Exactly the positional-edit failure CLAUDE.md warns
   about, and the symptom was the quote rendering in near-black body
   copy with the browser's default 40px blockquote indent, out of line
   with the H1 beneath it. Re-added at the end of the file.

   It opens the page: the buyer stating its own demand, which is the
   most useful thing a stranger can read first. Blue, flush left with
   the H1, attribution is the bare domain. Not a link: micro1's
   attribution is link-only and never retroactive, so a link here hands
   a warm visitor to the buyer outside our referral. */
.m1quote { margin: 0 0 var(--s-4); max-width: 54ch; }
.m1quote blockquote { margin: 0; font-size: 15px; line-height: 1.5;
                      color: var(--accent); font-style: normal; }
.m1quote blockquote::before { content: "\201C"; }
.m1quote blockquote::after  { content: "\201D"; }
.m1quote figcaption { margin-top: 8px; }
.m1quote .m1-src { font-family: var(--mono); font-size: var(--t-label);
                   color: var(--muted); letter-spacing: .04em; }
body.dark .m1quote blockquote { color: #1E80FF; }
body.dark .m1quote .m1-src { color: var(--dark-faint); }
/* light is the default skin, and #1E80FF is 3.76:1 on white, which fails
   AA at 15px. #1655B8 is 7.0:1. */
.hs body.dark .m1quote blockquote { color: #1655B8; }
.hs body.dark .m1quote .m1-src { color: #5A5D68; }

.pitch > .m1quote { margin: 0 0 20px; max-width: 50ch; }
.pitch > .m1quote blockquote { font-size: 15.5px; line-height: 1.45; }
@media (max-width: 767px) {
  .pitch > .m1quote { margin-bottom: 15px; }
  .pitch > .m1quote blockquote { font-size: 14.5px; }
}

/* ---- §4 diagram, bigger (RESTORED) ---------------------------------
   Lost in the same slice. The heading moved out of the left column so
   the diagram could have the width; without these it snapped back. */
.twocol .chainfig { max-width: none; }
@media (min-width: 1024px) {
  .twocol .tc-vis { align-self: center; }
  .twocol .chainfig .hgfx { max-width: 640px; margin-left: auto; }
}

/* ======================================================================
   RESTORED 24 OCT. Everything in this block was written earlier the same
   day and then destroyed by a single bad edit: a slice between two
   comment markers that had three unrelated blocks sitting between them.
   It silently took the diagram fix, the whole win-recap, and the win
   green with it, and the page quietly reverted on all three.
   Exactly the positional-splice failure CLAUDE.md warns about, and the
   second time it has cost this project a chunk of this stylesheet.
   RULE, restated: never slice CSS between two markers. Match the exact
   block, or append.
   ====================================================================== */

/* ---- the decision-chain diagram rendered dark-on-dark in LIGHT ------
   `body.dark .hgfx .nodeA..D { fill:#1A1A18 }` fills the four node boxes
   near-black, and that rule fires in the LIGHT skin too, because light is
   `.hs body.dark` and so needs class="dark" on the body. A separate patch
   sets the node TITLE text to #14151C for light, so the result is
   near-black text on a near-black box: "Email", "Chat", "Ticket" and
   "Ledger" vanish while the grey subtitles under them stay readable.
   Any rule written under body.dark needs an answer under .hs body.dark. */
.hs body.dark .hgfx .nodeA, .hs body.dark .hgfx .nodeB,
.hs body.dark .hgfx .nodeC, .hs body.dark .hgfx .nodeD { fill: #fff; stroke: #D8D8D1; }
.hs body.dark .hgfx rect[fill="#fff"],    .hs body.dark .hgfx2 rect[fill="#fff"]    { fill: #fff; }
.hs body.dark .hgfx rect[fill="#F2F2EE"], .hs body.dark .hgfx2 rect[fill="#F2F2EE"] { fill: #F2F3F6; }
.hs body.dark .hgfx text[fill="#5F5F56"], .hs body.dark .hgfx2 text[fill="#5F5F56"],
.hs body.dark .hgfx2 text[fill="#6F6F66"] { fill: #5A5D68; }
.hs body.dark .hgfx [stroke="#D8D8D1"],   .hs body.dark .hgfx2 [stroke="#D8D8D1"],
.hs body.dark .hgfx2 [stroke="#E8E8E2"] { stroke: #E2E6EC; }
.hs body.dark .hgfx [fill="#12304F"],     .hs body.dark .hgfx2 [fill="#12304F"]     { fill: #E8F0FE; }
.hs body.dark .hgfx text[fill="#1E80FF"],
.hs body.dark .hgfx2 text[fill="#1E80FF"] { fill: #1655B8; }

/* ---- win recap: their own answers, as the reasons they passed ------ */
.winrecap { margin-top: var(--s-4); border: 1px solid var(--line-soft);
            border-radius: 12px; overflow: hidden; }
.winrecap .wr-h { font-family: var(--mono); font-size: var(--t-label);
                  letter-spacing: .08em; text-transform: uppercase;
                  color: var(--muted); padding: 12px 16px;
                  border-bottom: 1px solid var(--line-soft); }
.winrecap .wr-list { list-style: none; margin: 0; padding: 0; }
.winrecap .wr-row { display: grid; grid-template-columns: 112px 1fr;
                    gap: 2px 14px; padding: 11px 16px;
                    border-bottom: 1px solid var(--line-soft); }
.winrecap .wr-row:last-child { border-bottom: 0; }
.winrecap .wr-k { grid-row: 1 / span 2; font-family: var(--mono);
                  font-size: var(--t-label); letter-spacing: .06em;
                  text-transform: uppercase; color: var(--muted);
                  align-self: center; }
.winrecap .wr-v { font-weight: 600; color: var(--ink); line-height: 1.3; }
.winrecap .wr-n { font-size: 13px; color: var(--win); line-height: 1.35; }
.winrecap .wr-n::before { content: "\2713\00a0"; font-weight: 700; }
@media (max-width: 420px) {
  .winrecap .wr-row { grid-template-columns: 1fr; gap: 3px; }
  .winrecap .wr-k { grid-row: auto; }
}
body.dark .winrecap { border-color: var(--dark-line); }
body.dark .winrecap .wr-h, body.dark .winrecap .wr-row { border-color: var(--dark-line); }
body.dark .winrecap .wr-v { color: #F5F5F2; }
body.dark .winrecap .wr-n { color: #4ED08A; }
.hs body.dark .winrecap { border-color: #E8ECF1; }
.hs body.dark .winrecap .wr-h, .hs body.dark .winrecap .wr-row { border-color: #E8ECF1; }
.hs body.dark .winrecap .wr-v { color: #14151C; }
.hs body.dark .winrecap .wr-n { color: var(--win); }

/* ---- the green, louder ---------------------------------------------
   --win (#15703F) stays the TEXT color: 5.7:1 on the tint, and the
   value before it failed AA at 4.46:1. --win-solid is the FILL only,
   white on it at 4.6:1. Do not swap these two round. */
:root { --win-solid: #1A8A4E; }
.win-mark { background: var(--win-solid); color: #fff;
            box-shadow: 0 0 0 5px rgba(26,138,78,.14); }
body.dark .win-mark, .hs body.dark .win-mark { background: var(--win-solid); color: #fff; }
.qres.is-win .tag-yes,
body.dark .qres.is-win .tag-yes,
.hs body.dark .qres.is-win .tag-yes { background: var(--win-solid); color: #fff; }
.qcard:has(.qres.is-win),
body.dark .qcard:has(.qres.is-win) { border-top-color: var(--win-solid); border-top-width: 3px; }

/* ---- the opening quote: top on desktop, below the card on phones ----
   Approved by Ty 24 Oct. Above the H1 it cost 92px of scroll depth on a
   phone, where most paid traffic lands and where the form is the only
   thing that matters. It is now its own hero-grid child sitting AFTER
   .panel in the DOM, so phones get card first and quote after, and the
   desktop placement is done with explicit grid rows below. */
.hero-grid .hero-quote { grid-column: 1 / span 6; margin: 0 0 var(--s-4); }
@media (max-width: 1023px) {
  .hero-grid .hero-quote { grid-column: 1 / span 8; grid-row: auto;
                           margin: var(--s-4) 0 0; }
}
@media (max-width: 767px) { .hero-grid .hero-quote { grid-column: 1 / span 4; } }
@media (min-width: 1024px) {
  .hero-grid .hero-quote { grid-column: 1; grid-row: 1; margin: 0 0 20px; }
  .hero-grid .pitch      { grid-column: 1; grid-row: 2; }
  .hero-grid .pitch-rest { grid-column: 1; grid-row: 3; margin-top: var(--s-5); }
  .hero-grid .panel      { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---- the closing chips are not buttons either ----------------------
   Same fix as the hero. Three pills under the final CTA read as three
   more things to press, competing with the one button that matters. */
.sec-c .chips { gap: 8px 22px; }
.sec-c .chip-i { border: 0; background: none; padding: 0; border-radius: 0;
                 font-size: 13.5px; color: var(--muted); }
.hs body.dark .sec-c .chip-i { border: 0; background: none; color: #5A5D68; }
.hs body.dark .sec-c .chip-i svg { color: var(--accent); }
body.dark .sec-c .chip-i { border: 0; background: none; color: var(--dark-faint); }

/* ---- fine print follows the section it sits in ---------------------
   .src was left-aligned inside centerd sections, so the one-line notes
   under the steps and the logo grid hung off-axis under centerd copy. */
.sec-c > .src { text-align: center; margin-inline: auto; max-width: 62ch; }

/* ---- step illustrations --------------------------------------------
   One 2x2 sheet generated in a single pass, then sliced, content-
   trimmed and padded onto square canvases so all four share a baseline
   and a visual scale. Generating four separately gives four slightly
   different line weights, which is obvious in a four-across strip.
   WebP, 10KB each, 41KB for the set. Decorative, so alt="": the
   heading beside each one already names the step. */
.s-art { display: block; width: 100%; max-width: 168px; height: auto;
         margin: 2px 0 14px -10px; }
@media (max-width: 900px) { .s-art { max-width: 150px; } }
@media (max-width: 520px) { .s-art { max-width: 132px; } }
/* The artwork is drawn on white. On the dark skin that would be four
   glaring white squares, so it gets its own rounded white plate and
   reads as a deliberate card rather than a transparency bug. */
body.dark .s-art { background: #fff; border-radius: 12px; padding: 6px;
                   margin-left: 0; }
.hs body.dark .s-art { background: none; border-radius: 0; padding: 0;
                       margin-left: -10px; }

/* ======================================================================
   24 OCT, FOURTH PASS
   ====================================================================== */

/* ---- the win screen is centerd, and says "Congratulations" first ----
   The recap stays left aligned: it is a table of their answers and
   centerd data is unreadable. */
.qres.is-win { text-align: center; }
.qres.is-win .win-mark { margin-left: auto; margin-right: auto; }
.qres.is-win .winrecap, .qres.is-win .note { text-align: left; }
.r-congrats { font-family: var(--brand, inherit); font-weight: 700;
              font-size: 15px; letter-spacing: .01em; color: var(--accent);
              margin: 2px 0 4px; }
body.dark .r-congrats { color: #1E80FF; }
.hs body.dark .r-congrats { color: var(--accent); }

/* ---- a brighter win green, as far as contrast allows ----------------
   Ty asked for lighter and brighter. There is a hard ceiling: the tag
   puts WHITE TEXT on the green, and small white text needs 4.5:1, which
   runs out at about #1A8A4E. So the tag keeps that, and the brightening
   goes on the parts that are graphics rather than text, where the bar is
   3:1: the tick disc, its halo and the card edge. The disc is the thing
   you actually see, so this reads brighter without failing anyone. */
:root { --win-bright: #12A150; }
.win-mark, body.dark .win-mark, .hs body.dark .win-mark {
  background: var(--win-bright); color: #fff;
  box-shadow: 0 0 0 6px rgba(18,161,80,.16); }
.qcard:has(.qres.is-win),
body.dark .qcard:has(.qres.is-win) { border-top-color: var(--win-bright); }

/* ---- help is a popover, not a shove ---------------------------------
   It used to open inline at the foot of the field and push the card
   down, which on a phone moves the option the visitor is reaching for.
   Now it floats over, pinned under the "?", and nothing below it moves. */
.qf { position: relative; }
.qf-help { position: absolute; z-index: 30; right: 0; top: 34px;
           width: min(330px, calc(100% - 8px));
           margin-top: 0; padding: 13px 15px;
           background: var(--paper); color: var(--muted);
           border: 1px solid var(--line); border-top: 1px solid var(--line);
           border-radius: 10px; box-shadow: 0 10px 30px rgba(20,21,28,.13);
           font-size: 13px; line-height: 1.55; text-align: left; }
.qf-help::before {                          /* the pointer back to the ? */
  content: ""; position: absolute; top: -5px; right: 16px;
  width: 9px; height: 9px; background: inherit;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg); }
body.dark .qf-help { background: #1A1A18; border-color: var(--dark-line);
                     color: #B4B4AC; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
body.dark .qf-help::before { border-color: var(--dark-line); }
.hs body.dark .qf-help { background: #fff; border-color: #DDE2EA; color: #43454F;
                         box-shadow: 0 10px 30px rgba(20,21,28,.13); }
.hs body.dark .qf-help::before { border-color: #DDE2EA; }
@media (max-width: 520px) { .qf-help { width: calc(100% - 8px); } }

/* ---- the opening quote: brighter and bigger ------------------------- */
.pitch > .m1quote blockquote { font-size: 17.5px; line-height: 1.45; }
.hs body.dark .pitch > .m1quote blockquote { color: #1E80FF; }
@media (max-width: 767px) {
  .pitch > .m1quote blockquote { font-size: 16px; }
}

/* ---- close the gap above the chips, and the ticks are blue ----------
   .pitch-rest carried a top margin AND .chips carried another, so two
   stacked gaps sat between the lede and the list. */
@media (min-width: 1024px) { .hero-grid .pitch-rest { margin-top: var(--s-3); } }
.pitch-rest .chips { margin-top: 0; gap: 10px 18px; }
.chip-i svg, .pitch-rest .chip-i svg, .sec-c .chip-i svg,
.hs body.dark .chip-i svg, .hs body.dark .pitch-rest .chip-i svg,
.hs body.dark .sec-c .chip-i svg { color: var(--accent); }
body.dark .chip-i svg, body.dark .pitch-rest .chip-i svg,
body.dark .sec-c .chip-i svg { color: #1E80FF; }

/* ---- step illustration moves above the rail ------------------------
   Ty: characters above the numbers, 30% bigger, and no frame.
   The frame was not CSS. The generated sheet draws thin grey dividers
   between its four panels, and slicing exactly on the halves baked those
   lines into every crop. Re-sliced with a 14px inset, so there is no
   border to remove. Nothing here draws a box, and nothing should: the
   art is on white and the page is on white. */
.step-c { display: flex; flex-direction: column; border-top: 0; padding-top: 0; }
.s-art { order: -1; width: 100%; max-width: 218px; height: auto;
         margin: 0 0 16px -14px; }
/* the rail used to be the card's own top border. The illustration now sits
   above it, so the rail becomes its own line under the art. */
.s-top { border-top: 2px solid var(--line); padding-top: 14px; margin-top: auto; }
.step-c::before { top: -6px; }
@media (max-width: 900px) { .s-art { max-width: 196px; } }
@media (max-width: 520px) { .s-art { max-width: 172px; } }
body.dark .s-art { background: #fff; border-radius: 14px; padding: 8px; margin-left: 0; }
.hs body.dark .s-art { background: none; border-radius: 0; padding: 0; margin-left: -14px; }
body.dark .s-top { border-top-color: var(--dark-line); }
.hs body.dark .s-top { border-top-color: #E2E6EC; }

/* ---- the opening quote, retargeted ---------------------------------
   Every `.pitch > .m1quote` rule written earlier went dead the moment the
   quote was lifted out of .pitch to become its own hero-grid child. It
   silently kept the base 15px. Target the class, not the position.
   Brighter as asked: #1A74E8 is 4.6:1 on white, so it still clears AA for
   normal-size text. #1E80FF would be brighter and 3.76:1, which fails. */
.hero-quote { max-width: 50ch; }
.hero-quote blockquote { font-size: 18.5px; line-height: 1.45; font-weight: 500; }
.hs body.dark .hero-quote blockquote { color: #1A74E8; }
body.dark .hero-quote blockquote { color: #4D9BFF; }
@media (max-width: 767px) { .hero-quote blockquote { font-size: 16.5px; } }

/* ---- step cards: align the rails, and put the node back on the rail -
   Two faults from moving the art above the line.
   1. `margin-top:auto` on .s-top pushed the rail to the BOTTOM of each
      card, so the tallest card's rail sat highest and the four stopped
      lining up. The illustrations are all square and identical height,
      so with the auto margin gone the rails align by construction.
   2. The node dot was still positioned against .step-c, which is now the
      top of the illustration, so four blue dots floated above the art
      with nothing to sit on. It belongs to the rail, so it is drawn on
      .s-top instead. */
.s-top { margin-top: 0; position: relative; }
.step-c::before { content: none; }
.s-top::before { content: ""; position: absolute; top: -6px; left: 0;
                 width: 10px; height: 10px; border-radius: 50%;
                 background: var(--accent); box-shadow: 0 0 0 3px var(--paper); }
body.dark .s-top::before { box-shadow: 0 0 0 3px #0C0C0B; }
.hs body.dark .s-top::before { background: var(--accent); box-shadow: 0 0 0 3px #fff; }
.alt .s-top::before { box-shadow: 0 0 0 3px #F7F8FA; }
body.dark .alt .s-top::before { box-shadow: 0 0 0 3px #141413; }

/* ---- six steps, two rows of three ----------------------------------
   Ty preferred this to a row of five, and he is right: five across at
   1280 gives each card about 205px, which is narrower than the
   illustration wants and forces the body copy into a column of three
   words. Three across gives each card ~350px and the art room to read.
   The rail still runs left to right along each row. */
.steps-6 { grid-template-columns: repeat(3, minmax(0,1fr));
           gap: var(--s-5) var(--s-4); }
@media (max-width: 900px) { .steps-6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .steps-6 { grid-template-columns: minmax(0,1fr); } }
.steps-6 .s-art { max-width: 240px; }
@media (max-width: 900px) { .steps-6 .s-art { max-width: 210px; } }
@media (max-width: 520px) { .steps-6 .s-art { max-width: 180px; } }

/* ---- where it goes --------------------------------------------------
   micro1's own published commitments about the destination of the data,
   plus the one thing it does not publish. The honest counterweight is a
   feature here, not a hedge: it is the only reason the three quotes
   above it are believable. */
.wheregoes { margin-top: var(--s-4); border: 1px solid var(--line-soft);
             border-radius: 12px; padding: 18px 20px; text-align: left; }
.wheregoes .wg-h { font-family: var(--mono); font-size: var(--t-label);
                   letter-spacing: .08em; text-transform: uppercase;
                   color: var(--muted); margin-bottom: 12px; }
.wheregoes .wg-list { list-style: none; margin: 0; padding: 0; }
.wheregoes .wg-list li { position: relative; padding-left: 24px;
                         margin-bottom: 10px; font-size: var(--t-cap);
                         line-height: 1.55; color: var(--muted); }
.wheregoes .wg-list li b { color: var(--ink); font-weight: 500; }
.wheregoes .wg-list li::before { content: ""; position: absolute; left: 2px;
                                 top: 8px; width: 7px; height: 7px;
                                 border-radius: 50%; background: var(--accent); }
.wheregoes .wg-no { border-top: 1px solid var(--line-soft);
                    padding-top: 12px; margin-top: 14px; margin-bottom: 0; }
.wheregoes .wg-no::before { background: var(--ctrl-line); }
.wheregoes .wg-no b { font-weight: 700; }
body.dark .wheregoes { border-color: var(--dark-line); }
body.dark .wheregoes .wg-list li b { color: #F5F5F2; }
body.dark .wheregoes .wg-no { border-top-color: var(--dark-line); }
.hs body.dark .wheregoes { border-color: #E8ECF1; }
.hs body.dark .wheregoes .wg-list li b { color: #14151C; }
.hs body.dark .wheregoes .wg-no { border-top-color: #E8ECF1; }

/* ======================================================================
   24 OCT, FIFTH PASS
   ====================================================================== */

/* ---- section 4 headline: break on the idea, turn in blue ------------ */
.d2-turn { display: block; color: var(--accent); }
body.dark .d2-turn { color: #1E80FF; }
.hs body.dark .d2-turn { color: var(--accent); }

/* ---- bolds inside the argument are for scanning, not shouting -------
   Weight only, no color. Three highlights in three paragraphs: the
   claim, the scarcity, the consequence. Anyone skimming the left column
   gets the whole argument from those three alone. */
.tc-text .lede b { font-weight: 700; color: var(--ink); }
body.dark .tc-text .lede b { color: #F5F5F2; }
.hs body.dark .tc-text .lede b { color: #14151C; }

/* ---- give the diagram the room ------------------------------------- */
@media (min-width: 1024px) {
  .grid.twocol .tc-text { grid-column: 1 / span 5; }
  .grid.twocol .tc-vis  { grid-column: 6 / span 7; }
  .twocol .chainfig .hgfx { max-width: 100%; margin-left: 0; }
}

/* ---- mobile steps: three rows of two -------------------------------
   Ty's call. Six single-column cards is a very long scroll on a phone
   for a section nobody arrived to read. */
@media (max-width: 520px) {
  .steps-6 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4) var(--s-3); }
  .steps-6 .s-art { max-width: 100%; margin-left: -6px; }
  .steps-6 .sd { font-size: var(--t-label); line-height: 1.5; }
}

/* ---- type scale: put my own additions back on the ramp --------------
   Ty: "a lot of different font sizes." Fair, and most of the strays
   were mine from today. The scale is --t-label 12 / --t-cap 13.5 /
   --t-sm 15 / --t-body 17 / --t-lead 17-21 / --t-fig 28-38 / d3 / d2 /
   d1. Everything below now sits on it.
   One of them, .s-lab at 10.5px, was under the floor the token file
   explicitly sets: "--t-label: 12px. floor. nothing on this site is
   smaller." */
.s-lab  { font-size: var(--t-label); }
.s-n    { font-size: var(--t-fig); }
.r-congrats { font-size: var(--t-sm); }
.qf-help { font-size: var(--t-cap); }
.winrecap .wr-n { font-size: var(--t-cap); }
.m1quote blockquote { font-size: var(--t-sm); }
.hero-quote blockquote { font-size: var(--t-lead); }
.pitch-rest .chip-i, .sec-c .chip-i { font-size: var(--t-cap); }
@media (max-width: 767px) { .hero-quote blockquote { font-size: var(--t-lead); } }

/* ---- the sticky CTA is one glass bar, not two pills ------------------
   It was a dark pill wrapping a line of text AND a blue button, so it
   read as two competing buttons, ellipsised its own text to "Six
   questions. About..." and wrapped the button onto two lines.

   Full-width bar, translucent, blurred, with the page still legible
   behind it. Chosen over a solid bar because the page IS the argument:
   covering 70px of it with an opaque slab on a phone reads as an ad
   banner, and the blur keeps the thing being argued visible while the
   button stays unmissable.

   backdrop-filter degrades safely. Where it is unsupported the bar is
   simply a more opaque solid, which is the old behavior. */
.sticky { left: 0; right: 0; bottom: 0; width: 100%; max-width: none;
          transform: translateY(140%);
          display: flex; justify-content: center; align-items: center;
          gap: 0; border-radius: 0; padding: 12px var(--gutter);
          padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
          background: rgba(255,255,255,.82);
          border-top: 1px solid var(--line-soft);
          box-shadow: 0 -6px 24px rgba(20,21,28,.07); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sticky { background: rgba(255,255,255,.66);
            -webkit-backdrop-filter: blur(16px) saturate(1.7);
            backdrop-filter: blur(16px) saturate(1.7); }
}
.sticky.show { transform: translateY(0); }
.sticky .btn { min-height: 46px; padding: 0 26px; font-size: var(--t-sm);
               border-radius: 999px; white-space: nowrap; }
body.dark .sticky { background: rgba(12,12,11,.72); border-top-color: #2A2A28;
                    box-shadow: 0 -6px 24px rgba(0,0,0,.45); }
.hs body.dark .sticky { background: rgba(255,255,255,.66);
                        border-top-color: #E8ECF1;
                        box-shadow: 0 -6px 24px rgba(20,21,28,.07); }
/* 25 Oct: this was unscoped and sat AFTER the min-width:768px rule that
   zeroes it, so it won at every width and left a 92px white strip under
   the footer on desktop, where .sticky is display:none. Scoped to the
   only widths the sticky bar actually renders at. */
@media (max-width: 767px) { body:has(.sticky) { padding-bottom: 92px; } }
@media (max-width: 520px) { .sticky { padding-left: 16px; padding-right: 16px; } }

/* ======================================================================
   24 OCT, SIXTH PASS  ·  mobile parity and the press bar
   ====================================================================== */

/* ---- press bar ------------------------------------------------------
   Directly under the quiz card, which was the emptiest part of the top
   of the page. Full width across the hero at desktop. */
.pressbar { grid-column: 1 / span 12; margin-top: var(--s-5);
            border-top: 1px solid var(--line-soft); padding-top: 18px; }
@media (max-width: 1023px) { .pressbar { grid-column: 1 / span 8; margin-top: var(--s-4); } }
@media (max-width: 767px)  { .pressbar { grid-column: 1 / span 4; } }
.pressbar .pb-k { font-family: var(--mono); font-size: var(--t-label);
                  letter-spacing: .1em; text-transform: uppercase;
                  color: var(--muted); margin-bottom: 14px; }
.pressbar .pb-list { list-style: none; margin: 0; padding: 0;
                     display: flex; flex-wrap: wrap; align-items: center;
                     gap: 10px 30px; }
.pressbar .pb-list a { font-family: var(--brand, Georgia, 'Times New Roman', serif);
                       font-weight: 700; font-size: 17px; letter-spacing: -.01em;
                       color: var(--ink); opacity: .55; text-decoration: none;
                       border: 0; transition: opacity .18s ease; white-space: nowrap; }
.pressbar .pb-list a:hover { opacity: 1; }
.pressbar .pb-fine { margin-top: 14px; font-size: var(--t-label);
                     line-height: 1.5; color: var(--muted); max-width: 70ch; }
body.dark .pressbar { border-top-color: var(--dark-line); }
body.dark .pressbar .pb-list a { color: #F5F5F2; opacity: .6; }
body.dark .pressbar .pb-fine { color: var(--dark-faint); }
.hs body.dark .pressbar { border-top-color: #E8ECF1; }
.hs body.dark .pressbar .pb-list a { color: #14151C; opacity: .55; }
.hs body.dark .pressbar .pb-fine { color: #5A5D68; }
@media (max-width: 520px) {
  .pressbar .pb-list { gap: 9px 20px; }
  .pressbar .pb-list a { font-size: 15px; }
}

/* ---- the H1 turn line holds its proportion at every width -----------
   At mid widths the display clamp pushed line one up while the turn
   stayed at .68em, so the number shrank away from the claim it is
   supposed to answer. It is the half that carries the money. */
@media (min-width: 768px) and (max-width: 1100px) {
  .h1-turn { font-size: .74em; }
}

/* ---- mobile: headings centerd, body copy never -----------------------
   Centerd headings read fine. Four lines of centerd body copy do not:
   the eye loses the left edge on every return. Headings and ledes were
   both inheriting .sec-c, so the ledes were centerd too. */
@media (max-width: 767px) {
  .sec-c .lede, .sec-c > .src, .wheregoes, .note { text-align: left; }
  .sec-c .lede { margin-inline: 0; }
}

/* ---- the chain on mobile is a diagram again -------------------------
   The SVG is display:none under 767px because a 560-wide viewBox at
   375px renders its labels at about 9px. The fallback was a bordered
   list, which carried the words and lost the argument: Ty's "tricking
   sequence of events" is the point, not the four nouns.

   This rebuilds it as the same diagram turned vertical. A rail runs down
   the left with a node on each step, the four artefacts stack along it,
   and the outcome lands in the accent card the desktop version ends on.
   The staggered reveal already existed and is untouched, so the sequence
   still builds one step at a time. Nothing from desktop is lost now
   except the horizontal axis, which a phone does not have. */
@media (max-width: 767px) {
  .chain-m { border: 0; border-radius: 0; overflow: visible;
             margin-top: var(--s-4); padding-left: 26px; position: relative; }
  .chain-m::before {                       /* the rail */
    content: ""; position: absolute; left: 5px; top: 10px; bottom: 44px;
    width: 2px; background: var(--line); }
  .chain-m li { display: block; border-bottom: 0; padding: 0 0 20px;
                position: relative; }
  .chain-m li::before {                    /* node on the rail */
    content: ""; position: absolute; left: -26px; top: 5px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--accent); }
  .chain-m .cm-k { display: block; min-width: 0; font-weight: 700;
                   font-size: var(--t-body); line-height: 1.25; }
  .chain-m .cm-v { display: block; font-size: var(--t-cap);
                   color: var(--muted); margin-top: 2px; }
  /* the outcome card, same as the blue box the desktop chain resolves to */
  .chain-m .cm-out { margin-top: 4px; padding: 14px 16px; border-radius: 10px;
                     background: #E8F0FE; border: 1px solid #C9DDFB; }
  .chain-m .cm-out::before { background: var(--accent); border-color: var(--accent);
                             top: 19px; }
  .chain-m .cm-out .cm-k { color: var(--accent); }
  .chain-m .cm-out .cm-v { color: var(--accent); opacity: .85; }

  body.dark .chain-m::before { background: var(--dark-line); }
  body.dark .chain-m li::before { background: #0C0C0B; border-color: #1E80FF; }
  body.dark .chain-m .cm-out { background: rgba(30,128,255,.14); border-color: rgba(30,128,255,.32); }
  body.dark .chain-m .cm-out::before { background: #1E80FF; border-color: #1E80FF; }
  body.dark .chain-m .cm-out .cm-k, body.dark .chain-m .cm-out .cm-v { color: #1E80FF; }
  .hs body.dark .chain-m::before { background: #E2E6EC; }
  .hs body.dark .chain-m li::before { background: #fff; border-color: var(--accent); }
  .hs body.dark .chain-m .cm-out { background: #E8F0FE; border-color: #C9DDFB; }
  .hs body.dark .chain-m .cm-out::before { background: var(--accent); border-color: var(--accent); }
  .hs body.dark .chain-m .cm-out .cm-k, .hs body.dark .chain-m .cm-out .cm-v { color: #1655B8; }
}

/* ---- FIX: the press bar was destroying the hero grid -----------------
   `.pressbar { grid-column: 1 / span 12 }` matches the 12-column base
   grid, but at >=1024px the hero is redefined to TWO columns. Asking for
   span 12 there forced ten implicit columns into existence, which
   collapsed the real ones: the H1 wrapped one word per line and the quiz
   card was squeezed to a sliver.

   `1 / -1` spans whatever columns actually exist, so it is correct at
   every breakpoint instead of only at the one it was written against.
   Rule: never hard-code a span count on a grid that gets redefined. */
@media (min-width: 1024px) {
  .hero-grid .pressbar { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s-5); }
}
.pressbar { grid-column: 1 / -1; }

/* ---- press bar: centerd, real logos ---------------------------------
   Ty: centerd like an e-commerce "as seen in" banner, logos not type.
   Logos are the publishers' own SVG wordmarks served locally.

   Each one is normalised to a common OPTICAL height rather than a common
   box height: Forbes is a short wide wordmark, NBC's peacock is nearly
   square, and setting them all to the same pixel height would make the
   peacock tower over everything. Height is capped and width is let run,
   with a per-logo nudge below where a mark needs it.

   Greyscale at rest so six house styles do not fight the one blue on the
   page, full color on hover. */
.pressbar { text-align: center; }
.pressbar .pb-k { margin-bottom: 18px; }
.pressbar .pb-list { justify-content: center; gap: 18px 44px; }
.pressbar .pb-list li { display: flex; align-items: center; }
.pressbar .pb-list a { display: flex; align-items: center; opacity: 1; }
.pressbar .pb-list img {
  height: 22px; width: auto; max-width: 150px; display: block;
  filter: grayscale(1) contrast(.15) brightness(.42);
  opacity: .9; transition: filter .2s ease, opacity .2s ease; }
.pressbar .pb-list a:hover img { filter: none; opacity: 1; }
/* per-mark optical correction */
.pressbar .pb-list li:nth-child(1) img { height: 20px; }   /* Forbes, tall caps */
.pressbar .pb-list li:nth-child(5) img { height: 27px; }   /* NBC peacock, square */
.pressbar .pb-list li:nth-child(6) img { height: 24px; }   /* Inc., very short mark */
.pressbar .pb-fine { margin-inline: auto; text-align: center; max-width: 64ch; }
/* On ink the marks have to go light, not dark. */
body.dark .pressbar .pb-list img { filter: grayscale(1) brightness(0) invert(1); opacity: .62; }
body.dark .pressbar .pb-list a:hover img { filter: none; opacity: 1; }
.hs body.dark .pressbar .pb-list img { filter: grayscale(1) contrast(.15) brightness(.42); opacity: .9; }
.hs body.dark .pressbar .pb-list a:hover img { filter: none; opacity: 1; }
@media (max-width: 520px) {
  .pressbar .pb-list { gap: 16px 26px; }
  .pressbar .pb-list img { height: 18px; max-width: 110px; }
  .pressbar .pb-list li:nth-child(5) img { height: 22px; }
  .pressbar .pb-list li:nth-child(6) img { height: 20px; }
}

/* ======================================================================
   24 OCT, SEVENTH PASS  ·  mobile hero, chips, type consistency
   ====================================================================== */

@media (max-width: 767px) {
  /* ---- everything above the form is centerd, and the dead space goes --
     Ty: the numbers are the biggest thing we have, so they lead. The hero
     had 24px section padding plus 12px on .pitch plus a 36px wash band
     doing nothing above the headline. */
  .hero-split { padding-top: 10px; }
  .hero-grid .pitch { margin-top: 4px; text-align: center; }
  .hero-grid .pitch .d1 { text-align: center; }
  /* 36ch capped this to 320px inside a 343px container, buying an extra
     line wrap for nothing and leaving the measure below the 45ch floor
     for body text. Uncapped it fills 343px, drops one line and saves
     23px above the card. Measured 27 Oct. */
  .hero-sub { margin-inline: auto; text-align: center; max-width: none; }
  .hero-grid .hero-quote { text-align: center; }
  .hero-quote blockquote { margin-inline: auto; }
  .hero-quote figcaption { justify-content: center; }
  .hero-grid .panel { margin-top: var(--s-4); }

  /* ---- the chips were the weakest thing on the page -------------------
     A two-by-two grid of loose ticks with ragged right edges reads as an
     accident. They are four promises, so they get one row each, centerd
     as a block but left-aligned internally so the ticks line up and the
     text starts on a common edge. */
  .pitch-rest .chips { grid-template-columns: max-content; justify-content: center;
                       gap: 9px; margin-top: var(--s-4); }
  .pitch-rest .chip-i { justify-content: flex-start; text-align: left;
                        font-size: var(--t-sm); gap: 10px; }
  .pitch-rest .chip-i svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 3px; }
}

/* ---- the opening quote gets a frame so it reads as a quotation ------- */
.hero-quote { background: #F4F7FC; border: 1px solid #E2E9F5; border-radius: 12px;
              padding: 16px 18px; }
body.dark .hero-quote { background: rgba(30,128,255,.10); border-color: rgba(30,128,255,.26); }
.hs body.dark .hero-quote { background: #F4F7FC; border-color: #E2E9F5; }
.hero-quote .m1-src { opacity: .85; }

/* ---- FAQ lede is centerd with its heading --------------------------- */
.faq-lede { text-align: center; margin-inline: auto; max-width: 52ch; }
@media (max-width: 767px) { .sec-c .faq-lede { text-align: center; margin-inline: auto; } }

/* ---- tier figures count in on scroll, on every screen ----------------
   The reveal was desktop-only. These three numbers are the single most
   persuasive thing in the section and on a phone they just sat there. */
.tiers .tv { opacity: 1; }
.js .tiers.is-armed .tv { opacity: 0; transform: translateY(10px) scale(.96); }
.js .tiers.is-in .tv { animation: tierIn .55s cubic-bezier(.2,.9,.3,1) both; }
.js .tiers.is-in .tier:nth-child(2) .tv { animation-delay: .12s; }
.js .tiers.is-in .tier:nth-child(3) .tv { animation-delay: .24s; }
@keyframes tierIn { from { opacity: 0; transform: translateY(10px) scale(.96); }
                    to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .tiers.is-armed .tv, .js .tiers.is-in .tv { animation: none; opacity: 1; transform: none; }
}

/* ---- footer: links inline with the copyright, one style -------------- */
.foot-line { display: flex; flex-wrap: wrap; justify-content: center;
             align-items: center; gap: 6px 20px; font-size: 12px; }
.foot-line a { color: inherit; opacity: .75; text-decoration: none;
               border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.foot-line a:hover { opacity: 1; }
.foot-line span { opacity: .6; }

/* ---- the four promises, as a panel rather than a list ---------------
   Third attempt. A bordered pill row read as buttons. A flat centerd
   list read as an afterthought. These four lines are the only place the
   page states what it will NOT do to you, which in this category is the
   whole pitch, so they get a designed object.

   Two by two in a hairline grid, which is the device already used by the
   record-type cards further down, so it reads as part of the system
   rather than a new idea. Tick sits in a tinted disc: present enough to
   scan, not a control. Markup untouched, this is all presentation. */
.pitch-rest .chips {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: 12px; overflow: hidden;
  margin-top: var(--s-4); max-width: 440px; }
.pitch-rest .chip-i {
  background: var(--paper); margin: 0; padding: 15px 16px;
  display: flex; align-items: center; gap: 11px;
  font-size: var(--t-cap); line-height: 1.3; color: var(--muted);
  border: 0; border-radius: 0; text-align: left; }
.pitch-rest .chip-i svg {
  width: 20px; height: 20px; flex: 0 0 20px; padding: 3.5px;
  border-radius: 50%; background: #E8F0FE; color: var(--accent);
  box-sizing: border-box; stroke-width: 2.6; margin: 0; }

body.dark .pitch-rest .chips { background: var(--dark-line); border-color: var(--dark-line); }
body.dark .pitch-rest .chip-i { background: #141413; color: #B4B4AC; }
body.dark .pitch-rest .chip-i svg { background: rgba(30,128,255,.18); color: #1E80FF; }
.hs body.dark .pitch-rest .chips { background: #E8ECF1; border-color: #E8ECF1; }
.hs body.dark .pitch-rest .chip-i { background: #fff; color: #43454F; }
.hs body.dark .pitch-rest .chip-i svg { background: #E8F0FE; color: var(--accent); }

@media (max-width: 767px) {
  /* supersedes the centerd single column from the seventh pass */
  .pitch-rest .chips { grid-template-columns: 1fr 1fr; gap: 1px;
                       margin-inline: auto; max-width: 100%; }
  .pitch-rest .chip-i { font-size: var(--t-label); padding: 13px 12px; gap: 9px;
                        align-items: flex-start; }
  .pitch-rest .chip-i svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
}

/* ======================================================================
   24 OCT, EIGHTH PASS  ·  get the logos above the fold on a phone
   ====================================================================== */

/* ---- card footer is one row, note and counter together -------------- */
.q-note { font-family: var(--mono); font-size: var(--t-label);
          color: var(--faint); line-height: 1.35; }
body.dark .q-note { color: #9A9A92; }
.hs body.dark .q-note { color: #6E7280; }
.q-foot { align-items: baseline; }
@media (max-width: 420px) {
  .q-note { font-size: 10.5px; letter-spacing: -.01em; }
  .q-left { font-size: 10.5px; white-space: nowrap; }
}

@media (max-width: 767px) {
  /* ---- the press bar moves ABOVE the card -------------------------
     Ty wants the logos on screen when the page loads, and on a phone
     they cannot be: the card is ~600px tall, so anything under it
     starts past 900px. Above the card they land around 300px, which is
     visible on every iPhone without a scroll.
     The cost is roughly 75px on the card's start position, and that is
     the trade: the logos are the only instant credibility on the page
     and the card still opens on question one. */
  .hero-grid .pressbar { order: -1; margin: var(--s-3) 0 0; padding-top: 16px; }
  .pressbar .pb-k { font-size: 10.5px; letter-spacing: .12em; margin-bottom: 10px; }
  .pressbar .pb-list { gap: 12px 20px; }
  .pressbar .pb-list img { height: 15px; max-width: 94px; }
  .pressbar .pb-list li:nth-child(5) img { height: 19px; }
  .pressbar .pb-list li:nth-child(6) img { height: 17px; }

  /* ---- spacing, per Ty's read of his own screenshot ----------------
     Keep the air above the H1, he likes it. Give the turn line more
     room so it reads as its own statement rather than a wrapped tail.
     Close the gap between the sub and the card, which was the one
     piece of dead space actually worth reclaiming. */
  .hero-grid .pitch { margin-top: 10px; }
  .h1-turn { margin-top: .5em; }
  .hero-sub { margin-top: 14px; }
  .hero-grid .panel { margin-top: 18px; }
}

/* ---- hero order on mobile: hook, proof, form ------------------------
   order:-1 put the logos above the headline, so the first thing on
   screen was six mastheads for a page you had not been told about yet.
   The sequence that works is the claim, then who says this is real,
   then the thing to do about it. The logos still land around 280px,
   which is visible on load on every iPhone. */
@media (max-width: 767px) {
  .hero-grid .pitch      { order: 1; }
  .hero-grid .pressbar   { order: 2; margin: var(--s-3) 0 0; }
  .hero-grid .panel      { order: 3; margin-top: 18px; }
  .hero-grid .hero-quote { order: 4; }
  .hero-grid .pitch-rest { order: 5; }
}

/* ---- keep the card footer on one line -------------------------------
   Note and counter share the row. Under 480px the full note plus the
   counter is wider than the card, so the last clause drops: "nothing
   uploaded" is already one of the four promises in the panel below, and
   "6 questions, about a minute" is the part that belongs on the form. */
.q-foot { flex-wrap: nowrap; }
.q-note { min-width: 0; }
@media (max-width: 480px) { .q-note-x { display: none; } }

/* ======================================================================
   24 OCT, NINTH PASS
   ====================================================================== */

/* ---- the second line is the money, so it is the same size -----------
   It was 0.68em, which made the number a footnote to the claim. Ty:
   "the big line is the money, that should be big." Both lines now set
   at full display size, line one in ink, line two entirely in the
   accent. The whole line goes blue, not just the figure: splitting the
   color mid-sentence was what made it read as a caption. */
.h1-turn { font-size: 1em; margin-top: .16em; color: var(--accent); }
.h1-turn .accent-phrase { color: inherit; }
body.dark .h1-turn, body.dark .h1-turn .accent-phrase { color: #1E80FF; }
.hs body.dark .h1-turn, .hs body.dark .h1-turn .accent-phrase { color: var(--accent); }
@media (min-width: 768px) and (max-width: 1100px) { .h1-turn { font-size: 1em; } }
@media (max-width: 767px) { .h1-turn { font-size: 1em; margin-top: .14em; } }

/* ---- mobile hero order, per Ty -------------------------------------
   Nothing above the form but the headline and the sub.
     headline + sub -> form -> quote -> the four promises -> as seen on
   Supersedes the eighth pass, which put the press bar above the card to
   get the logos on screen at load. They are lower now by instruction:
   the form is the thing that has to be reachable first. */
@media (max-width: 767px) {
  .hero-grid .pitch      { order: 1; }
  .hero-grid .panel      { order: 2; margin-top: 20px; }
  .hero-grid .hero-quote { order: 3; margin-top: var(--s-4); }
  .hero-grid .pitch-rest { order: 4; margin-top: var(--s-4); }
  .hero-grid .pressbar   { order: 5; margin-top: var(--s-4); padding-top: 18px; }
}

/* ---- desktop: same order as mobile, and a headline that fits --------
   Two corrections after making both H1 lines full size.

   1. The left column ran to six lines at 1280, because the display
      clamp tops out at 64px in a 553px column. Capped lower in the hero
      only, so it lands at four. Still the biggest thing on the page.
   2. The quote was in row 1, above the headline, left over from when it
      replaced the eyebrow. Ty's order is headline, sub, form, quote, the
      four promises, as seen on. Desktop now follows it: the headline
      opens the column and the quote sits under it, beside the form. */
@media (min-width: 1024px) {
  .hero-grid .pitch .d1 { font-size: clamp(34px, 3.55vw, 50px); }
  .hero-grid .pitch      { grid-column: 1; grid-row: 1; }
  .hero-grid .hero-quote { grid-column: 1; grid-row: 2; margin: var(--s-4) 0 0; }
  .hero-grid .pitch-rest { grid-column: 1; grid-row: 3; margin-top: var(--s-4); }
  .hero-grid .panel      { grid-column: 2; grid-row: 1 / span 3; }
  .hero-grid .pressbar   { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s-5); }
}

/* ======================================================================
   25 OCT  ·  the quote opens the page again, unboxed
   ====================================================================== */

/* ---- no box ---------------------------------------------------------
   The tinted panel turned a line of borrowed authority into a UI
   component. Unboxed it reads as what it is: somebody else's sentence,
   set small and quiet above the claim it supports.
   Color stays #1A74E8, which is 4.6:1 on white and clears AA at this
   size. #1E80FF would be brighter and 3.76:1, which does not. */
.hero-quote { background: none; border: 0; padding: 0; }
body.dark .hero-quote, .hs body.dark .hero-quote { background: none; border: 0; }
.hero-quote blockquote { font-size: 15px; line-height: 1.4; font-weight: 500;
                         letter-spacing: -.005em; max-width: 46ch; }
.hero-quote figcaption { margin-top: 6px; }
.hero-quote .m1-src { font-size: 11px; letter-spacing: .06em; opacity: .75; }
@media (max-width: 767px) {
  .hero-quote blockquote { font-size: 14px; line-height: 1.38; margin-inline: auto; }
}

/* ---- back above the headline, both breakpoints ---------------------
   Order: quote, headline + sub, form, the four promises, as seen on. */
@media (max-width: 767px) {
  .hero-grid .hero-quote { order: 0; margin: 0 0 14px; }
  .hero-grid .pitch      { order: 1; margin-top: 0; }
  .hero-grid .panel      { order: 2; margin-top: 20px; }
  .hero-grid .pitch-rest { order: 3; margin-top: var(--s-4); }
  .hero-grid .pressbar   { order: 4; margin-top: var(--s-4); padding-top: 18px; }
}
@media (min-width: 1024px) {
  .hero-grid .hero-quote { grid-column: 1; grid-row: 1; margin: 0 0 18px; }
  .hero-grid .pitch      { grid-column: 1; grid-row: 2; }
  .hero-grid .pitch-rest { grid-column: 1; grid-row: 3; margin-top: var(--s-4); }
  .hero-grid .panel      { grid-column: 2; grid-row: 1 / span 3; }
  .hero-grid .pressbar   { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s-5); }
}

/* ---- source runs inline with the quote ------------------------------
   "micro1.ai" on its own centerd line below was costing about 24px and
   reading as a second element. Inline it is punctuation: the sentence,
   then who said it. Tighter, and the whole block is one thing. */
.hero-quote blockquote { display: inline; }
.hero-quote figcaption { display: inline; margin: 0; }
.hero-quote .m1-src { margin-left: 7px; white-space: nowrap; }

/* ======================================================================
   25 OCT  ·  spacing audit
   ====================================================================== */

/* ---- one gap, not two, above the four promises ----------------------
   `.hero-grid .pitch-rest` carried a top margin AND `.pitch-rest .chips`
   carried another, so the sub-to-panel gap was roughly 100px of stacked
   margin. The grid child owns the spacing; the panel inside owns none. */
.pitch-rest .chips { margin-top: 0; }
@media (min-width: 1024px) { .hero-grid .pitch-rest { margin-top: var(--s-3); } }
@media (max-width: 767px)  { .hero-grid .pitch-rest { margin-top: var(--s-3); } }

/* ---- the press band is symmetrical -----------------------------------
   It had an 18px rule-to-label gap at the top and inherited the hero's
   full 44-72px section padding below, so the band sat high in its own
   space. Equal padding above and below the logos, and the hero's bottom
   padding comes off since the band now provides it. */
.pressbar { padding-top: 22px; padding-bottom: 22px; }
.hero-split { padding-bottom: clamp(16px, 1.6vw, 24px); }
@media (max-width: 767px) {
  .hero-grid .pressbar { margin-top: var(--s-4); padding-top: 20px; padding-bottom: 20px; }
}

/* ---- less air above "See if you qualify" ---------------------------
   The card opened with 32px between the blue top edge and the first
   line of type, which on a phone is 32px of nothing at the exact point
   the visitor is deciding whether this is short. */
.qcard { padding-top: var(--s-3); }
@media (min-width: 560px) { .qcard { padding: var(--s-3) var(--s-4) var(--s-4); } }

/* ---- close the gap between the form and the promises ---------------- */
@media (max-width: 767px) { .hero-grid .panel { margin-top: 18px; } }

/* ---- mobile: close the last three gaps ------------------------------
   1. The sub to the top of the card. 18px was still reading as a break
      between two unrelated things rather than a lead-in to the form.
   2. The hairline above "the program, as seen on". On a phone it was
      drawing a box around a band that does not need one: the logos are
      already visually separate from the tick panel above them.
   3. The band itself sat 48px below the promises. With the rule gone
      there is nothing to balance, so the space comes off the top and
      stays on the bottom, where it separates the hero from what follows. */
@media (max-width: 767px) {
  .hero-grid .panel    { margin-top: 10px; }
  .hero-grid .pressbar { border-top: 0; margin-top: 20px;
                         padding-top: 0; padding-bottom: 18px; }
}

/* ---- one source of truth for hero spacing on mobile -----------------
   `.grid` sets a row-gap that was adding ~32px on top of every margin I
   set on the hero children, so "margin-top: 10px" rendered as a 42px
   gap and each fix landed short. Row-gap off, margins own it, and every
   number below is the gap you actually see. */
@media (max-width: 767px) {
  .hero-grid { row-gap: 0; }
  .hero-grid .hero-quote { margin: 0 0 14px; }
  .hero-grid .pitch      { margin: 0; }
  .hero-grid .panel      { margin-top: 22px; }
  .hero-grid .pitch-rest { margin-top: 24px; }
  .hero-grid .pressbar   { margin-top: 20px; padding-top: 0; padding-bottom: 18px; }
}

/* `.hero-sub` is a <p> and was still carrying the browser's default
   1em bottom margin, which is where the last unexplained 16px between
   the sub and the card was coming from. */
.hero-sub { margin-bottom: 0; }

/* ---- the close of the six steps ------------------------------------
   A conversion point, not a footnote: the reader has just understood
   the process and this is where they decide. Measured column so the
   three sentences do not run the full width of a six-column grid. */
.steps-close { margin-top: var(--s-5); text-align: center; }
.steps-close .lede { margin-inline: auto; max-width: 56ch; }
.steps-close .lede b { font-weight: 700; color: var(--ink); }
body.dark .steps-close .lede b { color: #F5F5F2; }
.hs body.dark .steps-close .lede b { color: #14151C; }
@media (max-width: 767px) { .steps-close { margin-top: var(--s-4); text-align: left; }
                            .steps-close .lede { margin-inline: 0; } }

/* ─────────────────────────────────────────────────────────────
   2026-10-25 REVIEW PASS
   Appended as one block so it reverts as one block.
   var(--accent) only: --accent-strong is near-black in the light
   skin, so it is not "the accessible blue".
   ───────────────────────────────────────────────────────────── */

/* 1 · Before/After read as two columns of a comparison when they are
   really a toggle, and "After" is the default, so a reader who misses
   the control never sees what was removed. Re-set as a segmented
   control: inline, narrower than the panel, filled selected state. */
.anon-tabs { display: inline-flex; gap: 4px; background: transparent;
             border: 0; padding: 12px 14px 2px; }
.anon-tab { flex: 0 0 auto; border-radius: 999px; padding: 7px 15px;
            background: transparent; border: 1px solid var(--line); }
.anon-tab .at { font-size: var(--t-cap); font-weight: 650; }
.anon-tab .ad { display: none; }
.anon-tab.is-on { background: var(--accent); border-color: var(--accent); }
.anon-tab.is-on .at, .anon-tab.is-on:hover .at { color: #fff; }
.anon-tab:not(.is-on):hover { border-color: var(--muted); }
body.dark .anon-tabs, .hs body.dark .anon-tabs { background: transparent; border: 0; }
body.dark .anon-tab, .hs body.dark .anon-tab { background: transparent; }
body.dark .anon-tab.is-on, .hs body.dark .anon-tab.is-on { background: var(--accent); }
body.dark .anon-tab.is-on .at, .hs body.dark .anon-tab.is-on .at { color: #fff; }

/* 2 · Step art outweighed the copy it illustrates. The 2-up phone grid
   stays: that is Ty's call for scroll length, and shrinking the art
   serves the same goal. Desktop art comes down hardest, where it was
   the largest thing on the page. */
.steps-6 .s-art { max-width: 176px; }
@media (max-width: 900px) { .steps-6 .s-art { max-width: 156px; } }
@media (max-width: 520px) { .steps-6 .s-art { max-width: 84%; } }

/* 3 · The three proof claims carried the page's best numbers as body
   text while 47 incidental labels had the mono face. */
.rc .rc-c { font-size: clamp(18px, 2vw, 22px); line-height: 1.24; }

/* 4 · cielo24: a named CEO, a named company, a real figure and a
   third-party publication, in the smallest box on the page. */
.casecard { max-width: 70ch; }
.casecard blockquote { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.28; }

/* 5 · Header nav links. Was two mechanisms at two breakpoints: .hide-sm at
   860px on the sub-pages and .nav-lnk at 599px on the index, so between
   600 and 860 the homepage showed a nav link and the sub-pages showed
   none. Now one class, one breakpoint. Measured: two links plus the CTA
   need 462px and stop fitting just under 540px. */

/* 6 · The press caption became a sentence, so it stops being a label.
   A long all-caps string is harder to read than the thing it labels. */
.pressbar .pb-k { text-transform: none; letter-spacing: .01em; }

/* 7 · The hero pull quote used to be hidden on phones, because back then it
   sat above the headline and pushed the card to 449px. That layout is gone.
   The mobile order rules now put the quote at order 3, after the card, so
   showing it costs the card nothing. Restored 27 Oct, Ty's call.

   The order matters as much as the visibility. The block at line 3018
   ("back above the headline") puts the quote at order:0, and hiding it was
   that decision's escape hatch: above the headline it pushed the card to
   449px. Un-hiding it without re-ordering it just reinstates that problem,
   measured at 460px. So it is ordered after the card here. pitch-rest and
   pressbar shift down one to keep the sequence contiguous. */
@media (max-width: 767px) {
  .hero-grid .hero-quote { order: 3; margin: var(--s-4) 0 0; }
  .hero-grid .pitch-rest { order: 4; }
  .hero-grid .pressbar   { order: 5; }
}

/* 8 · The action line under the sub is the same type at a heavier weight.
   It is an instruction, not more explanation, so it should not read as
   body copy. */
.hero-leadin { font-weight: 600; }

/* 8 · Footer disclosure ran to a 127-character measure, well past the
   ~80 the type guidance sets. Legal copy is the text people are least
   willing to work for, so it should not be the hardest to read.

   `margin-inline: auto` is load-bearing, not decoration. `.disc` is
   text-align:center, so capping the width without it leaves each block
   flush-left inside the panel while its text centers within the block:
   the copy then sits ~98px left of everything above it and reads as
   broken alignment. Measured at 1740px: panel center 870, paragraph
   center 772. Caught by Ty on the live page. */
.disc p { max-width: 86ch; margin-inline: auto; }
.disc p + p { margin-top: 10px; }

/* 9 · `.sec.dark` was unreadable in BOTH skins, and it carries the most
   important block on about.html ("micro1 pays us. You never do.") and
   the lead clause on before-you-sign.html ("Is it yours to sell?").

   Root cause is a class-name collision. The theme flag is `body.dark`
   and the inverted-section modifier is also `.dark`, so the light skin's
   `.hs body.dark .h2 { color:#14151C }` (3 classes) outranks the
   section's own `.dark .h2 { color:#fff }` (2 classes) and repaints the
   heading near-black on a near-black panel. Measured 1:1 on the heading
   and about 2:1 on the body copy.

   The dark skin has the mirror image: `.dark { background: var(--ink) }`
   resolves to #F5F5F2 there, so the panel goes light while the heading
   stays #fff.

   Fixed by restating both, each scoped tightly enough to win. */

/* light skin: panel is #14151C, so ink must be light */
.hs body.dark .sec.dark .h1,
.hs body.dark .sec.dark .h2,
.hs body.dark .sec.dark .h3 { color: #F5F5F2; }
.hs body.dark .sec.dark p,
.hs body.dark .sec.dark .lede,
.hs body.dark .sec.dark .prose { color: #B8B8B1; }
.hs body.dark .sec.dark .prose b,
.hs body.dark .sec.dark p b,
.hs body.dark .sec.dark strong { color: #F5F5F2; }

/* dark skin: panel inverts to #F5F5F2, so ink must be dark */
html:not(.hs) .sec.dark .h1,
html:not(.hs) .sec.dark .h2,
html:not(.hs) .sec.dark .h3 { color: #14151C; }
html:not(.hs) .sec.dark p,
html:not(.hs) .sec.dark .lede,
html:not(.hs) .sec.dark .prose { color: #43454F; }
html:not(.hs) .sec.dark .eyebrow { color: #6B6D78; }
html:not(.hs) .sec.dark .prose b,
html:not(.hs) .sec.dark p b,
html:not(.hs) .sec.dark strong { color: #14151C; }

/* 9b · Same collision hit inline links inside the panel. Measured 1:1
   on about.html's "the contract page". Underlined rather than colored,
   because a blue that reads on #14151C is not the same blue that reads
   on white, and this panel only ever has one link. */
.hs body.dark .sec.dark a { color: #F5F5F2; text-decoration: underline;
                            text-underline-offset: 3px;
                            text-decoration-color: rgba(245,245,242,.45); }
.hs body.dark .sec.dark a:hover { text-decoration-color: #F5F5F2; }
html:not(.hs) .sec.dark a { color: #14151C; text-decoration: underline;
                            text-underline-offset: 3px;
                            text-decoration-color: rgba(20,21,28,.45); }
html:not(.hs) .sec.dark a:hover { text-decoration-color: #14151C; }

/* 10 · One eyebrow treatment, one color.
   `.label` and `.eyebrow` are the same thing to look at: 12px Archivo,
   uppercase, 1.68px tracking. They were rendering in two different greys,
   so "DISCLOSURE" in the footer was #6E7280 on the index and #8E8E85 on
   both sub-pages. Same element, same place, different color per page.

   Root cause is the collision again: `.dark .eyebrow` (line ~165) is meant
   for dark panels, but `body` always carries class="dark", so it matched
   every eyebrow on every page including those on white. At #8E8E85 on
   white that is 3.3:1, which fails AA for 12px text. `.label`'s #6E7280
   is 4.79:1.

   Light background takes the label grey; the dark panel keeps its own. */
.hs body.dark .eyebrow { color: #6E7280; }
.hs body.dark .sec.dark .eyebrow,
.hs body.dark .band-ink .eyebrow { color: #8E8E85; }

/* 11 · `.num` is the clause numeral on before-you-sign and about. It was
   #1E80FF on white at 13.5px, which is 3.76:1 and fails AA for small
   text. This is the trap the token file already documents, on a class
   the earlier sweep missed: in the light skin small accent-colored text
   has to use var(--accent), which resolves to #1765D8 at 5.40:1.
   Dark panels keep their own accent, re-asserted after so this does not
   reach into them. */
.hs body.dark .num { color: var(--accent); }
.hs body.dark .sec.dark .num,
.hs body.dark .band-ink .num { color: var(--dark-accent); }

/* 12 · Hero micro1 quote was #1A74E8 at 15px, 4.46:1, just under the 4.5
   AA bar for small text. var(--accent) is #1765D8 at 5.40:1 in the light
   skin. (The .s-n step numerals share the 3.76:1 blue but render at 38px,
   which clears the 3:1 large-text bar, so they are left alone.) */
.hs body.dark .m1quote blockquote { color: var(--accent); }

/* 13 · Centerd headings were landing 274px left of center.
   `.h2` carries `max-width: 24ch` for measure control and no auto margin,
   which is right in the left-aligned clause sections. Inside a centerd
   block it is wrong twice over: the box stays flush-left while the text
   centers within it, so the heading reads as badly misaligned against
   everything above it.

   This is the third instance of the same mistake this session (footer
   disclosure, then this). The rule: **a max-width inside a centerd block
   needs `margin-inline: auto`, every time.**

   `.sec-c .d2` already sets `max-width: none` at line ~776. `.h2` was
   never given the same treatment, so the closing CTA on both sub-pages
   was built with the wrong classes. Markup is now aligned to the index
   (`.sec-c` + `.container` + `h2.d2`); this rule is the guard so it
   cannot come back. */
.sec-c .h2,
.sec-c .h1,
.sec-c .h3 { max-width: none; margin-inline: auto; }
.sec-c .prose,
.sec-c p { margin-inline: auto; }

/* 14 · In-answer CTA link. The FAQ was a dead end: thirteen answers, the
   deepest content on the page, and not one route back to the check.
   Deliberately a link and not a button: a button inside an answer reads
   as an ad break, a link reads as the next step. Accent blue, which is
   var(--accent) #1765D8 at 5.40:1 in the light skin, never #1E80FF. */
.faq .ans a.lnk,
a.lnk { color: var(--accent); font-weight: 600; text-decoration: none;
        white-space: nowrap; }
.faq .ans a.lnk:hover,
a.lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
body.dark a.lnk { color: var(--dark-accent); }
.hs body.dark a.lnk { color: var(--accent); }

/* 15 · about.html lost its hero visual when the buyer comparison table was
   removed (no competitor names on a page whose job is to route to one
   link). `.pitch` is 6 of 12 columns, so without a second column the
   desktop hero sat half empty.

   MUST exclude .panel as well as .visual. The homepage hero has no
   .visual either, it has the quiz .panel at column 7, so the first
   version of this rule widened .pitch to span 8 on index.html and
   overlapped the quiz card. Only widen when the second column is
   genuinely absent. */
.hero-split:not(:has(.visual)):not(:has(.panel)) .pitch { grid-column: 1 / span 8; }
.hero-split:not(:has(.visual)):not(:has(.panel)) .pitch .lede { max-width: 62ch; }

/* 16 · Wordmark tagline. "Atrayu" tells a first-time visitor nothing, and
   the name is the one word on the page with no meaning attached to it.
   Sits beside the mark on desktop, hidden under 600px where the header
   is only the mark and the CTA. Muted and small on purpose: it labels
   the brand, it does not compete with it. */
.brand { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-tag { font-size: var(--t-label); letter-spacing: .02em; color: var(--muted);
             white-space: nowrap; font-weight: 500; }
.brand-tag::before { content: ""; display: inline-block; width: 1px; height: 11px;
                     background: var(--line); margin-right: 10px;
                     vertical-align: -1px; }
@media (max-width: 767px) { .brand-tag { display: none; } }
body.dark .brand-tag { color: var(--dark-faint); }
.hs body.dark .brand-tag { color: #6E7280; }


/* 18 · Criteria list for refer.html. The winddown section has an
   equivalent but it is scoped to .wdl, so this is the reusable one.
   Blue dash marker matches the house list style there. */
.ticks { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
.ticks li { position: relative; padding-left: 22px; margin-bottom: 11px;
            font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em;
                    width: 10px; height: 2px; background: var(--accent);
                    border-radius: 1px; }
.ticks li:last-child { margin-bottom: 0; }


/* 20 · The .ledger component was built for the dark panel, where its
   #8E8E85 secondary text is 5.5:1. refer.html uses it on a light
   section, where the same color is 3.11:1 and fails AA. Light-section
   ledgers take the normal muted grey; dark panels keep theirs. */
.hs body.dark .sec:not(.dark) .ledger .ldesc,
.hs body.dark .sec:not(.dark) .ledger .lsrc { color: #5A5D68; }
.hs body.dark .sec:not(.dark) .ledger .lname { color: #14151C; }

/* 21 · Header is not sticky on a phone.
   Ty, 25 Oct, from a screenshot showing two identical "Check my
   eligibility" buttons on screen together: the pinned header and the
   sticky bar at the same scroll position. On a phone the bar is the
   better persistent CTA (thumb reach), so the header scrolls away and
   the bar does the work. Desktop keeps the sticky header and has no
   bar at all, so it is one button at every width. */
@media (max-width: 767px) {
  .site-head { position: static; }
  .site-head.is-pinned, .site-head.is-hidden { position: static; transform: none; }
}

/* 22 · Untouched slider state.
   A slider has to sit somewhere, but that is not the same as having
   been answered. Untouched it was showing the band in large accent
   mono, a filled track and an affirming sub-line, which reads as a
   given answer. On the size question the pre-set band was also the
   qualifying one, so the default quietly nudged every visitor toward
   a yes they had not chosen. Neutral until they move it. */
/* `.is-untouched` retired 26 Oct. The class is no longer emitted; these
   rules are kept out of the sheet rather than left to rot. The slider
   band shows in accent from first paint again, with the track filled to
   it, matching the pre-selected pill questions either side of it. */

/* 23 · Progress bar track was rendering near-black in the light skin.
   `body.dark .bar { background:#262624 }` is the dark-skin track, and
   because body always carries class="dark" it applied everywhere with
   no light-skin override. Fourth instance of this collision today.
   Also given a little more presence: 3px of hairline reads as a rule,
   not as progress. */
.hs body.dark .bar { background: #E4E8EE; }
.bar { height: 5px; border-radius: 99px; overflow: hidden; }
.bar > span { border-radius: 99px; }

/* Trust line under the quiz card. Persistent, unlike the in-card note. */
.qreassure { margin: 12px 2px 0; font-size: var(--t-cap); color: var(--muted);
             text-align: center; line-height: 1.5; }
.qreassure span { color: var(--line); margin: 0 3px; }
.hs body.dark .qreassure { color: #5A5D68; }
.hs body.dark .qreassure span { color: #C7CBD4; }
body.dark .qreassure { color: var(--dark-faint); }

/* 24 · Hero chips follow the hero's alignment.
   On mobile the whole pitch centers (h1, sub, trust line) and the
   eligibility grid was the one block still flush left, which read as a
   mistake rather than a choice. */
@media (max-width: 767px) {
  .pitch-rest .chips .chip-i { justify-content: center; text-align: center; }
}

/* 25 · Progress bar movement. The width transition existed but at 3px
   on a near-black track there was nothing to see. Slower and eased so
   the step actually registers as progress. */
.bar > span { transition: width .45s cubic-bezier(.22,.8,.3,1); }

/* ------------------------------------------------------------------
   26. Qualifier line under a headline figure.
   TrackImpact runs "Program referral fee · depending on deal size ·
   not guaranteed" in small grey directly beneath the number. Same job
   as our disclosure elsewhere: the caveat travels with the claim
   rather than living in a footer nobody reaches.
   .label grey (#6E7280), NOT .eyebrow grey, which is 3.3:1 and fails
   AA on white. Scoped to .pitch so it cannot leak onto other pages.
   ------------------------------------------------------------------ */
.pitch .fineline {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: #6E7280;
}
.pitch .fineline span { opacity: 0.55; margin: 0 2px; }
.sec.dark .pitch .fineline, .band-ink .pitch .fineline { color: #9AA0AC; }

/* ------------------------------------------------------------------
   27. Hero CTA on refer.html.
   Left-aligned with the headline above it, NOT centerd: .sec-c centers
   the closing CTA because that section is centerd, this one sits in a
   left-aligned .pitch column and must follow it.
   Scoped to .pitch so it cannot reach the homepage hero, whose second
   column is the quiz and which must not grow a competing button.
   ------------------------------------------------------------------ */
.pitch .hero-cta { margin-top: 30px; }
.pitch .hero-cta .btn { display: inline-flex; }
.pitch .hero-cta .src {
  margin: 14px 0 0;
  text-align: left;
}
@media (max-width: 599px) {
  .pitch .hero-cta { margin-top: 24px; }
  .pitch .hero-cta .btn { display: flex; width: 100%; }
  .pitch .hero-cta .src { text-align: center; }
}

/* ------------------------------------------------------------------
   28. Email field above the button, 26 Oct.
   It has no submit of its own, so it must read as part of the button
   it sits on rather than as a competing control: dashed rule above,
   full-width input, sub-line under it saying what arrives.
   `.capture input` is flex 1 1 200px for the old two-up fieldrow; with
   no sibling button it needs to be full width on its own row.
   ------------------------------------------------------------------ */
.capture .cap-l {
  display: block;
  font-weight: 600;
  font-size: var(--t-sm);
  margin-bottom: 8px;
}
.capture .cap-l span { font-weight: 400; color: var(--muted); }
.capture #ac-email { display: block; width: 100%; flex: none; }
.capture .cap-s { margin-top: 10px; margin-bottom: 0; }

/* Sent. The field stays on screen so the card does not jump under the
   thumb at the moment the button was pressed. */
.capture.done #ac-email { opacity: 0.55; }
.capture.done .cap-s::after {
  content: " Sent.";
  color: var(--accent);
  font-weight: 600;
}
.hs body.dark .capture .cap-l { color: #14151C; }
.hs body.dark .capture .cap-l span { color: #5A5D68; }

/* ------------------------------------------------------------------
   29. Referral email gate on refer.html.
   Stacked, full width, left aligned to the headline above it.
   ------------------------------------------------------------------ */
.pitch .hero-cta #refer-email {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: var(--t-body);
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #14151C;
  margin-bottom: 12px;
}
.pitch .hero-cta #refer-email:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.pitch .hero-cta #refer-go { display: flex; width: 100%; }
.pitch .hero-cta .err { color: #9A2B1F; font-size: var(--t-cap); margin-top: 9px; }
.pitch .hero-cta.hidden { display: none; }

.pitch .hero-cta.is-reveal .rv-h {
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--accent);
  margin-bottom: 10px;
}
.pitch .hero-cta.is-reveal .rv-row { display: flex; gap: 10px; margin-bottom: 12px; }
.pitch .hero-cta.is-reveal #refer-link {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sof, #F4F6F9);
  color: #14151C;
}
.pitch .hero-cta.is-reveal #refer-copy { flex: 0 0 auto; }
.pitch .hero-cta.is-reveal #refer-open { display: flex; width: 100%; }

@media (max-width: 599px) {
  .pitch .hero-cta.is-reveal .rv-row { flex-direction: column; }
  .pitch .hero-cta.is-reveal #refer-copy { width: 100%; }
}

/* ------------------------------------------------------------------
   30. Result header: the title IS the status. 26 Oct.
   Replaces the circled tick (.win-mark) and the status pill (.tag),
   which together cost ~100px above the button and repeated what the
   headline said. Neither element is emitted any more; the rules below
   only style what replaced them.
   ------------------------------------------------------------------ */
.rtitle-win {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #138A4A;
}
.rtitle-win .rt-tick {
  flex: 0 0 auto;
  width: 0.82em;
  height: 0.82em;
  stroke: #138A4A;
}
.hs body.dark .rtitle-win { color: #0F7A41; }
.hs body.dark .rtitle-win .rt-tick { stroke: #0F7A41; }
.sec.dark .rtitle-win, .band-ink .rtitle-win { color: #3FD37F; }
.sec.dark .rtitle-win .rt-tick, .band-ink .rtitle-win .rt-tick { stroke: #3FD37F; }

/* The capture label is now the whole ask: one short line, then the
   input, then the button. Nothing sits between them. */
.capture .cap-l {
  font-weight: 500;
  font-size: var(--t-cap);
  color: var(--muted);
  margin-bottom: 9px;
  line-height: 1.45;
}
.capture .err { margin-top: 8px; }

/* ------------------------------------------------------------------
   31. Result card, 26 Oct. Ty, on states 1 and 2.
   - Every result headline centred, matching the body under it, which
     was already centred. The ticked win line centres as a unit.
   - The win green is --win-bright (#12A150), the same value as the
     card's top border, so the tick, the headline and the bar are one
     color rather than three near-misses.
   - The rule between the email and the button is gone. They are one
     action now, so a divider was arguing the opposite.
   ------------------------------------------------------------------ */
/* Everything ABOVE the button is centred, on all six states. 26 Oct.
   First attempt centred only the headline, which left states 3-6 with
   a centered title over a left-aligned body. Ty: center the lot.
   What stays left-aligned is everything BELOW the button: the notes,
   the position bar and the recap. Those are read, not scanned, and
   `.qres.is-win .winrecap/.note { text-align: left }` already said so
   for the wins. */
.qres .rtitle,
.qres .rbody,
.qres .capture .cap-l,
.qres .handoff .fine { text-align: center; }

/* Why .fine is named here: `.qres.is-win { text-align: center }` centres
   the WHOLE win card by inheritance, so on states 1 and 2 the fine print
   was already centred while the other four inherited left. Listing the
   headline, body and label but not the caption left that split in place.
   Fourth time this inheritance has produced a silent mismatch. */
.rtitle-win { justify-content: center; }

/* Specificity note: `.hs body.dark .qcard .rtitle` (0,4,1) sets the ink
   color at line ~1691 and outranks a bare `.rtitle-win`. Match its
   depth rather than reaching for !important. */
.qcard .rtitle-win,
body.dark .qcard .rtitle-win,
.hs body.dark .qcard .rtitle-win { color: var(--win-bright); }
.qcard .rtitle-win .rt-tick,
body.dark .qcard .rtitle-win .rt-tick,
.hs body.dark .qcard .rtitle-win .rt-tick { stroke: var(--win-bright); }

/* The whole bar, not just a segment. Already at 100% on a result. */
.bar.bar-win > span { background: var(--win-bright); }

/* No rule, and less air, between the input and the button. */
.qres .handoff {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--s-2);
}

/* ------------------------------------------------------------------
   32. No rule above the email either. 26 Oct, Ty.
   The result card is now one uninterrupted column: verdict, body,
   ask, input, button. Rule 31 took the divider out from between the
   input and the button; this takes the last one out from above the
   label, and reclaims its padding with it.
   Scoped to .qres so any future .capture outside the result keeps
   its own separation.
   ------------------------------------------------------------------ */
.qres .capture {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--s-3);
}

/* ------------------------------------------------------------------
   33. Trust ticks under the button. 26 Oct.
   Class is .tticks, NOT .ticks: `.ticks` already exists at line ~3341
   with a `li::before` blue dash marker, used by refer.html. Reusing
   the name drew a dash AND a tick on every line.
   Replaces the prose caption on all six states. Left-aligned inside a
   centred block: the list centres as a unit so it sits under the
   button, but the lines align with each other so the ticks form a
   column the eye can run down. Centring each LINE would stagger them.
   ------------------------------------------------------------------ */
/* One row, not a stack. Three stacked lines cost ~54px under the
   button; a single row costs ~20px, and the point of this block is to
   be glanced at rather than read. Wraps on a narrow phone. */
.qres .tticks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
}
.qres .tticks li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-cap);
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
}
.qres .tticks svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  stroke: var(--win-bright);
}
.hs body.dark .qres .tticks li { color: #5A5D68; }
.sec.dark .qres .tticks li, .band-ink .qres .tticks li { color: #9AA0AC; }

/* ------------------------------------------------------------------
   34. iOS status bar overlap. 26 Oct.
   `.site-head` is `position: sticky; top: 0`, so on an iPhone in Safari
   with the bottom address bar the page runs to the physical top of the
   screen and the clock and battery are drawn over the wordmark and the
   CTA. Ty's screenshot showed exactly that.

   env() returns 0 on anything without a safe area, so desktop, Android
   and older iOS are untouched: this only ever adds the inset where one
   actually exists. Needs `viewport-fit=cover` on the viewport meta,
   which is now on all six pages, and which also makes the existing
   safe-area-inset-bottom rule at line ~2595 do what it always intended.
   ------------------------------------------------------------------ */
.site-head {
  padding-top: env(safe-area-inset-top, 0px);
}
@supports (padding: max(0px)) {
  .site-head .container, .site-head .wrap {
    padding-left: max(var(--gutter, 16px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter, 16px), env(safe-area-inset-right, 0px));
  }
}

/* ------------------------------------------------------------------
   35. Suggested answer, before the tap. 26 Oct, Ty.
   `.is-on` is solid black and means the visitor chose it. The default
   highlight must read differently or the card claims they answered a
   question they have not seen yet. `.is-pick` is the soft blue: tinted
   fill, accent border, ink text. The tap handler strips it, so the
   moment they choose anything the only state left is black.
   ------------------------------------------------------------------ */
.pill.is-pick { background: #1C1C1A; border-color: var(--accent); }
.pill.is-pick .pl { color: #fff; }
.pill.is-pick::after { border-color: var(--accent); opacity: 1; }

.hs body.dark .pill.is-pick {
  background: #EDF3FE;
  border-color: #1765D8;
  box-shadow: inset 0 0 0 1px #1765D8;
}
.hs body.dark .pill.is-pick .pl { color: #14151C; }
.hs body.dark .pill.is-pick .ps { color: #42566F; }
.hs body.dark .pill.is-pick::after { border-color: #1765D8; opacity: 1; }


/* ------------------------------------------------------------------
   36. The segue on the three referral results. 26 Oct, Ty.
   Turns the verdict into the offer: "Either way, you probably know a
   company that does." Sits between the body and the benefits, so the
   ticks read as reasons to join rather than as footnotes to a button
   that has already been pressed.
   ------------------------------------------------------------------ */
.qres .rsegue {
  margin: var(--s-3) 0 0;
  text-align: center;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
.hs body.dark .qres .rsegue { color: #14151C; }
.qres .rsegue + .capture { margin-top: var(--s-3); }

/* ------------------------------------------------------------------
   37. Result footer: disclosure plus a way to reach a human. 26 Oct.
   Sits under the ticks, so it costs the button nothing. Quiet by
   design: this is the line that reassures the careful reader without
   detaining the one who has already decided.
   ------------------------------------------------------------------ */
.qres .rfoot {
  margin: 13px 0 0;
  text-align: center;
  font-size: var(--t-cap);
  line-height: 1.55;
  color: var(--muted);
}
.qres .rfoot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qres .rfoot a:hover { color: var(--accent); }
.hs body.dark .qres .rfoot { color: #5A5D68; }
.hs body.dark .qres .rfoot a:hover { color: #1765D8; }

/* 38. Press logos at the foot of the result: removed 27 Oct, along
   with the .rpress rules. `.pressbar` already sits 269px below the
   result card, so this was the same six logos twice in one screen. */

}

/* ------------------------------------------------------------------
   39. The press bar repeated under the closing CTA. 27 Oct.
   Same component, links stripped, a little more air above it because
   here it closes a section rather than captioning the card above it.
   ------------------------------------------------------------------ */
.pressbar.pb-plain { margin-top: var(--s-4); }
.pressbar.pb-plain .pb-list li { display: flex; align-items: center; }