/* ============================================================
   Revasser Disputes — Editorial-Evidence brand system
   The landing rhymes with the artifact it produces.
   No card. No three-step. No substrate slab. No AI-vomit defaults.
   ============================================================ */

/* ── Type — Klim Type Foundry, the originals from the plan.
       Tiempos Headline VF — display headlines, modern scotch roman
       Tiempos Text VF — body copy, optimized for reading at text size
       Untitled Sans VF — neutral modernist sans, Söhne-class register */
@font-face {
  font-family: 'Tiempos Headline';
  src: url('/fonts/Tiempos-Headline-VF.woff2') format('woff2-variations'),
       url('/fonts/Tiempos-Headline-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tiempos Headline';
  src: url('/fonts/Tiempos-Headline-Italic-VF.woff2') format('woff2-variations'),
       url('/fonts/Tiempos-Headline-Italic-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Tiempos Text';
  src: url('/fonts/Tiempos-Text-VF.woff2') format('woff2-variations'),
       url('/fonts/Tiempos-Text-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tiempos Text';
  src: url('/fonts/Tiempos-Text-Italic-VF.woff2') format('woff2-variations'),
       url('/fonts/Tiempos-Text-Italic-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('/fonts/UntitledSans-VF.woff2') format('woff2-variations'),
       url('/fonts/UntitledSans-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('/fonts/UntitledSans-Italic-VF.woff2') format('woff2-variations'),
       url('/fonts/UntitledSans-Italic-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Color — witness register, not magazine-cover anger.
     A real practice on warm paper, written in dense ink.
     ONE quiet pigment: ink-stain navy — fountain-pen-on-bond — used three
     places only: the letter's Re: label, the masthead hairline rule, and
     the form's focus state. Active-error state keeps its own muted red so
     it stays visually distinct from pigment-navy in the form.
     Restraint as evidence of practice. The visitor is exhausted, not
     adrenalized — the page holds them, doesn't shout at them. */
  --paper:        #f1ede4;   /* warmer, lower-key paper than magazine cover stock */
  --paper-subtle: #e3dccd;   /* noticeably deeper paper — used for the working area (intake) */
  --paper-bright: #f7f4ec;   /* lifted paper, used as ink-block secondary text */
  --ink:          #14130f;   /* slightly softer dense black */
  --ink-soft:     #2d2a23;
  --pigment:      #1a3a5c;   /* ink-stain navy — quiet authority, not anger-mirror */
  --pigment-deep: #0d2545;   /* hover */
  --pigment-soft: #d6dfeb;   /* desaturated navy for rare soft surfaces */
  --quiet:        #6d6a62;   /* metadata, captions */
  --quiet-light:  #a59f93;
  --rule:         #cfc9b9;   /* hairlines, slightly more visible */
  --rule-strong:  #b8b1a1;

  /* Error decoupled from pigment — a muted rust red, NOT cardinal alarm.
     Stays distinct from navy in form contexts without competing for attention. */
  --error:        #b8311a;
  --error-bg:     rgba(184, 49, 26, 0.07);

  /* Accent — bookcloth amber. 60/30/10: paper + navy + this. Used in ≤5
     places total (seal center dot, nav link hover underline, hero specimen
     arrow + hover state). The warm balance to a cool primary — leather
     binding, wax seal, autumn ink. NOT used on the primary CTA, body type,
     section headings, the Re: label, redactions, footer, or form focus. */
  --accent:       #7a3f1c;   /* bookcloth amber */
  --accent-deep:  #5e3015;
  --accent-soft:  #efe2d3;

  /* Backwards-compat aliases (still referenced in form/charge/upload classes).
     --oxblood points at navy now; semantic class names will be migrated later. */
  --bone:         var(--paper);
  --bone-deep:    var(--paper-subtle);
  --oxblood:      var(--pigment);
  --oxblood-deep: var(--pigment-deep);
  --newsprint:    var(--quiet);
  --newsprint-light: var(--quiet-light);

  /* Type stack — Klim test fonts wired (Tiempos Headline, Tiempos Text,
     Untitled Sans). Real Klim web license (~$580/family) is a future cost
     when revenue justifies. The files in /public/fonts/ use the same family
     names, so the licensed swap is a drop-in replacement of the binaries. */
  --serif-display: "Tiempos Headline", "Charter", "Iowan Old Style", Georgia, serif;
  --serif-body:    "Tiempos Text", "Charter", "Iowan Old Style", Georgia, serif;
  --sans-text:     "Untitled Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --sans-display:  "Untitled Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --mono:          "SF Mono", "Menlo", "Monaco", "Courier New", monospace;

  /* Spatial — discipline, not decoration. */
  --measure-prose:    560px;   /* readable serif body width */
  --measure-narrow:   420px;
  --gutter:           80px;
  --margin-rail:      240px;   /* marginalia column width @ ≥960px */

  /* Vertical rhythm — multiples of 8px, no half-units. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;
}

/* ── Base ───────────────────────────────────────────────────── */
html {
  font-size: 17px;            /* set the scale at the root, not at body */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, svg { display: block; }

::selection {
  background: var(--ink);
  color: var(--bone);
}

/* Links — underlined inline only (never the oxblood; that's reserved). */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color 0.15s;
}
a:hover {
  text-decoration-color: var(--ink);
}

/* ── Skip link (accessibility) ──────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ink);
  color: var(--bone);
  padding: var(--space-1) var(--space-2);
  font-family: var(--sans-text);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus { top: 0; }

/* ── Layout primitives ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--measure-prose) + 96px);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Shell bands run wider than the body reading column. The masthead, hero,
   and footer are product chrome (navigation, two-col hero, legal footer);
   their width is set by the band, not the reading measure. Body sections
   (Method, Intake, FAQ) stay at the 656px reading width above. */
@media (min-width: 960px) {
  .site-header .container,
  .hero .container,
  .site-footer .container {
    max-width: 1180px;
  }
}

/* Editorial grid — only kicks in at desktop width. Below that everything
   collapses to a single column with marginalia turned into eyebrows. */
.editorial {
  display: block;
}

@media (min-width: 960px) {
  .editorial {
    display: grid;
    grid-template-columns: var(--measure-prose) var(--margin-rail);
    column-gap: var(--gutter);
    align-items: start;
    max-width: calc(var(--measure-prose) + var(--gutter) + var(--margin-rail));
    margin-inline: auto;
    padding-inline: var(--space-3);
  }
  .editorial > .col-primary {
    grid-column: 1;
    min-width: 0;
  }
  .editorial > .col-margin {
    grid-column: 2;
    border-left: 1px solid var(--rule);
    padding-left: var(--gutter);
    margin-left: calc(var(--gutter) * -1);
    padding-block: var(--space-1);
  }
}

/* ── Masthead — full-bleed pigment-navy block, now carrying the nav.
       The masthead band is BOTH the brand AND the navigation; the navy
       block doesn't fragment into separate brand and nav regions. The seal
       + Tiempos wordmark anchor left; small-caps anchor links float
       center-right; the secondary CTA sits right. Locator drops below the
       nav row in paper-subtle, indented under the brand. */
.site-header {
  background: var(--pigment);
  color: var(--paper);
  padding-block: var(--space-3) var(--space-4);
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: 0;
}

/* Nav row — brand lockup left, anchor links center-right, CTA right. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--paper-bright);
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
.nav__brand:hover,
.nav__brand:focus {
  color: var(--paper-bright);
  text-decoration: none;
}
.nav__brand:focus-visible {
  outline: 1px solid var(--paper-bright);
  outline-offset: 4px;
}

/* Seal — circular notarial mark. Inherits color via currentColor; the only
   fixed color is the amber center dot (10% accent moment in the brand mark
   itself). Operator can extract this SVG to public/seal.svg and refine the
   glyph weights / ring thickness / monogram placement in Illustrator. */
.seal {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--paper-bright);
}

.nav__wordmark {
  font-family: var(--serif-display);
  font-weight: 380;
  font-size: clamp(1.875rem, 3vw, 2.375rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--paper-bright);
  margin: 0;
  font-variation-settings: "opsz" 60;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
}

/* Anchor links — small-caps editorial-correspondence register, not SaaS bar. */
.nav__links {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.nav__links a {
  font-family: var(--sans-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-subtle);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s, border-bottom-color 0.15s;
}
.nav__links a:hover {
  color: var(--paper-bright);
  border-bottom-color: var(--accent);
}
.nav__links a:focus-visible {
  outline: 1px solid var(--paper-bright);
  outline-offset: 3px;
}

/* Secondary CTA — small navy-on-paper-bright button. Smaller than hero CTA
   so it reads as persistent navigation, not the primary call. */
.nav__cta {
  font-family: var(--sans-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pigment);
  background: var(--paper-bright);
  padding: 11px 18px 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--paper);
  color: var(--pigment-deep);
  text-decoration: none;
  transform: translateY(-1px);
}
.nav__cta:focus-visible {
  outline: 2px solid var(--paper-bright);
  outline-offset: 3px;
}

.nav__cta-price {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: oldstyle-nums;
  opacity: 0.85;
}

/* Legacy — kept for compat. masthead-brand is no longer rendered. */
.masthead-brand {
  font-family: var(--serif-display);
  font-weight: 380;
  font-size: clamp(2.75rem, 5.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--paper-bright);
  margin: 0;
  font-variation-settings: "opsz" 60;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
}
.masthead-brand a,
.masthead-brand a:hover {
  color: inherit;
  text-decoration: none;
}

.masthead-locator {
  margin: 0;
  padding-left: 54px;       /* indent under the brand lockup, past the seal */
  font-family: var(--sans-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-subtle);
}

/* ── Eyebrow (case-caption style) ───────────────────────────── */
.eyebrow {
  font-family: var(--sans-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--newsprint);
  margin-bottom: var(--space-2);
}

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow--rule::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
  height: 0;
}

/* ── Hero — two-column assertion + proof. The left column states the
       practice; the right column shows the artifact. The visitor sees the
       form of what the engagement produces side-by-side with the offer.
       Density over breathing room — A4 kills the ~70vh negative space the
       single-column hero carried. On mobile the grid stacks: assertion
       block first (date, H1, byline, CTA), letter excerpt below. */
.hero {
  padding-block: var(--space-4) var(--space-4);
}

.hero--two-col {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-4);
}

@media (min-width: 960px) {
  .hero--two-col {
    grid-template-columns: 58% 42%;
    column-gap: var(--space-5);
    row-gap: 0;
    align-items: start;
  }
}

.hero__assertion {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero__proof {
  min-width: 0;
}

/* On desktop two-col, the letter excerpt scales down slightly so it lives
   comfortably in the 42% rail. Stays above the 0.875rem floor named in the
   plan's risk register. */
@media (min-width: 960px) {
  .hero__proof .letter {
    font-size: 0.9375rem;
    max-width: 100%;
    margin: 0;
  }
}

/* Primary hero CTA — navy-on-paper-bright button. Heavier than the nav
   CTA. This is the assertion-side moment; the letter is the proof-side
   moment. */
.hero__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: var(--pigment);
  color: var(--paper-bright);
  font-family: var(--sans-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 28px 18px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, transform 0.1s;
  margin-top: var(--space-3);
  align-self: flex-start;
  white-space: nowrap;
}
.hero__cta:hover {
  background: var(--pigment-deep);
  color: var(--paper-bright);
  text-decoration: none;
  transform: translateY(-1px);
}
.hero__cta:focus-visible {
  outline: 2px solid var(--pigment);
  outline-offset: 4px;
}

.hero__cta-price {
  font-family: var(--serif-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: oldstyle-nums;
  opacity: 0.85;
}

/* Specimen anchor — desktop-only, points to the right column. Removed on
   mobile because the letter excerpt is shown directly below the assertion. */
.hero__specimen-link {
  display: inline-block;
  font-family: var(--sans-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  margin-top: var(--space-3);
  align-self: flex-start;
  transition: color 0.15s, border-bottom-color 0.15s;
}

.hero__specimen-link__arrow {
  display: inline-block;
  margin-left: 4px;
  color: var(--accent);
  transition: transform 0.15s;
}

.hero__specimen-link:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

.hero__specimen-link:hover .hero__specimen-link__arrow {
  transform: translateX(2px);
}

.hero__specimen-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 959px) {
  .hero__specimen-link {
    display: none;
  }
}

.hero__date {
  font-family: var(--sans-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--quiet);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__date::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
  height: 0;
}

.hero__lead {
  font-family: var(--serif-display);
  font-weight: 380;
  font-size: clamp(1.875rem, 4.5vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--pigment);
  max-width: 640px;
  margin-bottom: var(--space-2);
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
  font-variation-settings: "opsz" 36;
}

.hero__byline {
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 540px;
  margin-bottom: var(--space-4);
}

.hero__byline strong { font-weight: 500; }

.hero__rule {
  border: 0;
  border-top: 1px solid var(--pigment);
  margin: var(--space-4) 0 var(--space-4);
  max-width: 100%;
  height: 0;
}

/* Letter — typeset as a real demand letter would land on a desk.
   Indented from the page reading column with a hairline left border,
   tighter line-height than page body to read as correspondence. */
.letter {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) 0 var(--space-3) var(--space-4);
  border-left: 1px solid var(--rule-strong);
  max-width: 520px;
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

.letter > * + * {
  margin-top: var(--space-2);
}

.letter__meta {
  font-family: var(--serif-body);
  color: var(--ink);
}

.letter__address {
  font-style: normal;
  color: var(--ink);
  line-height: 1.5;
  margin-top: var(--space-2);
}

.letter__re {
  display: flex;
  gap: 0.45em;
  align-items: baseline;
  font-weight: 480;
  color: var(--ink);
  margin-top: var(--space-3);
}

.letter__re-label {
  flex-shrink: 0;
  color: var(--pigment);
  font-weight: 500;
}

.letter__re-body { flex: 1; }

.letter__salutation {
  color: var(--ink);
  margin-top: var(--space-3);
}

.letter__body {
  text-indent: 1.8em;
  hyphens: auto;
  margin-top: var(--space-2);
}

.letter__close { margin-top: var(--space-3); }

.letter__sign { margin-top: 4px; }

.letter__signature-svg {
  display: block;
  height: 44px;
  width: auto;
  max-width: 200px;
  color: var(--ink);
}

.letter__signer {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.3;
}

.letter__signer-aff {
  display: block;
  font-style: italic;
  color: var(--quiet);
  font-size: 0.875rem;
  margin-top: 2px;
}

/* Redaction — solid ink bar. Inline-block element with ink background;
   text inside is transparent so it doesn't read but remains selectable.
   aria-label on each instance carries the meaning for screen readers. */
.redact {
  display: inline-block;
  background: var(--ink);
  color: transparent;
  height: 0.85em;
  vertical-align: -0.12em;
  border-radius: 1px;
  padding: 0 1px;
  font-size: 0.95em;
  letter-spacing: -0.04em;
  overflow: hidden;
  white-space: nowrap;
  user-select: text;
}

.redact--xs { min-width: 3ch; }
.redact--sm { min-width: 6ch; }
.redact--md { min-width: 10ch; }
.redact--lg { min-width: 14ch; }

.hero__price {
  font-variant-numeric: oldstyle-nums;
  color: var(--ink);
  font-weight: 500;
}

.hero__action {
  display: inline-block;
  font-family: var(--sans-text);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  padding-block: 6px;
  margin-top: var(--space-1);
}

.hero__action:hover {
  color: var(--pigment);
  text-decoration-color: var(--pigment);
}

.hero__action:focus-visible {
  outline: 1px solid var(--pigment);
  outline-offset: 4px;
}

/* ── Marginalia — pull quotes, exhibit labels, footnotes ────── */
.marginalia {
  font-family: var(--serif-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--newsprint);
  font-style: normal;
}

.marginalia + .marginalia {
  margin-top: var(--space-5);
}

.marginalia__label {
  font-family: var(--sans-text);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--newsprint-light);
  margin-bottom: var(--space-1);
}

.marginalia__body {
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.marginalia__body--quote {
  font-style: italic;
  font-family: var(--serif-body);
  color: var(--newsprint);
}

/* On mobile, marginalia collapses inline as small-caps eyebrows above sections */
@media (max-width: 959px) {
  .col-margin {
    display: none;  /* mobile shows inline-eyebrows via .eyebrow already */
  }
}

/* ── Section rhythm ────────────────────────────────────────── */
.section {
  padding-block: var(--space-6);
}

.section--tight {
  padding-block: var(--space-5);
}

.section--paper-subtle {
  background: var(--paper-subtle);
}

.section + .section {
  border-top: 1px solid var(--rule);
}

.section--paper-subtle + .section,
.section + .section--paper-subtle {
  border-top: 3px solid var(--pigment);
}

.section__heading {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pigment);
  margin-bottom: var(--space-2);
}

.section__lede {
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 480px;
  margin-bottom: var(--space-4);
}

/* ── How-it-reads (replaces three-step circles) ─────────────── */
.method {
  display: block;
  margin-top: var(--space-3);
}

.method__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
}
.method__step:last-child {
  border-bottom: 1px solid var(--rule);
}

.method__num {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.125rem;
  font-variant-numeric: oldstyle-nums;
  color: var(--newsprint);
  line-height: 1.4;
  letter-spacing: 0;
  padding-top: 2px;
}

.method__body { min-width: 0; }

.method__title {
  font-family: var(--sans-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.method__desc {
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ── Intake form — typeset as a case intake, not a SaaS card ── */
.intake {
  margin-top: var(--space-4);
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
}

.intake__caption {
  font-family: var(--sans-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--newsprint);
  margin-bottom: var(--space-1);
}

.intake__title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

/* Field rows — separated by hairline rules, NOT contained in a card */
.field {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.field--stack {
  grid-template-columns: 1fr;
  row-gap: var(--space-1);
}

.field__label {
  font-family: var(--sans-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--newsprint);
  padding-top: 12px;
}
.field__label .req { color: var(--ink); font-weight: 500; }

.field__control { min-width: 0; }

.field__input,
.field__textarea {
  width: 100%;
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 10px 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  transition: border-color 0.15s;
}
.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--newsprint-light);
  font-style: italic;
}
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-bottom: 1px solid var(--ink);
  background: transparent;
}
.field__input.has-error,
.field__textarea.has-error {
  border-bottom: 1px solid var(--error);
  background: var(--error-bg);
}
.field__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
  padding-block: 12px;
}

.field__hint {
  font-family: var(--serif-body);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--newsprint);
  margin-top: var(--space-1);
}

.field__error {
  font-family: var(--sans-text);
  font-size: 0.75rem;
  color: var(--error);
  margin-top: 6px;
  display: none;
  letter-spacing: 0.02em;
}
.field__error.visible { display: block; }

.field__counter {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--newsprint-light);
  margin-top: 6px;
  text-align: right;
}
.field__counter.near-limit { color: var(--ink); }

/* ── Charges — ledger-style entry ─────────────────────────── */
.charges {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.charge-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px dotted var(--rule);
}

.charge-row__cell {
  display: flex;
  flex-direction: column;
}

.charge-row__cell label {
  font-family: var(--sans-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--newsprint);
  margin-bottom: 4px;
}

.charge-row__cell input {
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 6px 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.charge-row__cell input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.charge-row__cell input.has-error {
  border-bottom-color: var(--error);
  background: var(--error-bg);
}

.btn-remove-charge {
  background: transparent;
  border: none;
  color: var(--newsprint);
  cursor: pointer;
  font-family: var(--serif-display);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  padding: 6px 8px;
  align-self: end;
  margin-bottom: 4px;
  transition: color 0.12s;
}
.btn-remove-charge:hover { color: var(--ink); }
.btn-remove-charge:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}
.btn-remove-charge[hidden] { display: none; }

.btn-add-charge {
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 0;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 6px;
  align-self: flex-start;
  transition: text-decoration-color 0.15s;
}
.btn-add-charge:hover {
  text-decoration-color: var(--ink);
}
.btn-add-charge:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* ── Upload zone — typeset as evidence inventory ─────────── */
.upload {
  margin-top: var(--space-1);
  border: 1px dashed var(--rule);
  background: rgba(255,255,255,0.35);
  padding: var(--space-3);
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.upload:hover,
.upload.drag-over {
  border-color: var(--ink);
  background: rgba(255,255,255,0.55);
}
.upload:focus-within {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

.upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.upload__caption {
  font-family: var(--sans-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--newsprint);
  margin-bottom: var(--space-1);
}

.upload__title {
  font-family: var(--serif-body);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.upload__hint {
  font-family: var(--serif-body);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--newsprint);
  line-height: 1.5;
}

.file-list {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
  padding-block: 4px;
  border-bottom: 1px dotted var(--rule);
}
.file-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-item__size {
  color: var(--newsprint);
  font-variant-numeric: tabular-nums;
}

.upload-error {
  font-family: var(--sans-text);
  font-size: 0.75rem;
  color: var(--error);
  margin-top: 6px;
  display: none;
  letter-spacing: 0.02em;
}
.upload-error.visible { display: block; }

/* ── Submit row ─────────────────────────────────────────────── */
.submit-row {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.btn-submit {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 20px 32px 22px;
  border: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
}
.btn-submit:hover:not(:disabled) {
  background: var(--ink-soft);
  transform: translateY(-1px);
}
.btn-submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.btn-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-submit__price {
  font-family: var(--serif-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: oldstyle-nums;
  opacity: 0.85;
}

.btn-submit__spinner {
  display: none;
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(244, 238, 228, 0.4);
  border-top-color: var(--bone);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  align-self: center;
}
.btn-submit.is-loading .btn-submit__spinner { display: block; }
.btn-submit.is-loading .btn-submit__label { opacity: 0.75; }

@keyframes spin { to { transform: rotate(360deg); } }

.submit-legal {
  font-family: var(--serif-body);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--newsprint);
  line-height: 1.5;
  max-width: 460px;
}

/* ── Confirmation — same editorial register, no green box ──── */
.confirmation {
  display: none;
  padding: var(--space-4) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.confirmation.visible { display: block; }

.confirmation__eyebrow {
  font-family: var(--sans-text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--newsprint);
  margin-bottom: var(--space-2);
}

.confirmation__heading {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.confirmation__body {
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
}

.confirmation__email {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--bone-deep);
  padding: 1px 6px;
}

/* ── FAQ — numbered case-style ──────────────────────────────── */
.faq__list {
  margin-top: var(--space-4);
  list-style: none;
  border-top: 1px solid var(--rule);
}

.faq__item {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: var(--space-3);
}

.faq__num {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--newsprint);
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  font-variant-numeric: oldstyle-nums;
  padding-top: 2px;
}

.faq__q {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.faq__a {
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 540px;
}

/* ── Footer — full-bleed ink block. Strong chromatic close to balance
       the navy masthead at top. Paper-subtle text on ink, links pick up
       paper-bright on hover. */
.site-footer {
  border-top: 0;
  background: var(--ink);
  color: var(--paper-subtle);
  padding-block: var(--space-5) var(--space-4);
  margin-top: var(--space-6);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--sans-text);
  font-size: 0.8125rem;
  color: var(--paper-subtle);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  list-style: none;
}

.footer-links a {
  color: var(--paper-subtle);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s, color 0.15s;
}
.footer-links a:hover {
  color: var(--paper-bright);
  border-bottom-color: var(--paper-subtle);
}

.footer-legal {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--paper-subtle);
  max-width: 540px;
  margin-top: var(--space-1);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  html { font-size: 16px; }

  .hero {
    padding-block: var(--space-3) var(--space-3);
  }

  .letter {
    padding: var(--space-2) 0 var(--space-3) var(--space-3);
    font-size: 0.9375rem;
  }

  .masthead-brand {
    font-size: clamp(2.25rem, 9vw, 2.75rem);
  }

  /* Nav collapses to brand + CTA only. Anchor links drop (the linked
     sections are below the fold on mobile anyway). */
  .nav__links {
    display: none;
  }

  .nav__wordmark {
    font-size: 1.625rem;
  }

  .seal {
    width: 32px;
    height: 32px;
  }

  .nav__cta {
    font-size: 0.6875rem;
    padding: 9px 14px 10px;
  }

  .masthead-locator {
    padding-left: 46px;
    font-size: 0.625rem;
  }

  .hero__cta {
    width: 100%;
    justify-content: center;
  }

  .field {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }

  .field__label {
    padding-top: 0;
  }

  .charge-row {
    grid-template-columns: 1fr 1fr;
  }

  .charge-row:has(.btn-remove-charge:not([hidden])) {
    grid-template-columns: 1fr 1fr auto;
  }

  .faq__item {
    grid-template-columns: 40px 1fr;
    column-gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .charge-row {
    grid-template-columns: 1fr;
  }
  .btn-remove-charge {
    align-self: flex-start;
    margin-top: var(--space-1);
  }
}

/* ── Print — receipt-grade ─────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .site-header, .site-footer, .hero__action, .hero__cta, .hero__specimen-link, .btn-submit { display: none; }
}