/*
  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) */
  --color-bg: #f7f9f8;
  --color-surface: #ffffff;
  --color-surface-soft: #eaf3f0;
  --color-text: #17252a;
  --color-text-soft: #55646a;
  --color-primary: #007563;
  --color-primary-dark: #00594b;
  --color-primary-light: #d5e9e5;
  --color-accent: #f68b1f;
  --color-focus: #007563;

  /* Typography (brand-guidelines) */
  --font-heading: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito Sans", "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;

  /* 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. */
  /* --- Free and Single Parents: "quiet surfaces, soft geometry" ---
     Generous rounding echoes the wordmark's rounded letterforms. Surfaces are FLAT
     — the teal-tinted hairline does the work a shadow would, which reads calmer and
     more grown-up than a page of floating cards. Shadow appears only on hover, as
     feedback, never as decoration. */
  --logo-height: 2.75rem;    /* Prominent — the wordmark IS the identity */
  --logo-max-width: 22rem;   /* 5.3:1 mark at 3.5rem tall lands ~18.6rem — comfortably inside */
  --header-bg: var(--color-surface);   /* NOT a brand band: the logo's own teal vanishes on #007563 */
  --header-fg: var(--color-text);
  --btn-radius: var(--radius-pill);
  --card-radius: var(--radius-lg);
  --card-shadow: none;
  --card-border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  --chip-radius: var(--radius-pill);

  /* Extra dials added for this brand */
  --card-hover-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 16%, transparent);
  --card-hover-border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  --easing-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-distance: 1.5rem;
  --reveal-duration: 620ms;
}

/* 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;
}

/* The site logo is the three-letter "FSP" mark, which tells a first-time visitor
   nothing on its own — so the header carries the brand name as text beside it. The
   img keeps alt="{{logo.alt}}" (the brand name) per the build rules, so this span is
   aria-hidden to stop screen readers announcing the name twice.
   Hidden below 600px, where the mark alone has to carry it. */
.site-logo-text {
  display: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--header-fg);
  max-width: 8.5em;
}
@media (min-width: 600px) {
  .site-logo-text { display: block; }
}
@media (min-width: 1024px) {
  .site-logo-text { font-size: 1.12rem; }
}

.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);
}

/* Accent CTA — the single strongest call to action on a page.
   INK ON ACCENT, NEVER WHITE. White on #f68b1f is 2.43:1 and fails WCAG AA outright;
   #17252a on it is 6.47:1 and passes. If a white-on-orange treatment is ever wanted,
   the orange has to drop to #b8590a first. See brand.md "Accent rule". */
.btn-accent {
  background: var(--color-accent);
  color: var(--color-text);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 32%, transparent);
}

.btn-accent:hover {
  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-text));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 44%, transparent);
}

.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);
}

/* The four legal anchors sit in the canonical footer on every page and the seed
   ships no rule for them, so they render as one run-on line. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  font-size: 0.85rem;
}
.footer-legal a { color: var(--color-text-soft); }
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--color-primary); text-decoration: underline; }

/* 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);
}

/* ===== 4b) Motion — level: Subtle, and entirely CSS =====
   NO JavaScript anywhere in this file or in any page. A bulk ZIP import into the
   HubPeople CMS rejects any page containing a <script> other than JSON-LD, and the
   page then goes missing from the site altogether. So scroll-reveal is done with
   CSS scroll-driven animation (`animation-timeline: view()`), wrapped in @supports.
   Browsers without it simply show the content — the reveal is enhancement only,
   never a precondition for reading. */

@keyframes fsp-rise {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to   { opacity: 1; transform: none; }
}

/* Hero entrance — one-shot on load, the only animation above the fold. */
.reveal-load {
  animation: fsp-rise var(--reveal-duration) var(--easing-smooth) both;
}
.reveal-load-2 { animation-delay: 90ms; }
.reveal-load-3 { animation-delay: 180ms; }

/* Scroll reveal — sections rise as they enter the viewport.
   TRANSFORM ONLY, deliberately. A scroll-driven animation with `both` fill holds
   its from-state until the element enters the range, so fading opacity from 0
   would leave every below-the-fold section INVISIBLE to anything that renders the
   page without scrolling it — a crawler, a print, a screenshot, a nested scroll
   container. On a site whose whole point is organic search, body copy must never
   depend on an animation to be visible. The rise still reads as motion; the text
   is fully opaque the entire time. */
@keyframes fsp-rise-safe {
  from { transform: translateY(var(--reveal-distance)); }
  to   { transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: fsp-rise-safe var(--reveal-duration) var(--easing-smooth) both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

/* Hover feedback — this brand is soft/rounded, so it lifts. Flat brands would
   shift colour instead; doing both reads busy. Interactive elements only. */
.card-interactive {
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}
.card-interactive:hover,
.card-interactive:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
  border: var(--card-hover-border);
}

/* Buttons and links sitting on a dark photographic band. */
.on-media .btn-ghost {
  color: #fff;
  border-color: color-mix(in srgb, #fff 55%, transparent);
}
.on-media .btn-ghost:hover {
  background: color-mix(in srgb, #fff 14%, transparent);
}

/* ===== 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;
}

/* ===== 6) Site sections =====
   Added by web-page-builder as pages first used them. Token-driven throughout —
   no hardcoded colours, radii, shadows or fonts. */

/* Utility: desktop-only header CTAs. The CMS nav's drawer supplies login/join on
   mobile, so showing them in the header too double-renders them below 1024px.
   See references/placeholders/menu.navigation.default.md, design rule 1. */
.desktop-only { display: none; }
@media (min-width: 1024px) {
  .desktop-only { display: inline-flex; }
}

/* --- Section furniture --- */
.section-soft { background: var(--color-surface-soft); }
.section-head { max-width: 46rem; margin: 0 0 var(--space-8); }
.section-head h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.section-head p { margin: 0; color: var(--color-text-soft); font-size: 1.05rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.prose { max-width: 65ch; }

/* --- Hero (pattern: hero-split, adapted) ---
   The visual half holds the registration flow rather than a second photograph;
   the photo sits behind the whole band under a left-weighted scrim so the copy
   clears contrast wherever the image is light. */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-primary-dark);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    172deg,
    color-mix(in srgb, var(--color-primary-dark) 92%, #000) 0%,
    color-mix(in srgb, var(--color-primary-dark) 86%, #000) 55%,
    color-mix(in srgb, var(--color-primary-dark) 62%, transparent) 100%
  );
}
@media (min-width: 900px) {
  .hero::after {
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--color-primary-dark) 94%, #000) 0%,
      color-mix(in srgb, var(--color-primary-dark) 88%, #000) 46%,
      color-mix(in srgb, var(--color-primary-dark) 55%, transparent) 100%
    );
  }
}
.hero-inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-12) 0;
}
@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: var(--space-10);
  }
  /* Single-column hero — used when the right-hand column has no occupant (the
     registration flow lives there when custom JS is enabled on the brand). */
  .hero-inner--solo { grid-template-columns: minmax(0, 1fr); }
  .hero-inner--solo .hero-copy { max-width: 46rem; }
}

/* Anchor targets must clear the sticky header. */
[id] { scroll-margin-top: 5.5rem; }
.hero-copy { color: #fff; }
.hero-copy .eyebrow { color: color-mix(in srgb, var(--color-accent) 90%, #fff); }
.hero-title {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.hero-sub {
  font-size: 1.12rem;
  max-width: 42ch;
  margin: 0 0 var(--space-6);
  color: color-mix(in srgb, #fff 88%, var(--color-primary-light));
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-points {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 0.92rem;
  color: color-mix(in srgb, #fff 82%, var(--color-primary-light));
}
.hero-points li::before {
  content: "\2713";
  color: var(--color-accent);
  font-weight: 700;
  margin-right: 0.4rem;
}

/* --- Trust row --- */
.trust-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 600px) { .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .trust-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-item h3 { font-size: 1.02rem; margin: 0 0 var(--space-2); }
.trust-item p { margin: 0; color: var(--color-text-soft); font-size: 0.94rem; }
.trust-item::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  margin-bottom: var(--space-4);
}

/* --- Steps. Numbered because this genuinely is a sequence. --- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  counter-reset: step;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-weight: 800;
  margin-bottom: var(--space-4);
}
.steps h3 { font-size: 1.08rem; margin: 0 0 var(--space-2); }
.steps p { margin: 0; color: var(--color-text-soft); }

/* --- Place grid (country / region links) --- */
.place-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.place-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}
.place-card strong { font-family: var(--font-heading); font-size: 1.05rem; }
.place-card span { color: var(--color-text-soft); font-size: 0.9rem; }
.place-card em {
  font-style: normal;
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.9rem;
}

/* --- Closing CTA band --- */
.cta-band {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-12) 0;
}
.cta-band-inner { max-width: 44rem; }
.cta-band h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 var(--space-3); }
.cta-band p {
  margin: 0 0 var(--space-6);
  color: color-mix(in srgb, #fff 86%, var(--color-primary-light));
  font-size: 1.05rem;
}

/* ===== 7) Member loops (CMS-injected) =====
   Recipe from references/placeholders/members.loop.md, emitted in the required
   order: Base -> Colour and type -> Cards -> portrait preset. The snippet injects
   an UNSCOPED <style> into the <body>, so it loads AFTER this file and equal
   specificity loses silently. Every rule below out-specifies it. Every var()
   carries the snippet's own literal as a fallback so a missing token degrades to
   parity rather than to `initial`. */

/* --- Base --- */
[data-members],
[data-members] *,
[data-members] *::before,
[data-members] *::after { box-sizing: border-box; }

[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs).lp-members { min-height: 12rem; }

/* --- Colour and type (safe at the generic level) --- */
[data-members] .mem-card {
  background: var(--color-surface, #ffffff);
  border: var(--card-border, 1px solid #e3e1da);
  isolation: isolate;
}
[data-members] .mem-card__initial {
  background: var(--color-primary, #b4602c);
  color: var(--color-surface, #ffffff);
}
[data-members] .mem-card__name {
  font-family: var(--font-heading, inherit);
  color: var(--color-text, inherit);
  font-size: 0.85rem;
  line-height: 1.3;
}
[data-members] .mem-card__where,
[data-members] .mem-card__line {
  color: var(--color-text-soft, #6b6f85);
  font-size: 0.75rem;
}
[data-members] .mem-card__line { line-height: 1.35; }
[data-members] .mem-card__cta {
  color: var(--color-primary, #b4602c);
  font-size: 0.75rem;
  font-weight: 700;
}
[data-members] .mem-card--join {
  background: var(--color-surface-soft, #f2f0ea);
  color: var(--color-primary, #b4602c);
}
[data-members] .mem-card__initial { font-size: 1.5rem; }

/* Empty state — the snippet ships NO stylesheet at all in this branch. */
.lp-members__empty {
  color: var(--color-text-soft, #6b6f85);
  text-align: center;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
  margin: 0;
}

/* --- Cards: shape, and a grid that works on a phone --- */
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .lp-grid {
  --mem-gap: var(--space-4, 1rem);
  gap: var(--mem-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, calc(50% - var(--mem-gap))), 1fr));
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card {
  width: 100%;
  max-width: 14rem;
  justify-self: center;
  border-radius: var(--card-radius, 6px);
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card img,
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card__initial {
  border-radius: var(--radius-sm, 4px);
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card--join {
  border-radius: var(--card-radius, 6px);
}

/* --- Portrait profile cards preset (must follow the Cards block) ---
   The tap overlay is deliberately NOT applied: every card's link text is the
   unoverridable string "View profile" while every href is {{join.url}}, so making
   the whole card tappable maximises a false affordance. Safe default per the
   reference doc. */
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card {
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card img,
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card__initial {
  aspect-ratio: 3 / 4;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 0;
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card img {
  object-position: 50% 25%;
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card .badge {
  position: absolute;
  top: var(--space-2, 0.5rem);
  left: var(--space-2, 0.5rem);
  margin: 0;
  z-index: 1;
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card:not(.mem-card--join) .mem-card__name,
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card:not(.mem-card--join) .mem-card__where,
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card:not(.mem-card--join) .mem-card__line,
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card:not(.mem-card--join) .mem-card__cta {
  padding-left: var(--space-3, 0.75rem);
  padding-right: var(--space-3, 0.75rem);
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card__name {
  margin-top: var(--space-3, 0.75rem);
}
[data-members]:not([data-members-layout="orbs"]):not(.demo-orbs) .mem-card:not(.mem-card--join) .mem-card__cta {
  padding-bottom: var(--space-3, 0.75rem);
}

/* --- The block that wraps a loop: caption and empty-result fallback ---
   Both are written so the DROPPED state is the honest one, because :has() is
   unsupported in older browsers and an unsupported rule is simply discarded.
   A caption that claims something therefore defaults to hidden. */
.members-block__caption {
  display: none;
  margin: var(--space-4) 0 0;
  color: var(--color-text-soft);
  font-size: 0.85rem;
}
.members-block:has(.lp-grid .mem-card:nth-child(4)) .members-block__caption { display: block; }

/* Surface + border rather than surface-soft: the fallback has to read as a card on
   BOTH band colours, and on a .section-soft band a surface-soft fill is invisible. */
.members-block__fallback {
  display: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  max-width: 46rem;
}
.members-block:has(.lp-members__empty) .members-block__fallback { display: block; }
.members-block:has(.lp-members:empty) .members-block__fallback { display: block; }
.members-block__fallback a { color: var(--color-primary); font-weight: 700; text-decoration: underline; }


/* ===== 8) Registration flow (registration-flow skill) =====
   Appended verbatim from the skill's assets/flow.css, with one change:
   var(--color-secondary) -> var(--color-primary), because this brand defines
   no --color-secondary and the declaration would silently inherit instead. */
/* =========================================================================
   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. var(--x) with no
   --x 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-primary);
  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-primary), 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-primary);
  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-primary);
  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-primary) 12%, transparent); }
.hp-reg-chip input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  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-primary) 12%, transparent);
  border-left: 3px solid var(--color-primary);
  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-primary);
  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-primary); 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-primary), 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); }

/* ===== 9) Location pages ===== */
.stat-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}
.stat {
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}
.stat b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: var(--space-2); color: var(--color-text-soft); font-size: 0.9rem; }

.page-head { padding: var(--space-10) 0 var(--space-8); }
.page-head h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.page-head .prose p { font-size: 1.08rem; margin: 0 0 var(--space-5); }
.page-head .prose p:last-of-type { margin-bottom: var(--space-6); }

.linklist {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.linklist a {
  display: block;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.linklist a:hover,
.linklist a:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
  border: var(--card-hover-border);
}
.linklist a span { display: block; font-weight: 400; font-size: 0.88rem; color: var(--color-text-soft); margin-top: 0.15rem; }

/* ===== 10) Info pages: safety, features, pricing ===== */

/* Typographic page head on a soft band — used by the informational pages, which
   deliberately get no photographic hero (that treatment is reserved for the
   marketing pages, so the two read as different kinds of page). */
.head-band {
  background: var(--color-primary-dark);
  color: #fff;
  padding: var(--space-12) 0;
}
.head-band .eyebrow { color: color-mix(in srgb, var(--color-accent) 90%, #fff); }
.head-band h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.head-band p {
  margin: 0;
  max-width: 60ch;
  font-size: 1.08rem;
  color: color-mix(in srgb, #fff 88%, var(--color-primary-light));
}
.head-band .breadcrumb { margin-bottom: var(--space-5); }
.head-band .breadcrumb a { color: color-mix(in srgb, #fff 80%, var(--color-primary-light)); }
.head-band .breadcrumb [aria-current="page"] { color: #fff; }
.head-band .breadcrumb-separator { color: color-mix(in srgb, #fff 55%, transparent); }

/* --- Category heads (safety) --- */
.cat { padding-top: var(--space-10); }
.cat-head { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-6); }
.cat-head .cat-icon { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.cat-head h2 { font-size: 1.35rem; margin: 0 0 var(--space-2); }
.cat-head p { margin: 0; color: var(--color-text-soft); }

.feature-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}
.feature-card .f-icon { font-size: 1.5rem; line-height: 1; }
.feature-card h3 { font-size: 1.02rem; margin: 0; }
.feature-card .f-does { margin: 0; color: var(--color-text-soft); font-size: 0.94rem; }
.feature-card .f-protects {
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.9rem;
}

/* --- Platform availability (features) --- */
.platform-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.platform {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}
.platform .p-icon { width: 2rem; height: 2rem; color: var(--color-primary); }
.platform .p-icon img, .platform .p-icon svg { width: 2rem; height: 2rem; display: block; }
.platform h3 { font-size: 1.02rem; margin: 0; }
.platform p { margin: 0; color: var(--color-text-soft); font-size: 0.94rem; }
.platform .p-avail {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Tier cards (features + pricing) --- */
.tier-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
}
.tier {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-6);
}
.tier--featured { border: 2px solid var(--color-primary); }
.tier-name { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; margin: 0 0 var(--space-2); }
.tier-badge { display: inline-flex; align-items: center; height: 1.75rem; }
.tier-badge svg { height: 1.4rem; width: auto; display: block; }
.tier-badge--vip { color: var(--color-primary); }
.tier-badge--vip-plus { color: var(--color-accent); }
.tier-chip {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.tier-desc { margin: 0 0 var(--space-4); color: var(--color-text-soft); }
.tier-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.tier-list li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; }
.tier-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.tier-list li strong { font-weight: 700; }
.tier .btn { margin-top: auto; align-self: flex-start; }

/* A grid holding one tier shouldn't stretch that card to the full container. */
.tier-grid--single { grid-template-columns: minmax(0, 32rem); }

/* Empty chip slot: reserves the popular chip's height so every price in the row
   sits on the same baseline. */
.tier-chip--ghost { visibility: hidden; }

/* --- Comparison table --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
}
.cmp caption {
  caption-side: top;
  text-align: left;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  padding-bottom: var(--space-3);
}
.cmp th, .cmp td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  text-align: left;
}
.cmp thead th {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  position: sticky;
  top: 0;
  background: var(--color-surface-soft);
}
.cmp tbody th { font-weight: 400; font-size: 0.94rem; }
.cmp td { text-align: center; width: 6.5rem; }
.cmp .yes { color: var(--color-primary); font-weight: 700; }
.cmp .no { color: var(--color-text-soft); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

/* --- Price table ---
   Deliberately NOT a radio/:checked currency switcher. pricing.html was the only page
   on the site carrying form elements and the only page the CMS importer dropped — the
   same class of silent rejection as a <script>. A plain table has no interactive state
   to strip, and puts every price in the crawlable DOM instead of behind a :checked
   selector. */
.cur-head { margin-top: var(--space-10); }
.cur-h { font-size: 1.15rem; margin: 0; }
.rates th[scope="row"] { font-weight: 700; font-family: var(--font-heading); white-space: nowrap; }
.rates td {
  text-align: right;
  width: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rates thead th { text-align: right; }
.rates thead th:first-child { text-align: left; }
.per-sm { color: var(--color-text-soft); font-size: 0.8em; }

.plans {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
  text-align: center;
}
.plan--popular { border: 2px solid var(--color-primary); }
.plan h3 { font-size: 1rem; margin: 0; }
.plan .amount {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.plan .per { font-size: 0.85rem; color: var(--color-text-soft); }
.plan .total { margin: 0; font-size: 0.85rem; color: var(--color-text-soft); }
.plan .save {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.plan .tier-chip { align-self: center; }
.tier-mark {
  height: 1.6rem;
  width: auto;
  margin-bottom: var(--space-3);
}

.callout {
  background: var(--color-surface-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5);
  margin-top: var(--space-8);
  max-width: 60ch;
}
.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-3); }