/* ============================================================================
   Taqtiqal — design tokens v1 (Calm / direction B)
   MKT-0007 · seeds the design system · authored fresh (FOUNDING_BRIEF.md §1)

   Source of truth: docs/design/DESIGN_SPEC.md. Every color pair below has a
   formally verified WCAG-AA ratio recorded in the spec (§9). DO NOT nudge any
   color value without re-running docs/design/contrast-check.py — two of these
   values exist only because the originals failed the formal check.

   Deltas from the MKT-0001 Calm mock (deliberate, verified — see spec §3.1):
     --color-muted  #6d6a63 → #6b685f  (mock value = 4.4999:1 on bg — AA fail)
     --color-good   #3f7d63 → #356c55  (mock value = 4.05–4.46:1 as text — AA fail)
   New families (not in the mock): hold (NOT-YET badge), error, field border.
   ========================================================================== */

:root {
  /* ---- color · surfaces ---- */
  --color-bg:        #eeeae3;  /* page background — warm greige */
  --color-card:      #f7f5f0;  /* raised surfaces: cards, steps, form fields */
  --color-rule:      #ddd8cf;  /* hairlines, decorative borders, example strip */

  /* ---- color · text ---- */
  --color-ink:       #22201d;  /* primary text, headings, numerals */
  --color-muted:     #6b685f;  /* secondary text (4.64:1 on bg — verified) */

  /* ---- color · accent ---- */
  --color-accent:    #436b7c;  /* dusty slate: buttons, eyebrows, links, focus */
  --color-on-accent: #ffffff;  /* text on accent fills */

  /* ---- color · verdict families ---- */
  --color-good:      #356c55;  /* GO / positive deltas, as text */
  --color-good-bg:   #e6efe9;
  --color-good-br:   #cfe1d6;
  --color-hold:      #7a4f1d;  /* NOT YET / hold, as text */
  --color-hold-bg:   #f2e7d6;
  --color-hold-br:   #e3d2b8;

  /* ---- color · forms & feedback ---- */
  --color-field-bg:     var(--color-card);
  --color-field-border: #847f75;  /* 3.32:1 on bg — non-text AA floor is 3:1 */
  --color-error:        #9c3a2e;

  /* ---- type · families ---- */
  /* Wordmark face is a self-hosted Fira Sans subset — the terminal-"l" rule
     (BRAND §5.3) cannot be guaranteed by a system stack. Spec §4. */
  --font-wordmark: "Taqtiqal Wordmark", "Fira Sans", "IBM Plex Sans",
                   "Segoe UI", system-ui, sans-serif;
  --font-display:  "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:     system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- type · scale ---- */
  --fs-h1:      clamp(34px, 5.4vw, 58px);
  --fs-h2:      clamp(24px, 3.2vw, 34px);
  --fs-verdict: clamp(19px, 2.4vw, 24px);
  --fs-sub:     clamp(17px, 2vw, 20px);
  --fs-h3:      19px;
  --fs-brand:   20px;
  --fs-btn:     15.5px;
  --fs-body:    15px;
  --fs-body-sm: 14.5px;
  --fs-nav:     14px;
  --fs-small:   13.5px;
  --fs-foot:    13px;
  --fs-mono:    12px;    /* eyebrows, k-labels, lens labels, badges, chips */
  --fs-pron:    11.5px;  /* nav pronunciation cue */

  /* ---- type · weights & rhythm ---- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;   /* h3, buttons, promise titles, emphasis */
  --fw-bold:    700;   /* h1, h2, wordmark */
  --lh-h1:      1.08;
  --lh-tight:   1.25;
  --lh-body:    1.55;
  --lh-compact: 1.5;
  --ls-h1:      -0.02em;
  --ls-h3:      -0.01em;
  --ls-mono:    0.14em;  /* uppercase mono eyebrows */
  --ls-label:   0.06em;  /* uppercase mono lens labels */

  /* ---- spacing · fixed scale (base-4) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- spacing · fluid ---- */
  --pad-gutter:   clamp(20px, 4vw, 56px);    /* page gutters */
  --pad-hero-t:   clamp(52px, 8vw, 104px);   /* Calm's extra-air hero */
  --pad-hero-b:   clamp(36px, 6vw, 68px);
  --pad-sect-t:   clamp(44px, 6vw, 72px);
  --pad-sect-b:   clamp(48px, 6vw, 72px);
  --pad-card:     clamp(20px, 3vw, 30px);
  --pad-step:     clamp(22px, 3vw, 34px);
  --gap-card:     14px;                       /* step & promise grids */

  /* ---- geometry ---- */
  --maxw:      940px;
  --r-card:    18px;
  --r-step:    16px;
  --r-promise: 14px;
  --r-btn:     12px;
  --r-field:   12px;
  --r-pill:    999px;
  --bw:        1px;

  /* ---- motion ---- */
  --ease-ui: 0.18s ease;   /* hovers/transitions; killed under reduced motion */

  /* ---- focus ---- */
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 2px;
}

/* Breakpoint (custom props can't drive media queries — keep in sync manually):
   ≤720px → steps and promises collapse to 1 column, nav links hide
            (language toggle stays visible — D4), lens rows stack. */


/* ============================================================================
   Taqtiqal landing page — component/layout styles (MKT-0008)
   Built on the token seed in docs/design/tokens.css, imported verbatim ahead
   of this file by scripts/build.mjs. Do not redefine any --token here.
   ========================================================================== */

/* ---- wordmark face --------------------------------------------------------
   D-22/D-30: embedded as a base64 data: URI, no separate font request, so
   there is no swap window. Copyright + license line per §4.3 mechanism (b);
   the license text itself is served at /fonts/FiraSans-OFL.txt (mechanism a).
   font-display: block is belt-and-braces only — with a data: source it never
   engages (D-22). */
/*
  Taqtiqal Wordmark — a Modified Version of Fira Sans Bold (SIL OFL 1.1).
  Copyright (c) 2012-2015, The Mozilla Foundation and Telefonica S.A.
  Licensed under the SIL Open Font License, version 1.1.
  License: /fonts/FiraSans-OFL.txt (also https://scripts.sil.org/OFL)
*/
@font-face {
  font-family: "Taqtiqal Wordmark";
  src: url("data:font/woff2;base64,d09GMgABAAAAAAQsAA4AAAAACCwAAAPaAAQz9wAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbIBw2BmAAZBEICoNogw4BNgIkAygLFgAEIAWGPAcgG8kGEVWcZSF+HtjG0gcPkuAVQo6jjuLStuTmtiBEilaOxj97EJAeNZvklBwgP6jWUAl1BM8nG3v/uAGMAMxqSRKq6wazKZsN2RLt3Yu19tKURN/pr5LMZE+9RDxWWiLT/wC4J/2vteV/aL1GZx4Sr7dlwU8reBarKjWqhk4lJSqlbUgZc2vMqRIkSM3uFq3oFfRZBBgCgKREi9EsAqorzoh7dmtk09fAfwEA4r0RibLKvmMcizbPnuHnZ/cMbOPJcSTitlLJ0kl0kD5SLVDQz4sX4SIZpFVf1oGEDAS8ABmVpYJtLXmMlLf8+w7NCwNgYpcu0iHAFRkkkMESWcASxQMwxRQZ8qikjT4GMoyR/zX5Xbfbeisst9jChJEWQt2/AagAlsaemcBuwFhoIwRLtcgu1/Ot76IqRqaG1oYtiqozptK1vqCKl9u8Ki/fDj5U5z8W055oWk6ctkoPI6tvlOYFj+BhhFjKN5l6SuMlHsFKOjXK1IM9NlVH1TFKtcwMwVvLXJ5miO3H6U1MfaR1bFWW/lyhCk3UoD1V3tu0BQG/7pl6V51/X0x7oL06eGjjIewPmkzaEbMx5sBkXk7QvF275fs6ESUDu+tlY2otlaRNyPBw+zzjgR495r0WQcP71pvfo3H3m32is3xdJSdemFustmCWaWFxfftj2u/mYHzQeci6KOzMP64yJTKj9nh5m1keNbm9mu+bRnpPwWvvKrugiNLqtT/Pn/m2FwqtvHdx5lsB2eR+zGaNNx3U9+c1xd7hLjpnQLqPT7qfX7iPT7gfuKMDsiX60AdCgA9yAAKU8/vie5sntrwkftWX5XcAD4NdywHeHJ7x8M/Hf6t1SpUtCJMCEDxSls4P4P6fHH/LRaXWciYIL9IkRwzKE3thT4iwJ1n4ESfV4iWmI/F/BKiJwYIG9FypSlKacZ9FAGaSjUBRmGHg7hXNWgojK+3lnW479jmJNgBfB4Hg7h8S/bhClhlfKAKD0OWfdxgZmfMwFlnJZVO3klnbaM/wd2aPfxrnLx/+nebhSDCcG+X7o3o/38qBYjkVkPHMFJTJ6BZbyd11Q3yw6uwE5D1+Gzii0BQskG6tICos0vWA0ZrkB0YAOm9ro6juEDqhSl5Auk3fUSYBn+TE4DN0diFSPVblUFBe0EhlRJyMPQSmKKwTwh7rqYCCTiKCwnJG8vpG6vryWnJuxlcjILOe0IA2L8dq68JqZyQuwJGAMJNYnQ9ctouGRUKmkqEeQya/KhINLpBBIoIi/PQyQJUHveeGx6NlhYRwjlh3NB4niHOHgvpjVyFdFS1OwP+QqAEA") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- skip link -------------------------------------------------------------
   First element in body (§6): visually hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -80px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-btn);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semi);
  text-decoration: none;
  z-index: 100;
  transition: top var(--ease-ui);
}
.skip-link:focus {
  top: var(--sp-3);
}

/* ---- layout helpers --------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-gutter);
  padding-right: var(--pad-gutter);
}

/* ---- nav -------------------------------------------------------------------- */
.nav {
  padding: var(--sp-5) 0;
}
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.nav__brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--color-ink);
}
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--fw-bold);
  font-size: var(--fs-brand);
  letter-spacing: 0;
}
.pron-cue {
  font-family: var(--font-mono);
  font-size: var(--fs-pron);
  color: var(--color-muted);
  white-space: nowrap;
}
.nav__links {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  flex-wrap: wrap;
}
.nav__link {
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  text-decoration: none;
}
.nav__link:hover { color: var(--color-accent); }
.nav__aside {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

/* language pill (D-19: visible on every viewport) */
.lang-pill {
  display: inline-flex;
  border: var(--bw) solid var(--color-rule);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  overflow: hidden;
}
.lang-pill__option {
  padding: 3px 10px;
  text-decoration: none;
  color: var(--color-muted);
}
.lang-pill__option[aria-current="true"] {
  color: var(--color-ink);
  font-weight: var(--fw-semi);
}
.lang-pill__option:hover { color: var(--color-accent); }

@media (max-width: 720px) {
  .nav__links { display: none; }
}

/* ---- hero --------------------------------------------------------------- */
.hero {
  padding-top: var(--pad-hero-t);
  padding-bottom: var(--pad-hero-b);
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-4);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  max-width: 16ch;
  color: var(--color-ink);
}
.hero__subhead {
  margin-top: var(--sp-5);
  font-size: var(--fs-sub);
  line-height: var(--lh-body);
  color: var(--color-ink);
  max-width: 52ch;
}
.hero__subhead strong { font-weight: var(--fw-semi); }
.hero__ctas {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.hero__cost {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.hero__cost a { color: var(--color-muted); text-decoration: underline; }
.hero__cost a:hover { color: var(--color-accent); }

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semi);
  border-radius: var(--r-btn);
  padding: 14px 24px;
  text-decoration: none;
  border: var(--bw) solid transparent;
  cursor: pointer;
  width: auto;
  transition: filter var(--ease-ui), border-color var(--ease-ui), color var(--ease-ui);
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost {
  background: transparent;
  border-color: var(--color-rule);
  color: var(--color-ink);
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---- section rhythm --------------------------------------------------------- */
section[id] {
  padding-top: var(--pad-sect-t);
  padding-bottom: var(--pad-sect-b);
}
.section-rule {
  border-top: var(--bw) solid var(--color-rule);
}
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-ink);
}
.section-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--color-muted);
  margin-left: var(--sp-3);
  text-transform: none;
}
.lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  color: var(--color-ink);
  max-width: 68ch;
}

/* ---- problem band ------------------------------------------------------------ */
.problem__col {
  max-width: 62ch;
  font-size: var(--fs-body);
  color: var(--color-ink);
}
.problem__col p + p { margin-top: var(--sp-4); }
.problem__stat {
  font-family: var(--font-mono);
  color: var(--color-ink);
}
.problem__source {
  font-size: 0.7em;
  vertical-align: super;
  color: var(--color-accent);
  text-decoration: none;
  margin-left: 2px;
}
.problem__source:hover { text-decoration: underline; }

/* ---- how it works ------------------------------------------------------------ */
.steps {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-card);
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
}
.step {
  background: var(--color-card);
  border: var(--bw) solid var(--color-rule);
  border-radius: var(--r-step);
  padding: var(--pad-step);
}
.step__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.step h3 {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-ink);
}
.step__body {
  margin-top: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
  line-height: var(--lh-body);
}

/* ---- capture form -------------------------------------------------------------- */
.capture-form {
  margin-top: var(--sp-6);
  max-width: 480px;
}
.field-group { margin-top: var(--sp-4); }
.field-group:first-child { margin-top: 0; }
.field-label {
  display: block;
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}
.field {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-field-bg);
  border: var(--bw) solid var(--color-field-border);
  border-radius: var(--r-field);
}
.field::placeholder { color: var(--color-muted); }
.field:focus-visible {
  border-color: var(--color-accent);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.field:user-invalid {
  border-color: var(--color-error);
}
.field:user-invalid + .field-label,
.field-group:has(.field:user-invalid) .field-label {
  color: var(--color-error);
}
.capture-form__submit-row {
  margin-top: var(--sp-5);
}
.capture-form__microcopy {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.capture-form__fallback {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--color-card);
  border: var(--bw) solid var(--color-rule);
  border-radius: var(--r-field);
  font-size: var(--fs-small);
  color: var(--color-ink);
  display: none;
}
.capture-form__fallback a { color: var(--color-accent); }
.capture-form__fallback[data-visible="true"] { display: block; }
/* Same "honest note" box treatment as .capture-form__fallback, but always
   visible when present — <noscript> content only ever renders into the DOM
   at all when JS is disabled (PR #126 codex round 3, P1), so there is no
   separate JS-driven toggle to gate on here. */
.capture-form__noscript {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--color-card);
  border: var(--bw) solid var(--color-rule);
  border-radius: var(--r-field);
  font-size: var(--fs-small);
  color: var(--color-ink);
}
.capture-form__noscript a { color: var(--color-accent); }
.capture-form.js-submitting .capture-form__fields,
.capture-form.js-fallback .capture-form__fields {
  display: none;
}
.turnstile-slot { margin-top: var(--sp-4); }
/* PR #126 codex round 5 (P2): backstop against horizontal overflow on
   narrow phones regardless of what width Turnstile's own script actually
   sets on the injected iframe — data-size="compact" (render.mjs) is the
   primary fix, this is defense in depth. */
.cf-turnstile,
.cf-turnstile iframe {
  max-width: 100%;
}

/* ---- example card -------------------------------------------------------------- */
.example-card {
  margin-top: var(--sp-7);
  background: var(--color-card);
  border: var(--bw) solid var(--color-rule);
  border-radius: var(--r-card);
  overflow: hidden;
}
.example-card__strip {
  background: var(--color-rule);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  text-align: center;
  padding: var(--sp-3) var(--pad-card);
}
.example-card__body {
  padding: var(--pad-card);
}
.example-card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
}
.example-card__verdict-row {
  margin-top: var(--sp-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.example-card__verdict {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-verdict);
  color: var(--color-ink);
}
.badge {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--fw-semi);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  white-space: nowrap;
}
.badge--hold {
  color: var(--color-hold);
  background: var(--color-hold-bg);
  border: var(--bw) solid var(--color-hold-br);
}
.lens-rows {
  margin-top: var(--sp-5);
}
.lens-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: var(--bw) solid var(--color-rule);
}
.lens-row:first-child { border-top: none; padding-top: 0; }
@media (max-width: 720px) {
  .lens-row { grid-template-columns: 1fr; gap: var(--sp-2); }
}
.lens-row__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
}
.lens-row__value {
  font-size: var(--fs-body);
  line-height: var(--lh-compact);
  color: var(--color-ink);
}
.lens-row__value .num { font-family: var(--font-mono); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.lens-row__value .good { color: var(--color-good); }
.example-card__footnote {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--color-rule);
  font-size: var(--fs-foot);
  color: var(--color-muted);
}

/* ---- foundation section --------------------------------------------------------- */
.foundation__intro {
  margin-top: var(--sp-3);
  font-size: var(--fs-sub);
  color: var(--color-muted);
}
.deliverables {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  counter-reset: deliverable;
}
.deliverables__item {
  font-size: var(--fs-body);
  color: var(--color-ink);
  line-height: var(--lh-body);
}
.deliverables__item strong { font-weight: var(--fw-semi); }
.price-block {
  margin-top: var(--sp-6);
  background: var(--color-card);
  border-radius: var(--r-card);
  padding: var(--pad-card);
}
.price-block__figure {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-ink);
}
.price-block__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
}
.price-block__compare {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.honesty-clause {
  margin-top: var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--color-accent);
  font-size: var(--fs-body);
  color: var(--color-ink);
}
.foundation__cta { margin-top: var(--sp-6); }
.foundation__proof {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.foundation__proof a { color: var(--color-muted); text-decoration: underline; }
.foundation__proof a:hover { color: var(--color-accent); }

/* ---- commitments strip --------------------------------------------------------- */
.commitments__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
}
.promises {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-card);
}
@media (max-width: 720px) {
  .promises { grid-template-columns: 1fr; }
}
.promise {
  background: var(--color-card);
  border: var(--bw) solid var(--color-rule);
  border-radius: var(--r-promise);
  padding: var(--sp-5);
}
.promise--wide { grid-column: 1 / -1; }
.promise h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  color: var(--color-ink);
}
.promise p {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: var(--lh-body);
}

/* ---- footer --------------------------------------------------------------------- */
.footer {
  border-top: var(--bw) solid var(--color-rule);
  padding: var(--sp-6) 0 var(--sp-7);
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-foot);
  color: var(--color-muted);
}
.footer__row .wordmark { font-size: 16px; }
.footer__sep::before { content: "\00B7"; margin: 0 2px; }
.footer a {
  color: var(--color-muted);
  text-decoration: underline;
}
.footer a:hover { color: var(--color-accent); }

/* ---- text links (generic) -------------------------------------------------------- */
.text-link {
  text-decoration: underline;
  color: var(--color-ink);
}
.text-link:hover { color: var(--color-accent); }

/* ---- focus everywhere -------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---- reduced motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}