/* ─────────────────────────────────────────────────────────────────────────────
   NamedRank — theme "Ultraviolet": plum-ink + violet + ember on warm light.
   Claimed in /Users/aman/claude/BRAND-THEMES.md (2026-08-24).

   Design intent: an editorial product site, not a SaaS template. Light-dominant,
   one serif display face doing the talking, dark used exactly twice as punctuation
   (the honesty band and the footer). Section rhythms deliberately differ — a stat
   strip, an asymmetric split, a weighted diagram, a stepped rail — because five
   identical three-card grids is what a page looks like when nobody decided anything.

   No decorative green anywhere: "pass" renders violet.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* ink */
  --deep:#0B2A31; --deep2:#113740; --deep3:#1B4B55;
  --ink:#191322; --ink2:#4A4160; --muted:#6F6685; --faint:#786F88;
  /* accent */
  --acc:#0EA5BE; --acc-d:#0A6E80; --acc-l:#38CEE2; --acc-x:#DDF3F7;
  --ember:#F47236; --ember-l:#FFF1EA;
  /* white-text-safe ember — 5.18:1 on white. Decorative ember stays #F47236. */
  --ember-cta:#C2410C;
  /* surface */
  --paper:#FFFFFF; --bg:#F7FBFC; --tint:#EBF6F8; --warm:#FDF9F6;
  --line:#DCE9EC; --line2:#EDF5F7;
  /* semantic — never green */
  --bad:#C81E4E; --warn:#D9660B; --ok:#0B7F93;

  --shadow-s:0 1px 2px rgba(11,42,49,.04), 0 2px 8px -4px rgba(11,42,49,.10);
  --shadow-m:0 1px 3px rgba(11,42,49,.05), 0 18px 40px -26px rgba(11,42,49,.35);
  --shadow-l:0 2px 8px rgba(11,42,49,.06), 0 40px 80px -40px rgba(11,42,49,.45);

  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:16px; --r-sm:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-feature-settings:"cv05","ss01"}
p{margin:0}
img,svg{max-width:100%}
a{color:var(--acc-d);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

/* ── type ──────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.02em;font-weight:700}
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:1.02}
.display em{font-style:italic;color:var(--acc-d)}
h1.display{font-size:clamp(38px,6.2vw,72px)}
h2.display{font-size:clamp(29px,4vw,46px)}
h3.display{font-size:clamp(22px,2.4vw,29px)}
.kicker{font:700 11px/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--acc-d);display:block;margin-bottom:14px}
.kicker.on-dark{color:var(--acc-l)}
.lede{font-size:18.5px;line-height:1.62;color:var(--ink2);max-width:64ch}
.small{font-size:14px;color:var(--muted)}
.mono{font-family:var(--mono);font-size:.92em}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto}
section.band{padding:82px 0}
section.band.tight{padding:56px 0}
section.tinted{background:var(--tint)}
section.papered{background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}

/* ── nav ───────────────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:60;background:rgba(247,251,252,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:6px;height:66px}
.logo{display:flex;align-items:center;gap:10px;font:800 18px var(--sans);
  letter-spacing:-.035em;color:var(--ink);margin-right:22px;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo .mark{width:28px;height:28px;border-radius:9px;flex:0 0 auto;display:grid;
  place-items:center;color:#fff;font:800 14px var(--sans);
  background:linear-gradient(145deg,var(--acc) 0%,var(--ember) 130%)}
.navlinks{display:flex;gap:1px;flex:1 1 auto;flex-wrap:wrap;min-width:0}
.navlinks a{color:var(--ink2);font:500 14.5px var(--sans);padding:8px 12px;
  border-radius:8px;white-space:nowrap}
.navlinks a:hover{color:var(--ink);background:var(--acc-x);text-decoration:none}
.navlinks a.on{color:#085966;background:var(--acc-x);font-weight:600}
.navcta{flex:0 0 auto}

/* ── buttons ───────────────────────────────────────────────────────────────── */
.btn{display:inline-block;padding:14px 24px;font:600 15.5px/1 var(--sans);border:0;
  border-radius:var(--r-sm);background:var(--ink);color:#fff;cursor:pointer;
  text-align:center;transition:background .15s,transform .12s,box-shadow .15s}
.btn:hover{background:#2C2140;color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.ember{background:var(--ember-cta);box-shadow:0 10px 26px -14px rgba(244,114,54,.9)}
.btn.ember:hover{background:#A8390C}
.btn.violet{background:var(--acc);box-shadow:0 10px 26px -14px rgba(14,165,190,.9)}
.btn.violet:hover{background:var(--acc-d)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);
  box-shadow:none}
.btn.ghost:hover{background:var(--paper);border-color:var(--acc);color:var(--acc-d)}
.btn.on-dark{background:#fff;color:var(--deep)}
.btn.on-dark:hover{background:var(--acc-x);color:var(--deep)}
.btn.on-dark.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn.on-dark.ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.block{display:block;width:100%}

/* ── hero ──────────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:74px 0 78px;
  background:
    radial-gradient(760px 420px at 88% -12%, rgba(14,165,190,.16), transparent 66%),
    radial-gradient(560px 340px at -6% 96%, rgba(244,114,54,.12), transparent 68%),
    linear-gradient(178deg,#FBFEFE 0%, var(--bg) 62%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line)}
.hero.small{padding:56px 0 52px;
  background:
    radial-gradient(680px 340px at 90% -18%, rgba(14,165,190,.13), transparent 66%),
    linear-gradient(178deg,#FBFEFE 0%, var(--bg) 70%)}
.hero h1.display,.hero h2.display{color:var(--ink)}
.hero-split{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{max-width:15ch}
.hero .lede{margin-top:22px;font-size:19px;max-width:52ch}
.hero .lede b{font-weight:600;color:var(--ink);
  box-shadow:inset 0 -.5em 0 rgba(14,165,190,.14)}

form.check{display:flex;gap:10px;margin-top:32px;max-width:560px;flex-wrap:wrap}
form.check input{flex:1 1 280px}
input[type=text],input[type=email],textarea,select{width:100%;min-width:0;
  padding:15px 17px;font-size:16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);font-family:var(--sans)}
input[type=text],input[type=email]{font-family:var(--mono);font-size:15px}
form.check input{box-shadow:var(--shadow-s)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 4px rgba(14,165,190,.13)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:130px;resize:vertical;font-family:var(--sans)}
label.f{display:block;font:600 13.5px var(--sans);margin:0 0 7px;color:var(--ink2)}
.field+.field{margin-top:18px}

.trustline{margin-top:18px;font-size:13.5px;color:var(--muted);display:flex;gap:7px 18px;
  flex-wrap:wrap;align-items:center}
.trustline b{color:var(--ink2);font-weight:600}
.trustline .sep{color:var(--line);font-weight:400}

.err{margin-top:16px;background:#FFF1F4;color:#8E123A;border:1px solid #F6C9D6;
  border-radius:var(--r-sm);padding:12px 15px;font-size:14.5px;max-width:560px}
.ok-box{background:var(--acc-x);border:1px solid #BFE4EB;border-radius:var(--r-sm);
  padding:17px 19px;font-size:15.5px;color:#0A5A69}

/* ── hero product visual: the crawler verdict card ─────────────────────────── */
.showcase{position:relative}
.showcase .frame{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-l);overflow:hidden;transform:rotate(-.5deg)}
.showcase .frame .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;
  border-bottom:1px solid var(--line2);background:#FAFDFE}
.showcase .frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--line);
  display:block}
.showcase .frame .bar span{margin-left:8px;font:500 12px var(--mono);color:var(--faint)}
.showcase .frame .body{padding:20px 22px 22px}
.sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.sc-dom{font:600 14px var(--mono);color:var(--ink)}
.sc-grade{font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bad);background:#FFF1F4;border-radius:99px;padding:5px 11px}
.sc-score{display:flex;align-items:baseline;gap:9px;margin:14px 0 4px}
.sc-score b{font:400 56px/1 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.sc-score span{font-size:14px;color:var(--muted)}
.sc-mini{display:grid;gap:9px;margin:18px 0 4px}
.sc-mini div{display:grid;grid-template-columns:1fr 92px 34px;gap:11px;align-items:center;
  font-size:12.5px;color:var(--ink2)}
.sc-mini .t{height:7px;background:var(--line2);border-radius:5px;overflow:hidden}
.sc-mini .t i{display:block;height:100%;border-radius:5px;background:var(--acc)}
.sc-mini .t.low i{background:var(--bad)}
.sc-mini .t.mid i{background:var(--warn)}
.sc-mini em{font-style:normal;text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums}
.sc-crawl{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.sc-crawl .lbl{font:700 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:11px}
.sc-crawl .rows{display:grid;gap:7px}
.sc-crawl .row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font:500 12.5px var(--mono);color:var(--ink2)}
.pill{font:700 10.5px var(--sans);letter-spacing:.06em;padding:3px 9px;border-radius:99px;
  text-transform:uppercase}
.pill.pass{background:var(--acc-x);color:var(--acc-d)}
.pill.fail{background:#FFF1F4;color:var(--bad)}
.pill.na{background:var(--line2);color:var(--muted)}
.showcase .tagnote{position:absolute;right:-6px;bottom:-26px;font:italic 15px var(--serif);
  color:var(--muted);transform:rotate(-1.5deg)}
.showcase .tagnote::before{content:"↑ ";font-style:normal;color:var(--ember)}

/* ── stat strip (full-bleed, not cards) ────────────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--paper)}
.strip>div{padding:32px 30px;border-right:1px solid var(--line)}
.strip>div:last-child{border-right:0}
.strip .n{font:400 clamp(42px,5vw,62px)/1 var(--serif);letter-spacing:-.03em;
  color:var(--acc-d)}
.strip .l{font:700 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin:12px 0 9px}
.strip p{font-size:14.5px;color:var(--ink2);line-height:1.58}

/* ── asymmetric split ──────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.wide-left{grid-template-columns:1.25fr .75fr}
.split.wide-right{grid-template-columns:.8fr 1.2fr}
.split .aside{font-size:15.5px;color:var(--ink2);line-height:1.68}
.split .aside p+p{margin-top:16px}

/* pull-quote / statement */
.statement{font:400 clamp(23px,2.7vw,33px)/1.28 var(--serif);letter-spacing:-.015em;
  color:var(--ink);border-left:3px solid var(--ember);padding-left:26px;margin:6px 0}
.statement em{font-style:italic;color:var(--acc-d)}

/* ── weighted band diagram ─────────────────────────────────────────────────── */
.weights{display:flex;height:64px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--paper)}
.weights div{display:grid;place-items:center;color:#fff;font:700 13px var(--sans);
  border-right:1px solid rgba(255,255,255,.22);position:relative}
.weights div:last-child{border-right:0}
/* 🪤 opacity was .82 here — it blends the label into the band and drops every
   segment below WCAG. Contrast has to come from the colour, not from alpha. */
.weights div span{font-size:11px;font-weight:600;display:block;text-align:center}
.wkey{display:grid;gap:2px;margin-top:22px}
.wrow{display:grid;grid-template-columns:26px 1fr;gap:16px;padding:18px 4px;
  border-bottom:1px solid var(--line2);align-items:start}
.wrow:last-child{border-bottom:0}
.wrow .sw{width:14px;height:14px;border-radius:4px;margin-top:5px}
.wrow h3{font-size:17px;margin-bottom:4px}
.wrow h3 em{font-style:normal;font-weight:500;color:var(--muted);font-size:13px;
  margin-left:9px;letter-spacing:0}
.wrow p{font-size:15px;color:var(--ink2);line-height:1.6}

/* ── stepped rail ──────────────────────────────────────────────────────────── */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;
  margin-top:14px}
.rail::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:1.5px;
  background:linear-gradient(90deg,var(--acc-x),var(--acc-l),var(--acc-x))}
.rail>div{position:relative;padding:0 22px 0 0}
.rail .n{width:38px;height:38px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--acc-l);color:var(--acc-d);display:grid;place-items:center;
  font:700 15px var(--sans);position:relative;z-index:1;margin-bottom:18px}
.rail h3{font-size:18px;margin-bottom:7px}
.rail p{font-size:15px;color:var(--ink2);line-height:1.6}

/* ── dark punctuation band ─────────────────────────────────────────────────── */
.inkband{background:
   radial-gradient(700px 340px at 84% 0%, rgba(14,165,190,.30), transparent 64%),
   radial-gradient(520px 300px at 4% 104%, rgba(244,114,54,.18), transparent 66%),
   var(--deep);
  color:#fff;padding:76px 0}
.inkband h2,.inkband h3{color:#fff}
.inkband .lede{color:#C9C0DC}
.inkband .rules{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:36px;
  border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.09)}
.inkband .rules>div{background:rgba(255,255,255,.035);padding:26px 28px}
.inkband .rules h3{font-size:17.5px;margin-bottom:9px}
.inkband .rules h3::before{content:"—";color:var(--ember);margin-right:9px}
.inkband .rules p{font-size:14.5px;color:#B8AECD;line-height:1.62}

/* ── generic cards (used sparingly now) ────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:22px 24px}
.card h3{font-size:17px;margin-bottom:8px}
.card p{font-size:15px;color:var(--ink2);line-height:1.6}
.card .kicker{margin-bottom:9px}

/* ── sheets (interior pages) ───────────────────────────────────────────────── */
.sheet{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-s);margin:24px 0;overflow:hidden}
.sheet>.pad{padding:34px 36px}
.sheet.tinted{background:var(--tint);border-color:#E3D9F6}
.sec-title{font:700 11px var(--sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--acc-d);margin-bottom:12px}
h2.big{font:400 clamp(25px,3.2vw,36px)/1.14 var(--serif);letter-spacing:-.018em;
  margin-bottom:10px}
h3.mid{font-size:19px;margin-bottom:7px}

/* ── notes ─────────────────────────────────────────────────────────────────── */
.note{background:var(--acc-x);border:1px solid #BFE4EB;border-radius:var(--r-sm);
  padding:17px 19px;font-size:15px;color:#0A5A69;line-height:1.62}
.note b{color:var(--acc-d)}
.note+.note{margin-top:12px}
.note.ember{background:var(--ember-l);border-color:#FBD5C6;color:#7A3216}
.note.ember b{color:#B03D14}
.note.plain{background:var(--warm);border-color:#EFE6DE;color:var(--ink2)}

/* ── score result page ─────────────────────────────────────────────────────── */
.hero-score{display:flex;gap:42px;align-items:center;flex-wrap:wrap;margin-top:6px}
.verdict{flex:1 1 340px;min-width:280px}
.verdict .grade{font:700 12.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc-d)}
.verdict h2{font:400 clamp(23px,2.6vw,30px)/1.2 var(--serif);margin:10px 0}
.verdict p{font-size:15.5px;color:var(--ink2)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:99px;
  padding:6px 14px;font-size:13px;color:var(--ink2)}
.chip b{color:var(--ink);font-weight:700}

.cats{display:grid;gap:8px}
.cat{border:1px solid var(--line);border-radius:13px;background:var(--paper);overflow:hidden}
.cat>summary{list-style:none;cursor:pointer;padding:18px 20px;display:grid;
  grid-template-columns:1fr 160px 116px;gap:18px;align-items:center}
.cat>summary::-webkit-details-marker{display:none}
.cat>summary:hover{background:#FAFDFE}
.catrow{padding:15px 18px;display:grid;grid-template-columns:1fr 150px 62px;
  gap:16px;align-items:center}
.cat .nm{font-weight:650;font-size:16px;min-width:0}
.cat .nm small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:3px}
.bar{height:9px;background:var(--line2);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;background:var(--acc)}
.bar.weak i{background:var(--bad)}
.bar.mixed i{background:var(--warn)}
.cat .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:16px}
.cat .val small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.cat .body{padding:4px 20px 22px;border-top:1px solid var(--line2)}
.cat .body h3{font:700 11px var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--acc-d);margin:18px 0 6px}
.cat .body p{font-size:15px;color:var(--ink2);line-height:1.62}

.fix{border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:12px;
  padding:18px 20px;margin-bottom:12px;background:var(--paper)}
.fix.warn{border-left-color:var(--warn)}
.fix .top{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.fix h3{font-size:17px}
.fix .pts{font:700 13.5px var(--sans);color:var(--acc-d);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fix p{margin-top:9px;font-size:15px;color:var(--ink2);line-height:1.6}
.fix .todo{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:14.5px;color:var(--ink2)}
.fix .todo b{color:var(--acc-d);font:700 10.5px var(--sans);letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:5px}

.gate{background:
   radial-gradient(520px 240px at 92% -30%, rgba(14,165,190,.4), transparent 70%),
   var(--deep2);
  color:#fff;border-radius:14px;padding:30px 32px;margin-top:26px}
.gate h3{color:#fff;font:400 25px/1.2 var(--serif)}
.gate p{color:#C9C0DC;font-size:15px;margin-top:10px}
.gate form{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.gate form input{flex:1 1 280px;border-color:transparent}
.gate .fine{font-size:13px;color:#A79BC4;margin-top:14px}

/* ── pricing ───────────────────────────────────────────────────────────────── */
.toggle{display:inline-flex;background:var(--paper);border:1px solid var(--line);
  border-radius:99px;padding:4px;gap:3px;box-shadow:var(--shadow-s)}
.toggle a{padding:9px 20px;border-radius:99px;font:650 14px var(--sans);color:var(--muted)}
.toggle a:hover{text-decoration:none;color:var(--ink)}
.toggle a.on{background:var(--ink);color:#fff}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:18px;
  align-items:stretch}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px 28px;display:flex;flex-direction:column;position:relative}
.tier.featured{border:1.5px solid var(--acc);box-shadow:var(--shadow-m)}
.tier .badge{position:absolute;top:-11px;left:24px;background:var(--acc);color:#fff;
  font:700 10.5px var(--sans);letter-spacing:.11em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px}
.tier h3{font-size:19px}
.tier .price{margin:16px 0 3px;font:400 40px/1 var(--serif);letter-spacing:-.03em;
  color:var(--ink)}
.tier .price em{font:600 14px var(--sans);font-style:normal;color:var(--muted);
  margin-left:7px;letter-spacing:0}
.tier .peryear{font-size:12.5px;color:var(--muted);min-height:19px}
.tier .pitch{font-size:15px;color:var(--ink2);margin:16px 0 20px;line-height:1.55}
.tier ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px;flex:1 1 auto}
.tier li{font-size:14.5px;color:var(--ink2);padding-left:25px;position:relative;
  line-height:1.5}
.tier li::before{content:"";position:absolute;left:1px;top:7px;width:13px;height:7px;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(-45deg)}
.tier .limits{font-size:12.5px;color:var(--muted);margin-bottom:18px;padding-top:15px;
  border-top:1px solid var(--line2)}
.tier .limits div{padding-left:14px;position:relative}
.tier .limits div::before{content:"–";position:absolute;left:0}
.tier .note-line{font-size:12.5px;color:var(--warn);margin-top:11px;font-weight:500}

.lane-head{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.lane-tag{font:800 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:99px;background:var(--ink);color:#fff}
.lane-tag.human{background:var(--ember)}

/* Links inside body copy carry an underline, not just a colour — colour alone
   fails WCAG 1.4.1 for anyone who cannot distinguish it. */
.sheet a[href^="http"],.band a[href^="http"],.pad a[href^="http"]{
  text-decoration:underline;text-underline-offset:2px}
.sheet a.btn[href^="http"],.band a.btn[href^="http"]{text-decoration:none}

/* ── tables ────────────────────────────────────────────────────────────────── */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:580px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line2);
  vertical-align:top}
thead th{font:700 11px var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border-bottom:1.5px solid var(--line);white-space:nowrap}
tbody tr:hover{background:#FAFDFE}
td.c,th.c{text-align:center}
.yes{color:var(--acc);font-weight:800;font-size:16px}
.no{color:#C9C1D6}
.tag{display:inline-block;padding:4px 10px;border-radius:99px;font:700 11.5px var(--sans)}
.t-ok{background:var(--acc-x);color:var(--acc-d)}
.t-bad{background:#FFF1F4;color:var(--bad)}
.t-na{background:var(--line2);color:var(--muted)}
.t-warn{background:var(--ember-l);color:#B03D14}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:13px;overflow:hidden}
.faq details{background:var(--paper)}
.faq summary{cursor:pointer;padding:19px 22px;font:650 16.5px var(--sans);list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 22px var(--sans);color:var(--acc);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:#FAFDFE}
.faq .a{padding:0 22px 20px;font-size:15.5px;color:var(--ink2);line-height:1.66;
  max-width:78ch}

/* ── CTA ───────────────────────────────────────────────────────────────────── */
.cta-band{background:
   radial-gradient(620px 280px at 12% 0%, rgba(244,114,54,.26), transparent 62%),
   var(--deep2);
  color:#fff;border-radius:var(--r);padding:44px 40px;margin:30px 0;display:flex;
  gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{font:400 clamp(24px,2.8vw,32px)/1.16 var(--serif);color:#fff;max-width:20ch}
.cta-band p{color:#C9C0DC;margin-top:11px;font-size:15.5px;max-width:52ch}
.cta-band .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ── traffic dashboard ─────────────────────────────────────────────────────── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:20px 22px}
.stat .k{font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.stat .v{font:400 36px/1 var(--serif);color:var(--ink);margin-top:9px;
  font-variant-numeric:tabular-nums}
.stat .s{font-size:13px;color:var(--muted);margin-top:7px}
.spark{display:flex;align-items:flex-end;gap:3px;height:88px;margin-top:10px}
.spark i{flex:1 1 auto;background:var(--acc);border-radius:3px 3px 0 0;min-height:2px;
  display:block;opacity:.85}
.srclist{display:grid;gap:11px}
.srcrow{display:grid;grid-template-columns:1fr 140px 62px;gap:16px;align-items:center;
  font-size:15px}
.srcrow .lbl{font-weight:600}
.srcrow .lbl small{display:block;font-weight:400;color:var(--muted);font-size:13px}

pre.code{background:var(--deep);color:#E4DAFA;border-radius:var(--r-sm);padding:18px 20px;
  overflow-x:auto;font:13px/1.7 var(--mono);margin:0;white-space:pre-wrap;
  word-break:break-all}
pre.code.light{background:var(--acc-x);color:#0A5A69;border:1px solid #BFE4EB}

.steps{counter-reset:s;display:grid;gap:18px}
.step{display:grid;grid-template-columns:40px 1fr;gap:17px;align-items:start}
.step .n{counter-increment:s;width:34px;height:34px;border-radius:50%;
  background:var(--acc-x);color:var(--acc-d);display:grid;place-items:center;
  font:700 15px var(--sans)}
.step .n::before{content:counter(s)}
.step h3{font-size:17px;margin-bottom:5px}
.step p{font-size:15px;color:var(--ink2);line-height:1.6}

.empty{border:1.5px dashed var(--line);border-radius:13px;padding:32px;text-align:center;
  color:var(--muted);font-size:15px;background:var(--paper)}

/* ── waiting ───────────────────────────────────────────────────────────────── */
.dots{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--ember);
  margin-right:11px;vertical-align:middle;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.progress{height:6px;background:var(--line2);border-radius:4px;overflow:hidden;
  margin-top:26px;max-width:520px}
.progress i{display:block;height:100%;width:38%;border-radius:4px;
  background:linear-gradient(90deg,var(--acc),var(--ember));
  animation:slide 2.1s ease-in-out infinite}
@keyframes slide{0%{margin-left:-38%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){
  .dots,.progress i{animation:none}
  .progress i{width:100%;margin-left:0}
  html{scroll-behavior:auto}
}

/* ── footer ────────────────────────────────────────────────────────────────── */
footer.site{background:var(--deep);color:#AFC4CA;margin-top:0;padding:60px 0 38px;
  font-size:14.5px}
footer.site .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px}
footer.site .fcol{color:#fff;font:700 11px var(--sans);letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 15px}
footer.site .brandline{font:400 24px var(--serif);color:#fff;margin-bottom:14px;
  display:block}
footer.site a{color:#BDD3D8;display:block;padding:5px 0}
footer.site a:hover{color:#fff}
footer.site .about{max-width:46ch;line-height:1.65}
footer.site .about a{display:inline;color:var(--acc-l);font-weight:600}
footer.site .base{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .hero-split{grid-template-columns:1fr;gap:44px}
  .showcase .frame{transform:none}
  .showcase .tagnote{position:static;display:block;margin-top:16px;transform:none}
  .split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;gap:34px}
  .inkband .rules{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  footer.site .about{grid-column:1/-1}
}
@media (max-width:820px){
  .strip{grid-template-columns:1fr}
  .strip>div{border-right:0;border-bottom:1px solid var(--line)}
  .strip>div:last-child{border-bottom:0}
  .rail{grid-template-columns:1fr;gap:26px}
  .rail::before{display:none}
  .rail>div{padding-right:0}
}
@media (max-width:720px){
  body{font-size:16px}
  section.band{padding:52px 0}
  .topbar .wrap{height:auto;padding-top:11px;padding-bottom:11px;flex-wrap:wrap}
  .navlinks{order:3;width:100%;border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
  .navlinks a{padding:7px 10px;font-size:13.5px}
  .navcta{margin-left:auto}
  .hero{padding:44px 0 48px}
  .sheet>.pad{padding:26px 22px}
  .weights{height:auto;flex-direction:column}
  .weights div{padding:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.22)}
  .cat>summary{grid-template-columns:1fr 84px;gap:12px}
  .cat>summary .bar{grid-column:1/-1;order:3}
  /* same treatment for the score-guide row: the meter drops to its own line
     rather than squeezing the label out of the card */
  .catrow{grid-template-columns:1fr 62px;gap:12px}
  .catrow .bar{grid-column:1/-1;order:3}
  .srcrow{grid-template-columns:1fr 58px}
  .srcrow .bar{grid-column:1/-1;order:3}
  .cta-band{padding:30px 24px}
  .tier{padding:24px 20px}
  .statement{padding-left:18px}
}
@media (max-width:520px){
  footer.site .cols{grid-template-columns:1fr}
}
@media print{
  .topbar,footer.site,.cta-band,.gate{display:none}
  .sheet{box-shadow:none;break-inside:avoid}
  body{background:#fff}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hero showcase slider — CSS only, no JavaScript.

   Deliberate: this product's whole argument is that JavaScript-only pages are
   invisible to AI crawlers, so the hero cannot depend on a JS carousel library.
   Radio inputs drive manual paging; the autoplay layer is switched off the moment
   a person takes control, via :has(). Every slide's content is real markup, so it
   is readable to a crawler and to a screen reader whether or not it is on screen.

   🪤 Aman's Mac runs "Reduce motion" — under that setting the autoplay is disabled
   entirely and slide one shows with the dots as the only way through. A ticker that
   silently freezes into a blank panel has happened here before.
   ───────────────────────────────────────────────────────────────────────────── */

.showcase{position:relative}
.showcase>input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.deck{display:grid}
.slide{grid-area:1/1;opacity:0;transition:opacity .45s ease;min-width:0}
/* default: first slide visible, so a failed animation can never blank the hero */
.showcase:not(:has(>input:checked)) .s1{opacity:1}
/* autoplay, only while nobody has taken manual control */
.showcase:not(:has(>input:checked)) .slide{animation:deckcyc 16.5s infinite backwards}
.showcase:not(:has(>input:checked)) .s2{animation-delay:5.5s}
.showcase:not(:has(>input:checked)) .s3{animation-delay:11s}
@keyframes deckcyc{
  0%{opacity:0} 2%{opacity:1} 31%{opacity:1} 34%{opacity:0} 100%{opacity:0}
}
#sl1:checked~.deck .s1,#sl2:checked~.deck .s2,#sl3:checked~.deck .s3{opacity:1;z-index:2}

.deck-nav{display:flex;gap:9px;align-items:center;margin-top:22px;justify-content:center}
.deck-nav label{cursor:pointer;display:flex;align-items:center;gap:8px;padding:7px 13px;
  border-radius:99px;border:1px solid var(--line);background:var(--paper);
  font:600 12.5px var(--sans);color:var(--muted);transition:.16s}
.deck-nav label:hover{border-color:var(--acc-l);color:var(--ink)}
.deck-nav label i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
#sl1:checked~.deck-nav label[for=sl1],
#sl2:checked~.deck-nav label[for=sl2],
#sl3:checked~.deck-nav label[for=sl3]{border-color:var(--acc);color:var(--acc-d);
  background:var(--acc-x)}
#sl1:checked~.deck-nav label[for=sl1] i,
#sl2:checked~.deck-nav label[for=sl2] i,
#sl3:checked~.deck-nav label[for=sl3] i{background:var(--acc)}
.showcase:not(:has(>input:checked)) .deck-nav label[for=sl1] i{background:var(--acc)}

@media (prefers-reduced-motion:reduce){
  .showcase:not(:has(>input:checked)) .slide{animation:none}
  .showcase:not(:has(>input:checked)) .s1{opacity:1}
  .slide{transition:none}
}

/* crawler matrix slide */
.matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.mchip{border:1px solid var(--line);border-radius:8px;padding:8px 9px;background:#FAFDFE;
  font:600 10.5px var(--mono);color:var(--ink2);display:flex;flex-direction:column;gap:5px;
  line-height:1.2;overflow:hidden}
.mchip u{text-decoration:none;font:700 9px var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--acc-d)}
.mchip.bad{background:#FFF6F8;border-color:#F6D4DE}
.mchip.bad u{color:var(--bad)}
.mchip.na{background:var(--bg);border-color:var(--line2)}
.mchip.na u{color:var(--faint)}

/* traffic slide */
.tspark{display:flex;align-items:flex-end;gap:4px;height:78px;margin:14px 0 4px}
.tspark i{flex:1;background:var(--acc);border-radius:3px 3px 0 0;display:block;
  min-height:3px;opacity:.86}
.tspark i.hot{background:var(--ember)}
.tsrc{display:grid;gap:8px;margin-top:14px}
.tsrc div{display:grid;grid-template-columns:1fr 74px 30px;gap:10px;align-items:center;
  font-size:12.5px;color:var(--ink2)}
.tsrc .t{height:6px;background:var(--line2);border-radius:4px;overflow:hidden}
.tsrc .t i{display:block;height:100%;background:var(--acc);border-radius:4px}
.tsrc em{font-style:normal;text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ── engine coverage ───────────────────────────────────────────────────────── */
.enginebar{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;align-items:center}
.enginebar span{font:600 13px var(--sans);color:var(--ink2);background:var(--paper);
  border:1px solid var(--line);border-radius:99px;padding:6px 13px;box-shadow:var(--shadow-s)}
.enginebar span.more{background:transparent;border-style:dashed;color:var(--muted);
  box-shadow:none;font-weight:500}

.ownergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px}
.owner{background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:18px 20px}
.owner h3{font-size:16px;display:flex;justify-content:space-between;gap:10px;
  align-items:baseline}
.owner h3 em{font-style:normal;font:700 11px var(--sans);letter-spacing:.1em;
  color:var(--acc-d);white-space:nowrap}
.owner ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px}
.owner li{font:500 12.5px var(--mono);color:var(--ink2);display:flex;
  justify-content:space-between;gap:8px}
.owner li i{font-style:normal;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.owner li i.crit{color:var(--bad)}

/* ═════════════════════════════════════════════════════════════════════════════
   HOMEPAGE DEEP HERO  +  MOTION SYSTEM
   Added 2026-08-25. `.hero.small` (13 interior pages) is untouched — the dark
   treatment is opt-in via `.hero.deep`, used only by the homepage.

   🔒 THE ONE RULE THAT MAKES THIS SAFE:
   base CSS is always the FINAL, VISIBLE state. Every keyframe animates FROM a
   hidden start TO that same final state. So if an animation never runs — reduced
   motion, an old engine, a CSS parse error — the page is simply the finished
   page. Nothing can blank out. (A hero ticker has silently frozen here before.)

   🎬 Motion is a MEASUREMENT GESTURE, never decoration. Three primitives only:
     1. PROBE SWEEP  — a scan line crosses the answer panel and each row resolves
                       as it passes. This is literally what the engine does.
     2. VIEW REVEAL  — native CSS scroll-driven `animation-timeline: view()`.
                       No JavaScript, no IntersectionObserver, no library.
     3. SCROLL FILL  — meters fill in proportion to scroll. Measurement made visible.
   ═════════════════════════════════════════════════════════════════════════════ */


/* ── palette tokens for the deep surfaces ──────────────────────────────────────
   RGB triplets (not hex) because every translucent layer here needs rgba().
   A theme = override this block and nothing else. See BRAND-THEMES.md. */
:root{
  --onDark:#EEF9FB; --onDarkMute:#96B2B8; --lineDark:rgba(var(--mute-rgb),.22);
  --deep-rgb:11,42,49;        /* the dark anchor            */
  --mute-rgb:150,178,184;     /* muted text / hairlines     */
  --acc-rgb:14,165,190;       /* primary accent             */
  --accL-rgb:56,206,226;     /* primary accent, lightened  */
  --emb-rgb:244,114,54;        /* secondary accent           */
  --acc-deep:#0B4F5C;         /* accent, darkened (logo)    */
  --h1-quiet:#9DC2CA;         /* headline, de-emphasised    */
  --onDark-lede:#C2DCE1;
  --onDark-chip:#D6ECF0;
  --onDark-chip2:#C8E3E8;
  --onDark-faint:#7C9AA1;
  --emb-text:#FFDCCB; --emb-text2:#FFBB9C;
}

/* ── the dark band ─────────────────────────────────────────────────────────── */
.hero.deep{background:var(--deep);color:var(--onDark);padding:66px 0 68px;
  border-bottom:1px solid var(--deep3);margin-top:-66px}
.hero.deep::after{display:none}
.hero.deep .wrap{position:relative;z-index:2;padding-top:44px}
.hero.deep .glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(var(--acc-rgb),.30), transparent 60%),
    radial-gradient(700px 380px at 92% 8%, rgba(var(--emb-rgb),.14), transparent 62%)}
/* the measurement grid — the product is an instrument, so the ground is graph paper */
.hero.deep .grid{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--lineDark) 1px,transparent 1px),
                   linear-gradient(90deg,var(--lineDark) 1px,transparent 1px);
  background-size:100% 84px, 84px 100%;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 72%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 72%)}

.hero.deep .pill{display:inline-block;font:400 12.5px/1.55 var(--sans);letter-spacing:.02em;
  color:var(--onDarkMute);background:rgba(var(--mute-rgb),.09);border:1px solid var(--lineDark);
  padding:7px 15px;border-radius:999px;margin:0 0 26px;max-width:100%}
.hero.deep .pill b{color:var(--onDark);font-weight:600}
.hero.deep .pill .dot{display:inline-block;vertical-align:middle;width:6px;height:6px;
  border-radius:50%;background:var(--acc-l);margin:-2px 8px 0 0}

.deepsplit{display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:start}

.hero.deep h1{font:400 clamp(38px,4.5vw,63px)/1.08 var(--serif);letter-spacing:-.012em;
  margin:0 0 20px;max-width:none;color:var(--onDark);text-wrap:balance}
.hero.deep h1 .q{color:var(--h1-quiet)}
.hero.deep h1 em{font-style:italic;color:#fff;white-space:nowrap;padding-bottom:.06em;
  border-bottom:3px solid var(--acc)}
.hero.deep .lede{font-size:18.5px;line-height:1.62;color:var(--onDark-lede);margin:0 0 12px;
  max-width:52ch}
.hero.deep .lede b{font-weight:600;color:#fff;box-shadow:none}

.metrics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.metrics .m{display:inline-flex;align-items:center;gap:7px;font:500 13px var(--sans);
  border:1px solid var(--lineDark);background:rgba(var(--mute-rgb),.07);
  padding:5px 11px;border-radius:8px;color:var(--onDark-chip)}
.metrics .m i{width:7px;height:7px;border-radius:2px;background:var(--acc-l)}
.metrics .m.on i{background:var(--ember)}

.hero.deep form.check{margin-top:0;max-width:530px}
.hero.deep form.check input{font:15px var(--mono);color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(var(--mute-rgb),.35);
  border-radius:12px;padding:16px 18px;box-shadow:none}
.hero.deep form.check input::placeholder{color:var(--onDark-faint)}
.hero.deep form.check input:focus{border-color:var(--acc-l);
  background:rgba(255,255,255,.10);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.22)}
.hero.deep form.check .btn{border-radius:12px;padding:16px 24px}

.underform{margin:14px 0 0;font-size:13.5px;color:var(--onDarkMute)}
.underform b{color:var(--onDark-chip2);font-weight:600}
.tries{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;
  max-width:560px;font-size:13px;color:var(--onDarkMute)}
.tries a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--lineDark);
  background:rgba(var(--mute-rgb),.07);padding:5px 11px;border-radius:999px;color:var(--onDark-chip);
  font-size:12.5px;transition:border-color .16s,background .16s,transform .16s}
.tries a:hover{border-color:var(--acc-l);background:rgba(var(--acc-rgb),.16);
  text-decoration:none;transform:translateY(-1px)}
.tries .fav{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;
  font:600 9px var(--sans);color:#fff;background:var(--acc-deep)}

/* ── the proof panel: an AI answer with you missing ────────────────────────── */
.panel{position:relative;overflow:hidden;background:rgba(255,255,255,.045);
  border:1px solid var(--lineDark);border-radius:18px;padding:22px 22px 18px;
  backdrop-filter:blur(3px)}
.panel .head{display:flex;align-items:center;gap:9px;font:500 12.5px var(--mono);
  color:var(--onDarkMute);padding-bottom:14px;border-bottom:1px solid var(--lineDark)}
.panel .head .eng{margin-left:auto;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase}
.panel .ask{font:400 17px/1.5 var(--serif);color:#fff;margin:16px 0 4px}
.panel .ask span{color:var(--acc-l)}
.panel .asknote{font-size:12px;color:var(--onDarkMute);margin:0 0 16px}
.panel .rows{display:grid;gap:8px;margin:0 0 16px}
.panel .row{display:flex;align-items:center;gap:12px;font-size:14px;
  border:1px solid var(--lineDark);border-radius:10px;padding:11px 13px;color:var(--onDark-chip2)}
.panel .row .n{font:500 12px var(--mono);color:var(--onDarkMute);width:16px}
.panel .row .meter{flex:1;height:6px;border-radius:3px;background:rgba(var(--mute-rgb),.18);
  overflow:hidden}
.panel .row .meter i{display:block;height:100%;border-radius:3px;background:var(--acc-l);
  transform-origin:left center}
.panel .row.you{border-color:rgba(var(--emb-rgb),.55);background:rgba(var(--emb-rgb),.10);
  color:var(--emb-text)}
.panel .row.you .meter i{background:var(--ember)}
.panel .row .tag{font:500 11px var(--mono);letter-spacing:.03em;color:var(--onDarkMute)}
.panel .row.you .tag{color:var(--emb-text2)}
.panel .pstat{border-top:1px solid var(--lineDark);padding-top:15px;display:flex;gap:22px}
.panel .pstat div{flex:1}
.panel .pstat b{display:block;font:600 30px/1 var(--sans);letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums;margin-bottom:6px}
.panel .pstat b.bad{color:#E45F20}
.panel .pstat span{font-size:12.3px;color:var(--onDarkMute);line-height:1.45;display:block}
.panel .measured{margin:12px 0 0;font-size:11.8px;color:var(--onDark-faint);line-height:1.5}

/* ── homepage nav sits ON the dark band ────────────────────────────────────── */
body.home .topbar{background:rgba(var(--deep-rgb),.86);border-bottom-color:rgba(var(--mute-rgb),.16)}
body.home .topbar .logo{color:var(--onDark)}
body.home .navlinks a{color:var(--onDarkMute)}
body.home .navlinks a:hover,body.home .navlinks a.on{color:#fff;
  background:rgba(var(--mute-rgb),.14)}

/* ═════ MOTION ════════════════════════════════════════════════════════════════
   Everything below is additive. Delete this whole block and the site still works,
   it just stops moving. ────────────────────────────────────────────────────── */

/* 1 ── PROBE SWEEP: the scan line crosses the panel once, and every row resolves
       as it passes. Delays are ordered so "Your site" lands LAST — the punch. */
.panel::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(var(--accL-rgb),.85) 18%,
             rgba(var(--emb-rgb),.8) 82%,transparent);
  animation:probe 1.45s cubic-bezier(.55,.05,.35,1) .25s both}
@keyframes probe{
  0%{transform:translateY(0);opacity:0}
  6%{opacity:1}
  88%{opacity:1}
  100%{transform:translateY(var(--panelH,430px));opacity:0}
}
.panel .row{animation:rowin .5s cubic-bezier(.2,.72,.28,1) both}
.panel .row:nth-child(1){animation-delay:.30s}
.panel .row:nth-child(2){animation-delay:.48s}
.panel .row:nth-child(3){animation-delay:.66s}
.panel .row:nth-child(4){animation-delay:.92s}
@keyframes rowin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
/* bars grow AFTER their row has landed — scaleX, so the inline width stays truth */
.panel .row .meter i{animation:fillx .7s cubic-bezier(.16,.84,.3,1) both}
.panel .row:nth-child(1) .meter i{animation-delay:.44s}
.panel .row:nth-child(2) .meter i{animation-delay:.62s}
.panel .row:nth-child(3) .meter i{animation-delay:.80s}
.panel .row:nth-child(4) .meter i{animation-delay:1.06s}
@keyframes fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the one row that matters gets a single ember pulse, once, then never again */
.panel .row.you{animation:rowin .5s cubic-bezier(.2,.72,.28,1) 0.92s both,
                          youpulse 1.4s ease-out 1.30s 1}
@keyframes youpulse{
  0%{box-shadow:0 0 0 0 rgba(var(--emb-rgb),.42)}
  100%{box-shadow:0 0 0 16px rgba(var(--emb-rgb),0)}
}
/* the two headline numbers arrive after the answer has finished resolving */
.panel .pstat b{animation:statin .5s cubic-bezier(.2,.72,.28,1) 1.35s both}
.panel .pstat div:nth-child(2) b{animation-delay:1.5s}
@keyframes statin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the graph-paper ground drifts one cell per 48s. Barely visible on purpose —
   it should read as "still running", never as a moving background. */
.hero.deep .grid{animation:drift 48s linear infinite}
@keyframes drift{from{background-position:0 0,0 0}to{background-position:0 84px,84px 0}}

/* 2 ── VIEW REVEAL: native scroll-driven, zero JavaScript.
       Base state is visible; where the browser supports a view timeline it
       replays the entrance tied to scroll position. Unsupported = just visible. */
@supports (animation-timeline:view()){
  .rise{animation:rise linear both;animation-timeline:view();
        animation-range:entry 2% cover 22%}
  .rise-d{animation:rise linear both;animation-timeline:view();
          animation-range:entry 8% cover 30%}
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* 3 ── SCROLL FILL: meters fill in proportion to scroll as they enter view.
       Used on the weighted band diagram and the deck's mini score bars. */
@supports (animation-timeline:view()){
  .fillbar{animation:fillx linear both;animation-timeline:view();
           animation-range:entry 12% cover 40%;transform-origin:left center}
  /* clip-path, not scaleX — scaling a bar that contains labels squashes the text */
  .wipe{animation:wipe linear both;animation-timeline:view();
        animation-range:entry 14% cover 44%}
}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* nav backdrop resolves as you leave the hero. Base = solid (safe fallback). */
@supports (animation-timeline:scroll()){
  body.home .topbar{animation:navreveal linear both;animation-timeline:scroll(root);
                    animation-range:0 190px}
}
@keyframes navreveal{
  from{background:rgba(var(--deep-rgb),0);border-bottom-color:transparent}
  to{background:rgba(var(--deep-rgb),.86);border-bottom-color:rgba(var(--mute-rgb),.16)}
}

/* ── the reduced-motion gate ───────────────────────────────────────────────────
   Aman's Mac runs "Reduce motion" permanently, so the default path here is the
   one HE sees: everything static, in final state. `?motion=on` adds .motion-force
   for preview. Never make .motion-force the default. */
@media (prefers-reduced-motion:reduce){
  body:not(.motion-force) .panel::after,
  body:not(.motion-force) .panel .row,
  body:not(.motion-force) .panel .row.you,
  body:not(.motion-force) .panel .row .meter i,
  body:not(.motion-force) .panel .pstat b,
  body:not(.motion-force) .hero.deep .grid,
  body:not(.motion-force) .rise,
  body:not(.motion-force) .rise-d,
  body:not(.motion-force) .fillbar,
  body:not(.motion-force) .wipe,
  body:not(.motion-force) .topbar{animation:none}
  body:not(.motion-force) .tries a{transition:none}
}

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width:940px){
  .deepsplit{grid-template-columns:1fr;gap:38px}
  .hero.deep .wrap{padding-top:34px}
  .hero.deep form.check{max-width:none}
  .hero.deep form.check .btn{width:100%}
}
@media (max-width:620px){
  .hero.deep .pill .sm-hide{display:none}
  .hero.deep{padding-bottom:52px}
  .panel{padding:18px 16px 16px}
  .panel .pstat{gap:14px}
  .panel .pstat b{font-size:26px}
}

/* ═════════════════════════════════════════════════════════════════════════════
   LIGHT HERO — the default from 2026-08-25.
   Aman: "thoda light colour use karo · trendy banu · vibe achi aaye" — and this
   is the SECOND time the dark treatment came back as too heavy, so light is the
   default now, not a variant. The dark plum survives as `?theme=dark` for
   side-by-side only.

   Accent pair is unchanged (violet var(--acc) + ember #F47236) — that is NamedRank's
   registered lane in BRAND-THEMES.md, and only the surface changed, so no new
   lane is being claimed and no other product is stepped on.
   ═════════════════════════════════════════════════════════════════════════════ */

.hero.deep{
  background:
    /* soft mesh — three low-opacity blooms, no hard gradient banding */
    radial-gradient(1100px 520px at 12% -18%, rgba(var(--acc-rgb),.16), transparent 62%),
    radial-gradient(820px 460px at 96% -6%, rgba(var(--emb-rgb),.11), transparent 60%),
    radial-gradient(700px 600px at 62% 108%, rgba(var(--acc-rgb),.09), transparent 62%),
    linear-gradient(176deg,#FBFEFE 0%, #F1F8FA 58%, #EDF6F8 100%);
  color:var(--ink);border-bottom:1px solid var(--line)}
/* graph paper flips to dark-on-light, and much fainter */
.hero.deep .grid{opacity:.55;
  background-image:linear-gradient(rgba(var(--acc-rgb),.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(var(--acc-rgb),.09) 1px,transparent 1px)}
.hero.deep .glow{display:none}

.hero.deep .pill{color:var(--ink2);background:rgba(255,255,255,.72);
  border-color:var(--line);box-shadow:var(--shadow-s);backdrop-filter:blur(6px)}
.hero.deep .pill b{color:var(--ink)}
.hero.deep .pill .dot{background:var(--acc)}

.hero.deep h1{color:var(--ink)}
.hero.deep h1 .q{color:#4B4162}
.hero.deep h1 em{color:var(--acc-d);border-bottom-color:var(--ember)}
.hero.deep .lede{color:var(--ink2)}
.hero.deep .lede b{color:var(--ink);
  box-shadow:inset 0 -.5em 0 rgba(var(--acc-rgb),.16)}

.metrics .m{color:var(--ink2);background:rgba(255,255,255,.8);
  border-color:var(--line);box-shadow:var(--shadow-s)}
.metrics .m i{background:var(--acc)}
.metrics .m.on i{background:var(--ember)}

.hero.deep form.check input{color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);box-shadow:var(--shadow-s)}
.hero.deep form.check input::placeholder{color:var(--faint)}
.hero.deep form.check input:focus{border-color:var(--acc);
  background:var(--paper);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.15)}

.underform{color:var(--muted)}
.underform b{color:var(--ink2)}
.tries{color:var(--muted)}
.tries a{color:var(--ink2);background:var(--paper);
  border-color:var(--line);box-shadow:var(--shadow-s)}
.tries a:hover{border-color:var(--acc);background:var(--acc-x);
  color:var(--acc-d)}
.tries .fav{background:var(--acc)}

/* the proof panel becomes a real product card — white, lifted, crisp */
.panel{background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow-l);backdrop-filter:none}
.panel .head{color:var(--muted);border-bottom-color:var(--line2)}
.panel .ask{color:var(--ink)}
.panel .ask span{color:var(--acc-d)}
.panel .asknote{color:var(--muted)}
.panel .row{color:var(--ink2);border-color:var(--line);
  background:var(--bg)}
.panel .row .n{color:var(--faint)}
.panel .row .meter{background:var(--line2)}
.panel .row .meter i{background:var(--acc)}
.panel .row .tag{color:var(--faint)}
.panel .row.you{color:#8A2B0C;border-color:rgba(var(--emb-rgb),.42);
  background:var(--ember-l)}
.panel .row.you .meter{background:rgba(var(--emb-rgb),.18)}
.panel .row.you .tag{color:#B4400F}
.panel .pstat{border-top-color:var(--line2)}
.panel .pstat b{color:var(--ink)}
.panel .pstat b.bad{color:#E45F20}
.panel .pstat span{color:var(--muted)}
.panel .measured{color:var(--faint)}
/* the scan line needs to read on white */
.panel::after{
  background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.9) 18%,
             rgba(var(--emb-rgb),.85) 82%,transparent)}

/* topbar goes back to light glass on the homepage */
body.home .topbar{background:rgba(247,251,252,.82);
  border-bottom-color:var(--line)}
body.home .topbar .logo{color:var(--ink)}
body.home .navlinks a{color:var(--ink2)}
body.home .navlinks a:hover,
body.home .navlinks a.on{color:#085966;background:var(--acc-x)}
@supports (animation-timeline:scroll()){
  body.home .topbar{animation:navrevealL linear both;
    animation-timeline:scroll(root);animation-range:0 190px}
}
@keyframes navrevealL{
  from{background:rgba(247,251,252,0);border-bottom-color:transparent}
  to{background:rgba(247,251,252,.82);border-bottom-color:var(--line)}
}
@media (prefers-reduced-motion:reduce){
  body:not(.motion-force) .topbar{animation:none}
}

/* ── proof bar — the content the first fold gave up, kept but de-emphasised ─── */
.proofbar{background:var(--paper);border-bottom:1px solid var(--line);padding:24px 0}
.pb{display:grid;grid-template-columns:1fr auto;gap:26px 40px;align-items:center}
.pb-measured{margin:0;font-size:13px;line-height:1.55;color:var(--muted);max-width:46ch}
.pb-measured b{color:var(--ink2);font-weight:600}
.pb-side{display:grid;gap:10px;justify-items:end}
.proofbar .metrics{margin:0;justify-content:flex-end}
.proofbar .metrics .m{font-size:12px;padding:4px 9px;box-shadow:none;background:var(--bg)}
.proofbar .tries{margin:0;justify-content:flex-end;font-size:12.5px}
.proofbar .tries a{font-size:12px;padding:4px 9px;box-shadow:none}
@media (max-width:820px){
  .pb{grid-template-columns:1fr}
  .pb-side{justify-items:start}
  .proofbar .metrics,.proofbar .tries{justify-content:flex-start}
}

/* the locked tagline — always set with the name, never on its own */
.tag-lock{margin:2px 0 10px;font:400 15px/1.35 var(--serif);color:var(--acc-l);
  font-style:italic}

/* callback CTA on the report — warm, but it sits after the findings, not before */
.callback{background:linear-gradient(180deg,var(--ember-l) 0%,var(--paper) 70%)}
/* lighter weight-bands take ink type — white fails contrast from the third step on */
.weights div.onlight,.weights div.onlight span{color:var(--deep)}