/* usfpguide.com: a datasheet. Paper white, ink navy, one cobalt accent, a small laser-orange mark for "this is USFP".
   Space Grotesk for text and headings, JetBrains Mono for figures and labels (both OFL, self-hosted). Every
   text/background pair below is checked for contrast in light and dark mode by tests/design.test.ts. */

@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bg: #f4f3ef;          /* datasheet paper */
  --band: #eae8e1;
  --card: #fbfaf7;
  --text: #0d1321;        /* ink navy */
  --muted: #4a5163;
  --line: #d6d3ca;
  --link: #2541b2;        /* cobalt */
  --tint-bg: #e7eaf7;
  --ink: #0d1321;         /* the dark band, the same in both modes */
  --ink-2: #172036;
  --on-ink: #eef0f6;
  --on-ink-muted: #b4bbcc;
  --laser: #e4572e;       /* marks only, never text on paper */
  --laser-ink: #ff8a66;   /* laser as text, on ink */
  --bar: #2541b2;
  --bar-usfp: #e4572e;
  --ghost: #c9cfe8;
  --grid: #d6d3ca;
  --btn: #2541b2;
  --btn-text: #ffffff;
  --btn-hover: #1a2f86;
  --done: #1e7a4c;
  --done-text: #ffffff;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: 4px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f17;
    --band: #111725;
    --card: #141b2b;
    --text: #e8eaf0;
    --muted: #a7aec0;
    --line: #283149;
    --link: #9db0ff;
    --tint-bg: #17213d;
    --ink: #060910;
    --ink-2: #0f1626;
    --bar: #7f97ff;
    --bar-usfp: #ff7a52;
    --ghost: #2c3760;
    --grid: #283149;
    --btn: #9db0ff;
    --btn-text: #0b1330;
    --btn-hover: #c0ccff;
    --done: #4cc38a;
    --done-text: #04150c;
    color-scheme: dark;
  }
}

/* ---------- type ---------- */
body { font-family: var(--sans); font-size: 17.5px; line-height: 1.65; background: var(--bg); color: var(--text); }
h1, h2, h3 { font-family: var(--sans); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.04; font-weight: 700; margin: 0.1em 0 0.35em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; font-weight: 650; margin: 1.9em 0 0.5em; }
h3 { font-size: 1.1rem; font-weight: 650; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 650; }
.wrap { max-width: 1160px; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }
.narrow { max-width: 760px; }
::selection { background: #c9d2fa; color: #0d1321; }
.kicker { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.label { font-size: 0.86rem; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.muted { color: var(--muted); }
code, .mono, td.num, th.num { font-family: var(--mono); font-size: 0.92em; }

/* ---------- header and footer ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { gap: 10px; }
.brand svg.logo-mark { height: 36px; }
.logo-mark .lm-body { fill: var(--text); }
.logo-mark .lm-face { fill: var(--bg); }
.logo-mark .lm-lanes rect { fill: var(--link); }
.logo-mark .lm-lit { fill: var(--laser); }
.wordmark { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.wm-name { font-family: var(--mono); font-weight: 700; font-size: 1.28rem; letter-spacing: 0.02em; color: var(--text); }
.wm-kicker { font-weight: 500; font-size: 1.1rem; color: var(--muted); }
.main-nav a { font-weight: 500; }
.main-nav .nav-cta { background: var(--btn); color: var(--btn-text); border-radius: var(--radius); }
.main-nav .nav-cta:hover, .main-nav .nav-cta[aria-current="page"] { background: var(--btn-hover); color: var(--btn-text); }
.site-footer { background: var(--band); margin-top: 0; }
.footer-col h2 { font-family: var(--mono); letter-spacing: 0.06em; }

/* ---------- buttons ---------- */
.btn { background: var(--btn); color: var(--btn-text); border-radius: var(--radius); font-weight: 600; }
.btn:hover { background: var(--btn-hover); color: var(--btn-text); }
.btn-ghost { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 2px #ffffff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

/* ---------- home: hero ---------- */
.hero { position: relative; background: var(--ink); color: var(--on-ink); overflow: hidden; }
.hero picture, .hero-img { display: block; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-inner { position: relative; }
.hero-copy { max-width: 600px; padding: 56px 0 60px; }
.hero h1 { color: #ffffff; }
.hero h1 em { font-style: normal; color: var(--laser-ink); }
.hero .kicker { color: var(--on-ink-muted); }
.hero-sub { font-size: 1.12rem; color: var(--on-ink); margin: 0 0 22px; max-width: 34em; }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.hero .btn { background: #ffffff; color: #0d1321; }
.hero .btn:hover { background: #dfe4f5; color: #0d1321; }
.hero .btn-ghost { background: transparent; color: #ffffff; }
@media (min-width: 761px) {
  .hero picture { position: absolute; inset: 0; }
  /* the headline sits in the left half: keep the picture under it near-black */
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 9, 16, 0.92) 0%, rgba(6, 9, 16, 0.86) 42%, rgba(6, 9, 16, 0.25) 75%, rgba(6, 9, 16, 0.05) 100%); }
  .hero-inner { z-index: 1; }
  .hero-copy { padding: 88px 0 92px; }
}
@media (max-width: 760px) {
  .hero-img { aspect-ratio: 16 / 9; }
  .hero-copy { padding: 26px 0 36px; }
}

/* the datasheet strip: four figures in mono */
.spec-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.spec-strip div { padding: 12px 14px; border-left: 1px solid var(--line); }
.spec-strip div:first-child { border-left: 0; }
.spec-strip dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.spec-strip dd { margin: 4px 0 0; font-family: var(--mono); font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.spec-strip dd small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
.hero .spec-strip { background: rgba(13, 19, 33, 0.72); border-color: #3a4560; }
.hero .spec-strip div { border-color: #3a4560; }
.hero .spec-strip dt, .hero .spec-strip dd small { color: var(--on-ink-muted); }
.hero .spec-strip dd { color: #ffffff; }
@media (max-width: 520px) {
  .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-strip div:nth-child(3) { border-left: 0; }
  .spec-strip div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hero .spec-strip div:nth-child(n + 3) { border-top-color: #3a4560; }
}

/* ---------- bands ---------- */
.band { padding: 64px 0; }
.band h2:first-child, .band .kicker + h2 { margin-top: 0; }
.band-tint { background: var(--tint-bg); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink h2 { color: #ffffff; }
.band-ink a { color: #b9c6ff; }
.band-ink .kicker { color: var(--on-ink-muted); }
.section-lede { max-width: 46em; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 24px; } .band { padding: 44px 0; } }

/* ---------- charts (HTML bars coloured from tokens, so they follow dark mode and stay readable on phones) ---------- */
.chart { margin: 1.4em 0; }
.chart figcaption { font-size: 0.86rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.cap-rows { list-style: none; margin: 0; padding: 0; }
.cap-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 8.5em; gap: 12px; align-items: center; padding: 7px 0; }
.cap-name { font-weight: 600; text-align: right; }
.cap-track { position: relative; height: 24px; background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 25% 100%; border-right: 1px solid var(--grid); }
.cap-ghost, .cap-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.cap-ghost { background: var(--ghost); }
.cap-bar { background: var(--bar); }
.cap-row.is-usfp .cap-bar { background: var(--bar-usfp); }
.cap-row.is-usfp .cap-name { box-shadow: inset 0 -2px 0 var(--laser); justify-self: end; }
.cap-val { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.cap-next { font-weight: 500; color: var(--muted); }
.cap-axis { display: flex; justify-content: space-between; margin: 4px 0 0 calc(7.5em + 12px); margin-right: calc(8.5em + 12px); font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.cap-axis span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
@media (max-width: 600px) {
  .cap-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .cap-name { text-align: left; }
  .cap-track { grid-column: 1 / -1; grid-row: 2; }
  .cap-val { grid-column: 2; grid-row: 1; }
  .cap-row.is-usfp .cap-name { justify-self: start; }
  .cap-axis { margin-left: 0; margin-right: 0; }
  .cap-axis span:first-child { justify-content: flex-start; }
  .cap-axis span:last-child { justify-content: flex-end; }
}
.lanes-cap { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin: 0 0 6px; }
.lanes-module { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 14px; background: var(--card); border: 2px solid var(--text); border-radius: 10px; }
.lane { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 4px; background: var(--bar); color: #ffffff; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; }
.lanes-sum { font-family: var(--mono); font-weight: 600; font-size: 0.92rem; text-align: center; margin: 10px 0 0; }
@media (prefers-color-scheme: dark) { .lane { color: #0b1330; } }
@media (max-width: 420px) { .lanes-module { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- status ladder ---------- */
.milestones { list-style: none; padding: 0; margin: 0; counter-reset: ms; }
.milestones li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.milestones .ms-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; margin-top: 2px; }
.milestones li.done .ms-mark { background: var(--done); border-color: var(--done); color: var(--done-text); }
.milestones .ms-body { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; flex: 1; }
.milestones .ms-title { font-weight: 600; flex: 1 1 14em; }
.milestones .ms-state { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); }
.milestones .ms-note { flex-basis: 100%; color: var(--muted); font-size: 0.95rem; }
.milestones li.todo .ms-title { color: var(--muted); }
.band-ink .milestones li { border-color: #2a3550; }
.band-ink .milestones .ms-mark { border-color: var(--on-ink-muted); }
.band-ink .milestones li.done .ms-mark { background: #4cc38a; border-color: #4cc38a; color: #04150c; }
.band-ink .milestones .ms-title { color: #ffffff; }
.band-ink .milestones li.todo .ms-title, .band-ink .milestones .ms-state, .band-ink .checked-line { color: var(--on-ink-muted); }
.checked-line { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin: 12px 0 0; }

/* ---------- timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 1em 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 4px 0 18px 22px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--bar); }
.timeline li.tl-usfp::before { background: var(--laser); }
.timeline time { display: block; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); }

/* ---------- tables ---------- */
table { font-size: 0.95rem; }
th { background: var(--band); }
.ff-table th[scope="row"] small, .ff-table th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.ff-table tr.is-usfp th[scope="row"], .ff-table tr.is-usfp td { background: var(--tint-bg); }
.ff-table tr.is-usfp th[scope="row"] { box-shadow: inset 3px 0 0 var(--laser); }
.vs-table th[scope="row"], .spec-table th[scope="row"] { background: transparent; font-weight: 600; white-space: nowrap; }
.compare-chips tr.current th, .compare-chips tr.current td { background: var(--tint-bg); font-weight: 650; }
@media (max-width: 600px) { .vs-table th[scope="row"], .spec-table th[scope="row"] { white-space: normal; } }

/* ---------- cards ---------- */
.card { background: var(--card); border-radius: var(--radius); }
a.card { transition: border-color 0.15s; }
a.card h3 { margin: 0 0 6px; }
a.card p { margin: 0; color: var(--text); }
.cards-compare { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.page-body .cards-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .page-body .cards-compare { grid-template-columns: 1fr; } }

/* ---------- tier comparison on the home page ---------- */
.tier-compare { margin: 0; display: grid; gap: 12px; }
.tier-compare div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tier-compare dt { font-size: 0.98rem; }
.tier-compare dd { margin: 0; font-family: var(--mono); font-size: 1.7rem; font-weight: 700; white-space: nowrap; color: var(--text); }
.tier-compare div:last-child { box-shadow: inset 4px 0 0 var(--laser); }

/* ---------- sign-up ---------- */
.signup-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 2em 0; }
.signup-block h2 { margin-top: 0; }
.signup input[type="email"] { border-radius: var(--radius); }

/* ---------- article pages ---------- */
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.page-body .spec-strip { max-width: 640px; }
.missing li { margin: 6px 0; }
.sources { margin-top: 2.6em; font-size: 0.9rem; color: var(--muted); }
.sources h2 { font-size: 1.1rem; }
.sources ol { padding-left: 1.3em; }
.sources a { color: var(--muted); }
.company-list, .camp-list { list-style: none; padding: 0; }
.company { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.company h3 { margin: 0; }
.company-role { font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 2px 0 6px; }
.camp-list li { margin: 10px 0; }
.glossary div { padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.glossary dt { font-weight: 650; }
.glossary dd { margin: 4px 0 0; }
.glossary div:target { background: var(--tint-bg); }
.chip-name { font-family: var(--mono); font-weight: 600; }

/* ---------- the calculator ---------- */
.tool { background: var(--card); border-radius: var(--radius); }
.tool input, .tool select { border-radius: var(--radius); font-family: var(--mono); }
.tool .tool-h { font-size: 1.1rem; margin: 1.6em 0 0.4em; }
.results .big { font-family: var(--mono); font-size: 2.2rem; }
.results[data-state="too-big"] .big, .results[data-state="error"] .big { color: var(--text); text-decoration: underline wavy var(--laser); text-underline-offset: 6px; }
.result-grid dd { font-family: var(--mono); font-size: 1.05rem; }