/* src/styles/v2/fonts.css */
/* AvailGolf webfaces — DS-01, revised 18 Aug 2026 (typewriter/mono retirement).
   Newsreader (display) · Archivo (body/UI/secondary-label — the mono role is retired).
   Self-hosted WOFF2. The Google Fonts CDN working state is retired. Canonical CSS family
   names are used deliberately; internal WOFF2 metadata does not rename them. No italics.
   --font-mono is kept as a token alias (so every existing eyebrow/label/figure/prose rule that
   references it repaints automatically) but now resolves to Archivo — the typewriter/IBM Plex
   Mono treatment used for secondary text felt developer-oriented rather than premium. Secondary
   hierarchy is now carried by size, uppercase, tracking and colour on the same sans family, not
   a distinct typeface. See --tracking-label for the accompanying tracking retune. */

@font-face{font-family:"Newsreader";src:url("/assets/fonts/Newsreader-Regular-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-Variable-wght-400-600-latin.woff2") format("woff2-variations"),url("/assets/fonts/Archivo-Variable-wght-400-600-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Archivo","Helvetica Neue",Arial,sans-serif;
  --weight-display:400;
  --weight-body:400;
  --weight-medium:500;
  --weight-strong:600;
}

/* src/styles/v2/colors.css */
/* DS-04 · Colour. Cream is the canvas. Forest is structural punctuation. Gold is decorative detail.
   Base values first, semantic aliases second. Semantic names carry the permission, base names do not. */
:root{
  /* --- base palette --- */
  --forest:#032f22;
  --green-mid:#1D5B44;
  --green-deep-text:#12402F;
  --cream:#F7F4EC;
  --paper:#FDFCF7;
  --sand:#EFEADC;
  --ink:#12211B;
  --ink-muted:#33403A;
  --ink-quiet:#4A5750;
  --pale-green:#C9D3CC;
  --gold:#c5a15a;
  --gold-text:#8A6A2B;

  /* --- semantic state (DS-23). Three tokens, no fourth. There is no info blue. --- */
  --state-error:#A03C2A;
  --state-notice:#8A6A2B;
  /* --state-success intentionally duplicates --green-mid. Rationalisation note: the values are
     held as TWO tokens on purpose. --green-mid is a typographic role (inline links); --state-success
     is a semantic role (confirmation). No new hue enters the palette, and either role can be
     retuned later without dragging the other with it. Do not collapse them. */
  --state-success:#1D5B44;
  --status-pill-fill:#E7EFE9;

  /* --- semantic surface aliases --- */
  --surface-canvas:var(--cream);
  --surface-card:var(--paper);
  --surface-quiet:var(--sand);
  --surface-structural:var(--forest);

  /* --- semantic text aliases --- */
  --text-body:var(--ink);
  --text-secondary:var(--ink-muted);
  --text-quiet:var(--ink-quiet);
  --text-heading:var(--forest);
  --text-on-forest:var(--cream);
  --text-on-forest-secondary:var(--pale-green);
  --text-link:var(--green-mid);
  --text-link-hover:var(--forest);
  --text-eyebrow:var(--gold-text);          /* on cream */
  --text-eyebrow-on-forest:var(--gold);     /* label size only, DS-16 */
  /* --gold-text measures 4.6:1 on cream but only 4.2:1 on sand, and this
     direction makes sand the page ground. A darkened value is published for
     eyebrows that sit directly on sand: #7A5D26 on #EFEADC is 5.1:1. */
  --text-eyebrow-on-sand:#7A5D26;

  /* --- action aliases (DS-07) --- */
  --action-fill:var(--forest);
  --action-label:var(--cream);
  --action-fill-hover:var(--green-mid);
  --action-fill-on-forest:var(--cream);
  --action-label-on-forest:var(--forest);
  --action-tint-hover:rgba(3,47,34,.08);
  --action-tint-pressed:rgba(3,47,34,.14);
  --action-tint-press-row:rgba(3,47,34,.04);
  --focus-ring:var(--forest);
  --focus-ring-on-forest:var(--cream);
}

/* src/styles/v2/typography.css */
/* DS-01 · Ten steps, no eleventh. DS-25 · clamp() only; raw vw sizing is prohibited.
   Minimum term is the 360px size, maximum term the 1200px+ size. 16px is the body floor. */
:root{
  --display-1:clamp(2.25rem,1.393rem + 3.810vw,4.25rem); /* 36 → 68 */
  --display-2:clamp(2rem,1.464rem + 2.381vw,3.25rem);    /* 32 → 52 */
  --heading-1:clamp(1.625rem,1.25rem + 1.667vw,2.5rem);  /* 26 → 40 */
  --heading-2:clamp(1.375rem,1.214rem + 0.714vw,1.75rem);/* 22 → 28 */
  --heading-3:1.25rem;                                     /* 20, does not scale */
  --body-lg:clamp(1.0625rem,0.982rem + 0.357vw,1.25rem);   /* 17 → 20 */
  --body:clamp(1rem,0.973rem + 0.119vw,1.0625rem);         /* 16 → 17 */
  --body-sm:0.9375rem;                                     /* 15 */
  --label:0.8125rem;                                       /* 13 — absolute mono floor */
  --figure:clamp(1.75rem,1.429rem + 1.429vw,2.5rem);       /* 28 → 40 */

  --tracking-display-1:-0.015em;
  --tracking-display-2:-0.01em;
  --tracking-heading-1:-0.015em;
  --tracking-label:0.045em; /* retuned 18 Aug 2026 for Archivo uppercase (was 0.07em, tuned for IBM Plex Mono's fixed-width glyphs) */

  --leading-display-1:1.04;   /* 1.08 below 640px — see base.css */
  --leading-display-2:1.08;
  --leading-heading:1.15;
  --leading-body:1.6;
  --leading-body-loose:1.65;

  --measure-body:70ch;
  --measure-caption:48ch;
  --measure-quote:56ch;
  --measure-opener:18ch;
}

/* src/styles/v2/spacing.css */
/* DS-08 · Spacing, layout and geometry. Ten steps. Radii: closed set of four. One shadow. */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --section-padding:128px;        /* desktop */
  --section-padding-tablet:96px;
  --section-padding-mobile:64px;

  --container:1200px;
  --grid-columns:12;
  --gutter:24px;

  --radius-none:0;
  --radius-control:4px;     /* buttons, inputs */
  --radius-panel:10px;      /* cards, panels, screenshots */
  --radius-pill:999px;      /* status pills ONLY. Pill-shaped buttons are prohibited. */

  --control-height:48px;    /* primary action / field minimum */
  --control-padding-x:24px;
  --touch-min:44px;
  --header-height:72px;
  --header-height-mobile:56px;
  --accordion-row-height:56px;

  /* Elevation: exactly one shadow exists in the entire system. */
  --shadow-header-scrolled:0 1px 3px rgba(3,47,34,.10),0 6px 16px rgba(3,47,34,.06);
}
@media (max-width:900px){ :root{ --section-padding:96px } }
@media (max-width:640px){ :root{ --section-padding:64px; --header-height:56px } }

/* src/styles/v2/lines.css */
/* DS-17 · Rule and border vocabulary. Five rules, each with exactly one job.
   AvailGolf separates by line, not by shadow, which makes the line load-bearing. */
:root{
  --line:#CFC7B4;                 /* hairline 1px — static dividers on cream. Never a control edge. */
  --line-strong:#8E8977;          /* control edge 1.5px — anything operable. 3.2:1 */
  --line-forest:#2C4A3D;          /* forest divider 1px — static separation inside forest */
  --line-forest-strong:#7A9689;   /* forest control edge 1.5px — 4.6:1 against forest */
  /* the gold mark is --gold at 1px × 18–22px, before an eyebrow, and nothing else */

  --border-hairline: 1px solid var(--line);
  --border-control: 1.5px solid var(--line-strong);
  --border-forest: 1px solid var(--line-forest);
  --border-control-forest: 1.5px solid var(--line-forest-strong);
  --gold-mark-width:18px;
  --focus-ring-width:2px;
  --focus-ring-offset:2px;
}

/* src/styles/v2/motion.css */
/* DS-09 · Motion. A state change, not a personality. */
:root{
  --duration-state:120ms;
  --duration-reveal:200ms;
  --duration-max:320ms;
  --ease-entrance:cubic-bezier(.2,.7,.3,1);   /* ease-out */
  --ease-state:cubic-bezier(.4,0,.2,1);       /* ease-in-out */
  --reveal-translate:8px;
  --stagger-max:3;
}
@media (prefers-reduced-motion:reduce){
  :root{ --reveal-translate:0px; --duration-reveal:120ms; --duration-max:120ms }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:120ms !important; transition-property:opacity,color,background-color,border-color !important }
}

/* src/styles/v2/base.css */
/* Base element styles. DS-22 requires a and a:hover to be defined in base styles —
   undefined links render browser-default blue, a real risk on legal and support pages. */
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--surface-canvas); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--body); line-height:var(--leading-body-loose);
  font-weight:var(--weight-body); text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:var(--weight-display); color:var(--text-heading); margin:0 }
h1{ font-size:var(--display-1); line-height:var(--leading-display-1); letter-spacing:var(--tracking-display-1) }
h2{ font-size:var(--display-2); line-height:var(--leading-display-2); letter-spacing:var(--tracking-display-2) }
h3{ font-size:var(--heading-1); line-height:var(--leading-heading); letter-spacing:var(--tracking-heading-1) }
@media (max-width:640px){ h1{ line-height:1.08 } }
p{ margin:0; max-width:var(--measure-body) }

a{ color:var(--text-link); font-weight:var(--weight-medium); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color var(--duration-state) var(--ease-state) }
a:hover{ color:var(--text-link-hover); text-decoration-thickness:2px }
a:focus-visible{ outline:var(--focus-ring-width) solid var(--focus-ring); outline-offset:var(--focus-ring-offset) }
.on-forest a,a.on-forest{ color:var(--cream) }
.on-forest a:hover,a.on-forest:hover{ color:var(--pale-green) }
.on-forest a:focus-visible{ outline-color:var(--focus-ring-on-forest) }

*:focus-visible{ outline:var(--focus-ring-width) solid var(--focus-ring); outline-offset:var(--focus-ring-offset) }

/* Utility roles used by specimen cards and kits. */
.ag-eyebrow{ font-family:var(--font-mono); font-size:var(--label); line-height:1; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--text-eyebrow); display:flex; align-items:center; gap:var(--space-3) }
.ag-eyebrow::before{ content:""; width:var(--gold-mark-width); height:1px; background:var(--gold); flex:none }
.ag-mono{ font-family:var(--font-mono); font-size:var(--label); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-quiet) }
.ag-figure{ font-family:var(--font-mono); font-size:var(--figure); font-variant-numeric:tabular-nums; color:var(--text-heading) }

/* src/styles/v2/components.css */
/* ==========================================================================
   AvailGolf design system — components
   Ported from the Claude Design bundle (AvailGolfDesignSystem_e16fac) from
   React/JSX to plain HTML + CSS. Every value is the bundle's value.
   ========================================================================== */

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

img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }


/* [hidden] must win over inline display, or a conditional branch stays visible. */
[hidden] { display: none !important; }

.ag-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Button — DS-07 hierarchy + DS-21 states. Three tiers differ by fill and
   weight, never by hue. No lift, no glow, no scale, no opacity-faded disabled.
   -------------------------------------------------------------------------- */

.ag-btn {
  font: var(--weight-strong) 1rem/1 var(--font-body);
  min-height: var(--control-height);
  padding: 0 var(--control-padding-x);
  border-radius: var(--radius-control);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  transition: background-color var(--duration-state) var(--ease-state),
              border-color var(--duration-state) var(--ease-state);
}
.ag-btn:active { transform: translateY(1px); }
.ag-btn--full { width: 100%; }

.ag-btn--primary { background: var(--action-fill); color: var(--action-label); }
.ag-btn--primary:hover { background: var(--action-fill-hover); color: var(--action-label); }

.ag-btn--secondary { background: transparent; border-color: var(--forest); color: var(--forest); }
.ag-btn--secondary:hover { background: var(--action-tint-hover); color: var(--forest); }
.ag-btn--secondary:active { background: var(--action-tint-pressed); }

/* On forest the fills invert. */
.on-forest .ag-btn--primary, .ag-btn--primary.on-forest {
  background: var(--action-fill-on-forest); color: var(--action-label-on-forest);
}
.on-forest .ag-btn--primary:hover, .ag-btn--primary.on-forest:hover { background: #EDE7D8; color: var(--forest); }

.on-forest .ag-btn--secondary, .ag-btn--secondary.on-forest {
  background: transparent; border-color: var(--cream); color: var(--cream);
}
.on-forest .ag-btn--secondary:hover, .ag-btn--secondary.on-forest:hover { background: rgba(247,244,236,.08); color: var(--cream); }
.on-forest .ag-btn--secondary:active, .ag-btn--secondary.on-forest:active { background: rgba(247,244,236,.14); }

.ag-btn[disabled], .ag-btn[aria-disabled="true"] {
  background: var(--paper);
  border: var(--border-control);
  color: var(--ink-quiet);
  cursor: not-allowed;
  transform: none;
}

/* Tertiary — a link with one trailing arrow. Never a box, never a chevron. */
.ag-btn--tertiary {
  font: var(--weight-medium) var(--body)/1.4 var(--font-body);
  background: none; border: 0; padding: 11px 0; min-height: 0;  /* padding, not height: keeps it a text link while making a 44px target */
  cursor: pointer;
  color: var(--green-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  display: inline-flex;
  gap: var(--space-2);
  align-items: baseline;
}
.ag-btn--tertiary:hover { color: var(--forest); text-decoration-thickness: 2px; }
.on-forest .ag-btn--tertiary { color: var(--cream); }
.ag-btn--tertiary::after { content: "\2192"; }

/* Action pair */
.ag-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.ag-actions__row { display: flex; gap: var(--space-3); }
.ag-actions--stack .ag-actions__row { flex-direction: column; width: 100%; }
.ag-actions--stack .ag-btn { width: 100%; }
.ag-actions__note {
  font: 400 var(--label)/1.5 var(--font-mono);
  color: var(--ink-quiet);
  max-width: var(--measure-caption);
}
.on-forest .ag-actions__note { color: var(--pale-green); }

/* --------------------------------------------------------------------------
   Lockup — DS-15. Sizing driven by LOCKUP HEIGHT, ratio 2.973:1, never
   distorted. One approved asset: the white artwork, which needs a forest
   ground. The forest recolour was produced and rejected by the owner
   (16 Aug 2026); do not recolour, redraw or trace a light-surface variant.
   -------------------------------------------------------------------------- */

.ag-lockup { display: inline-flex; align-self: flex-start; align-items: center; min-height: var(--touch-min); text-decoration: none; }
.ag-lockup img { align-self: flex-start; object-fit: contain; }

/* --------------------------------------------------------------------------
   Site header — DS-02 + DS-20. Solid forest, 72px desktop / 56px mobile.
   Not translucent, not floating, not a pill. Exactly one existing-customer
   entry in the bar. Two buttons in a bar is the ceiling.
   -------------------------------------------------------------------------- */

.ag-header {
  background: var(--forest);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: none;
  transition: box-shadow var(--duration-state) var(--ease-state);
}
.ag-header[data-scrolled="true"] { box-shadow: var(--shadow-header-scrolled); }

.ag-header__skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--cream); color: var(--forest); padding: 12px 16px;
  z-index: 30; text-decoration: none;
}
.ag-header__skip:focus { left: var(--space-4); }

.ag-header__bar {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
  min-width: 0;
  overflow: hidden;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.ag-header__bar .ag-lockup, .ag-header__bar .ag-lockup img { align-self: center; }
.ag-header__bar .ag-lockup img { height: 48px; width: auto; }

.ag-header__nav { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; min-width: 0; }
.ag-header__link {
  font: 400 0.9375rem/1 var(--font-body);
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.ag-header__link:hover { color: var(--pale-green); }
.ag-header__divider { width: 1px; height: 24px; background: var(--line-forest); flex: none; }
.ag-header__actions { display: flex; gap: var(--space-3); margin-left: var(--space-2); }
.ag-header__actions .ag-btn { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; white-space: nowrap; }

.ag-header__trigger {
  display: none;
  margin-left: auto;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  background: transparent;
  border: 1.5px solid var(--line-forest-strong);
  border-radius: var(--radius-control);
  color: var(--cream);
  font: 400 var(--label)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 12px;
}

.ag-header__panel {
  border-top: 1px solid var(--line-forest);
  padding: var(--space-5);
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}
.ag-header__panel[data-open="true"] { display: flex; }
.ag-header__panel .ag-header__link { min-height: var(--touch-min); }
.ag-header__panel-label {
  font: 400 var(--label)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--space-3);
}
.ag-header__panel-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }

/* DS-20 · the hand-off to the panel is at 1200, not 900: the bar's capacity is
   full AT 1200px, so below it the set cannot hold without overflowing, and
   DS-11 forbids horizontal scroll. 1200 is inside the closed breakpoint set. */
@media (max-width: 1199px) {
  .ag-header__bar { height: var(--header-height-mobile); }
  .ag-header__bar .ag-lockup img { height: 36px; }
  .ag-header__nav, .ag-header__actions { display: none; }
  .ag-header__trigger { display: inline-flex; align-items: center; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Site footer — DS-02. Brand + contact + legal + one closing action.
   -------------------------------------------------------------------------- */

.ag-footer { background: var(--forest); color: var(--pale-green); }
.ag-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-9) var(--space-5) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.ag-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: space-between; align-items: flex-start; }
.ag-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 320px; }
.ag-footer__brand img { height: 40px; width: auto; }
.ag-footer__brand p { font: 400 var(--body-sm)/1.6 var(--font-body); color: var(--pale-green); margin: 0; }
.ag-footer__brand a { font: 400 var(--body-sm)/1.6 var(--font-body); color: var(--cream); display: inline-flex; align-items: center; min-height: var(--touch-min); }
.ag-footer__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 160px; }
.ag-footer__col > p {
  font: 400 var(--label)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-2);
}
.ag-footer__col a {
  font: 400 var(--body-sm)/1.4 var(--font-body);
  color: var(--cream);
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
}
.ag-footer__bottom {
  border-top: 1px solid var(--line-forest);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
  align-items: center;
}
.ag-footer__bottom p { font: 400 var(--label)/1.5 var(--font-mono); color: var(--pale-green); margin: 0; }

/* --------------------------------------------------------------------------
   Accordion — DS-07 + DS-21. 56px full-row trigger, real button semantics,
   − / + that CHANGE rather than rotate, 200ms height transition, multi-open.
   -------------------------------------------------------------------------- */

.ag-accordion { border-top: 1px solid var(--line); }
.ag-accordion__item { border-bottom: 1px solid var(--line); }
.ag-accordion__trigger {
  width: 100%;
  min-height: var(--accordion-row-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  font: 500 var(--body-lg)/1.4 var(--font-body);
  color: var(--forest);
  text-align: left;
  transition: background-color var(--duration-state) var(--ease-state);
}
.ag-accordion__trigger:hover { background: rgba(3,47,34,.02); }
.ag-accordion__trigger:active { background: var(--action-tint-press-row); }
.ag-accordion__mark { font: 400 20px/1 var(--font-mono); color: var(--ink-quiet); flex: none; }
.ag-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-reveal) var(--ease-state);
}
.ag-accordion__item[data-open="true"] .ag-accordion__panel { grid-template-rows: 1fr; }
.ag-accordion__panel > div { overflow: hidden; }
.ag-accordion__panel p {
  padding-bottom: var(--space-5);
  font: 400 var(--body)/1.65 var(--font-body);
  color: var(--ink-muted);
  max-width: var(--measure-body);
}

/* --------------------------------------------------------------------------
   Forms — DS-03 / DS-19 / DS-23. One form language across the entire site.
   Labels always visible, above the field. No placeholder-as-label.
   -------------------------------------------------------------------------- */

.ag-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ag-field > label {
  font: 400 var(--label)/1.3 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ag-field .ag-req { color: var(--state-error); text-transform: none; letter-spacing: 0; }
.ag-field__hint { font: 400 var(--body-sm)/1.5 var(--font-body); color: var(--ink-muted); max-width: var(--measure-caption); }

.ag-field input,
.ag-field select,
.ag-field textarea {
  font: 400 1rem/1.4 var(--font-body);
  color: var(--ink);
  min-height: var(--control-height);
  padding: 12px 14px;
  width: 100%;
  background: #FFFFFF;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--line-strong);
}
.ag-field textarea { min-height: 132px; resize: vertical; }
.ag-field input:focus-visible,
.ag-field select:focus-visible,
.ag-field textarea:focus-visible {
  border: 2px solid var(--forest);
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
.ag-field[data-invalid="true"] input,
.ag-field[data-invalid="true"] select,
.ag-field[data-invalid="true"] textarea { border-color: var(--state-error); }
.ag-field input[disabled], .ag-field select[disabled], .ag-field textarea[disabled] {
  background: var(--sand); color: var(--ink-quiet);
}

.ag-field__error {
  display: none;
  font: 400 var(--body-sm)/1.5 var(--font-body);
  color: var(--state-error);
  gap: var(--space-2);
  align-items: flex-start;
}
.ag-field[data-invalid="true"] .ag-field__error { display: flex; }
.ag-field__error::before { content: "\25B2"; }

.ag-check { display: flex; flex-direction: column; gap: var(--space-2); }
.ag-check__row { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--touch-min); }
.ag-check input {
  width: 22px; height: 22px; margin-top: 2px; flex: none;
  accent-color: var(--forest); border-radius: var(--radius-control);
}
.ag-check label { font: 400 var(--body)/1.5 var(--font-body); color: var(--ink); max-width: var(--measure-body); }
.ag-check .ag-req { color: var(--state-error); }

/* Named fieldsets — DS-19 (owner-amended). The visual header IS the legend. */
.ag-fieldset { border: 0; margin: var(--space-6) 0 0; padding: 0; }
.ag-fieldset > legend {
  font: 400 12px/1.3 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding: 0;
  width: 100%;
}
.ag-fieldset__rule { height: 1px; background: var(--line); margin-top: 10px; }
.ag-fieldset__body { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }

.ag-required-key { padding-bottom: var(--space-3); border-bottom: var(--border-control); }
.ag-required-key p { font: 400 var(--body-sm)/1.5 var(--font-body); color: var(--ink-muted); max-width: var(--measure-body); }

/* Error summary — at the top of the form on submit, focus moved to it. */
.ag-error-summary {
  display: none;
  border: 1.5px solid var(--state-error);
  border-radius: var(--radius-panel);
  background: var(--paper);
  padding: var(--space-5);
  flex-direction: column;
  gap: var(--space-3);
}
.ag-error-summary[data-visible="true"] { display: flex; }
.ag-error-summary > p { font: var(--weight-strong) var(--body-lg)/1.4 var(--font-body); color: var(--state-error); }
.ag-error-summary ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--space-2); list-style: disc; }
.ag-error-summary li { font: 400 var(--body)/1.5 var(--font-body); }
.ag-error-summary a { color: var(--state-error); }

/* Submission failure — the network told us no. Nothing has been lost. */
.ag-send-failed {
  display: none;
  border: 1.5px solid var(--state-error);
  border-radius: var(--radius-panel);
  background: var(--paper);
  padding: var(--space-5);
  flex-direction: column;
  gap: var(--space-2);
}
.ag-send-failed[data-visible="true"] { display: flex; }
.ag-send-failed > p:first-child { font: var(--weight-strong) var(--body-lg)/1.4 var(--font-body); color: var(--state-error); }
.ag-send-failed > p + p { font-size: var(--body-sm); color: var(--text-secondary); max-width: 60ch; }

/* Confirmation — DS-23. Replaces the form in place. No redirect, no modal,
   no green wash, no oversized tick. Says what happens next and roughly when. */
.ag-confirm {
  display: none;
  background: var(--paper);
  border: var(--border-control);
  border-radius: var(--radius-panel);
  padding: var(--space-7);
  flex-direction: column;
  gap: var(--space-4);
}
.ag-confirm[data-visible="true"] { display: flex; }
.ag-confirm__eyebrow {
  font: 400 var(--label)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ag-confirm__eyebrow::before { content: ""; width: var(--gold-mark-width); height: 1px; background: var(--gold); flex: none; }
.ag-confirm h2 {
  font: 400 var(--heading-1)/1.15 var(--font-display);
  color: var(--forest);
  margin: 0;
  max-width: var(--measure-opener);
  letter-spacing: var(--tracking-heading-1);
}
.ag-confirm__body { font: 400 var(--body)/1.65 var(--font-body); color: var(--ink-muted); max-width: var(--measure-body); display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 640px) { .ag-confirm { padding: var(--space-5); } }

/* Inline link — DS-22. Colour alone never marks a link. Always underlined. */
/* Standalone (a link on its own line) it is an action and takes a 44px target;
   inside prose it stays inline so it does not disturb the line box. */
.ag-inline-link { display: inline-flex; align-items: center; min-height: var(--touch-min); align-self: flex-start; color: var(--green-mid); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ag-inline-link:hover { color: var(--forest); text-decoration-thickness: 2px; }
p .ag-inline-link, li .ag-inline-link, span .ag-inline-link { display: inline; min-height: 0; align-self: auto; }
.on-forest .ag-inline-link { color: var(--cream); }
.on-forest .ag-inline-link:hover { color: var(--pale-green); }

/* Honeypot — present for a bot to fill, removed from the accessible tree and
   the tab order for everyone else. Not display:none, which bots skip. */
.ag-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* src/styles/v2/pages.css */
/* ==========================================================================
   AvailGolf — page layer
   The refined direction: a sand ground carrying rounded plates. Ported from
   the Claude Design screens, merged desktop + mobile into one responsive
   document per page.
   ========================================================================== */

.ag-page { background: var(--sand); }

.ag-main { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ag-main--flush { gap: 0; }

.ag-plate { border-radius: 32px; position: relative; }
.ag-plate--paper  { background: var(--paper); }
.ag-plate--forest { background: var(--forest); }

/* Standard plate padding, as used by every content plate in the design. */
.ag-plate__pad { padding: clamp(32px, 4.5vh, 72px) clamp(24px, 4vw, 72px); }
.ag-plate__pad--tall { padding: clamp(40px, 5.5vh, 88px) clamp(24px, 4vw, 72px); }

@media (max-width: 640px) {
  .ag-main { padding: 8px; }
  .ag-plate { border-radius: 24px; }
  .ag-plate__pad, .ag-plate__pad--tall { padding: var(--space-6) var(--space-5); }
}

/* Display type in this direction is Archivo 600, tightly tracked. Newsreader
   is held back for the one founder pull quote — a deliberate reversal of the
   usual roles, and the reason the page reads contemporary rather than heritage. */
.ag-display {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--forest);
  margin: 0;
}
.ag-display--hero { font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem); max-width: 15ch; }
.ag-display--page { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); line-height: 1.04; max-width: 20ch; }
.ag-display--section { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.04; max-width: 22ch; }
.ag-display--sm { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.06; letter-spacing: -0.025em; max-width: 22ch; }
.ag-display--stage { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.ag-display--tile { font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.14; letter-spacing: -0.02em; }
.ag-display--problem { font-size: clamp(1.875rem, 1.2rem + 2.1vw, 3rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 20ch; }
.on-forest .ag-display { color: var(--cream); }

.ag-lede { font-size: var(--body-lg); line-height: 1.5; color: var(--cream); max-width: 40ch; }
.ag-body-secondary { color: var(--text-secondary); }

/* Eyebrow with the rule trailing rather than leading — the hero and page
   openers in this direction put the gold mark after the label. */
.ag-eyebrow--trailing { display: flex; gap: var(--space-4); align-items: center; }
.ag-eyebrow--trailing::before { content: none; }
.ag-eyebrow--trailing .rule { height: 1px; width: 48px; background: var(--gold); }
.ag-eyebrow--gold { color: var(--gold); }

/* Mono label roles */
.ag-label {
  font: 400 var(--label)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.ag-label--gold { color: var(--gold-text); }
.ag-label--on-forest { color: var(--gold); }
.ag-label--loose { line-height: 1.5; }
.ag-note { font: 400 var(--label)/1.5 var(--font-mono); color: var(--ink-quiet); }
.on-forest .ag-note { color: var(--pale-green); }

/* --------------------------------------------------------------------------
   Hero
   Desktop: the photograph fills the plate, anchored on a fixed focal point,
   with a horizontal scrim carrying the type. Below 900px the plate inverts —
   copy first on forest, then the photograph as a band. Text never sits on an
   unscrimmed image at any width.
   -------------------------------------------------------------------------- */

.ag-hero { overflow: hidden; isolation: isolate; z-index: 1; }
.ag-hero__media { position: absolute; inset: 0; overflow: hidden; }
.ag-hero__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* The hero photograph, addressed by name. .ag-hero__frame > img is retained
   only so a cached page from an earlier build still styles its photograph;
   neither selector can reach the notification icon, which is nested deeper. */
.ag-hero__photo,
.ag-hero__frame > img { width: 100%; height: 100%; object-fit: cover; }
.ag-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(3,47,34,0.95) 0px, rgba(3,47,34,0.92) 400px, rgba(3,47,34,0.66) 610px,
    rgba(3,47,34,0.26) 770px, rgba(3,47,34,0.04) 900px, rgba(3,47,34,0) 1000px);
}
.ag-hero__inner {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 430px;
  padding: clamp(28px, 5vh, 76px) clamp(24px, 4vw, 72px);
}
.ag-hero__copy { display: flex; flex-direction: column; gap: var(--space-6); max-width: 560px; }

/* The notification: a real AvailGolf notification, drawn as a notification
   rather than photographed, sitting with the phone inside the frame so its
   relationship to the phone cannot drift with viewport width. */
.ag-note-card {
  position: absolute;
  left: var(--note-x, 56%);
  top: var(--note-y, 47%);
  width: 224px;
  transform: rotate(-1deg);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
  display: flex; gap: 8px;
  background: rgba(14,14,14,0.94);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px 12px 11px;
  font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
}
/* The app icon is its own layer. Every dimension is pinned, including the
   min/max pair, and the selector is deliberately two classes deep so it
   outranks any .ag-hero__frame img rule that might reach this element from
   another stylesheet. min-height is what previously blew this icon up to
   320px, so it is set here explicitly rather than left to inherit. */
.ag-note-card .ag-note-card__icon,
.ag-note-card > img {
  flex: 0 0 auto;
  width: 22px; min-width: 22px; max-width: 22px;
  height: 22px; min-height: 22px; max-height: 22px;
  aspect-ratio: 1;
  object-fit: cover;
  align-self: flex-start;
  border-radius: 6px;
  margin-top: 1px;
}
.ag-note-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-note-card__meta { font-size: 10px; line-height: 1.3; color: #b0b0b0; }
.ag-note-card__title { font-size: 12px; font-weight: 600; line-height: 1.3; color: #f3f3f3; white-space: nowrap; }
.ag-note-card__body { font-size: 11px; line-height: 1.35; color: #bdbdbd; }

/* Visibility on the desktop hero is decided against the plate's own width, not
   the window — see availgolf.js. The plate is what the notification is
   positioned inside, so it is what it should respond to. */

/* Below 900px the hero stops being a photographic plate and becomes a
   composed one: type on solid forest, photograph as a band beneath. */
@media (max-width: 899px) {
  /* Copy first on solid forest, photograph as a band beneath it — the
     mobile composition, not a squeezed desktop one. */
  .ag-hero { display: flex; flex-direction: column; }
  .ag-hero__inner { order: 1; min-height: 0; padding: var(--space-6) var(--space-5); }
  .ag-hero__media { order: 2; position: static; }
  .ag-hero__frame { position: relative; width: auto !important; height: auto !important; left: auto !important; top: auto !important; }
  /* The band keeps the photograph's own 16:9 so it is never cropped
     vertically, with a 320px floor so a phone still gets the approved
     depth and crops horizontally at the 56% focal instead. Without the
     floor a narrow band would be too shallow; without the ratio a tablet
     band would be too shallow for the frame and clip the top of his head. */
  .ag-hero__photo,
  .ag-hero__frame > img { height: auto; aspect-ratio: 16 / 9; min-height: 320px; object-position: 56% 48%; }
  .ag-hero__scrim { display: none; }
  .ag-hero__copy { max-width: none; gap: var(--space-4); }
  .ag-hero .ag-actions, .ag-hero .ag-actions__row { width: 100%; }
  .ag-hero .ag-actions__row { flex-direction: column; }
  .ag-hero .ag-btn { width: 100%; }
  /* A composed mobile placement, not scaled desktop coordinates. The card
     belongs beside the handset the golfer is reading, so availgolf.js places
     it from where the handset actually falls in the photograph rather than
     from the edges of the box. Below 900px the picture is an object-fit:
     cover image, so the visible crop shifts with width: a fixed offset from
     the box drifts away from the phone, which is what left it stranded in an
     empty corner. The values here are the no-script fallback, close to where
     the script puts it at common widths. Width still tracks the band, so the
     card holds the same share of the composition from 320px up. */
  .ag-note-card {
    display: flex;
    left: clamp(8px, 8%, 60px);
    right: auto;
    top: 24%;
    bottom: auto;
    width: min(56%, 176px);
    /* An explicit compact envelope. The card is sized by intent, not by
       whatever height its content happens to settle at, and it can never
       grow into the photograph however the text reflows. */
    min-height: 60px;
    max-height: 96px;
    box-sizing: border-box;
    overflow: hidden;
    align-items: flex-start;
    transform: none;
    padding: 8px 9px 9px;
    border-radius: 12px;
    gap: 7px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  }
  .ag-note-card .ag-note-card__icon,
  .ag-note-card > img {
    width: 18px; min-width: 18px; max-width: 18px;
    height: 18px; min-height: 18px; max-height: 18px;
    border-radius: 5px; margin-top: 0;
  }
  .ag-note-card__text { gap: 1px; }
  .ag-note-card__meta { font-size: 8.5px; }
  /* The title wraps here rather than being clipped — a notification that
     loses half its headline is worse than one that runs to two lines. */
  .ag-note-card__title { font-size: 9.5px; white-space: normal; }
  /* The message runs to three lines at 320px and two from 360px up. The
     clamp is a guard against a longer message growing the card into the
     photograph, not a crop of this one — nothing here is cut off. */
  .ag-note-card__body {
    font-size: 8.5px; line-height: 1.35;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Editorial rows — the split opener used by problem / how it works / outcomes
   -------------------------------------------------------------------------- */

.ag-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(24px, 3vw, 64px);
  align-items: end;
}
.ag-split--wide { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.ag-split--gap-lg { gap: var(--space-8); }
.ag-split__head { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 640px) { .ag-split { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Hairline-ruled columns. Not cards: no fill, no box, no shadow. */
.ag-rule-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.ag-rule-cols--wide { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.ag-rule-col {
  padding: clamp(20px, 2.6vh, 40px) clamp(20px, 2vw, 40px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ag-rule-col:first-child { padding-left: 0; }
.ag-rule-col:last-child { padding-right: 0; border-right: 0; }
@media (max-width: 780px) {
  .ag-rule-cols { grid-template-columns: 1fr; }
  .ag-rule-col {
    padding: var(--space-4) 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .ag-rule-col:last-child { border-bottom: 0; }
}

/* Numbered hairline list — trial facts, "what happens next", booking split */
.ag-facts { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ag-fact {
  display: grid;
  grid-template-columns: 4ch 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.ag-fact:last-child { border-bottom: 0; }
.ag-fact__n { font: 400 var(--label)/1.4 var(--font-mono); color: var(--gold-text); }
.ag-fact__t { font-family: var(--font-body); font-weight: var(--weight-strong); color: var(--forest); }
.ag-fact__d { font-size: var(--body-sm); color: var(--text-secondary); }
.ag-fact__stack { display: flex; flex-direction: column; gap: 4px; }
.on-forest .ag-facts, .on-forest .ag-fact { border-color: var(--line-forest); }
.on-forest .ag-fact__n { color: var(--gold); }
.on-forest .ag-fact__d { color: var(--text-on-forest-secondary); }

/* A labelled hairline pair — "In AvailGolf" / "In your club's system" */
.ag-pairs { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 46ch; }
.ag-pair { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.ag-pair:last-child { border-bottom: 0; }
.ag-pair span:last-child { color: var(--text-secondary); }

/* Trust strip — three true statements where a site would put a logo row */
.ag-trust {
  display: flex; flex-wrap: wrap;
  gap: var(--space-4) clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--line);
  padding-top: clamp(16px, 2.2vh, 28px);
}
.ag-trust p { font: 400 var(--label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-quiet); }
@media (max-width: 640px) { .ag-trust { flex-direction: column; gap: var(--space-2); } }

/* --------------------------------------------------------------------------
   How it works — four stages. On wide desktop they stack under the header
   with increasing offsets, so each stage settles on top of the one before.
   Below 1200px they are plain plates in sequence.
   -------------------------------------------------------------------------- */

.ag-stages { display: flex; flex-direction: column; padding: 0 clamp(24px, 4vw, 72px); }
.ag-stage {
  border-radius: 32px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  align-items: stretch;
  min-height: clamp(300px, 40vh, 400px);
  background: var(--paper);
}
.ag-stage--forest { background: var(--forest); }
.ag-stage__copy {
  padding: clamp(28px, 3.4vh, 52px) clamp(24px, 3vw, 56px);
  display: flex; flex-direction: column; gap: var(--space-4); justify-content: center;
}
.ag-stage__n { display: flex; align-items: baseline; gap: var(--space-4); }
.ag-stage__n span:first-child { font: 400 15px/1 var(--font-mono); letter-spacing: var(--tracking-label); color: var(--ink-quiet); }
.ag-stage--forest .ag-stage__n span:first-child { color: var(--gold); }
.ag-stage__n .rule { height: 1px; flex: 1; background: var(--line); }
.ag-stage--forest .ag-stage__n .rule { background: var(--line-forest); }
.ag-stage__copy p { color: var(--text-secondary); max-width: 44ch; }
.ag-stage--forest .ag-stage__copy p { color: var(--text-on-forest-secondary); }

.ag-stage__media {
  overflow: hidden;
  display: flex; justify-content: center; align-items: center;
  min-height: clamp(400px, 46vh, 470px);
  padding: clamp(16px, 2vh, 28px) clamp(24px, 3vw, 56px) clamp(28px, 3.4vh, 44px);
}
/* Product evidence — DS-05. Cropped to the meaningful region: no device
   bezels, no perspective, no floating mockups, no shadows. */
.ag-shot { flex: none; width: min(100%, 460px); overflow: hidden; border-radius: 14px; aspect-ratio: var(--shot-ar, 1.4); }
/* height:auto is load-bearing — the HTML height attribute is a presentational
   hint, and without this the capture is stretched to that pixel height. */
.ag-shot img { width: 100%; height: auto; }

@media (min-width: 1200px) {
  .ag-stage { position: sticky; }
  .ag-stage:nth-child(1) { top: 88px;  z-index: 1; }
  .ag-stage:nth-child(2) { top: 112px; z-index: 2; margin: 20px 0 0 16px; }
  .ag-stage:nth-child(3) { top: 136px; z-index: 3; margin: 20px 0 0 32px; }
  .ag-stage:nth-child(4) { top: 160px; z-index: 4; margin: 20px 0 0 48px; }
}
@media (max-width: 1199px) {
  .ag-stages { gap: 8px; padding: 0; }
  .ag-stage { grid-template-columns: 1fr; min-height: 0; border-radius: 24px; }
  .ag-stage__media { min-height: 0; padding: 0 var(--space-5) var(--space-5); justify-content: flex-start; }
  /* The approved mobile design uses the same crop ratios as desktop, so the
     shot only widens — the aspect ratio is not retuned. */
  .ag-stage .ag-shot { width: 100%; }
}

/* --------------------------------------------------------------------------
   Founder — the one place Newsreader appears, on the pull quote
   -------------------------------------------------------------------------- */

.ag-founder { overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: stretch; }
.ag-founder__portrait { min-height: clamp(360px, 56vh, 520px); }
.ag-founder__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.ag-founder__copy {
  padding: clamp(36px, 5vh, 88px) clamp(24px, 4vw, 72px);
  display: flex; flex-direction: column; gap: clamp(14px, 2vh, 24px); justify-content: center;
}
.ag-quote { font-family: var(--font-display); font-size: var(--body-lg); line-height: 1.45; color: var(--cream); max-width: 46ch; }
@media (max-width: 780px) {
  .ag-founder { grid-template-columns: 1fr; }
  .ag-founder__portrait { min-height: 0; height: 320px; }
  .ag-founder__portrait img { object-position: 50% 22%; }
  .ag-founder__copy { padding: var(--space-6) var(--space-5); }
}

/* --------------------------------------------------------------------------
   Form pages — the two-column shell shared by contact and trial application
   -------------------------------------------------------------------------- */

.ag-form-layout { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 72px); align-items: flex-start; }
.ag-form-layout__main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.ag-form-layout__aside {
  flex: 1 1 300px; min-width: 0; max-width: 400px;
  position: sticky; top: 96px; align-self: flex-start;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.ag-aside-block { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.ag-aside-block > p:first-of-type { font-family: var(--font-body); font-weight: var(--weight-strong); color: var(--forest); }
.ag-aside-block p { font-size: var(--body-sm); color: var(--text-secondary); max-width: 40ch; }
@media (max-width: 900px) { .ag-form-layout__aside { position: static; max-width: none; } }

.ag-form { display: flex; flex-direction: column; gap: var(--space-2); }
.ag-form__submit {
  display: flex; flex-direction: column; gap: var(--space-4);
  margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line);
}
.ag-form__submit-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.ag-form__submit-row .ag-btn { min-width: 240px; }
.ag-form__submit-row p { font: 400 var(--label)/1.5 var(--font-mono); color: var(--ink-quiet); max-width: 34ch; }
@media (max-width: 480px) { .ag-form__submit-row .ag-btn { min-width: 0; width: 100%; } }

/* Radio choice cards — real radios, not a segmented control */
.ag-choice { display: flex; flex-direction: column; gap: var(--space-3); }
.ag-choice label {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  min-height: 44px;
}
.ag-choice label:hover { border-color: var(--forest); }
.ag-choice input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--forest); flex: none; }
.ag-choice__text { display: flex; flex-direction: column; gap: 2px; }
.ag-choice__text strong { font-family: var(--font-body); font-weight: var(--weight-strong); color: var(--forest); }
.ag-choice__text span { font-size: var(--body-sm); color: var(--text-secondary); }

/* Day checkboxes */
.ag-days { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ag-days label {
  display: flex; gap: var(--space-3); align-items: center;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  min-height: 44px;
}
.ag-days input { width: 20px; height: 20px; accent-color: var(--forest); }
.ag-days legend {
  font: 400 var(--label)/1.3 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: 0;
}
.ag-days legend .opt { text-transform: none; letter-spacing: 0; }

@media (max-width: 479px) {
  .ag-actions__row { flex-direction: column; width: 100%; }
  .ag-actions__row .ag-btn { width: 100%; }
}

/* Reveal — one-shot settle on first entry. Markup renders fully visible
   first, so a JS failure costs nothing. */
[data-stage] { transition: opacity 220ms var(--ease-entrance); }
@media (prefers-reduced-motion: reduce) { [data-stage] { opacity: 1 !important; transition: none; } }

/* The How It Works opener sits directly on the sand ground rather than on a
   plate, so its eyebrow needs the sand-measured value — see colors.css. */
.ag-page > .ag-main > section:not(.ag-plate) .ag-eyebrow { color: var(--text-eyebrow-on-sand); }

/* --------------------------------------------------------------------------
   Legal and transparency template
   Same chrome, same type scale, same form language as every other page —
   a second visual system for legal pages is exactly the defect this closes.
   -------------------------------------------------------------------------- */

.ag-legal__intro { display: flex; flex-direction: column; gap: var(--space-5); }

.ag-legal__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-forest);
}
.ag-legal__meta div { min-width: 150px; }
.ag-legal__meta dt {
  font: 400 var(--label)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.ag-legal__meta dd { margin: 0; font-size: var(--body-sm); color: var(--text-on-forest-secondary); }

.ag-legal { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 72px); align-items: flex-start; }
.ag-legal__toc { flex: 1 1 260px; min-width: 0; max-width: 340px; position: sticky; top: 96px; align-self: flex-start; }
.ag-legal__body { flex: 1 1 560px; min-width: 0; }

.ag-toc { margin-top: var(--space-4); border-top: 1px solid var(--line); }
.ag-toc li { border-bottom: 1px solid var(--line); }
.ag-toc a {
  display: flex; gap: var(--space-4); align-items: baseline;
  min-height: var(--touch-min);
  padding: var(--space-3) 0;
  font-size: var(--body-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: var(--weight-body);
}
.ag-toc a:hover { color: var(--forest); }
.ag-toc__n { font-variant-numeric: tabular-nums; color: var(--gold-text); flex: none; min-width: 2ch; }

.ag-legal__section { padding-top: var(--space-7); scroll-margin-top: 96px; }
.ag-legal__section:first-child { padding-top: 0; }
.ag-legal__h {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--forest);
  margin: 0 0 var(--space-4);
  display: flex; gap: var(--space-4); align-items: baseline;
}
.ag-legal__n {
  font: 400 var(--label)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.ag-legal__section p { color: var(--text-secondary); margin-bottom: var(--space-4); }
.ag-legal__section p:last-child { margin-bottom: 0; }
.ag-legal__list { margin-bottom: var(--space-4); border-top: 1px solid var(--line); max-width: var(--measure-body); }
.ag-legal__list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--body-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}
.ag-legal__back { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1.5px solid var(--line-strong); }

@media (max-width: 900px) {
  .ag-legal__toc { position: static; max-width: none; flex-basis: 100%; }
  .ag-legal__body { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   Product gallery — a row of member-facing screens with captions written to
   the club, about the member. DS-05: cropped to the meaningful region, no
   bezels, no perspective, no shadows.
   -------------------------------------------------------------------------- */

.ag-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  margin-top: clamp(28px, 3.5vh, 56px);
}
.ag-shot-item { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.ag-shot-item .ag-shot { width: 100%; }
.ag-shot-item figcaption { display: flex; flex-direction: column; gap: var(--space-2); }
.ag-shot-item .ag-label { color: var(--gold); }
.ag-shot-item p { font-size: var(--body-sm); line-height: 1.6; color: var(--text-on-forest-secondary); margin: 0; }

/* A capture that has not been supplied yet states so, rather than rendering
   as a broken image. Disappears on its own once the file exists. */
.ag-shot[data-pending="true"] {
  display: flex; align-items: center; justify-content: center;
  background: var(--sand);
  border: 1.5px dashed var(--line-strong);
}
.ag-shot[data-pending="true"] img { display: none; }
.ag-shot[data-pending="true"]::after {
  content: "Capture pending";
  font: 400 var(--label)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-align: center;
  padding: var(--space-4);
}