:root{
  --paper:#efece3; --paper-2:#f7f5ef; --ink:#0b0b0a;
  --accent:#ff3d00; --accent-ink:#ffffff;
  --muted:#6b675d; --line-soft:rgba(11,11,10,.13); --line-2:rgba(11,11,10,.32);
  --disp:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
  --shadow:5px 5px 0 var(--ink);
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* author display rules must not defeat the hidden attribute */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--disp);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--line-soft) 1px,transparent 1px);background-size:22px 22px;}
::selection{background:var(--accent);color:var(--accent-ink)}

.frame{max-width:1060px;margin:clamp(14px,3.5vw,38px) auto;border:2px solid var(--ink);
  background:var(--paper);box-shadow:var(--shadow)}
.frame>*{border-bottom:2px solid var(--ink)}
.frame>*:last-child{border-bottom:0}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px clamp(16px,3vw,28px);font-family:var(--mono);flex-wrap:wrap}
.topbar .mark{font-weight:700;letter-spacing:.04em;font-size:.86rem;color:var(--ink);text-decoration:none;display:inline-flex}
.topbar .mark img{display:block;height:34px;width:auto}
@media (max-width:640px){.topbar .mark img{height:26px}}
.nav{flex-wrap:wrap}

/* staleness banner — shown when the nightly snapshot is over a week old */
.stale{background:var(--paper-2);border-left:6px solid var(--accent);
  padding:12px clamp(16px,3vw,28px);font-family:var(--mono);font-size:.72rem;line-height:1.55;color:var(--ink)}
.stale b{color:var(--accent)}
.topbar .tag{font-size:.66rem;letter-spacing:.12em;color:var(--accent);font-weight:700}

/* hero */
.hero{display:block}
.hero-main{padding:clamp(24px,4vw,52px) clamp(16px,3vw,28px)}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.5rem,7vw,4.6rem);
  line-height:.98;letter-spacing:-.03em;margin:0;text-wrap:balance}
.hero h1 .mk{color:var(--accent)}
.lede{margin:clamp(16px,2.2vw,24px) 0 0;max-width:40ch;color:var(--muted);
  font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.5}
.lede strong{color:var(--ink);font-weight:700;box-shadow:inset 0 -.42em 0 rgba(255,61,0,.22)}
.spec{border-left:2px solid var(--ink);align-self:stretch;display:flex;flex-direction:column;
  font-family:var(--mono);background:var(--paper-2)}
.spec-row{display:flex;justify-content:space-between;gap:12px;padding:14px clamp(14px,2vw,20px);
  border-bottom:1px solid var(--line-soft);font-size:.72rem}
.spec-row:last-child{border-bottom:0;margin-top:auto}
.spec .k{text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.spec .v{text-align:right;font-weight:700}

/* search */
.search{padding:clamp(18px,3vw,30px) clamp(16px,3vw,28px)}
.lbl{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.combo{position:relative;z-index:50}
#q{width:100%;font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.6rem);
  color:var(--ink);background:var(--paper-2);border:2px solid var(--ink);border-radius:0;
  /* Right padding clears the club-count badge, so neither the placeholder nor
     what you type slides under it. */
  padding:clamp(13px,1.8vw,17px) 60px clamp(13px,1.8vw,17px) 18px;outline:none;transition:box-shadow .12s,transform .12s}
#q::placeholder{color:rgba(11,11,10,.32);font-family:var(--mono);font-size:.8em;letter-spacing:.06em}
#q:focus{box-shadow:var(--shadow);transform:translate(-2px,-2px)}
.clubcount{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);
  font-size:.72rem;font-weight:700;color:var(--ink);background:var(--accent);color:var(--accent-ink);
  padding:3px 8px;pointer-events:none}

.dropdown{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 8px);margin:0;padding:0;list-style:none;
  background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);
  max-height:min(52vh,400px);overflow:auto}
.dropdown li{display:flex;align-items:baseline;gap:12px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--line-soft)}
.dropdown li:last-child{border-bottom:0}
.dropdown li[aria-selected="true"],.dropdown li:hover{background:var(--accent);color:var(--accent-ink)}
.dropdown li[aria-selected="true"] .cl,.dropdown li:hover .cl,
.dropdown li[aria-selected="true"] .cc,.dropdown li:hover .cc{color:var(--accent-ink);border-color:var(--accent-ink)}
.dropdown li[aria-selected="true"] mark,.dropdown li:hover mark{color:var(--accent-ink)}
.dropdown .cn{font-family:var(--disp);font-weight:600;font-size:1.02rem}
.dropdown .cl{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-left:auto;text-align:right;white-space:nowrap}
.dropdown .cc{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line-soft);padding:2px 6px}
.dropdown .none{padding:16px;color:var(--muted);font-family:var(--mono);font-size:.8rem;cursor:default}
.dropdown li mark{background:none;color:var(--accent);font-weight:700}

/* panel */
.panel{padding:clamp(20px,3vw,32px) clamp(16px,3vw,28px)}
.panelhead{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  padding-bottom:16px;border-bottom:2px solid var(--ink)}
.ph-title h1,.ph-title h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,4vw,2.7rem);
  line-height:.98;margin:0;letter-spacing:-.02em}
.ph-brand{font-family:var(--disp);font-weight:600;font-size:clamp(1rem,2.1vw,1.3rem);
  color:var(--muted);margin:0 0 6px;letter-spacing:-.01em;line-height:1}
.ph-name{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap}
.ph-country{font-family:var(--mono);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  position:relative;padding-left:16px}
.ph-country:empty{display:none}
.ph-country::before{content:"◆";position:absolute;left:0;color:var(--accent)}
/* club tier badge — same meta style as the country; dotted underline = has a tooltip */
.ph-tier{font-family:var(--mono);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  position:relative;padding-left:16px;cursor:help;text-decoration:underline dotted;text-underline-offset:3px;outline:none}
.ph-tier::before{content:"◆";position:absolute;left:0;color:var(--accent)}
.ph-tier:focus-visible{color:var(--ink)}

/* tooltip component: <x class="has-tip" tabindex="0" aria-describedby="id">…<span class="tip" id="id" role="tooltip">…</span></x>
   Opens on hover, keyboard focus, or tap (JS toggles .is-open). Ink panel, hard accent shadow. */
.has-tip{position:relative}
.has-tip .tip{position:absolute;left:0;top:calc(100% + 10px);z-index:20;width:max-content;max-width:min(34ch,calc(100vw - 48px));
  font-family:var(--mono);font-size:.7rem;font-weight:400;line-height:1.55;letter-spacing:0;text-transform:none;text-align:left;
  color:var(--paper);background:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--accent);padding:9px 12px;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .12s,transform .12s,visibility .12s;pointer-events:none}
.has-tip .tip::before{content:"";position:absolute;left:10px;top:-8px;border:6px solid transparent;border-top:0;border-bottom-color:var(--ink)}
.has-tip:hover .tip,.has-tip:focus-visible .tip,.has-tip.is-open .tip{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.has-tip .tip{transition:none}}
.clubsub{margin:9px 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.clubsub .pin{color:var(--accent)}
.clubsub .sep{opacity:.5}
.cmp-open{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--ink);background:var(--paper);
  text-decoration:none;border:2px solid var(--ink);padding:7px 11px;cursor:pointer;transition:background .1s,color .1s}
.cmp-open svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cmp-open:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cmp-open:active{transform:translate(1px,1px)}

.durations{display:inline-flex;border:2px solid var(--ink)}
.durations button{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);border:0;border-left:2px solid var(--ink);
  padding:9px 14px;cursor:pointer;transition:background .1s;white-space:nowrap}
.durations button:first-child{border-left:0}
.durations button:hover{background:var(--paper-2)}
.durations button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700}

.head-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.share{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--paper);
  border:2px solid var(--ink);padding:8px 13px;cursor:pointer;transition:background .1s,color .1s}
.share svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share:hover{background:var(--accent);color:var(--accent-ink)}
.share:active{transform:translate(1px,1px)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:400;
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;
  padding:11px 18px;border:2px solid var(--ink);box-shadow:var(--shadow);
  animation:toastin .18s ease both}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

.th-sub{display:block;font-weight:400;font-size:.82em;letter-spacing:.05em;color:var(--muted);margin-top:3px;text-transform:none}

/* share modal */
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(11,11,10,.55);backdrop-filter:blur(2px)}
.modal-card{position:relative;z-index:1;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);
  width:min(560px,100%);max-height:90vh;overflow:auto;padding:22px;animation:modalin .18s ease both}
@keyframes modalin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal-head h3{font-family:var(--disp);font-weight:800;font-size:1.45rem;margin:0;letter-spacing:-.01em}
/* color is explicit: without it the ✕ takes the UA button colour, which iOS renders blue. */
.modal-x{font-family:var(--mono);font-size:.9rem;background:var(--paper);color:var(--ink);border:2px solid var(--ink);
  width:32px;height:32px;cursor:pointer;line-height:1;flex:none}
.modal-x:hover{background:var(--accent);color:var(--accent-ink)}
.modal-sub{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin:8px 0 16px;line-height:1.5}
.modal-preview{border:2px solid var(--ink);background:var(--paper-2);padding:8px;margin-bottom:16px}
.modal-preview img{display:block;width:100%;height:auto}
.modal-actions{display:flex;flex-wrap:wrap;gap:10px}
.mbtn{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:11px 16px;cursor:pointer;transition:background .1s,transform .05s}
.mbtn:hover{background:var(--paper-2)}
.mbtn.primary{background:var(--accent);color:var(--accent-ink)}
.mbtn:active{transform:translate(1px,1px)}
.modal-link{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:14px 0 0;word-break:break-all}

/* status */
.status{margin:18px 0 0;font-family:var(--mono);font-size:.76rem;color:var(--muted);
  display:flex;align-items:center;gap:12px}
.bar{flex:1;max-width:240px;height:8px;border:2px solid var(--ink);overflow:hidden;background:var(--paper)}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
.spin{width:12px;height:12px;border:2px solid var(--ink);border-top-color:var(--accent);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* table */
/* Scroll-shadow: a soft shadow on whichever edge has more table to reach, so
   it's obvious the table scrolls sideways. The shadows are sticky flex items,
   not a background on the scroller: a background sits *under* the rows, so the
   plan buttons and "most popular" badge (both opaque) punched holes straight
   through it. As sticky children they paint above the rows, which pass under
   them. PB.initScrollShadows() sets data-sx from the scroll position; with no
   JS neither edge shows, which is the honest default. */
.tablewrap{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;display:flex;
  --sc-w:16px; --sc-ink:rgba(11,11,10,.16);}
.tablewrap::before,.tablewrap::after{content:"";flex:0 0 var(--sc-w);position:sticky;z-index:2;
  opacity:0;transition:opacity .16s;pointer-events:none}
.tablewrap::before{left:0;margin-right:calc(-1 * var(--sc-w));
  background:linear-gradient(to right, var(--sc-ink), transparent)}
.tablewrap::after{right:0;margin-left:calc(-1 * var(--sc-w));
  background:linear-gradient(to left, var(--sc-ink), transparent)}
.tablewrap[data-sx~="l"]::before{opacity:1}
.tablewrap[data-sx~="r"]::after{opacity:1}
.pricetable{flex:1 0 auto;width:100%;border-collapse:collapse;min-width:540px}
.pricetable thead th{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);font-weight:700;text-align:right;padding:0 16px 10px;border-bottom:2px solid var(--ink);white-space:nowrap}
.pricetable thead th:first-child{text-align:left}
.pricetable tbody td{padding:14px 16px;border-bottom:1px solid var(--line-soft);text-align:right;vertical-align:top}
.pricetable tbody td:not(:first-child){border-left:1px solid var(--line-soft)}
.pricetable tbody tr:hover{background:var(--paper-2)}
.pricetable tbody tr.best{background:rgba(255,61,0,.06)}
.plan{position:relative;text-align:left!important}
.plan .pn{font-family:var(--disp);font-weight:700;font-size:1.06rem;line-height:1.12}
/* plain-English plan description on the table */
.pdesc{margin-top:7px;max-width:52ch;color:var(--muted);font-size:.92rem;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* single "What's included" affordance → opens the plan modal */
.pn-more{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.03em;text-transform:uppercase;font-weight:700;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-2);padding:6px 10px;cursor:pointer;transition:.1s;text-align:left}
.pn-more .chev{color:var(--accent);font-size:1rem;line-height:0}
.pn-more:hover{border-color:var(--ink);background:var(--paper-2)}
.pn-more:active{transform:translate(1px,1px)}
/* plan modal internals */
.modal-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:18px 0 10px}
#planbens{max-width:none}
#planaccess .access-list{margin-top:0;color:var(--muted);line-height:1.75;font-family:var(--mono);font-size:.72rem}
.plan .pk{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--muted);margin-top:4px}
.pop{display:inline-block;margin-left:9px;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;background:var(--accent);color:var(--accent-ink);padding:2px 6px;vertical-align:middle}
.access{margin-top:9px;font-family:var(--mono);font-size:.66rem}
.access summary{cursor:pointer;color:var(--ink);text-transform:uppercase;letter-spacing:.05em;
  border:1px solid var(--ink);display:inline-block;padding:4px 9px;list-style:none;user-select:none}
.access summary::-webkit-details-marker{display:none}
.access summary::after{content:" +"}
.access[open] summary::after{content:" −"}
.access summary:hover{background:var(--paper-2)}
.access[open] summary{background:var(--ink);color:var(--paper)}
.access-list{margin-top:9px;color:var(--muted);line-height:1.75;max-width:360px}
.benefits{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;max-width:340px}
.benefits .ben{font-family:var(--mono);font-size:.6rem;letter-spacing:.02em;color:var(--muted);
  border:1px solid var(--line-soft);padding:2px 6px;white-space:nowrap}
.cell .mo{font-family:var(--mono);font-size:1.14rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.cell .mo .per{font-size:.64rem;font-weight:400;color:var(--muted);letter-spacing:0}
.cell .join{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:4px}
.cell.na{color:rgba(11,11,10,.28);font-family:var(--mono)}
.cell .best-tag{display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:2px 6px;margin-top:6px;font-weight:700}

.empty{margin-top:22px;font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.addons{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.addons .ao-k{color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-right:8px}
.foot-note{margin-top:16px;font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--muted)}

/* footer */
/* Q&A (visible FAQ + FAQPage schema) — native <details>, styled as bordered rows */
.faq{padding:clamp(20px,3vw,32px) clamp(16px,3vw,28px)}
.faq-h{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.faq-item{border:2px solid var(--ink);background:var(--paper-2);margin-bottom:10px}
.faq-item summary{cursor:pointer;list-style:none;padding:13px 16px;font-family:var(--disp);font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--mono);font-weight:700;font-size:1.1rem;color:var(--accent);flex:none}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:hover{background:var(--paper)}
.faq-item p{margin:0;padding:0 16px 14px;color:var(--muted);line-height:1.55;font-size:.95rem;max-width:70ch}

.sitefoot{padding:16px clamp(16px,3vw,28px);background:var(--ink)}
.sitefoot p{margin:0;font-family:var(--mono);font-size:.68rem;line-height:1.7;color:#b9b4a7;max-width:none}
.sitefoot .fs-mk{color:var(--accent);font-weight:700;margin-right:8px;letter-spacing:.08em}

/* topbar nav (#6 view switch) */
.nav{display:flex;border:2px solid var(--ink)}
.nav button,.nav a{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  background:var(--paper);color:var(--ink);border:0;border-left:2px solid var(--ink);padding:7px 12px;cursor:pointer;transition:background .1s;
  text-decoration:none;display:inline-flex;align-items:center}
.nav button:first-child,.nav a:first-child{border-left:0}
.nav button:hover,.nav a:hover{background:var(--paper-2)}
.nav button[aria-selected="true"],.nav a[aria-selected="true"]{background:var(--ink);color:var(--paper)}

/* clubs near me (#1) */
.nearme{margin-top:18px}
.nearme .lbl{margin-bottom:10px}
.nm-form{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.nm-btn.icon{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px}
.nm-btn.icon svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
#nm-pc{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);border:2px solid var(--ink);padding:9px 12px;width:min(200px,42vw);outline:none}
#nm-pc:focus{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
#nm-pc::placeholder{color:rgba(11,11,10,.34)}
.nm-btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:9px 13px;cursor:pointer;transition:background .1s,transform .05s}
.nm-btn.ghost{background:var(--paper);color:var(--ink)}
.nm-btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.nm-btn:active{transform:translate(1px,1px)}
.nm-status{margin-top:10px;font-family:var(--mono);font-size:.72rem;color:var(--muted);min-height:1em}
.nm-status .ok{color:var(--accent)}
.nm-status b{color:var(--ink)}
.nm-clear{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;
  background:none;border:1px solid var(--line-soft);color:var(--muted);padding:2px 7px;margin-left:8px;cursor:pointer}
.nm-clear:hover{border-color:var(--ink);color:var(--ink)}
.dropdown .cl.mi{color:var(--accent);font-weight:700}
.clubsub .mi{color:var(--accent);font-weight:700}

/* live promotions (#10) — legend + per-plan chips */
.promos{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;
  border:2px solid var(--ink);background:var(--paper-2);padding:10px 14px}
.promos .promo-k{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:3px 8px}
.promos .promo-note{font-family:var(--mono);font-size:.64rem;color:var(--muted)}
.offers{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;max-width:340px}
.offers .offer{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.02em;
  color:var(--accent);border:1px solid var(--accent);padding:2px 7px}

/* price trend chip (#12) */
.trend{margin-top:6px;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.03em;
  display:inline-block;padding:2px 6px;border:1px solid var(--line-soft)}
.trend.up{color:#b23400}.trend.down{color:#116b2e}
/* direction-agnostic variants for non-price moves (a club moving UP a tier is good news) */
.trend.good{color:#116b2e}.trend.bad{color:#b23400}

/* club profile card (#3) + facility badges (#4) */
.profile{margin-top:20px;border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow)}
.pf-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:2px solid var(--ink);background:var(--paper-2)}
.pf-head h3{margin:0;font-family:var(--disp);font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:2px solid var(--ink);padding:4px 8px;background:var(--paper)}
.badge.hot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pf-item{padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.pf-item:nth-child(odd){border-right:1px solid var(--line-soft)}
.pf-hours{grid-column:1/-1;border-right:0}
.pf-k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pf-v{font-family:var(--disp);font-weight:600;font-size:.98rem}
.pf-v a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent)}
.hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:4px 16px}
.hrow{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.72rem;border-bottom:1px solid var(--line-soft);padding:3px 0}
.hrow .hd{color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hrow .ht{font-weight:700}
.pf-src{margin:0;padding:11px 16px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:.62rem;color:var(--muted)}

/* national price league (#6) */
.league{padding:clamp(20px,3vw,32px) clamp(16px,3vw,28px)}
.lg-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.4vw,3rem);line-height:.98;margin:0;letter-spacing:-.02em}
.lg-lede{margin:12px 0 0;max-width:62ch;color:var(--muted);font-size:.98rem}
.league-controls{display:flex;flex-wrap:wrap;gap:12px 18px;margin:20px 0 6px}
.league-controls label{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;gap:5px}
.league-controls select{font-family:var(--disp);font-weight:600;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);padding:8px 10px;cursor:pointer;min-width:150px}
.league-sub{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:6px 0 0}
.league-table{min-width:520px}
.league-table thead th{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);font-weight:700;text-align:left;padding:0 14px 10px;border-bottom:2px solid var(--ink);white-space:nowrap}
.league-table thead th.num{text-align:right}
.league-table tbody td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.league-table tbody td.num{text-align:right;font-family:var(--mono)}
.league-table tbody tr{cursor:pointer}
.league-table tbody tr:hover{background:rgba(255,61,0,.07)}
.lg-rank{font-family:var(--mono);font-weight:700;color:var(--muted);width:3ch}
.lg-name{font-family:var(--disp);font-weight:700;font-size:1.02rem}
.lg-country{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.lg-price{font-weight:700;font-size:1.02rem}
.fac-courts{font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.5}
.lg-price .per{font-size:.62rem;color:var(--muted);font-weight:400;margin-left:2px}
.lg-foot{margin:16px 0 0;font-family:var(--mono);font-size:.66rem;color:var(--muted)}

/* compare (#13) */
.backbtn{display:inline-block;margin-bottom:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;font-weight:700;background:var(--paper);border:2px solid var(--ink);color:var(--ink);
  text-decoration:none;padding:6px 11px;cursor:pointer;transition:background .1s,color .1s}
.backbtn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.backbtn:active{transform:translate(1px,1px)}
.cmp-slots{display:flex;flex-wrap:wrap;gap:10px}
.cmp-pick{font-family:var(--disp);font-weight:600;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);padding:9px 11px;cursor:pointer;flex:1;min-width:180px}
#cmp-table .cell .mo{font-size:1.06rem}

/* map (#14) */
#map-canvas{height:min(68vh,620px);margin-top:16px;border:2px solid var(--ink);box-shadow:var(--shadow);background:var(--paper-2)}
.leaflet-container{font-family:var(--mono)!important;background:var(--paper-2)}
.leaflet-popup-content{font-family:var(--disp)}
.leaflet-popup-content a{color:var(--accent);font-weight:700;text-decoration:none}

/* reveal */
.hero-main>*,.spec-row{opacity:0;animation:fade .5s ease forwards}
.hero h1{animation-delay:.04s}.lede{animation-delay:.12s}
.spec-row:nth-child(1){animation-delay:.14s}.spec-row:nth-child(2){animation-delay:.20s}
.spec-row:nth-child(3){animation-delay:.26s}.spec-row:nth-child(4){animation-delay:.32s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .spec{border-left:0;border-top:2px solid var(--ink)}
}
@media (max-width:560px){
  .frame{margin:10px;box-shadow:3px 3px 0 var(--ink)}
  /* Nav: the segmented strip wraps badly with 5 tabs, so on mobile give each
     tab its own bordered chip in a full-width wrapping grid. */
  .topbar{gap:10px}
  .nav{width:100%;border:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .nav button,.nav a{border:2px solid var(--ink)!important;text-align:center;justify-content:center;padding:9px 6px;font-size:.62rem}
  .panelhead{flex-direction:column;align-items:flex-start}
  .head-actions{width:100%}
  /* Stack the segmented control on mobile: equal columns can't fit the longest
     label ("ANNUAL · PAID YEARLY") without overflowing, so go full-width rows. */
  .durations{width:100%;flex-direction:column}
  .durations button{width:100%;text-align:center;border-left:0;border-top:2px solid var(--ink)}
  .durations button:first-child{border-top:0}
  .share{width:100%;justify-content:center}
  .pf-grid{grid-template-columns:1fr}
  .pf-item:nth-child(odd){border-right:0}
  /* Postcode row: the field takes a line of its own, then Search and the pin
     share the next one ~80/20. Stacking all three left the pin as a full-width
     bar with a 16px icon marooned in the middle. */
  .nm-form{align-items:stretch}
  #nm-pc{flex:0 0 100%;width:100%}
  .nm-btn{flex:1}
  .nm-btn.icon{flex:0 0 18%;min-width:52px;max-width:76px}
  .league-controls label{flex:1;min-width:140px}
  /* Every table overflows on a phone (the price table needs 540px, the league
     tables 520-538), but the desktop scroll-shadow is a hairline you can miss
     on a small screen — there's no scrollbar to give the game away either.
     Turn it up so the sideways scroll reads as an affordance. Applies to all
     five tables (price league, facilities, compare, movers and the club page
     price table) since they share .tablewrap. */
  .tablewrap{--sc-w:26px;--sc-ink:rgba(11,11,10,.4)}
}
@media (prefers-reduced-motion:reduce){
  .hero-main>*,.spec-row{opacity:1;animation:none;transform:none}.spin{animation:none}
}