/*
  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: #FCFBF7;            /* Warm White — main background */
  --color-surface: #FFFFFF;       /* White — cards, panels */
  --color-surface-soft: #F5F3EC;  /* Country Cream — warm section bands */
  --color-text: #273033;          /* Charcoal — body copy */
  --color-text-soft: #5A6A68;     /* Muted body — 5.55:1 on Warm White */
  --color-primary: #283F41;       /* Grounded Deep — header, nav, footer, headings */
  --color-primary-dark: #1F3435;  /* Deep Woodland — deepest backgrounds */
  --color-primary-light: #A9BBA8; /* Soft Sage — soft panels, hover */
  --color-accent: #769979;        /* Grounded Leaf — icons, active states, decoration */
  --color-focus: #597D5D;         /* Leaf Deep — focus ring, readable on light and dark */

  /* Extended palette (brand-guidelines) */
  --color-accent-deep: #597D5D;   /* Leaf Deep — CTA fills. 4.65:1 with white text (AA).
                                     Grounded Leaf #769979 is only 3.18:1 with white and
                                     must not carry button text under 18.66px bold. */
  --color-link: #547657;          /* Leaf Link — inline text links on light surfaces.
                                     Leaf Deep #597D5D is 4.49:1 on Warm White and 4.19:1
                                     on Country Cream, both below the 4.5:1 AA floor for
                                     body text. This is 4.94:1 and 4.61:1. Buttons keep
                                     Leaf Deep, because a fill only needs 3:1. */
  --color-border: #DDE3DD;        /* Border */

  /* Typography (brand-guidelines) */
  --font-heading: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, 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. */
  --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-pill);
  --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 links measured 38x22 on mobile, just under the 24px minimum target
   size. They are navigation rather than inline prose, so the WCAG 2.2 SC 2.5.8
   inline exception does not cover them. Padding lifts them to 24px without
   changing the visual line. Inline links inside a paragraph are deliberately NOT
   padded: the exception does apply there and padding would wreck the rhythm. */
.breadcrumb a {
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

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

/* Spacing utilities are defined at the very END of this file. They have to win
   over component rules that set `margin: 0` (`.section-lede`, `.btn`), and with
   equal specificity the later rule wins. Do not move them back up here. */

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

/* ===== Trust bar (social proof) =====
   Verified badge + rated member count + star rating.
   CSS + inline SVG only, no JavaScript. The star fill is driven by a
   custom-property data binding on .stars, e.g. style="--rating: 94%".
   Two variants: .trust-bar--on-media sits over a photographic hero,
   .trust-bar--band sits on its own solid strip. */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: #fff;
}

.trust-bar--on-media {
  background: color-mix(in srgb, var(--color-primary) 62%, transparent);
  backdrop-filter: saturate(120%) blur(2px);
}

.trust-bar--band {
  background: var(--color-primary);
}

.trust-badge {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
}

.trust-badge svg { width: 100%; height: 100%; display: block; }

.trust-figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.trust-count {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.375rem, 5vw, 1.875rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.trust-label {
  font-size: clamp(0.8125rem, 2.6vw, 0.9375rem);
  font-weight: 500;
  color: var(--color-primary-light);
}

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

.trust-score {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Five stars, partially filled by --rating (a percentage). */
.stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  color: color-mix(in srgb, var(--color-primary-dark) 62%, transparent);
}

.stars svg { width: 6.5rem; height: auto; display: block; }

.stars-fill {
  position: absolute;
  inset: 0;
  width: var(--rating, 100%);
  overflow: hidden;
  color: #fff;
}

.stars-fill svg { width: 6.5rem; }

.trust-note {
  flex-basis: 100%;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-primary-light);
}

@media (min-width: 480px) {
  .trust-bar { gap: var(--space-4) var(--space-6); padding: var(--space-3) var(--space-6);
               border-radius: var(--radius-pill); }
  .trust-badge { width: 2.5rem; height: 2.5rem; }
}

/* ===== Canvas nav (menu.navigation.default) theming =====
   Every selector is at least 0,2,0 so it beats the snippet's inline <style>,
   which loads after global.css and would otherwise win at equal specificity.
   The drawer stays LIGHT on purpose: the CMS serves the primary dark-on-transparent
   wordmark into the drawer, so a dark drawer would make it invisible. */
.hs-canvas-nav .hs-canvas-nav__drawer {
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.hs-canvas-nav .hs-canvas-nav__overlay {
  background: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* Snippet hardcodes the Join CTA to black. Override to the AA-safe brand green. */
.hs-canvas-nav .hs-canvas-nav__cta--primary {
  background: var(--color-accent-deep);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
}

.hs-canvas-nav .hs-canvas-nav__cta--primary:hover {
  background: var(--color-primary);
}

.hs-canvas-nav .hs-canvas-nav__cta--secondary {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 30%, 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 {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
}

.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link:hover,
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary:hover {
  color: var(--color-accent-deep);
}

.hs-canvas-nav .hs-canvas-nav__close { color: var(--color-primary); }

.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__link {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__link:hover {
  color: var(--color-accent-deep);
}

.hs-canvas-nav .hs-canvas-nav__logo { max-width: 150px; }

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

/* Header CTAs — the toolkit's .btn-sm renders at 35px, slight for the site's
   primary conversion action on a 45-65 audience. Bumped inside the header only. */
.site-header .btn-sm {
  min-height: 2.625rem;
  padding-inline: var(--space-5);
}

/* Desktop-only header CTAs — the CMS drawer supplies them on mobile. */
@media (max-width: 1023px) {
  .desktop-only { display: none; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-primary);
  min-height: 33rem;
  display: flex;
  align-items: flex-end;
}

.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 42%;
}

/* Deep Grounded overlay, 55–75% per the brand guidelines. Vertical on mobile so
   copy sits over sky, horizontal on desktop so the subject stays clear. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 74%, transparent) 30%,
    color-mix(in srgb, var(--color-primary) 46%, transparent) 62%,
    color-mix(in srgb, var(--color-primary-dark) 88%, transparent) 100%
  );
}

.hero-inner {
  position: relative;
  padding: var(--space-10) 0 var(--space-6);
  color: #fff;
  width: 100%;
}

.hero h1 {
  font-size: clamp(2.125rem, 7.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--space-3);
  max-width: 13ch;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.25);
}

.hero-sub {
  font-size: clamp(1rem, 2.4vw, 1.1875rem);
  line-height: 1.5;
  margin: 0 0 var(--space-6);
  max-width: 34ch;
  color: #EDF2EC;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
  .hero { min-height: 40rem; align-items: center; }
  .hero-inner { padding: var(--space-12) 0; }
  .hero::after {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-primary) 93%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 86%, transparent) 34%,
      color-mix(in srgb, var(--color-primary) 30%, transparent) 66%,
      transparent 100%
    );
  }
  .hero-copy { max-width: 34rem; }
  .hero h1 { max-width: 16ch; }
}

/* ===== Hero actions (live home page) =====
   The platform owns the sign-up flow and injects it behind {{join.url}}, so the
   hero hands off with one button rather than collecting fields itself. */
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.hero-actions .btn {
  min-height: 3.5rem;
  padding-inline: var(--space-10);
  font-size: 1.0625rem;
  box-shadow: var(--shadow-lg);
}

.hero-fine {
  margin: 0;
  font-size: 0.875rem;
  color: #DDE7DC;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 479px) {
  .hero-actions { align-self: stretch; }
  .hero-actions .btn { width: 100%; padding-inline: var(--space-5); }
  .hero-fine { align-self: center; }
}

/* It's the only conversion action above the fold now, so give it real weight. */
@media (min-width: 1024px) {
  .hero-actions .btn { min-height: 3.75rem; font-size: 1.125rem; padding-inline: var(--space-12); }
  .hero-fine { font-size: 0.9375rem; }
}

/* ===== Registration starter (test-home only) =====
   Native form. Gender, seeking and age band post straight to the platform
   sign-up flow via GET. No JavaScript, so the page survives the CMS import. */
.reg {
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 30rem;
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.reg-row {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.reg-row legend {
  float: left;
  padding: 0;
  margin-right: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

.reg-opt { position: relative; }

.reg-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.reg-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.reg-opt input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.reg-opt input:focus-visible + span {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.reg-age {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.reg-age > span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

.reg-age select {
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  padding: 0 var(--space-3);
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
}

.reg-fine {
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  text-align: center;
}

.hero .trust-bar { margin-top: var(--space-5); }

/* Inverted CTA — for use on the deep green and woodland bands.
   Leaf Deep #597D5D sits at only 2.41:1 against Grounded Deep and 2.82:1 against
   Deep Woodland, both under the 3:1 WCAG 1.4.11 needs for a UI component boundary.
   A white fill with Grounded Deep text is 11.2:1 / 13.1:1 against the band and
   11.2:1 for the label. Use .btn-invert on any dark band, .btn-primary on light. */
.btn-invert {
  background: #fff;
  color: var(--color-primary);
  border: 0;
}

.btn-invert:hover {
  background: var(--color-surface-soft);
  color: var(--color-primary-dark);
}

.band-deep .btn-invert:focus-visible,
.band-woodland .btn-invert:focus-visible {
  outline-color: var(--color-primary-light);
}

/* ===== Section furniture ===== */
.band-cream { background: var(--color-surface-soft); }
.band-deep { background: var(--color-primary); color: #fff; }
.band-woodland { background: var(--color-primary-dark); color: #fff; }
.band-deep .section-lede,
.band-woodland .section-lede { color: var(--color-primary-light); }

/* Inline links on dark bands. The default link colour (Leaf Deep) measures
   2.41:1 on Grounded Deep and 2.82:1 on Deep Woodland, both fails. White is
   11.2:1 and 13.1:1. Underlined so it still reads as a link without colour. */
.band-deep p a:not(.btn),
.band-woodland p a:not(.btn),
.band-photo p a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.band-deep p a:not(.btn):hover,
.band-woodland p a:not(.btn):hover,
.band-photo p a:not(.btn):hover { text-decoration-thickness: 2px; }

.section-head { max-width: 40rem; margin: 0 0 var(--space-8); }

.section-head h2 {
  font-size: clamp(1.75rem, 4.4vw, 2.625rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}

.section-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin: 0;
}

.eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-deep);
  margin: 0 0 var(--space-3);
}

.band-deep .eyebrow,
.band-woodland .eyebrow { color: var(--color-primary-light); }

/* ===== Steps ===== */
.steps { counter-reset: step; }

.step {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.step h3 { font-size: 1.1875rem; margin: 0 0 var(--space-2); }
.step p { margin: 0; color: var(--color-text-soft); font-size: 0.9375rem; line-height: 1.6; }

/* <picture> is inline by default, so an <img height:100%> inside it has no
   percentage basis to resolve against and collapses to zero. Every media box
   on this site wraps its <img> in <picture> for AVIF, so this rule is load-bearing. */
.tile-media picture,
.split-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero > picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

/* ===== Lifestyle cards ===== */
.tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: var(--card-border);
}

.tile-media { aspect-ratio: 4 / 3; overflow: hidden; }

.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.tile-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.tile-body h3 { font-size: 1.0625rem; margin: 0 0 var(--space-2); }
.tile-body p { margin: 0; font-size: 0.9375rem; color: var(--color-text-soft); line-height: 1.55; }

/* ===== Split feature ===== */
.split { display: grid; gap: var(--space-6); align-items: center; }

.split-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.split-media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .split-media { aspect-ratio: 5 / 4; }
  .split--flip .split-media { order: 2; }
}

/* ===== Safety list ===== */
.safety-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }

.safety-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.safety-list svg {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  color: var(--color-accent);
}

.safety-list b { display: block; font-family: var(--font-heading); }
.safety-list span { color: var(--color-text-soft); }
.band-deep .safety-list span,
.band-woodland .safety-list span { color: var(--color-primary-light); }

/* ===== App module ===== */
.app-card {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

@media (min-width: 900px) {
  .app-card { grid-template-columns: 1.2fr 1fr; padding: var(--space-10); gap: var(--space-10); }
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);          /* 24px, so each badge keeps 12px clear space —
                                   both stores require a quarter of badge height */
  margin-top: var(--space-6);
}

/* Official store badges, used as supplied. Height only, width auto: the two
   badges carry different built-in padding, so pinning a width would distort them.
   The heights below are tuned so the VISIBLE artwork is 44px on both — Apple's
   artwork fills its canvas, Google's sits 138/150 inside it. That keeps the Google
   badge equal-or-larger, which its guidelines require, and gives both a 44px
   minimum tap target. */
.store-badge {
  display: inline-flex;
  border-radius: var(--radius-sm);
}

.store-badge img {
  width: auto;
  display: block;
}

.store-badge--apple img { height: 2.75rem; }    /* 44px canvas = 44px visible */
.store-badge--google img { height: 2.988rem; }  /* 47.8px canvas = 44px visible */

.store-badge:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

/* ===== Closing CTA ===== */
.cta-close { text-align: center; }
.cta-close h2 { max-width: 20ch; margin-inline: auto; }
.cta-close .section-lede { max-width: 46ch; margin-inline: auto; }
.cta-close .btn { margin-top: var(--space-6); }

/* ===== Footer links — 44px tap targets for a 45-65 audience ===== */
.site-footer .canvas-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .canvas-footer-menu a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.footer-legal a { font-weight: 400; }

/* The footer sits on Warm White, not on a dark band. Soft Sage hover measured
   1.96:1 against it, so links effectively vanished on hover. Grounded Deep is
   10.8:1. Do not put --color-primary-light on a light surface. */
.site-footer .canvas-footer-menu a:hover,
.footer-legal a:hover,
.footer-social a:hover { color: var(--color-primary); }

/* ===== Footer legal row ===== */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
}

/* ===== Footer social row =====
   Kept small on purpose: the Instagram and Facebook accounts are new, so a
   prominent follow module would advertise a low follower count. Icons are 24px
   inside a 44px tap target, which meets the minimum without looking big. */
.footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
}

.footer-social-label {
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px;
  color: var(--color-text-soft);
  transition: color var(--transition-fast);
}

.footer-social a + a { margin-left: var(--space-2); }
.footer-social svg { width: 24px; height: 24px; display: block; }

/* ===== Page hero — compact variant for /dating/ and other inner pages.
   The home page hero is full-bleed and tall; these need to get out of the way
   so the answer block is near the top for both readers and AI extraction. */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--color-primary);
  color: #fff;
}

.page-hero > picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.page-hero > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 45%;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 90%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 76%, transparent) 45%,
    color-mix(in srgb, var(--color-primary-dark) 88%, transparent) 100%
  );
}

.page-hero-inner {
  padding: var(--space-4) 0 var(--space-10);
}

.page-hero h1 {
  font-size: clamp(1.875rem, 6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--space-3);
  max-width: 18ch;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.25);
}

.page-hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.55;
  margin: 0 0 var(--space-6);
  max-width: 46ch;
  color: #EDF2EC;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.page-hero .breadcrumb { color: var(--color-primary-light); }
.page-hero .breadcrumb a { color: #fff; }
.page-hero .breadcrumb [aria-current="page"] { color: var(--color-primary-light); }
.page-hero .breadcrumb-separator { color: var(--color-primary-light); }

@media (min-width: 1024px) {
  .page-hero-inner { padding: var(--space-5) 0 var(--space-12); }
  .page-hero::after {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-primary) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 82%, transparent) 40%,
      color-mix(in srgb, var(--color-primary) 26%, transparent) 72%,
      transparent 100%
    );
  }
}

/* ===== Answer block — question, then the answer in the first sentence.
   This is the shape AI search extracts from, so the direct answer never
   sits behind a paragraph of preamble. */
.answer {
  max-width: 62ch;
  margin: 0 0 var(--space-8);
}

.answer h2 {
  font-size: clamp(1.375rem, 3.2vw, 1.875rem);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  font-weight: 700;
}

.answer-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.answer p + p { margin-top: var(--space-4); }
.answer p { color: var(--color-text-soft); line-height: 1.65; margin: 0; }
.answer a { color: var(--color-accent-deep); font-weight: 600; text-decoration: underline; }
.answer a:hover { color: var(--color-primary); }

/* ===== FAQ — native details/summary, no JavaScript ===== */
.faq { max-width: 62ch; }

.faq details {
  border-bottom: 1px solid var(--color-border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  min-height: 44px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--color-accent-deep);
  border-bottom: 2px solid var(--color-accent-deep);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.faq details > p {
  margin: 0 0 var(--space-5);
  color: var(--color-text-soft);
  line-height: 1.65;
  max-width: 58ch;
}

.faq details > p + p { margin-top: calc(var(--space-4) * -1 + var(--space-5)); }

/* ===== Link cards — the /dating/ hub grid ===== */
.link-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: var(--card-border);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.link-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.link-card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.link-card-media img { width: 100%; height: 100%; object-fit: cover; }

.link-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.link-card-body h3 { font-size: 1.125rem; margin: 0 0 var(--space-2); }
.link-card-body p { margin: 0 0 var(--space-4); font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-soft); }

.link-card-go {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-accent-deep);
}

.link-card:hover .link-card-go { color: var(--color-primary); }

/* ===== Related links row ===== */
.related { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.related a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.related a:hover { background: var(--color-surface-soft); border-color: var(--color-accent-deep); }

/* ===== County browse grid on /community — one .county-group per nation,
   each an <h3> + a .related row of links to /community/<county>. ===== */
.county-group + .county-group { margin-top: var(--space-8); }
.county-group h3 { margin: 0; font-size: 1.0625rem; }
.county-group .related { margin-top: var(--space-3); }

/* ===== Point cards — benefit cards, deliberately NOT numbered.
   Same shape as .step, but .step auto-numbers and these aren't a sequence. */
.point {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.point::before {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-deep);
  margin-bottom: var(--space-4);
}

.point::after {
  content: "";
  position: absolute;
  top: 2.35rem;
  left: 2.4rem;
  width: 0.45rem;
  height: 0.85rem;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
}

.point h3 { font-size: 1.1875rem; margin: 0 0 var(--space-2); }
.point p { margin: 0; color: var(--color-text-soft); font-size: 0.9375rem; line-height: 1.6; }

/* ===== Photographic CTA band — the brand's closing device.
   Warm White -> photography -> deep green is the stated section rhythm; this is
   the photography step doing duty as the final call to action. */
.band-photo {
  position: relative;
  isolation: isolate;
  background: var(--color-primary-dark);
  color: #fff;
}

.band-photo > picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.band-photo > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.band-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary-dark) 84%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 72%, transparent) 50%,
    color-mix(in srgb, var(--color-primary-dark) 88%, transparent) 100%
  );
}

.band-photo .section-lede { color: #EDF2EC; }
.band-photo h2 { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }

/* ===== Pricing ===== */
.price-grid { display: grid; gap: var(--space-6); align-items: stretch; }
@media (min-width: 860px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.price-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.price-card--featured {
  border-color: var(--color-accent-deep);
  box-shadow: var(--shadow-md);
}

.price-tier {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
}

.price-flag {
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-deep);
  color: #fff;
}

.price-strap { margin: 0 0 var(--space-5); color: var(--color-text-soft); font-size: 0.9375rem; line-height: 1.55; }

.price-rows { list-style: none; margin: 0 0 var(--space-5); padding: 0; }

.price-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.price-rows li:first-child { border-top: 0; }
.price-rows .term { color: var(--color-text-soft); }
.price-rows .amt { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; white-space: nowrap; }
.price-rows .amt small { font-weight: 400; font-size: 0.8125rem; color: var(--color-text-soft); }
.price-rows .tot { display: block; font-size: 0.75rem; color: var(--color-text-soft); font-weight: 400; }

.price-free { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin: 0 0 var(--space-5); }

.price-inc { list-style: none; margin: 0 0 var(--space-6); padding: 0; }

.price-inc li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.price-inc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.4rem;
  height: 0.75rem;
  border-right: 2.5px solid var(--color-accent-deep);
  border-bottom: 2.5px solid var(--color-accent-deep);
  transform: rotate(45deg);
}

.price-card .btn { margin-top: auto; }

/* ===== Comparison table ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compare th, .compare td { padding: var(--space-3) var(--space-4); text-align: left; }
.compare thead th {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.compare thead th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 6.5rem; }
.compare tbody tr { border-top: 1px solid var(--color-border); }
.compare tbody tr:nth-child(even) { background: var(--color-surface-soft); }
.compare .yes { color: var(--color-accent-deep); font-weight: 700; }
.compare .no { color: var(--color-text-soft); }

/* Prose variant, for the /comparisons pages.
   The base `.compare` pins non-first columns to 6.5rem and centres them, which
   is right for the tick-and-cross feature table on /pricing and very wrong for
   cells holding a sentence.
   SPECIFICITY TRAP: the base rules are `.compare th:not(:first-child)` (0,2,1).
   A plain `.compare--prose td` is (0,2,0) and LOSES to them, so every override
   here has to carry its own `:not()` or `:nth-child()` to match. Getting this
   wrong squashes both data columns to about 80px, and it looks perfectly
   reasonable in the stylesheet while doing it. */
.compare--prose {
  table-layout: fixed;
  min-width: 44rem;
}
.compare--prose thead td:first-child,
.compare--prose tbody th:first-child { width: 26%; }
.compare--prose thead th:not(:first-child),
.compare--prose tbody td:not(:first-child) {
  width: 37%;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.compare--prose tbody th { font-weight: 600; color: var(--color-primary); vertical-align: top; }
/* Ours is the column that matters, so it carries the tint. */
.compare--prose thead th:nth-child(2) { background: var(--color-primary-dark); }
.compare--prose tbody td:nth-child(2) {
  background: color-mix(in srgb, var(--color-primary-light) 20%, transparent);
}

/* ===== Small print ===== */
.smallprint {
  max-width: 62ch;
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.smallprint b { color: var(--color-text); }
.smallprint p { margin: 0 0 var(--space-3); }
.smallprint p:last-child { margin-bottom: 0; }

/* ===== Grouped FAQ ===== */
.faq-group { margin-bottom: var(--space-10); }
.faq-group > h3 {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

/* ===== Trust strip — third-party and verifiable signals only.
   Anything in here must be independently checkable: a real partnership, a real
   membership body, a real number from our own export. No borrowed endorsement. */
.trust-strip {
  display: grid;
  gap: var(--space-6);
}

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

.trust-item {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-4);
  border-top: 3px solid var(--color-accent-deep);
}

.trust-item b {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.trust-item span { font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-soft); }

/* Standalone link, not inline prose, so it gets no WCAG 2.2 SC 2.5.8 exemption
   and has to clear 24px. It also sat on Leaf Deep against Country Cream, which is
   4.19:1 and under the AA floor for text. --color-link is 4.61:1 there. */
.trust-item a {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.trust-item a:hover { color: var(--color-primary); }

/* Age gate note — used where the audience framing could otherwise be ambiguous. */
.age-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 62ch;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent-deep);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.age-note b { font-family: var(--font-heading); }

/* ===== Region list — aggregate member geography, no PII ===== */
.regions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2) var(--space-6);
}

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

.regions li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.regions .place { font-weight: 600; }
.regions .count { font-family: var(--font-heading); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.stat-row { display: grid; gap: var(--space-6); margin-bottom: var(--space-10); }
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stat { text-align: center; }
.stat b { display: block; font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.stat span { display: block; margin-top: var(--space-2); font-size: 0.9375rem; color: var(--color-text-soft); }
.band-deep .stat span, .band-woodland .stat span { color: var(--color-primary-light); }


/* ===== Articles and comparisons ===== */

.article-page { padding-bottom: var(--space-6); }

.byline {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

/* Article measure. Long-form reads badly at full container width, so the
   body column is capped while the hero stays wide. */
.article-body { max-width: 40rem; }
.article-body h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: clamp(1.375rem, 3.4vw, 1.75rem);
  color: var(--color-primary);
}
.article-body h3 { margin: var(--space-6) 0 var(--space-2); font-size: 1.125rem; }
.article-body p { margin: 0 0 var(--space-4); line-height: 1.7; color: var(--color-text); }
.article-body > p:first-of-type { margin-top: 0; }
.article-body a:not(.btn) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.article-body a:not(.btn):hover { text-decoration-thickness: 2px; }

.article-hero { margin-top: var(--space-6); }
.article-hero picture { display: block; }
.article-hero img {
  width: 100%;
  height: auto;
  border-radius: var(--card-radius);
}

.tick-list { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.tick-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--space-3);
  line-height: 1.6;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--color-accent-deep);
  border-bottom: 2px solid var(--color-accent-deep);
  transform: rotate(-45deg);
}

.pullquote {
  margin: var(--space-8) 0;
  padding: 0 0 0 var(--space-5);
  border-left: 3px solid var(--color-accent);
}
.pullquote p { font-size: 1.25rem; line-height: 1.5; color: var(--color-primary); }
.pullquote cite { font-style: normal; font-size: 0.9375rem; color: var(--color-text-soft); }

.callout {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--color-surface-soft);
  border-left: 3px solid var(--color-accent-deep);
  border-radius: var(--radius-sm);
}
.callout p { margin: 0; font-weight: 600; color: var(--color-primary); }

/* Listicles */
.listicle { max-width: 48rem; }
.listicle-item {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}
.listicle-item:first-child { border-top: 0; padding-top: 0; }
.listicle-body h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: clamp(1.1875rem, 3vw, 1.4375rem);
  color: var(--color-primary);
}
.listicle-body p { margin: 0 0 var(--space-3); line-height: 1.7; }
.listicle-body p:last-child { margin-bottom: 0; }

.listicle-num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}

.listicle-media picture { display: block; }
.listicle-media img { width: 100%; height: auto; border-radius: var(--card-radius); }

@media (min-width: 768px) {
  .listicle-item { grid-template-columns: 1fr; }
  .listicle-item:has(.listicle-media) { grid-template-columns: 18rem 1fr; align-items: start; }
}

/* A landing hero with no photograph behind it. `.page-hero` positions its
   <picture> absolutely and flips the text to white, so a plain variant has to
   put the colours back rather than inherit them. */
/* Focal-point override for heroes whose subjects sit high in the frame.
   The default `.page-hero > picture img` uses `object-position: 70% 45%`, which
   suits a photo with the people low and centre. The hero band is short (it shows
   roughly 46% of a 16:9 source at desktop width), so on a photo where the people
   are already near the top, 45% beheads them. Verified by rendering: 22% still
   cut the tops of heads on `outdoor-walks`, 8% clears them. Re-check visually if
   you apply this to a different photo — the right value is per-image. */
.page-hero--top > picture img { object-position: 70% 8%; }

.page-hero--plain {
  background: var(--color-surface-soft);
  color: var(--color-text);
  min-height: 0;
}
/* `.page-hero` paints a dark gradient in an ::after and sits it at z-index -1,
   which is what makes overlaid text readable on a photograph. A plain hero has
   no photograph, so that gradient just buries the heading in dark-on-dark.
   Kill it. Forgetting this shipped an unreadable /articles H1 once already. */
.page-hero--plain::after { content: none; }
.page-hero--plain .page-hero-inner { padding: var(--space-10) 0; }
.page-hero--plain h1 { color: var(--color-primary); text-shadow: none; }
.page-hero--plain .page-hero-sub { color: var(--color-text-soft); text-shadow: none; }
.page-hero--plain .breadcrumb,
.page-hero--plain .breadcrumb a { color: var(--color-text-soft); text-shadow: none; }
.page-hero--plain .breadcrumb [aria-current] { color: var(--color-primary); }

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


/* ===== Spacing utilities — MUST stay last =====
   Single-class selectors, so they only beat `.section-lede { margin: 0 }` and
   `.btn { margin: 0 }` by source order. Anything appended below this block that
   sets margin on a component will silently kill them. Append above, not below. */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }