/* ==== bundled: src/styles/tokens.css ==== */
/* Design tokens — single source of truth.
   Edit here AND update docs/design/stage-12-current-stitch-authority-handoff.md §4
   in lockstep. Two coexisting palettes:

     A. PILOT (light archival-utility) — kept alive for shared chrome and
        non-Home pages (Pricing / Privacy / Terms / Refund / Contact /
        About / FAQ). Do NOT remove these tokens; they are bound by
        Stage 11B / 11C contracts and downstream tests
        (e.g. tests/pricing-11c.test.tsx, tests/contact-11c.test.tsx).

     B. ARCHIVAL-DARK (Stage 12A-R1) — the accepted current Stitch
        visual authority for `/`. Applied via the `.home-archival`
        wrapper on the Home page body so non-Home pages keep their
        existing chrome. Tokens mirror the Tailwind `extend` block in
        docs/design/evidence/stage-12-r1/desktop/desktop.html §4.1-§4.5.
   ------------------------------------------------------------------ */

:root {
  /* A. Pilot light palette (legacy). Kept for shared shell + non-Home pages. */
  --color-ivory:       #F4EFE6;
  --color-near-black:  #0a0c10;
  --color-ink:         #18242B;
  --color-soft-gray:   #5B5C55;
  --color-hairline:    #D9CFBE;
  --color-oxide:       #A6533C;
  --color-oxide-dark:  #8a4331;
  --color-teal:        #3E7C7B;
  --color-teal-dark:   #2f6160;
  --color-sepia:       #7A6A52;
  --color-error:       #8B2C24;

  --font-headline: 'Newsreader', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* B. Stage 12A-R1 archival-dark palette (binding for /).
     Mirror of §4.1 surface / structural palette. Defined here so a
     `.home-archival` opt-in can re-skin the page; do NOT apply globally
     — the shared Header / Footer / Pricing / Contact etc. surfaces
     remain on the Pilot palette until they are explicitly re-skinned
     in a future owner-authorized redesign pass. */
  --archival-surface:               #131313; /* body bg */
  --archival-surface-container-lowest: #0e0e0e;
  --archival-surface-container-low:    #1c1b1b;
  --archival-surface-container:        #201f1f;
  --archival-surface-container-high:   #2a2a2a;
  --archival-surface-container-highest:#353534;
  --archival-surface-bright:           #3a3939;
  --archival-surface-variant:          #353534;
  --archival-header-mobile-bg:         #0A0A0A;
  --archival-footer-bg:                #121212;
  --archival-border-hairline:          #262626;
  --archival-border-outline-variant:   #59413c;
  --archival-outline:                  #a88a83;
  --archival-text-primary:             #e5e2e1; /* on-surface */
  --archival-text-on-surface-variant:  #e1bfb8;
  --archival-text-muted:               #A3A3A3;
  --archival-accent-coral:             #FF6B4A; /* single accent */
  --archival-accent-coral-soft:        #ffb4a3;
  --archival-accent-coral-deep:        #ffdad2;
  --archival-accent-error:             #ffb4ab;
  --archival-accent-error-deep:        #690005;
  --archival-accent-warn:              #ae3115;
  --archival-accent-tertiary:          #c6c6cf;
  --archival-accent-secondary:         #c6c6c7;
  --archival-accent-secondary-on:      #e5e2e1;
  --archival-registration-desktop:     #D9CFBE;
  --archival-registration-mobile:      #dac1bb;

  /* Typography slots per §4.4 */
  --archival-font-display: 'Newsreader', serif;
  --archival-font-heading: 'Newsreader', serif;
  --archival-font-body:    'Inter', system-ui, sans-serif;
  --archival-font-label:   'Public Sans', sans-serif;

  /* Spacing per §4.5 (Tailwind redefined `xl=32px` here). */
  --archival-space-xs: 4px;
  --archival-space-sm: 8px;
  --archival-space-md: 16px;
  --archival-space-lg: 24px;
  --archival-space-xl: 32px;
  --archival-space-2xl: 80px;
  --archival-space-3xl: 120px;

  --archival-radius-default: 4px;
  --archival-radius-lg: 8px;
  --archival-radius-xl: 12px;
  --archival-radius-full: 9999px;
}

/* ==== bundled: src/styles/app.css ==== */
/* Face Photo Restorer — Stage 08A styles.
   ------------------------------------------------------------------
   Design tokens (per docs/design/DESIGN.md):
     • Color: near-black canvas (#0a0c10) + warm ivory page (#F4EFE6)
       + oxide-red primary (#A6533C) + desaturated teal (#3E7C7B)
       + sepia tertiary (#7A6A52)
     • Typography: NEWSREADER (editorial serif) for H1/H2; WORK_SANS
       (humanist sans) for body / labels
     • Roundness: 8px (ROUND_EIGHT)
     • Spacing: 4 / 8 / 16 / 24 / 40 / 80 / 120 (mobile halves xl+)
   ------------------------------------------------------------------ */

/* Stage 12C-R2 (P0-1): this file used to pull in tokens.css + archival.css
   through `@import url('@/styles/...')`. `@/` is a TypeScript / bundler path
   alias, NOT something a browser can resolve — Chrome resolved it against the
   document origin, 404'd, and left ZERO archival rules in the cascade while the
   Pilot ivory body kept painting. The bundle order is now owned explicitly by
   `scripts/build-client.mjs` (tokens.css → app.css → archival.css), so this
   sheet must never re-introduce an `@import`. Import order contract lives in
   `apps/web/tests/stage-12c-r2-repair.test.ts` §P0-1. */

/* ── Global reset + base ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  color: var(--color-ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: 40px; line-height: 1.1; font-weight: 600; }
h2 { font-size: 32px; line-height: 1.25; font-weight: 600; }
h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }

p { margin: 0 0 1em; }

a {
  color: var(--color-oxide);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--color-oxide-dark);
}

code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(166, 83, 60, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }

button { font-family: inherit; }

/* ── Site shell / header / footer ────────────────────────────────────── */
.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  margin: 0 auto;
}

.site-header {
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-hairline);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--color-ink);
}

.site-brand-mark {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-oxide);
}

.site-brand-wordmark {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-ink);
}

.site-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
}

.site-nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: none;
  padding: 10px 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}

.site-nav-link:hover { color: var(--color-oxide); }
.site-nav-link.is-active {
  border-bottom-color: var(--color-oxide);
  color: var(--color-oxide);
}

.auth-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(24 22 19 / 65%);
}

.auth-dialog {
  width: min(100%, 440px);
  padding: 24px;
  background: var(--color-ivory);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  box-shadow: 8px 8px 0 var(--color-oxide);
}

.auth-dialog h2 { margin-top: 0; }
.auth-dialog [role='status'] { min-height: 24px; }
.auth-dialog > button { min-height: 44px; padding: 8px 16px; }

.site-account {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-body);
}

.site-account-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
  color: #1f1f1f;
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}
.site-account-cta:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); }
.site-account-cta:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 2px; }
.site-account-identity { max-width: min(240px, 44vw); min-width: 44px; }
.site-account-identity span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-account-identity { min-width: 0; overflow-wrap: anywhere; }
.archival-shell .site-account-identity,
.archival-shell .site-account-identity:hover { color: #1f1f1f; }
.google-mark { display: block; flex: 0 0 auto; width: 18px; height: 18px; }

.site-footer {
  background: var(--color-near-black);
  color: var(--color-ivory);
  padding: 48px 24px 32px;
  margin-top: 80px;
}

.site-footer-columns {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.site-footer-heading {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-soft-gray);
  margin-bottom: 12px;
}

.site-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ivory);
  text-decoration: none;
  font-size: 14px;
}

.auth-completion {
  max-width: 640px;
  margin: 96px auto;
  padding: 0 24px;
}
.auth-completion h1 { margin: 8px 0 16px; }
.auth-completion-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.auth-completion-actions button,
.auth-completion-actions .button-link { min-height: 44px; padding: 10px 16px; border: 1px solid var(--color-ink); display: inline-flex; align-items: center; background: transparent; color: var(--color-ink); text-decoration: none; cursor: pointer; }
.archival-shell .auth-completion-actions button,
.archival-shell .auth-completion-actions .button-link { color: #f5f5f5; border-color: #a3a3a3; }
.auth-completion-actions button:focus-visible,
.auth-completion-actions .button-link:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 3px; }
.auth-completion-actions button:disabled { cursor: wait; opacity: 0.7; }

.site-footer-col a:hover {
  text-decoration: underline;
  color: var(--color-ivory);
}

.site-footer-safehat,
.site-footer-microcopy {
  max-width: 1200px;
  margin: 24px auto 0;
  font-size: 13px;
  color: var(--color-soft-gray);
  line-height: 1.5;
}

.site-footer-safehat { font-style: italic; }
.site-footer-microcopy { color: var(--color-soft-gray); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  background: var(--color-ivory);
  padding: 80px 24px 64px;
}

.hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* Desktop: 56:44 split, per docs/design/DESIGN.md spec */
  grid-template-columns: 56% 44%;
  gap: 32px;
  align-items: center;
}

.hero-h1 {
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 16px;
}

.hero-subhead {
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 16px;
  color: var(--color-ink);
}

.hero-definition {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px;
  color: var(--color-ink);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}

.hero-cta {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
  text-align: center;
  line-height: 1.2;
  min-height: 48px;
}

.hero-cta-primary {
  background: var(--color-oxide);
  color: #fff;
  border-color: var(--color-oxide);
}
.hero-cta-primary:hover { background: var(--color-oxide-dark); border-color: var(--color-oxide-dark); color: #fff; }

.hero-cta-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-hairline);
}
.hero-cta-secondary:hover {
  background: rgba(166, 83, 60, 0.06);
  color: var(--color-ink);
}

/* Disabled CTAs (Stage 10-R1) — paid-plan and contact submit in private
   preview must look and behave as non-actionable controls: no hover,
   not-allowed cursor, muted color, no pointer. */
button.hero-cta:disabled,
button.hero-cta[aria-disabled="true"] {
  background: rgba(122, 106, 82, 0.18);
  color: var(--color-soft-gray);
  border-color: var(--color-hairline);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.85;
}
button.hero-cta-primary:disabled,
button.hero-cta-primary[aria-disabled="true"] {
  background: #6b4a3c;
  color: #d9c8a0;
  border-color: #4a3a32;
}

/* Contact fieldset wrapper — visually group disabled form fields and
   disable the native disabled chrome on the <fieldset>. */
.contact-fieldset {
  border: 1px dashed var(--color-hairline);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.contact-fieldset-legend {
  font-size: 13px;
  color: var(--color-soft-gray);
  padding: 0 8px;
  font-style: italic;
}
.contact-fieldset:disabled {
  opacity: 0.85;
}

/* Private-preview notice wrappers — visually distinguish from full blocks. */
.block-pricing-disabled,
.block-contact-disabled {
  margin: 16px auto 0;
  padding: 0 24px;
  max-width: 1200px;
}
.block-pricing-disabled .page-stub-marker,
.block-contact-disabled .page-stub-marker {
  margin: 0;
}

.hero-helper {
  font-size: 14px;
  color: var(--color-soft-gray);
  margin: 0 0 8px;
}

.hero-safehat {
  font-size: 14px;
  color: var(--color-soft-gray);
  font-style: italic;
  margin: 0;
}

.hero-art-figure {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-near-black);
  border: 1px solid var(--color-hairline);
  aspect-ratio: 512 / 279;
}

.hero-art-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-art-after {
  position: absolute;
  inset: 0;
  mix-blend-mode: normal;
  opacity: 0.55;
}

.hero-art-caption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(10, 12, 16, 0.78);
  color: #f4f5f7;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-upload-anchor {
  max-width: 1200px;
  margin: 40px auto 0;
}

/* Mobile: Hero stacks vertically, image on top, text below */
@media (max-width: 800px) {
  .hero { padding: 40px 20px 48px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-h1 { font-size: 40px; line-height: 1.1; }
  .hero-art-figure { aspect-ratio: 4 / 3; }
  .hero-art-figure img { object-fit: contain; }
}

/* ── Generic page hero (used by /pricing /privacy /terms /refund /contact /about /faq) ── */
.page-hero {
  background: var(--color-ivory);
  padding: 56px 24px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-h1 {
  font-size: 48px;
  line-height: 1.1;
  margin: 0 0 16px;
}

.page-subhead {
  font-size: 18px;
  color: var(--color-ink);
  margin: 0 0 12px;
}

.page-safehat {
  font-size: 14px;
  font-style: italic;
  color: var(--color-soft-gray);
  margin: 0 0 8px;
}

.page-meta-line {
  font-size: 13px;
  color: var(--color-soft-gray);
  margin: 0;
}

.page-stub-marker {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(166, 83, 60, 0.06);
  border: 1px dashed var(--color-hairline);
  border-radius: 8px;
  font-size: 14px;
}

@media (max-width: 800px) {
  .page-h1 { font-size: 36px; }
  .page-hero { padding: 32px 20px 24px; }
}

/* ── Block layout (shared) ──────────────────────────────────────────── */
.block {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 24px;
}

.block-h2 {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 16px;
}

.block-subhead {
  font-size: 18px;
  color: var(--color-ink);
  margin: 0 0 16px;
}

.block-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink);
  max-width: 70ch;
  margin: 0 0 16px;
}

.block-safehat {
  font-size: 14px;
  font-style: italic;
  color: var(--color-soft-gray);
  margin-top: 16px;
}

@media (max-width: 800px) {
  .block { margin: 48px auto; padding: 0 20px; }
  .block-h2 { font-size: 24px; }
}

/* ── Before / After figure ───────────────────────────────────────────── */
.ba-figure {
  margin: 24px 0 0;
}

.ba-figure .ba-slider {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-near-black);
  border: 1px solid var(--color-hairline);
}

.ba-figcaption {
  font-size: 12px;
  color: var(--color-soft-gray);
  font-style: italic;
  margin: 12px 0 0;
}

/* ── How it works ────────────────────────────────────────────────────── */
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: how;
}

.how-steps li {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: 24px;
}

.how-steps h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.how-steps p {
  font-size: 14px;
  color: var(--color-ink);
  margin: 0;
}

@media (max-width: 800px) {
  .how-steps { grid-template-columns: 1fr; }
}

/* ── Tier cards (Block 5 + pricing tiers) ────────────────────────────── */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 16px;
}

.tier-grid {
  display: grid;
  gap: 20px;
  margin: 24px 0;
}

.tier-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tier-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tier-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: 24px;
}

.tier-card-default {
  border-color: var(--color-oxide);
  border-width: 2px;
}

.tier-card-popular {
  border-color: var(--color-oxide);
  border-width: 2px;
}

.tier-card-free {
  background: rgba(62, 124, 123, 0.06);
}

.tier-name {
  font-size: 20px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tier-tag {
  display: inline-block;
  font-size: 11px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-oxide);
  color: #fff;
  font-weight: 500;
}

.tier-card-popular .tier-tag { background: var(--color-oxide); }
.tier-card-default .tier-tag { background: var(--color-teal); }

.tier-price {
  font-family: var(--font-headline);
  font-size: 24px;
  margin: 0 0 4px;
  color: var(--color-ink);
}

.tier-credits {
  font-size: 14px;
  color: var(--color-ink);
  margin: 0 0 4px;
}

.tier-detail {
  font-size: 13px;
  color: var(--color-soft-gray);
  margin: 0 0 16px;
}

.tier-cta {
  margin-top: 8px;
}

.tier-cta-disabled {
  display: inline-block;
  padding: 12px 16px;
  font-size: 14px;
  font-style: italic;
  color: var(--color-soft-gray);
}

@media (max-width: 800px) {
  .tier-cards { grid-template-columns: 1fr; }
  .tier-grid-four, .tier-grid-three { grid-template-columns: 1fr; }
}

/* ── Lists ───────────────────────────────────────────────────────────── */
.uses-list,
.privacy-list,
.limits-list,
.keyfacts-list,
.block ul {
  padding-left: 24px;
  margin: 0 0 16px;
}

.block ul li {
  margin: 0 0 8px;
  line-height: 1.55;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0;
}

.faq-item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: 12px 16px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-ink);
  padding: 4px 0;
}

.faq-item summary::marker {
  color: var(--color-oxide);
}

.faq-a {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 8px 0 0;
}

/* ── Legal layout ────────────────────────────────────────────────────── */
.legal-body-standalone {
  box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  margin: 32px auto 64px;
  padding: 0 24px;
}

.legal-grid {
  max-width: 1200px;
  margin: 32px auto 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
}

.legal-toc {
  position: sticky;
  top: 80px;
  align-self: start;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: 16px;
}

.legal-toc-heading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-soft-gray);
  margin: 0 0 8px;
}

.legal-toc ol {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--color-ink);
  text-decoration: none;
}

.legal-toc a:hover { color: var(--color-oxide); text-decoration: underline; }

.legal-section {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: 24px;
}

.legal-section:last-child { border-bottom: 0; }

.legal-h2 {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 12px;
}

.legal-p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 12px;
}

/* Inline <code> used to render placeholders / paths inside legal/about prose.
   The legal-code class is intentionally subtle: monospace, hairline border,
   no background flash. The placeholder and path modifiers only differ in a
   data-attribute used by automated tests, not in visual treatment. */
.legal-code {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 0.92em;
  padding: 1px 6px;
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

/* ── Legal table — keeps wide retention / data tables on-page on narrow
   viewports without forcing the document itself to overflow. ───────── */
.legal-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.legal-table th,
.legal-table td {
  padding: 8px 10px;
  border: 1px solid var(--color-hairline);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.legal-table th {
  background: rgba(62, 124, 123, 0.05);
  font-weight: 600;
}

@media (max-width: 800px) {
  .legal-body-standalone { padding: 0 20px; }
  .legal-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
    /* Grid items must shrink below their min-content so the right column
       does not push the document wider than the viewport when TOC entries
       or table content carry long placeholder strings. */
    min-width: 0;
  }
  .legal-grid > * { min-width: 0; }
  .legal-toc {
    position: static;
    /* TOC anchor text may be long on narrow screens; allow wrap. */
    overflow-wrap: anywhere;
  }
  .legal-toc ol,
  .legal-toc li { min-width: 0; }
  .legal-toc a {
    /* Long TOC titles / hashes must wrap, not push the aside wider. */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .legal-body { min-width: 0; }
  .legal-section { min-width: 0; }
  /* Inline <code> placeholders and paths must wrap on narrow viewports
     instead of forcing the parent table cell or paragraph to overflow. */
  .legal-code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Tables stay inside the page on mobile: fixed layout + break-word on
     cells means long cells wrap inside the column instead of forcing the
     document to scroll horizontally. */
  .legal-table {
    font-size: 13px;
    table-layout: fixed;
  }
  .legal-table th,
  .legal-table td {
    padding: 6px 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ── Callout cards (refund at-a-glance) ──────────────────────────────── */
.callout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 32px;
}

.callout-card {
  background: rgba(62, 124, 123, 0.06);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: 16px 20px;
}

.callout-title {
  font-size: 14px;
  margin: 0 0 6px;
  color: var(--color-ink);
}

.callout-body {
  font-size: 14px;
  margin: 0;
  color: var(--color-ink);
}

@media (max-width: 800px) {
  .callout-grid { grid-template-columns: 1fr; }
}

/* ── Contact form ────────────────────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 24px 0;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row select,
.form-row textarea {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--color-hairline);
  border-radius: 6px;
  background: #fff;
  color: var(--color-ink);
}

.form-row textarea {
  resize: vertical;
  min-height: 120px;
}

.form-row-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-thanks {
  font-size: 16px;
  color: var(--color-teal-dark);
  background: rgba(62, 124, 123, 0.08);
  padding: 16px;
  border: 1px solid var(--color-teal-dark);
  border-radius: 8px;
}

.contact-error {
  font-size: 14px;
  color: var(--color-error);
  margin: 0;
}

.form-helper {
  font-size: 13px;
  color: var(--color-soft-gray);
}

/* ── Upload tool ─────────────────────────────────────────────────────── */
.upload-tool {
  background: var(--color-near-black);
  color: var(--color-ivory);
  border-radius: 12px;
  padding: 32px;
  border: 1px solid #1f242c;
}

.upload-tool-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--color-ivory);
}

.upload-tool-input {
  display: block;
  width: 100%;
  padding: 12px;
  background: #14181d;
  color: var(--color-ivory);
  border: 1px solid #2a3038;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
}

.upload-tool-input::file-selector-button {
  background: var(--color-oxide);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
  font-weight: 500;
}

.upload-tool-helper {
  font-size: 13px;
  color: #b5bcc4;
  margin: 0 0 8px;
}

.upload-tool-filename {
  font-size: 14px;
  color: #d9c8a0;
  margin: 0 0 8px;
  font-family: ui-monospace, monospace;
}

.upload-tool-issue {
  font-size: 14px;
  color: var(--color-error);
  background: rgba(139, 44, 36, 0.12);
  border: 1px solid var(--color-error);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0 0 12px;
}

.upload-tool-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.upload-tool-cta {
  display: inline-block;
  background: var(--color-oxide);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  cursor: pointer;
  min-height: 48px;
  text-decoration: none;
  text-align: center;
}

.upload-tool-cta:disabled {
  background: #4a3a32;
  color: #b5bcc4;
  cursor: not-allowed;
}

.upload-tool-link {
  color: var(--color-ivory);
  text-decoration: underline;
  font-size: 14px;
}

.upload-tool-safehat {
  font-size: 13px;
  font-style: italic;
  color: #b5bcc4;
  margin: 12px 0 0;
}

.upload-tool-title {
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--color-ivory);
}

.upload-tool-provider-disabled,
.upload-tool-paywall-detail {
  font-size: 15px;
  margin: 0 0 8px;
  color: #d9c8a0;
}

.upload-tool-codes {
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: #b5bcc4;
  background: #14181d;
  padding: 6px 10px;
  border-radius: 4px;
  display: inline-block;
  margin: 0 0 8px;
}

.upload-tool-dev {
  margin-top: 16px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: #b5bcc4;
}

.upload-tool-dev summary { cursor: pointer; }

/* ── 404 ─────────────────────────────────────────────────────────────── */
.not-found {
  max-width: 640px;
  margin: 120px auto;
  padding: 0 24px;
  text-align: center;
}

.not-found h1 {
  font-size: 32px;
  margin-bottom: 12px;
}

/* ── Mobile footer ───────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .site-footer-columns { grid-template-columns: 1fr; }
  .site-footer { padding: 32px 20px 24px; }
  .site-header-inner { align-items: flex-start; gap: 8px; padding: 8px 12px; }
  .site-brand { flex: 0 0 auto; }
  .site-nav { min-width: 0; }
  .site-nav-list { gap: 0; flex-wrap: wrap; justify-content: flex-end; }
  .site-nav-link { padding: 8px 6px; }
  .site-account { flex: 0 0 auto; min-height: 44px; padding: 0; border: 0; }
  .site-account-note { display: none; }
  .site-brand-wordmark { display: none; }
}

/* ==== bundled: src/styles/archival.css ==== */
/* Stage 12A-R1 — Archival-dark visual authority.
   Scoped to `.home-archival` so the rest of the site (Pricing, Privacy,
   Terms, Refund, Contact, About, FAQ) keeps its Pilot light chrome
   until each route is explicitly re-skinned. Do NOT apply globally.

   Source of truth: docs/design/stage-12-current-stitch-authority-handoff.md
   §4 (tokens) + §5 (responsive geometry) + §6.2 (12-section desktop map).
   ------------------------------------------------------------------ */

/* ── Body — dark archival surface, no warm paper residue ────────────── */
.home-archival {
  background-color: #131313;
  color: #e5e2e1;
  font-family: var(--archival-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100%;
}

/* All section dividers per Stitch §6.2: py-2xl + border-t */
.home-archival .home-shell > .archival-section {
  padding: 48px 0;
  border-top: 1px solid #59413c;
}
.home-archival > section:first-of-type {
  border-top: 0;
}

/* Outer main container — max-w-7xl (1280px) */
.home-archival .home-shell {
  width: min(100%, 1120px);
  padding: 0 24px;
  margin: 0 auto;
}

/* ── Archival grain + corner registration marks (§6.1 decorative) ──── */
.home-archival .archival-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.home-archival .archival-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--archival-registration-desktop);
}
.home-archival .archival-corner.tl { top: -8px; left: -8px; border-top: 1px solid; border-left: 1px solid; }
.home-archival .archival-corner.tr { top: -8px; right: -8px; border-top: 1px solid; border-right: 1px solid; }
.home-archival .archival-corner.bl { bottom: -8px; left: -8px; border-bottom: 1px solid; border-left: 1px solid; }
.home-archival .archival-corner.br { bottom: -8px; right: -8px; border-bottom: 1px solid; border-right: 1px solid; }

/* ── §6.2 row 0 — page-local safe-hat strip ─────────────────────────
   Stage 12C-R2 (P0-2): the former `.archival-header` (a second
   `<header role="banner">` with its own brand + nav) is gone; the shared
   Layout Header is the sole banner. What remains is the §7 safe-hat
   strip, which carries no landmark role and no duplicate navigation.
   ------------------------------------------------------------------ */
.home-archival .archival-topstrip {
  background: #0A0A0A;
  border-bottom: 1px solid #262626;
  padding: 6px 16px;
  text-align: center;
}
.home-archival .archival-topstrip-safehat {
  margin: 0;
  font-family: var(--archival-font-label);
  font-size: 12px;
  line-height: 16px;
  color: #e1bfb8;
}

/* Keep long comparison copy and controls inside narrow mobile viewports. */
.home-archival,
.home-archival .home-shell,
.home-archival .archival-upload-section,
.home-archival .archival-section,
.home-archival .archival-ba {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ── Hero (§6.2 row 2) — 56px desktop, 34px mobile ─────────────────── */
.home-archival .archival-hero {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-archival .archival-hero-h1 {
  font-family: var(--archival-font-display);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  max-width: 900px;
}
@media (min-width: 768px) {
  .home-archival .archival-hero-h1 {
    font-size: 56px;
    line-height: 1.05;
  }
}
.home-archival .archival-hero-subhead {
  color: #A3A3A3;
  font-size: 18px;
  line-height: 1.55;
  margin: 0 auto 16px;
  max-width: 900px;
}
.home-archival .archival-hero-chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 24px;
  font-family: var(--archival-font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A3A3A3;
}
.home-archival .archival-hero-helper {
  font-size: 14px;
  color: #A3A3A3;
  font-style: italic;
  margin: 0 auto;
  max-width: 900px;
}
.home-archival .archival-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: 4px;
  background: #FF6B4A;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.home-archival .archival-hero-cta:hover { color: #fff; opacity: 0.9; }
.home-archival .archival-upload-section {
  scroll-margin-top: 90px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 40px;
}
.home-archival .archival-portrait-guide { margin: 0; align-self: center; }
.home-archival .archival-portrait-guide img { display: block; width: 100%; height: auto; border-radius: 8px; }
.home-archival .archival-portrait-guide figcaption { padding-top: 12px; color: #a3a3a3; font-size: 14px; }
.r9-comparison { position: relative; overflow: hidden; border-radius: 8px; }
.home-archival .r9-comparison .r9-comparison-after { position: absolute; inset: 0; height: 100%; }
.r9-comparison-before-label, .r9-comparison-after-label { position: absolute; top: 12px; padding: 4px 10px; background: #241b18; color: #fff; border-radius: 4px; font-size: 14px; }
.r9-comparison-before-label { left: 12px; }
.r9-comparison-after-label { right: 12px; }
.r9-comparison-divider { position: absolute; inset-block: 0; width: 2px; background: #fff; transform: translateX(-1px); }
.r9-comparison-control { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.r9-comparison-control input { flex: 1; min-width: 0; min-height: 44px; accent-color: #ffb59d; }
.home-archival .archival-upload-card .upload-tool { padding: 0; border: 0; background: transparent; }
.home-archival .upload-tool-input::file-selector-button { min-height: 44px; }
@media (min-width: 900px) {
  .home-archival .archival-upload-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
  .home-archival .home-shell { padding: 0 20px; }
  .home-archival .archival-hero { padding: 24px 0; }
  .home-archival .archival-hero-subhead { font-size: 16px; margin-bottom: 0; }
  .home-archival .archival-upload-card { padding: 20px; }
  .home-archival .archival-upload-section { scroll-margin-top: 140px; }
}

/* ── Restore-a-photo card (§6.2 row 3) — bg-#121212, dashed border ── */
.home-archival .archival-upload-card {
  background: #121212;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .home-archival .archival-upload-card { padding: 32px; }
}
.home-archival .archival-upload-h2 {
  font-family: var(--archival-font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.home-archival .archival-dropzone {
  border: 2px dashed #262626;
  border-radius: 8px;
  padding: 32px;
  background: #0A0A0A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 120ms ease-out;
}
.home-archival .archival-dropzone:hover,
.home-archival .archival-dropzone:focus-within {
  border-color: #FF6B4A;
}
.home-archival .archival-dropzone-icon {
  font-size: 32px;
  color: #A3A3A3;
  line-height: 1;
}
.home-archival .archival-dropzone-label {
  color: #e5e2e1;
  font-weight: 500;
  margin: 0;
}
.home-archival .archival-dropzone-sub {
  color: #A3A3A3;
  font-size: 12px;
  margin: 0;
}
.home-archival .archival-cta {
  width: 100%;
  background: #FF6B4A;
  color: #fff;
  font-weight: 700;
  font-family: var(--archival-font-body);
  font-size: 16px;
  padding: 14px 24px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  min-height: 48px;
  transition: opacity 120ms ease-out;
}
.home-archival .archival-cta:hover { opacity: 0.9; }
.home-archival .archival-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.home-archival .archival-upload-helper,
.home-archival .archival-upload-confirm {
  font-size: 12px;
  line-height: 1.4;
  color: #A3A3A3;
  margin: 0;
}
.home-archival .archival-upload-confirm {
  padding-top: 16px;
  border-top: 1px solid #262626;
}

/* ── Section heading (§6.2 rows 4–14) ─────────────────────────────── */
.home-archival .archival-section-h2 {
  font-family: var(--archival-font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
}
@media (min-width: 768px) {
  .home-archival .archival-section-h2 {
    font-size: 32px;
    line-height: 1.25;
  }
}
.home-archival .archival-section-body {
  font-family: var(--archival-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: #e5e2e1;
  margin: 0 0 16px;
  max-width: 70ch;
}
.home-archival .archival-section-subhead {
  font-family: var(--archival-font-body);
  font-size: 18px;
  color: #e5e2e1;
  margin: 0 0 16px;
}
.home-archival .archival-safehat {
  font-size: 13px;
  font-style: italic;
  color: #A3A3A3;
  margin: 16px 0 0;
  line-height: 1.5;
}

/* ── Before/After slider (§6.2 row 4) — local hero-restore-v2 paired assets ── */
.home-archival .archival-ba {
  aspect-ratio: 512 / 279;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid #262626;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: #121212;
}
.home-archival .archival-ba-image {
  position: absolute;
  inset: 0;
  display: block;
}
.home-archival .archival-ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.home-archival .archival-ba-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 50% 0 0);
}
.home-archival .archival-ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #FF6B4A;
  pointer-events: none;
}
.home-archival .archival-ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #FF6B4A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.home-archival .archival-ba-tag {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: var(--archival-font-label);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
}
.home-archival .archival-ba-tag.before { top: 16px; left: 16px; }
.home-archival .archival-ba-tag.after  { top: 16px; right: 16px; }
@media (max-width: 767px) {
  .home-archival .archival-ba-tag.before { top: 8px;  left: 8px; }
  .home-archival .archival-ba-tag.after  { top: 8px;  right: 8px; }
  .home-archival .archival-ba-handle { width: 48px; height: 48px; }
}
.home-archival .archival-ba-figcaption {
  font-size: 12px;
  font-style: italic;
  color: #A3A3A3;
  margin: 12px 0 0;
  text-align: center;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.home-archival .archival-example-secondary {
  max-width: 1024px;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid #3a3838;
}
.home-archival .archival-example-h3 {
  margin: 0 0 8px;
  font-family: var(--archival-font-heading);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  color: #f5f1e8;
}
.home-archival .archival-example-secondary .archival-section-body {
  margin-top: 0;
  margin-bottom: 16px;
}

/* ── How-it-works 3-step row (§6.2 row 6) ─────────────────────────── */
.home-archival .archival-how {
  display: grid;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
@media (min-width: 768px) {
  .home-archival .archival-how { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-archival .archival-how li {
  background: #201f1f;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 24px;
}
.home-archival .archival-how-h3 {
  font-family: var(--archival-font-display);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}
.home-archival .archival-how-p {
  font-size: 14px;
  color: #e5e2e1;
  margin: 0;
  line-height: 1.55;
}

/* ── Identity preservation tiers (§6.2 row 7) ─────────────────────── */
.home-archival .archival-tiers {
  display: grid;
  gap: 16px;
  margin: 0 0 16px;
}
@media (min-width: 768px) {
  .home-archival .archival-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-archival .archival-tier {
  background: #201f1f;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 24px;
}
.home-archival .archival-tier.default { border-color: #FF6B4A; border-width: 2px; }
.home-archival .archival-tier-h3 {
  font-family: var(--archival-font-display);
  font-size: 18px;
  color: #fff;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-archival .archival-tier-tag {
  display: inline-block;
  font-family: var(--archival-font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  background: #FF6B4A;
  color: #fff;
  font-weight: 500;
}
.home-archival .archival-tier.default .archival-tier-tag { background: #FF6B4A; }
.home-archival .archival-tier-p {
  font-size: 14px;
  color: #e5e2e1;
  margin: 0;
  line-height: 1.55;
}

/* ── Lists — common uses, what\'s coming, your photo, honest limits ── */
.home-archival .archival-list {
  padding-left: 24px;
  margin: 0 0 16px;
  font-size: 16px;
  color: #e5e2e1;
  line-height: 1.55;
}
.home-archival .archival-list li { margin: 0 0 8px; }

/* ── FAQ — details/summary (§6.2 row 12) ──────────────────────────── */
.home-archival .archival-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0;
}
.home-archival .archival-faq-item {
  background: #201f1f;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 12px 16px;
}
.home-archival .archival-faq-q {
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  list-style: none;
  padding: 4px 0;
}
.home-archival .archival-faq-q::-webkit-details-marker { display: none; }
.home-archival .archival-faq-q::before {
  content: '+';
  display: inline-block;
  width: 16px;
  color: #FF6B4A;
  font-weight: 700;
}
.home-archival .archival-faq-item[open] .archival-faq-q::before { content: '−'; }
.home-archival .archival-faq-a {
  font-size: 14px;
  line-height: 1.6;
  color: #e5e2e1;
  margin: 8px 0 0;
}

/* ── Pricing teaser (§6.2 row 13) ─────────────────────────────────── */
.home-archival .archival-pricing-teaser-cta {
  display: inline-block;
  background: #FF6B4A;
  color: #fff;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 4px;
  text-decoration: none;
  min-height: 48px;
  line-height: 1.2;
}
.home-archival .archival-pricing-teaser-cta:hover { opacity: 0.9; }

/* ── Footer — Stage 12C-R2 (P0-2) ────────────────────────────────────
   The page-local `.archival-footer` block is removed along with the
   duplicated `<footer role="contentinfo">` markup it styled. The shared
   `.site-footer` (re-skinned below under `.archival-shell`) is the sole
   contentinfo on every route.
   ------------------------------------------------------------------ */

/* ── Stage 12C-R2 (P0-1) — the resolved dark base ────────────────────
   Independent QA proved the whole archival sheet was silently dropped
   (unresolvable `@import url('@/styles/archival.css')`), so the browser
   computed the Pilot ivory `#F4EFE6` body on every route. Now that the
   bundle resolves, the archival authority owns `html` / `body` directly
   instead of relying on a wrapper element — a wrapper can only paint its
   own box, and the QA gate measures `getComputedStyle(document.body)`.
   The Pilot tokens stay defined in tokens.css (Stage 11B/11C contracts
   still reference them) but they no longer paint page chrome.
   ------------------------------------------------------------------ */
html {
  background-color: var(--archival-surface);
}

body {
  background-color: var(--archival-surface);
  color: var(--archival-text-primary);
  font-family: var(--archival-font-body);
}

/* ── Global chrome (header / footer / shell) ────────────────────────
   Applied to the shared shell so EVERY route (Pricing, Privacy, Terms,
   Refund, Contact, About, FAQ) gets the dark archival frame. Per-page
   content (tier cards, legal grid, contact form) keeps its existing
   Pilot styling so per-route Stage 11B/11C contracts are not
   disturbed. The dark tokens override ONLY the shell-level surfaces.
   ------------------------------------------------------------------ */
.site-shell.archival-shell {
  background: #131313;
  color: #e5e2e1;
}
.archival-shell > .site-main {
  background: #131313;
  color: #e5e2e1;
}
.archival-shell .site-header {
  background: #121212;
  border-bottom-color: #262626;
}
.archival-shell .site-header-inner { padding: 12px 24px; }
.archival-shell .site-brand { color: #fff; }
.archival-shell .site-brand-mark { color: #FF6B4A; }
.archival-shell .site-brand-wordmark { color: #e5e2e1; }
.archival-shell .site-nav-link { color: #e5e2e1; }
.archival-shell .site-nav-link:hover { color: #fff; }
.archival-shell .site-nav-link.is-active {
  color: #FF6B4A;
  border-bottom-color: #FF6B4A;
}
.archival-shell .site-footer {
  background: #0A0A0A;
  color: #e5e2e1;
  border-top: 1px solid #262626;
}
.archival-shell .site-footer-col a { color: #e5e2e1; }
.archival-shell .site-footer-col a:hover { color: #FF6B4A; }
.archival-shell .site-footer-heading { color: #A3A3A3; }
.archival-shell .site-footer-safehat,
.archival-shell .site-footer-microcopy { color: #A3A3A3; }
@media (max-width: 800px) {
  .archival-shell .site-footer { padding: 32px 20px 24px; }
  .archival-shell .site-header-inner {
    padding: 8px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: center;
  }
  .archival-shell .site-nav { grid-row: 2; grid-column: 1 / -1; }
  .archival-shell .site-nav-list { justify-content: center; flex-wrap: nowrap; gap: 16px; }
  .archival-shell .site-account { grid-row: 1; grid-column: 2; }
}

/* ── Stage 12C-R2 (P0-1) — per-route surfaces under the dark shell ───
   Once the archival sheet actually loads, the legacy Pilot rules that
   painted warm-paper panels (`rgba(255,255,255,.5)` cards, ivory page
   heroes, `#fff` form fields) would sit as bright blocks on the dark
   canvas. These overrides re-skin the *surfaces* only; every string,
   layout, aria hook and per-route Stage 11B/11C contract is untouched.
   ------------------------------------------------------------------ */
.archival-shell h1,
.archival-shell h2,
.archival-shell h3,
.archival-shell h4 {
  color: #fff;
  font-family: var(--archival-font-display);
}
.archival-shell a { color: var(--archival-accent-coral); }
.archival-shell a:hover { color: var(--archival-accent-coral-soft); }
.archival-shell code {
  background: rgba(255, 107, 74, 0.1);
  color: #e5e2e1;
}

/* Generic page hero (Pricing / Privacy / Terms / Refund / Contact / About / FAQ) */
.archival-shell .page-hero { background: transparent; }
.archival-shell .page-subhead,
.archival-shell .block-body,
.archival-shell .block-subhead,
.archival-shell .legal-p,
.archival-shell .tier-credits,
.archival-shell .callout-body,
.archival-shell .callout-title,
.archival-shell .how-steps p,
.archival-shell .faq-a,
.archival-shell .form-row label,
.archival-shell .form-row-checkbox label,
.archival-shell .hero-subhead,
.archival-shell .hero-definition { color: #e5e2e1; }
.archival-shell .page-safehat,
.archival-shell .page-meta-line,
.archival-shell .block-safehat,
.archival-shell .hero-helper,
.archival-shell .hero-safehat,
.archival-shell .tier-detail,
.archival-shell .ba-figcaption,
.archival-shell .form-helper,
.archival-shell .legal-toc-heading,
.archival-shell .tier-cta-disabled { color: var(--archival-text-muted); }
.archival-shell .page-stub-marker {
  background: var(--archival-surface-container);
  border-color: var(--archival-border-hairline);
  color: #e5e2e1;
}

/* Cards, panels and tables → archival containers instead of warm paper */
.archival-shell .hero { background: transparent; }
.archival-shell .how-steps li,
.archival-shell .tier-card,
.archival-shell .faq-item,
.archival-shell .legal-toc,
.archival-shell .callout-card {
  background: var(--archival-surface-container);
  border-color: var(--archival-border-hairline);
}
.archival-shell .tier-card-free { background: var(--archival-surface-container-low); }
.archival-shell .tier-card-default,
.archival-shell .tier-card-popular { border-color: var(--archival-accent-coral); }
.archival-shell .tier-tag,
.archival-shell .tier-card-default .tier-tag,
.archival-shell .tier-card-popular .tier-tag {
  background: var(--archival-accent-coral);
  color: #fff;
}
.archival-shell .tier-price,
.archival-shell .tier-name { color: #fff; }
.archival-shell .faq-item summary { color: #fff; }
.archival-shell .faq-item summary::marker { color: var(--archival-accent-coral); }
.archival-shell .legal-toc a { color: #e5e2e1; }
.archival-shell .legal-toc a:hover { color: var(--archival-accent-coral); }
.archival-shell .legal-section { border-bottom-color: var(--archival-border-hairline); }
.archival-shell .legal-code {
  border-color: var(--archival-border-hairline);
  background: var(--archival-surface-container-lowest);
  color: #e5e2e1;
}
.archival-shell .legal-table th,
.archival-shell .legal-table td {
  border-color: var(--archival-border-hairline);
  color: #e5e2e1;
}
.archival-shell .legal-table th { background: var(--archival-surface-container-high); }

/* Forms + upload tool + hero art keep contrast on the dark canvas */
.archival-shell .form-row input[type="text"],
.archival-shell .form-row input[type="email"],
.archival-shell .form-row select,
.archival-shell .form-row textarea {
  background: var(--archival-surface-container-lowest);
  border-color: var(--archival-border-hairline);
  color: #e5e2e1;
}
.archival-shell .contact-fieldset { border-color: var(--archival-border-hairline); }
.archival-shell .contact-fieldset-legend { color: var(--archival-text-muted); }
.archival-shell .contact-thanks {
  background: rgba(255, 107, 74, 0.1);
  border-color: var(--archival-accent-coral);
  color: var(--archival-accent-coral-deep);
}
.archival-shell .contact-error,
.archival-shell .upload-tool-issue { color: var(--archival-accent-error); }
.archival-shell .upload-tool-issue {
  background: rgba(255, 180, 171, 0.1);
  border-color: var(--archival-accent-error);
}
.archival-shell .upload-tool {
  background: var(--archival-surface-container-low);
  border-color: var(--archival-border-hairline);
  color: #e5e2e1;
}
.archival-shell .upload-tool-title { color: #fff; }
.archival-shell .upload-tool-label { color: #e5e2e1; }
.archival-shell .upload-tool-input {
  background: var(--archival-surface-container-lowest);
  border-color: var(--archival-border-hairline);
  color: #e5e2e1;
}
.archival-shell .upload-tool-input::file-selector-button {
  background: var(--archival-accent-coral);
  color: #fff;
}
.archival-shell .upload-tool-helper,
.archival-shell .upload-tool-safehat,
.archival-shell .upload-tool-dev,
.archival-shell .upload-tool-codes { color: var(--archival-text-muted); }
.archival-shell .upload-tool-codes { background: var(--archival-surface-container-lowest); }
.archival-shell .upload-tool-filename,
.archival-shell .upload-tool-provider-disabled,
.archival-shell .upload-tool-paywall-detail { color: var(--archival-accent-coral-soft); }
.archival-shell .upload-tool-link { color: var(--archival-accent-coral); }
.archival-shell .hero-art-figure,
.archival-shell .ba-figure .ba-slider {
  background: var(--archival-surface-container-lowest);
  border-color: var(--archival-border-hairline);
}
.archival-shell .not-found h1 { color: #fff; }

/* ── Stage 12C-R2 (P0-1) — single coral accent on shared CTAs ────────
   The Pilot oxide-red (#A6533C) and desaturated teal must not resurface
   as a second accent under the dark authority (Stage 12A-R1 §4:
   "single accent"). The disabled treatments stay visually inert so the
   Stage 10-R1 honest-disabled contract is preserved.
   ------------------------------------------------------------------ */
.archival-shell .hero-cta-primary,
.archival-shell .upload-tool-cta {
  background: var(--archival-accent-coral);
  border-color: var(--archival-accent-coral);
  color: #fff;
}
.archival-shell .hero-cta-primary:hover,
.archival-shell .upload-tool-cta:hover {
  background: var(--archival-accent-coral);
  border-color: var(--archival-accent-coral);
  color: #fff;
  opacity: 0.9;
}
.archival-shell .hero-cta-secondary {
  background: var(--archival-accent-coral);
  border-color: var(--archival-accent-coral);
  color: #fff;
}
.archival-shell .hero-cta-secondary:hover {
  background: var(--archival-accent-coral);
  color: #fff;
  opacity: 0.9;
}
.archival-shell button.hero-cta:disabled,
.archival-shell button.hero-cta[aria-disabled="true"],
.archival-shell button.hero-cta-primary:disabled,
.archival-shell button.hero-cta-primary[aria-disabled="true"],
.archival-shell .upload-tool-cta:disabled {
  background: var(--archival-surface-container-high);
  border-color: var(--archival-border-hairline);
  color: var(--archival-text-muted);
  opacity: 0.85;
}

/* ── Stage 12C-R2 (P1-5) — >= 44px shared interactive targets ────────
   QA measured the shared brand at 28.8px and the nav links at 30px on
   both desktop and 390px. `min-height` alone is inert on an inline box,
   so each target also becomes a flex box that can grow.
   ------------------------------------------------------------------ */
.site-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
}
.site-nav-list { align-items: center; }
.hero-cta { min-height: 48px; }