/* ═══════════════════════════════════════════════════════════════════════════
   Estatey landing page — Modernist design system.

   Loaded ONLY by templates/welcome.html, which is a standalone page (it does
   not extend base.html and does not load style.css). That isolation is
   deliberate: Modernist ships its own .btn/.card/.input/.table, and the
   signed-in app already has its own definitions for those names. Keeping the
   two stylesheets apart lets the landing page adopt the new look without any
   fallout on the app pages, which are out of scope for this redesign.

   Source: design_handoff_landing/ (README.md + design-system/styles.css).
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  /* Warm off-white for the hero's paper-sheet illustration only -- every
     other card/mock surface in this system stays flat #fff. */
  --color-paper: #FFFDFB;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  /* Softened rule color for the auth funnel only (login/signup/connect-Drive/
     onboarding) -- see the "Border Softening" handoff. The main landing page
     keeps its original hard 2px ink rules; this token is only referenced from
     .lp-auth-page-scoped selectors below. */
  --color-border-soft: #9b9797;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  /* Darkened from #605d5d -- that value measured 5.38:1 on --color-surface
     and 5.83:1 on --color-bg, both short of WCAG AAA's 7:1 for body text.
     #494442 (matching the reference mockup's own --body token) clears both:
     7.92:1 on --color-surface, 8.59:1 on --color-bg. This is the site's one
     body-copy-color token (see every .lp-* rule below that reads it), so
     the fix is here rather than patched per-rule. */
  --color-neutral-700: #494442;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* Modernist ships a red accent; this design replaces it wholesale with the
     Estatey brand orange. Overridden here rather than downstream so there is
     one source of truth. */
  --color-accent: #e2703a;
  --color-accent-100: #fdf2ec;
  --color-accent-200: #fae0d1;
  --color-accent-300: #f6c6a9;
  --color-accent-400: #ee9d6e;
  --color-accent-500: #e2703a;
  --color-accent-600: #c65a26;
  --color-accent-700: #9f4517;
  --color-accent-800: #73310f;
  --color-accent-900: #47200c;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-md: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

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

/* The step panels carry `hidden` and also `display: grid`, and an explicit
   display beats the UA sheet's [hidden] rule. Restore the attribute's meaning. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  /* 17px base, not the browser's 16 and not Modernist's 15 — deliberate for
     an audience of 60+ readers. Do not shrink. */
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }

a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent); text-decoration: underline; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ── Skip link ──────────────────────────────────────────────────────────── */

.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-text); color: #fff;
  padding: 14px 20px; font-family: var(--font-heading); font-weight: 800;
  font-size: 16px; text-decoration: none;
}
.lp-skip:focus { left: 0; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Modernist component layer ──────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  min-height: 48px; padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* The brand orange is a mid-tone: light type on it computes to 2.86:1 and
   fails. Ink on the same orange is ~7:1, so primary labels stay ink. If the
   orange ever changes, re-check the pairing rather than assuming light works. */
.btn-primary { background: var(--color-accent); color: var(--color-text); }
.btn-primary:hover { background: var(--color-accent-400); color: var(--color-text); }
.btn-primary:active { background: var(--color-accent-600); color: var(--color-text); }

/* Auth funnel pages only (see body.lp-auth-page) -- overrides the ink-on-
   orange contrast rule above per direct user instruction on the "Border
   Softening" handoff. White on #e2703a at this text size is likely under
   WCAG AA's 4.5:1 minimum; flagged to the user, not blocking on it. */
.lp-auth-page .btn-primary,
.lp-auth-page .btn-primary:hover,
.lp-auth-page .btn-primary:active { color: #fff; }

/* Home page only (see body.lp-home) -- same override and same tradeoff as
   .lp-auth-page above, per direct user instruction. White on #e2703a is
   ~2.86:1, under WCAG AA's 4.5:1 for normal text; flagged, not blocking. */
.lp-home .btn-primary,
.lp-home .btn-primary:hover,
.lp-home .btn-primary:active { color: #fff; }

.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-block { width: 100%; }

.tag {
  display: inline-flex; align-items: center; font-size: 16px;
  letter-spacing: 0.02em; padding: 4px 12px; border-radius: var(--radius-md);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* .lp-label is the mock-ups' non-form stand-in for a real <label>. */
.field > label,
.field > .lp-label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* The mock-ups use divs, not inputs — a screen reader should not walk a fake
   form — so .input has to look right on a non-form element too. */
.input {
  display: block; width: 100%; min-height: 36px; padding: 6px 10px;
  font: inherit; font-size: 14px; color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input-placeholder { color: var(--color-neutral-600); }

.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th {
  text-align: left; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }

/* ── Page scaffolding ───────────────────────────────────────────────────── */

.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.lp-rule { border-bottom: 2px solid var(--color-divider); }
/* Styled label, not a heading -- markup is <p class="lp-eyebrow">, so every
   property a real <h6> would have gotten for free from the h1-h6 rule above
   has to be spelled out here instead. font-size raised from the mockup's
   13px to 16px per the site's font-size floor (see the Accessibility
   section below). */
.lp-eyebrow {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 1.12; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 14px;
}
.lp-num {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  color: var(--color-accent); letter-spacing: 0.06em;
}
.lp-figure { font-variant-numeric: tabular-nums; }
.lp-muted { color: var(--color-neutral-700); }

/* ── Header ─────────────────────────────────────────────────────────────── */

.lp-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.lp-header-inner { display: flex; align-items: center; gap: 32px; height: 76px; }
.lp-brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); }
.lp-brand:hover { color: var(--color-text); text-decoration: none; }
.lp-brand span {
  font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  letter-spacing: 0.02em;
}
.lp-nav { display: flex; gap: 28px; margin-left: 16px; font-size: 16px; }
/* min-height + centered padding rather than a fixed line-height, so these
   clear the 48px minimum hit area without changing the visible text size or
   the 76px header bar's own height (.lp-header-inner still centers each
   link vertically via align-items). */
.lp-nav a, .lp-header-actions a.lp-textlink {
  color: var(--color-text);
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px;
}
.lp-spacer { flex: 1; }
.lp-header-actions { display: flex; align-items: center; gap: 16px; }
.lp-header-actions .btn { font-size: 16px; padding: 11px 20px; }

/* Auth funnel pages only (see body.lp-auth-page) -- the header is shared
   with the main landing page via the same .lp-header class, which keeps its
   original 2px ink rule per the "Border Softening" handoff's explicit
   instruction not to touch welcome.html. */
.lp-auth-page .lp-header { border-bottom: 1px solid var(--color-border-soft); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.lp-hero { padding-top: 56px; padding-bottom: 68px; }
/* Single grid: the copy column (eyebrow/h1/lede/cta/trust, all stacked) next
   to the document illustration. Previously .lp-hero-top only grouped the
   eyebrow+h1 against the art, with lede/cta/trust living full-width below
   the grid -- that's what produced the large dead gap above the lede
   (margin-bottom: 44px on the old .lp-hero-top). Folding everything into one
   column removes the need for that margin entirely. */
.lp-hero-top {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px;
  align-items: start;
}
.lp-hero h1 {
  font-size: 70px; line-height: 0.98; letter-spacing: -0.03em;
  margin: 0; text-wrap: pretty;
}
/* Same styled-label treatment as .lp-eyebrow above (markup is now
   <p class="lp-hero-eyebrow">, not <h6>) -- kept as its own class rather than
   combined with .lp-eyebrow because it needs its own margin. */
.lp-hero-eyebrow {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 1.12; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 24px;
}
.lp-lead {
  font-size: 26px; line-height: 1.35; margin: 26px 0 0;
  color: var(--color-neutral-800); text-wrap: pretty;
}
/* Flush-left now, not centered -- this row and .lp-reassure below it used to
   be the one place this page departed from Modernist's flush-left rule,
   deliberately, because the old hero copy ran full-width beneath the art
   rather than living in its own column. Now that both sit in a narrower
   left-hand copy column (see .lp-hero-top), centering them would look odd
   against the left-aligned h1/lede above -- flush-left matches the rest of
   the system and the reference layout this hero now follows. */
.lp-hero-cta {
  display: flex; gap: 12px; align-items: center;
  margin-top: 32px; flex-wrap: wrap;
}
.lp-hero-cta .btn-primary { font-size: 18px; padding: 16px 26px; }
.lp-hero-cta .btn-secondary { font-size: 18px; padding: 16px 22px; }
.lp-reassure {
  display: flex; flex-wrap: wrap; gap: 10px 0;
  border-top: 2px solid var(--color-divider); padding-top: 20px;
  font-size: 16px; color: var(--color-neutral-700);
}
.lp-reassure > div { padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--color-divider); }
.lp-reassure > div:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.lp-reassure strong { font-weight: 600; }

/* ── Hero document illustration ────────────────────────────────────────────
   Replaces the old hub-and-spoke SVG. Two stacked sheets built from plain
   HTML/CSS (no image asset): a blank back sheet for depth, and a front sheet
   that mirrors the real sample dialog's data (see .lp-sheet-* below, and
   #sample-dialog in welcome.html) so the hero and "See a finished summary"
   modal show the same fictional Whitfield record.

   The sheet's own contents (kicker/name/rows/total/footer) are marked
   aria-hidden in the markup, the same way the four step-panel .lp-mock
   blocks already are elsewhere on this page -- it's a visual facsimile of a
   printed page, not prose meant to be read aloud, so it keeps the small
   type sizes a real printed summary would have rather than the site's
   16px accessible-text floor (that floor applies to the real caption below
   it, .lp-doc-caption, which is not aria-hidden). */
.lp-hero-doc { position: relative; padding-top: 6px; isolation: isolate; }
.lp-doc-sheet {
  background: var(--color-paper);
  border: 1px solid var(--color-neutral-300);
  box-shadow: 0 1px 2px rgba(60, 40, 28, .10), 0 18px 40px -18px rgba(60, 40, 28, .38);
  aspect-ratio: 8.5 / 11;
}
.lp-doc-sheet-back {
  position: absolute; inset: 0;
  transform: rotate(2.4deg) translate(14px, 10px);
  z-index: 0;
}
.lp-doc-sheet-front {
  position: relative; z-index: 1;
  transform: rotate(-1.1deg);
  padding: 34px 32px;
  display: flex; flex-direction: column;
  font-family: var(--font-body); font-size: 13px; color: var(--color-text);
}
/* Kicker/name/address on the left, the Estatey mark on the right -- same
   left/right split the real sample dialog already uses for its header
   (.lp-sheet-head), just at this sheet's smaller scale. */
.lp-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.lp-doc-head > div:first-child { min-width: 0; }
.lp-doc-kicker {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-700); margin: 0 0 10px;
}
.lp-doc-name {
  margin: 0; font-family: var(--font-heading); font-weight: 800;
  font-size: 21px; letter-spacing: -0.02em; line-height: 1.1;
}
.lp-doc-sub { margin: 5px 0 0; font-size: 11.5px; color: var(--color-neutral-700); line-height: 1.45; }
.lp-doc-brand { display: flex; align-items: center; gap: 6px; flex: none; margin-top: 1px; }
.lp-doc-brand img { display: block; width: 16px; height: 16px; }
.lp-doc-brand span { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.01em; color: var(--color-text); }
.lp-doc-rule { height: 2px; background: var(--color-text); margin: 16px 0 0; }
.lp-doc-sec {
  margin: 16px 0 7px; font-family: var(--font-heading); font-weight: 800;
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.lp-doc-row {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
}
.lp-doc-row-who { flex: 1; min-width: 0; }
.lp-doc-row-inst { font-weight: 700; display: block; line-height: 1.25; }
.lp-doc-row-det { font-size: 10.5px; color: var(--color-neutral-700); display: block; margin-top: 2px; }
.lp-doc-row-ben { font-size: 10.5px; color: var(--color-neutral-700); width: 34%; flex: none; }
.lp-doc-row-val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.lp-doc-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--color-text);
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
}
.lp-doc-foot { margin-top: auto; padding-top: 18px; font-size: 10px; color: var(--color-neutral-700); letter-spacing: 0.02em; }
.lp-doc-caption { margin: 26px 0 0; font-size: 16px; line-height: 1.5; color: var(--color-neutral-700); max-width: 42ch; }
.lp-doc-caption strong { color: var(--color-text); font-weight: 700; }

/* Flash strip — sits directly under the sticky header, on the system's rules. */
.lp-flashes { padding-top: 18px; padding-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.lp-flash { font-size: 16px; padding: 12px 16px; border: 1px solid var(--color-divider); }
.lp-flash-error { background: var(--color-accent-100); border-color: var(--color-accent-700); color: var(--color-accent-700); }
.lp-flash-success, .lp-flash-info { background: var(--color-surface); color: var(--color-neutral-800); }

.lp-notice {
  margin: 24px auto 0; max-width: 44em; text-align: center;
  background: var(--color-accent-100); border: 1px solid var(--color-accent-700);
  color: var(--color-accent-700); padding: 10px 14px; font-size: 16px;
}

/* ── How it works ───────────────────────────────────────────────────────── */

.lp-section { padding-top: 64px; padding-bottom: 72px; }
.lp-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 36px;
}
.lp-section-head h2 { font-size: 44px; letter-spacing: -0.025em; margin: 0; max-width: 22em; }
.lp-section-aside { font-size: 18px; color: var(--color-neutral-700); max-width: 24em; margin: 0; }

.lp-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text);
}
/* NB: `all: unset` also resets box-sizing to content-box, so every rule using
   it has to restore border-box *after* the reset, or padding and borders
   overflow the column. */
.lp-tab {
  all: unset; box-sizing: border-box;
  cursor: pointer; display: block; text-align: left;
  padding: 24px 24px 26px; font-family: var(--font-body);
  background: transparent; color: var(--color-text);
}
.lp-tab:not(:last-child) { border-right: 1px solid var(--color-divider); }
/* A solid ink block, swapped instantly — no transition, in keeping with the
   system's flatness. */
.lp-tab[aria-selected="true"] { background: var(--color-text); color: var(--color-bg); }
.lp-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.lp-tab-n {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.7;
}
.lp-tab-label {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; line-height: 1.1;
}
.lp-tab-blurb { font-size: 16px; line-height: 1.45; margin-top: 10px; opacity: 0.8; }

.lp-panel {
  border: 2px solid var(--color-text); border-top: 0;
  background: var(--color-surface); padding: 36px 40px;
  /* Fixed floor so the page does not jump when switching steps. */
  min-height: 380px;
}
.lp-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.lp-panel h3 { font-size: 26px; margin: 0 0 12px; }
.lp-panel p { font-size: 17px; color: var(--color-neutral-800); line-height: 1.55; }

/* Every mock-up is paper: whiter than the page ground, hard 2px ink edge. */
.lp-mock { background: #fff; border: 2px solid var(--color-text); padding: 24px; }
.lp-mock-lg { padding: 28px 26px; }
.lp-mock-head {
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
}
.lp-dropzone {
  border: 2px dashed var(--color-neutral-500); padding: 28px 20px;
  text-align: center; margin-bottom: 18px;
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, #201e1d 12%, transparent) 6px 7px);
}
.lp-dropzone-sub { font-size: 14px; color: var(--color-neutral-700); margin-top: 6px; }
.lp-rows { display: flex; flex-direction: column; }
.lp-rows-top { border-top: 1px solid var(--color-divider); }
.lp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px;
}
.lp-row:last-child { border-bottom: 0; }
.lp-row-done { color: var(--color-accent-700); font-weight: 600; }
.lp-mock-titlebar {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--color-text); padding-bottom: 10px; margin-bottom: 16px;
}
.lp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; font-size: 14px; }
.lp-fields .lp-span2 { grid-column: 1 / -1; }
.lp-mock-actions { display: flex; gap: 10px; margin-top: 20px; }
.lp-mock-actions .btn { font-size: 15px; }
.lp-tagrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.lp-tagrow .tag { font-size: 12px; }
.lp-mock-note { margin-top: 18px; font-size: 13px; color: var(--color-neutral-700); }
.lp-mock-header {
  border-bottom: 2px solid var(--color-text); padding-bottom: 12px; margin-bottom: 14px;
}
.lp-mock-header .lp-mock-head { font-size: 18px; }
.lp-mock-header-sub { font-size: 13px; color: var(--color-neutral-700); margin-top: 3px; }
.lp-toc { display: flex; flex-direction: column; font-size: 14px; }
.lp-toc > div {
  display: flex; justify-content: space-between; padding: 9px 0;
  border-bottom: 1px solid var(--color-divider);
}
.lp-toc > div:last-child { border-bottom: 0; }

/* ── What it holds ──────────────────────────────────────────────────────── */

.lp-inside { background: var(--color-surface); }
.lp-inside h2 { font-size: 44px; letter-spacing: -0.025em; margin: 0 0 12px; max-width: 24em; }
.lp-intro { font-size: 18px; color: var(--color-neutral-700); max-width: 44em; margin: 0 0 40px; }
/* Fills row-first, so at two columns the order reads 01/02, then 03/04. */
.lp-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; border-top: 2px solid var(--color-text); }
.lp-item {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 22px 0;
  border-bottom: 1px solid var(--color-divider); align-items: baseline;
}
/* The eight asset-category titles below are real <h3>s (see welcome.html);
   every other .lp-item-title in the site stays a plain div. line-height is
   spelled out so the <h3> ones don't pick up the global h1-h6 rule's 1.12 --
   this class already fully owns font-size/weight/letter-spacing/margin, so
   without an explicit line-height here they'd be the one property still
   falling through to the heading default instead of the div's inherited
   body line-height, which is what every other instance of this class (and
   these same categories, pre-fix) actually renders at. */
.lp-item-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  letter-spacing: -0.015em; line-height: 1.55; margin: 0 0 5px;
}
.lp-item-note { font-size: 16px; color: var(--color-neutral-700); line-height: 1.5; }

.lp-receives {
  margin-top: 64px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px;
  align-items: start; border-top: 2px solid var(--color-text); padding-top: 44px;
}
.lp-receives h2 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 14px; }
/* :not(.lp-eyebrow) matters: since the eyebrow above became a real <p> (was
   <h6>), this generic "p inside .lp-receives" rule now matches it too, and
   at equal-ish specificity (0,1,1) beats .lp-eyebrow's (0,1,0) -- silently
   overriding the eyebrow's orange/16px with this rule's gray/17px. Same
   fix applied to .lp-privacy p below, and it's why .lp-privacy's other
   .lp-eyebrow users (e.g. about.html's "Why we built it") needed it too. */
.lp-receives p:not(.lp-eyebrow) { font-size: 17px; line-height: 1.55; color: var(--color-neutral-800); }
.lp-receives p.lp-muted { color: var(--color-neutral-700); }
.lp-receives .btn { font-size: 17px; margin-top: 8px; }

/* The summary card is a button so the whole sheet is one target. Previously
   had no visual affordance that it was clickable beyond the cursor -- hover
   lifts it slightly and darkens the shadow, focus gets the system's usual
   outline (it's a real button, so :focus-visible already applied via the
   sitewide rule, but the shadow/border pairing needed its own tell), and
   .lp-card-cue makes the "click to enlarge" affordance visible at rest. */
.lp-card {
  all: unset; box-sizing: border-box;
  cursor: pointer; display: block; width: 100%;
  background: #fff; border: 2px solid var(--color-text);
  box-shadow: var(--shadow-md); padding: 32px 30px;
  font-family: var(--font-body); color: var(--color-text);
}
.lp-card:hover, .lp-card:focus-visible {
  box-shadow: var(--shadow-lg); transform: translateY(-3px);
}
.lp-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid var(--color-text); padding-bottom: 14px; margin-bottom: 18px;
}
.lp-card-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.lp-card-sub { font-size: 16px; color: var(--color-neutral-700); margin-top: 3px; }
.lp-chip {
  font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); border: 1px solid var(--color-accent); padding: 4px 9px;
  white-space: nowrap;
}
.lp-card .table td { padding: 7px 0; border-bottom: 1px solid var(--color-divider); }
.lp-card-name { font-weight: 600; }
.lp-card-val { text-align: right; font-variant-numeric: tabular-nums; }
.lp-card-total {
  display: flex; justify-content: space-between; border-top: 2px solid var(--color-text);
  margin-top: 8px; padding-top: 12px;
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
}
.lp-card-note { margin-top: 20px; font-size: 16px; color: var(--color-neutral-700); line-height: 1.5; }
.lp-card-cue {
  margin-top: 14px; font-family: var(--font-heading); font-weight: 800;
  font-size: 16px; color: var(--color-accent-700);
}

/* ── Privacy ────────────────────────────────────────────────────────────── */

.lp-privacy { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
.lp-privacy h2 { font-size: 40px; letter-spacing: -0.025em; margin: 0 0 18px; }
/* :not(.lp-eyebrow) -- see the comment on .lp-receives p above. */
.lp-privacy p:not(.lp-eyebrow) { font-size: 18px; line-height: 1.55; color: var(--color-neutral-800); }
.lp-privacy-list { border-top: 2px solid var(--color-text); }
.lp-privacy-list .lp-item { gap: 24px; }
.lp-privacy-list .lp-item-title { font-size: 19px; }

/* ── Closing banner ─────────────────────────────────────────────────────── */

/* The one place the accent runs as a full field. All type on it is ink. */
.lp-banner { background: var(--color-accent); color: var(--color-text); }
.lp-banner-inner {
  padding-top: 80px; padding-bottom: 80px;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: end;
}
.lp-banner h2 {
  font-size: 56px; line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 20px; color: var(--color-text); text-wrap: pretty;
}
.lp-banner p { font-size: 20px; line-height: 1.5; margin: 0; max-width: 30em; color: var(--color-text); }
.lp-banner-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lp-banner-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  background: var(--color-text); color: var(--color-bg);
  padding: 18px 28px; border: 2px solid var(--color-text);
}
/* A fill swap, not a tint. */
.lp-banner-btn:hover { background: transparent; color: var(--color-text); text-decoration: none; }
.lp-banner-link {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  color: var(--color-text);
  border-bottom: 2px solid color-mix(in srgb, #201e1d 55%, transparent);
  padding-bottom: 2px;
}
.lp-banner-link:hover { color: var(--color-text); text-decoration: none; border-bottom-color: var(--color-text); }
.lp-banner :focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

/* No top rule of its own — the orange field ends the page's ruled rhythm. */
.lp-footer-inner {
  padding-top: 44px; padding-bottom: 44px;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.lp-footer-brand { display: flex; align-items: center; gap: 10px; }
.lp-footer-brand span { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.lp-footer-copyright { font-size: 16px; color: var(--color-neutral-700); }
.lp-footer-nav { display: flex; gap: 26px; font-size: 16px; flex-wrap: wrap; }
/* min-height + centered padding, same reasoning as .lp-nav a above -- a real
   48px hit area without inflating the footer's own row height. */
.lp-footer-nav a {
  color: var(--color-neutral-700);
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px;
}

/* ── Auth funnel (sign in, sign up, connect Drive, first run) ───────────── */

/* The panel mirrors the handoff's signup dialog, lifted out of the modal and
   given its own page. Same 2px ink edge, same persistent step bar. */
.lp-auth { padding: 56px 24px 72px; display: flex; flex-direction: column; align-items: center; }
.lp-auth-panel {
  width: 100%; max-width: 560px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lg);
}
.lp-auth-panel-wide { max-width: 720px; }
.lp-auth-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 28px; border-bottom: 1px solid var(--color-border-soft);
}
.lp-auth-step {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.lp-auth-body { padding: 36px 40px 40px; }
.lp-auth-body h3 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 10px; }
.lp-auth-intro { font-size: 17px; color: var(--color-neutral-700); line-height: 1.5; margin: 0 0 26px; }
.lp-auth-intro-ink { color: var(--color-neutral-800); margin-bottom: 20px; }
.lp-auth-intro strong { font-weight: 600; }

.lp-auth-field { margin-bottom: 18px; }
.lp-auth-field > label { font-size: 16px; }
/* 48px targets and 17px text, sized for the audience — do not shrink. */
.lp-auth-input {
  font-size: 17px; min-height: 48px;
  background: #fff; color: #000;
  border: 1px solid var(--color-border-soft);
}

.lp-auth-tos {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 16px; line-height: 1.4; color: var(--color-text);
  margin: 22px 0;
}
.lp-auth-tos input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0; flex: none;
  accent-color: var(--color-accent);
}
.lp-auth-tos a { font-weight: 600; }

.lp-auth-flashes { margin-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.lp-auth-flashes .lp-flash, .lp-auth-error, .lp-auth-notice { font-size: 16px; padding: 10px 14px; }
.lp-auth-error { margin-bottom: 16px; }
.lp-auth-notice { margin-top: 22px; }

/* The one place a centered button label is used, because it is a full-width
   block action rather than a label sitting in a wide button. */
.lp-auth-submit {
  font-size: 18px; padding: 15px 22px; margin-top: 12px;
  width: 100%; justify-content: center; text-align: center;
}
/* Visual nudge only, not real disabling -- see signup.html's syncSubmit(). */
.lp-auth-submit-pending { opacity: 0.5; }
.lp-auth-foot { font-size: 16px; color: var(--color-neutral-700); margin: 18px 0 0; }

/* Connect-Drive permission table. */
.lp-perms { border: 2px solid var(--color-text); background: #fff; padding: 20px 22px; margin-bottom: 24px; }
.lp-perm-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--color-divider); font-size: 16px;
}
.lp-perm-row:last-child { border-bottom: 0; }
.lp-perm-granted { color: var(--color-accent-700); font-weight: 600; }

/* First-run next-action list. */
.lp-next { border-top: 2px solid var(--color-text); margin-bottom: 24px; }
.lp-next-row {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--color-divider);
}
.lp-next-row:last-child { border-bottom: 0; }
.lp-next-row .btn { flex: none; }
.lp-next-info { display: flex; align-items: center; gap: 16px; }
.lp-next-num { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-accent); min-width: 24px; flex-shrink: 0; }
.lp-next-title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; }
.lp-next-sub { font-size: 16px; color: var(--color-neutral-700); line-height: 1.4; }

.lp-onboard-form {
  border-top: 2px solid var(--color-text); padding-top: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.lp-check { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; min-height: 48px; }
.lp-check input {
  appearance: none; width: 18px; height: 18px; flex: none; margin: 0;
  border: 2px solid var(--color-text); border-radius: 0; background: var(--color-bg);
  display: grid; place-content: center; cursor: pointer;
}
.lp-check input:checked { background: var(--color-accent); }
.lp-check input:checked::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text);
  transform: rotate(-45deg) translate(1px, -1px);
}
.lp-onboard-continue { font-size: 16px; padding: 12px 20px; }

@media (max-width: 1000px) {
  .lp-auth { padding: 32px 16px 48px; }
  .lp-auth-body { padding: 26px 22px 30px; }
  .lp-auth-bar { padding: 14px 22px; }
  .lp-auth-body h3 { font-size: 25px; }
  .lp-next-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lp-onboard-form { flex-direction: column; align-items: flex-start; }
  .lp-onboard-continue { width: 100%; justify-content: center; }
}

/* ── Sample dialog ──────────────────────────────────────────────────────── */

.lp-dialog {
  padding: 0; border: 2px solid var(--color-text); border-radius: 0;
  background: #fff; color: var(--color-text);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 820px;
  margin: 48px auto;
  /* Scrolls internally so the sticky header bar stays put on a long sheet. */
  max-height: calc(100vh - 96px); overflow: auto;
}
.lp-dialog::backdrop { background: color-mix(in srgb, #201e1d 60%, transparent); }
.lp-dialog-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 32px; border-bottom: 2px solid var(--color-text);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.lp-dialog-bar .lp-mock-head { font-size: 18px; }
.lp-dialog-bar-sub { font-size: 16px; color: var(--color-neutral-700); }
.lp-dialog-body { padding: 44px 56px 56px; }
.lp-sheet-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  border-bottom: 2px solid var(--color-text); padding-bottom: 14px; margin-bottom: 28px;
}
.lp-sheet-kicker {
  font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 6px;
}
.lp-sheet-name { font-family: var(--font-heading); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.lp-sheet-contact { font-size: 16px; color: var(--color-neutral-700); margin-top: 4px; }
.lp-sheet-meta { text-align: right; font-size: 16px; color: var(--color-neutral-700); }
.lp-dialog-body h4 { font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }
.lp-sheet-table { width: 100%; font-size: 16px; margin-bottom: 32px; }
.lp-sheet-table td { padding: 9px 0; vertical-align: top; }
.lp-sheet-table th:last-child, .lp-sheet-table td:last-child { text-align: right; }
.lp-sheet-strong { font-weight: 600; }
.lp-sheet-total {
  display: flex; justify-content: space-between; border-top: 2px solid var(--color-text);
  padding-top: 14px; font-family: var(--font-heading); font-weight: 800; font-size: 18px;
}
.lp-sheet-foot {
  margin-top: 36px; border-top: 1px solid var(--color-divider); padding-top: 16px;
  font-size: 16px; color: var(--color-neutral-700);
}

/* ── About page ─────────────────────────────────────────────────────────── */

/* Same top/bottom rhythm as every other section on the page (.lp-section
   below) -- this page's hero is not the full-bleed welcome.html hero, so it
   gets no special-cased padding. */
.ab-hero { padding-top: 64px; padding-bottom: 72px; }

/* One size and one heading-to-body gap for every section on the page (hero
   h1 plus each section's h2, and the eyebrow above each one -- the eyebrow
   itself reuses .lp-eyebrow's styling in the markup rather than duplicating
   it here). Scoped per-section (0,2,0) rather than a bare .ab-heading (0,1,0)
   -- .lp-hero h1, .lp-privacy h2 and .lp-inside h2 are all (0,1,1) and were
   each winning their own section's heading size/margin regardless of source
   order. */
.ab-hero .ab-heading,
.ab-why .ab-heading,
.ab-believe .ab-heading,
.ab-team .ab-heading {
  font-size: 34px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 18px;
}
.ab-hero-title { max-width: 20em; text-wrap: pretty; }
.ab-hero-lead { max-width: 34em; margin-bottom: 0; }

.ab-why .ab-card {
  background: #fff; border: 2px solid var(--color-text);
  box-shadow: var(--shadow-md); padding: 28px 26px; align-self: start;
}
.ab-card-title { font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: 0.01em; margin-bottom: 14px; }
.ab-card-list { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }
.ab-card-list li { margin-bottom: 10px; }
.ab-card-list li:last-child { margin-bottom: 0; }

.ab-team-body { font-size: 18px; line-height: 1.55; color: var(--color-neutral-800); max-width: 42em; }
.ab-contact-cta { margin-top: 8px; }

@media (max-width: 1000px) {
  .ab-hero { padding-bottom: 40px; }
  .ab-hero .ab-heading,
  .ab-why .ab-heading,
  .ab-believe .ab-heading,
  .ab-team .ab-heading {
    font-size: 28px;
  }
}

/* ── Contact ────────────────────────────────────────────────────────────── */

/* Same top/bottom rhythm as .ab-hero -- a plain intro block, no illustration. */
.ct-hero { padding-top: 64px; padding-bottom: 40px; }
.ct-heading { font-size: 34px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 18px; }
.ct-hero-title { max-width: 20em; text-wrap: pretty; }
.ct-hero-lead { max-width: 34em; margin-bottom: 0; }

.ct-form-section { padding-top: 12px; }
.ct-contact-form { max-width: 32em; margin-top: 4px; }
.ct-contact-field { margin-bottom: 18px; }
.ct-contact-field label { font-size: 16px; }
.ct-contact-field .input { font-size: 16px; padding: 10px 12px; min-height: 48px; }
/* Two classes, same as .ct-contact-field .input above, so this has to win on
   source order (it comes after) rather than specificity -- a single-class
   .ct-contact-textarea selector would lose the min-height tug-of-war to that
   more specific rule and get capped at 48px instead of its intended 120px. */
.ct-contact-field .ct-contact-textarea { resize: vertical; min-height: 120px; }
select.input { cursor: pointer; }

/* Honeypot: hidden with position/clip rather than display:none or
   type="hidden" (both of which unsophisticated bots skip filling in), but
   still removed from the accessibility tree and tab order via the
   aria-hidden/tabindex on the wrapping div in the markup -- so a real
   visitor, including one on a screen reader or keyboard-only, never
   encounters it. */
.ct-hp {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

.ct-field-error {
  margin: 6px 0 0; font-size: 16px; color: var(--color-accent-700);
}
input.input[aria-invalid="true"],
select.input[aria-invalid="true"],
textarea.input[aria-invalid="true"] {
  border-color: var(--color-accent-700);
}

.ct-contact-flash { max-width: 32em; margin-top: 4px; margin-bottom: 20px; }
.ct-contact-plain { margin-top: 20px; font-size: 16px; color: var(--color-neutral-700); }

@media (max-width: 1000px) {
  .ct-hero { padding-bottom: 28px; }
  .ct-heading { font-size: 28px; }
}

/* ── Legal (privacy, terms) ─────────────────────────────────────────────── */

.lg-page { padding-top: 48px; padding-bottom: 72px; }
.lg-title { font-size: 30px; letter-spacing: -0.015em; margin: 0 0 8px; }
.lg-subtitle { font-size: 16px; color: var(--color-neutral-700); margin: 0 0 32px; }

.lg-doc { max-width: 720px; }
.lg-doc h2 {
  font-size: 21px; letter-spacing: -0.01em;
  border-top: 2px solid var(--color-divider); padding-top: 24px; margin-top: 32px;
}
.lg-doc h3 { font-size: 16px; margin: 20px 0 6px; }
.lg-doc p, .lg-doc li { color: var(--color-neutral-900); line-height: 1.65; font-size: 16px; }
.lg-doc ul { padding-left: 22px; }
.lg-doc li { margin-bottom: 6px; }
.lg-doc-note { margin-top: 32px; color: var(--color-neutral-700); font-size: 16px; }

/* ── Blog ───────────────────────────────────────────────────────────────── */

/* Same top/bottom rhythm as .ab-hero -- a plain intro block, no illustration. */
.bl-hero { padding-top: 64px; padding-bottom: 56px; }
.bl-hero h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.015em; max-width: 26em; margin: 0; }

.bl-empty { padding: 8px 0 64px; color: var(--color-neutral-700); font-size: 17px; }

.bl-list { border-top: 2px solid var(--color-divider); }
.bl-card {
  display: flex; gap: 28px; padding: 28px 0; color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.bl-card:hover { text-decoration: none; }
.bl-card:hover .bl-card-title { color: var(--color-accent-700); text-decoration: underline; }
.bl-card-photo {
  /* 1200x630 (1.91:1) matches the header-image convention exactly, so the
     box never has to crop anything -- see blog_store.static_photo_filename. */
  flex-shrink: 0; width: 220px; height: calc(220px * 630 / 1200);
  object-fit: cover; border: 2px solid var(--color-text);
}
.bl-card-body { min-width: 0; }
.bl-card-date {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 8px;
}
.bl-card-title { font-size: 23px; letter-spacing: -0.015em; margin: 0 0 8px; }
.bl-card-excerpt { font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); margin: 0; }

/* ── Blog post ──────────────────────────────────────────────────────────── */

.bl-post { padding-top: 48px; padding-bottom: 72px; }
.bl-back { font-size: 16px; margin: 0 0 28px; }
.bl-back a { display: inline-flex; align-items: center; min-height: 48px; }
.bl-post h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; max-width: 24em; text-wrap: pretty; }
.bl-byline { font-size: 16px; color: var(--color-neutral-700); margin-bottom: 18px; }
.bl-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.bl-hero-img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border: 2px solid var(--color-text); margin-bottom: 40px; }

.bl-body { max-width: 42em; font-size: 18px; line-height: 1.65; color: var(--color-neutral-900); }
.bl-body h2 { font-size: 27px; margin: 40px 0 14px; }
.bl-body h3 { font-size: 21px; margin: 32px 0 12px; }
.bl-body p { margin: 0 0 20px; }
.bl-body ul, .bl-body ol { margin: 0 0 20px; padding-left: 24px; }
.bl-body li { margin-bottom: 8px; }
.bl-body strong { font-weight: 600; }
.bl-body hr { border: 0; border-top: 2px solid var(--color-divider); margin: 40px 0; }
.bl-body em { font-style: italic; }

@media (max-width: 640px) {
  .bl-card { flex-direction: column; gap: 14px; }
  .bl-card-photo { width: 100%; height: auto; }
  .bl-post h1 { font-size: 30px; }
  .bl-body { font-size: 17px; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .lp-wrap { padding: 0 20px; }
  .lp-section, .lp-hero { padding-top: 40px; padding-bottom: 40px; }

  /* The three anchors live in the page itself on narrow screens; keeping them
     in the bar forces the CTA to wrap. */
  .lp-nav { display: none; }
  .lp-header-inner { gap: 12px; height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .lp-header-actions { gap: 12px; }
  .lp-header-actions a { white-space: nowrap; }
  .lp-header-actions .btn { padding: 10px 14px; }
  .lp-brand span { font-size: 17px; }

  .lp-hero-top { grid-template-columns: 1fr; gap: 32px; }
  .lp-hero h1 { font-size: 44px; }
  .lp-lead { font-size: 22px; }
  .lp-hero-cta { flex-direction: column; align-items: stretch; }
  /* Wrapping leaves an orphaned divider mid-row, so stack instead. */
  .lp-reassure { flex-direction: column; align-items: center; gap: 8px; }
  .lp-reassure > div { padding-right: 0; margin-right: 0; border-right: 0; }

  .lp-section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lp-section-head h2, .lp-inside h2 { font-size: 32px; }

  /* Tabs stack into a vertical list, keeping the ink-block selected state. */
  .lp-tabs { grid-template-columns: 1fr; }
  .lp-tab { padding: 18px 20px; }
  .lp-tab:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .lp-panel { padding: 24px 20px; min-height: 0; }
  .lp-panel-grid { grid-template-columns: 1fr; gap: 28px; }

  .lp-cats, .lp-receives, .lp-privacy, .lp-banner-inner { grid-template-columns: 1fr; }
  .lp-receives { gap: 32px; margin-top: 40px; }
  .lp-privacy { gap: 32px; }
  .lp-privacy h2 { font-size: 30px; }

  .lp-banner-inner { padding-top: 48px; padding-bottom: 48px; gap: 32px; align-items: start; }
  .lp-banner h2 { font-size: 36px; }

  .lp-fields { grid-template-columns: 1fr; }
  .lp-card { padding: 22px 18px; }
  .lp-mock, .lp-mock-lg { padding: 18px 16px; }
  .lp-dialog { margin: 16px auto; }
  .lp-dialog-body { padding: 28px 24px 32px; }
  .lp-sheet-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lp-sheet-meta { text-align: left; }
}

/* The second (and only other) breakpoint on this page: phone widths. Hero
   layout/CTA/trust-row stacking is already handled by the 1000px block
   above (it cascades down); this one shrinks what's still too large at
   375-414px and thins the hero document down to what a phone-width sheet
   can actually show. */
@media (max-width: 620px) {
  .lp-header-inner { gap: 8px; }
  .lp-header-actions .btn { padding: 10px 12px; }
  .lp-hero h1 { font-size: 36px; }
  .lp-lead { font-size: 20px; }
  .lp-doc-sheet-front { padding: 22px 20px; font-size: 12px; }
  .lp-doc-name { font-size: 18px; }
  .lp-doc-brand img { width: 13px; height: 13px; }
  .lp-doc-brand span { font-size: 10px; }
  /* Drops the beneficiary column -- institution/amount is the pair a
     glance at a phone-sized thumbnail can actually still read. */
  .lp-doc-row-ben { display: none; }
}