/* Trustedcopy tokens copied from designs/site/styles.css (:root block, 2026-11-08).
   Copied, not imported, so this lab cannot change the marketing site by accident.
   If the design tokens change, update this block in the same change. */
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/space-grotesk-700.woff2") format("woff2"); }
:root {
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ink: #0B1F4D;
  --ink-soft: #41507A;
  --muted: #707E9E;
  --bg: #ffffff;
  --bg-soft: #F5F7FB;
  --cream: #F4F1EA;
  --cream-line: #E4DDCC;
  --deep: #0B1F4D;
  --primary: #2563C9;
  --primary-hover: #1E54AC;
  --accent-sky: #6BA8EE;
  --line: #E3E8F1;
  --line-strong: #C7D0E0;
  --verified: #1F8A5B;
  --verified-soft: #E2F2EA;
  --alert: #D2473D;
  --warn: #B8770A;
  --warn-soft: #FBEFD6;
  --r: 0px;
  --r-card: 4px;
  --gutter: 20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
.wrap { max-width: 440px; margin: 0 auto; padding: 24px var(--gutter) 40px; }
.staging-band { background: var(--warn-soft); color: var(--warn); font-size: 12px; text-align: center; padding: 6px 12px; font-family: var(--font-mono); }
h1, h2 { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0 0 12px; line-height: 1.2; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); font-size: 13px; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.steps { list-style: none; padding: 0; margin: 16px 0; border-top: 1px solid var(--line); }
.steps li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.steps li.status-failed { color: var(--alert); }
button, .button { display: block; width: 100%; font: inherit; font-family: var(--font-display); font-weight: 600; font-size: 17px; background: var(--primary); color: #fff; border: 0; border-radius: var(--r); padding: 14px 16px; cursor: pointer; text-align: center; text-decoration: none; }
button:hover, .button:hover { background: var(--primary-hover); }
button:disabled { background: var(--line-strong); cursor: default; }
button.secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
label { display: block; font-size: 13px; color: var(--ink-soft); margin: 14px 0 4px; }
input[type=text], input[type=password], input[type=email] { width: 100%; font: inherit; font-size: 16px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--ink); background: #fff; }
.notice { background: var(--bg-soft); border-left: 0; padding: 14px; margin: 16px 0; border-radius: var(--r-card); font-size: 14px; }
.verified-field { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.verified-field .tag { color: var(--verified); background: var(--verified-soft); font-size: 12px; padding: 2px 8px; border-radius: var(--r); font-family: var(--font-mono); white-space: nowrap; }
.verified-field .missing { color: var(--muted); font-size: 13px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px; margin-top: 20px; font-size: 13px; }
.panel dt { color: var(--muted); font-size: 12px; margin-top: 8px; }
.panel dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.fail { background: #FBEAE8; color: var(--alert); padding: 14px; border-radius: var(--r-card); }
.timings { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 16px; }
.steps-flush { border-top: 0; }
.next { margin-top: 18px; }
.fine { margin-top: 14px; }
.demo-note { margin: 6px 0 0; }