/* ==========================================================================
   Metric Bridge shared shell, for the four HAND-MAINTAINED pages in this
   folder: privacy.html, terms.html, 404.html, thank-you.html.

   WHY THIS FILE EXISTS. Until step 9 of the 2026-08-03 "AI tells" rebuild
   those four pages each carried their own <style> block, their own :root, their
   own type scale and their own header and footer. Audit finding B3: "legal
   pages and 404 are a different website." Measured 2026-08-04, they were:

     - 0 footer links, against 16 on every React page. From /privacy the only
       destination on the whole domain was "/", offered twice.
     - an 89ch reading measure on the two longest documents the site publishes,
       against 73ch on the React shell.
     - 3 blocking external font requests each, against 0 (the React site
       self-hosts via @fontsource).
     - #FF6B57 as INK in four places, worst 2.41:1 at 44px. Coral is a FILL
       behind white text (#E91C00, 4.53:1) and is graphic-only otherwise.

   WHERE IT CAME FROM, AND HOW TO CHECK IT FOR DRIFT. This is not hand-invented
   CSS. It is the 78 rules of the React bundle that match anything inside
   `header.nav-shell` or `footer`, extracted mechanically. Re-derive them with
   `mb-step9-shellcss.mjs` (C:\Users\vaugh\metricbridge\) and DIFF against this
   file rather than eyeballing the pages: that probe is the whole mitigation for
   keeping a second copy of the shell. The markup in the four pages is likewise
   copied verbatim from the prerendered React output, so the Tailwind utility
   classes below are load-bearing and are not "tidy-up" candidates.

   WHAT IS DELIBERATELY NOT PORTED (step 9 decision 5, VJ 2026-08-04): the
   fixed shell, the velocity hide-on-scroll, the Insights dropdown and the
   mobile overlay with its focus trap. All four exist only in JavaScript, and
   §10 of the handoff warns that a ported nav failing the menu contract is worse
   than no nav. The header here is STATIC and has no menu, so there is no
   contract to fail; the footer is the site index at every width.

   THIS FILE IS UTF-8, NO BOM, LF ONLY. dist has been corrupted once by
   PowerShell ANSI/BOM writes and the corruption shared a diff with real
   content, so it could not be reverted. Write bytes.
   ========================================================================== */

/* ---------- Fonts: self-hosted, matching the React site exactly ----------
   Same @fontsource files the Vite bundle emits, copied here under stable
   unhashed names because the bundle's own copies are content-hashed and a
   hand-maintained page cannot link a filename that changes every build. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-500.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: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-600.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500.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;
}

/* ---------- Tokens ----------
   BOTH corals are here, which is the point. These pages predated the Coral
   Deep split (VJ 2026-07-26) entirely and carried only #FF6B57, so there was no
   compliant fill available to write. */
:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 0.2s;
  --base: 0.4s;

  --mb-surface: #f4ede4;
  --mb-raised: #ffffff;
  --mb-cell: #e6e8ec;
  --mb-text-1: #1a2b4c;
  --mb-text-2: #3b5a7a;
  --mb-text-3: #646c7d;
  --mb-line: #d4d7dd;
  --mb-line-soft: #e6e8ec;
  --mb-nav-tint: rgba(26, 43, 76, 0.06);

  /* Coral Deep. A FILL behind white text, 4.53:1. The only coral that may sit
     under type. */
  --color-coral-700: #e91c00;
  --color-coral-800: #cf1800;
  /* Signal Coral. Graphic-only on light surfaces (2.41:1 as ink on sandstone,
     2.80:1 on white). It is legitimate as ink on the ink-900 footer, where it
     measures 6.67:1, and that is the ONLY place it is used as a text colour. */
  --color-coral-500: #ff6b57;
  --color-ink-900: #0b1221;

  --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans', sans-serif;

  /* Tailwind's spacing unit. The utility classes below are copied from the
     React bundle and resolve their padding and gaps against it.

     4px, NOT the 0.25rem the bundle ships. colors_and_type.css sets
     `html, body { font-size: 14px }`, so on thank-you.html the root is 14px and
     every rem in this file would be 12.5% short: the footer measured 528px
     instead of 567px, and worse, the `48rem` breakpoint fired at 672px while
     the footer's own `max-width: 767px` rule was still active, so both layouts
     applied at once between those widths. A shared stylesheet dropped onto
     pages with different roots must not depend on the root. Every length in
     this file is absolute for that reason. */
  --spacing: 4px;
  --default-transition-duration: 0.15s;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset (the subset of Tailwind preflight the shell relies on) --- */
*,
::before,
::after,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  --tw-border-style: solid;
}
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
}
body {
  font-family: var(--font-body);
  background: var(--mb-surface);
  color: var(--mb-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection {
  background: #1a2b4c;
  color: #f4ede4;
}
a {
  color: inherit;
  text-decoration: inherit;
}
ol,
ul,
menu {
  list-style: none;
}
img,
svg,
video,
canvas {
  vertical-align: middle;
  display: block;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/* Focus: 2px coral, 2px offset, everywhere. Graphic, not ink. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #ff6b57;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Type scale ---------- */
.t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.t-bodylg {
  font-size: 16px;
  line-height: 1.55;
}
.t-body {
  font-size: 14px;
  line-height: 1.55;
}
.t-caption {
  font-size: 12px;
  line-height: 1.45;
}
.t-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .t-h2 {
    font-size: 28px;
  }
}

/* ---------- Layout primitives ---------- */
.container-mb {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .container-mb {
    padding-inline: 32px;
  }
}
@media (min-width: 1024px) {
  .container-mb {
    padding-inline: 64px;
  }
}

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-coral-700);
  color: #ffffff;
  padding: 14px 24px;
  min-height: 44px;
  white-space: nowrap;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.2px;
  transition:
    transform var(--fast) var(--ease),
    background-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
  box-shadow: 0 2px 8px -2px rgba(233, 28, 0, 0.35);
}
.pill:hover {
  background: var(--color-coral-800);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(233, 28, 0, 0.45);
}
.pill:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px -1px rgba(233, 28, 0, 0.4);
}

/* ---------- The shell header ----------
   STATIC, not fixed. The React bar's fixed shell, scrolled state and
   velocity hide/reveal are long-scroll affordances driven by JS; these pages
   are read from the top. The hairline is the React bar's SCROLLED border
   rather than its transparent resting one: a static bar in the page's own
   background colour needs an edge, and every one of these pages had a header
   rule before step 9. */
.shell-head {
  background: var(--mb-surface);
  border-bottom: 1px solid var(--mb-line);
}
.shell-head .shell-bar {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: space-between;
}
.shell-nav {
  display: none;
  align-items: center;
  gap: 28px;
}
/* Same 1024px breakpoint the React nav uses to swap to its hamburger. Below
   it there is no menu at all, by decision: the footer is the site index. */
@media (min-width: 1024px) {
  .shell-nav {
    display: flex;
  }
}
.shell-nav a {
  padding-block: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mb-text-2);
  transition: color var(--fast) var(--ease);
}
.shell-nav a:hover,
.shell-nav a[aria-current='page'] {
  color: var(--mb-text-1);
}
/* thank-you.html's account chip, in the slot the nav and the pill occupy on
   the other three. Nobody who has just paid should be sold to. */
.shell-acct {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--mb-text-1);
}
.shell-acct .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e8e6b;
  display: inline-block;
}

/* ---------- The document body, on privacy.html and terms.html ----------
   The prose is unchanged. It is re-set at the React type scale and a reading
   measure: 89ch was measured on both pages at 1440, against 73ch on the React
   shell, on the two longest documents the site publishes. */
/* The document column sits on container-mb's grid, not centred in the
   viewport. A centred 686px column put the H1 at x=410 while the nav logo and
   the footer sat at x=145: the shell and the document disagreed about where the
   page starts, which is visible in one glance at 1440. The React content pages
   left-align their prose to the same edge. The MEASURE is capped on the
   children instead. */
.doc-main {
  max-width: 1280px;
  margin-inline: auto;
  padding: 72px 20px 96px;
}
/* 62ch = 626px at 16px Inter, which is the React content pages' prose width to
   the pixel. Measured, not chosen: 89ch was the defect, and the cap moved three
   times before landing, because it was first applied to the CONTAINER (whose
   64px inline padding it then had to absorb) and now applies to the children.
   Same rendered width, stated where it cannot drift with the padding. */
.doc-main > * {
  max-width: 62ch;
}
@media (min-width: 768px) {
  .doc-main {
    padding: 88px 32px 112px;
  }
}
@media (min-width: 1024px) {
  .doc-main {
    padding-inline: 64px;
  }
}
.doc-main h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .doc-main h1 {
    font-size: 28px;
  }
}
.doc-main h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin: 40px 0 12px;
}
.doc-main p,
.doc-main li {
  font-size: 16px;
  line-height: 1.55;
  color: var(--mb-text-2);
}
.doc-main p + p {
  margin-top: 16px;
}
.doc-main ul {
  list-style: disc;
  padding-left: 20px;
}
.doc-main li + li {
  margin-top: 8px;
}
.doc-main strong {
  color: var(--mb-text-1);
  font-weight: 500;
}
.doc-main a {
  color: var(--mb-text-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--mb-line);
  transition: text-decoration-color var(--fast) var(--ease);
}
/* NOT coral. #FF6B57 as ink on sandstone is 2.41:1, which fails AA and
   AA-Large; that hover was on both legal pages before step 9. The affordance
   is carried by the underline instead. */
.doc-main a:hover {
  text-decoration-color: var(--mb-text-1);
}
.doc-meta {
  color: var(--mb-text-3);
  font-size: 13px;
  margin-bottom: 32px;
}

/* ---------- The 404 ---------- */
.nf-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 20px 112px;
  gap: 20px;
}
.nf-main h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -1px;
  max-width: 18ch;
}
@media (max-width: 767px) {
  .nf-main h1 {
    font-size: 36px;
  }
}
.nf-main p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--mb-text-2);
  max-width: 50ch;
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
.nf-actions .text-link {
  font-size: 14px;
  color: var(--mb-text-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--fast) var(--ease);
}
.nf-actions .text-link:hover {
  color: var(--mb-text-1);
}

/* ==========================================================================
   BELOW HERE IS COPIED FROM THE REACT BUNDLE, RULE FOR RULE.
   The footer markup in each page is the prerendered React footer verbatim, so
   these utility classes are what it resolves against. Re-derive with
   mb-step9-shellcss.mjs before changing any of them.
   ========================================================================== */
.fixed { position: fixed; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.left-0 { left: 0; }
.z-40 { z-index: 40; }
.mt-4 { margin-top: calc(var(--spacing) * 4); }
.mt-6 { margin-top: calc(var(--spacing) * 6); }
.mt-14 { margin-top: calc(var(--spacing) * 14); }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.h-\[72px\] { height: 72px; }
.max-w-\[30ch\] { max-width: 30ch; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: calc(var(--spacing) * 4); }
.gap-12 { gap: calc(var(--spacing) * 12); }
:where(.space-y-1 > :not(:last-child)) {
  margin-block-start: 0;
  margin-block-end: calc(var(--spacing) * 1);
}
.gap-x-4 { column-gap: calc(var(--spacing) * 4); }
.border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; }
.bg-ink-900 { background-color: var(--color-ink-900); }
.py-\[14px\] { padding-block: 14px; }
.pt-6 { padding-top: calc(var(--spacing) * 6); }
.pt-16 { padding-top: calc(var(--spacing) * 16); }
.pb-10 { padding-bottom: calc(var(--spacing) * 10); }
.text-coral-500 { color: var(--color-coral-500); }
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}
.duration-200 { transition-duration: 0.2s; }
@media (hover: hover) {
  .hover\:text-coral-500:hover { color: var(--color-coral-500); }
}
/* 768px, not the bundle's 48rem: see the --spacing note above. */
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  :where(.md\:space-y-3 > :not(:last-child)) {
    margin-block-start: 0;
    margin-block-end: calc(var(--spacing) * 3);
  }
  .md\:py-0 { padding-block: 0; }
}
/* The footer's own responsive fix, shipped at step 7: Resources and Contact
   sit side by side on a phone with the brand block spanning above them, which
   took the mobile footer from 1,300px to 993px on all ten pages. THE 44px TAP
   TARGETS ON EVERY LINK STAY: they are an accessibility floor, not padding. */
@media (max-width: 767px) {
  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 20px;
  }
  .footer-brandcol {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}