/* ============================================================
   VERDEER — public marketing surface
   ------------------------------------------------------------
   Token values are lifted VERBATIM from src/app/globals.css so this
   surface and the product read as one system. Everything below binds
   to a ROLE (--content-muted, --surface-raised, --edge) — never to a
   raw value — per docs/design/SEMANTIC_TOKENS.md.

   Why a separate stylesheet rather than the app's Tailwind build:
   this surface is deliberately decoupled from the app (ADR-0004's VM
   has accepted deploy/crash blips; Google's homepage + privacy-policy
   availability is a standing obligation re-verified every 12 months).
   It ships as static HTML with no build step and no runtime JS.

   Type ladder: globals.css .text-* utilities, same families/sizes.
   Design language: docs/DESIGN_LANGUAGE.md — "warm paper, quiet data".
   ============================================================ */

/* ── Self-hosted fonts (OFL). No third-party CDN: a privacy policy
      should not leak its readers' IPs to fetch a typeface. ───────── */
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('fonts/ZillaSlab-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('fonts/ZillaSlab-normal-500.woff2') format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: italic; font-weight: 400; font-display: swap;
             src: url('fonts/ZillaSlab-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'Wix Madefor Text'; font-style: normal; font-weight: 400 700; font-display: swap;
             src: url('fonts/WixMadeforText-normal-400_700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('fonts/Inter-normal-600.woff2') format('woff2'); }

/* Besley* by Owen Earl / indestructible type — a Clarendon-derived antique slab,
   Open Font License, so self-hosting is permitted exactly like the others.
   ADOPTED 2026-07-31 as this surface's editorial serif, replacing Lora (Kendal's
   call, after a side-by-side). It is scoped to the MARKETING SURFACE ONLY — the
   product still runs Lora, and a product-wide swap is an open thread, not a
   decision: DESIGN_LANGUAGE.md §6 "Open threads". */
@font-face { font-family: 'Besley'; font-style: normal; font-weight: 400 800; font-display: swap;
             src: url('fonts/Besley-normal-400_800.woff2') format('woff2'); }
@font-face { font-family: 'Besley'; font-style: italic; font-weight: 400 800; font-display: swap;
             src: url('fonts/Besley-italic-400_800.woff2') format('woff2'); }

:root {
  /* Foreground — globals.css:171-181 */
  --content:         #1A1918;
  --content-muted:   #6C6760;
  --content-subtle:  #726C64;
  --content-brand:   #317252;   /* grove — the one interactive green (DL §7) */

  /* Surface — globals.css:184-194. The warm three-step ramp (DL §1). */
  --surface:         #FCFBF9;   /* content field  (251 / w3) */
  --surface-raised:  #FFFFFF;   /* cards lift off the field  */
  --surface-sunken:  #F5F4F0;   /* warmest step   (243 / w5) */
  --surface-header:  #FAF9F6;   /* header band    (248 / w4) */
  --surface-inset:   #FAF9F6;   /* whisper recess            */
  --surface-brand-subtle: #EEF4F0;

  /* Edge — globals.css:204-217 */
  --edge:            rgba(230, 228, 221, 0.70);
  --edge-strong:     #D5D2C8;
  --edge-brand-subtle: #D6E5DC;

  --font-editorial:  'Besley', Georgia, ui-serif, serif;
  --font-slab:       'Zilla Slab', Georgia, ui-serif, serif;
  --font-ui:         'Wix Madefor Text', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-eyebrow:    'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Content-width family — SEMANTIC_TOKENS "Content-width".
     ONE spine for the whole site: header, sections, panels, and the legal
     documents all sit on --shell. An earlier draft ran containers at 64rem
     with text capped at 34rem, which put three competing widths on one page
     and left every section visibly empty on the right. */
  --measure:         40rem;   /* reading measure for body prose */
  --column:          58rem;
  --shell:           58rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--content);
  font-family: var(--font-ui);
  /* 16px, not the product's 15px .text-body tier. A deliberate, stated step
     outside the ladder: at the wider --measure a 15px line runs ~88 characters,
     past the comfortable range, and DL's own throughline scopes the dense-surface
     rules to dense surfaces — a marketing page is the opposite regime. Revert to
     15px by changing this one line if it should track the product exactly. */
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The paper tooth is deliberately NOT carried here. DL §2 scopes it to the
   product's content-field; on a marketing page with no dense data it would be
   decoration for its own sake — "density decides decoration". */

/* ── Skip link ─────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface-raised); color: var(--content-brand);
  padding: 0.75rem 1rem; z-index: 100; border: 1px solid var(--edge-strong);
  border-radius: 8px; font-weight: 600; font-size: 13px;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── Header band (DL §1: flat, no texture) ─────────────────── */
.site-header {
  background: var(--surface-header);
  border-bottom: 1px solid var(--edge);
}
.site-header .inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 1.15rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* The brand lockup IS the wordmark — it already contains the word "verdeer",
   so pairing it with a text wordmark doubled the name. The logo is a locked
   asset and outranks the type ladder here (design-reconciliation: logo+icons
   rank above the accent), so it renders as artwork rather than as .text-wordmark. */
.wordmark {
  display: inline-flex; align-items: center; text-decoration: none;
  line-height: 0;
}
.wordmark img { width: 105px; height: 28px; display: block; }
.header-nav { display: flex; gap: 1.35rem; }
.header-nav a {                   /* .text-inline-action — 13/500 grove */
  font-size: 13px; font-weight: 500; color: var(--content-brand);
  text-decoration: none;
}
.header-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Layout ───────────────────────────────────────────────── */
main { display: block; }
.shell   { max-width: var(--shell);  margin: 0 auto; padding: 0 1.5rem; }
.column  { max-width: var(--column); margin: 0 auto; padding: 0 1.5rem; }

section { padding: 3.25rem 0; }
section + section { border-top: 1px solid var(--edge); }

/* ── Type ladder ──────────────────────────────────────────── */
.eyebrow {                        /* .text-eyebrow — Inter 11/600 caps */
  font-family: var(--font-eyebrow);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.16px; color: var(--content-subtle);
  margin: 0 0 0.9rem;
}
h1 {                              /* editorial lead — the register carries it (DL §6) */
  font-family: var(--font-editorial);
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.6rem);
  /* 400, not the 450 Lora used. Besley runs optically heavier at the same
     nominal weight, so 450 read as a shout rather than a title. */
  font-weight: 400; line-height: 1.22; letter-spacing: -0.015em;
  margin: 0 0 1.15rem; max-width: 20ch;
}
h2 {                              /* .text-section-title — 24/500 */
  font-family: var(--font-editorial);
  font-size: 24px; font-weight: 500; line-height: 1.3;
  margin: 0 0 1rem;
}
h3 {                              /* .text-card-title — 18/500 */
  font-family: var(--font-editorial);
  font-size: 18px; font-weight: 500; line-height: 1.35;
  margin: 0 0 0.5rem;
}
h4 {                              /* .text-card-row-title — functional label, 15/500 sans */
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 500; margin: 0 0 0.4rem;
}
p { margin: 0 0 1rem; max-width: var(--measure); }
.lead {                           /* a serif title leads; body steps down a rung (DL §6) */
  font-size: 19px; line-height: 1.55; color: var(--content-muted);
  max-width: var(--measure);
}
.muted { color: var(--content-muted); }
.small { font-size: 13px; line-height: 1.5; color: var(--content-subtle); }

a { color: var(--content-brand); }
a:hover { text-decoration-thickness: 2px; }

/* Focus — the governed grove ring (SEMANTIC_TOKENS "Focus family") */
:focus-visible {
  outline: 2px solid var(--content-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { padding: 4.5rem 0 3.5rem; }
.hero .contrast {
  font-family: var(--font-ui);
  font-size: 15px; color: var(--content-subtle);
  max-width: var(--measure); margin: 0 0 1.5rem;
}
.hero .contrast strong { color: var(--content-muted); font-weight: 500; }

/* ── The three beats ──────────────────────────────────────────
   Stacked and hairline-divided rather than boxed. DL §1 reserves the
   white lifted card for DATA that must pop off the field; three prose
   blurbs are not that, and "density decides decoration" says leave it
   clean. Boxing them also broke to 2+1 on this spine, leaving an orphan. */
.beats { margin-top: 1.5rem; }
.beat { padding: 1.5rem 0; border-top: 1px solid var(--edge); }
.beat:first-child { border-top: 0; padding-top: 0.5rem; }
.beat:last-child { padding-bottom: 0; }
.beat p { margin: 0; color: var(--content-muted); }

/* ── The Gmail / data-access panel ────────────────────────────
   A whisper-rung inset (--surface-inset), never `structure` — DL §1. */
.panel {
  background: var(--surface-inset);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 1.6rem 1.65rem;
  margin-top: 1.5rem;
}
.panel p:last-child { margin-bottom: 0; }

/* Lists sit on their container, not on the prose measure — inside a panel the
   panel is already the container, and a 34rem list in a 48rem panel re-created
   the mismatched-width problem one level down. */
.checklist { list-style: none; margin: 0 0 1rem; padding: 0; }
.checklist li {
  position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem;
  font-size: 14px; color: var(--content-muted);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--content-brand);
}
.checklist.negative li::before { background: var(--edge-strong); }

/* ── Status note ──────────────────────────────────────────── */
.status {
  background: var(--surface-brand-subtle);
  border: 1px solid var(--edge-brand-subtle);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
}
.status p:last-child { margin-bottom: 0; }

/* ── Legal documents ──────────────────────────────────────── */
.doc { padding: 3rem 0 4rem; }
.doc h1 {                         /* .text-page-title — Zilla Slab 28 italic */
  font-family: var(--font-slab);
  font-size: 30px; font-style: italic; font-weight: 400;
  line-height: 1.1; letter-spacing: 0; max-width: none;
  margin-bottom: 0.6rem;
}
.doc h2 { font-size: 20px; margin-top: 2.5rem; }
.doc h3 { font-size: 16px; margin-top: 1.75rem; }
.doc p, .doc li { font-size: 16px; line-height: 1.65; color: var(--content-muted); }
.doc p { max-width: none; }
.doc strong { color: var(--content); font-weight: 600; }
.doc ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.doc li { margin-bottom: 0.5rem; }
.doc .updated {
  font-size: 13px; color: var(--content-subtle);
  margin-bottom: 2.25rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--edge);
}
.doc table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.5rem;
  font-size: 14px; display: block; overflow-x: auto;
}
.doc th, .doc td {
  text-align: left; vertical-align: top;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--edge);
  color: var(--content-muted);
}
.doc th {
  font-family: var(--font-eyebrow); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.16px;
  color: var(--content-subtle); white-space: nowrap;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--surface-sunken);
  border-top: 1px solid var(--edge);
  margin-top: 1rem;
  padding: 2rem 0 2.5rem;
}
.site-footer .inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.site-footer a { font-size: 13px; font-weight: 500; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .copy { font-size: 13px; color: var(--content-subtle); }

@media (max-width: 34rem) {
  section { padding: 2.5rem 0; }
  .hero { padding: 3rem 0 2.5rem; }
  .site-header .inner { padding: 1rem 1.25rem; }
}