@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/*
  Global stylesheet — single source of truth for the site.

  Structure:
    1) Reset and base
    2) Design tokens (:root) — palette and typography are owned by the
       `brand-guidelines` skill. Spacing, radii, shadows, motion, and layout
       tokens are owned here.
    3) Layout primitives
    4) Components (site-wide reusable primitives only — page-specific
       styles live with their page builds, not here)
    5) Utilities
*/

/* ===== 1) Reset and base ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 2) Design tokens ===== */
/* Palette and typography are written by the `brand-guidelines` skill from
   `build-assets/0-the-brand/tokens.json`. Spacing, radii, shadows, and
   transitions are owned here. */
:root {
  /* Palette (brand-guidelines) — Estuary Sunset (same as Essex), chosen for Manchester, Derby and Birmingham 2026-09-29/30 */
  --color-bg: #f7f5f1;            /* page background */
  --color-surface: #ffffff;
  --color-surface-soft: #ece8f2;  /* lavender-grey section tint */
  --color-text: #231f33;
  --color-text-soft: #555068;
  --color-primary: #2e2a4f;       /* estuary plum: hero shape, footer, buttons */
  --color-primary-dark: #1f1c37;
  --color-primary-light: #dcd8ea;
  --color-accent: #c9502a;        /* sunset coral: primary call to action */
  --color-accent-dark: #a8421f;
  --color-secondary: #5f8f6a;     /* saltmarsh green: highlights, selected chips, progress */
  --color-focus: #5f8f6a;
  --color-border: color-mix(in srgb, var(--color-text) 12%, transparent);

  /* Typography (brand-guidelines) */
  --font-heading: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

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

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.12);
  --shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;

  /* Layout */
  --container-max: 72rem;

  /* Aesthetic dials — the `design-system` skill SETS these per brand to diverge
     the look (sharp vs soft, flat vs shadowed, square vs pill). Defaults below are
     a soft/rounded baseline; a brand's design stage should deliberately override
     them so two brands don't look like the same template reskinned. */
  --logo-height: 2.75rem;    /* prominent by default — the logo is a brand asset, not chrome */
  --logo-max-width: 22rem;   /* generous, so wide wordmarks stay tall (not width-starved) */
  --header-bg: var(--color-surface);   /* header band — design-system may set a brand colour */
  --header-fg: var(--color-text);      /* header text/nav colour — flips for a coloured band */
  --btn-radius: var(--radius-sm);   /* rounded-rectangle buttons (inherited from Go Cornwall build) */
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
  --chip-radius: var(--radius-pill);
}

/* Logo grows on wider screens — override the dial at the breakpoint, never per-page. */
@media (min-width: 1024px) {
  :root { --logo-height: 3.5rem; }
}

/* ===== 3) Layout primitives ===== */
.container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

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

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

.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== 4) Components ===== */

/* Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

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

/* The header logo is an <img src="{{logo.src}}"> whose REAL file is injected by the CMS
   at upload — its aspect ratio is unknown at build time. HEIGHT is the primary driver
   (a generous --logo-height), so every logo renders at a consistent, prominent height
   regardless of ratio; --logo-max-width is a generous, viewport-relative safety cap that
   only clamps a very wide logo on small screens (it then scales down proportionally, never
   distorts). Never pin width AND height. Tune the dials per brand — never a per-page size. */
.site-logo img {
  height: auto;
  width: auto;
  max-height: var(--logo-height);
  max-width: min(var(--logo-max-width, 22rem), 55vw);
  object-fit: contain;
}

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

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

/* CMS-rendered menus — `{{menu.navigation}}` and `{{menu.footer}}` expand to
   <ul class="canvas-navigation-menu"> / <ul class="canvas-footer-menu"> with
   <li><a> children. Style the generated classes directly. */

.canvas-navigation-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.canvas-navigation-menu > li {
  margin: 0;
}

.canvas-navigation-menu a {
  color: var(--header-fg);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.canvas-navigation-menu a:hover,
.canvas-navigation-menu a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.canvas-footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

/* Footers can carry many links. With 8+ items, flow them into responsive columns
   (auto-fill grid) instead of one long, sprawling wrapping row — multi-column on wide
   screens, collapsing toward a single column on mobile. Short footer menus keep the
   inline row above. Where :has() is unsupported it harmlessly stays the flex row. */
.canvas-footer-menu:has(> li:nth-child(8)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  align-items: start;
  gap: var(--space-2) var(--space-5);
}

.canvas-footer-menu > li {
  margin: 0;
}

.canvas-footer-menu a {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.canvas-footer-menu a:hover,
.canvas-footer-menu a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--color-primary);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-soft);
  opacity: 0.6;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--btn-radius);
  min-height: 2.75rem;
  padding: 0.78rem 1.4rem;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline-offset: 3px; }

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 75%, #fff);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 65%, transparent);
}

/* Header CTAs follow the header foreground so they stay legible on a coloured band
   (no-op on the neutral default where --header-fg == --color-text). */
.site-header .btn-ghost {
  color: var(--header-fg);
  border-color: color-mix(in srgb, var(--header-fg) 20%, transparent);
}

.btn-sm {
  min-height: 2.2rem;
  padding: 0.55rem 1rem;
  font-size: 0.87rem;
}

.btn-lg {
  min-height: 3rem;
  padding: 0.9rem 1.7rem;
  font-size: 1.04rem;
}

.btn-block { width: 100%; }

.btn-icon {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border-radius: 50%;
}

/* Card */
.card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  padding: var(--space-5);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.08rem;
}

.card-text {
  margin: 0;
  color: var(--color-text-soft);
}

/* Chip — pill-shaped tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--chip-radius);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Site footer */
.site-footer {
  padding: var(--space-10) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Member profile */
.profile-head {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
}
.profile-avatar {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.profile-id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.profile-headline {
  font-size: 1.15rem;
  font-weight: 600;
}
.profile-bio {
  color: var(--color-text-soft);
  max-width: 60ch;
}
.profile-interests {
  margin-top: var(--space-3);
}

/* ===== 5) Utilities ===== */
.text-center { text-align: center; }
.muted { color: var(--color-text-soft); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

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

/* =========================================================================
   REGISTRATION FLOW - STYLES
   =========================================================================
   Append to the brand's site/global.css. No tokens to replace: every colour,
   font, space, radius and shadow is a var() read from the brand's own :root,
   so this inherits whatever brand-guidelines and design-system have set.

   IMPORTANT - an undefined token is worse than a wrong one. A var() whose property is
   not defined does NOT fall back; it invalidates the whole declaration and the
   browser drops it. So `padding: var(--space-16) 0` on a brand whose scale
   stops at --space-12 renders as no padding at all, with nothing logged. It
   reads as a design mistake rather than a missing variable. Confirm every
   token below exists in the brand's :root; verify_flow.py checks it for you.

   If a brand has renamed a token, update the var() names here - do not
   hard-code a literal value.

   Tokens consumed:
     --color-bg --color-surface --color-surface-soft --color-text
     --color-text-soft --color-primary --color-primary-dark
     --color-primary-light --color-accent --color-secondary --color-focus
     --font-heading --font-body
     --space-1..12  --radius-sm/md/lg/pill  --shadow-sm/md/lg
     --transition-fast --transition-base  --container-max

   BREAKPOINTS - keep these in step with the flow script:
     700px  where the step grouping changes (SCREENS_WIDE / SCREENS_NARROW),
            and where the stake block and mobile running order switch
     980px  where the hero becomes two columns
     480px  where padding, chip size and the member grid step up
   ========================================================================= */

/* ==========================================================================
   HOMEPAGE — ON-PAGE REGISTRATION FLOW  (.hp-reg-*)
   Staged signup card in the hero. Feeds the HubPeople Registration URL API.
   Member showcase is populated live from the Member Quicksearch API.

   The flow is built from "parts". A screen shows one or more parts, and the
   desktop and mobile sequences group them differently: desktop puts I-am and
   Looking-for on one screen and all interests on one screen, mobile gives each
   of those its own screen. See the sequences in the page script.
   ========================================================================== */

/* --- Hero becomes a two-column layout when the flow is present --- */
.hp-hero--reg .hp-hero-inner {
  box-sizing: border-box;  /* base rule uses content-box; width:100% needs border-box */
  max-width: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* not 1fr: that floors at min-content */
  gap: var(--space-8);
  padding-right: max(var(--space-4), calc((100vw - var(--container-max)) / 2));
  align-items: center;
}

@media (min-width: 980px) {
  .hp-hero--reg .hp-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: var(--space-12);
  }
}

.hp-hero--reg .hp-hero-h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
.hp-hero--reg .hp-hero-sub { margin-bottom: var(--space-6); }

.hp-hero--reg .hp-hero-trust li::before {
  content: "✓ ";
  color: var(--color-accent);
}

/* The hero is 92vh by default. With a form in it, that forces the card
   off-screen on a phone, so let the section size to its content instead. */
@media (max-width: 979px) {
  .hp-hero--reg { min-height: 0; }
  .hp-hero--reg .hp-hero-inner {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    gap: var(--space-6);
  }
  .hp-hero--reg .hp-hero-sub { display: none; }  /* the card is the message here */
  .hp-hero--reg .hp-hero-trust { margin-top: var(--space-4); }
}

/* --- Anchor / contrast band: the big number the ask is measured against --- */
.hp-hero-anchor {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  flex-wrap: wrap;
}
.hp-hero-anchor-num {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}
.hp-hero-anchor-label {
  font-size: 0.9rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  max-width: 24ch;
}

/* --- The card --- */
.hp-hero--reg .hp-hero-inner > * { min-width: 0; max-width: 100%; }

.hp-reg {
  position: relative;
  min-width: 0;
  max-width: 100%;
  /* The site header is sticky, so anything scrolled to #reg — the final-CTA
     anchor link, or a step change — would otherwise land underneath it.
     6rem clears the header on both the mobile and desktop header heights. */
  scroll-margin-top: 6rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  color: var(--color-text);
}

@media (min-width: 480px) { .hp-reg { padding: var(--space-6); } }
@media (min-width: 980px) { .hp-reg { padding: var(--space-8); } }

/* --- Progress: goal-gradient. Never starts at zero. --- */
.hp-reg-progress { margin-bottom: var(--space-5); }

.hp-reg-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.hp-reg-progress-step {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.hp-reg-progress-pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hp-reg-progress-track {
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  overflow: hidden;
}
.hp-reg-progress-bar {
  height: 100%;
  width: 20%;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-secondary), var(--color-accent));
  transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Running tally of what is banked. Re-written on every step. */
.hp-reg-headstart {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  min-height: 1.4rem;
}
.hp-reg-headstart-tick {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: #fff;
  font-size: 0.68rem;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.hp-reg-headstart-text {
  /* nowrap + ellipsis only truncates if the box is allowed to get narrower
     than its text. As a flex item this defaults to min-width:auto, which
     refuses to shrink — so the growing tally pushed the whole card past the
     viewport instead of ellipsising. min-width:0 is what makes it truncate. */
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Parts --- */
.hp-reg-part { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.hp-reg-part[data-active="true"] { display: block; animation: hp-reg-in 380ms ease both; }
.hp-reg-part[data-active="true"] + .hp-reg-part[data-active="true"] { margin-top: var(--space-6); }

@keyframes hp-reg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-reg-part[data-active="true"] { animation: none; }
  .hp-reg-progress-bar { transition: none; }
}

.hp-reg-legend {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 4.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--color-text);
  padding: 0;
  margin: 0 0 var(--space-2);
}
.hp-reg-hint {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-4);
}

/* --- Choice buttons (radio-backed) --- */
.hp-reg-choices {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 480px) { .hp-reg-choices { gap: var(--space-3); } }

.hp-reg-choice { position: relative; display: block; min-width: 0; }

.hp-reg-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hp-reg-choice span {
  display: block;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border: 2px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
@media (min-width: 480px) {
  .hp-reg-choice span { padding: var(--space-4) var(--space-3); font-size: 0.96rem; }
}

.hp-reg-choice span:hover {
  border-color: var(--color-primary-light);
  background: var(--color-bg);
}
.hp-reg-choice input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}
.hp-reg-choice input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* --- Fields --- */
.hp-reg-field { margin-bottom: var(--space-4); }

.hp-reg-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.hp-reg-input,
.hp-reg-select {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;  /* 16px minimum, or iOS zooms the page on focus */
  color: var(--color-text);
  background: var(--color-surface);
  padding: var(--space-3);
  border: 2px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}
@media (min-width: 480px) {
  .hp-reg-input, .hp-reg-select { padding: var(--space-3) var(--space-4); }
}

.hp-reg-input:focus,
.hp-reg-select:focus { outline: none; border-color: var(--color-primary); }
.hp-reg-input:focus-visible,
.hp-reg-select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* The month needs more room than the day: two digits versus a word, plus a
   dropdown arrow. Equal thirds clipped "September" at 414px. */
.hp-reg-dob {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: var(--space-2);
}
@media (min-width: 480px) {
  .hp-reg-dob { grid-template-columns: 4.5rem 1fr 6rem; }
}

.hp-reg-error {
  display: none;
  margin: var(--space-2) 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #A3342B;
}
.hp-reg-error[data-shown="true"] { display: block; }

/* --- Interest chips --- */
.hp-reg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hp-reg-chips { min-width: 0; max-width: 100%; }

.hp-reg-chip { position: relative; min-width: 0; max-width: 100%; }

.hp-reg-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hp-reg-chip span {
  display: block;
  padding: 0.4rem var(--space-3);
  border: 1.5px solid var(--color-secondary);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  overflow-wrap: break-word;
  transition: background var(--transition-fast), color var(--transition-fast);
}
@media (min-width: 480px) {
  .hp-reg-chip span { padding: var(--space-2) var(--space-4); font-size: 0.88rem; }
}

.hp-reg-chip span:hover { background: color-mix(in srgb, var(--color-secondary) 12%, transparent); }
.hp-reg-chip input:checked + span {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.hp-reg-chip input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.hp-reg-chip input:disabled + span { opacity: 0.42; cursor: not-allowed; }

.hp-reg-cap {
  margin: var(--space-3) 0 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

/* --- Positive feedback on a choice --- */
.hp-reg-feedback {
  display: none;
  gap: var(--space-3);
  align-items: flex-start;
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: var(--space-4) 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text);
}
.hp-reg-feedback[data-shown="true"] { display: flex; animation: hp-reg-in 300ms ease both; }
.hp-reg-feedback-icon { flex: none; font-size: 1rem; line-height: 1.45; }
.hp-reg-feedback > span:last-child { min-width: 0; overflow-wrap: break-word; }

/* --- Live member reward block --- */
.hp-reg-reward {
  display: none;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.hp-reg-reward[data-shown="true"] { display: block; animation: hp-reg-in 420ms ease both; }

/* One line, always. Describes the filters rather than counting profiles. */
.hp-reg-reward-title {
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed grid, no scrollbar: 3 across on a phone, 4 from 480px up. */
.hp-reg-members {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 480px) {
  .hp-reg-members { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
}

.hp-reg-member { min-width: 0; text-align: center; }

/* The 4th card only exists on the wider grid */
.hp-reg-member:nth-child(4) { display: none; }
@media (min-width: 480px) { .hp-reg-member:nth-child(4) { display: block; } }

.hp-reg-member img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  display: block;
}
.hp-reg-member-name {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  margin-top: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-reg-member-meta {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Loss-framed summary on the final screen --- */
.hp-reg-stake {
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.hp-reg-stake-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.hp-reg-stake-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: 0.8rem;
  color: var(--color-text-soft);
}
.hp-reg-stake-list li::before {
  content: "✓ ";
  color: var(--color-secondary);
  font-weight: 700;
}

/* The final screen is the tallest in the flow, and on a phone the stake block
   pushed the submit button below the fold. It is also redundant there: the
   tally beside the progress bar already lists the same items, and the exit
   prompt repeats them if the visitor tries to leave. So it earns its space on
   the wider layout only. Breakpoint matches the screen-grouping breakpoint in
   the flow script. The JS still builds it — the exit prompt reads that list. */
@media (max-width: 699px) {
  .hp-reg-stake { display: none; }
}

/* --- Mobile running order -------------------------------------------------
   On a phone the member strip sat between the fields and the button, which
   pushed the call to action towards the fold. Flipping them puts the button
   directly under the last field and leaves the members below it as a reward
   to scroll to, rather than an obstacle to scroll past.

   Done with `order` rather than by moving the markup so desktop keeps its
   original sequence. Safe for keyboard and screen-reader users here because
   the member strip holds no focusable elements — nothing interactive changes
   position, so visual and tab order stay in step. If a link or button is ever
   added to a member card, move the markup instead. */
@media (max-width: 699px) {
  .hp-reg-form { display: flex; flex-direction: column; }
  .hp-reg-progress { order: 1; }
  .hp-reg-part     { order: 2; }
  .hp-reg-feedback { order: 3; }
  .hp-reg-actions  { order: 4; }
  .hp-reg-reward   { order: 5; }
  .hp-reg-foot     { order: 6; }
}

/* --- Consent --- */
.hp-reg-consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}
.hp-reg-consent input {
  flex: none;
  margin-top: 0.15rem;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-primary);
}
.hp-reg-consent a { color: var(--color-primary); font-weight: 600; }

/* --- Actions --- */
.hp-reg-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.hp-reg-back {
  flex: none;
  background: none;
  border: 0;
  padding: var(--space-3) var(--space-2);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.hp-reg-back:hover { color: var(--color-text); }
.hp-reg-back:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.hp-reg-next { flex: 1 1 auto; min-width: 0; }

.hp-reg-foot {
  margin: var(--space-4) 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  text-align: center;
}
.hp-reg-foot a { color: var(--color-primary); font-weight: 600; }

.hp-reg-noscript {
  margin: var(--space-4) 0 0;
  font-size: 0.84rem;
  color: var(--color-text-soft);
}

.hp-final-cta-anchor { display: inline-flex; }

/* --- Form ships hidden, script reveals it ---------------------------------
   So a visitor without JavaScript sees the <noscript> fallback rather than a
   dead form. The flow script removes data-reg-inert as its first statement. */
.hp-reg-form[data-reg-inert] { display: none; }

/* --- No-JavaScript fallback ---------------------------------------------- */
.hp-reg-fallback { text-align: center; }

.hp-reg-fallback-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 4.4vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.hp-reg-fallback-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-5);
}

.hp-reg-fallback-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}
@media (min-width: 480px) {
  .hp-reg-fallback-members { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hp-reg-fallback-member {
  min-width: 0;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
}
.hp-reg-fallback-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
}
.hp-reg-fallback-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-reg-fallback-meta,
.hp-reg-fallback-int {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-reg-fallback-int { color: var(--color-secondary); font-weight: 600; }

.hp-reg-fallback-note {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-5);
}
.hp-reg-fallback-cta { width: 100%; }
.hp-reg-fallback-foot {
  margin: var(--space-4) 0 0;
  font-size: 0.76rem;
  color: var(--color-text-soft);
}
.hp-reg-fallback-foot a { color: var(--color-primary); font-weight: 600; }

/* --- Exit prompt ---------------------------------------------------------
   Lives at the end of <body>, outside the overflow:hidden hero. */
.hp-reg-exit {
  position: fixed;
  inset: 0;
  z-index: 60;               /* above the sticky header, which is z-index 20 */
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.hp-reg-exit[hidden] { display: none; }

.hp-reg-exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 51, 51, 0.72);
  border: 0;
  cursor: pointer;
}

.hp-reg-exit-panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  animation: hp-reg-in 260ms ease both;
}
@media (prefers-reduced-motion: reduce) {
  .hp-reg-exit-panel { animation: none; }
}

.hp-reg-exit-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 4.4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

.hp-reg-exit-track {
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.hp-reg-exit-bar {
  height: 100%;
  width: 20%;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-secondary), var(--color-accent));
}

.hp-reg-exit-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-4);
}

/* Stacked, one reason per line. These run to a full sentence each, so an
   inline row would wrap mid-thought and be harder to scan than a short list. */
.hp-reg-exit-reasons {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}
.hp-reg-exit-reasons li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: var(--space-2);
}
.hp-reg-exit-reasons li:last-child { margin-bottom: 0; }
.hp-reg-exit-reasons li::before {
  content: "•";
  position: absolute;
  left: 0.15rem;
  color: var(--color-accent);
  font-weight: 700;
}

/* Presumptive nudge directly above the button. */
.hp-reg-exit-nudge {
  margin: 0 0 var(--space-3);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.hp-reg-exit-actions { display: grid; gap: var(--space-2); }

.hp-reg-exit-leave {
  background: none;
  border: 0;
  padding: var(--space-3);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-soft);
  text-decoration: underline;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.hp-reg-exit-leave:hover { color: var(--color-text); }
.hp-reg-exit-leave:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Dismiss control on the return prompt. The exit prompt has no close button
   on purpose — its two actions are the choice — but the return prompt needs
   one, because staying on the completed form is a legitimate outcome. */
.hp-reg-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-soft);
  cursor: pointer;
}
.hp-reg-close:hover { background: var(--color-surface-soft); color: var(--color-text); }
.hp-reg-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* The return prompt stacks its actions and leaves room for the close button. */
[data-reg-return] .hp-reg-exit-panel { padding-top: var(--space-8); }

/* ==========================================================================
   SITE-WIDE ADDITIONS — Atlantic Blue (2026-09-26)
   ========================================================================== */

/* Accent button: terracotta, the primary call to action. The registration
   flow's Next / Create-my-profile buttons use it. */
.btn-accent {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.btn-accent:hover {
  background: var(--color-accent-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 42%, transparent);
}

/* Footer: deep Atlantic band, as on the original site. */
.site-footer {
  background: var(--color-primary);
  color: color-mix(in srgb, #fff 82%, transparent);
  border-top: 0;
}
.site-footer .canvas-footer-menu a { color: #fff; }
.site-footer .canvas-footer-menu a:hover,
.site-footer .canvas-footer-menu a:focus-visible { color: #fff; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.footer-legal a {
  color: #fff;
  font-size: 0.9rem;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer :focus-visible { outline-color: #fff; }

/* ==========================================================================
   HOMEPAGE (homepage.html) — hero shape, header over the hero, How It Works
   Layout and copy follow the original site; colours are Atlantic Blue.
   ========================================================================== */

/* Header sits on the blue shape at the top of the hero, not sticky. */
.hp-site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  background: transparent;
  border-bottom: 0;
  --header-fg: #fff;
  --logo-height: 3.25rem;
}
@media (min-width: 1024px) {
  .hp-site-header { --logo-height: 3.75rem; }
}
.hp-site-header .site-header-row { padding: var(--space-5) 0; }
.hp-site-header .site-cta { gap: var(--space-3); }
.hp-site-header .hp-login {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-2);
}
.hp-site-header .hp-login:hover { text-decoration: underline; text-underline-offset: 4px; }
.hp-site-header .hp-join {
  background: #fff;
  color: var(--color-primary);
}
.hp-site-header .hp-join:hover { background: var(--color-primary-light); }

/* The hero and its blue shape */
.hp-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Phone and tablet: a blue band behind the header with a curved edge. */
.hp-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7.5rem;
  background: var(--color-primary);
  border-bottom-right-radius: 70% 4.5rem;
  border-bottom-left-radius: 0;
}
.hp-hero-shape { display: none; }

.hp-hero--gcd .hp-hero-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
  padding: 9rem 0 var(--space-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "card" "intro" "figure";
  gap: var(--space-6);
  align-items: start;
}
.hp-hero--gcd .hp-hero-inner > * { min-width: 0; max-width: 100%; }
.hp-hero-head   { grid-area: head; }
.hp-hero--gcd .hp-reg { grid-area: card; }
.hp-hero-intro  { grid-area: intro; }
.hp-hero-figure { grid-area: figure; margin: 0; justify-self: center; }

.hp-hero-h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
.hp-hero-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-soft);
}
.hp-hero-trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary);
}
.hp-hero-trust svg { flex: none; color: var(--color-secondary); }

.hp-hero-figure img {
  width: min(18rem, 80vw);
  height: auto;
}

/* Desktop: the original big blue shape sweeping down the right-hand side.
   Only from 1180px: narrower than that the shape would run under the copy,
   so 980-1179px keeps the curved band from the phone layout. */
@media (min-width: 1180px) {
  .hp-hero::before { display: none; }
  .hp-hero-shape {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    /* Fixed height, not 100%: the hero grows as the sign-up card moves to
       the longer interest screens, and a stretched shape would slide over
       the headline. The card simply runs past the shape's lower edge. */
    height: 52rem;
    color: var(--color-primary);
  }
}
@media (min-width: 980px) {
  .hp-hero--gcd .hp-hero-inner {
    padding: 9.5rem 0 var(--space-16);
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    grid-template-areas: "head card" "intro card";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-10);
    row-gap: var(--space-5);
  }
  .hp-hero-figure { display: none; }
  .hp-hero-head { padding-top: var(--space-6); }
}

/* Wide desktop: copy | sign-up card | hero image, as on the original. */
@media (min-width: 1180px) {
  .hp-hero--gcd .hp-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem) minmax(0, 19rem);
    grid-template-areas: "head card figure" "intro card figure";
  }
  .hp-hero-figure {
    display: block;
    align-self: start;       /* stays on the shape while the card grows */
    margin-top: var(--space-12);
  }
  .hp-hero-figure img { width: 100%; }
}

/* The card overrides flow.css's hero rules, which assume a photo hero. */
.hp-hero--gcd .hp-reg { scroll-margin-top: var(--space-6); }

/* How It Works */
.hp-how {
  background: var(--color-surface-soft);
  padding: var(--space-16) 0;
}
.hp-how-head {
  max-width: 46rem;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.hp-how-title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--color-primary);
}
.hp-how-intro {
  margin: 0;
  line-height: 1.7;
  color: var(--color-text-soft);
}
.hp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (min-width: 640px)  { .hp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hp-step {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hp-step-img {
  width: 100%;
  aspect-ratio: 427 / 250;
  object-fit: cover;
}
.hp-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-6);
  text-align: center;
}
.hp-step-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-secondary);
}
.hp-step-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
}
.hp-step-text {
  flex: 1;
  margin: 0 0 var(--space-4);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-soft);
}
.hp-step .btn {
  min-width: 9rem;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}

/* Phones: keep the original intro paragraph (flow.css hides it by default). */
@media (max-width: 979px) {
  .hp-hero--gcd .hp-hero-sub { display: block; }
}

/* ==========================================================================
   INNER PAGES — Atlantic Blue (2026-09-26)
   Header with CMS menu, page hero, content components, member loops.
   ========================================================================== */

/* ---- Header on inner pages: the deep blue band, as on the homepage ---- */
.site-header--band {
  --header-bg: var(--color-primary);
  --header-fg: #fff;
  border-bottom: 0;
}
.site-header--band .site-header-row { gap: var(--space-5); }
.site-header--band .site-logo { flex: none; }
.site-header--band .site-cta { flex: none; }
.site-header--band .btn-ghost {
  color: #fff;
  border-color: color-mix(in srgb, #fff 45%, transparent);
}
.site-header--band .btn-ghost:hover { background: color-mix(in srgb, #fff 12%, transparent); }
@media (max-width: 1023px) {
  .desktop-only { display: none; }
}

/* ---- CMS navigation ({{menu.navigation.default}}) theming ----
   Every rule is 0,2,0 or higher: the snippet's own <style> loads after this
   file, so equal-specificity overrides would silently lose. */
.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__link,
.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__summary {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}
.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__link:hover,
.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__summary:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hs-canvas-nav .hs-canvas-nav__submenu .hs-canvas-nav__link { color: var(--color-text); }
.hs-canvas-nav .hs-canvas-nav__toggle { color: #fff; }
.hs-canvas-nav .hs-canvas-nav__drawer {
  background: var(--color-primary);
  box-shadow: var(--shadow-lg);
}
.hs-canvas-nav .hs-canvas-nav__overlay {
  background: color-mix(in srgb, var(--color-primary-dark) 55%, transparent);
}
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link,
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary,
.hs-canvas-nav .hs-canvas-nav__close { color: #fff; }
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link:hover { color: var(--color-primary-light); }
.hs-canvas-nav .hs-canvas-nav__cta--primary { background: var(--color-accent); color: #fff; }
.hs-canvas-nav .hs-canvas-nav__cta--primary:hover { background: var(--color-accent-dark); }
.hs-canvas-nav .hs-canvas-nav__cta--secondary {
  color: #fff;
  border-color: color-mix(in srgb, #fff 45%, transparent);
}
@media (min-width: 1024px) {
  .hs-canvas-nav .hs-canvas-nav__menu--desktop > .hs-canvas-nav__item > .hs-canvas-nav__details > .hs-canvas-nav__submenu {
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
  }
}

/* ---- Breadcrumb on the blue hero ---- */
.page-hero .breadcrumb { padding: 0 0 var(--space-4); color: color-mix(in srgb, #fff 80%, transparent); }
.page-hero .breadcrumb a { color: #fff; }
.page-hero .breadcrumb [aria-current="page"] { color: #fff; }

/* ---- Page hero: blue band with the brand's curved lower edge ---- */
.page-hero {
  position: relative;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-6) 0 var(--space-16);
  border-bottom-right-radius: 60% 3.5rem;
  margin-bottom: var(--space-4);
}
.page-hero-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-light);
}
.page-hero h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.12;
  color: #fff;
  max-width: 22ch;
}
.page-hero-lede {
  margin: 0;
  max-width: 44rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: color-mix(in srgb, #fff 88%, transparent);
}
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.btn-on-dark {
  background: transparent;
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
}
.btn-on-dark:hover { background: color-mix(in srgb, #fff 12%, transparent); }

/* ---- Sections and headings ---- */
.page-section { padding: var(--space-12) 0; }
.page-section--tint { background: var(--color-surface-soft); }
.section-head { max-width: 46rem; margin: 0 0 var(--space-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: var(--color-primary);
}
.section-lede { margin: 0; line-height: 1.7; color: var(--color-text-soft); }
.subhead {
  margin: var(--space-8) 0 var(--space-3);
  font-size: 1.25rem;
  color: var(--color-primary);
}

/* ---- Long-form text ---- */
.prose { max-width: 44rem; font-size: 1.02rem; line-height: 1.75; }
.prose h2 { margin: var(--space-10) 0 var(--space-3); font-size: 1.5rem; color: var(--color-primary); }
.prose h3 { margin: var(--space-6) 0 var(--space-2); font-size: 1.15rem; color: var(--color-primary); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--color-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--color-text); }
.prose-figure { margin: 0 0 var(--space-8); }
.prose-figure img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 427 / 250; object-fit: cover; }

/* ---- Card grids ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.info-card h3 { margin: 0; font-size: 1.12rem; color: var(--color-primary); }
.info-card p { margin: 0; color: var(--color-text-soft); line-height: 1.6; }
.info-card-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-size: 1.35rem;
  margin-bottom: var(--space-2);
}
.info-card-icon svg { width: 1.5rem; height: 1.5rem; }
.info-card-icon img { width: 1.4rem; height: 1.4rem; }
.info-card-protects {
  margin-top: auto !important;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text) !important;
  font-size: 0.92rem;
}
.info-card-protects strong { color: var(--color-secondary); }
.info-card-meta { font-size: 0.85rem; font-weight: 600; color: var(--color-secondary) !important; }

/* Linked cards (areas, blog posts) */
.link-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.link-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.link-card img { width: 100%; aspect-ratio: 427 / 250; object-fit: cover; }
.link-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.link-card-body h3 { margin: 0; font-size: 1.15rem; color: var(--color-primary); }
.link-card-body p { margin: 0; color: var(--color-text-soft); line-height: 1.6; font-size: 0.95rem; }
.link-card-more { margin-top: auto; padding-top: var(--space-2); font-weight: 700; color: var(--color-secondary); }

/* Area chips on the near-me pages */
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.area-list a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-secondary);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary);
  background: var(--color-surface);
}
.area-list a:hover { background: var(--color-secondary); color: #fff; }

/* ---- Stat row ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-row li {
  background: color-mix(in srgb, #fff 10%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.stat-num { display: block; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: #fff; }
.stat-label { display: block; font-size: 0.88rem; color: color-mix(in srgb, #fff 82%, transparent); }

/* ---- Closing call-to-action band ---- */
.cta-band {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.cta-band h2 { margin: 0 0 var(--space-3); font-size: clamp(1.5rem, 3.4vw, 2rem); color: #fff; }
.cta-band p { margin: 0 auto var(--space-6); max-width: 36rem; line-height: 1.7; color: color-mix(in srgb, #fff 86%, transparent); }
.cta-band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* ---- Features: platform list and tier cards ---- */
.platform-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .platform-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .platform-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.platform-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.platform-list svg, .platform-list img { width: 2rem; height: 2rem; color: var(--color-primary); }
.platform-list h3 { margin: 0; font-size: 1.05rem; color: var(--color-primary); }
.platform-list p { margin: 0; font-size: 0.92rem; color: var(--color-text-soft); line-height: 1.55; }
.platform-avail { font-size: 0.8rem !important; font-weight: 700; color: var(--color-secondary) !important; letter-spacing: 0.04em; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 900px) { .tier-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .tier-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 60rem; margin-inline: auto; } }
.tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  border-top: 4px solid var(--color-secondary);
}
.tier-card--dark {
  background: var(--color-primary);
  color: #fff;
  border-top-color: var(--color-accent);
}
.tier-card h2, .tier-card h3 { margin: 0; font-size: 1.4rem; color: var(--color-primary); }
.tier-card--dark h2, .tier-card--dark h3 { color: #fff; }
.tier-card p { margin: 0; line-height: 1.6; color: var(--color-text-soft); }
.tier-card--dark p { color: color-mix(in srgb, #fff 85%, transparent); }
.tier-logo { display: block; height: 28px; color: var(--color-primary); }
.tier-logo svg { height: 28px; width: auto; display: block; }
.tier-card--dark .tier-logo { color: #fff; }
.tier-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.tier-list li { position: relative; padding-left: 1.6rem; line-height: 1.5; font-size: 0.95rem; }
.tier-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.35rem;
  width: 0.55rem;
  height: 0.9rem;
  border: solid var(--color-secondary);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.tier-card--dark .tier-list li::before { border-color: var(--color-primary-light); }
.tier-list-intro { font-weight: 700; font-size: 0.9rem; }
.tier-card .tier-cta { margin-top: auto; }

/* Price block on the pricing page */
.price-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
.price-table th, .price-table td { padding: var(--space-2) 0; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; }
.tier-card--dark .price-table th, .tier-card--dark .price-table td { border-bottom-color: color-mix(in srgb, #fff 18%, transparent); }
.price-table td { text-align: right; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.price-table .price-sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; opacity: 0.8; }
.price-note { font-size: 0.85rem !important; }

/* Comparison table */
.table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.compare-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; }
.compare-table th, .compare-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.compare-table thead th { background: var(--color-primary); color: #fff; text-align: center; vertical-align: middle; }
.compare-table thead th:first-child { text-align: left; }
.compare-table thead .tier-logo { color: #fff; display: inline-block; }
.compare-table thead .tier-logo svg { height: 22px; margin-inline: auto; }
.compare-table tbody th { text-align: left; font-weight: 500; }
.compare-table td { text-align: center; font-weight: 700; color: var(--color-secondary); }
.compare-table td.no { color: var(--color-text-soft); font-weight: 400; }
.compare-table tbody tr:nth-child(even) { background: var(--color-bg); }

/* Callout box */
.callout {
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.callout p { margin: 0 0 var(--space-3); line-height: 1.7; }
.callout p:last-child { margin-bottom: 0; }

/* Two-column text blocks */
.split { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-8); }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.check-list li { position: relative; padding-left: 1.6rem; line-height: 1.55; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.3rem;
  width: 0.55rem;
  height: 0.9rem;
  border: solid var(--color-secondary);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---- FAQ (native <details>, no JavaScript) ---- */
.faq-group { margin-bottom: var(--space-10); }
.faq-group:last-child { margin-bottom: 0; }
.faq-item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-12) var(--space-4) var(--space-5);
  position: relative;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-secondary);
}
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding: 0 var(--space-5) var(--space-5); line-height: 1.7; color: var(--color-text-soft); }
.faq-answer p { margin: 0 0 var(--space-3); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--color-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Glossary ---- */
.glossary-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.glossary-jump a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  color: var(--color-primary);
}
.glossary-jump a:hover { background: var(--color-secondary); color: #fff; }
.glossary-group { margin-bottom: var(--space-12); scroll-margin-top: 6rem; }
.glossary-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}
@media (min-width: 760px) { .glossary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.glossary-entry {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  border-top: 4px solid var(--color-secondary);
}
.glossary-entry dt { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--color-primary); }
.glossary-entry .say { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-secondary); margin-bottom: var(--space-2); }
.glossary-entry dd { margin: 0; line-height: 1.65; color: var(--color-text-soft); }
.glossary-entry dd + dd { margin-top: var(--space-3); }
.glossary-entry .in-dating {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.93rem;
}
.glossary-entry .in-dating strong { color: var(--color-accent-dark); }

/* ---- Blog ---- */
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; font-size: 0.9rem; color: color-mix(in srgb, #fff 85%, transparent); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.tag-row li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-soft); font-size: 0.8rem; font-weight: 600; color: var(--color-primary); }

/* ---- Filter pills for the community grid (CSS only, no JavaScript) ---- */
.pill-filter { position: relative; }
.pill-filter > input { position: absolute; opacity: 0; pointer-events: none; }
.pill-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0 0 var(--space-6); }
.pill-bar label {
  cursor: pointer;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-secondary);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-surface);
}
.pill-panel { display: none; }
#show-all:checked ~ .pill-panels .pill-panel--all,
#show-women:checked ~ .pill-panels .pill-panel--women,
#show-men:checked ~ .pill-panels .pill-panel--men { display: block; }
#show-all:checked ~ .pill-bar label[for="show-all"],
#show-women:checked ~ .pill-bar label[for="show-women"],
#show-men:checked ~ .pill-bar label[for="show-men"] { background: var(--color-secondary); color: #fff; }
#show-all:focus-visible ~ .pill-bar label[for="show-all"],
#show-women:focus-visible ~ .pill-bar label[for="show-women"],
#show-men:focus-visible ~ .pill-bar label[for="show-men"] { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ===== Member loops — see references/placeholders/members.loop.md =====
   Authored with data-members-styles="none": the CMS emits classes and no CSS. */
[data-members] .lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, calc(50% - 0.375rem)), 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: calc(6 * 14rem + 5 * 0.75rem);
}
[data-members] .mem-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  position: relative;
  padding: 0.5rem;
  background: var(--color-surface, #ffffff);
  border: var(--card-border, 1px solid #e3e1da);
  border-radius: var(--card-radius, 0.875rem);
  box-shadow: var(--card-shadow, none);
}
[data-members] .mem-card img,
[data-members] .mem-card__initial {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm, 0.5rem);
  flex: 0 0 auto;
}
[data-members] .mem-card img { display: block; object-fit: cover; object-position: 50% 30%; }
[data-members] .mem-card__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-soft, #f2f0ea);
  color: var(--color-text, #1d2328);
  font-size: 1.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
[data-members] .mem-card__name,
[data-members] .mem-card__where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-members] .mem-card__name {
  margin: 0.35rem 0 0;
  font-family: var(--font-heading, inherit);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--color-text, inherit);
}
[data-members] .mem-card__where { margin: 0; font-size: 0.75rem; line-height: 1.3; color: var(--color-text-soft, #6b6f85); }
[data-members] .mem-card__name:empty,
[data-members] .mem-card__where:empty { display: none; }
[data-members] .mem-card__line {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-soft, #6b6f85);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-members] .badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  max-width: calc(100% - 1.5rem);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--chip-radius, 999px);
  color: var(--color-text, #1d2328);
  background: var(--color-primary-light, #e4f0ee);
}
[data-members] .mem-card__cta {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-text, inherit);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-members] a:focus-visible {
  outline: 3px solid var(--color-focus, #b4602c);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-surface, #ffffff);
}
[data-members] .mem-card--join { padding: 0; min-height: 8rem; }
[data-members] .mem-card--join .mem-card__cta {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 0.75rem;
  text-align: center;
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}
[data-members] .lp-members__empty { margin: 0; color: var(--color-text, inherit); font-size: 0.9rem; }

/* Fallback and caption around a member loop (CSS only). Defaults are the
   honest state: fallback hidden, caption hidden, revealed by :has(). */
.members-block__fallback { display: none; }
.members-block:has(.lp-members__empty) .members-block__fallback { display: block; }
.members-block:has([data-members]:empty) .members-block__fallback { display: block; }
.members-block__caption { display: none; margin: var(--space-4) 0 0; text-align: center; font-size: 0.88rem; color: var(--color-text-soft); }
.members-block:has(.lp-grid .mem-card:nth-child(4)) .members-block__caption { display: block; }
.members-block__fallback {
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  text-align: center;
  line-height: 1.6;
}
.members-block__fallback a { color: var(--color-secondary); font-weight: 700; text-decoration: underline; }
.callout a { color: var(--color-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tier-grid--2 + .callout { max-width: 60rem; margin-inline: auto; }

/* ---- About: founder card ---- */
.founder-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
@media (min-width: 700px) { .founder-card { grid-template-columns: 14rem minmax(0, 1fr); padding: var(--space-8); } }
.founder-card img {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 6px solid var(--color-surface-soft);
}
.founder-card h2 { margin: 0 0 var(--space-1); font-size: 1.6rem; color: var(--color-primary); }
.founder-role { margin: 0 0 var(--space-4); font-weight: 700; color: var(--color-secondary); letter-spacing: 0.04em; }
.founder-card p { line-height: 1.7; }

.info-card a, .section-lede a { color: var(--color-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Homepage header gets the CMS menu too; hide the desktop CTAs where the drawer carries them. */
.hp-site-header .site-header-row { gap: var(--space-5); }
@media (max-width: 1023px) {
  .site-header .site-cta.desktop-only { display: none; }
}