/* ==========================================================================
   Post App Clarity — site stylesheet
   Stage 4 build. Consumes tokens.css; adds no new palette values.

   Everything here is a real rule in a real stylesheet. The stage 3 prototype
   compiled `style-hover` / `style-focus` attributes and `sc-if` / `sc-for`
   elements in the browser before paint; none of that ships. No page needs
   JavaScript to render or to be styled correctly.
   ========================================================================== */

/* ---------- 1. FONTS — self-hosted, zero third-party requests -------------
   Michroma, Space Grotesk and JetBrains Mono, all SIL Open Font License,
   licenses alongside the files in /assets/fonts/. Latin subset only.
   Space Grotesk and JetBrains Mono are variable fonts: one file each covers
   the whole weight range, which is why there is one @font-face per family
   rather than one per weight. */

@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/michroma-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;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/spacegrotesk-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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-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;
}

/* ---------- 2. RESET / BASE ---------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--pac-ink-100);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--pac-bg);
  color: var(--pac-text);
  font-family: var(--pac-font-sans);
  font-size: var(--pac-size-body);
  line-height: var(--pac-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--pac-link); text-decoration: none; }
a:hover { color: var(--pac-link-hover); }

img, svg { max-width: 100%; }
img { height: auto; }

input, textarea, select, button { font-family: inherit; }

::selection { background: var(--pac-mint-500); color: var(--pac-ink-100); }

/* The stage 2 focus ring, ported intact. Applies to every focusable thing. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--pac-focus-ring-width) solid var(--pac-focus-ring);
  outline-offset: var(--pac-focus-ring-offset);
  box-shadow: var(--pac-focus-glow);
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  top: var(--pac-space-2);
  left: var(--pac-space-2);
  z-index: 100;
  transform: translateY(-200%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--pac-action);
  color: var(--pac-action-text);
  font-size: var(--pac-size-body-sm);
  font-weight: var(--pac-weight-semibold);
  border-radius: var(--pac-radius-1);
  transition: transform var(--pac-dur-snap) var(--pac-ease-snap);
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--pac-action-text);
}

/* ---------- 3. LAYOUT PRIMITIVES ----------------------------------------- */

.container       { max-width: var(--pac-container); margin: 0 auto; }
.container-narrow{ max-width: var(--pac-container-narrow); margin: 0 auto; }

.section {
  padding: clamp(64px, 8vw, 96px) var(--pac-gutter);
  scroll-margin-top: 72px;
}
.section--bloom {
  position: relative;
  background: var(--pac-bg-bloom);
  padding: clamp(112px, 12vw, 152px) var(--pac-gutter) clamp(48px, 6vw, 72px);
}
.section--deep {
  background: var(--pac-bg-deep);
  padding: clamp(64px, 8vw, 112px) var(--pac-gutter) clamp(72px, 9vw, 128px);
}

/* The chrome hairline. Budget: two chrome elements per viewport. */
.rule-chrome { height: 1px; background: var(--pac-chrome-hairline); }

/* ---------- 4. TYPE ------------------------------------------------------ */

.eyebrow {
  display: block;
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  line-height: var(--pac-lh-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-mint-700);
}
.eyebrow--muted { color: var(--pac-text-muted); }

.display {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--pac-font-display);
  font-weight: var(--pac-weight-regular);
  text-transform: uppercase;
  color: var(--pac-text);
}

/* Chromatic split. Two aria-hidden copies offset behind the live text.
   Hidden by default; each split has its own viewport threshold below. */
.display__ghost {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}
.display__ghost--mint   { transform: translateX(-2px); color: var(--pac-mint-500); }
.display__ghost--violet { transform: translateX(2px);  color: var(--pac-violet-500); }
.display__text { position: relative; }

.lede {
  font-size: var(--pac-size-body-lg);
  line-height: var(--pac-lh-body-lg);
  color: var(--pac-text-secondary);
  text-wrap: pretty;
}

.h2 {
  margin: 0 0 var(--pac-space-5);
  font-size: clamp(24px, 3vw, 32px);
  line-height: var(--pac-lh-h2);
  letter-spacing: var(--pac-ls-h2);
  font-weight: var(--pac-weight-bold);
  color: var(--pac-text);
  text-wrap: pretty;
}

.prose p {
  margin: 0 0 var(--pac-para-gap);
  max-width: 60ch;
  color: var(--pac-text-secondary);
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--pac-space-2);
  height: 24px;
  padding: 0 10px;
  background: var(--pac-ink-200);
  border-radius: var(--pac-radius-1);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-text-secondary);
}
/* The NutHub orange. Product pixels, never studio paint — this dot and the
   two other declared uses are the only places #FF7A1A appears site-wide.
   Deliberately not a token. */
.tag__dot {
  width: 6px; height: 6px;
  border-radius: var(--pac-radius-pill);
  background: #FF7A1A;
}

.link-mono {
  display: inline-flex;
  align-items: center;
  gap: var(--pac-space-2);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-mint-300);
}
.link-mono__chevron { font-size: 14px; }

.link-underline {
  color: var(--pac-mint-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pac-link-underline);
}

/* ---------- 5. BUTTONS ---------------------------------------------------
   min-height + vertical padding, never a fixed height: a fixed height clips
   descenders the moment a label wraps. Stage 3 README §4.4. */

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: var(--pac-space-2);
  padding: 12px 20px;
  white-space: nowrap;
  font-size: 17px;
  font-weight: var(--pac-weight-semibold);
  border: none;
  border-radius: var(--pac-radius-1);
  cursor: pointer;
  transition: background var(--pac-dur-snap) var(--pac-ease-snap),
              border-color var(--pac-dur-snap) var(--pac-ease-snap),
              box-shadow var(--pac-dur-snap) var(--pac-ease-snap);
}

.btn--primary { background: var(--pac-action); color: var(--pac-action-text); }
.btn--primary:hover {
  background: var(--pac-action-hover);
  color: var(--pac-action-text);
  box-shadow: var(--pac-glow-mint);
}

.btn--ghost {
  background: transparent;
  border: var(--pac-border-1) solid var(--pac-mint-700);
  color: var(--pac-mint-300);
}
.btn--ghost:hover {
  border-color: var(--pac-mint-500);
  background: rgba(43, 255, 158, 0.08);
  color: var(--pac-mint-300);
}

.btn--sm { min-height: 36px; padding: 8px 14px; font-size: 15px; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--pac-space-4); }

/* ---------- 6. HEADER / NAV ---------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 72px;
}

/* Scrim and hairline. On every page except home these are simply on, which
   is what the prototype did for any non-home route. On home they fade in as
   the hero scrolls away, driven by a scroll timeline rather than a scroll
   listener. Where scroll-driven animation is unsupported they stay on —
   the honest fallback, and identical to the other six pages. */
.site-header__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 22, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 1;
}
.site-header__edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--pac-chrome-hairline);
  opacity: 1;
}

@keyframes pacNavReveal { from { opacity: 0; } to { opacity: 1; } }

@supports (animation-timeline: scroll()) {
  .page-home .site-header__scrim,
  .page-home .site-header__edge {
    opacity: 0;
    animation: pacNavReveal linear both;
    animation-timeline: scroll(root block);
    animation-range: 24px 88px;
  }
}

.site-header__inner {
  position: relative;
  height: 72px;
  max-width: var(--pac-container);
  margin: 0 auto;
  padding: 0 var(--pac-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pac-space-5);
}

.brand { display: flex; align-items: center; gap: var(--pac-space-3); flex: 0 0 auto; }
.brand:hover { color: var(--pac-text); }
.brand__mark { display: block; flex: 0 0 auto; }
.brand__word {
  font-family: var(--pac-font-display);
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: 0.02em;
  color: var(--pac-text);
  white-space: nowrap;
}

.nav { display: none; align-items: center; gap: clamp(14px, 2vw, 32px); white-space: nowrap; }

.nav__link {
  font-size: 15px;
  font-weight: var(--pac-weight-medium);
  color: var(--pac-ink-800);
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: var(--pac-border-2) solid transparent;
  transition: color var(--pac-dur-snap) var(--pac-ease-snap);
}
.nav__link:hover { color: var(--pac-mint-300); }
.nav__link[aria-current="page"] {
  color: var(--pac-mint-300);
  border-bottom-color: var(--pac-mint-500);
}

.nav__cta { display: none; }

/* ---------- 6b. MOBILE MENU ----------------------------------------------
   A native <details> disclosure, so it opens, closes and is keyboard
   operable with JavaScript switched off. site.js only adds the extras:
   Escape to close, focus trap, focus return, aria-expanded. */

.mnav { position: relative; }
.mnav > summary { list-style: none; cursor: pointer; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary::marker { content: ""; }

.mnav__button {
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: var(--pac-border-1) solid var(--pac-border);
  border-radius: var(--pac-radius-1);
}
.mnav__bar { display: block; width: 18px; height: 2px; background: var(--pac-text); }
.mnav__bar--accent { background: var(--pac-mint-500); }

/* Open: the summary becomes the panel's close control, landing exactly where
   the design puts it — panel padding (24px) in from top and right, 44×44. */
.mnav[open] > summary {
  position: fixed;
  top: var(--pac-gutter);
  right: var(--pac-gutter);
  z-index: 80;
}
.mnav[open] > summary .mnav__bar { display: none; }
.mnav[open] > summary .mnav__button::after {
  content: "\00D7";
  font-family: var(--pac-font-mono);
  font-size: 18px;
  color: var(--pac-text);
}

.mnav__panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: var(--pac-gutter);
  background: var(--pac-ink-100);
  animation: pacGlide var(--pac-dur-glide) var(--pac-ease-glide) both;
}

/* Header carries the symbol and the close control, nothing else — it mirrors
   the collapsed nav bar it replaces. Correction to stage 2 §1.2: the original
   268px estimate for the wordmark was wrong (183.5px measured), and a 20px
   wordmark here sets 282px, which does not clear the close button at 390px.
   The wordmark moves to the foot of the panel instead, where the room is. */
.mnav__head {
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: var(--pac-space-8);
}
.mnav__symbol { display: block; }

.mnav__links { display: flex; flex-direction: column; gap: var(--pac-space-5); }
.mnav__link {
  font-size: 24px;
  font-weight: var(--pac-weight-semibold);
  color: var(--pac-text);
}
.mnav__link:hover { color: var(--pac-mint-300); }
.mnav__divider { height: 1px; background: var(--pac-border); }
.mnav__link--minor { font-size: 17px; color: var(--pac-text-secondary); }

.mnav__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--pac-space-4);
}

/* The closing device, the same move the footer makes: the site opens on the
   symbol and closes on the wordmark. The panel is full-screen, so vertical
   room is free and horizontal room is not — this spends the free one, and the
   wordmark gets larger here rather than shrunk to squeeze past a button.
   Michroma sets "POST APP CLARITY" at 14.12x its font-size, so the size is
   solved against the available width instead of guessed: it can never overflow
   the gutters at any viewport, and caps at 24px. Well under the 40px chromatic
   split threshold, so no split here — consistent with the footer, which gates
   its split to >=900px. */
.mnav__wordmark {
  font-family: var(--pac-font-display);
  font-size: min(24px, calc(7vw - 4.4px));
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--pac-text);
  white-space: nowrap;
  margin-bottom: var(--pac-space-2);
}
.mnav__cta { justify-content: center; }
.mnav__mail {
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
  color: var(--pac-text-muted);
  text-align: center;
}

/* Lock the page behind the open panel. No JS required. */
body:has(.mnav[open]) { overflow: hidden; }

/* ---------- 7. HERO ------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--pac-bg-bloom);
  padding: clamp(120px, 14vw, 168px) var(--pac-gutter) clamp(56px, 7vw, 88px);
}
.hero__grid {
  max-width: var(--pac-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero__title {
  margin: 0 0 var(--pac-space-5);
  font-size: clamp(30px, 6.4vw, 72px);
  line-height: var(--pac-lh-display-1);
  letter-spacing: var(--pac-ls-display-1);
}
.hero__lede { max-width: 46ch; margin: 0 0 var(--pac-space-7); }

.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 48px);
}
.hero__mark { display: block; }

.strip {
  display: flex;
  flex-direction: column;
  gap: var(--pac-space-3);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  line-height: var(--pac-lh-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
}
.strip__lead { color: var(--pac-mint-700); }
.strip__now  { color: var(--pac-text); }
.strip__item { color: var(--pac-text-muted); }

/* The caret. 70/30 duty cycle: a symmetrical blink makes every still capture
   a coin flip. Stage 3 README §4.3. */
@keyframes pacCaret { 0%, 69.9% { opacity: 1; } 70%, 100% { opacity: 0; } }
.caret { animation: pacCaret var(--pac-dur-caret) steps(1, end) infinite; }

/* ---------- 8. FEATURE CARD ---------------------------------------------- */

.feature {
  position: relative;
  overflow: hidden;
  background: var(--pac-surface-raised);
  border: var(--pac-border-1) solid var(--pac-border);
  border-radius: var(--pac-radius-2);
  padding: clamp(24px, 3.4vw, 32px);
  box-shadow: var(--pac-shadow-3);
}
.feature__edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--pac-chrome-ramp);
}
/* The scan sweep, on hover. Was a JS timer in the prototype; here it is the
   hover state doing the work. */
@keyframes pacScan { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.feature__scan {
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 2px;
  background: var(--pac-chrome-hairline);
  transform: translateX(-110%);
}
.feature:hover .feature__scan {
  animation: pacScan var(--pac-dur-scan) var(--pac-ease-scan) 1;
}

.feature__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pac-space-5);
  margin-bottom: var(--pac-space-6);
}
.feature__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

/* Mono label/value rows — hero metadata, NutHub fact readout, support header.
   Flagged in stage 3 README §6.2 as wanting a stage 2 token name; composed
   from existing tokens until it gets one. */
.facts {
  display: grid;
  border-top: var(--pac-border-1) solid var(--pac-border);
  margin: var(--pac-space-6) 0;
}
.facts dt, .facts dd { margin: 0; }
.facts__row {
  display: flex;
  gap: var(--pac-space-5);
  padding: 12px 0;
  border-bottom: var(--pac-border-1) solid var(--pac-border);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
}
.facts__key {
  width: 88px;
  flex: 0 0 88px;
  color: var(--pac-text-muted);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
}
.facts__value { color: var(--pac-text-secondary); }

.feature__links { display: flex; flex-wrap: wrap; gap: var(--pac-space-6); }

/* Image slot. Also awaiting a stage 2 name — README §6.1. */
.slot {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19.5;
  border: var(--pac-border-1) solid var(--pac-border-strong);
  border-radius: var(--pac-radius-3);
  background-color: var(--pac-ink-200);
  background-image: repeating-linear-gradient(135deg,
    rgba(139, 92, 255, 0.10) 0px, rgba(139, 92, 255, 0.10) 2px,
    transparent 2px, transparent 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pac-space-5);
}
.slot__label {
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pac-text-muted);
  text-align: center;
}
.slot__kicker {
  margin: var(--pac-space-5) 0 0;
  max-width: 300px;
  font-size: var(--pac-size-body-sm);
  color: var(--pac-text-muted);
  text-wrap: pretty;
}

/* ---------- 9. INTAKE LEDGER --------------------------------------------- */

.ledger__rule { margin-bottom: clamp(48px, 6vw, 64px); }
.ledger__eyebrow { margin-bottom: var(--pac-space-5); }
.ledger__title {
  margin: 0 0 var(--pac-space-4);
  max-width: 22ch;
  font-size: clamp(26px, 3.4vw, 32px);
  line-height: var(--pac-lh-h2);
  letter-spacing: var(--pac-ls-h2);
  font-weight: var(--pac-weight-bold);
  color: var(--pac-text);
  text-wrap: pretty;
}
.ledger__lede { margin: 0 0 clamp(40px, 5vw, 56px); max-width: 54ch; }

.ledger__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--pac-space-3);
  border-bottom: var(--pac-border-1) solid var(--pac-mint-700);
}
.ledger__head--pass { border-bottom-color: var(--pac-border-strong); }
.ledger__label {
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-mint-300);
}
.ledger__label--pass { color: var(--pac-text-muted); }

.ledger__list { list-style: none; margin: 0; padding: 0; }
.ledger__item {
  display: flex;
  gap: var(--pac-space-4);
  padding: 14px 0;
  border-bottom: var(--pac-border-1) solid var(--pac-border);
  color: var(--pac-text);
}
.ledger__item--pass { color: var(--pac-text-muted); }

.marker {
  flex: 0 0 5px;
  width: 5px; height: 5px;
  margin-top: 11px;
  background: var(--pac-mint-500);
}
.marker--quiet { background: var(--pac-ink-600); }

.ledger__bridge {
  margin: clamp(40px, 5vw, 56px) 0 var(--pac-space-5);
  max-width: 58ch;
  color: var(--pac-text);
}

/* ---------- 10. CLOSING BAND --------------------------------------------- */

.closing__grid {
  max-width: var(--pac-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: end;
}
.closing__title {
  font-size: clamp(26px, 4.2vw, 48px);
  line-height: var(--pac-lh-display-2);
  letter-spacing: var(--pac-ls-display-2);
}
.closing__body { margin: 0 0 var(--pac-space-6); max-width: 44ch; }

/* ---------- 11. 404 ------------------------------------------------------ */

.notfound {
  background: var(--pac-bg-bloom);
  min-height: 82vh;
  display: flex;
  align-items: center;
  padding: clamp(112px, 12vw, 152px) var(--pac-gutter) clamp(64px, 8vw, 96px);
}
.notfound__inner { max-width: var(--pac-container); margin: 0 auto; width: 100%; }
.notfound__eyebrow { margin-bottom: var(--pac-space-5); }
.notfound__title {
  margin: 0 0 var(--pac-space-5);
  font-size: clamp(28px, 5.6vw, 64px);
  line-height: var(--pac-lh-display-1);
  letter-spacing: var(--pac-ls-display-1);
}
.notfound__body { margin: 0 0 var(--pac-space-7); max-width: 44ch; }

/* ---------- 12. FOOTER ---------------------------------------------------- */

.site-footer {
  background: var(--pac-bg-deep);
  padding: 0 var(--pac-gutter) clamp(40px, 5vw, 56px);
}
.site-footer__grid {
  padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(32px, 4vw, 48px);
}
.site-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pac-space-5);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.site-footer__mark { display: block; flex: 0 0 auto; }
.site-footer__word {
  position: relative;
  display: inline-block;
  font-family: var(--pac-font-display);
  font-size: clamp(20px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: var(--pac-ls-display-2);
  color: var(--pac-text);
  white-space: nowrap;
}
.site-footer__tagline {
  margin: 0;
  max-width: 26ch;
  font-size: var(--pac-size-body-sm);
  color: var(--pac-text-muted);
}

.site-footer__col { display: flex; flex-direction: column; gap: var(--pac-space-3); }
.site-footer__colhead {
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-text-muted);
  margin-bottom: var(--pac-space-1);
}
.site-footer__link {
  font-size: var(--pac-size-body-sm);
  color: var(--pac-text-secondary);
  transition: color var(--pac-dur-snap) var(--pac-ease-snap);
}
.site-footer__link:hover { color: var(--pac-mint-300); }

.site-footer__fine {
  border-top: var(--pac-border-1) solid var(--pac-border);
  padding-top: var(--pac-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pac-space-3) var(--pac-space-6);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
  color: var(--pac-text-muted);
}

/* ---------- 13. MOTION PRIMITIVES ---------------------------------------- */

@keyframes pacGlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 14. BREAKPOINTS ----------------------------------------------
   The prototype drove these from a resize listener because its authoring
   format could not hold media queries inline. These are the real ones.
   Thresholds are stage 3's, unchanged. */

/* Chromatic split thresholds. Type only splits at display sizes — below each
   threshold the type has dropped under the 40px glitch minimum. */
@media (min-width: 620px) { .hero__title       .display__ghost { display: block; } }
@media (min-width: 700px) { .display--page     .display__ghost { display: block; } }
@media (min-width: 900px) { .site-footer__word .display__ghost { display: block; } }
@media (min-width: 940px) { .closing__title    .display__ghost { display: block; } }

/* Nav: hamburger below 640, links at and above it. */
@media (min-width: 640px) {
  .nav  { display: flex; }
  .mnav { display: none; }
}

/* Nav CTA: something has to go in a 640px row, and "Start something" is the
   thing with substitutes — the hero carries it, the mobile panel carries it,
   and every page ends on it. Stage 3 README §4.2. */
@media (min-width: 780px) {
  .nav__cta { display: inline-flex; }
}

/* ---------- 15. REDUCED MOTION -------------------------------------------
   Decorative motion off entirely; functional motion shortened to 1ms by the
   token overrides in tokens.css. The chromatic split is a static offset and
   stays — it never animated. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* The cursor block stops blinking and stays solid — it is the mark, and a
     static viewer cannot tell a stopped blink from a broken one. */
  .caret {
    animation: none !important;
    opacity: 1 !important;
  }
  .feature__scan { animation: none !important; }
  .feature:hover .feature__scan { animation: none !important; }
  .mnav__panel { animation: none !important; }
  .site-header__scrim,
  .site-header__edge { animation: none !important; opacity: 1 !important; }
}

/* =========================================================================
   PART B — case study, work, support, long-form legal
   ========================================================================= */

/* ---------- 16. SHARED PAGE FURNITURE ------------------------------------ */

.page-section      { padding: clamp(56px, 7vw, 88px) var(--pac-gutter) 0; }
.page-section--end { padding-bottom: clamp(72px, 9vw, 112px); }
.page-section--flush { padding-top: 0; }

.page-eyebrow { margin-bottom: var(--pac-space-4); }

.section-h2 {
  margin: 0 0 var(--pac-space-4);
  font-size: var(--pac-size-h2);
  line-height: var(--pac-lh-h2);
  letter-spacing: var(--pac-ls-h2);
  font-weight: var(--pac-weight-bold);
  color: var(--pac-text);
  text-wrap: pretty;
}

.stack > * + * { margin-top: var(--pac-para-gap); }

/* ---------- 17. CASE STUDY ----------------------------------------------- */

.case__title  { max-width: 18ch; margin: 0 0 var(--pac-space-6); font-size: clamp(26px, 4.6vw, 48px); line-height: var(--pac-lh-display-2); letter-spacing: var(--pac-ls-display-2); }
.case__lede   { margin: 0 0 var(--pac-space-5); max-width: 62ch; }
.case__note   { margin: 0 0 var(--pac-space-7); max-width: 62ch; font-size: var(--pac-size-body); color: var(--pac-text-muted); text-wrap: pretty; }
.case__meta   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pac-space-5); margin-bottom: var(--pac-space-6); }

/* The consequence we did not soften. Error surface carrying ink-900 at
   14.73:1 — never light text on --pac-error itself. */
.callout {
  background: var(--pac-error-surface);
  border: var(--pac-border-1) solid var(--pac-border);
  border-radius: var(--pac-radius-2);
  padding: var(--pac-space-6);
}
.callout__label {
  display: block;
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-text);
  margin-bottom: var(--pac-space-3);
}
.callout p { margin: 0; color: var(--pac-text); text-wrap: pretty; }

.media-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.media-split .slot { max-width: 280px; justify-self: center; }
/* Alternating sides. Below the grid's wrap point both revert to source order,
   which puts the prose first — correct on a phone. */
@media (min-width: 640px) {
  .media-split--reverse .media-split__media { order: 2; }
  .media-split--reverse .media-split__body  { order: 1; }
}

.difficult {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--pac-space-6);
}
.difficult__label {
  display: block;
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pac-text-muted);
  margin-bottom: var(--pac-space-2);
}
.difficult p { margin: 0; font-size: var(--pac-size-body-sm); line-height: 1.6; color: var(--pac-text-secondary); }

/* ---------- 18. SUPPORT -------------------------------------------------- */

.readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pac-space-6) var(--pac-space-8);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
}
.readout__item  { display: flex; flex-direction: column; gap: var(--pac-space-2); }
.readout__label { letter-spacing: 0.08em; text-transform: uppercase; color: var(--pac-text-muted); }
.readout__value { color: var(--pac-text); font-size: var(--pac-size-body-sm); }

/* Accordions are native <details>. They open, close and take keyboard input
   with JavaScript switched off; site.js touches them not at all. */
.faq { border-top: var(--pac-border-1) solid var(--pac-border); }
.faq__item { border-bottom: var(--pac-border-1) solid var(--pac-border); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pac-space-4);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--pac-size-h4);
  line-height: var(--pac-lh-h4);
  font-weight: var(--pac-weight-semibold);
  color: var(--pac-text);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__sign {
  font-family: var(--pac-font-mono);
  font-size: 18px;
  color: var(--pac-mint-300);
  flex: 0 0 auto;
}
.faq__sign::after { content: "+"; }
.faq__item[open] .faq__sign::after { content: "\2212"; }
.faq__a { padding: 0 0 20px; animation: pacGlide var(--pac-dur-glide) var(--pac-ease-glide) both; }
.faq__a p { margin: 0 0 var(--pac-para-gap); font-size: var(--pac-size-body); line-height: var(--pac-lh-body); color: var(--pac-text-secondary); text-wrap: pretty; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- 19. LONG-FORM (privacy, terms) -------------------------------
   68ch capped at 720px. A screenful is the section number in mono mint-700
   and nothing else: no violet, no chrome, no glow. The hairline above the h1
   is the document's only chrome and never appears again. */

.longform { max-width: min(var(--pac-measure), var(--pac-measure-px)); margin: 0 auto; }
.longform__meta {
  display: block;
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pac-text-muted);
  margin-bottom: var(--pac-space-3);
}
.longform__rule { margin-bottom: var(--pac-space-6); }
.longform__title {
  margin: 0 0 var(--pac-space-5);
  font-size: var(--pac-size-h1);
  line-height: var(--pac-lh-h1);
  letter-spacing: var(--pac-ls-h1);
  font-weight: var(--pac-weight-bold);
  color: var(--pac-text);
}
.longform__lede { margin: 0 0 var(--pac-space-8); }
.longform__num {
  display: block;
  margin-top: var(--pac-h2-space-before);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-mint-700);
}
.longform h2 {
  margin: 8px 0 var(--pac-h2-space-after);
  font-size: var(--pac-size-h2);
  line-height: var(--pac-lh-h2);
  letter-spacing: var(--pac-ls-h2);
  font-weight: var(--pac-weight-bold);
  color: var(--pac-text);
  text-wrap: pretty;
}
.longform h3 {
  margin: var(--pac-h3-space-before) 0 var(--pac-h3-space-after);
  font-size: var(--pac-size-h3);
  line-height: var(--pac-lh-h3);
  font-weight: var(--pac-weight-semibold);
  color: var(--pac-text);
  text-wrap: pretty;
}
.longform p {
  margin: 0 0 var(--pac-para-gap);
  font-size: var(--pac-size-body);
  line-height: var(--pac-lh-body);
  color: var(--pac-text-secondary);
  text-wrap: pretty;
}
.longform ul {
  list-style: none;
  margin: 0 0 var(--pac-para-gap);
  padding: 0 0 0 var(--pac-list-indent);
  display: flex;
  flex-direction: column;
  gap: var(--pac-list-item-gap);
}
.longform li {
  display: flex;
  gap: var(--pac-space-4);
  font-size: var(--pac-size-body);
  line-height: var(--pac-lh-body);
  color: var(--pac-text-secondary);
}
.longform li > span:last-child { text-wrap: pretty; }
.longform__marker {
  flex: 0 0 5px;
  width: 5px; height: 5px;
  margin-top: 12px;
  background: var(--pac-list-marker);
}
.longform__foot {
  margin-top: var(--pac-space-9);
  padding-top: var(--pac-space-5);
  border-top: var(--pac-border-1) solid var(--pac-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pac-space-5);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
}
.longform__foot a { color: var(--pac-mint-300); }

/* ---------- 20. WORK / CONTACT FORM --------------------------------------
   The form posts natively to Netlify and needs no JavaScript to submit,
   validate or report. Validation is CSS on :user-invalid, which fires only
   after the user has actually interacted or tried to submit. */

.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.form { display: flex; flex-direction: column; gap: var(--pac-space-5); }
.field { display: flex; flex-direction: column; gap: var(--pac-space-2); }
.field__label {
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-text-secondary);
}
.field__control {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px; /* 16px or iOS zooms the viewport on focus */
  color: var(--pac-text);
  background: var(--pac-ink-200);
  border: var(--pac-border-1) solid var(--pac-border);
  border-radius: var(--pac-radius-1);
  transition: border-color var(--pac-dur-snap) var(--pac-ease-snap);
}
.field__control::placeholder { color: var(--pac-text-disabled); }
.field__control:focus {
  border-color: var(--pac-mint-500);
  outline: var(--pac-focus-ring-width) solid var(--pac-focus-ring);
  outline-offset: var(--pac-focus-ring-offset);
  box-shadow: var(--pac-focus-glow);
}
textarea.field__control { line-height: 1.6; resize: vertical; }
.field__control--what { min-height: 100px; }
.field__control--hard { min-height: 132px; }

.field__hint {
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
  color: var(--pac-text-muted);
}

/* Error state carries a border, an icon-free mono message and the word
   itself — never colour alone. */
.field__error {
  display: none;
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-caption);
  color: var(--pac-error);
}
.field__control:user-invalid { border-color: var(--pac-error); }
.field__control:user-invalid ~ .field__error { display: block; }
/* Empty and malformed are different messages, told apart without script:
   an empty control is the one still showing its placeholder. */
.field__control:user-invalid:not(:placeholder-shown) ~ .field__error--empty { display: none; }
.field__control:user-invalid:placeholder-shown ~ .field__error--format { display: none; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pac-space-4);
  margin-top: var(--pac-space-2);
}
.form__aside { font-size: var(--pac-size-body-sm); color: var(--pac-text-muted); }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but fill positioned ones. Never announced, never tab-reachable. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.submit__caret {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--pac-ink-100);
}
.btn[aria-disabled="true"] { pointer-events: none; opacity: 0.85; }

/* Success — the form is replaced by this panel. */
.sent {
  background: var(--pac-mint-900);
  border: var(--pac-border-1) solid var(--pac-mint-700);
  border-radius: var(--pac-radius-2);
  padding: var(--pac-space-6);
  animation: pacGlide var(--pac-dur-glide) var(--pac-ease-glide) both;
}
.sent__label {
  display: inline-flex;
  align-items: center;
  gap: var(--pac-space-2);
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-mint-300);
  margin-bottom: var(--pac-space-4);
}
.sent__dot { width: 6px; height: 6px; border-radius: var(--pac-radius-pill); background: var(--pac-mint-500); }
.sent__title { margin: 0 0 var(--pac-space-3); font-size: var(--pac-size-h3); line-height: var(--pac-lh-h3); font-weight: var(--pac-weight-bold); color: var(--pac-text); }
.sent p { margin: 0 0 var(--pac-space-5); color: var(--pac-text-secondary); text-wrap: pretty; }

/* Hard failure — sits above the form, which keeps every word the user typed. */
.failed {
  background: var(--pac-error-surface);
  border: var(--pac-border-1) solid var(--pac-error);
  border-radius: var(--pac-radius-2);
  padding: var(--pac-space-5);
}
.failed__label {
  display: block;
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-text);
  margin-bottom: var(--pac-space-3);
}
.failed p { margin: 0 0 var(--pac-space-4); font-size: var(--pac-size-body-sm); line-height: 1.6; color: var(--pac-text); text-wrap: pretty; }
.failed__actions { display: flex; flex-wrap: wrap; gap: var(--pac-space-3); }
.failed[hidden] { display: none; }

.sidebar { display: flex; flex-direction: column; gap: var(--pac-space-6); }
.sidebar__label {
  display: block;
  font-family: var(--pac-font-mono);
  font-size: var(--pac-size-label);
  letter-spacing: var(--pac-ls-label);
  text-transform: uppercase;
  color: var(--pac-text-muted);
  margin-bottom: var(--pac-space-3);
}
.sidebar p { margin: 0; font-size: var(--pac-size-body-sm); line-height: 1.6; color: var(--pac-text-muted); text-wrap: pretty; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: flex;
  gap: var(--pac-space-4);
  padding: 14px 0;
  border-bottom: var(--pac-border-1) solid var(--pac-border);
  color: var(--pac-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .faq__a, .sent { animation: none !important; }
}

/* ---------- 21. PART B UTILITIES ----------------------------------------- */

.eyebrow--lead { margin-bottom: var(--pac-space-5); }

.measure-20 { max-width: 20ch; }
.measure-24 { max-width: 24ch; }
.measure-56 { max-width: 56ch; }
.measure-60 { max-width: 60ch; }

/* The h2 sits inline with the product tag in the support page header. */
.section-h2--inline { margin: 0; }

.btn--plain { background: transparent; color: var(--pac-mint-300); }
.btn--plain:hover { background: transparent; color: var(--pac-mint-100); }

/* Prose inside a two-up media split: same reading treatment as the long-form
   spec, but the width is set by the grid column rather than the measure. */
.prose-narrow p {
  margin: 0 0 var(--pac-para-gap);
  font-size: var(--pac-size-body);
  line-height: var(--pac-lh-body);
  color: var(--pac-text-secondary);
  text-wrap: pretty;
}
.prose-narrow p:last-child { margin-bottom: 0; }

/* The legal pages take no bloom: the hairline above the h1 is the entire
   chrome budget for the document, and it never appears again. */
.longform__page {
  padding: clamp(112px, 12vw, 152px) var(--pac-gutter) clamp(72px, 9vw, 112px);
}

/* A lede keeps its body-lg size inside a long-form column — two classes beats
   the .longform p element selector. */
.longform .lede {
  font-size: var(--pac-size-body-lg);
  line-height: var(--pac-lh-body-lg);
}
.longform .btn-row a { font-size: 17px; }
.longform p:last-of-type { margin-bottom: 0; }
.longform .btn-row { margin-top: var(--pac-space-6); }

/* The work page's form band sits tighter under its hero than a default
   .section, and gives more room at the foot. Prototype values. */
.section--work {
  padding: clamp(40px, 5vw, 64px) var(--pac-gutter) clamp(72px, 9vw, 112px);
  scroll-margin-top: 72px;
}

/* ---------- 22. INLINE LINKS IN PROSE ------------------------------------
   A link sitting inside a block of body text must not be distinguished by
   colour alone (WCAG 1.4.1). The design already underlines inline links —
   the support lede and the form's mail fallback both do — so this makes that
   decision systemic rather than per-instance, and stops the next inline link
   someone adds from regressing it. Standalone links (nav, footer columns,
   button rows, mono chevron links) are not in a text block and keep their
   clean treatment. */
.sidebar p a,
.prose p a,
.prose-narrow p a,
.longform p a,
.longform li a,
.faq__a p a,
.callout p a,
.failed p a,
.sent p a,
.form__aside a,
.slot__kicker a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pac-link-underline);
}