/* site.css
 * 18 Oct 2026 v24
 *
 * v24 — WEB-CLAIMS. .persona-card__quote becomes .persona-card__want
 *   (upright, not italic: a plain sentence about a made-up person, not a
 *   quotation); .persona-card__narrative removed with the invented
 *   stories it styled; .persona-intro--note for the line saying the
 *   people are made up; the comparison table's scroll area shows focus.
 *   Home: .belonging__voices styles list items, not blockquotes (the
 *   lines are no longer quotations). .a11y-statement for the new
 *   /accessibility/ page. On a phone the comparison's row names wrap so
 *   the Plan column is on screen.
 *
 * v23 — NAME-1. .tier-tag--personal renamed .tier-tag--plan. The paid
 *   tier is "the Plan" across the product family from 18 Aug; the app
 *   shipped the rename the same day (js/auth.js v2) and a public site
 *   saying "Personal" beside an app saying "Plan" is two names for one
 *   tier, which is exactly what that decision existed to prevent.
 *
 * 10 Aug 2026 v22
 *
 * v22 — About page built. New .about block at the end of this file.
 *   Deliberately the plainest styling on the site: no emphasis colours,
 *   no dividers, no cards, per the locked design note that this page
 *   carries no coach voice and no Alongside design language beyond the
 *   wordmark. Every modifier scoped as `.about .about__x` from the
 *   outset, applying the v21 lesson rather than repeating it.
 *   .about__photo is defined but unused — the founder photograph does
 *   not exist yet and no placeholder image was added.
 * v21 — REAL BUG FIX, found by Graeme on device. Every paragraph-level
 *   emphasis rule on the philosophy page has been silently losing to the
 *   body-text rule since v19. `.philosophy p` is specificity 0,1,1 (one
 *   class + one element); `.philosophy__question` and friends are 0,1,0
 *   (one class). The body rule therefore won on colour, font-size AND
 *   margin — so the question, the turn, the declaration, the landing
 *   lines and the close all rendered as plain white body text at body
 *   size with body spacing. The page has been a flat wall of uniform
 *   prose since it shipped. The Impact link looked correct only by
 *   coincidence: `a` is teal site-wide from the base stylesheet, so it
 *   was never evidence the page styles were applying. Fixed by scoping
 *   all seven modifiers as `.philosophy .philosophy__x` (0,2,0), which
 *   beats 0,1,1. No visual design changed in this version — v19 and v20
 *   are simply visible for the first time.
 *   Worth carrying forward: a `.block element` base rule will outrank
 *   every single-class modifier inside that block. Either scope the
 *   modifiers or do not set colour/size/margin on the element selector.
 * v20 — Philosophy page emphasis pass, per Graeme. Two changes:
 *   (a) Power statements unified — all five now bold and teal. Beat 7's
 *   close ("helped you Move") was the only one still white; it is now
 *   teal like the rest, and turn/declaration/landing/close all move from
 *   semibold to bold. Deliberately NOT extended further ("Something
 *   happens when you feel understood", "Not fixed. Not solved.
 *   Understood.") — if six or seven lines are teal, none of them read as
 *   emphasis any more, they just become a second body colour.
 *   (b) New divider between beats: 60px centred teal rule. Graeme asked
 *   for gold; recommended against and agreed. Gold is the Personal-tier
 *   marker across every product, and this is the page carrying the
 *   belief that "everyone deserves world-class support. Not a cut-down
 *   version. Not a basic tier." The paid-tier colour on that page
 *   undercuts the claim it is making. Same reasoning as the 03 Aug
 *   coach-bubble decision, where gold was rejected for a free/universal
 *   element and teal chosen. Spacing rebalanced space-12 -> space-10
 *   above and below the mark, so the total pause grows slightly rather
 *   than doubling.
 * v19 — Philosophy page built (first new page since /upgrade/ and
 *   /who-its-for/ on 03 Aug). New .philosophy block at the end of this
 *   file. Deliberately looser vertical rhythm than anywhere else on the
 *   site — space-12 between beats, space-12/space-10 around Beat 1's
 *   question — because the locked page architecture treats white space
 *   as content, not decoration ("more than feels comfortable. The pause
 *   is part of the meaning"). Measure narrowed to 34rem for this page
 *   only: it is pure prose with no cards or tables, so the 640px
 *   container used elsewhere runs too wide to read comfortably. No
 *   animation defined anywhere in this block, per Beat 1's design note
 *   and the page's own WCAG requirements. Colours used: --color-text
 *   (14.48:1 on bg-deep) for prose, --color-primary-light teal
 *   (12.07:1) for the question, turn, declaration and landing lines.
 *   Gold deliberately not used anywhere on this page — it is the
 *   Personal-tier marker site-wide and nothing on the philosophy page
 *   is tier-gated.
 * v18 — Teal splash pass, per Graeme's request to review where teal
 *   headings could add colour across the site: h2 is now teal by
 *   default site-wide (was inheriting plain white). h1 stays white/full
 *   weight for primary hierarchy; gold stays reserved for Personal-tier
 *   signalling specifically, not general headings. .three-ways__title
 *   also teal, per explicit instruction.
 * v17 — Comparison table polish per Graeme's feedback: column headers
 *   bigger (text-lg -> text-xl) with a header divider; row headers
 *   ("Sessions", "Exercise library" etc.) now text-secondary, visually
 *   distinct from the data cells' full-white text; added subtle
 *   vertical dividers between columns alongside the existing row
 *   dividers, for a fuller grid feel without going full-spreadsheet.
 * v16 — Community page "Three ways" reworked from three bare words into
 *   real explanatory content, per Graeme's flag (raised earlier, not
 *   actioned until now). Each item now has a title + one line of real
 *   meaning; "Share the impact" gets an actual working mechanism (copy-
 *   link button, see js/community.js) instead of being just a phrase —
 *   deliberately not a named social platform or an ambassador/referral-
 *   code system, neither of which exist as decided features yet.
 * v15 — Comparison table: Free header now teal, Personal gold, both
 *   bigger (text-lg, bold) per Graeme's feedback the headings were too
 *   quiet. Row labels converted from styled <td> to semantic
 *   <th scope="row"> (accessibility fix — screen readers now announce
 *   "Sessions, Free: ..." correctly; previously the row label had no
 *   programmatic association with its data cells at all, a real gap,
 *   not just a styling one). Persona-card body text (the "what's hard"/
 *   "how it helps" lists) moved from text-secondary to full text colour
 *   — was passing at 5.12:1 on bg-card, genuinely the narrowest-margin
 *   pass on the site (everywhere else is 7:1+); now 8.40:1. New
 *   .tier-tag (--free teal / --personal gold) and .persona-card__narrative
 *   for the persona restructuring in this version.
 * v14 — Gold token lightened, per Graeme's feedback that it read as
 *   "dirty and dark" on the black background: --color-gold #B8970A ->
 *   #D4AF37 (classic web gold). This is a global token so it ripples
 *   through everywhere gold is used (text-gold, btn--gold, pricing
 *   figures, comparison-table header) — checked, every usage improves
 *   (text-inverse on the new gold button bg: 8.49:1, was 6.35:1; text
 *   on bg-card: 4.92:1, was 3.68:1). New: .upgrade-product-label,
 *   .pricing-note__standout (subscription line now its own line),
 *   .product-card__details-link.
 * v13 — New /who-its-for/ page section added: persona-intro,
 *   persona-card (reuses .card + .coach-tabs__* tab pattern from the
 *   home page for the persona tabs), and a real comparison-table for
 *   Free vs Personal (Move only — the only product with a confirmed
 *   split). Personal-tier column header goldened, matching the same
 *   convention as the upgrade page.
 * v12 — Upgrade-page colour/interest pass, per Graeme's critique that the
 *   page read as flat. New utility classes .text-gold, .text-teal.
 *   Gold applied to "Personal tier" mentions and the four "what changes"
 *   lead phrases. New .upgrade-wellbeing-note (teal) — safety/wellbeing
 *   features are confirmed always-free per the freemium model doc, so
 *   this claim is grounded, not just reassuring copy. Pricing note
 *   given real visual weight via new .pricing-note--emphasis (card
 *   treatment, larger text) instead of small quiet text underneath the
 *   cards. Contrast: gold 6.35:1 / 5.2:1 on bg-deep/bg, teal 12.07:1 /
 *   9.89:1 — both pass with wide margin in every context used here.
 * v11 — /upgrade page built for the first time, from the confirmed
 *   locked architecture (alongside_upgrade_page_architecture_09jul2026_v1).
 *   New section added: upgrade-hero, upgrade-changes, pricing-cards,
 *   .btn--gold. Gold (#B8970A) used for price figures and the CTA
 *   button, matching the confirmed "Personal tier gold accent" rule —
 *   text-inverse on gold gives 6.35:1, comfortably clears 4.5:1.
 *   Cache-busting fix: every page's site.css?v= bumped to match this
 *   version (they'd drifted to ?v=7 while the stylesheet moved to v10
 *   across the earlier fixes this session — a real bug, browsers/CDN
 *   could have kept serving the stale v7 file under the old query
 *   string indefinitely).
 * v10 — coach-bubble__context colour changed from --color-text-muted
 *   (4.67:1 on bg-card — technically AA-passing but Graeme flagged it
 *   as "close for comfort") to --color-primary-light teal (7.00:1),
 *   per mockup review. Deliberately not gold: gold is reserved as the
 *   paid-tier marker across the whole product family, and this element
 *   is free/universal — using it here would create a false tier signal.
 * v9 — Scroll-arrow repositioning, per live-screenshot review. The arrow
 *   was position:absolute, bottom: var(--space-5) — pinned to the very
 *   bottom of the ~100vh hero section, disconnected from the Pause
 *   button which sits mid-flow in the centred flex column. On tall
 *   viewports this put real distance between them, and the arrow read
 *   as lost/disconnected rather than as a "scroll for more" cue tied to
 *   the visible content above it. Removed the absolute positioning;
 *   it's now a normal flex child directly after .hero__rotator-controls
 *   (Pause), picking up the hero's existing --space-6 (32px) gap like
 *   every other hero element — sits close to Pause, not orphaned at
 *   the bottom of the section.
 * v8 — WCAG 2.2 AA contrast audit. (1) Confirmed fail: hero scroll-arrow
 *   (.hero__scroll-signal) was ~1.6:1 against its background (--color-border
 *   at 0.6 opacity) vs the 3:1 minimum for graphical objects (SC 1.4.11).
 *   Switched to --color-text-muted at 0.85 opacity — 6.14:1, real margin.
 *   (2) Same root cause found on 5 more functional element borders that
 *   rely on --color-border to convey a UI component's boundary (nav
 *   layout-toggle, nav hamburger-toggle, .btn--ghost, .form-input,
 *   hero__pause) — --color-border measures 1.15–2.36:1 against every
 *   background token in this system, never clears 3:1 anywhere. All six
 *   switched to --color-text-muted, which clears 3:1 against all four
 *   background tokens (3.91:1 worst case, on --color-bg-hover).
 *   --color-border itself is left unchanged for decorative use (e.g. the
 *   Home photo-placeholder dashed border, out of scope this session).
 *   (3) New finding: .badge--live/.badge--soon text-vs-background fell as
 *   low as 3.24:1 (needs 4.5:1) when rendered inside a .card (bg-card) —
 *   the 15%-alpha tinted background was context-dependent and never
 *   verified against a card context. Fixed by making all three badge
 *   variants use a solid var(--color-bg-deep) background instead of a
 *   blended rgba() one — now opaque and background-independent, 6.96–
 *   10.69:1 in every context. (4) Checked, no fix needed: --color-border-
 *   light (decorative dividers only, SC 1.4.11 doesn't apply); focus
 *   indicator --color-border-focus (9.59:1 down to 4.66:1 worst case,
 *   already clears everywhere); disabled cause-card__vote inputs (gold
 *   border at 1.95:1 vs 3:1, but WCAG 2.2 explicitly exempts disabled/
 *   non-interactive controls from SC 1.4.11 — confirmed genuinely and
 *   permanently disabled in markup, no JS toggles it). Full ratios in
 *   session summary.
 * v7 — Fix: desktop container was only 720px, leaving huge dead space on
 *   real desktop screens (Graeme flagged with screenshots — ~600px waste
 *   each side at wide viewports). Container now 1100px; every top-level
 *   section narrows itself to a centred 760px reading column by default;
 *   grid-holding sections opt out via a new .section-wide class (added
 *   to Products' card section and Impact's causes section) to use the
 *   full width. Nav/footer widened to match. A few previously-unconstrained
 *   elements (Home's photo placeholder/text, Impact's vote-hint) given
 *   their own max-width so they don't stretch edge-to-edge.
 * v6 — 20 Jul 2026. Fix: on desktop's 3-col cause-card grid, cards with a 2-line
 *   heading (e.g. Slot 2) pushed their credits-input row lower than the
 *   1-line cards either side, breaking the visual line across all three.
 *   .cause-card__vote now pinned to the bottom of each card (margin-top:
 *   auto) so the row aligns regardless of heading/body text length.
 * v5 — Additive only, Website Build 2 (20 Jul): Impact page section added
 *   (cause cards, gold accent token, empty-state, anchor link). No
 *   existing rules from v4 changed or restructured, per blueprint.
 * v4 — 14 Jul 2026. Responsive layout added: real desktop breakpoint (content width,
 *   Products 3-col grid) plus manual layout override support. Nav
 *   show/hide rules converted from raw @media(max-width:480px) to
 *   [data-layout] attribute selectors (see js/layout.js) so the manual
 *   toggle can actually override the real viewport, not just respond to
 *   it. Added .site-nav__controls and .site-nav__layout-toggle styles.
 * v3 — Phone-test fixes: hero headline lines were inline spans that ran
 *   together (now block-level, more spacing), hero pause button
 *   overlapped the rotating text (moved to its own row below), hero
 *   headline sized up for impact (text-2xl -> text-4xl), Three Ways
 *   section was centre-aligned against a left-aligned page (now
 *   consistent). Added .hero__tagline for the new product-explainer line.
 * v2 — Home page brought into scope this session. Added Home-page-specific
 *   section (Movements 1-8) below the Community section. Shared shell,
 *   Products, and Community styles unchanged.
 * v1 — Initial. Shared shell, Products, Community.
 *
 * Alongside — website shared stylesheet.
 * Design tokens ground-truthed against the live app's base/variables.css
 * (Midnight Teal system) on 14 Jul 2026 — do not reintroduce the older
 * #0B0B1A / #2E7D7D or #0A1120 / #0D9488 values from superseded planning docs.
 *
 * Shared by every page. Page-specific styles stay in this file under a
 * clearly commented section per page — do not fork into per-page stylesheets.
 */

/* ========================================
   DESIGN TOKENS — matched to live app
   ======================================== */

:root {
  /* Background layers */
  --color-bg-deep: #0F172A;
  --color-bg: #1E293B;
  --color-bg-card: #334155;
  --color-bg-hover: #3E4C63;

  /* Text */
  --color-text: #E2E8F0;
  --color-text-secondary: #A8B8CC;
  --color-text-muted: #A0B0C0;
  --color-text-inverse: #0F172A;

  /* Primary accent — electric teal */
  --color-primary: #2DD4BF;
  --color-primary-light: #5EEAD4;
  --color-primary-dark: #2DD4BF;
  --color-primary-glow: rgba(45, 212, 191, 0.2);

  /* Secondary accent — cyan */
  --color-secondary: #22D3EE;

  /* Semantic */
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #FB7185;
  --color-info: #60A5FA;

  /* Borders */
  --color-border: #475569;
  --color-border-light: #334155;
  --color-border-focus: #2DD4BF;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.02em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 100ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --nav-height: 64px;
  --content-max-width: 640px;
  --content-padding: var(--space-5);
  --touch-target-min: 44px;

  /* Z-index */
  --z-nav: 100;
  --z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-spring: 0ms;
  }
}

@media (prefers-contrast: high) {
  :root {
    --color-text: #FFFFFF;
    --color-border: #94A3B8;
    --color-primary: #5EEAD4;
  }
}

/* ========================================
   RESET & BASE
   ======================================== */

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

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

body {
  margin: 0;
  background: var(--color-bg-deep);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary-light);
}

h1, h2, h3, p, ul, ol {
  margin: 0 0 var(--space-4) 0;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-primary-light);
}

/* Visible keyboard focus everywhere — WCAG 2.2 AA */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--font-semibold);
  z-index: var(--z-toast);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-3);
}

/* ========================================
   LAYOUT / CONTAINER
   ======================================== */

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

main {
  display: block;
  padding-top: var(--space-8);
  padding-bottom: var(--space-10);
}

section + section {
  margin-top: var(--space-8);
}

/* ========================================
   NAV
   ======================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-border-light);
}

.site-nav__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav__brand {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

.site-nav__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-text);
}

.site-nav__link[aria-current="page"] {
  color: var(--color-primary-light);
  border-bottom-color: var(--color-primary);
}

.site-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__layout-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  cursor: pointer;
}

.site-nav__layout-toggle:hover,
.site-nav__layout-toggle:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.site-nav__toggle {
  display: none;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  background: transparent;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}

/* Layout-mode driven nav — see js/layout.js. Auto-detects viewport via
   matchMedia by default; the [data-layout] attribute is what actually
   drives these rules so a manual override truly overrides the viewport,
   not just raw @media width (which can't be forced by JS). */

html[data-layout="mobile"] .site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-layout="desktop"] .site-nav__toggle {
  display: none;
}

html[data-layout="mobile"] .site-nav__links {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-border-light);
  display: none;
}

html[data-layout="mobile"] .site-nav__links.is-open {
  display: flex;
}

html[data-layout="mobile"] .site-nav__link {
  padding: var(--space-4) var(--content-padding);
  width: 100%;
  border-bottom: 1px solid var(--color-border-light);
}

html[data-layout="mobile"] .site-nav__link[aria-current="page"] {
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg);
}

html[data-layout="desktop"] .site-nav__links {
  display: flex;
  position: static;
  background: transparent;
  border-bottom: none;
}

/* Desktop breakpoint — content width and Products/Impact grids.
   FIX 21 Jul: container was only 720px, leaving huge dead space on real
   desktop screens (flagged by Graeme with screenshots showing ~600px of
   waste on each side at ~1900px viewport width). Container is now
   genuinely wide; individual prose sections narrow and centre themselves
   within it so reading lines don't get absurdly long, while grid
   sections (marked .section-wide) use the full width. */

html[data-layout="desktop"] .container {
  max-width: 1100px;
}

html[data-layout="desktop"] .site-nav__inner,
html[data-layout="desktop"] .site-footer__inner {
  max-width: 1100px;
}

/* Every top-level section is a narrow, centred reading column by
   default on desktop. Sections that hold a card grid opt out via
   .section-wide to use the full container width instead. */
html[data-layout="desktop"] .container > section {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

html[data-layout="desktop"] .container > section.section-wide {
  max-width: none;
}

html[data-layout="desktop"] .product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

html[data-layout="desktop"] .product-cards .product-card {
  margin-bottom: 0;
}

html[data-layout="desktop"] .hero__headline,
html[data-layout="desktop"] .hero__tagline {
  max-width: none;
}

/* Elements that previously had no max-width of their own and would
   otherwise stretch edge-to-edge inside a wide desktop container. */
html[data-layout="desktop"] .human-behind__photo {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

html[data-layout="desktop"] .human-behind__text {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

html[data-layout="desktop"] .section-wide > .form-hint {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ========================================
   IMPACT PAGE
   Added 20 Jul 2026 — Website Build 2.
   Gold accent introduced here for the first time on the website (used
   sparingly, per the design system rule — vote-related elements only).
   ======================================== */

:root {
  --color-gold: #D4AF37;
}

.anchor-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.anchor-link a {
  color: var(--color-text-muted);
}

.anchor-link a:hover,
.anchor-link a:focus-visible {
  color: var(--color-text);
}

.impact-opening {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.impact-commitment,
.impact-your-credits {
  line-height: var(--leading-relaxed);
}

.impact-your-credits h2 {
  color: var(--color-gold);
}

.impact-empty-state {
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
}

.cause-cards {
  display: grid;
  gap: var(--space-5);
}

.cause-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cause-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cause-card__slot {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.cause-card__belief {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0;
}

.cause-card__body {
  color: var(--color-text-secondary);
  margin: 0;
}

.cause-card__vote {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  margin-top: auto;
  border-top: 1px solid var(--color-border-light);
}

.cause-card__vote .form-input:disabled {
  border-color: var(--color-gold);
  opacity: 0.5;
}

html[data-layout="desktop"] .cause-cards {
  grid-template-columns: repeat(3, 1fr);
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-6) 0 var(--space-8) 0;
}

.site-footer__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
}

.site-footer__links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-footer__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-text);
}

.site-footer__link[data-coming-soon]::after {
  content: " (coming soon)";
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.site-footer__copy {
  width: 100%;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-light);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
}

.btn--disabled,
.btn[aria-disabled="true"] {
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ========================================
   CARDS
   ======================================== */

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--live {
  background: var(--color-bg-deep);
  color: var(--color-success);
}

.badge--soon {
  background: var(--color-bg-deep);
  color: var(--color-info);
}

.badge--pending {
  background: var(--color-bg-deep);
  color: var(--color-warning);
}

/* ========================================
   FORMS
   ======================================== */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.form-input {
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--text-base);
}

.form-input:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.form-note {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ========================================
   PRODUCTS PAGE
   ======================================== */

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.product-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.product-card__name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin: 0;
}

.product-card__body {
  color: var(--color-text-secondary);
  margin: 0;
}

.vision-line {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--space-6) 0;
}

.vision-line__names {
  color: var(--color-text);
  font-weight: var(--font-medium);
  margin-top: var(--space-2);
}

.close-statement {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  padding: var(--space-6) 0;
}

/* ========================================
   COMMUNITY PAGE
   ======================================== */

.charter {
  display: grid;
  gap: var(--space-5);
}

.charter__group h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2) 0;
}

.charter__group--belongs h3 {
  color: var(--color-success);
}

.charter__group--doesnt h3 {
  color: var(--color-danger);
}

.charter__group p {
  color: var(--color-text-secondary);
  margin: 0;
}

.three-ways {
  display: grid;
  gap: var(--space-4);
}

.three-ways__item {
  padding: var(--space-4);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
}

.three-ways__title {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  color: var(--color-primary-light);
  margin: 0 0 var(--space-2) 0;
}

.three-ways__body {
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3) 0;
}

.three-ways__body:last-child {
  margin-bottom: 0;
}

.three-ways__share-status {
  font-size: var(--text-sm);
  color: var(--color-primary-light);
  margin: var(--space-2) 0 0 0;
  min-height: 1.2em;
}

.join-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.join-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.join-panel__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .join-panel__row {
    flex-direction: row;
    align-items: flex-end;
  }

  .join-panel__row .form-field {
    flex: 1;
  }
}

/* ========================================
   HOME PAGE
   Added 14 Jul 2026 — Home brought into scope this session.
   Photo (Movement 6) and mailing-list capture (Movement 8) are
   placeholders — see build notes in home/index.html.
   ======================================== */

/* Movement 1 — The Gates */

.hero {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  position: relative;
  padding-bottom: var(--space-10);
}

.hero__headline {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 360px;
}

.hero__headline-line {
  display: block;
}

.hero__headline-line + .hero__headline-line {
  margin-top: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.hero__tagline {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  max-width: 320px;
}

.hero__rotator {
  position: relative;
  min-height: 3.5em;
  width: 100%;
  max-width: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__rotator-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  opacity: 0;
  transition: opacity var(--transition-slow, 600ms ease-out);
}

.hero__rotator-line.is-active {
  opacity: 1;
}

.hero__rotator-controls {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
}

.hero__pause {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-xs);
}

.hero__pause:hover,
.hero__pause:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.hero__scroll-signal {
  width: 24px;
  height: 24px;
  border-bottom: 2px solid var(--color-text-muted);
  border-right: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .hero__rotator-line {
    transition: none;
  }
}

/* Movement 2 — You Are Not Alone */

.belonging {
  text-align: center;
}

.belonging__truth {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 400px;
  margin: 0 auto var(--space-6) auto;
}

.belonging__voices {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.belonging__voices-lead {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.belonging__voices li {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
  color: var(--color-text-secondary);
}

/* Movement 3 — Main Street */

.value-statements {
  display: grid;
  gap: var(--space-7);
}

.value-statement {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  max-width: 380px;
}

/* Movement 4 — The First Ride */

.coach-preview__framing {
  text-align: center;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.coach-tabs__list {
  display: flex;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-5);
}

.coach-tabs__tab {
  flex: 1;
  min-height: var(--touch-target-min);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
}

.coach-tabs__tab[aria-selected="true"] {
  color: var(--color-primary-light);
  border-bottom-color: var(--color-primary);
}

.coach-tabs__panel {
  display: grid;
  gap: var(--space-3);
}

.coach-tabs__panel[hidden] {
  display: none;
}

.coach-bubble {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-sm);
  padding: var(--space-4);
  max-width: 90%;
}

.coach-bubble__context {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-primary-light);
  margin-bottom: var(--space-2);
}

.coach-bubble__message {
  margin: 0;
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* Movement 5 — Behind the Magic */

.science-accordion {
  display: grid;
  gap: var(--space-3);
}

.science-accordion__item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
}

.science-accordion__item summary {
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: var(--font-medium);
  list-style: none;
}

.science-accordion__item summary::-webkit-details-marker {
  display: none;
}

.science-accordion__chevron {
  transition: transform var(--transition-normal);
  color: var(--color-text-muted);
}

.science-accordion__item[open] .science-accordion__chevron {
  transform: rotate(90deg);
}

.science-accordion__body {
  padding: var(--space-3) 0 var(--space-4) 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.science-accordion__source {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.science-accordion__reflection {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
}

.science-sources-note {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

/* Movement 6 — The Human Behind It */

.human-behind__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  background: var(--color-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.human-behind__text p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.human-behind__turn {
  color: var(--color-text);
  font-weight: var(--font-medium);
}

/* Movement 7 — The Castle */

.castle__philosophy {
  text-align: center;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.castle__impact {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  text-align: center;
  line-height: var(--leading-relaxed);
}

.castle__door {
  margin-top: var(--space-6);
  text-align: center;
  display: grid;
  gap: var(--space-2);
}

.castle__door-lead {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.castle__door-link {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

/* Movement 8 — The Gates Close Behind Her */

.closing-capture {
  text-align: center;
  padding: var(--space-8) 0;
}

.closing-capture__lead {
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

.closing-capture__form {
  display: grid;
  gap: var(--space-4);
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
}

.closing-capture__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
}

.closing-capture__consent input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
}

.closing-capture__consent label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.closing-capture__after {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ========================================
   UPGRADE PAGE
   ======================================== */

.upgrade-hero {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-6) 0;
}

.upgrade-product-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-3) 0;
}

.pricing-note__standout {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-lg);
}

.upgrade-hero__opening,
.upgrade-hero__shift {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
}

.upgrade-changes {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-6) 0;
}

.upgrade-changes__item {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-align: center;
  margin: 0;
}

.upgrade-commitment {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-6) 0;
  color: var(--color-text-secondary);
}

.upgrade-commitment p {
  margin: 0 0 var(--space-2) 0;
}

.pricing-section {
  padding: var(--space-6) 0;
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 480px;
  margin: 0 auto var(--space-6) auto;
}

.pricing-card {
  text-align: center;
}

.pricing-card__period {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.pricing-card__price {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-gold);
  margin: 0;
}

.upgrade-cta {
  text-align: center;
  padding: var(--space-4) 0;
}

.btn--gold {
  background: var(--color-gold);
  color: var(--color-text-inverse);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  filter: brightness(1.1);
}

.btn--gold:disabled,
.btn--gold[aria-disabled="true"] {
  opacity: 0.7;
  cursor: not-allowed;
  filter: none;
}

.upgrade-safety-note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 420px;
  margin: var(--space-4) auto 0 auto;
}

.text-gold {
  color: var(--color-gold);
  font-weight: var(--font-semibold);
}

.text-teal {
  color: var(--color-primary-light);
}

.upgrade-wellbeing-note {
  text-align: center;
  max-width: 420px;
  margin: var(--space-4) auto var(--space-6) auto;
  color: var(--color-primary-light);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.pricing-note--emphasis {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  text-align: center;
  max-width: 460px;
  margin: 0 auto var(--space-6) auto;
}

/* ========================================
   WHO IT'S FOR PAGE
   ======================================== */

.persona-intro {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) 0 var(--space-6) 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.persona-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.persona-card__want {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin: 0;
}

.persona-intro--note {
  font-size: var(--text-base);
  padding-top: 0;
}

.persona-card__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary-light);
  margin-bottom: var(--space-2);
}

.persona-card__list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.persona-card__list li {
  margin-bottom: var(--space-2);
}

.tier-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
  vertical-align: 1px;
}

.tier-tag--free {
  color: var(--color-primary-light);
  border: 1px solid var(--color-primary-light);
}

/* NAME-1, 18 Aug 2026. Renamed with the copy it styles. A class called
   --personal printing the word "Plan" is the next reader's confusion,
   and this is the whole of its usage: two files, one rule. */
.tier-tag--plan {
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.comparison-table-wrap {
  overflow-x: auto;
  margin: var(--space-4) 0;
}

.comparison-table-wrap:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.comparison-table th,
.comparison-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.comparison-table thead th {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-secondary);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border-light);
}

.comparison-table thead th.comparison-table__free {
  color: var(--color-primary-light);
}

.comparison-table thead th.comparison-table__plan {
  color: var(--color-gold);
}

.comparison-table tbody th[scope="row"] {
  color: var(--color-text-secondary);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  white-space: nowrap;
}

.comparison-table tbody td {
  color: var(--color-text);
}

.comparison-table th,
.comparison-table td {
  border-right: 1px solid var(--color-border-light);
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: none;
}

/* v24. On a phone all three columns fit: the row names wrap instead of
   pushing the Plan column off the side. Still a real table, so a screen
   reader keeps its row and column headings. */
@media (max-width: 560px) {
  .comparison-table th,
  .comparison-table td {
    padding: var(--space-3) var(--space-2);
  }
  .comparison-table thead th {
    font-size: var(--text-lg);
  }
  .comparison-table tbody th[scope="row"] {
    white-space: normal;
    font-size: var(--text-sm);
    width: 28%;
  }
}

.upgrade-product-label--teal {
  color: var(--color-primary-light);
}

.upgrade-product-label--gold {
  color: var(--color-gold);
}

.product-card__details-link {
  margin: 0;
}

.areas-explained {
  display: grid;
  gap: var(--space-4);
  max-width: 560px;
  margin: 0 auto var(--space-8) auto;
}

.areas-explained__item {
  display: grid;
  gap: var(--space-1);
}

.areas-explained dt {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.areas-explained dd {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ========================================
   PHILOSOPHY PAGE
   Space is content. The vertical rhythm here is deliberately much
   looser than anywhere else on the site — the pauses between beats
   are part of the meaning, per the locked page architecture.
   No animation anywhere on this page, by design.
   ======================================== */

.philosophy {
  /* Slightly narrower than --content-max-width: this page is pure prose
     and a tighter measure (~60-70 chars) reads better than the 640px
     used for card/table layouts elsewhere. */
  max-width: 34rem;
  margin: 0 auto;
}

.philosophy h1 {
  margin-bottom: var(--space-10);
}

.philosophy p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin: 0 0 var(--space-5) 0;
}

/* The pause between beats. Larger than feels comfortable — intentionally.
   The divider is a short centred mark, not a full-width rule: full width
   reads as "new article section" and invites skimming, which is the one
   thing this page cannot survive. Short and centred reads as a breath.
   Teal, not gold — gold is the Personal-tier marker site-wide, and this
   is the page that says everyone deserves the same quality of attention.
   Purely decorative: generated content with no text, so it is not
   announced by screen readers and needs no aria treatment. */
.philosophy__beat + .philosophy__beat {
  margin-top: var(--space-10);
}

.philosophy__beat + .philosophy__beat::before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  margin: 0 auto var(--space-10) auto;
}

.philosophy__beat--close {
  margin-top: var(--space-10);
}

/* BEAT 1 — the question sits alone, generous space above and below.
   No animation: the stillness is the point. */
.philosophy .philosophy__question {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-light);
  text-align: center;
  margin: var(--space-12) 0 var(--space-10) 0;
}

/* BEAT 2 — the two closing lines sit apart from the paragraph above. */
.philosophy .philosophy__turn {
  margin-top: var(--space-8);
  color: var(--color-primary-light);
  font-weight: var(--font-bold);
  line-height: var(--leading-relaxed);
}

/* BEAT 3 — three separate thoughts, not one paragraph. */
.philosophy .philosophy__imagine {
  margin-bottom: var(--space-6);
}

.philosophy .philosophy__declaration {
  margin-top: var(--space-8);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-light);
}

/* BEAT 5 — three movements: inside, outward, world. */
.philosophy__movement + .philosophy__movement {
  margin-top: var(--space-10);
}

.philosophy .philosophy__landing {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-light);
  margin-top: var(--space-6);
}

/* BEAT 6 — the only outbound link on the page. */
.philosophy .philosophy__impact-link {
  margin-top: var(--space-7);
}

.philosophy .philosophy__impact-link a {
  color: var(--color-primary-light);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* BEAT 7 — generous space before it; she sits with this line. */
.philosophy .philosophy__close {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
  color: var(--color-primary-light);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .philosophy .philosophy__question {
    font-size: var(--text-4xl);
  }
}

/* ========================================
   ABOUT PAGE
   Deliberately the plainest page on the site. The locked architecture
   says: no coach voice, no Alongside design language beyond the
   wordmark, no headings within the copy, no CTA. So there are no
   emphasis colours, no dividers and no cards here — the restraint is
   the design.

   NOTE ON SPECIFICITY (learned the hard way on the philosophy page,
   site.css v21): `.about p` is 0,1,1 and will outrank any single-class
   modifier inside this block. Every modifier below is therefore scoped
   as `.about .about__x` (0,2,0). Do not add an unscoped
   `.about__something` rule that tries to override colour, size or
   margin — it will silently lose.
   ======================================== */

.about {
  max-width: 34rem;
  margin: 0 auto;
}

.about h1 {
  margin-bottom: var(--space-8);
}

.about p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin: 0 0 var(--space-5) 0;
}

.about section + section {
  margin-top: var(--space-8);
}

/* The photograph, when it lands. Sits above the h1 — she sees Graeme
   before she reads him. No <img> present yet; this rule is ready. */
.about__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}

.about .about__opening {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
}

/* The sign-off, then silence. Not styled as a flourish. */
.about .about__signoff {
  margin-top: var(--space-7);
  font-weight: var(--font-semibold);
}

/* The only link on the page, and deliberately quiet — not a conversion
   element, per the locked design notes. */
.about .about__back {
  margin-top: var(--space-10);
  font-size: var(--text-base);
}

.about .about__back a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========================================
   ACCESSIBILITY STATEMENT (v24, A-10 first part)
   Uses the About page's reading column; adds visible headings and lists.
   ======================================== */

.a11y-statement h2 {
  margin: 0 0 var(--space-4) 0;
}

.a11y-statement ul {
  margin: 0 0 var(--space-5) 0;
  padding-left: var(--space-5);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.a11y-statement li {
  margin-bottom: var(--space-3);
}

.a11y-statement__address {
  font-weight: var(--font-semibold);
  overflow-wrap: anywhere;
  user-select: all;
}

.about .a11y-statement__date {
  margin-top: var(--space-8);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}