/* ORIONPATH shared stylesheet — card #35.
   One file, linked by every page (index, about, prototypes, governance, legal). No page carries a <style>
   block or a style= attribute for anything structural. This is a standing rule (see the orionpath-design
   skill): a page built by copying another page and trimming what "looked unused" cannot tell shared chrome
   from page-specific rules, and that is exactly how about.html shipped missing 41 selectors including the
   header nav links and .print-only.

   Sections below are marked SHARED (used identically by every page that has the matching markup — safe to
   leave unscoped because the selector simply does not exist in the markup of pages that don't use it) or
   PAGE-TYPE / PAGE-SPECIFIC (scoped by a class on <body>: body.page-index, body.page-about,
   body.page-prototypes, body.page-governance, body.page-legal) where two pages genuinely need different
   values for the same selector. Multiple @media blocks with the same condition appear in this file rather
   than one merged block per breakpoint — deliberate, so each section (base / header / hero / footer /
   page-type overrides / per-page components) stays independently readable and auditable. See card #35 for
   the full list of what was found identical, what was page-specific, and the two real conflicts that were
   resolved (with which pages' appearance changed as a result). */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --navy: #052444;
  --ground: #F5F2EC;
  --lift: #FAF9F6;
  --tint: #ECEFF2;
  --ink: #052444;
  --muted: #3F556C;
  --rule: rgba(5, 36, 68, 0.14);
  --rule-strong: rgba(5, 36, 68, 0.32);
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 5rem;
  /* section rhythm: the vertical padding other large sections already use, named so the footer can build on it rather than invent a number */
  --sec-y: 3rem; --sec-y-lg: 5.5rem;
  --foot-y: 5rem; --foot-y-lg: 9rem;
  --pink: #F2A7B8;
  --pink-hi: #FFC6D2;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background-color: var(--ground);
  /* atmosphere: navy haze falling from the top edge, and a pale glow behind the headline. Peak effect is about 4 to 5 L* on the bone ground. */
  background-image:
    radial-gradient(ellipse 72rem 30rem at 28% -3rem, rgba(8, 40, 78, 0.095), rgba(8, 40, 78, 0.04) 55%, rgba(8, 40, 78, 0) 100%),
    radial-gradient(ellipse 44rem 24rem at 24% 14rem, rgba(255, 253, 249, 0.85), rgba(255, 253, 249, 0) 100%);
  background-repeat: no-repeat; color: var(--ink); font: 400 1rem/1.55 "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 74rem; margin: 0 auto; padding: 0 24px; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(5, 36, 68, 0.4); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--navy); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 3px; }

/* type: a few decided sizes, big contrast, tight tracking as size rises. SHARED base; h1/p/.lede/h2-desktop
   split by page type below, since the "hero" pages (index, prototypes, governance) run bigger display type
   than the "simple" pages (about, legal), which have no hero and use .page-head instead. That split is
   intentional design, not drift — do not converge it. */
h1, h2 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; }
h2 { font-size: 1.4rem; line-height: 1.08; letter-spacing: -0.03em; }
.ico { width: 0.76em; height: 0.76em; margin-right: 0.4em; vertical-align: -0.02em; }
.small { color: var(--muted); font-size: 0.9375rem; }

/* PAGE-TYPE: hero pages (big display h1, wider hero lede/measure) */
body.page-index h1, body.page-prototypes h1, body.page-governance h1 { font-size: 2.5rem; font-size: clamp(2.5rem, 10.6vw, 4.7rem); line-height: 0.93; letter-spacing: -0.048em; margin-left: -0.04em; }
body.page-index p, body.page-prototypes p, body.page-governance p { margin: 0 0 1rem; max-width: 34rem; }
body.page-index .lede, body.page-prototypes .lede, body.page-governance .lede { font-size: 1.15rem; line-height: 1.4; letter-spacing: -0.012em; max-width: 26rem; color: var(--ink); }
/* PAGE-TYPE: simple pages (about, legal) — smaller restrained h1/lede, no hero */
body.page-about h1, body.page-legal h1 { font-size: 2.1rem; font-size: clamp(2.1rem, 7vw, 3rem); line-height: 1.04; letter-spacing: -0.04em; margin-left: -0.02em; }
/* about's headline ("About ORIONPATH.") is measure-constrained per the design system's own rule (set the
   measure per headline). legal's headline ("Legal notice, privacy & cookies.") is left unconstrained here,
   exactly as it shipped before this file existed — that gap looks like an oversight (a long headline is the
   case that most needs a chosen break, not least), but picking a ch value for a live legal page is a design
   call with no owner sign-off, so it was flagged on card #35 rather than guessed. Not a silent omission. */
body.page-about h1 { max-width: 14ch; }
body.page-about p, body.page-legal p { margin: 0 0 1rem; max-width: 38rem; }
body.page-about .lede, body.page-legal .lede { font-size: 1.15rem; line-height: 1.4; letter-spacing: -0.012em; max-width: 34rem; color: var(--ink); }

.cta { display: inline-block; padding: 16px 30px; border-radius: 10px; color: var(--ground); background-color: var(--navy);
  background-image: linear-gradient(180deg, #1A4C82 0%, #0B3157 48%, #052444 100%); font-weight: 600; letter-spacing: 0.005em; text-decoration: none;
  box-shadow: inset 0 1px 0 #F2A7B8, inset 0 2px 0 rgba(255, 198, 210, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 18px 32px -18px rgba(5, 36, 68, 0.7), 0 2px 4px rgba(5, 36, 68, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.cta:hover { text-decoration: none; transform: translateY(-2px); filter: brightness(1.16);
  box-shadow: inset 0 1px 0 #FFC6D2, inset 0 2px 0 rgba(255, 198, 210, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 24px 36px -18px rgba(5, 36, 68, 0.75), 0 3px 6px rgba(5, 36, 68, 0.3); }
.cta:active { transform: translateY(0); filter: brightness(1.05); }
.cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } .cta:hover { transform: none; } }
/* on-navy variant and .textlink: only used on index/prototypes/governance's navy closing band today, but
   left global (harmless — the classnames don't exist in about/legal's markup) rather than page-gated,
   since there is no second, conflicting declaration to disambiguate. .cta:active is likewise now global:
   about.html and legal.html never had a press state before this file existed (their <style> blocks lacked
   it entirely) — this restores it there too, for free, with no visual regression anywhere. */
.cta.on-navy { color: var(--navy); background-color: var(--pink); background-image: linear-gradient(180deg, #FFC6D2 0%, #F2A7B8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 20px 34px -16px rgba(0, 0, 0, 0.55); }
.cta.on-navy:hover { filter: none; background-image: linear-gradient(180deg, #FFD6DF 0%, #F7B5C4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 26px 38px -16px rgba(0, 0, 0, 0.6); }
.textlink { font-weight: 500; white-space: nowrap; }

/* contact form: sits on the navy band, works without JavaScript. Only index/prototypes/governance have a
   <form class="cf">, so this is safe to leave global. */
.contact { margin-top: var(--s3); max-width: 30rem; }
.cf-field { margin: 0 0 var(--s2); }
.cf label { display: block; margin: 0 0 0.4rem; font-size: 0.9375rem; font-weight: 500; color: var(--ground); }
.cf input[type="text"], .cf input[type="email"], .cf textarea { display: block; width: 100%; font: inherit; font-size: 1rem; color: var(--navy); background: var(--ground); border: 2px solid transparent; border-radius: 10px; padding: 0.8rem 0.95rem; min-height: 3rem; -webkit-appearance: none; appearance: none; }
.cf textarea { min-height: 8.5rem; resize: vertical; line-height: 1.45; }
.cf input:focus-visible, .cf textarea:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.cf input[aria-invalid="true"], .cf textarea[aria-invalid="true"], .cf input[type="text"][aria-invalid="true"], .cf input[type="email"][aria-invalid="true"] { border-color: var(--pink); }
.cf button.cta:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.cf-err { margin: 0.4rem 0 0; color: var(--pink); font-size: 0.9375rem; }
.cf-hint { margin: 0.4rem 0 0; color: rgba(245, 242, 236, 0.78); font-size: 0.875rem; }
.cf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 0 0 var(--s2); }
.cf button.cta { border: 0; cursor: pointer; font: inherit; font-weight: 600; margin: var(--s1) 0 0; }
.cf button.cta[disabled] { opacity: 0.7; cursor: progress; transform: none; filter: none; }
.cf-status { margin: 0.75rem 0 0; min-height: 1.4em; color: var(--ground); font-size: 0.9375rem; }
.cf-msg { display: none; margin: 0 0 var(--s3); padding-top: var(--s2); border-top: 2px solid var(--pink); }
.cf-msg:target, .cf-msg.open { display: block; }
.cf-msg:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.cf-msg p { margin: 0 0 0.5rem; color: var(--ground); }
.cf-msg .cf-big { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
#contact-sent:target ~ .cf { display: none; }
/* with JavaScript the page controls the messages itself, so a leftover #fragment can never show a stale one */
.cf-js .cf-msg:not(.open) { display: none; }
.cf-js #contact-sent:target ~ .cf { display: block; }
.contact.is-sent .cf { display: none !important; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin: 1.6rem 0 0; }
.hero-copy { margin-top: 1.5rem; }

/* SHARED CHROME — header. This is the block that was inconsistent: .top nav a / :hover / [aria-current]
   was present only on index.html and governance.html before this file existed, absent from about,
   prototypes AND legal (found after the owner reported about.html specifically; re-measuring the other
   four pages showed it was majority-broken, not a one-page fault — see card #35 / navspec addendum).
   Restored here as one shared, always-present rule, which is the whole point of this file: a page that
   links it cannot be missing a rule it contains. */
.top { position: sticky; top: 0; z-index: 40; background: rgba(245, 242, 236, 0.86); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top { background: var(--ground); } }
.top.is-scrolled { background: rgba(245, 242, 236, 0.95); border-bottom-color: var(--rule); }
.top .bar { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 14px; padding-right: 0; padding-bottom: 14px; gap: 1rem; }
.brandmark { display: flex; align-items: center; gap: 10px; line-height: 0; }
.brandmark, .brandmark:hover { text-decoration: none; }
.brandmark img { width: 36px; height: auto; }
.brandmark .wordmark { line-height: 1; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
.top .navgroup { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0; }
.top .navgroup .cta { order: 1; }
.menu-btn { order: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; font: inherit; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { color: var(--navy); background: var(--tint); }
.menu-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.menu-icon { width: 20px; height: 15px; }
.top .navgroup nav { order: 3; flex-basis: 100%; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.top .navgroup nav[hidden] { display: none; }
.top nav a { display: inline-block; padding: 9px 5px; margin-left: 12px; font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--navy); }
.top nav a[aria-current] { color: var(--navy); text-decoration: underline; text-decoration-color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.top .cta { padding: 12px 20px; font-size: 0.9375rem; min-height: 44px; }
.disclosure { position: relative; }
.disclosure-btn { display: inline-flex; align-items: center; gap: 5px; padding: 9px 5px; margin-left: 12px; font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; min-height: 44px; }
.disclosure-btn:hover { color: var(--navy); }
.disclosure-btn[aria-expanded="true"] { color: var(--navy); }
.disclosure-btn .chev { width: 10px; height: 7px; flex: 0 0 auto; transition: transform 0.15s ease; }
.disclosure-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.disclosure-menu { display: flex; flex-direction: column; }
.disclosure-menu[hidden] { display: none; }
.disclosure-menu a { display: flex; align-items: center; gap: 6px; padding: 10px 5px 10px 17px; font-size: 0.9375rem; font-weight: 500; color: var(--muted); text-decoration: none; min-height: 44px; }
.disclosure-menu a:hover, .disclosure-menu a:focus-visible { color: var(--navy); }
.disclosure-menu .ext { font-size: 0.85em; opacity: 0.55; }

/* hero: a self-hosted constellation photo (sparse stars, restrained, no starfield sparkle) under a navy wash.
   "a constellation of microservices" — the brand metaphor, so this is on-concept, not decoration.
   Photo: Jack B (@nervum) on Unsplash — https://unsplash.com/photos/pVy76gJ7F_U — Unsplash License
   (free for commercial and noncommercial use, no permission or attribution required; credited here anyway).
   Only index/prototypes/governance have a .hero — safe to leave global. */
.hero { position: relative; overflow: hidden; background-color: var(--navy); color: var(--ground); }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; }
.hero::before {
  background-image: url("hero/constellation-mobile.jpg");
  background-size: cover; background-position: center 40%; background-repeat: no-repeat;
}
@supports (background-image: url("data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==")) {
  .hero::before { background-image: url("hero/constellation-mobile.webp"); }
}
.hero::after {
  background-image: linear-gradient(180deg, rgba(3, 19, 38, 0.87) 0%, rgba(5, 32, 60, 0.72) 45%, rgba(3, 19, 38, 0.92) 100%),
    radial-gradient(ellipse 46rem 26rem at 10% -6rem, rgba(50, 104, 168, 0.5), rgba(50, 104, 168, 0) 100%);
}
.hero .body { position: relative; z-index: 1; padding-top: 3.25rem; padding-bottom: 3.5rem; }
.hero h1, .hero .lede { color: var(--ground); }
.hero .small { color: rgba(245, 242, 236, 0.78); }
.hero a { color: var(--ground); text-decoration-color: rgba(245, 242, 236, 0.5); }
.hero a:hover { text-decoration-color: var(--ground); }
.hero a:focus-visible { outline-color: var(--pink); }
#contact, #live, #how { scroll-margin-top: 6rem; }

/* .page-head / dl.fields / .points(base) / [id] scroll-margin: the "simple page" (about, legal) components.
   .points(base) is also used identically by prototypes.html's product list, so it stays global; prototypes'
   OWN extra modifiers (.sub, .team, .tag) are page-specific, further down. */
.page-head { padding: 2.75rem 0 1rem; }
dl.fields { margin: 0.75rem 0 0; padding: 0; }
dl.fields > div { padding: 0.7rem 0; border-top: 1px solid var(--rule); }
dl.fields > div:last-child { border-bottom: 1px solid var(--rule); }
dl.fields dt { color: var(--muted); font-size: 0.875rem; font-weight: 400; margin-bottom: 2px; }
dl.fields dd { margin: 0; font-size: 1.05rem; font-weight: 500; }
.points { list-style: none; margin: 1rem 0 0; padding: 0; }
.points li { position: relative; padding: 1.15rem 0 1.15rem 1.9rem; border-top: 1px solid var(--rule); max-width: 40rem; }
.points li:first-child { border-top: 0; padding-top: 0; }
.points li::before { content: ""; position: absolute; left: 2px; top: 1.75rem; width: 0; height: 0; border: 5px solid var(--navy); border-radius: 50%; }
.points li:first-child::before { top: 0.6rem; }
.points .pname { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.points .pdesc { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; margin-top: 2px; }
[id] { scroll-margin-top: 6rem; }

/* legal.html-only: the placeholder/TODO markers and plain lists used while parts of the legal notice were
   still being filled in, and the inline "blank" flag for an unfilled field. */
body.page-legal .todo { display: block; margin: 0.6rem 0 0; padding: 0.9rem 1rem; border: 2px dashed var(--pink); border-radius: 10px; background: var(--lift); color: var(--navy); font-size: 0.9375rem; line-height: 1.5; font-weight: 500; }
body.page-legal .todo strong { font-weight: 700; }
body.page-legal .blank { color: #B2296B; font-style: italic; font-weight: 600; }
body.page-legal dl.fields dd.blank { color: var(--pink); font-style: italic; font-weight: 600; }
body.page-legal ul.plain { margin: 0.5rem 0 1rem; padding-left: 1.2rem; }
body.page-legal ul.plain li { margin: 0 0 0.5rem; max-width: 38rem; }

/* sections do different jobs, so they are sized and grounded differently. Base .sec is shared; .sec .wrap's
   padding is page-type split (hero pages run a taller rhythm than the simple pages). */
.sec { position: relative; }
body.page-index .sec .wrap, body.page-prototypes .sec .wrap, body.page-governance .sec .wrap { padding-top: 3rem; padding-bottom: 3rem; }
body.page-about .sec .wrap, body.page-legal .sec .wrap { padding-top: 2.25rem; padding-bottom: 2.25rem; border-top: 1px solid var(--rule); }
.sec.lift { background: var(--lift); }
.sec.tint { background: var(--tint); background-image: linear-gradient(180deg, #E8ECEF 0%, #F0F2F4 100%); }
.sec.navy { background-color: var(--navy); background-image: radial-gradient(ellipse 40rem 22rem at 12% -4rem, rgba(30, 78, 130, 0.5), rgba(30, 78, 130, 0) 100%); color: var(--ground); }
/* the closing contact band: a navy ground with light falling from the top left, behind the title, and the fields on the darker part */
.sec.navy.close { background-color: #052444; background-image: radial-gradient(ellipse 46rem 26rem at 8% -6rem, rgba(40, 96, 160, 0.45), rgba(40, 96, 160, 0) 100%), linear-gradient(135deg, #0C3866 0%, #052444 48%, #031C36 100%); }
.sec.navy h2 { color: var(--ground); }
.sec.navy .statements li { border-top-color: rgba(245, 242, 236, 0.26); color: var(--ground); }
.sec.navy .statements li:last-child { border-bottom-color: rgba(245, 242, 236, 0.26); }
/* the one light-pink hairline, on navy only */
.sec.navy.hairline h2::after { content: ""; display: block; width: 46px; border-top: 2px solid var(--pink); margin-top: 16px; }
.sec.navy a { color: var(--ground); text-decoration-color: rgba(245, 242, 236, 0.5); }
.sec.navy .cta.on-navy { color: var(--navy); text-decoration: none; }
.sec.navy a:focus-visible { outline-color: var(--pink); }
.sec.navy .small { color: rgba(245, 242, 236, 0.78); }
.label { margin-bottom: 1.25rem; }

.terms { margin: 0; padding: 0; }
.terms > div { padding: 0.9rem 0; border-top: 1px solid var(--rule-strong); }
.terms > div:last-child { border-bottom: 1px solid var(--rule-strong); }
.terms dt { color: var(--muted); font-size: 0.875rem; font-weight: 400; margin-bottom: 2px; }
.terms dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }
.terms dd.big { font-size: 1.6rem; line-height: 1.08; font-weight: 700; letter-spacing: -0.04em; }
.spec .wrap { padding-top: 2.5rem; padding-bottom: 3rem; }
.spec .terms > div { padding: 1rem 0; }

.statements { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.statements li { padding: 0.95rem 0; border-top: 1px solid var(--rule-strong); font-size: 1.35rem; line-height: 1.16; font-weight: 400; letter-spacing: -0.03em; max-width: 24ch; }
.statements li:last-child { border-bottom: 1px solid var(--rule-strong); }

/* the ten days, drawn as a sequence: a rail, three points, widths in proportion to the time */
.days { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.days li { position: relative; display: flex; flex-direction: column; padding: 0 0 var(--s4) 3.4rem; }
.days li::before { content: ""; position: absolute; left: 0.3rem; top: 0.75rem; bottom: -0.25rem; width: 0; border-left: 1px solid var(--rule-strong); }
.days li:last-child { padding-bottom: 0; }
.days li:last-child::before { display: none; }
.days li::after { content: ""; position: absolute; left: 0; top: 0.42rem; width: 0; height: 0; border: 0.4rem solid var(--navy); border-radius: 50%; }
/* every cell has the same four slots in the same order, so the anchors repeat and the eye tracks them */
.days .num { display: block; font-size: 2.2rem; line-height: 1; font-weight: 400; letter-spacing: -0.05em; margin: 0 0 var(--s1); }
.days .when { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.2; font-weight: 400; margin: 0 0 var(--s2); }
.days .head { display: block; font-size: 1.05rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--s1); }
.days p { margin: 0; max-width: none; }

/* cookie banner: OFF by default (see the script near the end of the body). The site sets no cookies today,
   so this ships inert — markup and styles ready, nothing runs unless COOKIE_BANNER_ENABLED is flipped to true. */
.cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--navy); box-shadow: 0 -8px 24px rgba(5, 36, 68, 0.35); }
.cookiebar[hidden] { display: none; }
.cookiebar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1rem 0; }
.cookiebar-inner p { margin: 0; max-width: 40rem; color: rgba(245, 242, 236, 0.9); }
.cookiebar-inner a { color: var(--ground); }
.cookiebar-ok { flex: 0 0 auto; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 10px; background: var(--pink); color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; }
.cookiebar-ok:focus-visible { outline: 3px solid var(--ground); outline-offset: 2px; }
@media print { .cookiebar { display: none !important; } }

/* SHARED CHROME — footer: dark, a distinct constellation photo (not the hero's), the site's closing anchor —
   deliberately larger than a thin strip. on-navy tokens apply; pink is permitted here as the one accent on
   a dark surface. Photo: Steve Busch on Unsplash — https://unsplash.com/photos/S40kLmc0lsE — Unsplash
   License (free for commercial and noncommercial use, no permission or attribution required; credited here
   anyway). .print-only is the other rule that was found missing (from about.html and legal.html) — it is
   what hides the dark, print-only footer lockup on screen; without it, the mark rendered twice, stacked.
   Restored here as one shared, always-present rule, on every page. */
.print-only { display: none; }
.foot { position: relative; overflow: hidden; background-color: var(--navy); color: var(--ground); }
.foot::before, .foot::after { content: ""; position: absolute; inset: 0; }
.foot::before {
  background-image: url("footer/footer-mobile.jpg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
@supports (background-image: url("data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==")) {
  .foot::before { background-image: url("footer/footer-mobile.webp"); }
}
.foot::after {
  background-image: linear-gradient(180deg, rgba(2, 12, 24, 0.93) 0%, rgba(3, 17, 33, 0.9) 55%, rgba(2, 10, 20, 0.96) 100%);
}
.foot .wrap { position: relative; z-index: 1; padding-top: var(--foot-y); padding-bottom: var(--foot-y); }
.foot-logo-light { display: block; width: 132px; height: auto; margin-bottom: 1.5rem; }
.foot-logo-dark { width: 132px; height: auto; margin-bottom: 1.5rem; }
.foot-ethos { margin: 0.25rem 0 0; max-width: 22rem; font-size: 1.2rem; line-height: 1.32; font-weight: 500; letter-spacing: -0.02em; color: var(--ground); }
.foot p { color: rgba(245, 242, 236, 0.82); font-size: 0.9375rem; max-width: 30rem; }
.foot a { color: var(--ground); text-decoration-color: rgba(245, 242, 236, 0.5); }
.foot a:hover { text-decoration-color: var(--pink); }
.foot a:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.foot nav a { display: inline-block; padding: 8px 2px; font-size: 0.9375rem; white-space: nowrap; }
.foot-products { margin-bottom: 0.35rem; }
.foot-social { display: flex; gap: 10px; margin-top: 1rem; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ground); }
.foot-social a:hover, .foot-social a:focus-visible { color: var(--pink); }
.foot-social a:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.foot-social svg { width: 22px; height: 22px; fill: currentColor; }
@media print { .foot-social { display: none !important; } }

@media (min-width: 52rem) {
  .wrap { padding: 0 48px; }
  .top .bar { padding-top: 18px; padding-right: 0; padding-bottom: 18px; }
  .top .navgroup { flex-wrap: nowrap; }
  .menu-btn { display: none; }
  .top .navgroup nav[hidden] { display: flex !important; }
  .top .navgroup .cta { order: 0; margin-left: var(--s4); }
  .top .navgroup nav { order: 0; flex-basis: auto; flex-wrap: nowrap; align-items: center; }
  .disclosure-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--lift); border-radius: 10px; padding: 8px; min-width: 200px;
    box-shadow: 0 0 0 1px rgba(5, 36, 68, 0.12), 0 34px 60px -34px rgba(5, 36, 68, 0.55), 0 12px 22px -14px rgba(5, 36, 68, 0.25); z-index: 50; }
  .disclosure-menu a { padding: 9px 10px; border-radius: 6px; }
  .disclosure-menu a:hover, .disclosure-menu a:focus-visible { background: var(--tint); }
  .brandmark img { width: 40px; }
  .foot::before { background-image: url("footer/footer-desktop.jpg"); }
  .foot-ethos { font-size: 1.4rem; max-width: 24rem; }
  @supports (background-image: url("data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==")) {
    .foot::before { background-image: url("footer/footer-desktop.webp"); }
  }
  .foot .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-top: var(--foot-y-lg); padding-bottom: var(--foot-y-lg); }
  .foot .brandblock { grid-column: 1 / span 4; }
  .foot .fine { grid-column: 6 / span 6; }
  /* page-type desktop overrides */
  body.page-index h2, body.page-prototypes h2, body.page-governance h2 { font-size: 1.95rem; letter-spacing: -0.035em; }
  body.page-index .lede, body.page-prototypes .lede, body.page-governance .lede { font-size: 1.35rem; max-width: 27rem; }
  body.page-index .sec .wrap, body.page-prototypes .sec .wrap, body.page-governance .sec .wrap { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  body.page-about h2, body.page-legal h2 { font-size: 1.7rem; letter-spacing: -0.035em; }
  body.page-about h1 { max-width: 18ch; }
  body.page-about .page-head, body.page-legal .page-head { padding: 4.5rem 0 1.5rem; max-width: 44rem; }
  body.page-about .sec .wrap, body.page-legal .sec .wrap { padding-top: 3rem; padding-bottom: 3rem; max-width: 50rem; }
  .hero::before { background-image: url("hero/constellation-desktop.jpg"); background-position: center 60%; }
  @supports (background-image: url("data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==")) {
    .hero::before { background-image: url("hero/constellation-desktop.webp"); }
  }
  .hero .body { padding-top: 6.5rem; padding-bottom: 6rem; }
  .hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .hero h1 { grid-column: 1 / span 9; grid-row: 1; }
  .hero .hero-copy { grid-column: 1 / span 6; grid-row: 2; margin-top: 2.5rem; }
  .terms dd.big { font-size: 2.3rem; }
  .spec .wrap { padding-top: 4rem; padding-bottom: 4.5rem; }
  .spec .terms { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .spec .terms > div { border-bottom: 0; padding: 1.1rem 0 0; min-height: 7.5rem; }
  .spec .terms.two { grid-template-columns: repeat(2, 1fr); }
  .split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .split > h2, .split > .label { grid-column: 1 / span 4; margin-bottom: 0; }
  .split > .main { grid-column: 5 / span 8; }
  .statements { margin-top: 0; }
  .statements li { font-size: 2rem; padding: 1.05rem 0; max-width: 22ch; }
  .days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s5); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule-strong); }
  .days li { padding: 0; }
  .days li::before { display: none; }
  .days li::after { top: calc(-1 * var(--s4)); left: 0; margin-top: -0.4rem; }
  .days .num { font-size: 3.75rem; letter-spacing: -0.055em; margin-bottom: var(--s2); }
  .days .when { margin-bottom: var(--s3); }
  .days .head { font-size: 1.2rem; margin-bottom: var(--s2); }
  .days p { max-width: 22rem; }
}

@media print {
  :root:root:root { --lift: #ffffff; --tint: #ffffff; --rule: #d3d5d4; --rule-strong: #b7bcc0; }
  @page { size: A4; margin: 14mm 16mm; }
  body { font-size: 10pt; line-height: 1.45; }
  .wrap { padding: 0; max-width: none; }
  .top { position: static; }
  .top .bar { padding-top: 0; padding-bottom: 8px; }
  .print-only { display: block; }
  /* hero pages keep the header/CTA hidden and the hero/navy sections converted to plain ink-on-white;
     simple pages (about, legal) hide the nav/CTA and the whole footer outright, and never had a hero or
     navy section to convert. Two genuinely different print behaviours, kept exactly as each page already
     had them; not something this refactor changed. */
  body.page-index .top nav, body.page-prototypes .top nav, body.page-governance .top nav { display: none; }
  body.page-index .top .cta, body.page-prototypes .top .cta, body.page-governance .top .cta,
  body.page-index .menu-btn, body.page-prototypes .menu-btn, body.page-governance .menu-btn { display: none; }
  body.page-about .top nav, body.page-legal .top nav,
  body.page-about .top .cta, body.page-legal .top .cta,
  body.page-about .menu-btn, body.page-legal .menu-btn { display: none; }
  body.page-index .hero, body.page-prototypes .hero, body.page-governance .hero,
  body.page-index .sec.lift, body.page-prototypes .sec.lift, body.page-governance .sec.lift,
  body.page-index .sec.tint, body.page-prototypes .sec.tint, body.page-governance .sec.tint,
  body.page-index .sec.navy, body.page-prototypes .sec.navy, body.page-governance .sec.navy { background: none; color: var(--ink); }
  .hero::before, .hero::after { display: none !important; }
  .hero h1, .hero .lede, .hero .small, .hero a { color: var(--ink) !important; }
  .sec.navy h2, .sec.navy a { color: var(--ink); }
  .sec.navy .small { color: var(--muted); }
  .sec.navy .statements li, .sec.navy .statements li:last-child { color: var(--ink); border-color: var(--rule-strong); }
  .sec.navy.hairline h2::after { display: none; }
  .cta, .cta.on-navy { background: none; box-shadow: none; color: var(--navy); border: 2px solid var(--navy); }
  .contact { display: none; }
  .hero-grid, .split, .days { display: block; }
  .days li, .points li { break-inside: avoid; }
  body.page-about .foot, body.page-legal .foot { display: none; }
  body.page-index .foot, body.page-prototypes .foot, body.page-governance .foot { margin-top: 8px !important; background: none !important; color: var(--ink) !important; }
  body.page-index .foot::before, body.page-prototypes .foot::before, body.page-governance .foot::before,
  body.page-index .foot::after, body.page-prototypes .foot::after, body.page-governance .foot::after { display: none !important; }
  body.page-index .foot-logo-light, body.page-prototypes .foot-logo-light, body.page-governance .foot-logo-light { display: none !important; }
  body.page-index .foot .wrap, body.page-prototypes .foot .wrap, body.page-governance .foot .wrap { display: block !important; padding-top: 6px !important; padding-bottom: 0 !important; }
  body.page-index .foot img, body.page-prototypes .foot img, body.page-governance .foot img { width: 64px !important; margin-bottom: 6px !important; }
  body.page-index .foot p, body.page-prototypes .foot p, body.page-governance .foot p { font-size: 0.8rem !important; margin-bottom: 4px !important; color: var(--muted) !important; }
  body.page-index .foot nav, body.page-prototypes .foot nav, body.page-governance .foot nav { display: none !important; }
  .hero .body { padding-top: 0 !important; }
  .spec .terms > .print-hide { display: none !important; }
  .offer-hero .small { display: none !important; }
  .spec .terms > div { padding: 4px 0 !important; min-height: 0 !important; }
  .spec .terms dt { font-size: 0.8rem !important; }
  .spec .terms dd { font-size: 0.95rem !important; }
  .spec .wrap { padding-top: 6px !important; padding-bottom: 6px !important; }
  .spec .terms { display: block !important; }
  .terms > div { padding: 6px 0 !important; }
  .terms { margin-top: 10px !important; }
  .terms dd.big { font-size: 1.25rem !important; }
  h1, .offer-hero h1 { font-size: 2.1rem !important; line-height: 1 !important; letter-spacing: -0.03em !important; margin-left: 0 !important; }
  h2 { font-size: 1.05rem !important; letter-spacing: -0.015em !important; margin-bottom: 6px !important; }
  .lede { font-size: 1.05rem !important; margin-bottom: 8px; }
  .bigprice { font-size: 1.9rem !important; margin: 4px 0 !important; }
  .quote, .pull { font-size: 1.15rem !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; max-width: none !important; margin-bottom: 6px !important; }
  .quote, .pull, .lede { break-inside: avoid !important; }
  .statements li { font-size: 1rem !important; letter-spacing: -0.01em !important; max-width: none !important; padding: 4px 0 !important; }
  .days .num { font-size: 1.5rem !important; letter-spacing: -0.03em !important; }
  .days .head { font-size: 0.95rem !important; margin-bottom: 2px !important; }
  .days .when { margin-bottom: 4px !important; }
  .days li { padding-bottom: 8px !important; }
  .sec { break-inside: auto !important; }
  body.page-index .sec .wrap, body.page-prototypes .sec .wrap, body.page-governance .sec .wrap { padding-top: 7px !important; padding-bottom: 7px !important; }
  .close h2 { font-size: 1.2rem !important; letter-spacing: -0.02em !important; }
  .close .grid { display: block !important; }
  .sec.navy.close { background: none !important; }
  .points li::before { top: 13px !important; }
  .points li:first-child::before { top: 5px !important; }
  .points li { padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* small utility helpers, used in place of one-off style= attributes for simple paragraph spacing/width that
   doesn't warrant its own named rule. #live's overflow:hidden is like this too — targeted by the id the
   markup already carries, rather than a class, since it is the one element that needs it. */
#live { overflow: hidden; }
.mt-075 { margin-top: 0.75rem; }
.mt-1 { margin-top: 1rem; }
.mt-125 { margin-top: 1.25rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-175 { margin-top: 1.75rem; }
.m-0 { margin: 0; }
.mw-30 { max-width: 30rem; }

/* .quote "big" variant: used inline within body copy on governance.html and prototypes.html, distinct from
   the larger pull-quote in index.html's Why section (.pull/.quote, page-index-only, further down). Shared
   type; max-width and margin differ per quote's own text length, checked against the actual copy — same
   "measure set per headline" reasoning as .close h2 below, not an accidental drift. */
.quote.big { font-size: 1.9rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.04em; }
body.page-governance .quote.big { max-width: 20ch; margin: 0 0 1rem; }
body.page-prototypes .quote.big { max-width: 24ch; margin: 0; }

/* index.html-only: the Live-today product constellation, and the Who You Deal With side column. */
body.page-index .frame { display: block; border-radius: 10px; overflow: hidden; background: #ffffff; text-decoration: none; box-shadow: 0 0 0 1px rgba(5, 36, 68, 0.12), 0 34px 60px -34px rgba(5, 36, 68, 0.55), 0 12px 22px -14px rgba(5, 36, 68, 0.25); }
body.page-index .frame:hover { text-decoration: none; }
body.page-index .frame:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; border-radius: 10px; }
body.page-index .frame .bar { display: block; padding: 6px 12px; background: #EDEFF1; border-bottom: 1px solid rgba(5, 36, 68, 0.1); color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; }
body.page-index .frame img { width: 100%; height: auto; }
body.page-index .pt figcaption { margin-top: 0.85rem; max-width: 22rem; }
body.page-index .pt figcaption strong { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; display: block; }
body.page-index .pt figcaption span { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
body.page-index .constellation { margin-top: 2.25rem; }
body.page-index .pt { margin: 0 0 2.25rem; }
body.page-index .pt-a .frame { margin-right: -24px; }
body.page-index .pt-t { width: 88%; margin-left: auto; }
body.page-index .pt-m { width: 92%; }
body.page-index .pt-g { width: 90%; margin: 0 0 0 auto; }
body.page-index .pt-v { width: 88%; margin: 0 auto 0 0; }
body.page-index .live-head p { margin-top: 0.9rem; }
body.page-index .pull { font-size: 1.6rem; line-height: 1.1; font-weight: 500; letter-spacing: -0.04em; max-width: 17ch; margin-bottom: 1.5rem; }
body.page-index .quote { font-size: 1.55rem; line-height: 1.12; font-weight: 400; letter-spacing: -0.04em; max-width: 22ch; margin-bottom: 1.5rem; }
body.page-index .who h2 { margin-bottom: 1.25rem; }
body.page-index .who .side { margin-top: 1.5rem; }
body.page-index .who .byline { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 1.1rem; color: var(--ink); }
/* .close h2/.close p: index and prototypes both have a .close section, with genuinely different headline
   text ("Send your idea in a few lines." vs "How do I start?") — the different max-width/line-height values
   below are each headline's own chosen measure (design system: "set the measure per headline"), checked
   against the actual copy, not an accidental drift. Kept exactly as each page had them. */
body.page-index .close h2 { font-size: 1.9rem; letter-spacing: -0.04em; line-height: 1.02; max-width: 14ch; margin-bottom: 1.25rem; }
body.page-index .close p { max-width: 26rem; }
@media (min-width: 52rem) {
  body.page-index .constellation { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 3.5rem; }
  body.page-index .pt { margin: 0; }
  body.page-index .pt-a { grid-column: 1 / span 8; grid-row: 1; margin: 0; width: auto; }
  body.page-index .pt-a .frame { margin-left: -3rem; margin-right: 0; }
  body.page-index .pt-t { grid-column: 8 / span 5; grid-row: 2; margin: -7.5rem 0 0; width: auto; position: relative; z-index: 2; }
  body.page-index .pt-t figcaption { margin-left: auto; margin-right: 0; }
  body.page-index .pt-m { grid-column: 3 / span 6; grid-row: 3; margin: 1rem 0 0; width: auto; position: relative; z-index: 3; }
  body.page-index .pt-g { grid-column: 6 / span 7; grid-row: 4; margin: 1.75rem 0 0; width: auto; position: relative; z-index: 2; }
  body.page-index .pt-v { grid-column: 2 / span 8; grid-row: 5; margin: 1.5rem 0 0; width: auto; position: relative; z-index: 2; }
  body.page-index .pt-a figcaption { margin-top: 1rem; }
  body.page-index .live-head { max-width: 30rem; }
  body.page-index .who .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  body.page-index .who h2 { grid-column: 3 / span 8; margin-bottom: 2rem; }
  body.page-index .who .body2 { grid-column: 3 / span 8; }
  body.page-index .who .body2 .pull { font-size: 2.6rem; max-width: 18ch; margin-bottom: 1.75rem; }
  body.page-index .who .side { grid-column: 3 / span 6; margin-top: 0; }
  body.page-index .why .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
  body.page-index .why .quote { grid-column: 1 / span 9; font-size: 2.5rem; max-width: 26ch; margin-bottom: 0; }
  body.page-index .why .note { grid-column: 10 / span 3; margin-bottom: 0.6rem; }
  body.page-index .close .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  body.page-index .close h2 { grid-column: 1 / span 6; font-size: 3.1rem; max-width: 12ch; margin-bottom: 0; }
  body.page-index .close .askcol { grid-column: 8 / span 5; }
}
@media (min-width: 80rem) { body.page-index .pt-a .frame { margin-left: -6rem; margin-right: 0; } }
@media print {
  body.page-index .constellation { display: block; }
  body.page-index .pt-a, body.page-index .pt-t, body.page-index .pt-m, body.page-index .pt-g, body.page-index .pt-v { width: 62%; margin: 0 0 10px; }
  body.page-index .pt-a .frame { margin: 0; }
  body.page-index .frame { box-shadow: none; border: 1px solid var(--rule-strong); }
  body.page-index .who .grid, body.page-index .why .grid, body.page-index .close .grid { display: block; }
  body.page-index .pull, body.page-index .quote, body.page-index .byline { font-size: 1.25rem; }
  /* dead code, faithfully preserved: overridden immediately by the shared !important rule above regardless of this value */
  body.page-index .close h2 { font-size: 1.5rem; }
}

/* prototypes.html-only: the fixed-price display, role tags, and the two extra .points list modifiers
   (sub-items, team-collaboration marker) its product list uses that about.html's simpler list does not. */
body.page-prototypes .nw { white-space: nowrap; }
body.page-prototypes .bigprice { font-size: 3.2rem; line-height: 1; font-weight: 600; letter-spacing: -0.055em; margin: 1.75rem 0 0.4rem; font-variant-numeric: tabular-nums; }
body.page-prototypes .points li.sub { margin-left: 1.6rem; }
body.page-prototypes .points li.sub::before { border-width: 4px; left: 3px; }
body.page-prototypes .points li.team::before { width: 6px; height: 6px; border: 2px solid rgba(5, 36, 68, 0.55); }
body.page-prototypes .points li.team.sub::before { width: 4px; height: 4px; }
body.page-prototypes .points li.team { border-top-color: var(--rule-strong); }
body.page-prototypes .tag { display: inline-block; margin-left: 6px; padding: 1px 9px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--lift); color: var(--ink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.6; vertical-align: 2px; white-space: nowrap; }
body.page-prototypes .close h2 { font-size: 1.9rem; letter-spacing: -0.04em; line-height: 1; margin-bottom: 1rem; }
body.page-prototypes .close p { max-width: 26rem; }
body.page-prototypes .close .small { margin-top: 1rem; }
body.page-prototypes .offer-hero h1 { font-size: 2.4rem; font-size: clamp(2.4rem, 9.6vw, 4.2rem); }
@media (min-width: 52rem) {
  body.page-prototypes .bigprice { font-size: 3.6rem; font-size: clamp(3.6rem, 7.2vw, 5rem); margin-top: 2rem; white-space: nowrap; }
  body.page-prototypes .offer-hero .hero-copy { grid-column: 1 / span 8; grid-row: 2; margin-top: 2.25rem; }
  body.page-prototypes .close .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  body.page-prototypes .close h2 { grid-column: 1 / span 6; font-size: 3.1rem; margin-bottom: 0; }
  body.page-prototypes .close .askcol { grid-column: 8 / span 5; }
}
@media print {
  /* dead code, faithfully preserved: overridden immediately by the shared !important rules above regardless of these values */
  body.page-prototypes .bigprice { font-size: 2rem; margin: 6px 0; }
  body.page-prototypes .close .grid { display: block; }
  body.page-prototypes .close h2 { font-size: 1.3rem; }
}

/* 404.html (card #38) — same "simple page" type as about/legal (restrained type, .page-head, no hero), but
   given its own selector group rather than folded into the about/legal grouped rules above, so this
   addition is purely additive and doesn't touch any line those pages' rules live on — mac-dev-1 is in
   legal.html and governance.html concurrently under card #37. Values match about.html/legal.html exactly. */
body.page-404 h1 { font-size: 2.1rem; font-size: clamp(2.1rem, 7vw, 3rem); line-height: 1.04; letter-spacing: -0.04em; margin-left: -0.02em; }
body.page-404 p { margin: 0 0 1rem; max-width: 38rem; }
body.page-404 .lede { font-size: 1.15rem; line-height: 1.4; letter-spacing: -0.012em; max-width: 34rem; color: var(--ink); }
body.page-404 .sec .wrap { padding-top: 2.25rem; padding-bottom: 2.25rem; border-top: 1px solid var(--rule); }
@media (min-width: 52rem) {
  body.page-404 h2 { font-size: 1.7rem; letter-spacing: -0.035em; }
  body.page-404 .page-head { padding: 4.5rem 0 1.5rem; max-width: 44rem; }
  body.page-404 .sec .wrap { padding-top: 3rem; padding-bottom: 3rem; max-width: 50rem; }
}
@media print {
  body.page-404 .top nav, body.page-404 .top .cta, body.page-404 .menu-btn { display: none; }
  body.page-404 .foot { display: none; }
}
