/* Authenticity Audits: a loud product page. White, heavy wide black type, one cobalt in solid blocks.
   Deliberately the opposite of a quiet report: square corners, big numbers, no serif. */
:root {
  --bg: #ffffff;
  --ink: #0a0a0c;
  --ink-2: #3c3d45;
  --line: #e4e5ea;
  --cobalt: #1f3dff;
  --cobalt-ink: #ffffff;
  --hold: #ff3b1f;
  --soft: #f2f3f7;
  --wide: "Archivo", "Arial Black", sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08080a; --ink: #f4f4f6; --ink-2: #b4b6c0; --line: #23242b; --cobalt: #4f66ff; --soft: #121318; --hold: #ff5a40;
  }
}
:root[data-theme="dark"] {
  --bg: #08080a; --ink: #f4f4f6; --ink-2: #b4b6c0; --line: #23242b; --cobalt: #4f66ff; --soft: #121318; --hold: #ff5a40;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.55 var(--body); }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--wide); text-wrap: balance; }
p { margin: 0; }
main > section, .bar, .foot { padding-inline: max(16px, calc((100vw - 1180px) / 2)); }

.bar { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; border-bottom: 3px solid var(--ink); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 17px/1 var(--wide); font-stretch: 112%; letter-spacing: 0.02em; }
.logo b, .foot b { color: var(--cobalt); font-weight: 900; }
.logo-box { width: 18px; height: 18px; background: var(--cobalt); }
.bar-cta { font: 600 15px/1 var(--body); text-decoration: none; border-bottom: 2px solid var(--cobalt); padding-bottom: 3px; }

.hero { padding-block: 64px 40px; display: grid; gap: 26px; }
h1 { font-size: clamp(48px, 9vw, 120px); line-height: 0.92; font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; }
h1 em { font-style: normal; color: var(--cobalt); }
.sub { font-size: 21px; max-width: 34em; color: var(--ink-2); }
.big-btn { justify-self: start; background: var(--cobalt); color: var(--cobalt-ink); text-decoration: none; font: 800 18px/1 var(--wide); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.03em; padding: 20px 26px; }
.big-btn:hover { background: var(--ink); color: var(--bg); }
.big-btn.inverse { background: var(--bg); color: var(--ink); font-family: var(--mono); text-transform: none; letter-spacing: 0; font-weight: 500; word-break: break-all; }
.big-btn.inverse:hover { background: var(--ink); color: var(--bg); }

.curve { margin: 18px 0 0; border: 3px solid var(--ink); background: var(--soft); padding: 18px 18px 10px; overflow-x: auto; }
.curve svg { width: 100%; min-width: 560px; height: auto; display: block; overflow: visible; }
.grid line { stroke: var(--line); stroke-width: 1.5; }
.real { fill: none; stroke: var(--cobalt); stroke-width: 5; stroke-linecap: round; }
.fake { fill: none; stroke: var(--hold); stroke-width: 5; stroke-linejoin: bevel; }
.dot { fill: var(--hold); }
.tag rect { fill: var(--ink); }
.tag text { fill: var(--bg); font: 500 15px var(--mono); }
.tag .tag-sub { font-size: 12.5px; opacity: 0.8; }
.lab { font: 800 13px var(--wide); fill: var(--cobalt); text-anchor: end; }
.lab-fake { fill: var(--hold); }
.curve figcaption { font: 500 12.5px var(--mono); color: var(--ink-2); padding-top: 8px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); margin-top: 48px; padding-inline: 0 !important; }
.step { padding: 36px max(16px, 2vw) 40px; display: grid; gap: 12px; align-content: start; }
.step + .step { border-left: 3px solid var(--ink); }
.steps .step:first-child { padding-left: max(16px, calc((100vw - 1180px) / 2)); }
.n { font: 900 64px/0.9 var(--wide); font-stretch: 125%; color: var(--cobalt); }
.step h2 { font-size: 24px; font-weight: 800; font-stretch: 112%; text-transform: uppercase; }
.step p { color: var(--ink-2); }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; border-top: 3px solid var(--ink); }
  .steps .step:first-child { padding-left: 16px; }
}

.flags { padding-block: 72px; display: grid; gap: 30px; }
.flags-h { font-size: clamp(34px, 5vw, 56px); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 0.95; }
.flag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flag-grid article { background: var(--soft); padding: 24px 22px 26px; display: grid; gap: 10px; align-content: start; border-top: 6px solid var(--hold); }
.flag-grid h3 { font-size: 19px; font-weight: 800; font-stretch: 112%; }
.flag-grid p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 980px) { .flag-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .flag-grid { grid-template-columns: 1fr; } }

.stat-band { background: var(--cobalt); color: var(--cobalt-ink); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-block: 48px; }
.stat-band div { display: grid; gap: 6px; }
.stat { font: 900 clamp(44px, 6vw, 76px)/0.95 var(--wide); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 16px; opacity: 0.9; }
@media (max-width: 720px) { .stat-band { grid-template-columns: 1fr; } }

.pilot { padding-block: 80px; display: grid; gap: 20px; }
.pilot h2 { font-size: clamp(40px, 6vw, 72px); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 0.95; }
.pilot p { max-width: 36em; color: var(--ink-2); font-size: 20px; }
.pilot .big-btn { border: 3px solid var(--ink); }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 3px solid var(--ink); padding-block: 22px 30px; font: 800 14px var(--wide); font-stretch: 112%; }
.foot span:last-child { font: 400 14px var(--body); color: var(--ink-2); }