/* Bespoke Fit research page. Dark canvas, offwhite ink, lime accent. */
:root {
  --bg: #090D0F;
  --panel: #10161A;
  --panel-2: #0C1216;
  --ink: #F5F5F3;
  --muted: rgba(245, 245, 243, 0.72);
  --muted-2: rgba(245, 245, 243, 0.55);
  --line: rgba(245, 245, 243, 0.12);
  --line-soft: rgba(245, 245, 243, 0.08);
  --lime: #DFFF20;
  --grey: #6B7280;
  --display: 'Unbounded', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 78px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.14; margin: 0; }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.0625rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--ink); }
a:hover { color: var(--lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
.lime-word { color: var(--lime); }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--lime); color: var(--bg);
  padding: 0.75rem 1rem; z-index: 100; font-weight: 600;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header: opaque sticky nav */
header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.25rem;
  height: 62px;
  background: #090D0F;
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 900; letter-spacing: -0.02em;
  font-size: 1rem; text-decoration: none; color: var(--ink); white-space: nowrap;
}
header nav { display: flex; gap: 1.5rem; }
header nav a { font-size: 0.9375rem; color: var(--muted); text-decoration: none; }
header nav a:hover { color: var(--ink); }

/* Hero: AI photo as background only, HTML title on top.
   Three elements only: title, intro, button. */
.hero {
  position: relative;
  min-height: min(86svh, 720px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(4.5rem, 11vw, 7.5rem) 1.25rem;
  background-image:
    radial-gradient(ellipse 74% 62% at 50% 46%, rgba(9, 13, 15, 0.58) 0%, rgba(9, 13, 15, 0.4) 55%, rgba(9, 13, 15, 0) 85%),
    linear-gradient(180deg, rgba(9, 13, 15, 0.32) 0%, rgba(9, 13, 15, 0.18) 45%, rgba(9, 13, 15, 0.4) 100%),
    url('/most-hated-gym-chains/assets/hero.webp');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center 42%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border-bottom: 1px solid var(--line-soft);
}
.hero-content { max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.hero h1 {
  font-size: clamp(2.05rem, 6.2vw, 4.25rem);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.03;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(9, 13, 15, 0.6);
}
.hero-intro { max-width: 46ch; font-size: 1.0625rem; color: rgba(245, 245, 243, 0.94); text-shadow: 0 1px 18px rgba(9, 13, 15, 0.6); }
.button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--lime); color: #090D0F; text-decoration: none;
  font-weight: 600; font-size: 1rem;
  padding: 0.85rem 1.6rem; min-height: 48px; border-radius: 999px;
  border: 1px solid rgba(223, 255, 32, 0.4);
}
.button:hover { background: #E9FF5C; color: #090D0F; }

/* Sections */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
section[id] { scroll-margin-top: 78px; }
#states { padding-top: clamp(3.5rem, 8vw, 6rem); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.dark { background: var(--panel-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.soft { background: var(--panel); }
.lead { max-width: 66ch; color: var(--muted); margin-top: 0.85rem; font-size: 1.0625rem; }
.source { color: var(--muted-2); font-size: 0.9375rem; margin-top: 1.25rem; max-width: 82ch; }
.source a { color: var(--muted); text-decoration-color: rgba(245, 245, 243, 0.35); }
.source a:hover { color: var(--lime); }

/* Key finding cards: compact summary row above the national table */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-top: 1.5rem; }
.cards article {
  background: rgba(245, 245, 243, 0.04);
  border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.kicker { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.cards strong { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.2rem); color: var(--lime); line-height: 1; }
.cards strong span { font-size: 0.55em; margin-left: 0.1em; }
.cards article p:last-child { color: var(--muted); font-size: 0.9375rem; }

/* Map: full-width centrepiece, detail as a popup over the map */
.map-hint { margin-top: 0.7rem; color: var(--muted-2); font-size: 0.9375rem; }
.map-hint .hint-desk { display: none; }
.map-shell { position: relative; margin-top: 0.9rem; }
#map { width: 100%; }
#map svg { display: block; width: 100%; height: auto; }
.state { stroke: #090D0F; stroke-width: 1; cursor: pointer; transition: opacity 140ms ease, stroke 120ms ease; }
.state:hover { stroke: var(--lime); stroke-width: 2; filter: drop-shadow(0 0 2px rgba(9, 13, 15, 0.9)); }
.state:focus-visible { outline: none; stroke: var(--lime); stroke-width: 2.4; filter: drop-shadow(0 0 2px rgba(9, 13, 15, 0.9)); }
.state.is-active { stroke: var(--lime); stroke-width: 2.6; filter: drop-shadow(0 0 2px rgba(9, 13, 15, 0.9)); }
.state-label { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; fill: #F5F5F3; stroke: #090D0F; stroke-width: 2.6px; paint-order: stroke; pointer-events: none; text-anchor: middle; }

.state-popup {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: max-content; max-width: min(290px, 100%);
  background: #131A1F;
  border: 1px solid rgba(245, 245, 243, 0.24);
  border-radius: 12px;
  padding: 0.65rem 2.4rem 0.7rem 0.9rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.state-popup[hidden] { display: none; }
.state-popup.preview { pointer-events: none; }
.popup-state { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.popup-lead { margin-top: 0.25rem; font-size: 1rem; line-height: 1.35; }
.popup-lead b { font-family: var(--display); font-weight: 600; }
.popup-sub { margin-top: 0.2rem; font-size: 0.875rem; color: var(--muted-2); }
.popup-sub + .popup-sub { margin-top: 0.1rem; }
.popup-close {
  position: absolute; top: 5px; right: 5px;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 9px;
  color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer;
  font-family: var(--body);
}
.popup-close:hover { color: var(--ink); background: rgba(245, 245, 243, 0.09); }

/* Legend: strip directly below the map */
.legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(245, 245, 243, 0.03);
}
.legend-block { min-width: 0; }
.legend-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.6rem; }
.legend-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem 1.25rem; }
.legend-grid li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; color: var(--muted); white-space: nowrap; }
.legend-grid i { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; }
.legend-grid .split-key { background: linear-gradient(90deg, #DFFF20 0 50%, #38BDF8 50% 100%); }
.legend-grid .grey-key { background: repeating-linear-gradient(45deg, #39414D 0 3px, var(--grey) 3px 5px); }
.legend-result { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.5rem 2.25rem; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 1.1rem; }
.tabs button {
  font-family: var(--body); font-size: 0.9375rem; font-weight: 600;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.15rem; min-height: 44px; cursor: pointer;
}
.tabs button:hover { color: var(--ink); border-color: rgba(245, 245, 243, 0.3); }
.tabs button[aria-selected='true'], .tabs button[aria-pressed='true'] {
  background: var(--lime); color: #090D0F; border-color: var(--lime);
}

/* Tables */
.table-shell { overflow-x: auto; }
table { width: 100%; max-width: 880px; margin: 0 auto; border-collapse: collapse; font-size: 1rem; }
caption { caption-side: top; text-align: center; color: var(--muted-2); font-size: 0.9375rem; padding-bottom: 0.75rem; }
th, td { padding: 0.72rem 0.65rem; text-align: center; border-top: 1px solid var(--line-soft); }
th { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; border-top: 0; }
td.name, th.name { text-align: left; }
tbody tr:hover { background: rgba(245, 245, 243, 0.03); }
td .bar-cell { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center; }
.mini-track { width: 74px; height: 8px; border-radius: 999px; background: rgba(245, 245, 243, 0.1); overflow: hidden; }
.mini-track i { display: block; height: 100%; background: var(--lime); }
.num { font-variant-numeric: tabular-nums; }

/* Complaints */
.complaint-controls { margin-top: 1.4rem; }
.complaint-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1.75rem; margin-top: 1.1rem; align-items: start; }
.callout { margin-top: 0; border: 1px solid rgba(223, 255, 32, 0.32); background: rgba(223, 255, 32, 0.06); border-radius: 14px; padding: 1.1rem 1.15rem; }
.callout h3 { font-size: 1.35rem; margin: 0.3rem 0 0.35rem; color: var(--lime); }
.callout p:last-child { font-size: 0.9375rem; color: var(--muted); }
label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; }
select {
  width: 100%; max-width: 420px; min-height: 46px;
  background: #0C1216; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.6rem 0.8rem; font-family: var(--body); font-size: 1rem;
}
select:hover { border-color: rgba(245, 245, 243, 0.28); }
.bars { display: flex; flex-direction: column; gap: 0.85rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 0.4rem 0.75rem; align-items: center; }
.bar-row .bar-label { font-size: 0.9375rem; }
.bar-row .bar-value { font-size: 0.9375rem; text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; height: 12px; border-radius: 999px; background: rgba(245, 245, 243, 0.08); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 999px; background: var(--lime); }

/* Worst gyms */
#gym-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
#gym-list li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto auto; gap: 0.3rem 1.1rem;
  align-items: center;
  background: rgba(245, 245, 243, 0.04); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 0.85rem 1rem;
}
.gym-rank { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--lime); align-self: start; }
.gym-main { display: block; }
.gym-name { display: inline; font-weight: 600; font-size: 1rem; text-decoration-color: rgba(245, 245, 243, 0.4); }
.gym-sub { display: block; font-size: 0.9375rem; color: var(--muted-2); margin-top: 0.15rem; }
.gym-metrics { text-align: right; font-size: 0.9375rem; color: var(--muted); white-space: nowrap; }
.gym-metrics b { font-family: var(--display); font-weight: 600; color: var(--ink); }
.gym-metrics .gym-sub { margin-top: 0.15rem; }
.gym-chain { font-size: 0.875rem; color: var(--muted-2); justify-self: end; text-align: right; min-width: 7.5rem; }

/* Methodology */
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.method-grid article { background: rgba(245, 245, 243, 0.04); border: 1px solid var(--line-soft); border-radius: 16px; padding: 1.35rem; }
.method-grid h3 { margin-bottom: 0.55rem; }
.method-grid p { font-size: 0.9375rem; color: var(--muted); }
.method-grid a { color: var(--ink); }
.methodology > p { max-width: 78ch; color: var(--muted); margin-top: 0.85rem; font-size: 1.0625rem; }

/* Footer */
footer {
  border-top: 1px solid var(--line-soft);
  padding: 2.25rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem;
  text-align: center;
}
footer p { font-size: 0.9375rem; color: var(--muted-2); }
.foot-link { color: var(--lime); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.foot-link:hover { text-decoration: underline; }

@media (min-width: 761px) {
  .map-hint .hint-desk { display: inline; }
  .map-hint .hint-touch { display: none; }
}
@media (max-width: 980px) {
  header nav { gap: 1rem; }
  .complaint-layout { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  header { height: 58px; padding: 0 1rem; }
  header nav { display: none; }
  section { padding: clamp(2.5rem, 9vw, 3.5rem) 0; }
  .cards { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .hero { min-height: 78svh; background-position: center, center, center 38%; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend-result { grid-template-columns: repeat(2, minmax(0, max-content)); }
  .state-label { display: none; }
  .state-popup {
    left: 50%; top: auto; bottom: 10px; transform: translateX(-50%);
    width: calc(100% - 20px); max-width: 340px;
  }
  .wide { display: none; }
  .mini-track { display: none; }
  table { font-size: 0.9375rem; }
  th, td { padding: 0.6rem 0.45rem; }
  #gym-list li { grid-template-columns: 2rem minmax(0, 1fr); padding: 0.8rem 0.9rem; gap: 0.2rem 0.7rem; }
  .gym-metrics { grid-column: 2; text-align: left; white-space: normal; }
  .gym-chain { grid-column: 2; justify-self: start; text-align: left; min-width: 0; }
}


/* ------------------------------------------------------------------
   Light ground bands: the break in the black ground, matched to the
   Bespoke Fit research pages (paper surface, ink text, white panels).
   ------------------------------------------------------------------ */
.band-light { background: #f7f6f3; color: #111418; }
.band-light h2, .band-light h3 { color: #111418; }
.band-light .lead, .band-light .source { color: #62686d; }
.band-light a { color: #111418; text-decoration-color: rgba(10,12,16,.4); }
.band-light a:hover { color: #000; }
.band-light .source a { color: #62686d; text-decoration-color: rgba(10,12,16,.35); }
.band-light .source a:hover { color: #111418; }
.band-light :focus-visible { outline-color: #111418; }
.band-light .lime-word { color: inherit; }

/* Map band: paper surface with a white map panel and popup card */
.map-band .map-hint { color: #62686d; }
.map-band .map-shell {
  background: #fff; border: 1px solid rgba(10,12,16,.12); border-radius: 20px;
  box-shadow: 0 16px 50px rgba(10,12,16,.07); padding: 14px;
}
.map-band .state { stroke: #ffffff; stroke-width: 1; }
.map-band .state:hover { stroke: #111418; stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(10,12,16,.25)); }
.map-band .state:focus-visible { stroke: #111418; stroke-width: 2.4; filter: drop-shadow(0 1px 1px rgba(10,12,16,.25)); }
.map-band .state.is-active { stroke: #111418; stroke-width: 2.6; filter: drop-shadow(0 1px 1px rgba(10,12,16,.3)); }
.map-band .state-popup {
  background: #fff; border: 1px solid rgba(10,12,16,.14);
  box-shadow: 0 14px 34px rgba(10,12,16,.18);
}
.map-band .popup-state { color: #8a9096; }
.map-band .popup-lead { color: #111418; }
.map-band .popup-sub { color: #62686d; }
.map-band .popup-close { color: #62686d; }
.map-band .popup-close:hover { color: #111418; background: rgba(10,12,16,.06); }
.map-band .legend { border-color: rgba(10,12,16,.12); background: #fff; box-shadow: 0 10px 30px rgba(10,12,16,.05); }
.map-band .legend-title { color: #8a9096; }
.map-band .legend-grid li { color: #4a5056; }
.legend-grid .split-key, .map-band .legend-grid .split-key { background: linear-gradient(90deg, #D4E24F 0 50%, #A97FDB 50% 100%); }
.map-band .legend-grid .grey-key { background: repeating-linear-gradient(45deg, #e7e4dd 0 3px, #cfcbc2 3px 5px); }

/* National ranking + complaints on the light band: white panels, ink controls */
.band-light .tabs button { color: #62686d; border-color: rgba(10,12,16,.18); }
.band-light .tabs button:hover { color: #111418; border-color: rgba(10,12,16,.4); }
.band-light .tabs button[aria-selected='true'], .band-light .tabs button[aria-pressed='true'] { background: #111418; color: #f7f6f3; border-color: #111418; }
.band-light table { color: #111418; }
.band-light th { background: #e9e7e1; color: #62686d; }
.band-light th, .band-light td { border-color: rgba(10,12,16,.12); }
.band-light tbody tr:hover { background: rgba(10,12,16,.03); }
.band-light .mini-track { background: rgba(10,12,16,.1); }
.band-light .mini-track i { background: #111418; }
.band-light .callout { border-color: rgba(10,12,16,.14); background: #fff; box-shadow: 0 10px 30px rgba(10,12,16,.05); }
.band-light .callout h3 { color: #111418; }
.band-light .callout p:last-child { color: #62686d; }
.band-light label { color: #62686d; }
.band-light select { background: #fff; color: #111418; border-color: rgba(10,12,16,.18); }
.band-light select:hover { border-color: rgba(10,12,16,.4); }
.band-light .bar-track { background: #e9e7e1; }
.band-light .bar-track i { background: #111418; }
.band-light .bar-row .bar-value { color: #111418; }

/* Methodology on the light band: white cards */
.band-light .method-grid article { background: #fff; border-color: rgba(10,12,16,.12); box-shadow: 0 10px 30px rgba(10,12,16,.05); }
.band-light .method-grid p, .band-light .methodology > p { color: #62686d; }
.band-light .method-grid a { color: #111418; }

/* Key findings: its own dark band with reference-style cards */
.band-alt { background: #0C1216; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.band-alt .cards { margin-top: 1.75rem; gap: 0.9rem; }
.band-alt .cards article {
  background: linear-gradient(145deg, #14191e, #0f1317);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 1.5rem 1.4rem 1.6rem; min-height: 215px; justify-content: flex-start;
}
.band-alt .cards article p:last-child { margin-top: 0.15rem; }

/* Round 8: complaints panel, tightened controls, findings number line, tableau split key */
.complaint-controls { margin-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.complaint-controls select { width: min(320px, 100%); }
@media (max-width: 640px) { .complaint-controls { flex-direction: column; align-items: stretch; } .complaint-controls select { width: 100%; } }
.complaint-layout .panel { background: #fff; border: 1px solid rgba(10,12,16,.14); border-radius: 14px; padding: 1.1rem 1.15rem; box-shadow: 0 10px 30px rgba(10,12,16,.05); }
.band-alt .cards h3 { color: var(--lime); font-size: 1.7rem; line-height: 1.18; margin: 0.5rem 0 0.45rem; }
/* legibility: kicker label on the white callout card */
.band-light .callout .kicker { color: rgba(17,20,24,.55); }
.legend-grid .split-key { background: linear-gradient(90deg,#4E79A7 0 50%,#EDC948 50% 100%); }

/* Round 10: popup clarity, map tint (option 2), Bespoke Fit ender footer */
.popup-note { font-size: 0.8125rem; color: #62686d; margin: 0.15rem 0 0; }
.band-light .legend-grid li { color: #62686d; }
.map-band .map-shell { background: #f1efe9; border-color: rgba(10,12,16,.10); box-shadow: none; }
.map-band .state { stroke: #f1efe9; }
.map-band .legend { background: #f1efe9; border-color: rgba(10,12,16,.10); box-shadow: none; }
footer { display: block; text-align: left; margin-top: 0; background: #0a0c10; padding: 5rem 0 2.5rem; color: rgba(255,255,255,.72); }
.f-wrap { max-width: 1192px; margin: 0 auto; padding: 0 1.25rem; }
.f-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.f-brandcol .brand { font-size: 1.125rem; }
.f-tag { margin: 0.9rem 0 0; font-size: 1.125rem; color: rgba(255,255,255,.72); }
.f-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 24rem; margin-top: 2.2rem; }
.f-label { color: #fff; font-weight: 600; font-size: 1.125rem; }
.f-row { display: flex; gap: 0.5rem; }
.f-row input { flex: 1 1 0%; width: 0; min-width: 0; font-size: 1.125rem; min-height: 44px; border-radius: 999px; padding: 0.625rem 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #fff; font-family: inherit; font-size: 1.125rem; line-height: 1.6; }
.f-row input::placeholder { color: rgba(255,255,255,.48); }
.f-row button { min-height: 44px; border-radius: 999px; padding: 0.625rem 1.25rem; background: #E6FF3D; color: #0a0c10; border: 0; font-family: inherit; font-size: 0.81rem; font-weight: 600; cursor: pointer; }
.f-fine { font-size: 0.81rem; color: rgba(255,255,255,.48); margin: 0; }
.f-title { font-size: 0.81rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 0.75rem; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.f-col a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 1.125rem; line-height: 1.6; }
.f-col a:hover { color: #fff; }
.f-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0 0 0.9rem; }
/* Same geometry as the site footer (components/app/AppStoreButtons.tsx,
   "stack"): both visible pills 160px wide. Google's badge PNG must ship
   unmodified and carries 41px of transparent clear space per side inside its
   646x250 box, so its element is 183.3px wide with the clear space cancelled by
   negative margins (left edge aligns with Apple, visual gap stays ~8px). */
.f-badges a { display: block; line-height: 0; border-radius: 8px; }
.f-badges img { display: block; width: 100%; height: auto; }
.f-badges a:first-child { width: 160px; }
.f-badges a:last-child { width: 183.3px; margin: -3.6px 0 -11.6px -11.6px; }
.f-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.06); }

/* Citation box: ink card at the foot of the (light) methodology band. */
.cite-box { margin-top: 2.25rem; padding: 1.6rem 1.75rem; border-radius: 16px; background: #0a0c10; color: #F5F5F3; border-left: 4px solid #E6FF3D; }
.cite-kicker { margin: 0 0 0.6rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #E6FF3D; }
.cite-text { margin: 0; max-width: 66ch; font-size: 1.0625rem; line-height: 1.6; color: rgba(245,245,243,.85); }
.band-light .cite-box a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.band-light .cite-box a:hover { color: #E6FF3D; text-decoration-color: #E6FF3D; }
.band-light .cite-box .cite-link { display: inline-block; margin-top: 0.9rem; font-weight: 600; font-size: 0.9375rem; text-decoration: none; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(245,245,243,.08); border: 1px solid rgba(245,245,243,.16); }
.band-light .cite-box .cite-link:hover { background: #E6FF3D; color: #0a0c10; border-color: #E6FF3D; }
@media (max-width: 639px) { .cite-box { padding: 1.3rem 1.2rem; } }
.f-social { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.f-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: rgba(255,255,255,.65); }
.f-social a:hover { color: #fff; }
.f-legal { text-align: right; display: flex; flex-direction: column; gap: 0.25rem; }
.f-legal p { margin: 0; font-size: 0.81rem; color: rgba(255,255,255,.48); }
@media (max-width: 1023px) { .f-grid { grid-template-columns: 1fr 1fr; } .f-brandcol { grid-column: 1 / -1; } }
@media (max-width: 639px) { .f-grid { grid-template-columns: 1fr; } .f-legal { text-align: left; } }
.popup-measure { margin: 0.3rem 0 0; color: #111418; }

/* Touch ergonomics */
.state { touch-action: manipulation; }
@media (pointer: coarse) {
  .popup-close { width: 44px; height: 44px; }
  .button, .tabs button, select, summary { touch-action: manipulation; }
}

/* Mobile: state detail sits in flow below the map instead of covering it */
@media (max-width: 640px) {
  .state-popup { position: static; left: auto; top: auto; bottom: auto; transform: none; width: auto; max-width: none; margin-top: 0.75rem; box-shadow: none; }
}

.gym-name { display: inline-block; padding: 3px 0; }