/*
 * vealth-next.css — the staged fresh-site system (2026-07-06).
 *
 * Direct descendant of vealth-simple.css (the home system, per doctrine:
 * new surfaces start from it). Same tokens, same ONE card and ONE button,
 * plus the components the fresh site adds: the quiet nav, the loop spine
 * (Place, Problem, Work, Proof, Receipt), the known-problem card grammar,
 * the agent menu row, the status glossary, and the hand-shaping form.
 *
 * Laws carried in from doctrine:
 *   - ONE button treatment: warm glisten, spectrum border, identical everywhere.
 *   - No dark slabs; code blocks are warm-tinted.
 *   - No day/night switching; one look for everyone.
 *   - Raw HTML never bakes a live counter; fallbacks read em-dash or a truthful zero.
 */

:root {
  /* Warm Spectrum Glass (2026-07-08 operator correction — supersedes the beige
     "warm-mineral" pass; see docs/vealth/WARM_LUMINANCE_DIRECTION.md).
     Warm-neutral base; the light comes from soft GOLD · ROSE · GREEN · BLUE
     glows under the page. Two spectral layers:
       marks  (--gold/--pink/--blue/--moss/--olive/--sage) — readable mid-hues
              for dots, edges, chips, text: the DISTINCT spectrum;
       tints + glows (--tint-* / --glow-*) — soft luminous light for backgrounds,
              halos, hovers: the light UNDER the page.
     No stark white, no dark slab, no day/night switch. Luminous neutral. */
  --ink:#241b18; --muted:rgba(40,29,24,0.74); --soft:rgba(40,29,24,0.60);
  --rule:rgba(120,80,45,0.16); --face:rgba(250,240,220,0.72); --face-strong:rgba(250,241,222,0.88);

  /* The house type is three faces: Fraunces display, Inter body, IBM Plex Mono
     for machine text. vealth-fonts.css SELF-HOSTS all three (8 Plex Mono
     weights), but every mono rule in this sheet asked for the bare
     `ui-monospace,monospace` stack, so the shipped face was never used and the
     machine text rendered as whatever the OS calls monospace: SF Mono on a Mac,
     Consolas on Windows, DejaVu on Linux. Same page, three different tapes.
     Tokenized 2026-08-19 so the face is named once; the fallbacks stay real, so
     a page that loads this sheet without the font sheet still reads. */
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* readable spectrum marks — the distinct hues */
  --gold:#c98a2e; --pink:#c56480; --blue:#3f7ba1; --moss:#3e7d5a;
  /* gold/pink as SMALL TEXT on cream: --gold reads 2.8:1 and --pink 3.7:1
     there (fails AA 4.5:1), so text uses these deeper hues (5.2 and 5.5:1).
     Decorative marks stay --gold/--pink. */
  --gold-text:#7c590c; --pink-text:#954058;
  --olive:#7d8451; --sage:#9a8b4e; --green:#2f6f4a; --leaf:#1e7a4b;
  --link:#146b41;

  /* soft luminous tints + glows — the light under the page */
  --tint-gold:#f2c76b; --tint-rose:#f0a8b8; --tint-green:#9ccf9a; --tint-blue:#9ec8e8;
  --glow-gold:rgba(242,199,107,0.15); --glow-rose:rgba(240,168,184,0.06);
  --glow-green:rgba(156,207,154,0.13); --glow-blue:rgba(158,200,232,0.06);

  /* Spectrum = gold, green, black (operator 2026-08-12: the equity deck's
     aesthetic is the exemplar; apply it sitewide). The six-colour rainbow read
     as decoration rather than as our mark and now lives ONLY in the lotus
     image itself. Same literal in vealth-simple.css, vealth-site.css,
     work-board.css, regen-shared.css, both nav injectors, the OG generators
     and the deck: they all move together or the suite splits. */
  --spectrum:linear-gradient(112deg,#c98a2e 0%,#d9a94f 22%,#6f9e76 55%,#3f6a52 78%,#1b1b20 100%);
  --step-1:clamp(30px,5.2vw,50px); --step-2:22px; --step-3:17px; --step-4:14.5px; --step-5:12px;
  --gap:56px;
  /* the page ground itself, tokenized 2026-08-05 so dark can move it */
  --page:linear-gradient(135deg,#e9d6b4 0%,#e1cba5 48%,#d9d6b4 100%);
  /* lifted surfaces — panels, cards, inset blocks. Tokenized 2026-08-05:
     these were hardcoded rgba(255,25x,2xx,.x) on 30 pages, which is why dark
     rendered them as grey slabs instead of a subtle lift off the ground. */
  --panel:rgba(250,242,224,0.48); --panel-strong:rgba(250,241,222,0.90);
  /* card gradient bottom stop + its white top sheen. Left hardcoded by the
     2026-08-05 sweep, which made every card half-cream in dark (1.2:1 text). */
  --face-2:rgba(248,237,214,0.70); --card-sheen:rgba(255,248,230,0.32);
  /* section bands + the faint ink wash behind code/pills. Raw values here
     kept 6 rules light-only until the 2026-08-05 audit made the guard read
     these stylesheets at all. */
  --band-a:rgba(250,241,222,0.40); --band-b:rgba(244,232,210,0.28);
  --ink-wash:rgba(17,28,23,0.05);
  --nav-sheen:rgba(255,248,230,0.45);
  /* the nav pill's warm glass. Must be a LITERAL: a custom property that
     references itself is invalid at computed-value time, which took the whole
     `background:var(--nav-glass) padding-box` declaration with it and left the
     light nav with no glass at all. */
  --nav-glass:linear-gradient(115deg,rgba(241,228,199,0.88),rgba(236,221,188,0.62),rgba(221,231,205,0.58),rgba(230,224,194,0.68));
  /* The alternating section band, the card/nav top lip, and the ONE button.
     Tokenized 2026-08-05 (wave): all four were hardcoded cream LITERALS in
     rules outside :root, so the dark block could not move them — the even
     sections rendered as a pale grey-green slab under off-white text (3.7:1,
     below AA) and the primary CTA stayed a cream glare on a near-black page.
     Values only; every literal below is the exact light value it replaced. */
  --band-a-alt:rgba(247,236,214,0.38); --band-b-alt:rgba(241,228,204,0.30);
  --card-lip:rgba(255,247,230,0.48); --card-lip-hover:rgba(253,243,222,0.66);
  --nav-lip:rgba(255,247,230,0.38); --nav-lip-strong:rgba(255,247,230,0.50);
  --btn-face:linear-gradient(180deg,rgba(246,234,208,0.99),rgba(234,215,182,0.97));
  --btn-ink:#33261a; --btn-lip:rgba(253,243,222,0.66);
  /* Ink-on-surface tokens (2026-08-09). These five text/surface pairs were raw
     light-mode literals in component rules below, so dark rendered dark-brown
     code, dark-brown prices and forest-green "proves" lines on a near-black
     ground. Tokenized like the 08-05 sweep, values unchanged in light. */
  --code-ink:#4a3423; --code-bg:rgba(96,72,52,0.08);
  --pre-bg:rgba(96,72,52,0.07); --pre-edge:rgba(96,72,52,0.13);
  --price-ink:#5c3d1a; --price-edge:rgba(122,74,30,0.18); --price-bg:rgba(200,138,61,0.12);
  --ok-ink:#214F3A; --spec-kick:#7a4a1e;
}
/* ── Dark ─────────────────────────────────────────────────────────────────
   Operator 2026-08-05: "a dark version that is very sleek and easy on the
   eyes." NOT an inversion. Same token NAMES, so every rule in this file and
   every page already written keeps working untouched; only the values move.

   Three rules held throughout:
     1. Never pure black and never pure white. The light theme forbids stark
        white; the dark theme owes the same restraint at the other end. Base
        is a warm near-black, text is a warm off-white.
     2. The lotus spectrum is the logo and does not change. It is legible on
        both grounds, so --spectrum is identical in both themes.
     3. The marks LIFT on dark. A hue readable on cream is muddy on charcoal,
        so each one is raised in luminance rather than reused.

   Honours the OS by default via prefers-color-scheme. The [data-theme]
   selectors mean a toggle can be added later without touching this block. */
/* Dark is OPT-IN ONLY. It used to follow prefers-color-scheme, which meant a
   visitor whose OS is dark landed in dark and never saw the brand's main
   face. Operator 2026-08-05: "it needs to go back to the light version
   mainly, then can switch to dark." Light is the default for everyone; the
   toggle sets data-theme="dark" and that is the only way in. Kept as a
   disabled media block rather than deleted so the OS-following behaviour is
   one edit away if the operator ever wants it back. */
/* GOLD · GREEN · BLACK (operator 2026-08-07, from screenshot review: "the
   colors are too bright they need to match the logo gold green black").
   This REPLACES the silver/platinum-blue dark of 2026-08-05. The ground is a
   warm green-black like the dark lotus tile, never blue and never pure black;
   the linings — rules, lips, sheens, glows — are gold; the accents are the
   lotus greens. Blush and blue survive only where they carry meaning (loop
   stages, lanes), muted. --spectrum is untouched: the lotus is the logo and
   reads on both grounds. The same review made the BUTTON FACE OPAQUE here:
   the old translucent face let the spectrum border-layer flood the whole pill
   and put white text on raw rainbow (the operator's screenshot). */
@media (prefers-color-scheme: dark) and (min-width: 999999px) {
  :root:not([data-theme="light"]) {
    --ink:#ece4d0; --muted:rgba(236,228,208,0.74); --soft:rgba(236,228,208,0.56);
    --rule:rgba(224,203,150,0.15);
    --face:rgba(23,27,19,0.72); --face-strong:rgba(29,34,24,0.88);

    /* marks, lifted for contrast: true gold and the lotus greens */
    --gold:#d9b876; --pink:#c9a8a4; --blue:#8badb4; --moss:#7fa583;
    --gold-text:#d9b876; --pink-text:#c9a8a4; /* night hues already pass AA on the dark ground */
    --olive:#a3ab7f; --sage:#bfb383; --green:#6da678; --leaf:#94c69b;
    --link:#d5bc7e;

    /* tints + glows: gold and green lead, everything low-energy at night */
    --tint-gold:#c9ab6c; --tint-rose:#b39d97; --tint-green:#84a98a; --tint-blue:#8aa6ad;
    --glow-gold:rgba(217,184,118,0.11); --glow-rose:rgba(179,157,151,0.05);
    --glow-green:rgba(132,169,138,0.10); --glow-blue:rgba(138,166,173,0.06);
    --panel:rgba(224,203,150,0.05); --panel-strong:rgba(224,203,150,0.09);
    --face-2:rgba(15,19,13,0.82); --card-sheen:rgba(233,219,178,0.05);
    --band-a:rgba(224,203,150,0.030); --band-b:rgba(224,203,150,0.015);
    --ink-wash:rgba(224,203,150,0.06);
    --nav-sheen:rgba(233,219,178,0.07);
    --nav-glass:linear-gradient(115deg,rgba(13,16,11,0.90),rgba(17,21,14,0.78),rgba(15,19,13,0.74),rgba(19,23,16,0.80));
    --page:linear-gradient(135deg,#0a0e09 0%,#10140d 46%,#0b100c 100%);
    --band-a-alt:rgba(224,203,150,0.042); --band-b-alt:rgba(224,203,150,0.022);
    --card-lip:rgba(233,219,178,0.09); --card-lip-hover:rgba(233,219,178,0.14);
    --nav-lip:rgba(233,219,178,0.08); --nav-lip-strong:rgba(233,219,178,0.12);
    --btn-face:linear-gradient(180deg,#1b2015,#12160e);
    --btn-ink:#e8cc8f; --btn-lip:rgba(233,219,178,0.16);
    --code-ink:#dcc79a; --code-bg:rgba(224,203,150,0.10);
    --pre-bg:rgba(224,203,150,0.07); --pre-edge:rgba(224,203,150,0.14);
    --price-ink:#e6d3a3; --price-edge:rgba(224,203,150,0.22); --price-bg:rgba(217,184,118,0.10);
    --ok-ink:#94c69b; --spec-kick:#d5bc7e;
  }
}
:root[data-theme="dark"] {
  --ink:#ece4d0; --muted:rgba(236,228,208,0.74); --soft:rgba(236,228,208,0.56);
  --rule:rgba(224,203,150,0.15);
  --face:rgba(23,27,19,0.72); --face-strong:rgba(29,34,24,0.88);
  --gold:#d9b876; --pink:#c9a8a4; --blue:#8badb4; --moss:#7fa583;
  --gold-text:#d9b876; --pink-text:#c9a8a4; /* night hues already pass AA on the dark ground */
  --olive:#a3ab7f; --sage:#bfb383; --green:#6da678; --leaf:#94c69b;
  --link:#d5bc7e;
  --tint-gold:#c9ab6c; --tint-rose:#b39d97; --tint-green:#84a98a; --tint-blue:#8aa6ad;
  --glow-gold:rgba(217,184,118,0.11); --glow-rose:rgba(179,157,151,0.05);
  --glow-green:rgba(132,169,138,0.10); --glow-blue:rgba(138,166,173,0.06);
  --panel:rgba(224,203,150,0.05); --panel-strong:rgba(224,203,150,0.09);
  --face-2:rgba(15,19,13,0.82); --card-sheen:rgba(233,219,178,0.05);
  --band-a:rgba(224,203,150,0.030); --band-b:rgba(224,203,150,0.015);
  --ink-wash:rgba(224,203,150,0.06);
  --nav-sheen:rgba(233,219,178,0.07);
  --nav-glass:linear-gradient(115deg,rgba(13,16,11,0.90),rgba(17,21,14,0.78),rgba(15,19,13,0.74),rgba(19,23,16,0.80));
  --page:linear-gradient(135deg,#0a0e09 0%,#10140d 46%,#0b100c 100%);
  --band-a-alt:rgba(224,203,150,0.042); --band-b-alt:rgba(224,203,150,0.022);
  --card-lip:rgba(233,219,178,0.09); --card-lip-hover:rgba(233,219,178,0.14);
  --nav-lip:rgba(233,219,178,0.08); --nav-lip-strong:rgba(233,219,178,0.12);
  --btn-face:linear-gradient(180deg,#1b2015,#12160e);
  --btn-ink:#e8cc8f; --btn-lip:rgba(233,219,178,0.16);
  --code-ink:#dcc79a; --code-bg:rgba(224,203,150,0.10);
  --pre-bg:rgba(224,203,150,0.07); --pre-edge:rgba(224,203,150,0.14);
  --price-ink:#e6d3a3; --price-edge:rgba(224,203,150,0.22); --price-bg:rgba(217,184,118,0.10);
  --ok-ink:#94c69b; --spec-kick:#d5bc7e;
}


* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
::selection { background:rgba(242,199,107,0.32); color:#33261a; }

body.simple {
  min-height:100vh; color:var(--ink); font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6; font-size:var(--step-3);
  /* Spectral, not flat: soft gold/rose/green/blue light pools in the corners
     over a warm-neutral base. The base moves gold→cream→faint-green so it never
     reads as one dead tan. Glows are fixed so they behave like ambient light. */
  background:
    radial-gradient(circle at 12% 8%, var(--glow-gold), transparent 30rem),
    radial-gradient(circle at 88% 12%, var(--glow-rose), transparent 28rem),
    radial-gradient(circle at 16% 90%, var(--glow-green), transparent 30rem),
    radial-gradient(circle at 88% 84%, var(--glow-blue), transparent 28rem),
    var(--page);
  background-attachment:fixed;
}

.wrap { max-width:900px; margin:0 auto; padding:56px 22px 80px; }
section { margin-top:var(--gap); }

/* Tonal occupancy: sections sit on faint warm washes instead of open field,
   alternating slightly deeper, so the page reads as contained warm bands
   rather than floating text. Headers stay open (the hero owns its field). */
main.wrap > section {
  padding:26px 24px 28px; border-radius:20px;
  background:linear-gradient(180deg, var(--band-a), var(--band-b));
  box-shadow:0 1px 0 var(--card-lip) inset;
}
main.wrap > section:nth-of-type(even) {
  background:linear-gradient(180deg, var(--band-a-alt), var(--band-b-alt));
}
@media (max-width:640px){ main.wrap > section { padding:20px 16px 22px; } }

/* ── Nav: a polished translucent spectral bar — one branded object, not a row
      of plain links (2026-07-08 operator direction). Warm glass, soft spectral
      edge, active/hover items glow gold→rose→green. ── */
/* ANCHORED, not floating (operator 2026-08-05: "it needs to lock at the top as
   an anchor not a floating pill in front of the site"). The pill sat 14px down
   with rounded ends and a drop shadow, so it read as an object hovering OVER
   the page and broke the immersion the site is being built for. It is now a bar
   welded to the top edge: full bleed, square, its own bottom rule. The spectrum
   is kept, moved from a ring around the pill to the bar's bottom edge, so the
   brand line is what separates the bar from the page.
   The measure is preserved by padding rather than max-width, so the LINKS sit
   on the same column as the content beneath them. Using 100% and not 100vw is
   deliberate: 100vw includes the scrollbar and would push the page sideways.
   Note that the percentage resolves against the CONTAINING BLOCK, not the bar's
   own width — it computes correctly only because the nav is a direct child of
   <body> and the reset above zeroes the UA body margin. Move it inside any
   wrapper and this measure silently breaks.

   2026-08-05: the column was 1040px while `.wrap` below is 900px with 22px of
   padding, so the bar was measured against a column the page does not have and
   the brand sat 92px LEFT of every heading it was supposed to anchor (measured
   live at 1440px: nav 200, h1 292). An anchor that does not line up with the
   thing it anchors reads as a separate layer laid over the page, which is the
   whole complaint the full-bleed change set out to fix. The value now derives
   from the content measure itself: (100% - 900px)/2 + 22px puts the nav's inner
   edge exactly on `.wrap`'s text edge. The 18px floor takes over below ~856px,
   which is where the mobile `.wrap` padding is 18px, so it stays aligned at
   both ends rather than only on wide screens. Both injectors carry the same
   literal and were changed with it. */
.quiet-nav {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:none; margin:0; border-radius:0;
  padding:6px max(18px, calc((100% - 900px) / 2 + 22px));
  border:0; border-bottom:1px solid var(--rule);
  background:var(--nav-glass);
  box-shadow:inset 0 1px 0 var(--nav-sheen);
  -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15);
}
.quiet-nav::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--spectrum); opacity:0.7;
}
.quiet-nav .qn-brand { display:inline-flex; align-items:center; gap:9px; min-height:44px; font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:17px; color:var(--ink); text-decoration:none; padding:6px 4px; letter-spacing:-0.01em; flex:none; }
/* Brand mark: the lotus shown WHOLE — contain, no crop of the GLYPH, no dark
   disc, no ring (operator law 2026-07-22).
   Operator 2026-08-06: "the logo is square it needs to be circle cropped and
   blend in with site and it needs to be slightly bigger as well." The two
   readings are consistent: what the 07-22 law protects is the lotus, and what
   is cropped here is the opaque SQUARE TILE the lotus was baked onto. Both 96px
   marks were colortype 2 — RGB with NO ALPHA — so every nav drew a hard-edged
   square of the tile's own ground on the page gradient, worst on dark where the
   tile ground (13,25,27) is a green-black against a blue-charcoal page.
   The marks were also DIFFERENT SIZES: measured at a stable ink threshold the
   light lotus filled 87% of its tile and the dark one 62%, so switching theme
   visibly resized the logo. Both are re-framed to 80% and feathered by
   scripts/support/ops/round-brand-marks.ts, which refuses rather than clip a
   petal. 48px→56px (40→46 on phones) so the lotus renders larger than before
   despite the transparent surround. */
.quiet-nav .qn-brand::before {
  content:""; width:56px; height:56px; flex:none;
  background:url("brand-mark-light-round-96.png?v=lotus9") center/contain no-repeat;
}
/* the wordmark is identity, not a nav chip — never wear the active/hover pill */
.quiet-nav .qn-brand:hover, .quiet-nav .qn-brand[aria-current="page"] { background:none; box-shadow:none; }
@media (max-width:640px){ .quiet-nav .qn-brand::before { width:46px; height:46px; } }
/* The two real marks, wired 2026-08-05 (wave). Both existed on disk since
   the theme night and NOTHING loaded them — every nav still drew the old
   brand-mark.png in both themes. The light mark is also the EWP token mark,
   so token and site read as one system (operator: "brand and token
   affiliated"). Served at 96px for a 48px slot: 2x for retina and still
   LIGHTER than the 160px original it replaces (16KB / 11KB vs 36KB), because
   the 320px sources are 150KB and 71KB and nothing that heavy may reach a
   phone. Logo law unchanged: contain, WHOLE, no crop, no disc, no ring. */
:root[data-theme="dark"] .quiet-nav .qn-brand::before {
  background-image:url("brand-mark-dark-round-96.png?v=lotus9");
}

.quiet-nav .qn-links { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.quiet-nav a { text-decoration:none; font-size:14px; font-weight:600; color:var(--muted); padding:7px 12px; border-radius:999px;
  display:inline-flex; align-items:center; min-height:44px; white-space:nowrap;
  transition:background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; }
.quiet-nav a:hover { color:var(--ink); background:linear-gradient(135deg, var(--glow-gold), var(--glow-green)); box-shadow:inset 0 1px 0 var(--nav-lip); }
.quiet-nav a[aria-current="page"] {
  color:var(--ink);
  background:linear-gradient(135deg, rgba(242,199,107,0.42), rgba(203,180,120,0.28), rgba(156,207,154,0.22));
  box-shadow:inset 0 1px 0 var(--nav-lip-strong);
}
/* "Find Work" (.qn-start) carries NO permanent emphasis — only the CURRENT page
   is highlighted (via aria-current), so a non-current "Find Work" reads exactly
   like the other inactive links. When work.html is the current page, the
   aria-current rule above gives it the active pill. (2026-07-12 nav fix.) */
.quiet-nav .qn-start:not([aria-current="page"]) { color:var(--muted); font-weight:600; background:none; box-shadow:none; }
.quiet-nav .qn-start:not([aria-current="page"]):hover { color:var(--ink); background:linear-gradient(135deg, var(--glow-gold), var(--glow-green)); box-shadow:inset 0 1px 0 var(--nav-lip); }
@media (max-width:640px){
  /* Keep the pill nav to ONE row and every target ≥44px. The links stay a
     single non-wrapping row (no more "About" dropping to a 2nd/3rd row) and
     scroll horizontally inside their own track if the four labels are wider
     than the phone; the brand stays fixed on the left. */
  /* Left padding matches `.wrap`'s mobile 18px so the brand sits on the same
     edge as the heading below it. Measured on the live site 2026-08-05: the bar
     was anchored and full-bleed, but on a phone the brand sat 12px left of every
     h1, which is the same "a layer laid over the page" tell the desktop fix
     removed, just at a size where more people see it. Right stays tight: the
     links, not the brand, need the room. */
  .quiet-nav{ top:0; gap:8px; padding:6px 10px 6px 18px; border-radius:0; margin-top:0; flex-wrap:nowrap; }
  .quiet-nav .qn-brand{ font-size:16px; padding:6px 2px; min-height:44px; }
  .quiet-nav .qn-links{
    gap:2px; flex-wrap:nowrap; min-width:0; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; justify-content:flex-start;
  }
  .quiet-nav .qn-links::-webkit-scrollbar{ display:none; }
  .quiet-nav a{ font-size:13px; padding:6px 10px; min-height:44px; flex:none; }
  .quiet-nav .qn-links a:first-child{ margin-left:auto; }
}
/* Tight phones (≤430px): all four links must FIT, not clip behind a hidden
   scroll track. The lotus medallion stays; the "Vealth" wordmark yields its
   width (still present for screen readers) and the pills tighten a notch. */
@media (max-width:430px){
  .quiet-nav .qn-brand{ font-size:0; gap:0; padding:6px 0; }
  /* Same aligned left edge as above. The 12px it takes from the link track is
     paid back with interest by tightening the pills a notch below. */
  .quiet-nav{ gap:4px; padding:6px 6px 6px 18px; }
  .quiet-nav .qn-links a{ font-size:12.5px; padding:6px 6px; }

  /* WRAP, do not clip (2026-08-06). Measured at 390px: the links track is a
     268px box holding 305px of pills with overflow-x:auto, so "Agents" — a
     real door — was cut off at the edge behind a scroll track with no visible
     affordance. Nobody discovers a sideways swipe on a nav bar, so the fourth
     door was effectively missing on every phone. It predates the 48→56px
     medallion; that change made it 6px worse, not new.
     Tightening alone cannot close it: the deficit is 37px and dropping the
     pills to 2px padding and 12px type recovers ~34px at 390 and less at 360.
     So the row wraps instead. Nothing is hidden, all four doors are tappable,
     and the nav publishes its MEASURED height as --nav-h, so the scene system
     resizes to match a two-row bar on its own. */
  /* The NAV must stay one row: brand | links | toggle. Wrapping the nav itself
     put each of those three on its own line and grew the bar to 213px at 320px,
     a quarter of the screen. Only the LINKS wrap. */
  .quiet-nav{ flex-wrap:nowrap; align-items:flex-start; }
  /* Long-set pages ragged (2026-08-11): a five-plus-link nav (inventory.html,
     standard.html) doesn't split evenly across the wrap, and flex-start left
     a lone trailing pill hanging off the left edge with a wide gap of nothing
     next to it — the ragged line the 2026-08-06 wrap fix didn't anticipate,
     because it was tuned against exactly four labels. Centering each wrapped
     line reads as intentional regardless of how the pills happen to split. */
  .quiet-nav .qn-links{
    flex-wrap:wrap; overflow-x:visible; min-width:0;
    justify-content:center; row-gap:2px;
  }
  .quiet-nav .qn-links a:first-child{ margin-left:0; }
}

/* ── Links: every anchor wears the house green unless a component overrides ── */
a { color:var(--link,#146b41); }
a:hover { color:var(--ink); }

/* ── Type ── */
h1 { font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:var(--step-1); line-height:1.05; letter-spacing:-0.02em; max-width:18ch; }
/* The one signature motion the site spends on itself: the spectrum bar under
   every h1 drifts instead of sitting static, slow enough to read as alive
   ambient light rather than a loading state (2026-08-06). Same --spectrum
   token on both themes, so this needs nothing new for dark mode. */
h1::after {
  content:""; display:block; width:96px; height:5px; border-radius:3px; margin-top:20px;
  background:var(--spectrum); background-size:220% 100%;
  animation:vx-spectrum-drift 9s ease-in-out infinite;
}
@keyframes vx-spectrum-drift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@media (prefers-reduced-motion: reduce) { h1::after { animation:none; } }
h2 { font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:var(--step-2); margin-bottom:18px; position:relative; padding-left:16px; }
h2::before { content:""; position:absolute; left:0; top:5px; bottom:5px; width:5px; border-radius:3px; background:var(--spectrum); }
.kick { font-family:var(--mono); font-size:var(--step-5); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--soft); }
.kick a { color:inherit; text-decoration:none; }
.kick a:hover { color:var(--ink); }
.lead { font-size:var(--step-3); color:var(--muted); max-width:56ch; margin-top:14px; }
.lead a, .quiet a { color:var(--link); font-weight:600; text-decoration:none; }
.lead a:hover, .quiet a:hover { text-decoration:underline; }
.quiet { font-size:var(--step-4); color:var(--soft); max-width:64ch; }
.lead + .quiet { margin-top:12px; }
code { font-family:var(--mono); font-size:0.92em; color:var(--code-ink); background:var(--code-bg); padding:1px 5px; border-radius:5px; overflow-wrap:anywhere; }

/* ── The loop spine: the site's signature. Each stage carries its color. ── */
.loop { display:flex; flex-wrap:wrap; align-items:center; gap:10px 4px; list-style:none; padding:0; margin:22px 0 0; }
.loop .stage {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--soft);
}
.loop .stage::before { content:""; width:10px; height:10px; border-radius:50%; flex:none; background:var(--soft); }
.loop .stage:not(:last-child)::after { content:"\2192"; margin:0 8px; color:rgba(96,72,52,0.40); font-weight:400; }
.loop .s-place::before   { background:var(--gold); }
.loop .s-problem::before { background:var(--olive); }
.loop .s-work::before    { background:var(--moss); }
.loop .s-proof::before   { background:var(--blue); }
.loop .s-receipt::before { background:var(--pink); }
.loop .s-more { color:var(--soft); }
.loop .s-more::before { background:transparent; border:2px solid rgba(17,28,23,0.28); width:8px; height:8px; }
.loop .is-here { color:var(--ink); }
.loop .is-here::before { box-shadow:0 0 0 3px rgba(17,28,23,0.12); }
.loop--mini { margin-top:12px; gap:6px 2px; }
.loop--mini .stage { font-size:10.5px; }
.loop--mini .stage::before { width:7px; height:7px; }
.loop--mini .stage:not(:last-child)::after { margin:0 5px; }

/* ── The ONE card ── */
.card {
  display:block; text-decoration:none; color:inherit;
  border:1px solid transparent; border-radius:18px; padding:22px 24px;
  /* warm glass: a white sheen top-left, a faint gold glow top-right, over a
     translucent warm surface with a soft spectral edge. */
  background:
    radial-gradient(circle at 14% 8%, var(--card-sheen), transparent 42%),
    radial-gradient(circle at 92% 6%, var(--glow-gold), transparent 46%),
    linear-gradient(180deg, var(--face), var(--face-2)) padding-box,
    var(--spectrum) border-box;
  box-shadow:0 1px 0 var(--card-lip) inset, 0 24px 52px -40px rgba(120,70,30,0.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform 0.14s ease, box-shadow 0.14s ease;
}
a.card:hover { transform:translateY(-2px); box-shadow:0 1px 0 var(--card-lip-hover) inset, 0 26px 54px -38px rgba(90,58,30,0.52), 0 0 0 1px rgba(200,138,61,0.18); }
.card h3 { font-size:var(--step-2); font-weight:700; margin-bottom:4px; }
.card .next { color:var(--soft); font-size:var(--step-4); margin-top:10px; }
.card .cta { color:var(--leaf); font-weight:700; font-size:var(--step-4); margin-top:12px; display:inline-flex; align-items:center; min-height:44px; }
.card p { font-size:var(--step-4); color:var(--muted); }
.card a:not(.cta):not(.btn) { color:var(--link); font-weight:600; text-decoration:none; }
.card a:not(.cta):not(.btn):hover { text-decoration:underline; }

/* ── ONE button treatment (doctrine): warm glisten, spectrum border ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:11px 22px; border:2px solid transparent; border-radius:999px;
  font:700 var(--step-4)/1.2 "Inter",system-ui,sans-serif; color:var(--btn-ink); text-decoration:none; cursor:pointer;
  background:
    var(--btn-face) padding-box,
    var(--spectrum) border-box;
  box-shadow:0 1px 0 var(--btn-lip) inset, 0 18px 40px -26px rgba(90,58,30,0.48);
  transition:transform 0.14s ease, box-shadow 0.14s ease;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 1px 0 var(--btn-lip) inset, 0 22px 44px -24px rgba(90,58,30,0.55), 0 0 18px rgba(200,138,61,0.22); }
.btn:focus-visible { outline:3px solid var(--leaf); outline-offset:2px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:26px; }
/* A second action that names a real alternative, not a second button — the
   ONE button treatment stays one. Plain underlined text, quieter than .btn,
   for a scene with exactly one primary choice and one honest secondary door
   (2026-08-06, hook consolidation). */
.action-quiet {
  font:600 var(--step-4)/1.2 "Inter",system-ui,sans-serif; color:var(--soft);
  text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px;
  min-height:44px; display:inline-flex; align-items:center;
  transition:color 0.16s ease, border-color 0.16s ease;
}
.action-quiet:hover { color:var(--ink); border-color:var(--soft); }
.action-quiet:focus-visible { outline:2px solid var(--leaf); outline-offset:3px; }

/* ── Status card + strip (numbers hydrate; markup never bakes a count) ── */
.status { border:1px solid var(--rule); border-radius:16px; background:var(--face); padding:20px 24px; position:relative; overflow:hidden; }
.status::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--spectrum); }
.status .row { display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--mono); font-size:var(--step-4); color:var(--muted); }
.status .row b { color:var(--ink); font-weight:700; }
.status .honest { margin-top:14px; font-size:var(--step-4); color:var(--soft); max-width:64ch; }

/* ── Proves / does-not-prove tile ── */
.tile { border:1px solid var(--rule); border-radius:16px; background:var(--face); padding:18px 22px; }
.tile .t-num { font-family:var(--mono); font-size:26px; font-weight:700; color:var(--ink); }
.tile .t-label { font-size:var(--step-4); color:var(--muted); font-weight:600; margin-top:2px; }
.tile .t-src { font-family:var(--mono); font-size:11px; color:var(--soft); margin-top:8px; word-break:break-all; }
.tile .t-proves, .tile .t-not { font-size:13px; line-height:1.5; margin-top:8px; }
.tile .t-proves { color:var(--ok-ink); }
.tile .t-not { color:var(--soft); font-style:italic; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }

/* ── Route cards (the four doors): 2x2, never a 3+1 orphan ── */
.paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:26px; }
@media (max-width:560px){ .paths { grid-template-columns:1fr; } }
.paths .card { position:relative; overflow:hidden; transition:box-shadow .18s ease, transform .18s ease; }
.paths .card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--spectrum); }
/* Per-door hue families (warm-luminance brief: "doors as tinted cards —
   Start=amber, Work=terracotta"). Each door owns an accent: a hue-family top
   edge + a faint matching halo behind the heading + a warm-tinted lift on
   hover. Glisten from layering, never glare. */
.paths .card.door-start::before { background:linear-gradient(90deg,#e6b45a,#c98a2e); }
.paths .card.door-work::before  { background:linear-gradient(90deg,#eaa4b6,#e6b45a); }
.paths .card.door-start::after,
.paths .card.door-work::after { content:""; position:absolute; top:-30%; right:-10%; width:180px; height:180px; border-radius:50%; pointer-events:none; opacity:.6; filter:blur(28px); z-index:0; }
.paths .card.door-start::after { background:radial-gradient(circle,var(--glow-gold),transparent 70%); }
.paths .card.door-work::after  { background:radial-gradient(circle,var(--glow-rose),transparent 70%); }
.paths .card.door-start > *, .paths .card.door-work > * { position:relative; z-index:1; }
.paths .card.door-start:hover { box-shadow:0 8px 26px -14px rgba(201,138,46,.5); transform:translateY(-1px); }
.paths .card.door-work:hover  { box-shadow:0 8px 26px -14px rgba(197,100,128,.5); transform:translateY(-1px); }

/* ── Steps ── */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
/* Numerals are ONE metal (operator 2026-08-07 screenshot review): sequence
   numbers are gold, all of them. The four-color candy numbering encoded
   nothing and read as decoration; retired with the gold/green/black pass. */
.step .n { font-family:"Fraunces",serif; font-size:26px; color:var(--gold); }
.step h3 { font-size:var(--step-3); font-weight:700; margin:6px 0 4px; }
.step p { color:var(--muted); font-size:var(--step-4); }

/* ── Packet / list cards with a colored left edge ── */
.examples { display:grid; gap:14px; }
.pkt { position:relative; overflow:hidden; }
.pkt::before { content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:var(--spectrum); }
.pkt h3 { font-size:var(--step-3); font-weight:700; }
.pkt .why { color:var(--muted); font-size:var(--step-4); margin:6px 0; }
.pkt .meta { display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--mono); font-size:var(--step-5); color:var(--soft); margin-top:8px; }
.pkt .meta b { color:var(--ink); }

/* ── Known-problem card grammar: Where / Why / Next / Proof ── */
.kp dl { margin:10px 0 0; display:grid; grid-template-columns:max-content 1fr; gap:5px 14px; font-size:13.5px; line-height:1.5; }
.kp dt { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--soft); padding-top:2px; }
.kp dd { margin:0; color:var(--muted); }
@media (max-width:520px){ .kp dl { grid-template-columns:1fr; gap:2px 0; } .kp dd { margin-bottom:6px; } }
/* Category hue bands: buildings terracotta · food honey · water mineral teal ·
   soil moss · ecosystems olive-gold · civic warm iron. */
.lane-buildings .pkt::before  { background:var(--pink); }
.lane-food .pkt::before       { background:var(--gold); }
.lane-water .pkt::before      { background:var(--blue); }
.lane-soil .pkt::before       { background:var(--olive); }
.lane-ecosystems .pkt::before { background:var(--sage); }
.lane-civic .pkt::before      { background:#6b5544; }

/* Deeper category hue bands (the brief's "visual gift"): each lane reads as its
   own warm-hued zone — the heading accent takes the lane hue, a full-height hue
   band runs down the section's left edge, and a faint hue glow sits top-left —
   layered over the alternating section wash, not just a thin per-card edge. */
.lane-buildings > h2::before  { background:var(--pink); }
.lane-food > h2::before       { background:var(--gold); }
.lane-water > h2::before      { background:var(--blue); }
.lane-soil > h2::before       { background:var(--olive); }
.lane-ecosystems > h2::before { background:var(--sage); }
.lane-civic > h2::before      { background:#6b5544; }

main.wrap > section[class*="lane-"] { position:relative; overflow:hidden; padding-left:30px; }
main.wrap > section[class*="lane-"]::after {
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
}
main.wrap > section[class*="lane-"]::before {
  content:""; position:absolute; left:-40px; top:-40px; width:200px; height:200px;
  border-radius:50%; filter:blur(46px); opacity:.5; pointer-events:none; z-index:0;
}
main.wrap > section[class*="lane-"] > * { position:relative; z-index:1; }
.lane-buildings::after  { background:var(--pink); }   .lane-buildings::before  { background:radial-gradient(circle,var(--glow-rose),transparent 70%); }
.lane-food::after       { background:var(--gold); }   .lane-food::before       { background:radial-gradient(circle,var(--glow-gold),transparent 70%); }
.lane-water::after      { background:var(--blue); }   .lane-water::before      { background:radial-gradient(circle,var(--glow-blue),transparent 70%); }
.lane-soil::after       { background:var(--olive); }  .lane-soil::before       { background:radial-gradient(circle,rgba(125,132,81,.24),transparent 70%); }
.lane-ecosystems::after { background:var(--sage); }   .lane-ecosystems::before { background:radial-gradient(circle,rgba(168,154,99,.24),transparent 70%); }
.lane-civic::after      { background:#6b5544; }        .lane-civic::before      { background:radial-gradient(circle,rgba(107,85,68,.22),transparent 70%); }
@media (max-width:640px){ main.wrap > section[class*="lane-"] { padding-left:22px; } }

/* ── Agent menu row: name + line + price ── */
.menu { display:grid; gap:12px; }
.menu .card { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding:18px 22px; }
.menu .card h3 { font-size:var(--step-3); font-family:var(--mono); margin:0; }
.menu .card p { margin-top:6px; }
.menu .boundary { margin-top:6px; }
.price {
  display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 11px;
  border-radius:999px; border:1px solid var(--price-edge); background:var(--price-bg);
  color:var(--price-ink); font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.08em; white-space:nowrap;
}

/* ── State chips: the spoon-fed status read (operator 2026-08-07). A row
   declares its true state in one glance — Written / Partly built / Not yet —
   so nobody parses a paragraph to learn what a list already knows. The chip
   never softens the truth: open means open, stated in gold-green-black. ── */
.state {
  display:inline-flex; align-items:center; gap:6px; min-height:22px; padding:2px 10px; margin-right:8px;
  border-radius:999px; font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; vertical-align:middle;
}
.state::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.state--done { color:var(--ok-ink); background:rgba(47,143,93,0.13); }
.state--partial { color:var(--price-ink); background:var(--price-bg); }
.state--open { color:var(--soft); background:var(--ink-wash); border:1px solid var(--rule); }

/* ── Status glossary rows ── */
.gloss { margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); }
.gloss li { display:grid; grid-template-columns:minmax(120px,160px) 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--rule); }
/* Every paragraph belongs to the TEXT column. Without this, a row's second or
   third <p> auto-places into the 130px label column and wraps word-per-line
   (QA 2026-08-10: fund's refund paragraph, desktop, both themes). */
.gloss li > p { grid-column: 2; }
.gloss .gname { font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding-top:2px; }
/* When a gloss term IS a link — the five machine endpoints on agents.html —
   it was a 15px tap target, the smallest interactive thing on that page and
   well under the 44px Apple HIG / WCAG 2.5.5 floor. Measured on production at
   a 390px viewport 2026-08-06. inline-flex + min-height grows only the hit
   area; the mono type and its uppercase letterspacing are untouched. */
.gloss .gname a { display:inline-flex; align-items:center; min-height:44px; }
.gloss p { font-size:var(--step-4); color:var(--muted); margin:0; }
.gloss p .gnot { color:var(--soft); font-style:italic; }
@media (max-width:640px){ .gloss li { grid-template-columns:1fr; gap:4px; } }

/* ── The hand-shaping form ── */
.v-form-row { margin-bottom:18px; }
.v-form-row:last-of-type { margin-bottom:0; }
.v-form-label { display:block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--soft); margin-bottom:8px; }
.v-form-row textarea, .v-form-row input[type="text"] {
  width:100%; font-family:"Inter",system-ui,sans-serif; font-size:15.5px; line-height:1.55;
  color:var(--ink); background:var(--face); border:1px solid var(--rule); border-left:3px solid rgba(125,132,81,0.55);
  border-radius:8px; padding:12px 14px; transition:border-color 0.15s ease;
}
.v-form-row textarea { min-height:96px; resize:vertical; }
.v-form-row textarea:focus, .v-form-row input[type="text"]:focus { outline:none; border-color:var(--leaf); }
.v-form-row--where input { border-left-color:rgba(200,138,61,0.6); }
.v-form-row--proof textarea { border-left-color:rgba(63,123,161,0.65); }
.v-status-row { margin-top:20px; padding-top:18px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.v-status-pill { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; border-radius:999px; background:rgba(96,72,52,0.09); color:var(--soft); }
.v-status-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:rgba(96,72,52,0.4); }
.v-status-pill--ready { background:rgba(47,143,93,0.13); color:var(--ok-ink); }
.v-status-pill--ready::before { background:var(--ok-ink); }
.v-status-note { font-size:13px; color:var(--soft); margin:0; font-style:italic; }
button[disabled] { opacity:0.45; cursor:not-allowed; }
.v-copy-flash { align-self:center; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ok-ink); opacity:0; transition:opacity 0.18s ease; }
.v-copy-flash.is-visible { opacity:1; }

/* ── Shape-the-draft: fields left, held preview right on desktop ── */
@media (min-width:920px) {
  .v-shape-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; align-items:start; }
  .v-shape-grid .v-col-preview { position:sticky; top:78px; }
  .v-shape-grid .v-col-preview .v-status-row { margin-top:0; padding-top:0; border-top:0; }
}
.v-col-preview pre { background:var(--pre-bg); }

/* ── Specimen card: one packet held up to the light ──
   The spectrum gradient border of .card already frames it on all four rounded
   corners. The old full-width top accent bar squared off at the top corners
   (a rectangle meeting the curved border), so it's replaced with a short,
   fully-rounded spectrum "specimen" tab that never touches a corner. (Corner
   fix 2026-07-12: everything rounded, no sharp corners.) */
.specimen { position:relative; padding-top:26px; }
.specimen::after {
  content:""; position:absolute; top:11px; left:24px; width:42px; height:5px;
  border-radius:999px; background:var(--spectrum);
}
.specimen .kick { color:var(--spec-kick); }

/* ── Code: warm-tinted, never a dark slab (doctrine) ── */
pre {
  background:var(--pre-bg); color:var(--ink); border:1px solid var(--pre-edge);
  border-radius:12px; padding:14px 16px; margin-top:10px;
  font-family:var(--mono); font-size:12.5px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word; overflow-x:auto;
}
pre code { background:none; padding:0; font-size:inherit; }
.mono { font-family:var(--mono); font-size:12px; color:var(--soft); word-break:break-all; }

/* ── Boundary line: what a thing does NOT claim ── */
.boundary { display:block; margin-top:10px; font-size:13px; color:var(--soft); font-style:italic; max-width:64ch; }

/* ── AI line: one slim refined band pointing at /mcp. Was inline-duplicated
   per page; consolidated here 2026-08-06 so every page that names an AI
   entry point shares one definition instead of drifting copies. Never a
   shouting card. ── */
.aiband { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:22px; padding:12px 18px;
  border-radius:999px; border:1px solid var(--rule); background:var(--panel);
  font-size:var(--step-4); color:var(--muted); }
.aiband code { font-weight:700; color:var(--ink); }

/* ── Brand line: the one sentence the whole site stands on ── */
.brandline {
  font-family:"Fraunces",Georgia,serif; font-size:clamp(20px,3.2vw,28px); font-weight:600;
  line-height:1.3; letter-spacing:-0.01em; max-width:24ch;
  padding-left:18px; border-left:5px solid transparent;
  border-image:var(--spectrum) 1;
}

/* ── Footer ── */
.foot { margin-top:var(--gap); padding-top:26px; border-top:1px solid var(--rule); color:var(--soft); font-size:var(--step-4); display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; }
/* Brand line owns its row; links flow beneath in steady columns. */
.foot > span { flex:0 0 100%; }
.foot a { white-space:nowrap; }
.foot a { color:var(--link); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
.foot a:hover { text-decoration:underline; }

@media (max-width:640px) {
  .wrap { padding:44px 18px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .btn, a.card { transition:none; }
  .btn:hover, a.card:hover { transform:none; }
}

/* Three intent doors (2026-07-19): 3-up on desktop, 1-up small. */
.paths--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:860px){ .paths--three { grid-template-columns:1fr; } }
.paths .card.door-verify::before { background:linear-gradient(90deg,#84c496,#7bb8dd); }
.paths .card.door-verify::after { content:""; position:absolute; top:-30%; right:-10%; width:180px; height:180px; border-radius:50%; pointer-events:none; opacity:.6; filter:blur(28px); z-index:0; background:radial-gradient(circle,var(--glow-green),transparent 70%); }
.paths .card.door-verify > * { position:relative; z-index:1; }
.paths .card.door-verify:hover { box-shadow:0 8px 26px -14px rgba(62,125,90,.5); transform:translateY(-1px); }