/* The coreload.com site's one stylesheet (scripts/frontdoor-site.mjs copies it to /style.css). The landing page is a
   designed page (body.page-landing; each section's id comes from its "{#id}" marker); every other page is docs prose.
   Fonts: the site's own copies of Geist and Geist Mono (fonts/, SIL Open Font License).
   Tokens (2026-11-04): measured with getComputedStyle on the operator's references (Vercel, Namespace, Jog, Boat,
   context.dev, Depot, Blacksmith; scripts in the PR body). Display type there is 56-66 px at weight 400-500 with
   -0.03 to -0.06 em tracking, body 16/24, buttons 14 px with a 6-7 px radius, cards a 7-12 px radius with a 1 px
   #e6e6e6-range border and next to no shadow, content 1200-1450 px wide. Other pages (the status page) import these
   variables; never copy their values. */
@font-face { font-family: "Geist"; src: url("/fonts/GeistVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* The fallback is sized to Geist (the SEO plan #3369 P0: the swap shifted mobile pages, CLS 0.217): Geist's average
   advance 0.4732 em against Arial's 0.4414 em gives size-adjust 107.2%; Geist's ascent 1005 and descent 295 per 1000,
   divided by that, give the overrides. Metrics read from fonts/GeistVariable.woff2 (hhea, hmtx) and Arial's published
   metrics (2048 units, average 904). */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Arial MT"), local("Liberation Sans"); size-adjust: 107.2%; ascent-override: 93.75%; descent-override: 27.52%; line-gap-override: 0%; }
/* Android has no Arial (claude r2 F3 on #3377): the same sizing against Roboto's published metrics (2048 units,
   average 911): size-adjust 106.4%, and Geist's ascent and descent divided by that. */
@font-face { font-family: "Geist Fallback Roboto"; src: local("Roboto"); size-adjust: 106.4%; ascent-override: 94.45%; descent-override: 27.73%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMonoVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* Colour: calm, high-contrast black and white, with one accent. */
  --ink: #0a0a0a; --ink-2: #141414; --ink-line: #262626; --ink-muted: #a1a1a1;
  --paper: #fafafa; --panel: #ffffff; --line: #e5e5e5; --muted: #525252; --fg: #171717;
  --accent: #ff5b1f; --accent-soft: #fff1ea;
  --ok: #16a34a; --warn: #d97706; --danger: #dc2626; --add: #3fb950; --del: #f85149;
  /* Type. */
  --font: "Geist", "Geist Fallback", "Geist Fallback Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px;
  --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 56px; --text-6xl: 64px;
  /* Space (4 px base), radius, shadow, width. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 24px 64px -24px rgba(0, 0, 0, 0.5);
  --wrap: 1200px; --gutter: max(var(--space-5), calc((100% - var(--wrap)) / 2));
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--fg); background: var(--paper); font: var(--text-base)/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
code { font: 0.875em var(--mono); background: color-mix(in srgb, var(--fg) 6%, transparent); padding: 2px 6px; border-radius: var(--radius-sm); }
strong { font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }

/* Navigation and footer: full width, content on the shared grid. */
nav { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(180%) blur(8px); position: sticky; top: 0; z-index: 10; }
nav span { display: flex; gap: var(--space-5); align-items: center; }
nav a { text-decoration: none; color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
nav a:hover { color: var(--fg); }
nav .brand { color: var(--fg); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; }
nav .brand .mark { flex: none; display: block; }
.button, .cta a { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--fg); background: var(--panel); text-decoration: none; font-weight: 500; font-size: var(--text-sm); transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.button:hover, .cta a:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
nav .button { height: 32px; padding: 0 var(--space-3); background: var(--fg); border-color: var(--fg); color: var(--paper); }
.cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }
.cta a:first-child { background: var(--fg); border-color: var(--fg); color: var(--paper); }
.cta a:first-child::after { content: "→"; transition: transform .15s ease; }
.cta a:first-child:hover::after { transform: translateX(2px); }
footer { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; padding: var(--space-7) var(--gutter) var(--space-8); background: var(--ink); color: var(--ink-muted); font-size: var(--text-sm); }
footer a { color: var(--ink-muted); text-decoration: none; }
footer a:hover { color: #fff; }
footer span { color: #fff; font-weight: 600; margin-right: auto; letter-spacing: -0.01em; }
/* Every H1's brand line (the real-engine audit, #3369): small, above the heading. */
h1 .h1-brand { display: block; font: 500 var(--text-xs)/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.page-landing h1 .h1-brand { color: var(--ink-muted); }
/* The compare row (the SEO plan #3369 P0): its own full-width line that wraps on a narrow screen (codex r1 F1 on #3377). */
footer .compare-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; }
footer .compare-links span { color: var(--ink-muted); font-weight: 500; margin-right: 0; }

/* "Coming soon": the claim stays readable, and says so plainly. */
.soon .badge { display: inline-block; font: 500 var(--text-xs)/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 0 var(--space-2); vertical-align: 0.2em; margin-left: var(--space-2); white-space: nowrap; }
.soon-note { font: 500 var(--text-xs)/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 var(--space-4); }

/* Tables and code, shared. */
table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font: 500 var(--text-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; background: var(--paper); }
pre { background: var(--ink-2); color: #ededed; border: 1px solid var(--ink-line); border-radius: var(--radius-lg); padding: var(--space-5); overflow-x: auto; font: var(--text-sm)/1.7 var(--mono); }
pre code { background: none; padding: 0; color: inherit; font: inherit; }
pre .add { color: var(--add); }
pre .del { color: var(--del); }
blockquote { margin: var(--space-5) 0; padding: var(--space-3) var(--space-5); border: 1px solid var(--line); border-left: 3px solid var(--fg); background: var(--panel); border-radius: var(--radius); }
li { margin: var(--space-2) 0; }

/* Docs pages: a single readable column. */
body:not(.page-landing) main { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-9); }
body:not(.page-landing) .hero h1 { font-size: var(--text-4xl); line-height: 1.1; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 var(--space-4); }
body:not(.page-landing) .hero > p:first-of-type { font-size: var(--text-lg); color: var(--muted); }
body:not(.page-landing) h2 { font-size: var(--text-2xl); letter-spacing: -0.03em; margin: 0 0 var(--space-3); font-weight: 600; }
body:not(.page-landing) section { padding: var(--space-6) 0; border-top: 1px solid var(--line); }
body:not(.page-landing) table { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; border-collapse: separate; border-spacing: 0; box-shadow: var(--shadow); }

/* The landing page. */
.page-landing nav { background: var(--ink); border-bottom-color: var(--ink-line); }
.page-landing nav a { color: var(--ink-muted); }
.page-landing nav a:hover, .page-landing nav .brand { color: #fff; }
.page-landing nav .button { background: #fff; border-color: #fff; color: var(--ink); }
.page-landing main { counter-reset: part; }
.page-landing .hero { background-color: var(--ink); background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; color: #fff; padding: var(--space-9) var(--gutter) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); align-items: center; position: relative; }
.page-landing .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 40%, transparent, var(--ink) 75%); pointer-events: none; }
.page-landing .hero > * { grid-column: 1; position: relative; }
.page-landing .hero h1 { font-size: clamp(var(--text-4xl), 5.4vw, var(--text-6xl)); line-height: 1.02; letter-spacing: -0.05em; font-weight: 600; margin: 0; }
.page-landing .hero > p:first-of-type { font-size: var(--text-xl); line-height: 1.5; color: var(--ink-muted); margin: var(--space-5) 0 0; max-width: 32em; }
.page-landing .hero .cta a { background: transparent; color: #fff; border-color: var(--ink-line); }
.page-landing .hero .cta a:first-child { background: #fff; border-color: #fff; color: var(--ink); }
.page-landing .hero > p:not(:first-of-type):not(.cta) { color: var(--ink-muted); font-size: var(--text-sm); margin: var(--space-4) 0 0; }
.page-landing .hero > pre { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 52px var(--space-5) var(--space-5); font-size: 15px; background: #0f0f0f; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04); }
.page-landing .hero > pre::before { content: ".github/workflows/ci.yml"; position: absolute; inset: 0 0 auto 0; height: 38px; padding: 0 var(--space-4) 0 74px; display: flex; align-items: center; font-size: var(--text-xs); color: var(--ink-muted); border-bottom: 1px solid var(--ink-line); background: radial-gradient(circle at 22px 19px, #333 5px, transparent 5.5px), radial-gradient(circle at 40px 19px, #333 5px, transparent 5.5px), radial-gradient(circle at 58px 19px, #333 5px, transparent 5.5px); }
.page-landing .hero > pre .add { background: color-mix(in srgb, var(--add) 14%, transparent); display: inline-block; width: 100%; border-radius: 4px; }
.page-landing .hero > pre .del { background: color-mix(in srgb, var(--del) 12%, transparent); display: inline-block; width: 100%; border-radius: 4px; }
.page-landing .hero pre code { background: none; }
.page-landing .hero > ul { grid-column: 1 / -1; list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--ink-line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ink-2) 80%, transparent); }
.page-landing .hero > ul li { margin: 0; padding: var(--space-5); color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; }
.page-landing .hero > ul li + li { border-left: 1px solid var(--ink-line); }
.page-landing .hero > ul strong { display: block; color: #fff; font-size: var(--text-xl); letter-spacing: -0.03em; margin-bottom: var(--space-1); font-weight: 600; }
.page-landing .hero > ul a { color: #fff; }
.page-landing .hero code { background: rgba(255, 255, 255, 0.08); color: #fff; }

.page-landing section { padding: var(--space-9) var(--gutter); border-top: 1px solid var(--line); position: relative; }
.page-landing section > h2 { font-size: clamp(var(--text-3xl), 3.4vw, var(--text-4xl)); line-height: 1.1; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 var(--space-4); max-width: 20em; }
.page-landing section > h2::before { counter-increment: part; display: block; font: 500 var(--text-xs)/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-4); }
.page-landing section > p { font-size: var(--text-lg); color: var(--muted); max-width: 40em; margin: 0 0 var(--space-3); }
.page-landing section > p strong { color: var(--fg); }
.page-landing section > p.soon-note { font: 500 var(--text-xs)/1.5 var(--mono); color: var(--muted); margin: calc(-1 * var(--space-1)) 0 var(--space-2); }
.page-landing section > p:not(.cta) > a { font-weight: 500; color: var(--fg); }


/* How it works: three numbered steps. */
#steps ol { list-style: none; counter-reset: step; padding: 0; margin: var(--space-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
#steps li { counter-increment: step; margin: 0; padding: var(--space-6); color: var(--muted); font-size: var(--text-sm); }
#steps li + li { border-left: 1px solid var(--line); }
#steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 500 var(--text-xs) var(--mono); color: var(--muted); margin-bottom: var(--space-6); }
#steps li strong { display: block; color: var(--fg); font-size: var(--text-lg); letter-spacing: -0.02em; margin-bottom: var(--space-2); }

/* Sizes. */
#sizes table { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-lg); overflow: hidden; border-collapse: separate; border-spacing: 0; margin: var(--space-6) 0 var(--space-4); box-shadow: var(--shadow); }
#sizes td:first-child code { background: var(--paper); border: 1px solid var(--line); color: var(--fg); padding: 3px 8px; font-weight: 500; }

/* Security: a grid of facts. */
#security ul { list-style: none; padding: 0; margin: var(--space-7) 0 var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
#security li { margin: 0; padding: var(--space-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--muted); font-size: var(--text-sm); box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease; }
#security li:hover { border-color: color-mix(in srgb, var(--fg) 25%, transparent); transform: translateY(-1px); }
#security li strong { display: block; color: var(--fg); font-size: var(--text-base); letter-spacing: -0.01em; margin-bottom: var(--space-1); }

/* Pricing: one plain line. */
#price > p { font-size: var(--text-xl); color: var(--fg); }

/* Questions. */
#faq ul { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); }
#faq li { margin: 0; padding: var(--space-5) 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }
#faq li strong { display: block; color: var(--fg); font-size: var(--text-base); letter-spacing: -0.01em; margin-bottom: var(--space-1); }

/* The roadmap: one list of everything unbuilt. */
#roadmap ul { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); }
#roadmap li { margin: 0; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-top: 1px dashed var(--line); color: var(--muted); font-size: var(--text-sm); position: relative; }
#roadmap li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); }

/* The closing call to action. */
#cta { background: var(--ink); color: #fff; border-top: 0; text-align: center; padding: var(--space-10) var(--gutter); }
#cta > h2 { margin: 0 auto; color: #fff; max-width: none; }
#cta > h2::before { color: var(--ink-muted); }
#cta > p.cta { justify-content: center; margin: var(--space-6) auto 0; max-width: none; }
#cta .cta a { background: transparent; color: #fff; border-color: var(--ink-line); }
#cta .cta a:first-child { background: #fff; border-color: #fff; color: var(--ink); }
.page-landing footer { border-top: 1px solid var(--ink-line); }

/* The section label (the "01 / Speed" line) names each section. */
#steps > h2::before { content: counter(part, decimal-leading-zero) " / How it works"; }
#sizes > h2::before { content: counter(part, decimal-leading-zero) " / Sizes"; }
#security > h2::before { content: counter(part, decimal-leading-zero) " / Security"; }
#price > h2::before { content: counter(part, decimal-leading-zero) " / Pricing"; }
#faq > h2::before { content: counter(part, decimal-leading-zero) " / Questions"; }
#roadmap > h2::before { content: counter(part, decimal-leading-zero) " / Roadmap"; }
#cta > h2::before { content: "Get started"; }

/* Motion: light, CSS only, and off for anyone who asks for less. */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-landing .hero h1, .page-landing .hero > p, .page-landing .hero > pre, .page-landing .hero > ul { animation: rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.page-landing .hero > p:first-of-type { animation-delay: .03s; }
.page-landing .hero > p.cta { animation-delay: .06s; }
.page-landing .hero > pre { animation-delay: .09s; }
.page-landing .hero > ul { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 900px) {
  nav span a:not(.button) { display: none; }
  .page-landing .hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-5) var(--space-7); background-size: 48px 48px; }
  .page-landing .hero > pre { grid-column: 1; grid-row: auto; margin-top: var(--space-6); font-size: 13px; }
  .page-landing .hero > ul { grid-auto-flow: row; margin-top: var(--space-6); }
  .page-landing .hero > ul li + li { border-left: 0; border-top: 1px solid var(--ink-line); }
  .page-landing section { padding: var(--space-8) var(--space-5); }
  #steps ol, #security ul, #faq ul, #roadmap ul { grid-template-columns: minmax(0, 1fr); }
  #steps li + li { border-left: 0; border-top: 1px solid var(--line); }
  #sizes table { display: block; overflow-x: auto; }
  #cta { padding: var(--space-9) var(--space-5); }
}

/* Compare pages (#2993): each competitor's own words, with its source beside it. */
.compare-quotes { margin: var(--space-5) 0; }
.compare-quotes .read { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.compare-quotes q { font-style: normal; }
.compare-quotes q::before, .compare-quotes q::after { color: var(--muted); }
table.compare-shapes td:first-child, table.compare-shapes td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.compare-shapes td:nth-child(3) { color: var(--muted); }
.compare-quotes .source { font: var(--text-xs)/1.6 var(--mono); color: var(--muted); }
.compare-quotes .source a { color: var(--muted); }
dl.compare-facts { font-size: var(--text-sm); display: grid; grid-template-columns: minmax(140px, 200px) 1fr; margin: var(--space-5) 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; }
dl.compare-facts dt, dl.compare-facts dd { margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
dl.compare-facts dt { font: 500 var(--text-xs)/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--paper); }
dl.compare-facts dt:last-of-type, dl.compare-facts dd:last-of-type { border-bottom: 0; }
@media (max-width: 640px) {
  dl.compare-facts { grid-template-columns: 1fr; }
  dl.compare-facts dt { border-bottom: 0; padding-bottom: 0; }
  /* Scoped like the docs-page table rule it must beat (overflow: hidden there; claude r1 F1 on #3021). */
  body:not(.page-landing) table.compare-shapes { display: block; overflow-x: auto; }
}