/* Brand fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

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

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

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 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;
  overflow-x: hidden;
  max-width: 100%;
}

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: #F6F1F4;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F3E6EE;
  --color-text: #1A1018;
  --color-text-soft: #6D5A66;
  --color-primary: #5C1F78;
  --color-primary-dark: #3B1452;
  --color-primary-light: #F4D6E8;
  --color-accent: #E31B86;
  --color-focus: #E31B86;

  /* Typography (brand-guidelines) */
  --font-heading: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "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. */
  --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: #120814;   /* dark band so the light gradient logo stays legible */
  --header-fg: #F6F1F4;      /* light nav on the dark band */
  --btn-radius: var(--radius-md);
  --card-radius: var(--radius-sm);
  --card-shadow: none;
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  --chip-radius: var(--radius-sm);

  /* Aliases consumed by the registration flow styles */
  --color-secondary: var(--color-primary);
  --color-error: color-mix(in srgb, var(--color-accent) 62%, #1A1018);
}

/* 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;
  min-width: 0;
  max-width: 100%;
}
.site-header-row > * {
  min-width: 0;
}

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

/* 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;
  filter: brightness(1.4) saturate(1.08) drop-shadow(0 0 10px rgba(227, 27, 134, 0.35));
}


/* Native HTML nav. CSS-only drawer (checkbox). No JavaScript, so ZIP import stays valid. */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: var(--space-2);
  cursor: pointer;
  margin-left: auto;
}
.nav-toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--header-fg);
  display: block;
}
.site-nav .nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav .nav-list a {
  color: var(--header-fg);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.site-nav .nav-list a:hover {
  color: var(--color-accent);
}
.site-nav .nav-list .nav-join,
.site-nav .nav-list .nav-cta {
  display: none;
}
.site-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.site-footer .footer-nav a {
  color: var(--color-text-soft);
  font-size: 0.9rem;
}
.site-footer .footer-nav a:hover {
  color: var(--color-primary);
}
.site-footer .photo-disclaimer {
  font-size: 0.8rem;
  max-width: 52rem;
  margin: var(--space-6) 0 0;
  color: var(--color-text-soft);
}

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
  .site-cta { display: none; }
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 20rem);
    background: #120814;
    color: var(--header-fg);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    z-index: 30;
  }
  .nav-toggle-input:checked ~ .site-nav {
    transform: translateX(0);
  }
  .site-nav .nav-list {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: var(--space-4);
  }
  .site-nav .nav-list .nav-join,
  .site-nav .nav-list .nav-cta {
    display: list-item;
  }
  .site-nav .nav-list .nav-join {
    margin-top: var(--space-2);
  }
}
/* Default: header CTA row is off. Phones get logo + hamburger only.
   Sign in / Create your profile live in the drawer (.nav-join / .nav-cta).
   Never put display:inline-flex on .site-cta / .site-nav AFTER the mobile
   media query: same specificity, later rule wins, and the page pans sideways. */
.site-cta {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    position: static;
    transform: none;
    width: auto;
    inset: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    flex-direction: row;
  }
  .site-cta {
    display: inline-flex;
  }
}

/* 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-accent);
  border-bottom-color: var(--color-accent);
}

.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: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover { transform: none; }
.btn:active { transform: none; }
.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-accent);
  color: #fff;
  box-shadow: none;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--color-accent) 82%, #000);
  box-shadow: none;
}

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


/* Full-bleed dating-site hero: photo edge to edge, copy over a dark scrim.
   Faces stay in frame via object-position. No JavaScript. */
.hero-full {
  position: relative;
  isolation: isolate;
  min-height: min(38rem, 88vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.hero-full-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  z-index: 0;
}
.hero-full-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(18, 8, 20, 0.88) 0%, rgba(18, 8, 20, 0.42) 48%, rgba(18, 8, 20, 0.18) 100%);
}
.hero-full-copy {
  position: relative;
  z-index: 2;
  padding: var(--space-12) 0 var(--space-10);
  max-width: 38rem;
}
.hero-full .hero-title {
  color: #fff;
  font-size: clamp(2rem, 4.6vw, 3.35rem);
  margin: 0 0 var(--space-4);
}
.hero-full .hero-sub {
  color: color-mix(in srgb, #fff 90%, transparent);
  font-size: 1.15rem;
  margin: 0 0 var(--space-6);
}
.hero-full .chip {
  background: color-mix(in srgb, #fff 16%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
}
.hero-full .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero-full .btn-secondary {
  background: color-mix(in srgb, #fff 10%, transparent);
  color: #fff;
  border-color: color-mix(in srgb, #fff 45%, transparent);
}
.hero-full .btn-secondary:hover {
  background: color-mix(in srgb, #fff 18%, 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;
}

.page-home { --logo-height: 3.25rem; }
@media (min-width: 1024px) {
  .page-home { --logo-height: 3.75rem; }
}
.home-intro { max-width: 44rem; }
.home-card {
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  box-shadow: var(--card-shadow);
}
.home-card h2, .home-card h3 { margin-top: 0; }
.home-band { background: var(--color-surface-soft); }
.home-final {
  background: #120814;
  color: #F6F1F4;
  text-align: center;
}
.home-final h2 { color: #fff; }
.home-final .btn-ghost { color: #fff; border-color: color-mix(in srgb, #fff 40%, transparent); }


/* Homepage photography bands, splits, and card photos.
   New classes only. Tokens from :root. Cards keep --card-radius (not pills). */
.home-photo-band {
  position: relative;
  overflow: hidden;
  height: min(24rem, 56vw);
  min-height: 12rem;
  background: var(--color-primary-dark);
}
.home-photo-band-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-photo-band-img--urban {
  object-position: center 40%;
}

.split-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.split-photo-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--color-surface-soft);
  aspect-ratio: 4 / 5;
}
.split-photo--wide .split-photo-media {
  aspect-ratio: 4 / 3;
}
.split-photo-media img,
.split-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-photo-img--embrace { object-position: center 30%; }
.split-photo-img--wine { object-position: center 26%; }
.split-photo-img--table { object-position: center 42%; }
.split-photo-copy h2 { margin-top: 0; }
.split-photo-copy p { max-width: 44rem; }

@media (min-width: 768px) {
  .split-photo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-10);
  }
  .split-photo--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
  .split-photo--flip .split-photo-media { order: 2; }
  .split-photo--flip .split-photo-copy { order: 1; }
}

.home-card--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.home-card-body {
  padding: var(--space-6);
}
.home-card-body h2,
.home-card-body h3 {
  margin-top: 0;
}
.card-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-surface-soft);
}
.card-photo--article {
  aspect-ratio: 4 / 3;
}
.card-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-photo-img--kiss { object-position: center 42%; }
.card-photo-img--nuzzle { object-position: center 28%; }
.card-photo-img--walk { object-position: center 42%; }
.card-photo-img--evening { object-position: center 36%; }
.card-photo-img--hold { object-position: center 26%; }
.card-photo-img--bed { object-position: center 36%; }

.home-final--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(26rem, 70vh);
  display: flex;
  align-items: flex-end;
  background: #120814;
}
.home-final-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% 40%;
  z-index: 0;
}
.home-final-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(18, 8, 20, 0.92) 0%, rgba(18, 8, 20, 0.55) 48%, rgba(18, 8, 20, 0.28) 100%);
}
.home-final-copy {
  position: relative;
  z-index: 2;
  padding: var(--space-12) 0 var(--space-10);
}


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

   IMPORTANT - an undefined token is worse than a wrong one. a missing custom property with no
   --x defined does NOT fall back; it invalidates the whole declaration and the
   browser drops it. So `padding from a missing space token` 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: 100%;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* not 1fr: that floors at min-content */
  gap: var(--space-8);
  padding-right: var(--space-4);
  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);
    padding-right: max(var(--space-4), calc((100vw - var(--container-max)) / 2));
  }
}

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

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

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

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

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

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

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

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

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

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

/* Running tally of what is banked. Re-written on every step. */
.hp-reg-headstart {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  min-height: 1.4rem;
}
.hp-reg-headstart-tick {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: var(--color-bg);
  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: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-2);
}
.hp-reg-dob > * { min-width: 0; }
@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: var(--color-error);
}
.hp-reg-error[data-shown="true"] { display: block; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hp-reg-exit-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-primary-dark) 78%, transparent);
  border: 0;
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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


/* ---- Registration flow: brand token aliases and homepage hero layout ---- */
.btn-accent {
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: none;
}
.btn-accent:hover {
  background: color-mix(in srgb, var(--color-accent) 82%, #000);
  box-shadow: none;
}

.hp-reg-choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-reg-couple-dob[hidden],
.hp-reg-zip-wrap[hidden] {
  display: none !important;
}

.hero-full.hp-hero--reg {
  align-items: center;
}
.hero-full.hp-hero--reg .hero-full-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding: var(--space-12) 0 var(--space-10);
  align-items: center;
}
.hero-full.hp-hero--reg .hero-full-copy {
  max-width: none;
  padding: 0;
  position: relative;
  z-index: 2;
}
@media (min-width: 980px) {
  .hero-full.hp-hero--reg {
    min-height: min(44rem, 92vh);
    align-items: center;
  }
  .hero-full.hp-hero--reg .hero-full-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: var(--space-12);
  }
}
@media (max-width: 979px) {
  .hero-full.hp-hero--reg {
    min-height: 0;
    align-items: flex-end;
  }
  .hero-full.hp-hero--reg .hero-sub { display: none; }
}


/* ===== Inner pages: How it works + Safety ===== */
/* Shared chrome tweaks so inner pages match the homepage header size. */
.page-inner { --logo-height: 3.25rem; }
@media (min-width: 1024px) {
  .page-inner { --logo-height: 3.75rem; }
}

.site-nav .nav-list a[aria-current="page"] {
  color: var(--color-accent);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  font-size: 0.85rem;
}
.footer-legal a { color: var(--color-text-soft); }
.footer-legal a:hover { color: var(--color-primary); }

.page-crumb {
  padding-top: var(--space-4);
}

/* Shorter full-bleed hero for inner pages. Faces stay in frame via object-position. */
.page-hero {
  min-height: min(28rem, 72vh);
  align-items: flex-end;
}
.page-hero .hero-full-copy {
  max-width: 40rem;
  padding: var(--space-10) 0 var(--space-8);
}
.page-hero .hero-title {
  font-size: clamp(1.85rem, 3.8vw, 3rem);
}
.page-hero-img--evening {
  object-position: center 28%;
}
.page-hero-img--walk {
  object-position: center 42%;
}

.page-prose {
  max-width: 44rem;
}
.page-prose p,
.page-copy p {
  font-size: 1.05rem;
  max-width: 44rem;
}
.page-copy h2 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
}
.page-copy h3 {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.page-lede {
  font-size: 1.15rem;
  max-width: 44rem;
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}

.split-media {
  align-items: center;
}
.split-media-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--color-surface-soft);
  aspect-ratio: 4 / 3;
}
.split-media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jump-list a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.safety-cat + .safety-cat {
  margin-top: var(--space-4);
}
.safety-cat-head {
  margin-bottom: var(--space-4);
}
.safety-cat-kicker {
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}
.safety-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}
.safety-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-primary-light);
  font-size: 1.15rem;
  line-height: 1;
}
.safety-card .card-title {
  margin-bottom: 0;
}
.protects {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}
.protects-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
  color: var(--color-primary-dark);
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.checklist li {
  padding-left: var(--space-6);
  position: relative;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.page-inner .grid > .home-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.page-inner .grid > .home-card > p:last-child:has(.btn) {
  margin-top: auto;
}
.safety-card .protects {
  margin-top: auto;
}


/* =========================================================================
   COMPARISONS PAGES ONLY  (.compare-*)
   Hub: site/comparisons.html  |  Pages: site/comparisons/<slug>.html
   Do not reuse these selectors on homepage, how-it-works, or safety.
   ========================================================================= */
.compare-page .page-copy a,
.compare-page .page-prose a,
.compare-hub .page-copy a,
.compare-hub .page-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.compare-page .page-copy a:hover,
.compare-page .page-prose a:hover,
.compare-hub .page-copy a:hover,
.compare-hub .page-prose a:hover {
  color: var(--color-accent);
}

.compare-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: var(--space-6) 0;
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 36rem;
  font-size: 0.98rem;
}
.compare-table th,
.compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.compare-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  background: var(--color-primary-dark);
  color: #F6F1F4;
}
.compare-table th:first-child {
  background: var(--color-primary);
}
.compare-table tbody th {
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-weight: 600;
  width: 22%;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}
.compare-table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.compare-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.compare-card-media {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-soft);
}
.compare-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.compare-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}
.compare-card-body .card-title {
  margin: 0;
  font-size: 1.15rem;
}
.compare-card-body .card-text {
  margin: 0;
}
.compare-card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.compare-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.compare-featured-media {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-soft);
}
.compare-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
.compare-featured-copy {
  padding: 0 var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compare-featured-copy h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
}
@media (min-width: 768px) {
  .compare-featured {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .compare-featured-media {
    aspect-ratio: 4 / 3;
    height: 100%;
  }
  .compare-featured-copy {
    padding: var(--space-8) var(--space-8) var(--space-8) 0;
  }
}

.compare-related .card-title {
  font-size: 1.05rem;
}

.page-hero-img--compare-hub { object-position: center 58%; }
.page-hero-img--compare-tinder { object-position: left 40%; }
.page-hero-img--compare-feeld { object-position: center 28%; }
.page-hero-img--compare-aff { object-position: center 30%; }
.page-hero-img--compare-am { object-position: right 42%; }
.page-hero-img--compare-couples { object-position: center 28%; }



/* ===== Articles hub and article pages only ===== */
/* Named block for the articles hub and individual article pages. Do not reuse these selectors on other page types. */

.articles-hero {
  background: var(--color-primary-dark);
  color: #fff;
  padding: var(--space-10) 0 var(--space-12);
}

.articles-hero .chip {
  background: color-mix(in srgb, #fff 16%, transparent);
  color: #fff;
}

.articles-hero h1 {
  color: #fff;
  margin: var(--space-3) 0 var(--space-4);
}

.articles-hero .hero-sub {
  color: color-mix(in srgb, #fff 88%, transparent);
  max-width: 40rem;
  margin: 0;
  font-size: 1.15rem;
}

.articles-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 768px) {
  .articles-featured {
    grid-template-columns: 1.05fr 1fr;
  }
}

.articles-featured-media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  aspect-ratio: 16 / 9;
}

.articles-featured-media img,
.article-teaser-media img,
.article-hero-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.articles-featured-copy h2 {
  margin-top: 0;
}

.articles-featured-copy h2 a {
  color: inherit;
}

.articles-featured-copy h2 a:hover {
  color: var(--color-primary);
}

.article-teaser {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-teaser-media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--space-4);
}

.article-teaser h3 {
  margin: var(--space-3) 0 var(--space-2);
}

.article-teaser h3 a {
  color: inherit;
}

.article-teaser h3 a:hover {
  color: var(--color-primary);
}

.article-teaser .muted {
  margin-bottom: 0;
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 0.92rem;
}

.article-wrap {
  max-width: 46rem;
}

.article-hero-fig {
  margin: 0 0 var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  aspect-ratio: 16 / 9;
}

.article-kicker {
  margin: 0 0 var(--space-3);
}

.article-wrap h1 {
  margin: 0 0 var(--space-3);
}

.article-byline {
  color: var(--color-text-soft);
  margin: 0 0 var(--space-6);
}

.article-lede {
  font-size: 1.12rem;
}

.article-body h2 {
  margin-top: var(--space-10);
}

.article-body a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body a:hover {
  color: var(--color-accent);
}

.article-body ul,
.article-body ol {
  padding-left: 1.2rem;
}

.article-body li + li {
  margin-top: var(--space-2);
}

.article-tags {
  margin-top: var(--space-8);
}

.article-related h2 {
  margin-bottom: var(--space-6);
}

.articles-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}

.articles-tag-row .chip {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ===== Locations hub and country pages only ===== */
/* Unique to /locations and /locations/<country>. Do not reuse on homepage, how-it-works, safety, or comparisons. */

.page-locations .loc-hero-text {
  padding: var(--space-10) 0 var(--space-6);
}
.page-locations .loc-hero-text h1 {
  font-size: clamp(1.85rem, 3.8vw, 3rem);
  margin: var(--space-3) 0 var(--space-4);
}
.page-locations .loc-hero-text .hero-sub {
  max-width: 44rem;
  color: var(--color-text);
}

.page-locations .loc-note {
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  max-width: 44rem;
}
.page-locations .loc-note p { margin: 0; }

.page-locations .loc-kicker {
  margin: 0 0 var(--space-2);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.page-locations .loc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.page-locations .loc-card h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-size: 1.3rem;
}
.page-locations .loc-card p {
  margin-top: 0;
}
.page-locations .loc-card-link {
  margin-top: auto;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-locations .loc-card-link:hover { color: var(--color-accent); }

.page-locations .loc-article {
  max-width: 44rem;
}
.page-locations .loc-article h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
}
.page-locations .loc-article h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.page-locations .loc-article p,
.page-locations .loc-article li {
  font-size: 1.05rem;
}
.page-locations .loc-article a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-locations .loc-article a:hover { color: var(--color-accent); }

.page-locations .loc-figure {
  margin: var(--space-6) 0 var(--space-8);
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--color-surface-soft);
  max-width: 36rem;
}
.page-locations .loc-figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 40%;
  max-height: 32rem;
}
.page-locations .loc-figure figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.page-locations .page-copy a,
.page-locations .page-prose a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-locations .page-copy a:hover,
.page-locations .page-prose a:hover {
  color: var(--color-accent);
}