/* ============================================
   PointClickFit — Design Tokens
   Brand colors sampled directly from PCF_LogosOnly.png / PCF_Slogan.png
   ============================================ */
:root {
  /* Brand */
  --color-point: #2e005f;      /* purple — "Point" */
  --color-click: #e47200;      /* orange — "Click" */
  --color-fit: #00af00;        /* green  — "Fit" */
  --color-link: #0000e5;       /* blue   — slogan/link color */

  /* Semantic */
  --color-primary: var(--color-point);
  --color-primary-tint: #4a1a86;
  --color-accent: var(--color-click);
  --color-accent-tint: #ff9433;
  --color-success: var(--color-fit);

  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f0ea;
  --color-text: #1c1622;
  --color-text-muted: #5b5468;
  --color-border: #e7e2da;

  --color-on-primary: #ffffff;
  --color-on-accent: #ffffff;

  /* Typography */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale (8pt rhythm, generous for editorial/marketing) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --container-width: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-med: 300ms;
}

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.15; font-weight: 600; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

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

/* Focus states — keep visible everywhere (accessibility requirement) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

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

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-2); }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  min-height: 44px;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-lg { padding: 1.15rem 2rem; font-size: 1.1rem; }
.btn-lg svg { width: 22px; height: 22px; }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 8px 20px -8px rgba(228, 114, 0, 0.55);
}
.btn-accent:hover { background: #cf6800; box-shadow: 0 10px 24px -8px rgba(228, 114, 0, 0.65); }

.btn-success {
  background: var(--color-success);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0, 175, 0, 0.55);
}
.btn-success:hover { background: #009600; box-shadow: 0 10px 24px -8px rgba(0, 175, 0, 0.65); }

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }

.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.btn-block { width: 100%; justify-content: center; }

/* ============================================
   Header / Nav
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.3rem;
  gap: var(--space-3);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.wordmark .wm-point { color: var(--color-point); }
.wordmark .wm-click { color: var(--color-click); }
.wordmark .wm-fit { color: var(--color-fit); }

.site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-logo img {
  height: 58px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-2);
}
.nav-links li { flex-shrink: 0; }
.nav-links a {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-primary);
  background: rgba(46, 0, 95, 0.08);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.nav-links a:hover,
.nav-links a:focus-visible { background: rgba(46, 0, 95, 0.16); }
.nav-links a.active { background: var(--color-primary); color: #fff; }

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

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 0.5rem;
  color: var(--color-primary);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #2e005f 0%, #3d0d78 55%, #4a1a86 100%);
  color: #fff;
  padding-block: var(--space-7) var(--space-6);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(228,114,0,0.35), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(0,175,0,0.28), transparent 40%);
  pointer-events: none;
}
.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: var(--space-6);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  margin-bottom: var(--space-1);
}
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }

.hero h1 {
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.hero h1 em,
.hero-media-title em {
  font-style: normal;
  color: var(--color-accent-tint);
}
.hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.hero-actions .btn {
  min-width: 300px;
  justify-content: center;
}
.hero-note {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-quiz-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-accent-tint);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: var(--space-2);
}
.hero-quiz-link:hover { color: #fff; }
.hero-quiz-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.hero-media {
  position: relative;
}
.hero-media img,
.hero-media video {
  border-radius: var(--radius-lg);
  border: 3px solid rgba(255,255,255,0.3);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  aspect-ratio: 5/4;
  object-fit: cover;
  width: 100%;
  display: block;
  background: #1c1130;
}
/* Two stacked video elements crossfade between hero clips — the standby
   element preloads the next clip while the active one plays, so there's
   never a gap where the poster image flashes back (the old single-video
   swap-src approach cleared the current frame on every clip change,
   which showed on mobile especially since loading the next clip took
   longer over a slower connection). */
.hero-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}
.hero-video.is-active { position: relative; opacity: 1; z-index: 1; }
.hero-media-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  padding-inline: var(--space-3);
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: 2;
}
.hero-badge {
  position: absolute;
  bottom: -1.25rem;
  left: -1.25rem;
  background: #fff;
  color: var(--color-text);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 230px;
}
.hero-badge .icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-badge .icon svg { width: 20px; height: 20px; }
.hero-badge strong { display: block; font-size: 0.85rem; font-weight: 700; }
.hero-badge span { font-size: 0.78rem; color: var(--color-text-muted); }

/* ============================================
   Home browse (replaces the old promise strip — search + region tiles
   surfaced directly on the homepage instead of only on directory.html)
   ============================================ */
.home-browse {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-6) var(--space-7);
}
.home-browse h2 { margin-bottom: var(--space-1); }
.home-browse-sub {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  font-size: 1.05rem;
}

/* ============================================
   Section shell
   ============================================ */
section { padding-block: var(--space-7); }
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-5);
}
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}
.why-marks {
  display: block;
  height: 44px;
  width: auto;
  margin-bottom: 0.9rem;
}
.section-head.center .why-marks { margin-inline: auto; }
.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 0.75rem;
}
.section-head p { color: var(--color-text-muted); font-size: 1.05rem; }

/* ============================================
   Why section
   ============================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

/* ============================================
   Club tiers explainer page
   ============================================ */
.tier-explainer { padding-block: var(--space-6); }
.tier-explainer .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.tier-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.tier-card--budget { border-left-color: var(--color-fit); }
.tier-card--mid { border-left-color: var(--color-link); }
.tier-card--full { border-left-color: var(--color-click); }
.tier-card--luxury { border-left-color: var(--color-point); }
.tier-card .club-tier { margin-bottom: var(--space-2); font-size: 0.9rem; }
.tier-price { font-weight: 700; font-size: 1.05rem; margin-bottom: var(--space-2); }
.tier-desc { color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-2); }
.tier-examples { font-size: 0.92rem; line-height: 1.6; }

.tier-disclaimer { padding-bottom: var(--space-6); }
.tier-disclaimer p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  background: var(--color-bg-alt, #f7f4ee);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

@media (max-width: 860px) {
  .tier-explainer .container { grid-template-columns: 1fr; }
}
.why-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out);
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(46,0,95,0.25);
}
.why-card .icon {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.why-card .icon img { width: 46px; height: 46px; display: block; }
.why-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; font-family: var(--font-body); font-weight: 700; }
.why-card p { color: var(--color-text-muted); font-size: 0.95rem; }

/* ============================================
   Reviews / comparisons grid
   ============================================ */
.reviews-section { background: var(--color-surface-alt); }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.review-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(28,22,34,0.22);
}
.review-media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.review-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.review-card:hover .review-media img { transform: scale(1.06); }
.review-tag {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  color: #fff;
}
.review-tag.tag-comparison { background: var(--color-point); }
.review-tag.tag-guide { background: var(--color-fit); }
.review-tag.tag-money { background: var(--color-click); }
.review-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; }
.review-body h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.review-body p { color: var(--color-text-muted); font-size: 0.92rem; flex: 1; }
.review-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-link);
}
.review-link svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out); }
.review-card:hover .review-link svg { transform: translateX(3px); }
.review-card .review-badge {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

.reviews-more, .why-more { text-align: center; margin-top: var(--space-5); }

/* ============================================
   Video / YouTube teaser
   ============================================ */
.video-section {
  position: relative;
  background: var(--color-primary);
  color: #fff;
  overflow: hidden;
}
.video-section .bg-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.22;
}
.video-section .bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(46,0,95,0.96), rgba(46,0,95,0.78));
}
.video-section .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.video-section .eyebrow { color: var(--color-accent-tint); }
.video-section h2 { color: #fff; margin-bottom: var(--space-2); }
.video-section p.lead { color: rgba(255,255,255,0.8); font-size: 1.05rem; margin-bottom: var(--space-3); }
.video-schedule {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.video-schedule div strong { display: block; font-size: 1.1rem; }
.video-schedule div span { font-size: 0.85rem; color: rgba(255,255,255,0.65); }

.video-thumb {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb .play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%);
}
.video-thumb .play-btn span {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(228,114,0,0.7);
  transition: transform var(--duration-fast) var(--ease-out);
}
.video-thumb:hover .play-btn span { transform: scale(1.08); }
.video-thumb .play-btn svg { width: 26px; height: 26px; color: #fff; margin-left: 3px; }
.video-thumb .caption {
  position: absolute; left: var(--space-2); bottom: var(--space-2); right: var(--space-2);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
}

/* ============================================
   Newsletter
   ============================================ */
.newsletter-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.newsletter-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.newsletter-media img { width: 100%; height: 100%; object-fit: cover; }
.newsletter-form {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  font-size: 1rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.newsletter-form input[type="email"]::placeholder { color: var(--color-text-muted); }
.form-note { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.6rem; }
.form-success {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-2);
  color: var(--color-fit);
  font-weight: 600;
}
.form-success svg { width: 20px; height: 20px; }
.newsletter-form.is-success input,
.newsletter-form.is-success button { display: none; }
.newsletter-form.is-success ~ #newsletter-note { display: none; }

.form-error {
  font-size: 0.85rem;
  font-weight: 600;
  color: #b3261e;
  margin-top: var(--space-2);
}

/* ============================================
   Contact form
   ============================================ */
.contact-section { padding-block: var(--space-6) var(--space-7); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-3); }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.9rem; font-weight: 600; }
.form-group input,
.form-group textarea {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  font: inherit;
  font-size: 1rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-text-muted); }
.form-group textarea { resize: vertical; min-height: 8rem; }
.contact-form .btn { align-self: flex-start; }
.contact-form.is-success .form-group,
.contact-form.is-success button { display: none; }

.btn-secondary {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-border); }

.auth-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.auth-tabs { display: flex; gap: 0.5rem; margin-bottom: var(--space-4); border-bottom: 1.5px solid var(--color-border); }
.auth-tab {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 0.75rem 0.25rem;
  margin-bottom: -1.5px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.auth-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.contact-alt { margin-top: var(--space-3); font-size: 0.92rem; color: var(--color-text-muted); }

.billing-section { margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1.5px solid var(--color-border); }
.billing-section h3 { margin: 0 0 0.5rem; }
.billing-status { color: var(--color-text-muted); }
.card-element {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
}

.faq-item { padding: var(--space-4) 0; border-bottom: 1.5px solid var(--color-border); }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.faq-item p { color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: #1c1130;
  color: rgba(255,255,255,0.75);
  padding-block: var(--space-6) var(--space-4);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-logo {
  display: inline-flex;
  background: #fff;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -14px rgba(0,0,0,0.5);
}
.footer-logo img { height: 38px; width: auto; display: block; }
.footer-tagline { margin-top: 0.6rem; font-size: 0.92rem; color: rgba(255,255,255,0.55); max-width: 32ch; }
.footer-social { display: flex; gap: 0.7rem; margin-top: var(--space-3); }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--color-accent); }
.footer-social svg { width: 18px; height: 18px; }

.footer-col h4 { font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); margin-bottom: var(--space-2); }
.footer-col ul li { margin-bottom: 0.65rem; }
.footer-col a { font-size: 0.92rem; transition: color var(--duration-fast) var(--ease-out); }
.footer-col a:hover { color: #fff; }

.footer-newsletter form { display: flex; gap: 0.5rem; margin-top: var(--space-2); }
.footer-newsletter input[type="email"] {
  flex: 1;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 0.9rem;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,0.45); }
.footer-newsletter .btn { padding: 0.7rem 1.1rem; font-size: 0.9rem; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-badge { left: var(--space-2); }
  .video-section .container { grid-template-columns: 1fr; }
  .video-section .hero-media, .video-thumb { order: -1; }
  .newsletter-section .container { grid-template-columns: 1fr; }
  .newsletter-media { order: -1; }
}

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 720px) {
  .why-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  section { padding-block: var(--space-6); }
  .hero { padding-block: var(--space-6) var(--space-5); }
}

/* Was max-width:400px — too narrow to catch most real phones (common
   widths run 375-430px), so the full "Subscribe on YouTube" button tried
   to render at full size on ordinary phones and overflowed off the right
   edge of the screen instead of compacting. 600px comfortably covers the
   whole phone range without reaching into tablet widths. */
@media (max-width: 600px) {
  .wordmark { font-size: 1.3rem; }
  .site-logo img { height: 46px; }
  .nav { gap: var(--space-2); }
  .nav-cta .btn-label { display: none; }
  .nav-cta .btn { padding: 0.75rem; }
  .nav-cta .btn svg { width: 18px; height: 18px; }
}

/* Mobile nav drawer */
.nav-links.open {
  display: flex;
  position: absolute;
  top: 100%; left: 0; right: 0;
  flex-direction: column;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3);
  gap: var(--space-2);
}

/* ============================================
   Directory page
   ============================================ */
.container--narrow { max-width: 640px; }

.directory-hero {
  background: linear-gradient(165deg, #2e005f 0%, #3d0d78 55%, #4a1a86 100%);
  color: #fff;
  padding-block: var(--space-1) var(--space-1);
}
.directory-hero h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-block: 0.25rem 0.25rem;
}
.directory-hero .hero-sub { max-width: 60ch; color: rgba(255,255,255,0.82); margin-bottom: 0.25rem; }
.directory-hero .hero-note {
  max-width: 60ch;
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}

.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-1);
  transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumb-back svg { width: 16px; height: 16px; }
.breadcrumb-back:hover { color: #fff; }


/* Static "back to parent" link, duplicated right above the Full List
   heading so it's reachable without scrolling to the top or waiting on the
   floating pill. */
.results-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(228, 114, 0, 0.55);
  margin-bottom: var(--space-2);
  transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.results-back svg { width: 16px; height: 16px; }
.results-back:hover, .results-back:focus-visible { background: #cf6800; box-shadow: 0 8px 18px -8px rgba(228, 114, 0, 0.65); }

/* ============================================
   City picker (directory hub)
   ============================================ */
.city-picker { padding-block: var(--space-6) var(--space-7); }

.city-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding-inline: 1.1rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  max-width: 560px;
  margin-bottom: var(--space-4);
}
.city-search svg { width: 20px; height: 20px; flex-shrink: 0; }
.city-search input {
  border: none;
  outline: none;
  background: transparent;
  padding-block: 0.9rem;
  font-size: 1rem;
  width: 100%;
  color: var(--color-text);
  min-height: 48px;
}
.city-search input::placeholder { color: var(--color-text-muted); }

.city-search-results { margin-bottom: var(--space-4); }
.city-results-summary { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.city-results-empty { color: var(--color-text-muted); padding-block: var(--space-3); }
.city-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  margin-bottom: 0.6rem;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.city-result:hover { transform: translateX(3px); box-shadow: 0 10px 24px -16px rgba(28,22,34,0.3); }
.city-result-main { display: flex; flex-direction: column; gap: 0.2rem; }
.city-result-main strong { font-size: 0.98rem; color: var(--color-text); }
.city-result-cta { font-size: 0.85rem; font-weight: 700; color: var(--color-link); white-space: nowrap; }
.city-result-main span { font-size: 0.85rem; color: var(--color-text-muted); }
.city-result-main span.city-result-distance { color: var(--color-accent); font-weight: 700; }

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}
.city-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 20px 40px -22px rgba(28,22,34,0.35);
  transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out);
}
.city-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -20px rgba(28,22,34,0.4); }
.city-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.city-card:hover img { transform: scale(1.05); }
.city-card-overlay {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(28,17,48,0.88) 0%, rgba(28,17,48,0.15) 55%, transparent 80%);
}
.city-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: #fff;
}
.city-card-meta { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 0.3rem; }

.city-picker-more {
  text-align: center;
  margin-top: var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.city-picker-more a { font-weight: 700; color: var(--color-link); }

/* ============================================
   Vertical filter bar (hub page) — "What are you looking for?" pills above
   the search bar. Not wired to real filtering yet (only Health Clubs has
   live data); clicking just toggles the visual active state. See
   roadmap_v2_verticals memory for the matching rules behind each vertical.
   ============================================ */
.vertical-filter-section {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4);
}
.vertical-filter-heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.vertical-filter-bar {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-width: thin;
}
.vertical-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.vertical-chip-icon { font-size: 1.15rem; line-height: 1; }
.vertical-chip:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.vertical-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(46, 0, 95, 0.5);
}

/* ============================================
   Region picker (hub page) — collage tiles that filter the city grid below
   ============================================ */
.region-picker-heading {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: var(--space-2);
}
.region-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.region-hint {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}
.region-tile {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 20px 40px -22px rgba(28,22,34,0.35);
  transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out), opacity var(--duration-med) var(--ease-out);
}
.region-tile:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -20px rgba(28,22,34,0.4); }
.region-tile[aria-pressed="true"] { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.region-picker.has-active .region-tile[aria-pressed="false"] { opacity: 0.5; }
.region-tile-collage {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: #1c1130;
}
.region-tile-collage picture, .region-tile-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.region-tile-collage-3 { grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; }
.region-tile-collage-3 picture:first-child { grid-row: 1 / 3; }
.region-tile-overlay {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(28,17,48,0.88) 0%, rgba(28,17,48,0.15) 55%, transparent 80%);
  pointer-events: none;
}
.region-tile-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: #fff;
  text-align: left;
}
.region-tile-meta { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 0.3rem; text-align: left; }

.region-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.region-status .results-back { margin-bottom: 0; cursor: pointer; }
.region-status-label { font-size: 0.95rem; color: var(--color-text-muted); }

/* ============================================
   Browse-by-city tiles (metro pages) — compact version of the hub's city cards
   ============================================ */
.city-tiles-section { padding-block: var(--space-5) var(--space-3); }
.city-tiles-heading {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: var(--space-3);
}
.city-tiles-grid { display: block; }
.city-major-card { max-width: 420px; }
.city-tile {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: none;
  padding: 0;
  box-shadow: 0 12px 24px -16px rgba(28,22,34,0.35);
  transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out);
}
.city-tile:hover, .city-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 32px -16px rgba(28,22,34,0.4); }
.city-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.city-tile:hover img { transform: scale(1.06); }
.city-tile-overlay {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  background: linear-gradient(0deg, rgba(28,17,48,0.9) 0%, rgba(28,17,48,0.15) 60%, transparent 85%);
  text-align: left;
}
.city-tile-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: #fff; }
.city-tile-meta { font-size: 0.82rem; color: rgba(255,255,255,0.75); margin-top: 0.15rem; }

.city-subtiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.city-subtiles-label { font-size: 0.82rem; color: var(--color-text-muted); margin-right: 0.2rem; }
.city-subtiles-more { font-size: 0.82rem; color: var(--color-text-muted); align-self: center; }
.city-subtile {
  border: 1.5px solid transparent;
  background: var(--color-accent);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-on-accent);
  box-shadow: 0 6px 14px -8px rgba(228, 114, 0, 0.55);
  transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.city-subtile span { color: var(--color-on-accent); opacity: 0.85; font-weight: 500; margin-left: 0.15rem; }
.city-subtile:hover, .city-subtile:focus-visible { background: #cf6800; box-shadow: 0 8px 18px -8px rgba(228, 114, 0, 0.65); }

/* Chip row for cities that have their own dedicated page (not just an
   in-page filter) — same pill shape as .city-subtile, but accent-colored
   so it reads as "goes to a full page" rather than "filters this page".
   Wraps naturally as more cities get added, unlike stacked buttons. */
.city-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.city-chips--quick { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.city-chips-label {
  flex-basis: 100%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.15rem;
}
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1.5px solid transparent;
  background: var(--color-accent);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-on-accent);
  box-shadow: 0 6px 14px -8px rgba(228, 114, 0, 0.55);
  transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.city-chip:hover, .city-chip:focus-visible { background: #cf6800; box-shadow: 0 8px 18px -8px rgba(228, 114, 0, 0.65); }
.city-chip span { color: var(--color-on-accent); opacity: 0.85; font-weight: 500; margin-left: 0.15rem; }

@media (max-width: 640px) {
  /* On a phone screen this row duplicates what the "All cities" dropdown
     just above it already does (pick a city) — worth the SEO value of a
     real on-page link to each city's dedicated page on desktop, but on
     mobile it's pure scroll-cost before the map/results even appear, so
     hide it there and let the dropdown carry the job alone. */
  .city-chips--quick { display: none; }
}

/* ============================================
   Map explorer — filters + map, the primary focus of a city page
   ============================================ */
.map-explorer {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4) var(--space-5);
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.filter-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 240px;
  min-width: 200px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding-inline: 0.9rem;
  color: var(--color-text-muted);
}
.filter-search svg { width: 18px; height: 18px; flex-shrink: 0; }
.filter-search input {
  border: none;
  outline: none;
  background: transparent;
  padding-block: 0.7rem;
  font-size: 0.95rem;
  width: 100%;
  color: var(--color-text);
  min-height: 44px;
}
.map-explorer select,
.filter-bar select {
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 44px;
}
.filter-reset { padding: 0.7rem 1.1rem; font-size: 0.9rem; min-height: 44px; }
.filter-count { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.9rem; }

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  margin: 0 0 var(--space-2) 0.6rem;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.active-filter-chip:hover, .active-filter-chip:focus-visible { background: #cf6800; }

/* Club map (Leaflet + OpenStreetMap) — sized to be the primary focus of the page */
.club-map {
  position: relative;
  z-index: 0;
  height: 620px;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.club-marker-icon { background: transparent; border: none; }
.club-marker-icon span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.map-popup { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--font-body); min-width: 180px; }
.map-popup .club-tier { align-self: flex-start; }
.map-popup strong { font-size: 0.95rem; color: var(--color-text); }
.map-popup span { font-size: 0.82rem; color: var(--color-text-muted); }
.map-popup a { font-size: 0.85rem; font-weight: 700; color: var(--color-link); }

@media (max-width: 1024px) {
  .club-map { height: 500px; }
}
@media (max-width: 720px) {
  .club-map { height: 420px; }
}

.directory-results { padding-block: var(--space-5) var(--space-7); }
.directory-results-heading {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin-bottom: var(--space-3);
}
.club-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.club-city-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-primary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.club-city-heading:first-child { padding-top: 0; border-top: none; }
.club-city-heading span { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; color: var(--color-text-muted); }
.club-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out);
}
.club-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(28,22,34,0.22); }
.club-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.club-tier {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.club-tier.tier-budget { color: var(--color-fit); background: rgba(0,175,0,0.1); }
.club-tier.tier-mid { color: var(--color-link); background: rgba(0,0,229,0.08); }
.club-tier.tier-full { color: var(--color-click); background: rgba(228,114,0,0.1); }
.club-tier.tier-luxury { color: var(--color-point); background: rgba(46,0,95,0.1); }
.club-rating { font-size: 0.85rem; color: var(--color-click); white-space: nowrap; }
.club-rating strong { color: var(--color-text); margin-left: 0.15rem; }
.club-distance { font-size: 0.85rem; font-weight: 700; color: var(--color-accent); margin-top: 0.4rem; }
.club-card h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; }
.club-address { font-size: 0.85rem; color: var(--color-text-muted); }
.club-desc { font-size: 0.88rem; color: var(--color-text-muted); flex: 1; }
.club-links { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.3rem; }
.club-links a { font-size: 0.85rem; font-weight: 700; color: var(--color-link); }
.club-links a:hover { text-decoration: underline; }

.club-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding-block: var(--space-6);
}

.newsletter-section--compact .container { display: block; }
.newsletter-section--compact .newsletter-form { justify-content: center; }
.newsletter-section--compact .form-success,
.newsletter-section--compact .form-note { text-align: center; }

@media (max-width: 1024px) {
  .club-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .club-grid { grid-template-columns: 1fr; }
  .map-explorer select { flex: 1 1 45%; }
}

/* ============================================
   CLUB-FINDER QUIZ
   ============================================ */
.quiz-section { padding-block: var(--space-6); }

.quiz-progress {
  display: flex;
  gap: 0.5rem;
  max-width: 240px;
  margin: 0 auto var(--space-5);
}
.quiz-progress-step {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--color-border);
}
.quiz-progress-step.is-active { background: var(--color-accent); }

.quiz-step { border: none; margin: 0; padding: 0; }
.quiz-step legend {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  padding: 0;
}
.quiz-optional { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--color-text-muted); }

.quiz-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
.quiz-zip-input {
  width: 100%;
  max-width: 280px;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}
.quiz-zip-input:focus { outline: none; border-color: var(--color-accent); }
.quiz-error { color: #c62828; font-size: 0.88rem; margin-top: 0.6rem; }

.quiz-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }

.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.quiz-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.quiz-option:hover { border-color: var(--color-accent); }
.quiz-option.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(228,114,0,0.15); }
.quiz-option-price { font-weight: 700; font-size: 0.95rem; }
.quiz-option--any { grid-column: 1 / -1; align-items: center; text-align: center; font-weight: 600; color: var(--color-text-muted); }

.quiz-checkboxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.quiz-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-size: 0.92rem;
  cursor: pointer;
}
.quiz-checkbox:has(input:checked) { border-color: var(--color-accent); background: rgba(228,114,0,0.06); }
.quiz-checkbox input { width: 18px; height: 18px; accent-color: var(--color-accent); flex-shrink: 0; }

.quiz-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: var(--space-6) 0;
  font-weight: 600;
  color: var(--color-text-muted);
}
.quiz-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  animation: quiz-spin 0.8s linear infinite;
}
@keyframes quiz-spin { to { transform: rotate(360deg); } }

.quiz-results-head { text-align: center; margin-bottom: var(--space-4); }
.quiz-results-head h2 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.quiz-results-head p { color: var(--color-text-muted); }

.quiz-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.quiz-result-card:hover { transform: none; } /* result cards aren't links elsewhere on the card, hover-lift reads as a false affordance */
.quiz-match-distance { font-size: 0.85rem; font-weight: 700; color: var(--color-accent); }
.quiz-match-amenities { font-size: 0.82rem; color: var(--color-text-muted); }
.quiz-match-amenities--unknown { font-style: italic; }
.quiz-match-amenities--none { color: #c62828; }

.quiz-results-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

@media (max-width: 640px) {
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-option--any { grid-column: auto; }
  .quiz-checkboxes { grid-template-columns: 1fr; }
  .quiz-results-grid { grid-template-columns: 1fr; }
  .quiz-actions { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  /* Region tiles and city cards default to a large single-column stack
     below their auto-fit minmax threshold (180px/280px), which on an
     ordinary phone means one huge full-width photo card per row and a lot
     of scrolling. Forcing 2 columns here keeps them a comfortable browsing
     size instead. Placed at the end of the file deliberately — this must
     come AFTER the base .region-picker/.city-grid rules in source order,
     or the base (unconditional) rule wins the cascade despite this media
     query matching, since equal-specificity rules resolve by source order,
     not by whether one is wrapped in @media. */
  .region-picker { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .city-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .region-tile-title, .city-card-title { font-size: 1.05rem; }
  .region-tile-meta, .city-card-meta { font-size: 0.75rem; }
  .region-tile-overlay, .city-card-overlay { padding: var(--space-2); }
}

@media (max-width: 640px) {
  /* Trim the purple .directory-hero further on phones -- on a narrow
     viewport its badge/title/description wrap onto more lines than on
     desktop, so even after the base padding-block reduction above it was
     still eating most of the first screen before the map/search results
     ever came into view. Placed at the end for the same cascade-order
     reason as the block above (a later @media rule of equal specificity
     is required to win over the earlier unconditional .directory-hero
     rule). */
  .directory-hero { padding-block: var(--space-1) 0.4rem; }
  .directory-hero h1 { font-size: 1.5rem; margin-block: 0.25rem 0.25rem; }
  .directory-hero .hero-sub { font-size: 0.88rem; margin-bottom: 0; }
}

/* Plain long-form text pages (privacy policy, etc.) — simple section
   spacing since these pages have no bespoke layout of their own. */
.legal-content h2 { margin-block: var(--space-4) var(--space-2); font-size: 1.3rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: var(--space-2); line-height: 1.7; color: var(--color-text); }
.legal-content ul { margin: 0 0 var(--space-2); padding-left: 1.2rem; color: var(--color-text); }
.legal-content li { margin-bottom: var(--space-1); line-height: 1.7; }
.legal-content li:last-child { margin-bottom: 0; }
.legal-content strong { color: var(--color-text); font-weight: 600; }