/* Layout: Swiss grid, Trust & Authority + Conversion pattern (UI/UX Pro Max).
   Hero pairs the thesis with a live-looking evidence record, then proof, solution, pricing, trust, low-friction form.
   Palette: audit-trail navy + one blue for actions only; green/red/amber are semantic (valid / differs / placeholder). */
:root {
  --bg:#f6f8fb; --surface:#ffffff; --sunken:#eef2f7;
  --ink:#0f172a; --ink-soft:#475569; --ink-mute:#5b6b80;
  --rule:#e2e8f0; --rule-strong:#cbd5e1;
  --navy:#14243d; --on-navy:#e8eef7; --on-navy-soft:#a9b8cc;
  --cta:#1d4ed8; --cta-hover:#1e40af; --on-cta:#ffffff; --ring:#1d4ed8;
  --ok:#15803d; --ok-bg:#ecf8f0; --ok-line:#b7e1c4;
  --bad:#b91c1c; --bad-bg:#fdeeee; --bad-line:#f2c0c0;
  --hold:#92400e; --hold-bg:#fef6e4; --hold-line:#f1d29a;
  --sans:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"Fira Code","SF Mono",Menlo,Consolas,monospace;
  --r:6px;
  color-scheme:light;
}

* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--ring); outline-offset:3px; border-radius:2px; }
.wrap { max-width:1160px; margin:0 auto; padding-inline:20px; }
.label { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; }
.ico { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lockup { display:block; height:22px; width:auto; color:var(--ink); --stop:var(--cta); }

/* nav */
nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule); }
nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a:not(.btn) { font-size:15px; color:var(--ink-soft); padding-block:10px; transition:color .2s; }
.nav-links a:not(.btn):hover { color:var(--ink); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; border-radius:var(--r); font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:background-color .2s, border-color .2s, color .2s; }
.btn .ico { width:16px; height:16px; transition:transform .2s; }
.btn:hover .ico { transform:translateX(2px); }
.btn-cta { background:var(--cta); color:var(--on-cta); }
.btn-cta:hover { background:var(--cta-hover); }
.btn-quiet { border-color:var(--rule-strong); color:var(--ink); background:var(--surface); }
.btn-quiet:hover { border-color:var(--ink-soft); }
.btn-sm { min-height:40px; padding:0 16px; font-size:14px; }

/* hero */
.hero { padding-block:72px 56px; }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:56px; align-items:center; }
.hero-copy { min-width:0; }
h1 { font-size:clamp(42px,5.6vw,72px); line-height:1.02; letter-spacing:-.035em; font-weight:700; text-wrap:balance; margin-bottom:22px; }
.sub { font-size:19px; color:var(--ink-soft); max-width:46ch; margin-bottom:32px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.micro { margin-top:18px; display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--mono); font-size:12.5px; color:var(--ink-mute); }
.micro span { display:inline-flex; align-items:center; gap:6px; }
.micro .ico { width:14px; height:14px; color:var(--ok); }

/* evidence record */
.record { background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:0 1px 2px rgb(15 23 42 / .05), 0 12px 32px -12px rgb(15 23 42 / .18); min-width:0; overflow:hidden; }
.rec-id { font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.rec-id b { color:var(--ink); font-weight:500; }
.pill { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; font-weight:500; padding:4px 10px; border-radius:999px; border:1px solid; white-space:nowrap; }
.pill .ico { width:13px; height:13px; }
.pill.bad { color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line); }
.rec-body { padding:6px 18px 16px; }
.tbl { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; min-width:420px; }
th { text-align:left; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; padding:10px 8px 8px 0; border-bottom:1px solid var(--rule); }
td { padding:9px 8px 9px 0; border-bottom:1px solid var(--rule); color:var(--ink-soft); vertical-align:top; }
td:first-child { color:var(--ink); font-weight:500; }
td.m { width:26px; padding-right:0; }
td.m .ico { width:15px; height:15px; color:var(--ok); margin-top:3px; }
tr.diff td { background:var(--bad-bg); }
tr.diff td.m .ico { color:var(--bad); }
tr.diff td:last-child { color:var(--bad); font-weight:600; }
tr.diff td:first-child { padding-left:0; }

/* stat strip */
.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--rule); border-radius:10px; background:var(--surface); overflow:hidden; }
.stat { padding:22px 24px; border-right:1px solid var(--rule); min-width:0; }
.stat:last-child { border-right:0; }
.stat .n { display:block; font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat p { font-size:14.5px; color:var(--ink-soft); margin-top:4px; }

/* sections */
section.band { padding-block:88px 0; }
.head { max-width:62ch; margin-bottom:36px; }
.head .label { display:block; margin-bottom:12px; color:var(--cta); }
h2 { font-size:clamp(30px,3.6vw,44px); line-height:1.1; letter-spacing:-.028em; font-weight:700; text-wrap:balance; }
.head p { font-size:18px; color:var(--ink-soft); margin-top:14px; max-width:56ch; }
h3 { font-size:20px; line-height:1.3; letter-spacing:-.015em; font-weight:600; text-wrap:balance; }

/* pilot deliverables */
.gets-cta { margin-top:28px; }

/* trust */
.trust { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.trust > div { padding:24px; border:1px solid var(--rule); border-radius:10px; background:var(--surface); min-width:0; }
.trust .badge { width:40px; height:40px; border-radius:8px; display:grid; place-items:center; background:var(--sunken); color:var(--cta); margin-bottom:16px; }
.trust h3 { font-size:17px; margin-bottom:6px; }
.trust p { font-size:14.5px; color:var(--ink-soft); }

/* closing band with form */
.close { margin-top:96px; background:var(--navy); color:var(--on-navy); padding-block:80px; }
.close .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:56px; align-items:center; }
.close .label { color:var(--on-navy-soft); display:block; margin-bottom:14px; }
.close h2 { color:var(--on-navy); }
.close .sub { color:var(--on-navy-soft); margin-top:16px; margin-bottom:0; }
form { background:var(--surface); color:var(--ink); border-radius:10px; padding:28px; display:grid; gap:18px; min-width:0; }
form .btn { justify-content:center; width:100%; }

/* footer */
footer { background:var(--bg); padding-block:40px; border-top:1px solid var(--rule); }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; font-size:14px; color:var(--ink-soft); }
footer .tag { margin-top:12px; max-width:44ch; }
footer .links { display:flex; flex-wrap:wrap; gap:4px 22px; align-content:flex-start; }
footer .links a { padding-block:8px; transition:color .2s; }
footer .links a:hover { color:var(--ink); }

/* v3: annotation pins on the evidence record */
.pin { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--cta); color:var(--on-cta); font-family:var(--mono); font-size:11px; font-weight:500; line-height:1; flex:none; vertical-align:middle; margin-left:4px; }
th .pin { margin-top:-3px; }

/* v3: how-it-works panels */
.tag { font-family:var(--mono); font-size:11.5px; padding:3px 8px; border-radius:4px; background:var(--sunken); color:var(--ink-soft); border:1px solid var(--rule); }

/* v3: pilot timeline and deliverables */
.timeline { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative; margin-bottom:28px; }
.timeline::before { content:""; position:absolute; top:9px; left:9px; right:0; height:2px; background:linear-gradient(90deg, var(--cta), var(--rule-strong)); }
.timeline li { position:relative; padding-top:34px; padding-right:12px; min-width:0; }
.timeline li::before { content:""; position:absolute; top:0; left:0; width:20px; height:20px; border-radius:50%; background:var(--surface); border:2px solid var(--cta); box-sizing:border-box; }
.timeline li:last-child::before { background:var(--cta); }
.timeline b { display:block; font-size:18px; font-weight:600; }
.timeline span { font-family:var(--mono); font-size:12.5px; color:var(--ink-mute); }
.files { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }

@media (max-width:980px) {
  .hero .wrap, .close .wrap { grid-template-columns:minmax(0,1fr); gap:40px; }
  .trust { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .nav-links a:not(.btn) { display:none; }
  .hero { padding-block:48px 40px; }
  .stats { grid-template-columns:minmax(0,1fr); }
  .stat { border-right:0; border-bottom:1px solid var(--rule); }
  .stat:last-child { border-bottom:0; }
  section.band { padding-block:64px 0; }
}
@media (max-width:560px) {
  .trust { grid-template-columns:minmax(0,1fr); }
}
/* v3: review screen, recreated from the QA console layout with example data */
.st { grid-row:span 2; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:700; margin-top:1px; }
.st.ok { color:var(--ok); background:var(--ok-bg); }
.st.bad { color:var(--bad); background:var(--bad-bg); }
.c-act { font-size:13px; font-weight:600; padding:6px 10px; border-radius:6px; border:1px solid var(--rule-strong); color:var(--ink-soft); display:inline-flex; gap:6px; align-items:center; }
.c-act.agree { border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok); }
.c-act.flag { border-color:var(--hold-line); background:var(--hold-bg); color:var(--hold); }
.c-act kbd { font-family:var(--mono); font-size:10.5px; font-weight:500; opacity:.75; }
.caps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:22px; }
.caps li { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; min-width:0; }
.caps .pin { margin:2px 0 0; width:24px; height:24px; font-size:12px; }
.caps p { font-size:15px; color:var(--ink-soft); }
.caps b { display:block; color:var(--ink); font-size:17px; font-weight:600; }
@media (max-width:720px) { .caps { grid-template-columns:minmax(0,1fr); }
}

/* v3: one visual language. Every product visual is a raised UI panel like the review screen */
.ui { background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgb(15 23 42 / .05), 0 16px 40px -18px rgb(15 23 42 / .22); }
.ui-bar { display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--rule); background:var(--sunken); font-size:13px; font-weight:600; color:var(--ink); }
.ui-bar .ico { width:15px; height:15px; color:var(--cta); }

.files { align-items:start; }
.deliv { display:flex; flex-direction:column; gap:14px; min-width:0; }
.deliv > p { font-size:15px; color:var(--ink-soft); }
.deliv > p b { display:block; color:var(--ink); font-size:17px; font-weight:600; }
.u-rows { display:flex; flex-direction:column; min-height:176px; }
.u-rows > div { display:flex; align-items:center; gap:10px; padding:7px 14px; border-bottom:1px solid var(--rule); font-size:13px; color:var(--ink); min-width:0; }
.u-rows > div:last-child { border-bottom:0; }
.u-rows .st { grid-row:auto; flex:none; }
.u-rows span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-rows em { font-style:normal; font-size:12px; color:var(--ink-mute); white-space:nowrap; }
.u-rows .x { background:var(--bad-bg); }
.u-rows .x em { color:var(--bad); font-weight:600; }
.u-agree { min-height:176px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; text-align:center; }
.u-agree small { font-size:12px; color:var(--ink-mute); }
.stats.ui { border-radius:12px; }
.trust-ui > div { border-radius:12px; box-shadow:0 1px 2px rgb(15 23 42 / .05), 0 16px 40px -18px rgb(15 23 42 / .22); }
.trust-ui .badge { background:var(--ok-bg); color:var(--ok); }

/* v3: hero record in the shared panel style */
.record.ui .ui-bar .rec-id { margin-left:auto; min-width:0; font-family:var(--mono); font-size:12px; font-weight:400; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.record .rec-body { padding:6px 18px 18px; }
.record td.m { width:28px; text-align:right; padding-right:0; }
.mk { font-style:normal; font-weight:700; font-size:14px; }
.mk.y { color:var(--ok); } .mk.n { color:var(--bad); }

/* hero record v2: verdict first, one readable screenshot, fits the fold */
.hero { padding-block:56px 48px; }
.hero .wrap { align-items:start; }
.hero-copy { padding-top:40px; }
.rec-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 18px; background:var(--bad-bg); border-bottom:1px solid var(--bad-line); }
.verdict { display:inline-flex; align-items:center; gap:8px; color:var(--bad); font-weight:600; font-size:15px; }
.verdict .st { background:var(--surface); grid-row:auto; }
.rec-top .rec-id { margin-left:auto; min-width:0; font-family:var(--mono); font-size:12px; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.record .rec-body { padding:4px 18px 16px; }
.record td, .record th { padding-block:7px; }
.rec-meta { margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--ink-mute); }
.rec-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 16px; padding:12px 18px; border-top:1px solid var(--rule); font-size:13px; color:var(--ink-soft); }
.rf-ev { display:inline-flex; align-items:center; gap:8px; }
.rf-ev .play { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--surface); }
.rf-ev .play .ico { width:10px; height:10px; fill:currentColor; }
@media (max-width:980px) { .hero-copy { padding-top:0; }
}

/* hero record v3 fixes: marked value, cell padding, plain type for labels, review badge */
.record .rec-body { padding-inline:8px; }
.record th, .record td { padding-inline:10px; }
.record td.m { padding-right:10px; }
.record th { font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--ink-mute); }
.record tr.diff td:nth-child(3) { color:var(--bad); font-weight:700; }
.record tr.diff td:first-child { padding-left:10px; }
.rec-top .rec-id { font-family:var(--sans); font-size:13px; }
.rec-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:12px 10px 0; font-family:var(--sans); font-size:13px; color:var(--ink-soft); }
.rec-meta time { font-family:var(--mono); font-size:12.5px; color:var(--ink); }
.rev { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok); font-weight:600; }
.rev .ico { width:14px; height:14px; }
.rf-ev .ico { width:15px; height:15px; color:var(--ink-mute); }
.micro { font-family:var(--sans); font-size:14px; }
/* hero example tabs: the visitor switches, nothing rotates on its own */
.hero-vis { display:flex; flex-direction:column; gap:12px; min-width:0; }
.ex-tabs { display:flex; gap:4px; padding:4px; background:var(--sunken); border:1px solid var(--rule); border-radius:10px; align-self:flex-start; max-width:100%; overflow-x:auto; }
.ex-tabs button { font:inherit; font-size:14px; font-weight:500; color:var(--ink-soft); background:none; border:0; border-radius:7px; padding:7px 14px; min-height:36px; cursor:pointer; white-space:nowrap; transition:background-color .2s, color .2s; }
.ex-tabs button:hover { color:var(--ink); }
.ex-tabs button[aria-selected="true"] { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgb(15 23 42 / .08), 0 0 0 1px var(--rule); }

/* hero fixes, round 4: labelled tabs, tighter focus ring, screenshot hides on short screens */
.ex-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ex-label { font-size:13px; font-weight:600; color:var(--ink-mute); }
.ex-tabs { align-self:auto; }
.ex-tabs button:focus-visible { outline:2px solid var(--ring); outline-offset:-2px; border-radius:7px; }

/* hero round 5: an always-visible evidence thumbnail, tabs as wide as the panel */
.rec-foot { justify-content:flex-start; gap:14px; }
.ev-thumb { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:7px 9px; border:1px solid var(--rule); border-radius:6px; background:var(--surface); box-shadow:0 1px 2px rgb(15 23 42 / .06); font-size:10px; line-height:1.2; flex:none; }
.ev-thumb b { color:var(--cta); font-size:10.5px; white-space:nowrap; }
.ev-thumb .l { display:block; width:72px; height:4px; border-radius:2px; background:var(--rule); }
.ev-thumb .hl { color:var(--bad); font-weight:600; background:var(--bad-bg); outline:1px solid var(--bad); outline-offset:1px; border-radius:2px; padding:1px 4px; white-space:nowrap; }
.ev-thumb { height:54px; justify-content:center; }
.ev-thumb.shoe-t { flex-direction:row; align-items:center; gap:8px; }
.ev-thumb .shoe { width:48px; height:auto; display:block; outline:1px solid var(--bad); outline-offset:2px; border-radius:2px; }
.ex-head { width:100%; flex-wrap:nowrap; }
.ex-tabs { flex:1; min-width:0; }
.ex-tabs button { flex:1; }
@media (max-width:560px) { .ex-label { display:none; } .ex-tabs button { padding-inline:8px; font-size:13px; }
}

/* restructure: plain labels everywhere, pricing inside the pilot, labelled tab row */
.label { font-family:var(--sans); font-size:14px; letter-spacing:0; text-transform:none; font-weight:600; }
.timeline span { font-family:var(--sans); font-size:13.5px; }
.pill { font-family:var(--sans); }
.ex-head { flex-wrap:wrap; gap:8px; }
.ex-label { flex-basis:100%; }
.close-act { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.close-act p { color:var(--on-navy-soft); font-size:15px; }
.close-act p a { color:var(--on-navy); text-decoration:underline; text-underline-offset:3px; }
.btn-lg { min-height:52px; padding:0 26px; font-size:16px; }
footer .tag { font-family:var(--sans); font-size:14px; padding:0; background:none; border:0; color:var(--ink-soft); margin-top:12px; }
footer nav.links { position:static; background:none; backdrop-filter:none; border:0; }
footer .copy { margin-top:6px; font-size:13px; color:var(--ink-mute); }

/* hero: missing-record example */
.record tr.miss td:nth-child(2) { color:var(--ink-mute); }
.mk.none { color:var(--ink-mute); font-style:normal; }

/* trust: two cards, neutral icons (green means "matches" elsewhere) */
.trust-ui .badge { background:var(--sunken); color:var(--cta); }

/* pilot: results live in the web app */
.files-cap { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink-soft); margin-bottom:14px; }
.files-cap .ico { width:16px; height:16px; color:var(--cta); }
.ev-list .ico { width:15px; height:15px; color:var(--ink-mute); flex:none; }

/* pilot: one line on what follows it */
.gets-cta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.after-note { font-size:15px; color:var(--ink-soft); }
.after-note b { color:var(--ink); font-weight:600; }

/* pilot timeline: steps are hand-offs, the five days sit on the line between 2 and 3 */
.timeline { padding-top:30px; margin-bottom:36px; }
.timeline::before { top:39px; left:10px; right:auto; width:calc(200% / 3); background:var(--rule-strong); }
.timeline li { padding-top:34px; padding-right:20px; }
.timeline li:nth-child(2)::after { content:""; position:absolute; top:8px; left:20px; right:0; height:4px; border-radius:2px; background:var(--cta); }
.timeline span { display:block; margin-top:4px; color:var(--ink-soft); }
.timeline .tl-dur { position:absolute; top:-28px; left:20px; right:0; text-align:center; font-style:normal; font-size:13.5px; font-weight:600; color:var(--cta); white-space:nowrap; }
@media (max-width:720px) {
  .timeline { grid-template-columns:minmax(0,1fr); padding-top:0; gap:22px; }
  .timeline::before { display:none; }
  .timeline li:first-child::after { content:""; position:absolute; top:22px; bottom:-22px; left:9px; width:2px; background:var(--rule-strong); }
  .timeline li { padding:0 0 0 36px; }
  .timeline li::before { top:2px; }
  .timeline li:nth-child(2) { padding-bottom:30px; }
  .timeline li:nth-child(2)::after { top:22px; bottom:-24px; left:8px; right:auto; width:4px; height:auto; }
  .timeline .tl-dur { position:static; display:block; margin-top:8px; text-align:left; white-space:normal; }
}

/* motion: the hero check plays once per example; tabs crossfade. Final state is the resting state:
   no JS or prefers-reduced-motion shows it immediately. Opacity and transform only, plus one tint. */
.mk { display:inline-block; }
@keyframes rowon { from { opacity:.35; } to { opacity:1; } }
@keyframes tickin { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:none; } }
@keyframes tint { from { background-color:transparent; } }
@keyframes valred { from { color:var(--ink-soft); } }
@keyframes rise { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes panelin { from { opacity:0; } to { opacity:1; } }
.record.play tbody tr { animation:rowon .25s ease-out both; }
.record.play tbody .mk { animation:tickin .25s cubic-bezier(.2,.8,.3,1.3) both; }
.record.play tbody tr:nth-child(1), .record.play tbody tr:nth-child(1) .mk { animation-delay:.15s; }
.record.play tbody tr:nth-child(2), .record.play tbody tr:nth-child(2) .mk { animation-delay:.35s; }
.record.play tbody tr:nth-child(3), .record.play tbody tr:nth-child(3) .mk { animation-delay:.55s; }
.record.play tbody tr:nth-child(4), .record.play tbody tr:nth-child(4) .mk { animation-delay:.75s; }
.record.play tbody tr:nth-child(5), .record.play tbody tr:nth-child(5) .mk { animation-delay:.95s; }
.record.play tbody tr.diff td { animation:tint .3s ease-out .95s both; }
.record.play tbody tr.diff td:nth-child(3) { animation:tint .3s ease-out .95s both, valred .3s ease-out .95s both; }
.record.play .rec-top { animation:rise .3s ease-out 1.15s both; }
.record.play .rev { animation:rise .3s ease-out 1.35s both; }
.record.fade { animation:panelin .15s ease-out both; }
@media (prefers-reduced-motion: reduce) { .record.play *, .record.play, .record.fade { animation:none !important; }
}

/* how a check works, simplified: the site's page (step 1) beside the comparison and the reviewer (steps 2, 3) */
.how { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.how .pin { margin:0; width:24px; height:24px; font-size:12px; position:absolute; top:-12px; right:-12px; box-shadow:0 0 0 3px var(--surface); }
.how-site { display:flex; flex-direction:column; overflow:visible; }
.how-url { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--rule); background:var(--sunken); border-radius:12px 12px 0 0; font-size:13px; color:var(--ink-mute); }
.how-url i { width:8px; height:8px; border-radius:50%; background:var(--rule-strong); flex:none; }
.how-url span { margin-left:8px; flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:3px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft); }
.how-url time { font-family:var(--mono); font-size:12px; white-space:nowrap; }
.how-page { position:relative; flex:1; padding:22px; display:flex; flex-direction:column; gap:14px; }
.how-search { display:flex; align-items:center; gap:10px; max-width:360px; border:1.5px solid var(--cta); border-radius:8px; padding:10px 14px; background:var(--bg); font-size:15px; }
.how-search .ico { width:16px; height:16px; color:var(--ink-mute); }
.how-card { display:flex; flex-direction:column; gap:3px; padding:16px 18px; border:1px solid var(--rule); border-radius:8px; font-size:15px; color:var(--ink-soft); }
.how-card b { color:var(--cta); font-size:16px; margin-bottom:2px; }
.how-hl { align-self:flex-start; margin-top:6px; color:var(--bad); font-weight:600; background:var(--bad-bg); outline:1.5px solid var(--bad); outline-offset:2px; border-radius:4px; padding:2px 8px; }
.how-check { display:flex; flex-direction:column; overflow:visible; }
.how-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--rule); background:var(--sunken); border-radius:12px 12px 0 0; }
.how-head b { font-size:16px; }
.how-fields { position:relative; margin:16px 18px 0; border:1px solid var(--rule); border-radius:8px; font-size:15px; }
.how-fields div { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--rule); }
.how-fields div:last-of-type { border-bottom:0; }
.how-fields i { font-style:normal; font-weight:700; }
.how-fields i.y { color:var(--ok); } .how-fields i.n { color:var(--bad); }
.how-fields .x { background:var(--bad-bg); border-radius:0 0 7px 7px; }
.how-fields small { display:block; font-size:13px; color:var(--bad); font-weight:600; }
.how-review { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 18px 18px; padding:12px 14px; border:1px dashed var(--rule-strong); border-radius:8px; }
.how-who { display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; margin-right:auto; }
.how-who .ico { width:16px; height:16px; color:var(--cta); }
.how-review .c-act { font-size:14px; padding:7px 14px; }
.how-more { display:flex; flex-direction:column; gap:8px; padding:4px 18px 0; }
.how-more i { height:8px; border-radius:4px; background:var(--rule); width:62%; }
.how-more i + i { width:44%; }
@media (max-width:820px) { .how { grid-template-columns:minmax(0,1fr); } .how-url time { display:none; }
}

/* accuracy: passed records confirmed by human re-checks, blended across customers (measured 100%, shown as 99.9%+); update data-metric values together */
.u-rate { font-size:44px; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ok); font-variant-numeric:tabular-nums; }
.u-rate-label { font-size:13.5px; font-weight:600; color:var(--ink); max-width:32ch; }
.u-agree small { font-size:12px; color:var(--ink-mute); }
.how-proof { display:flex; align-items:flex-start; gap:10px; margin-top:24px; padding:14px 18px; border:1px solid var(--ok-line); background:var(--ok-bg); border-radius:10px; font-size:15px; color:var(--ink-soft); max-width:820px; }
.how-proof b { color:var(--ink); }
.how-proof .st { grid-row:auto; flex:none; background:var(--surface); margin-top:2px; }
@media (max-width:820px) { .files { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; }
}

/* hero at mid and phone widths: evidence text wraps beside its thumbnail; four tabs sit in a 2 x 2 grid when one row would overflow */
.rec-foot { flex-wrap:nowrap; }
.rf-ev { flex:1; min-width:0; }
@media (min-width:981px) and (max-width:1240px), (max-width:600px) {
  .ex-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .ex-tabs button { white-space:normal; }
}
/* trust: three cards */
.trust.trust-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:820px) { .trust.trust-3 { grid-template-columns:minmax(0,1fr); }
}
/* faq: native disclosure, works without JavaScript */
.faq { max-width:820px; border-top:1px solid var(--rule); }
.faq details { border-bottom:1px solid var(--rule); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-size:17px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:22px; font-weight:400; color:var(--ink-mute); flex:none; transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq summary:focus-visible { outline:2px solid var(--ring); outline-offset:4px; border-radius:4px; }
.faq details p { padding:0 0 18px; max-width:68ch; color:var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition:none; }
}

/* contact and privacy pages */
.doc-page { padding-block:64px 88px; }
.doc-hero { margin-bottom:40px; }
.doc-hero .label { display:block; color:var(--cta); margin-bottom:12px; }
.doc-hero h1 { font-size:clamp(36px,4.6vw,56px); margin-bottom:14px; }
.doc-hero .sub { margin-bottom:0; }
.updated { font-family:var(--mono); font-size:12.5px; color:var(--ink-mute); }
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.contact-body { padding:22px 24px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; color:var(--ink-soft); }
.contact-body a:not(.btn) { color:var(--cta); }
.contact-body .addr { font-size:20px; font-weight:600; }
.doc-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:48px; align-items:start; }
.doc-toc { position:sticky; top:calc(env(safe-area-inset-top,0px) + 88px); display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--rule); }
.doc-toc a { padding:6px 14px; font-size:14px; color:var(--ink-soft); margin-left:-1px; border-left:2px solid transparent; transition:color .2s, border-color .2s; }
.doc-toc a:hover { color:var(--ink); border-left-color:var(--cta); }
.doc-content { max-width:68ch; display:grid; gap:36px; }
.doc-content section { scroll-margin-top:88px; }
.doc-content h2 { font-size:24px; margin-bottom:12px; }
.doc-content p, .doc-content li { color:var(--ink-soft); }
.doc-content p + p { margin-top:12px; }
.doc-content ul { padding-left:20px; display:grid; gap:10px; }
.doc-content strong { color:var(--ink); }
.doc-content a { color:var(--cta); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:820px) {
  .contact-grid, .doc-layout { grid-template-columns:minmax(0,1fr); }
  .doc-toc { position:static; flex-direction:row; flex-wrap:wrap; border-left:0; gap:4px 8px; }
  .doc-toc a { padding:4px 0; border-left:0; margin:0; }
}