/* GRADE site — S-5 design language (black/white/grey + one gold accent).
   Contrast fixed vs the generated mock: --muted #8a8f98 -> #656a73 (>=4.5:1), gold text uses --goldink,
   comparison marks darkened. Verified AA in the contrast sweep. */
:root{
  --ink:#14171c; --white:#fff;
  --paper:#f6f5f2; --line:#ecebe6; --line2:#e3e1db;
  --muted:#656a73;               /* was #8a8f98 (3.25:1) -> now ~5:1 on white, ~4.9 on paper */
  --gold:#E8B23A;                /* gold accent — fills/icons + brand emphasis (recommend, measured, checks) */
  --goldink:#8a6410;             /* gold used AS text (>=5:1 on white) */
  --blue:#1B3FA0;                /* royal-blue accent — interactive: links, active nav, focus (>=9:1 on white) */
  --navy:#12234f;                /* deep navy — dark section grounds (#about + #contact) + footer family */
  --tint:#eef1f9;                /* soft cool-blue tint — the alternating light band (AA: --muted ~4.8:1) */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
/* P0-4 overflow guard (belt-and-suspenders): never let a stray wide child scroll the page sideways. */
html,body{overflow-x:hidden}
img,table,pre{max-width:100%}
body{font-family:var(--font);color:var(--ink);background:var(--white);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:10px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:20}

/* header — DARK navy ground: the top bookend that mirrors the dark footer. Reversed (light)
   logo + light nav. The sticky bar stays near-solid navy (rgba .94 + blur) so it reads dark and
   legible while scrolling over the lighter sections beneath it. The 3px blue bottom rule mirrors
   the footer's 3px blue top rule, so both bookends carry the same edge. Navy #12234f = the
   --navy dark-ground token shared with the #about / #contact bands. */
header.site{border-bottom:3px solid var(--blue);position:sticky;top:0;background:rgba(18,35,79,.94);backdrop-filter:blur(8px);z-index:10}
.bar{display:flex;align-items:center;gap:20px;height:56px}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:.14em;font-size:13px;text-decoration:none}
.brand .dot{width:9px;height:9px;border-radius:2px;background:var(--gold)}
.nav{margin-left:auto;display:flex;gap:22px;font-size:13px;color:#cdd6ea}
.nav a{text-decoration:none}.nav a:hover{color:#fff}.nav a.on{color:var(--gold);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}
.nav a.cta{color:var(--gold);font-weight:600}
/* FIX 8 — phone header = a Sign in link + a hamburger that opens a drawer of all
   links. These controls are hidden on desktop; the inline `.nav` above is the
   desktop nav and stays exactly as-is. Injected markup lives in s5.js. */
.navm{display:none;margin-left:auto;align-items:center;gap:10px}
.navm-signin{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:13px;color:#cdd6ea;text-decoration:none}
.navm-signin:hover{color:#fff}
.navm-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:9px;background:transparent;cursor:pointer}
.navm-bars{position:relative;display:block;width:18px;height:12px}
.navm-bars span{position:absolute;left:0;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.navm-bars span:nth-child(1){top:0}
.navm-bars span:nth-child(2){top:5px}
.navm-bars span:nth-child(3){top:10px}
.navm-toggle[aria-expanded="true"] .navm-bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.navm-toggle[aria-expanded="true"] .navm-bars span:nth-child(2){opacity:0}
.navm-toggle[aria-expanded="true"] .navm-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.navm-panel{display:none}
@media(max-width:720px){
  .nav{display:none}
  .navm{display:flex}
  /* drawer drops from the bottom edge of the sticky bar (header is positioned). Dark navy to
     stay coherent with the dark header: light links, translucent dividers, gold active/CTA. */
  .navm-panel:not([hidden]){display:block;position:absolute;left:0;right:0;top:100%;background:#12234f;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(6,12,30,.35)}
  .navm-panel nav{display:flex;flex-direction:column;padding:4px 0}
  .navm-panel a{display:flex;align-items:center;min-height:52px;padding:0 24px;font-size:15px;color:#e7ecf6;text-decoration:none;border-top:1px solid rgba(255,255,255,.08)}
  .navm-panel a:first-child{border-top:none}
  .navm-panel a:hover{background:rgba(255,255,255,.06)}
  .navm-panel a.on{color:var(--gold);font-weight:600;box-shadow:inset 3px 0 0 var(--gold)}
  .navm-panel a.cta{color:var(--gold);font-weight:700}
}

/* hero + page headers */
.hero{padding:40px 0 30px;border-bottom:1px solid var(--line)}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
h1{font-size:40px;line-height:1.08;letter-spacing:-.02em;margin:0 0 12px;font-weight:680;max-width:16ch}
.sub{color:var(--muted);font-size:16px;margin:0 0 26px;max-width:56ch}
.sub b{color:var(--ink);font-weight:600}
/* FIX 7 — inner-page header. `.pagehead` is placed ON the SAME element as `.wrap`
   (class="pagehead wrap"); both are single-class selectors, so the one declared
   LATER wins the `padding` shorthand. When `.pagehead` used the shorthand
   (padding:44px 0 8px) it clobbered `.wrap`'s horizontal padding:0 24px -> 0,
   so inner-page headers ran edge-to-edge on phones. Setting only the vertical
   sides here lets `.wrap` keep owning the 24px side padding. The homepage never
   hit this because its hero nests `.hero > .wrap` (two elements, no collision). */
.pagehead{padding-top:44px;padding-bottom:8px}
.pagehead h1{max-width:20ch}

/* live paste hero */
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:860px){.hgrid{grid-template-columns:1fr}h1{font-size:32px}
  /* mobile hero: the result is NOT a second stacked panel — it reveals in place after "Screen it",
     so the headline + paste box hold the value prop above the fold on a phone. */
  .hero .result{display:none}
  .hero.revealed .result{display:block}
}
.panel{border:1px solid var(--line2);border-radius:14px;background:var(--white)}
.panel.paste{padding:16px}
.frame{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 12px}
.frame b{color:var(--ink)}
.lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
textarea{width:100%;min-height:88px;resize:vertical;border:1px solid var(--line2);border-radius:10px;padding:12px;font-family:var(--font);font-size:14px;color:var(--ink);background:var(--paper);line-height:1.45}
textarea:focus{outline:2px solid var(--blue);outline-offset:1px;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chip{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:6px 11px;font-size:12.5px;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--blue)}
.run{margin-top:13px;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:none;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font)}
.run .ar{color:var(--gold)}.run:hover{background:#000}.run[disabled]{opacity:.55;cursor:default}
.hint{margin-left:10px;font-size:12px;color:var(--muted)}
.result{overflow:hidden;min-height:150px}
.rhead{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line);background:var(--paper);border-radius:14px 14px 0 0}
.rhead .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--goldink);font-weight:600}
.live i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
.rbody{padding:14px 15px}
.mini{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{border:1px solid var(--line2);background:var(--paper);border-radius:6px;padding:4px 9px;font-size:12px;font-family:var(--mono);color:var(--ink)}
.rec{border:1px solid var(--line2);border-left:3px solid var(--gold);border-radius:9px;padding:12px 13px;margin-top:14px;background:#fff}
.rec .nm{font-weight:650;font-size:15px}
.rec .tag{float:right;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#3a2c07;font-weight:800;background:var(--gold);padding:3px 9px;border-radius:999px}
.receipt{display:flex;gap:8px;align-items:baseline;margin-top:8px;font-size:12.5px}
.receipt .q{font-family:var(--mono);color:var(--ink)}
.receipt .src{color:var(--muted);font-size:11px}
.tick{color:var(--gold);flex:0 0 auto}
.nomatch{border:1px solid var(--line2);border-left:3px solid var(--ink);border-radius:9px;padding:12px 13px;margin-top:14px;background:var(--paper);font-size:13px;line-height:1.5}
.nomatch b{color:var(--ink)}
.recon{display:flex;gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
.recon b{font-weight:700}.recon .g{color:var(--muted)}
.loading{color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:8px}
.spin{width:12px;height:12px;border:2px solid var(--line2);border-top-color:var(--gold);border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* generic sections */
section{padding:44px 0;border-bottom:1px solid var(--line)}
section.last{border-bottom:none}
/* Inner pages keep a simple alternating rhythm. Homepage grounds are set explicitly below. */
main > section:nth-of-type(even){background:var(--paper)}
.band-grey{background:#f1f2f4}

/* #7 — palette distributed the WHOLE way down. Grounds alternate white / soft cool-tint / navy so
   every section reads as its own, and the blue is present as a SYSTEM (cool tint bands, two navy
   grounds, blue eyebrow tick, blue links + footer rule) rather than one dark box at the very bottom.
   Gold stays the single PRIMARY accent (CTA, checks, recommend, measured highlight). Homepage IDs are
   scoped under .home so inner pages are untouched; .home #id (id+class) outranks the nth-of-type band.
   Sequence: hero(white) how(tint) compare(white) pricing(tint) about(NAVY) blog(white) faq(tint)
   contact(NAVY) + the blue-topped dark footer. */
.home #how,.home #pricing,.home #faq{background:var(--tint)}
.home #compare,.home #blog{background:var(--white)}
.home #about,.home #contact{background:var(--navy)}

/* Shared reversed-text treatment for the navy grounds (#about + #contact). */
.section-dark{border-bottom:none}
.section-dark h2{color:#fff}
.section-dark .oneline{color:#eef1f8}
.section-dark .oneline b{color:var(--gold)}
.section-dark .eyebrow{color:#9fb0d8}

/* Anchor-scroll: smooth, with the sticky header offset so a section top is never covered. */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:70px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
/* Blue eyebrow tick — the recurring blue system element, present in every homepage section from top
   to bottom. On a navy ground the tick turns gold so it reads against the dark. */
.home .eyebrow::before{content:"";display:inline-block;width:18px;height:2px;margin-right:9px;vertical-align:middle;background:var(--blue);border-radius:2px}
.home .section-dark .eyebrow::before{background:var(--gold)}
h2{font-size:24px;letter-spacing:-.01em;margin:0 0 6px;font-weight:660}
h3{font-size:17px;margin:0 0 4px;font-weight:640}
p{margin:0 0 12px}
.oneline{font-size:19px;color:var(--ink);margin:0;max-width:62ch}
.oneline b{color:var(--goldink)}
.more{margin-top:16px}
.more a{color:var(--blue);font-weight:600;text-decoration:none;font-size:14px}
.more a:hover{text-decoration:underline}
.lede{color:var(--muted);font-size:16px;max-width:64ch}
.lede b{color:var(--ink)}

/* what/how band + steps */
.band{display:grid;grid-template-columns:1fr 1.4fr;gap:34px;align-items:start}
@media(max-width:860px){.band{grid-template-columns:1fr;gap:26px}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:560px){.steps{grid-template-columns:1fr 1fr}}
.step{border:1px solid var(--line2);border-radius:11px;padding:13px}
.step .n{font-family:var(--mono);font-size:11px;color:var(--goldink);font-weight:700}
.step .s{font-weight:650;margin:5px 0 3px;font-size:15px}
.step .d{font-size:12.5px;color:var(--muted);line-height:1.4}

/* pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
@media(max-width:760px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--line2);border-radius:13px;padding:18px}
.tier.mid{border-color:var(--ink)}
.tier .nm{font-weight:680;font-size:16px}
.tier .mark{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#3a2c07;font-weight:800;float:right;background:var(--gold);padding:3px 9px;border-radius:999px}
.tier .d{color:var(--muted);font-size:13.5px;margin-top:8px;min-height:38px}
.tier .feat{font-size:12.5px;color:var(--ink);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.tier ul{margin:10px 0 0;padding:0;list-style:none}
.tier li{font-size:12.5px;padding-left:16px;position:relative;margin:6px 0;color:var(--ink)}
.tier li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* comparison matrix */
.matrix{width:100%;border-collapse:collapse;margin-top:4px;font-size:14px}
.matrix th,.matrix td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}
.matrix thead th{font-size:12px;letter-spacing:.05em;color:var(--muted);font-weight:600;text-align:center;vertical-align:bottom}
.matrix thead th.rowh{text-align:left}
.matrix thead th.gcol{color:var(--ink)}
.matrix thead th.gcol .cap{display:inline-block;border-bottom:2px solid var(--gold);padding-bottom:4px;font-weight:700}
.matrix td.rowh{font-weight:600;color:var(--ink);width:34%}
.matrix td.cell{text-align:center}
.matrix col.g{background:#fdf8ec}
.mk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%}
.mk.yes{background:var(--gold)}
.mk.no{background:var(--paper);border:1px solid var(--line2)}
.mk.part{background:#fff;border:1px solid var(--line2)}
.mk svg{display:block}
.measured{margin-top:14px;font-size:13px;color:var(--muted)}
.measured b{color:var(--ink)}.measured .hl{color:var(--goldink);font-weight:700;background:rgba(232,178,58,.22);padding:1px 6px;border-radius:5px}
@media(max-width:640px){
  .matrix thead th:not(.rowh){font-size:0}
  .matrix thead th:not(.rowh)::after{content:attr(data-abbr);font-size:11px}
  .matrix th,.matrix td{padding:10px 4px}
  .matrix td.rowh{font-size:12.5px;width:40%}
}

/* FAQ */
.faq dt{font-weight:640;font-size:16px;margin-top:22px}
.faq dd{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:70ch}
.faq dd b{color:var(--ink)}.faq dd a{color:var(--blue);font-weight:600;text-decoration:none}

/* prose (about + legal/policy pages) */
.prose p{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:66ch}
.prose p b{color:var(--ink)}
.prose p a,.prose li a{color:var(--blue);font-weight:600;text-decoration:none}
.prose p a:hover,.prose li a:hover{text-decoration:underline}
.prose h2{margin-top:30px;font-size:20px}
.prose ul{margin:10px 0 16px;padding-left:0;list-style:none;max-width:70ch}
.prose li{position:relative;padding-left:20px;margin:8px 0;color:var(--muted);font-size:15.5px;line-height:1.6}
.prose li::before{content:"";position:absolute;left:3px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.prose li b{color:var(--ink)}
.mono{font-family:var(--mono)}

/* buttons + contact */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:#241a05;border:none;border-radius:10px;padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;font-family:var(--font)}
.btn:hover{filter:brightness(1.04)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);font-weight:600}
.email{color:var(--muted);font-size:14px}
.email a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue);font-weight:600}
.cta-space{height:10px}

/* #4 contact form — sits on the navy #contact band. White inputs, gold submit, single column at 390. */
.cform{max-width:600px;margin-top:6px;display:grid;gap:14px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cgrid{grid-template-columns:1fr}}
.cfield{display:flex;flex-direction:column;gap:6px}
.cfield label{font-size:12px;letter-spacing:.03em;color:#cdd6ea;font-weight:600}
.cfield .opt{font-weight:400;color:#9fb0d8}
.cform input,.cform textarea{width:100%;max-width:100%;border:1px solid #34477a;border-radius:10px;padding:12px;font-family:var(--font);font-size:16px;color:var(--ink);background:#fff;line-height:1.4;min-height:44px}
.cform textarea{min-height:96px;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.cform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:2px}
.cform-note{color:#b9c4dd;font-size:13px}
.cform-note a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);font-weight:600}
.cform-err{display:none;color:#ffd7c2;font-size:13px;margin:2px 0 0}
/* Confirmation state — replaces the form in place. No mailto, no navigation. */
.cform-ok{display:none;max-width:600px;margin:6px 0 0}
.cform-ok-h{display:flex;align-items:center;gap:10px;color:#fff;font-weight:660;font-size:19px;margin:0 0 8px}
.cform-ok-h .dotok{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none}
.cform-ok-s{color:#cdd6ea;font-size:14.5px;line-height:1.6;margin:0;max-width:58ch}

/* #8 footer — the B2B "grouped columns + legal bar" pattern (the Stripe / Linear family): a brand
   block and labeled nav groups on top, a divider, then a legal utility row (copyright left, the
   compliance links Security/Privacy/Terms/Status right). Dark ground with a blue top rule closes the
   palette that runs the whole way down the page. Mobile: columns stack two-up, the legal row stacks. */
footer.site{background:#14171c;color:#9aa4b2;border-top:3px solid var(--blue);padding:44px 0 30px;font-size:12.5px}
footer.site .foot-top{display:grid;grid-template-columns:1.3fr 2fr;gap:30px 24px;align-items:start}
/* footer brand = the SAME inverted lockup as the dark header, so the two bookends match */
footer.site .foot-brand{display:flex;flex-direction:column;gap:12px;line-height:1.55;max-width:34ch;color:#b7c0cd}
footer.site .foot-logo{height:27px;width:auto;display:block}
footer.site .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 22px}
footer.site .foot-col{display:flex;flex-direction:column}
footer.site .foot-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7e8797;font-weight:600;margin-bottom:6px}
footer.site a{color:#e7e9ec;text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
footer.site a:hover{color:#E8B23A}
/* legal utility bar */
footer.site .foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:30px;padding-top:20px;border-top:1px solid #262b33}
footer.site .foot-copy{color:#7e8797}
footer.site .foot-legal-links{display:flex;flex-wrap:wrap;gap:0 20px}
footer.site .foot-legal-links a{color:#9aa4b2;min-height:36px;font-size:12.5px}
footer.site .foot-legal-links a:hover{color:#E8B23A}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.chip{min-height:44px}
.more a{display:inline-flex;align-items:center;min-height:44px}
.btn{min-height:44px}
@media(max-width:720px){
  footer.site .foot-top{grid-template-columns:1fr;gap:24px}
  footer.site .foot-cols{grid-template-columns:1fr 1fr;gap:6px 20px}
  footer.site .foot-legal{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ===== #6 one-page sections folded in from /about, /blog, /faq ===== */

/* ABOUT — navy "mission" band. Lede left, supporting prose right; reversed text kept high-contrast. */
.about-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;align-items:start;margin-top:22px}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:20px}}
.about-grid .oneline{color:#fff}
.about-body p{color:#cdd6ea;font-size:15px;line-height:1.66;max-width:66ch;margin:0 0 15px}
.about-body p:last-child{margin-bottom:0}
.about-body p b{color:#fff}
.about-body .about-guar{border-top:1px solid rgba(255,255,255,.14);padding-top:15px;margin-top:4px}
.about-body .about-guar b{color:var(--gold)}

/* BLOG — a short recent-posts split; the full, dripping index lives at /blog (proxied to the app).
   Cards carry a blue left rule (the blue system) that turns gold on hover. */
.blog-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:start}
@media(max-width:860px){.blog-split{grid-template-columns:1fr;gap:24px}}
.blog-cards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bc{display:block;border:1px solid var(--line2);border-left:3px solid var(--blue);border-radius:12px;padding:18px 20px;background:#fff;text-decoration:none;transition:box-shadow .15s ease,border-color .15s ease}
.bc:hover{box-shadow:0 8px 24px rgba(20,23,28,.09);border-left-color:var(--gold)}
.bc-date{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:8px}
.bc-title{display:block;font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--ink);line-height:1.28;margin-bottom:8px}
.bc:hover .bc-title{color:var(--blue)}
.bc-ex{display:block;font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:12px;max-width:60ch}
.bc-more{display:inline-block;font-size:13px;font-weight:600;color:var(--blue)}

/* FAQ — collapsed accordion built on native <details> (name="faq" makes it exclusive). Blue chevron. */
.faq-acc{margin-top:10px;border-top:1px solid var(--line2)}
.faq-acc details{border-bottom:1px solid var(--line2)}
.faq-acc summary{list-style:none;cursor:pointer;position:relative;padding:18px 42px 18px 0;font-size:16px;font-weight:620;color:var(--ink);min-height:44px;display:flex;align-items:center}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary:hover{color:var(--blue)}
.faq-acc summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.faq-acc summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .2s ease}
.faq-acc details[open] summary::after{transform:rotate(-135deg)}
@media(prefers-reduced-motion:reduce){.faq-acc summary::after{transition:none}}
.faq-a{padding:0 0 20px}
.faq-a p{color:var(--muted);font-size:14.5px;line-height:1.62;max-width:72ch;margin:0}
.faq-a b{color:var(--ink)}
.faq-a a{color:var(--blue);font-weight:600;text-decoration:none}
.faq-a a:hover{text-decoration:underline}

/* ===== /how-we-test — measured stats + the verbatim receipts ledger ===== */
/* Stat cards reuse the .step skeleton; .stat .s carries the big measured figure. */
.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.steps.three{grid-template-columns:1fr}}
.stat .s{font-size:26px;letter-spacing:-.01em}
.stat .s.sm{font-size:18px;padding-top:4px}
.conds{margin-top:16px;font-size:12.5px;color:var(--muted);max-width:74ch;line-height:1.55}
.conds b{color:var(--ink)}
/* Receipts ledger — every string inside is quoted byte-for-byte from the live API response. */
.vled{border-top:1px solid var(--line);margin-top:12px}
.vrow{display:flex;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);align-items:flex-start}
.vtag{flex:0 0 84px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;text-align:center;padding:4px 0;border-radius:999px;margin-top:2px}
.vtag.out{background:var(--ink);color:#fff}
.vtag.unk{background:#fff;border:1px solid var(--line2);color:var(--muted)}
.vbody{min-width:0}
.vnm{font-weight:650;font-size:14px}
.vwhy{font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px;max-width:64ch}
.vsrc{font-size:12px;margin-top:5px;color:var(--muted)}
.vsrc .q{font-family:var(--mono);color:var(--ink)}
@media(max-width:560px){.vrow{flex-direction:column;gap:6px}.vtag{flex:none;align-self:flex-start;padding:4px 10px}}