/* whatgymscost.co.uk — the design system.
Signature colour is the Goldman Sachs light blue (#7399C6). It is a pale
colour by design, so it is used the way a bank uses it: as a *fill* — chips,
chart marks, map pins, washes — never as text on white, where it fails
contrast. Interactive elements use --primary, a darker derivation of the same
hue that clears 4.5:1 on white, so links and buttons stay legible while the
page still reads as light blue.
Everything visual on all 700+ pages comes from this block. */
:root{
/* -- signature ------------------------------------------------------- */
--brand:213 42% 61%; /* #7399C6 PMS 652 — the GS primary */
--brand-pale:205 71% 81%; /* #ACD4F1 PMS 544 — GS tertiary, for washes */
--brand-deep:213 42% 46%; /* #446EA6 chart marks, active map chips */
--brand-soft:210 55% 93%; /* chip fills */
--brand-wash:207 60% 97%; /* section grounds */
--primary:213 42% 46%; /* #446EA6 GS's own text-brand token, 5.2:1 */
--primary-hover:212 46% 36%;
--primary-fg:0 0% 100%;
--primary-tint:213 52% 96%;
/* -- neutrals -------------------------------------------------------- */
--ink:207 100% 15%; /* deep GS navy — headings and dark surfaces */
--navy:207 100% 19%; /* #00355F PMS 7463 */
--text:212 30% 16%;
--muted:214 13% 42%;
--faint:214 12% 56%;
--bg:210 28% 98%;
--card:0 0% 100%;
--border:213 20% 90%;
--border-strong:213 18% 82%;
--input:213 18% 82%;
/* -- signals --------------------------------------------------------- */
--accent:38 88% 52%; /* amber: owner side, pack pricing */
--accent-soft:38 88% 95%;
--accent-ink:33 78% 27%;
--hot:8 64% 47%; /* above median */
--success:161 58% 30%;
--danger:8 64% 45%;
--soft:213 48% 94%;
--gold:41 62% 47%; /* review stars */
--footer:#0d1b2a;
--footer-fg:#a7b6c6;
--footer-dim:#7b8ea3;
/* -- form ------------------------------------------------------------ */
--radius:.875rem;
--radius-sm:.5rem;
--shadow-xs:0 1px 2px 0 hsl(214 38% 12% / .04);
--shadow-sm:0 1px 3px 0 hsl(214 38% 12% / .05), 0 1px 2px -1px hsl(214 38% 12% / .04);
--shadow:0 4px 12px -2px hsl(214 38% 12% / .07), 0 2px 5px -3px hsl(214 38% 12% / .05);
--shadow-md:0 8px 22px -6px hsl(214 38% 12% / .10), 0 3px 8px -4px hsl(214 38% 12% / .06);
--shadow-lg:0 18px 42px -12px hsl(214 38% 12% / .16), 0 6px 14px -8px hsl(214 38% 12% / .08);
--ring:0 0 0 3px hsl(var(--brand) / .35);
--font-sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-display:"Schibsted Grotesk","Inter Tight",-apple-system,BlinkMacSystemFont,sans-serif;
--header-h:60px;
}
*,*::before,*::after{box-sizing:border-box}
/* An explicit display rule beats the hidden attribute, which silently breaks
every [hidden] toggle on the site. Put it back. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.5;
color:hsl(var(--text));background:hsl(var(--bg));-webkit-font-smoothing:antialiased;
font-feature-settings:'tnum' 0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
/* ---------- header ----------
The wordmark is centred against the *page*, not against whatever space the
two nav columns leave over. The earlier grid (1fr auto 1fr with
min-width:fit-content on both sides) let the wider right-hand column push the
centre column left, so the logo sat visibly off-centre on a phone — the thing
that got flagged. It is now absolutely positioned at the 50% line, and the
side columns are sized so they can never reach it. */
.hdr{position:sticky;top:0;z-index:60;background:hsl(var(--card)/.92);
backdrop-filter:saturate(1.5) blur(10px);-webkit-backdrop-filter:saturate(1.5) blur(10px);
border-bottom:1px solid hsl(var(--border))}
.hdr-in{position:relative;height:var(--header-h);display:flex;align-items:center;
justify-content:space-between;gap:8px;padding:0 14px}
.hdr-l,.hdr-r{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0}
.hdr-r{justify-content:flex-end}
.hdr-c{position:absolute;left:50%;top:0;height:100%;display:flex;align-items:center;
transform:translateX(-50%);pointer-events:none;max-width:calc(100% - 210px)}
.hdr-c>a{pointer-events:auto}
.hdr-nav{display:none}
.hdr-r .nav-link{display:none}
.nav-link{font-size:15px;font-weight:500;white-space:nowrap;color:hsl(var(--muted));
transition:color .14s ease}
.nav-link:hover{color:hsl(var(--primary))}
.logo{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:24px;
letter-spacing:-.032em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:hsl(var(--ink))}
.logo i{font-style:normal;color:hsl(var(--primary))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;
padding:0 15px;border-radius:9999px;font-size:14.5px;font-weight:600;
border:1px solid transparent;cursor:pointer;background:hsl(var(--primary));
color:hsl(var(--primary-fg));font-family:inherit;letter-spacing:-.01em;
transition:background .14s ease,box-shadow .14s ease,transform .14s ease}
.btn:hover{background:hsl(var(--primary-hover));box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn-amber{background:hsl(var(--accent));color:hsl(var(--accent-ink))}
.btn-amber:hover{background:hsl(38 88% 46%)}
.btn-ghost{background:hsl(var(--card));border-color:hsl(var(--border-strong));
color:hsl(var(--text))}
.btn-ghost:hover{background:hsl(var(--brand-wash));border-color:hsl(var(--brand));
color:hsl(var(--primary))}
.btn-sm{min-height:32px;padding:0 12px;font-size:13.5px}
.dot{display:inline-block;height:7px;width:7px;border-radius:9999px;
background:hsl(var(--brand-deep));margin-right:6px}
.burger{display:flex;align-items:center;justify-content:center;height:38px;width:38px;
margin-left:-6px;background:none;border:0;cursor:pointer;color:inherit;border-radius:9999px}
.burger:hover{background:hsl(var(--brand-wash))}
.hdr .btn{min-height:34px;padding:0 13px;font-size:13.5px}
/* dropdown menus — one pattern used by every menu on the site */
.menu{position:relative}
.menu>button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
font:inherit;font-size:15px;font-weight:500;color:hsl(var(--muted));cursor:pointer;
padding:6px 2px;white-space:nowrap;transition:color .14s ease}
.menu>button:hover,.menu[data-open="true"]>button{color:hsl(var(--primary))}
.menu>button svg{transition:transform .18s ease}
.menu[data-open="true"]>button svg{transform:rotate(180deg)}
.menu-pop{position:absolute;top:calc(100% + 10px);left:0;min-width:236px;z-index:80;
background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:12px;
box-shadow:var(--shadow-lg);padding:6px;opacity:0;visibility:hidden;
transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.menu[data-open="true"] .menu-pop{opacity:1;visibility:visible;transform:none}
.menu-pop.right{left:auto;right:0}
.menu-pop a{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:8px;
font-size:14.5px;font-weight:500;color:hsl(var(--text))}
.menu-pop a span{font-size:12.5px;font-weight:400;color:hsl(var(--muted))}
.menu-pop a:hover{background:hsl(var(--brand-wash));color:hsl(var(--primary))}
.menu-pop hr{border:0;border-top:1px solid hsl(var(--border));margin:6px 8px}
@media(min-width:1024px){
.hdr-in{padding:0 26px;gap:16px}
.burger{display:none}
.hdr-nav{display:flex;align-items:center;column-gap:22px}
.hdr-r{column-gap:20px}
.hdr-r .nav-link{display:block}
.hdr .btn{min-height:38px;padding:0 16px;font-size:14.5px}
.logo{font-size:23px;line-height:30px}
.hdr-c{max-width:calc(100% - 620px)}
}
#mnav{display:none;border-top:1px solid hsl(var(--border));background:hsl(var(--card));
padding:6px 16px 16px;max-height:calc(100vh - var(--header-h));overflow-y:auto}
#mnav.open{display:block}
#mnav a{display:block;padding:11px 0;font-weight:500;border-bottom:1px solid hsl(var(--border))}
#mnav a:last-child{border-bottom:0}
#mnav .mgroup{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
color:hsl(var(--faint));padding:14px 0 4px}
@media(min-width:1024px){#mnav,#mnav.open{display:none}}
/* ---------- responsive label swap ---------- */
.narrow-only{display:inline}
.wide{display:none}
@media(min-width:1024px){.narrow-only{display:none}.wide{display:inline}}
/* owner-side chrome overrides for the shared menu pattern */
.hdr.owner .menu>button{color:#b8c8d6}
.hdr.owner .menu>button:hover,.hdr.owner .menu[data-open="true"]>button{color:hsl(38 88% 62%)}
/* ---------- layout ---------- */
.wrap{max-width:1440px;margin:0 auto}
.narrow{max-width:880px;margin:0 auto;padding:28px 20px 56px}
.crumbs{font-size:13px;color:hsl(var(--muted));margin-bottom:14px;display:flex;
flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a:hover{color:hsl(var(--primary));text-decoration:underline}
.crumbs .sep{opacity:.5}
h1.page{font-family:var(--font-display);font-size:36px;line-height:1.08;font-weight:700;
letter-spacing:-.035em;margin-bottom:6px}
.lede{color:hsl(var(--muted));font-size:15px;max-width:62ch}
.asof{font-size:13px;color:hsl(var(--muted));margin-top:10px}
.asof a{color:hsl(var(--primary));text-decoration:underline}
h2.sec{font-size:20px;margin:34px 0 12px;font-weight:600}
/* ---------- filter bar ---------- */
.filters{position:sticky;top:var(--header-h);z-index:50;background:#fff;
border-bottom:1px solid hsl(var(--border));padding:10px 16px;display:flex;gap:8px;
align-items:center;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.search{position:relative;flex:0 0 auto}
.search input{width:230px;height:38px;padding:0 12px 0 34px;border-radius:9999px;
border:1px solid hsl(var(--input));font:inherit;font-size:14px;background:#fff}
.search input:focus{outline:2px solid hsl(var(--primary)/.28);outline-offset:1px;
border-color:hsl(var(--primary))}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
color:hsl(var(--muted));pointer-events:none}
select.f{height:38px;border-radius:9999px;border:1px solid hsl(var(--input));background:#fff;
font:inherit;font-size:14px;padding:0 30px 0 12px;cursor:pointer;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center}
.seg{display:inline-flex;background:hsl(var(--bg));border:1px solid hsl(var(--border));
border-radius:9999px;padding:3px;flex:0 0 auto}
.seg button{border:0;background:none;font:inherit;font-size:14px;font-weight:500;
padding:5px 13px;border-radius:9999px;cursor:pointer;color:hsl(var(--muted));white-space:nowrap}
.seg button[aria-pressed="true"]{background:hsl(var(--primary));color:#fff}
/* ---------- browse split ---------- */
.split{display:grid;grid-template-columns:1fr;min-height:calc(100vh - var(--header-h) - 59px)}
@media(min-width:1024px){.split{grid-template-columns:minmax(420px,44%) 1fr}}
.listcol{padding:20px 20px 60px;min-width:0}
.mapcol{display:none;position:sticky;top:calc(var(--header-h) + 59px);
height:calc(100vh - var(--header-h) - 59px);background:hsl(var(--bg));
border-left:1px solid hsl(var(--border))}
@media(min-width:1024px){.mapcol{display:block}}
#map{width:100%;height:100%}
.sortrow{display:flex;justify-content:flex-end;align-items:center;gap:8px;
font-size:14px;color:hsl(var(--muted));margin:16px 0 4px}
.sortrow select{border:0;background:none;font:inherit;font-weight:500;
color:hsl(var(--text));cursor:pointer;padding-right:2px}
.count{font-size:14px;color:hsl(var(--muted));margin-top:10px}
/* ---------- gym rows ---------- */
.rows{background:hsl(var(--card));border-radius:var(--radius);overflow:hidden;
border:1px solid hsl(var(--border));box-shadow:var(--shadow-xs)}
.row{display:flex;gap:10px;align-items:center;padding:11px 14px 11px 6px;
border-bottom:1px solid hsl(var(--border));transition:background .12s ease}
.row:last-child{border-bottom:0}
.row:hover{background:hsl(var(--brand-wash))}
.row.hl{background:hsl(var(--brand-soft)/.55)}
.row-l{min-width:0;flex:1 1 auto;display:block;padding:2px 0}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.row-name{font-weight:600;font-size:15px;line-height:1.3}
.row:hover .row-name{color:hsl(var(--primary))}
.row-sub{font-size:13px;color:hsl(var(--muted));margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.chip{font-size:11px;font-weight:500;padding:2px 8px;border-radius:9999px;
background:hsl(var(--brand-soft));color:hsl(var(--primary));border:1px solid hsl(var(--brand)/.35)}
.chip.amber{background:hsl(var(--accent-soft));color:hsl(var(--accent-ink));border-color:hsl(var(--accent)/.45)}
.row-r{text-align:right;min-width:112px;display:block}
.pricelabel{font-size:10.5px;color:hsl(var(--faint));display:block;letter-spacing:.01em}
.price{font-weight:700;font-size:19px;white-space:nowrap;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;font-family:var(--font-display)}
.price .per{font-weight:500;font-size:12px;color:hsl(var(--muted))}
.before{font-size:12px;color:hsl(var(--muted));text-decoration:line-through}
.term{font-size:11px;color:hsl(var(--muted));margin-top:3px}
.noprice{font-size:13px;color:hsl(var(--muted))}
/* ---------- gym detail ---------- */
.gymhead{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;
flex-wrap:wrap;margin-bottom:4px}
.compare{font-size:15px;color:hsl(var(--muted));margin-top:8px}
.compare b{color:hsl(var(--text))}
.compare .good{color:hsl(var(--success));font-weight:600}
.compare .bad{color:hsl(var(--danger));font-weight:600}
.srclink{display:inline-flex;align-items:center;gap:5px;font-size:14px;
color:hsl(var(--primary));margin-top:10px;text-decoration:underline}
.plans{margin-top:8px;border:1px solid hsl(var(--border));border-radius:var(--radius);
overflow:hidden;background:#fff;box-shadow:var(--shadow-xs)}
.plan{display:flex;gap:14px;justify-content:space-between;align-items:center;
padding:15px 18px;border-bottom:1px solid hsl(var(--border))}
.plan:last-child{border-bottom:0}
.plan:hover{background:hsl(var(--bg))}
.plan-name{font-weight:600;font-size:15px}
.plan-meta{font-size:12.5px;color:hsl(var(--muted));margin-top:3px}
.plan-r{text-align:right;white-space:nowrap}
.plan-price{font-weight:700;font-size:21px;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;font-family:var(--font-display)}
.plan-price .cur{font-size:12px;font-weight:500;color:hsl(var(--muted));
vertical-align:5px;margin-right:1px}
.plan-price .per{font-size:11.5px;font-weight:500;color:hsl(var(--muted))}
.badge{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.03em;
padding:2px 6px;border-radius:5px;background:hsl(var(--bg));
border:1px solid hsl(var(--border));color:hsl(var(--muted));margin-left:7px;
vertical-align:2px;text-transform:uppercase}
.note{font-size:13px;color:hsl(var(--muted));margin-top:12px;line-height:1.6}
.receipt{margin-top:18px;border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--bg));padding:16px 18px}
.receipt h3{font-size:15px;margin-bottom:10px}
.receipt table{width:100%;border-collapse:collapse;font-size:14px}
.receipt td{padding:5px 0}
.receipt td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.receipt tr.tot td{border-top:1px solid hsl(var(--border));padding-top:9px;
font-weight:700;font-size:15px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
margin-top:18px}
.fact{border:1px solid hsl(var(--border));border-radius:10px;padding:12px 14px;background:#fff}
.fact dt{font-size:11.5px;color:hsl(var(--muted));text-transform:uppercase;letter-spacing:.04em}
.fact dd{margin:4px 0 0;font-weight:600;font-size:15px}
#gmap{height:280px;border-radius:var(--radius);border:1px solid hsl(var(--border));
margin-top:18px;background:hsl(var(--bg))}
/* ---------- home ---------- */
.hero{padding:56px 20px 30px;text-align:center}
.hero h1{font-family:var(--font-display);font-size:clamp(34px,6.5vw,58px);line-height:1.02;
font-weight:700;letter-spacing:-.04em}
.hero p{max-width:60ch;margin:16px auto 0;color:hsl(var(--muted));font-size:17px}
.herocta{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
max-width:880px;margin:34px auto 0;padding:0 20px}
.stat{border:1px solid hsl(var(--border));border-radius:var(--radius);padding:16px;
text-align:center;background:#fff;box-shadow:var(--shadow-xs)}
.stat b{display:block;font-family:var(--font-display);font-size:28px;font-weight:700;
letter-spacing:-.03em;color:hsl(var(--ink));font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:hsl(var(--muted))}
.linklist{line-height:2.1;font-size:15px}
.linklist a{text-decoration:underline;text-decoration-color:hsl(var(--border));
text-underline-offset:3px}
.linklist a:hover{color:hsl(var(--primary))}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.mini{border:1px solid hsl(var(--border));border-radius:12px;padding:13px 15px;background:#fff}
.mini:hover{border-color:hsl(var(--primary));box-shadow:var(--shadow-sm)}
.mini b{display:block;font-size:15px}
.mini span{font-size:12.5px;color:hsl(var(--muted))}
/* ---------- faq ---------- */
.qa{border-bottom:1px solid hsl(var(--border));padding:16px 0}
.qa h3{font-size:16px;margin-bottom:6px}
.qa p{margin:0;color:hsl(var(--muted));font-size:14.5px;line-height:1.65}
/* ---------- footer ---------- */
.ftr{margin-top:56px;background:var(--footer);color:var(--footer-fg)}
.ftr-in{max-width:1180px;margin:0 auto;padding:44px 20px 26px;font-size:14px}
.ftr-cols{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:640px){.ftr-cols{grid-template-columns:repeat(2,1fr);gap:28px 24px}}
@media(min-width:1024px){.ftr-cols{grid-template-columns:1.6fr repeat(4,1fr);gap:32px}}
.ftr h4{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:#e7eef5}
.ftr-cols>div>a{display:block;padding:5px 0;color:var(--footer-fg);transition:color .14s ease}
.ftr-cols>div>a:hover{color:#fff}
.ftr-logo{font-family:var(--font-display);font-weight:700;font-size:19px;
letter-spacing:-.03em;color:#fff}
.ftr-logo i{font-style:normal;color:hsl(var(--brand))}
.ftr-brand p{margin:12px 0 0;font-size:13.5px;line-height:1.65;max-width:38ch;
color:var(--footer-dim)}
.ftr-note a{color:var(--footer-fg);text-decoration:underline;text-underline-offset:3px}
.ftr-end{margin-top:32px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09);
display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:center;
color:var(--footer-dim);font-size:12.5px}
.ftr-legal{display:flex;gap:16px}
.ftr-legal a{color:var(--footer-dim)}
.ftr-legal a:hover{color:#fff;text-decoration:underline}
.empty{padding:40px 4px;color:hsl(var(--muted));font-size:15px}
.leaflet-container{font:inherit}
.pin{background:hsl(var(--text));color:#fff;border-radius:9999px;font-size:11.5px;
font-weight:700;padding:3px 7px;white-space:nowrap;border:2px solid #fff;
box-shadow:0 1px 4px rgba(0,0,0,.35);text-align:center}
.pin.on{background:hsl(var(--primary))}
/* ---------- charts ---------- */
.chartfig{margin:18px 0 0;padding:16px 16px 10px;border:1px solid hsl(var(--border));
border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-xs)}
.chartfig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:12px}
.chartfig figcaption b{font-size:15px;font-weight:600}
.chartfig figcaption span{font-size:13px;color:hsl(var(--muted))}
.chart{display:block;overflow:visible;font-family:var(--font-sans)}
.chartnote{margin:8px 0 0;font-size:12.5px;color:hsl(var(--muted))}
.charttable{margin-top:10px;font-size:13px}
.charttable summary{cursor:pointer;color:hsl(var(--muted));font-size:12.5px;
padding:4px 0;user-select:none}
.charttable summary:hover{color:hsl(var(--primary))}
.charttable table{width:100%;border-collapse:collapse;margin-top:8px}
.charttable th,.charttable td{text-align:left;padding:5px 8px;
border-bottom:1px solid hsl(var(--border));font-variant-numeric:tabular-nums}
.charttable th{color:hsl(var(--muted));font-weight:500;font-size:12px}
/* Growth animation: transform/opacity only, so it stays on the compositor.
transform-box:fill-box is required — without it an SVG transform-origin
resolves against the whole viewport, not the mark, and bars scale off-screen.
Everything is only hidden once JS has confirmed it can animate (.js-anim),
so the charts still render fully with JavaScript disabled or broken. */
.chart .cbar,.chart .crow{transform-box:fill-box}
.chart .cbar{transform-origin:center bottom}
.chart .crow{transform-origin:left center}
.js-anim .chart .cbar,.js-anim .chart .crow{opacity:0}
.js-anim .chart .cline{stroke-dasharray:1400;stroke-dashoffset:1400}
.js-anim .chart .cdot{opacity:0}
.js-anim .chart.in .cbar{animation:cgrow .5s cubic-bezier(.22,.61,.36,1) forwards;
animation-delay:calc(var(--i,0) * 22ms)}
.js-anim .chart.in .crow{animation:cwipe .55s cubic-bezier(.22,.61,.36,1) forwards;
animation-delay:calc(var(--i,0) * 38ms)}
.js-anim .chart.in .cline{animation:cdraw .9s cubic-bezier(.4,0,.2,1) forwards}
.js-anim .chart.in .cdot{animation:cfade .3s ease forwards;animation-delay:.5s}
@keyframes cgrow{from{transform:scaleY(.02);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes cwipe{from{transform:scaleX(.02);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes cdraw{to{stroke-dashoffset:0}}
@keyframes cfade{to{opacity:1}}
.chart [data-tip]{transition:filter .12s ease}
.chart [data-tip]:hover{filter:brightness(1.14)}
@media (prefers-reduced-motion:reduce){
.js-anim .chart .cbar,.js-anim .chart .crow,.js-anim .chart .cdot{
opacity:1;transform:none;animation:none}
.js-anim .chart .cline{stroke-dashoffset:0;animation:none}
}
#chartTip{position:fixed;z-index:200;pointer-events:none;opacity:0;
transform:translate(-50%,-118%) scale(.97);transition:opacity .12s ease,transform .12s ease;
background:hsl(var(--ink));color:#fff;font-size:12.5px;line-height:1.45;
padding:7px 10px;border-radius:8px;max-width:260px;
box-shadow:0 6px 18px hsl(0 0% 0% / .22);font-variant-numeric:tabular-nums}
#chartTip.on{opacity:1;transform:translate(-50%,-128%) scale(1)}
/* ---------- amenity filters ---------- */
.amenbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 12px;
border-bottom:1px solid hsl(var(--border));background:#fff}
.amen{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:9999px;
border:1px solid hsl(var(--border));background:#fff;color:hsl(var(--muted));
cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .12s,
color .12s,border-color .12s}
.amen:hover{border-color:hsl(var(--primary));color:hsl(var(--primary))}
.amen[aria-pressed="true"]{background:hsl(var(--primary));border-color:hsl(var(--primary));
color:#fff}
.amen-more{color:hsl(var(--primary));border-style:dashed}
.amenlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.amenlist span{font-size:12.5px;padding:4px 10px;border-radius:9999px;
background:hsl(var(--brand-soft));color:hsl(var(--primary));border:1px solid hsl(var(--brand)/.35)}
/* ---------- outbound + deltas ---------- */
.outbound{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.delta{font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:5px;margin-left:6px}
.delta.up{background:hsl(var(--hot)/.10);color:hsl(var(--hot))}
.delta.down{background:hsl(var(--success)/.10);color:hsl(var(--success))}
.pin.cluster{background:hsl(var(--primary));font-size:11px;letter-spacing:.01em;
padding:4px 9px;cursor:pointer}
.pin.cluster:hover{background:hsl(var(--primary-hover))}
/* ---------- two-door entry ---------- */
.doors{display:grid;grid-template-columns:1fr;gap:14px;max-width:920px;margin:8px auto 0;
padding:0 20px}
@media(min-width:720px){.doors{grid-template-columns:1fr 1fr}}
.door{display:flex;flex-direction:column;gap:7px;padding:22px;border-radius:var(--radius);
border:1px solid hsl(var(--border));background:#fff;box-shadow:var(--shadow-xs);
transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s,border-color .16s}
.door:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:hsl(var(--primary))}
.door-tag{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:hsl(var(--primary))}
.door b{font-family:var(--font-display);font-size:21px;letter-spacing:-.025em;line-height:1.2}
.door-sub{font-size:14.5px;color:hsl(var(--muted));line-height:1.55}
.door-go{margin-top:4px;font-size:14.5px;font-weight:600;color:hsl(var(--primary))}
.door.owner{background:hsl(var(--ink));border-color:hsl(var(--ink))}
.door.owner b{color:#fff}
.door.owner .door-tag,.door.owner .door-go{color:hsl(38 88% 62%)}
.door.owner .door-sub{color:var(--footer-fg)}
.door.owner:hover{border-color:hsl(var(--accent))}
/* ---------- owner side ---------- */
.hdr.owner{background:hsl(var(--ink));border-bottom-color:hsl(214 26% 24%)}
.hdr.owner .nav-link,.hdr.owner .logo{color:#fff}
.hdr.owner .logo i{color:hsl(38 88% 62%)}
.hdr.owner .logo b{font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
color:#8fa6b2;margin-left:6px}
.hdr.owner .nav-link:hover{color:hsl(38 88% 62%)}
.hdr.owner .btn{background:hsl(var(--accent));color:hsl(var(--ink))}
.hdr.owner .burger{color:#fff}
.ownerlink{color:hsl(var(--primary));font-weight:600}
.ownerband{background:hsl(var(--ink));color:#fff;padding:34px 20px 30px}
.ownerband .wrapin{max-width:880px;margin:0 auto}
.ownerband h1{font-family:var(--font-display);font-size:clamp(30px,5.5vw,44px);
letter-spacing:-.035em;line-height:1.05}
.ownerband p{color:var(--footer-fg);font-size:16.5px;max-width:60ch;margin:12px 0 0}
.ownerband .btn{margin-top:18px;background:hsl(var(--accent));color:hsl(var(--ink))}
.checkbox{border:1px solid hsl(var(--border));border-radius:var(--radius);background:#fff;
padding:18px;margin-top:18px}
.checkbox label{display:block;font-size:13px;font-weight:600;color:hsl(var(--muted));
margin-bottom:7px}
.checkbox select{width:100%;height:44px;border-radius:9px;border:1px solid hsl(var(--input));
font:inherit;font-size:15px;padding:0 12px;background:#fff}
.verdict{margin-top:16px;padding:16px;border-radius:10px;background:hsl(var(--bg));
border:1px solid hsl(var(--border))}
.verdict .big{font-family:var(--font-display);font-size:30px;letter-spacing:-.03em;
font-variant-numeric:tabular-nums}
.verdict .good{color:hsl(var(--success))}
.verdict .bad{color:hsl(var(--danger))}
/* ---------- mobile hardening ---------- */
/* Map tiles must never widen the page. */
#map,#gmap{overflow:hidden;max-width:100%}
.leaflet-container{max-width:100%;overflow:hidden}
.mapcol{overflow:hidden}
/* Touch sizing follows the input device as well as the width, so tablets
get finger-sized targets too. */
@media (hover:none) and (pointer:coarse){
.ftr-in a{display:inline-block;padding:6px 0;min-height:36px}
.ftr-in{line-height:2.3}
.nav-link{padding:8px 0}
.amen{padding:9px 13px;font-size:13.5px}
.seg button{padding:9px 15px}
.search input,select.f{height:44px}
.btn{min-height:44px}
.charttable summary{padding:9px 0}
.linklist{line-height:2.5}
.linklist a{display:inline-block;padding:4px 0}
.crumbs a{display:inline-block;padding:4px 0}
}
@media(max-width:767px){
/* Keep the header on one line: compact CTA, no wrapping. */
.hdr-in{grid-template-columns:auto 1fr auto;gap:6px;padding:0 12px}
.hdr-r .btn{font-size:13.5px;padding:0 11px;min-height:36px;white-space:nowrap}
.logo{font-size:17px}
.hdr.owner .logo b{display:none}
/* Legibility: nothing meaningful below 12.5px on a phone. */
.row-sub{font-size:13.5px}
.chip{font-size:12px;padding:3px 9px}
.pricelabel{font-size:12px}
.term{font-size:12px}
.price{font-size:21px}
.lede{font-size:15.5px}
.chartnote,.note{font-size:14px}
.ftr-in{font-size:14px;line-height:2.4}
.crumbs{font-size:13.5px}
.charttable summary{font-size:14px;padding:8px 0}
/* Touch targets: 44px is the Apple/Google guidance and worth honouring. */
.ftr-in a{display:inline-block;padding:5px 0;min-height:34px}
.amen{padding:9px 13px;font-size:13.5px}
.seg button{padding:9px 15px;font-size:14.5px}
.search input,select.f{height:44px;font-size:15px}
.btn{min-height:44px;padding:0 16px}
.row{padding:15px 14px;gap:10px}
.row-r{min-width:104px}
.nav-link{padding:6px 0}
#mnav a{padding:13px 0;font-size:16px}
.mini{padding:15px}
.plan{padding:15px 14px}
.door{padding:20px}
/* Charts: give the SVG room and let wide ones scroll inside their own box. */
.chartfig{padding:14px 12px 8px;margin-left:-4px;margin-right:-4px}
.chartfig figcaption b{font-size:15.5px}
.chart{min-width:0;height:auto}
.chartfig .chart{max-height:230px}
.chartscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.narrow{padding:20px 16px 44px}
h1.page{font-size:30px}
.stats{grid-template-columns:1fr 1fr;gap:10px}
.stat{padding:14px 10px}
.stat b{font-size:24px}
.facts{grid-template-columns:1fr 1fr}
.listcol{padding:16px 14px 50px}
.filters{padding:9px 12px;gap:7px}
.amenbar{padding:8px 12px 10px}
}
/* Safety net: if the observer never fires (bfcache, reduced motion quirks,
an old WebView), reveal the charts anyway rather than showing blank boxes. */
.js-anim .chart.shown .cbar,.js-anim .chart.shown .crow,
.js-anim .chart.shown .cdot{opacity:1!important;transform:none!important}
.js-anim .chart.shown .cline{stroke-dashoffset:0!important}
.showmore{display:block;width:100%;margin:14px 0 0;padding:13px;border-radius:10px;
border:1px solid hsl(var(--border));background:#fff;font:inherit;font-size:15px;
font-weight:600;color:hsl(var(--primary));cursor:pointer;min-height:46px}
.showmore:hover{border-color:hsl(var(--primary));background:hsl(var(--primary-tint))}
/* ================================================================
COMPONENTS ADDED IN THE PREMIUM REBUILD
Everything below is new surface: hero search, logo wall, dialogs,
the compare tray, watchlist hearts, packs, ratings, travel costs
and the borough heat map.
================================================================ */
/* ---------- section rhythm ---------- */
.band{padding:44px 0}
.band.wash{background:hsl(var(--brand-wash));border-block:1px solid hsl(var(--border))}
.hold{max-width:1180px;margin:0 auto;padding:0 20px}
.hold-narrow{max-width:880px;margin:0 auto;padding:0 20px}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:hsl(var(--primary))}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
gap:8px 16px;margin-bottom:16px}
.sechead h2{font-family:var(--font-display);font-size:24px;letter-spacing:-.03em;
font-weight:700}
.sechead p{margin:4px 0 0;font-size:14px;color:hsl(var(--muted))}
.sechead a{font-size:14px;font-weight:600;color:hsl(var(--primary))}
.sechead a:hover{text-decoration:underline}
/* ---------- hero search ---------- */
.hero{padding:52px 20px 8px;text-align:center}
.hero h1{font-family:var(--font-display);font-size:clamp(33px,6vw,56px);line-height:1.03;
font-weight:700;letter-spacing:-.04em;max-width:16ch;margin:0 auto}
.hero p.sub{max-width:56ch;margin:16px auto 0;color:hsl(var(--muted));font-size:17px;
line-height:1.55}
.pcform{max-width:520px;margin:26px auto 0}
.pcrow{display:flex;gap:8px;align-items:stretch}
.pcform .pcwrap{position:relative;flex:1 1 auto;min-width:0}
.pcform input{width:100%;height:52px;border-radius:9999px;border:1px solid hsl(var(--input));
background:hsl(var(--card));font:inherit;font-size:16px;padding:0 16px 0 44px;
box-shadow:var(--shadow-sm);transition:border-color .14s ease,box-shadow .14s ease}
.pcform input:focus{outline:0;border-color:hsl(var(--brand));box-shadow:var(--ring)}
.pcform .pcpin{position:absolute;left:15px;top:50%;transform:translateY(-50%);
color:hsl(var(--brand-deep));pointer-events:none}
.pcform .btn{height:52px;min-height:52px;padding:0 22px;font-size:15.5px;flex:0 0 auto}
.pcform.busy{opacity:.6;pointer-events:none}
.pcalt{margin:12px auto 0;font-size:13.5px;color:hsl(var(--muted));display:flex;gap:14px;
justify-content:center;flex-wrap:wrap}
.pcalt button{background:none;border:0;font:inherit;font-size:13.5px;color:hsl(var(--primary));
font-weight:600;cursor:pointer;padding:4px 0}
.uselocbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px!important;
border:1px solid hsl(var(--brand))!important;border-radius:9999px;
background:hsl(var(--brand-wash))!important;transition:background .14s ease}
.uselocbtn:hover{background:hsl(var(--brand-soft))!important}
.uselocbtn[data-busy]{opacity:.6;pointer-events:none}
.pcmsg{color:hsl(var(--danger));font-size:13.5px;margin:10px 0 0}
@media(max-width:559px){
.pcrow{flex-direction:column;gap:10px}
.pcform .btn{width:100%}
}
/* ---------- logo wall ---------- */
.logowall{margin-top:38px}
.logowall>p:first-child{font-size:11.5px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:hsl(var(--faint));text-align:center;margin:0 0 18px}
.logorow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:18px 34px;max-width:960px;margin:0 auto}
.logorow a{display:flex;align-items:center;justify-content:center;height:34px;
opacity:.8;filter:grayscale(1) contrast(1.08);
transition:opacity .18s ease,filter .18s ease}
.logorow a:hover{opacity:1;filter:none}
.logorow img{width:auto;max-width:132px;object-fit:contain}
.logowall .logonote{margin:20px auto 0;max-width:64ch;font-size:11.5px;line-height:1.55;
color:hsl(var(--faint));text-align:center;text-transform:none;letter-spacing:0;
font-weight:400}
@media(max-width:767px){
.logorow{gap:14px 24px}
.logorow a{height:26px}
.logorow img{max-width:100px}
}
/* ---------- stat strip ---------- */
.statstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:760px;
margin:36px auto 0;border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--card));box-shadow:var(--shadow-sm);overflow:hidden}
.statstrip .st{padding:18px 14px;text-align:center;border-right:1px solid hsl(var(--border))}
.statstrip .st:last-child{border-right:0}
.statstrip b{display:block;font-family:var(--font-display);font-size:27px;font-weight:700;
letter-spacing:-.03em;color:hsl(var(--ink));font-variant-numeric:tabular-nums;line-height:1.1}
.statstrip span{font-size:12.5px;color:hsl(var(--muted));display:block;margin-top:3px}
/* ---------- feature cards ---------- */
.fcards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.fcards{grid-template-columns:repeat(3,1fr)}}
.fcard{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--radius);
border:1px solid hsl(var(--border));background:hsl(var(--card));box-shadow:var(--shadow-xs);
transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s,border-color .18s}
.fcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);
border-color:hsl(var(--brand))}
.fcard .ficon{height:38px;width:38px;border-radius:11px;display:flex;align-items:center;
justify-content:center;background:hsl(var(--brand-soft));color:hsl(var(--primary));
margin-bottom:2px}
.fcard b{font-family:var(--font-display);font-size:18px;letter-spacing:-.02em;line-height:1.25}
.fcard span{font-size:14px;color:hsl(var(--muted));line-height:1.55}
.fcard .go{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;
color:hsl(var(--primary))}
/* ---------- watchlist heart ---------- */
.heart{display:inline-flex;align-items:center;justify-content:center;height:36px;width:36px;
border-radius:9999px;border:0;background:none;cursor:pointer;color:hsl(var(--faint));
flex:0 0 auto;transition:color .14s ease,background .14s ease}
.heart:hover{background:hsl(var(--brand-wash));color:hsl(var(--primary))}
.heart[aria-pressed="true"]{color:hsl(var(--hot))}
.heart[aria-pressed="true"] svg{fill:currentColor}
.heart:focus-visible{outline:0;box-shadow:var(--ring)}
/* ---------- compare checkbox on a row ---------- */
.cmpbtn{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 9px;
border-radius:9999px;border:1px solid hsl(var(--border-strong));background:hsl(var(--card));
font:inherit;font-size:12.5px;font-weight:600;color:hsl(var(--muted));cursor:pointer;
white-space:nowrap;transition:all .14s ease}
.cmpbtn:hover{border-color:hsl(var(--brand));color:hsl(var(--primary));
background:hsl(var(--brand-wash))}
.cmpbtn.on{background:hsl(var(--primary));border-color:hsl(var(--primary));color:#fff}
.cmpbtn .tick{display:none}
.cmpbtn.on .tick{display:block}
.cmpbtn.on .plus{display:none}
/* ---------- compare tray ---------- */
body.has-tray{padding-bottom:88px}
#cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:hsl(var(--ink));
color:#fff;box-shadow:0 -8px 24px hsl(214 38% 12% / .22)}
.cmpbar-in{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;gap:12px;
align-items:center;justify-content:space-between;flex-wrap:wrap}
.cmpchips{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.cmpchip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;
border-radius:9999px;background:rgba(255,255,255,.12);font-size:12.5px;font-weight:500;
max-width:min(260px,44vw);min-width:0}
.cmpchip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cmpchip button{display:inline-flex;align-items:center;justify-content:center;height:20px;
width:20px;border-radius:9999px;border:0;background:rgba(255,255,255,.18);color:#fff;
cursor:pointer;flex:0 0 auto}
.cmpchip button:hover{background:rgba(255,255,255,.32)}
.cmpacts{display:flex;align-items:center;gap:14px;margin-left:auto}
.cmpacts .linky{background:none;border:0;color:#bcd0e2;font:inherit;font-size:13.5px;
cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cmpacts .linky:hover{color:#fff}
.cmpacts .btn{background:hsl(var(--brand));color:hsl(var(--ink));font-weight:700}
.cmpacts .btn:hover{background:#fff}
@media(max-width:559px){
.cmpbar-in{padding:10px 12px;gap:8px}
/* Two per row with real width, rather than four slivers. */
.cmpchips{gap:6px}
.cmpchip{flex:1 1 calc(50% - 3px);max-width:none;font-size:12px;padding:5px 5px 5px 11px}
.cmpacts{width:100%;justify-content:space-between}
}
/* ---------- sheet / dialog ---------- */
body.sheet-open{overflow:hidden}
.sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;
justify-content:center}
@media(min-width:640px){.sheet{align-items:center}}
.sheet-scrim{position:absolute;inset:0;background:hsl(214 38% 12% / .45);
backdrop-filter:blur(2px);animation:fadein .18s ease}
.sheet-card{position:relative;width:100%;max-width:440px;background:hsl(var(--card));
border-radius:20px 20px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));
box-shadow:var(--shadow-lg);animation:sheetup .22s cubic-bezier(.22,.61,.36,1);
max-height:92vh;overflow-y:auto}
@media(min-width:640px){.sheet-card{border-radius:18px;padding:26px;animation:fadein .18s ease}}
.sheet-card h2{font-family:var(--font-display);font-size:21px;letter-spacing:-.03em;
padding-right:32px}
.sheet-sub{margin:8px 0 18px;font-size:14px;color:hsl(var(--muted));line-height:1.55}
.sheet-x{position:absolute;top:14px;right:14px;height:32px;width:32px;border-radius:9999px;
border:0;background:hsl(var(--bg));color:hsl(var(--muted));cursor:pointer;display:flex;
align-items:center;justify-content:center}
.sheet-x:hover{background:hsl(var(--brand-soft));color:hsl(var(--primary))}
.sheet-card label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
.sheet-card label span{font-weight:400;color:hsl(var(--faint))}
.sheet-card input[type=email],.sheet-card input[type=text],.sheet-card input[type=number],
.sheet-card textarea,.sheet-card select{width:100%;height:46px;border-radius:10px;
border:1px solid hsl(var(--input));background:hsl(var(--card));font:inherit;font-size:15px;
padding:0 13px;transition:border-color .14s ease,box-shadow .14s ease}
.sheet-card textarea{height:auto;min-height:104px;padding:11px 13px;resize:vertical;
line-height:1.55}
.sheet-card input:focus,.sheet-card textarea:focus,.sheet-card select:focus{outline:0;
border-color:hsl(var(--brand));box-shadow:var(--ring)}
.inputmoney{position:relative;display:flex;align-items:center}
.inputmoney>span{position:absolute;left:13px;font-size:15px;color:hsl(var(--muted));
pointer-events:none}
.inputmoney>em{position:absolute;right:13px;font-style:normal;font-size:13px;
color:hsl(var(--muted));pointer-events:none}
.inputmoney input{padding-left:26px!important;padding-right:64px!important}
.sheet-fine{font-size:12px;color:hsl(var(--muted));line-height:1.5;margin:14px 0 16px}
.sheet-fine a{color:hsl(var(--primary));text-decoration:underline}
.sheet-card .btn{width:100%;min-height:46px}
.sheet-msg{margin:12px 0 0;font-size:13.5px;text-align:center}
.sheet-msg.ok{color:hsl(var(--success))}
.sheet-msg.bad{color:hsl(var(--danger))}
@keyframes sheetup{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* ---------- toast ---------- */
#wgc-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);z-index:140;
background:hsl(var(--ink));color:#fff;font-size:13.5px;font-weight:500;padding:11px 18px;
border-radius:9999px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
transition:opacity .18s ease,transform .18s ease;max-width:calc(100vw - 32px)}
#wgc-toast.on{opacity:1;transform:translate(-50%,0)}
body.has-tray #wgc-toast{bottom:96px}
/* ---------- ratings ---------- */
.rating{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;
color:hsl(var(--muted));font-variant-numeric:tabular-nums;white-space:nowrap}
.rating b{color:hsl(var(--text));font-weight:600}
.rating svg{color:hsl(var(--gold))}
/* ---------- packs ---------- */
.perclass{font-size:12px;color:hsl(var(--muted));font-variant-numeric:tabular-nums}
.packtag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;padding:2px 7px;border-radius:5px;
background:hsl(var(--accent-soft));color:hsl(var(--accent-ink));
border:1px solid hsl(var(--accent)/.4)}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.mini{border:1px solid hsl(var(--border));border-radius:12px;padding:13px 15px;
background:hsl(var(--card));transition:border-color .16s ease,box-shadow .16s ease,
transform .16s ease}
.mini:hover{border-color:hsl(var(--brand));box-shadow:var(--shadow-sm);transform:translateY(-1px)}
/* ---------- map, replicated interaction model ---------- */
.pinwrap{background:none;border:0}
.pchip{position:relative;display:inline-flex;align-items:baseline;
transform:translate(-50%,-50%);background:hsl(var(--card));color:hsl(var(--ink));
border:1px solid hsl(var(--border-strong));border-radius:9999px;padding:3px 8px;
font-family:var(--font-sans);font-size:12px;font-weight:600;
font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;
box-shadow:0 1px 4px hsl(214 38% 12% / .2);
transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease}
.pchip i{font-style:normal;font-weight:500;opacity:.66;margin-left:1px}
.pchip.on{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary));
transform:translate(-50%,-50%) scale(1.09);box-shadow:0 2px 8px hsl(214 38% 12% / .3);
z-index:5}
.pchip.pack{background:hsl(var(--accent-soft));color:hsl(var(--accent-ink));
border-color:hsl(var(--accent)/.5)}
.pchip.pass{background:hsl(var(--brand-soft));color:hsl(var(--primary));
border-color:hsl(var(--brand)/.5)}
.pcluster{display:flex;align-items:center;justify-content:center;background:hsl(var(--ink));
color:#fff;border:2px solid hsl(var(--card));border-radius:50%;font-size:12.5px;
font-weight:600;font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;
box-shadow:0 2px 6px hsl(214 38% 12% / .25);transition:transform .14s ease}
.pcluster:hover{transform:scale(1.06)}
.mapcol{position:sticky;overflow:hidden}
#redo,#areaclear{position:absolute;z-index:400;display:inline-flex;align-items:center;
gap:7px;padding:8px 14px;border-radius:9999px;border:1px solid hsl(var(--border-strong));
background:hsl(var(--card));font:inherit;font-size:13.5px;font-weight:600;
color:hsl(var(--primary));cursor:pointer;box-shadow:var(--shadow-md)}
#redo{top:14px;left:50%;transform:translateX(-50%)}
#areaclear{bottom:14px;left:50%;transform:translateX(-50%);font-weight:500;
color:hsl(var(--muted))}
#redo:hover,#areaclear:hover{background:hsl(var(--brand-wash))}
#mapcard{position:absolute;left:50%;bottom:16px;transform:translate(-50%,16px);z-index:410;
width:calc(100% - 28px);max-width:380px;background:hsl(var(--card));border-radius:14px;
border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg);padding:14px 16px;
opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
#mapcard.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#mapcard b{display:block;font-size:15px}
#mapcard>span{display:block;font-size:13px;color:hsl(var(--muted));margin-top:2px}
.mapcard-p{font-family:var(--font-display);font-size:19px;font-weight:700;margin:8px 0 10px;
font-variant-numeric:tabular-nums}
.mapcard-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:22px;
line-height:1;color:hsl(var(--faint));cursor:pointer}
.maptoggle{display:none}
@media(max-width:1023px){
.maptoggle{display:inline-flex;position:fixed;left:50%;bottom:20px;z-index:65;
transform:translateX(-50%);align-items:center;gap:7px;padding:11px 20px;
border-radius:9999px;border:0;background:hsl(var(--ink));color:#fff;font:inherit;
font-size:14.5px;font-weight:600;box-shadow:var(--shadow-lg);cursor:pointer}
body.has-tray .maptoggle{bottom:96px}
body.mapopen .mapcol{display:block;position:fixed;inset:var(--header-h) 0 0;height:auto;
z-index:64;border:0}
body.mapopen .listcol{display:none}
body.mapopen .listcol{display:none}
}
/* ---------- near bar ---------- */
.nearbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
margin:16px 0 4px;padding:14px 16px;border-radius:var(--radius);
background:hsl(var(--brand-wash));border:1px solid hsl(var(--brand)/.3)}
.nearbar b{display:block;font-size:14.5px}
.nearbar span{font-size:13px;color:hsl(var(--muted))}
.nearbar .pcform{margin:0;max-width:340px;flex:1 1 260px}
.nearbar .pcform input{height:42px;font-size:14.5px}
.nearbar .pcform .btn{height:42px;min-height:42px;padding:0 16px}
.nearbar.set{background:hsl(var(--card));border-color:hsl(var(--border))}
.dist{font-size:12px;font-weight:500;color:hsl(var(--primary));margin-left:7px;
font-variant-numeric:tabular-nums}
.linkish{background:none;border:0;font:inherit;color:hsl(var(--primary));cursor:pointer;
text-decoration:underline;padding:0}
/* ---------- suggest dropdowns ---------- */
.search.wide{width:100%;display:block}
.search.wide input{width:100%}
.suggest{margin-top:6px;border:1px solid hsl(var(--border));border-radius:12px;
background:hsl(var(--card));box-shadow:var(--shadow-md);overflow:hidden;max-height:340px;
overflow-y:auto}
.suggest button{display:block;width:100%;text-align:left;border:0;background:none;
font:inherit;padding:10px 14px;cursor:pointer;border-bottom:1px solid hsl(var(--border))}
.suggest button:last-child{border-bottom:0}
.suggest button:hover{background:hsl(var(--brand-wash))}
.suggest b{display:block;font-size:14.5px;font-weight:600}
.suggest span{display:block;font-size:12.5px;color:hsl(var(--muted))}
/* ---------- compare table ---------- */
.cmpsearch{margin:18px 0 24px}
.cmpsearch label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.cmptable{border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--card));overflow:hidden;box-shadow:var(--shadow-xs)}
.cmprow{display:grid;grid-template-columns:150px repeat(var(--n),1fr);
border-bottom:1px solid hsl(var(--border))}
.cmprow:last-child{border-bottom:0}
.cmphead{background:hsl(var(--brand-wash))}
.cmplab{padding:12px 14px;font-size:13px;font-weight:600;color:hsl(var(--muted));
border-right:1px solid hsl(var(--border));display:flex;flex-direction:column;
justify-content:center;gap:2px}
.cmplab span{font-weight:400;font-size:11.5px;color:hsl(var(--faint))}
.cmpcol{position:relative;padding:14px 12px;border-right:1px solid hsl(var(--border))}
.cmpcol:last-child,.cmpcell:last-child{border-right:0}
.cmpcol b{display:block;font-size:14.5px;line-height:1.25;padding-right:16px}
.cmpcol a:hover b{color:hsl(var(--primary))}
.cmpcol span{display:block;font-size:12px;color:hsl(var(--muted));margin-top:3px}
.cmpx{position:absolute;top:6px;right:6px;height:22px;width:22px;border:0;border-radius:9999px;
background:hsl(var(--card));color:hsl(var(--faint));font-size:17px;line-height:1;
cursor:pointer}
.cmpx:hover{background:hsl(var(--hot)/.12);color:hsl(var(--hot))}
.cmpcell{padding:12px;text-align:center;font-size:14px;border-right:1px solid hsl(var(--border));
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
font-variant-numeric:tabular-nums}
.cmpcell span{font-size:11.5px;color:hsl(var(--muted))}
.cmpcell em{font-style:normal;color:hsl(var(--muted))}
.cmpcell.best{background:hsl(var(--brand-soft)/.5)}
.cmpcell .big{font-family:var(--font-display);font-size:20px;font-weight:700;
letter-spacing:-.02em}
.cmpcell .unit{display:inline;font-size:11.5px;color:hsl(var(--muted))}
.cmpcell .yes{color:hsl(var(--success));font-weight:700}
.cmpcell .no{color:hsl(var(--faint))}
/* On a phone four columns will not fit, so the table scrolls sideways with the
attribute column pinned — which keeps one code path and stays readable. */
@media(max-width:719px){
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--card))}
.cmptable{border:0;border-radius:0;box-shadow:none;
min-width:calc(120px + var(--n) * 132px)}
.cmprow{grid-template-columns:120px repeat(var(--n),132px)}
.cmplab{position:sticky;left:0;z-index:6;background:hsl(var(--card));
font-size:12.5px;padding:11px 10px}
.cmphead .cmplab{background:hsl(var(--brand-wash))}
.cmphead{position:static}
.cmpcell{padding:11px 8px;font-size:13.5px}
.cmpcell .big{font-size:17px}
.cmpcol{padding:12px 9px}
.cmpcol b{font-size:13.5px}
}
/* ---------- true cost ---------- */
.tcbox{display:grid;gap:2px;margin:22px 0;border:1px solid hsl(var(--border));
border-radius:var(--radius);overflow:hidden;background:hsl(var(--border))}
.tcstep{display:flex;gap:14px;padding:18px 18px;background:hsl(var(--card))}
.tcnum{flex:0 0 auto;height:26px;width:26px;border-radius:9999px;
background:hsl(var(--brand-soft));color:hsl(var(--primary));display:flex;
align-items:center;justify-content:center;font-size:13px;font-weight:700}
.tcbody{flex:1 1 auto;min-width:0}
.tcbody>label{display:block;font-size:14.5px;font-weight:600;margin-bottom:9px}
.tcnote{font-size:12.5px;color:hsl(var(--muted));margin:9px 0 0;line-height:1.5}
.pcform.tight{margin:0;max-width:420px}
.pcform.tight input{height:44px;font-size:15px}
.pcform.tight .btn{height:44px;min-height:44px;padding:0 18px}
.pcform.tight+.pcalt{justify-content:flex-start;margin-top:9px}
.seg.wide{display:flex;width:100%;max-width:340px}
.seg.wide button{flex:1 1 0;text-align:center;padding:8px 0}
.tcnear{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:11px}
.tcnearlab{font-size:12px;color:hsl(var(--faint));width:100%}
.tcnear button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
border-radius:9999px;border:1px solid hsl(var(--border-strong));background:hsl(var(--card));
font:inherit;font-size:12.5px;cursor:pointer}
.tcnear button em{font-style:normal;color:hsl(var(--muted))}
.tcnear button:hover{border-color:hsl(var(--brand));color:hsl(var(--primary))}
.tcempty{padding:26px;text-align:center;color:hsl(var(--muted));font-size:14.5px;
border:1px dashed hsl(var(--border-strong));border-radius:var(--radius)}
#tc-out.busy{opacity:.55}
.tcresult{border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--card));box-shadow:var(--shadow-sm);padding:22px;margin-top:4px}
.tchead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tcbig{display:block;font-family:var(--font-display);font-size:44px;font-weight:700;
letter-spacing:-.04em;line-height:1.05;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.tcsub{font-size:13.5px;color:hsl(var(--muted))}
.tcbreak{margin-top:18px;border-top:1px solid hsl(var(--border))}
.tcline{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14.5px;
border-bottom:1px solid hsl(var(--border))}
.tcline b{font-variant-numeric:tabular-nums}
.tcline.tot{font-weight:700;border-bottom:0}
.tcline.year{border-top:1px solid hsl(var(--border));color:hsl(var(--muted));font-size:13.5px}
.tcfare{margin:14px 0 0;font-size:13.5px;color:hsl(var(--muted))}
.tcfare .est{color:hsl(var(--accent-ink));background:hsl(var(--accent-soft));
padding:1px 6px;border-radius:5px;font-size:12px}
.tcacts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.tcalt{margin-top:18px;border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--brand-wash));padding:16px}
.tcalt h3{font-size:14.5px;margin-bottom:10px}
.tcaltrow{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;
padding:10px 12px;margin-bottom:7px;border:1px solid hsl(var(--border));border-radius:10px;
background:hsl(var(--card));font:inherit;text-align:left;cursor:pointer}
.tcaltrow:hover{border-color:hsl(var(--brand))}
.tcaltrow b{font-size:14px}
.tcaltrow em{display:block;font-style:normal;font-size:12.5px;color:hsl(var(--muted))}
.tcaltrow .p{font-family:var(--font-display);font-size:17px;font-variant-numeric:tabular-nums}
.tcaltrow .p i{font-style:normal;font-size:11.5px;color:hsl(var(--muted));font-weight:500}
.tcfine{margin-top:26px;font-size:13px;color:hsl(var(--muted))}
.tcfine summary{cursor:pointer;font-weight:600;color:hsl(var(--text));padding:8px 0}
.tcfine p{line-height:1.6;max-width:70ch}
.tccredit{font-size:11.5px;color:hsl(var(--faint))}
/* ---------- packs ---------- */
.packgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.packgrid{grid-template-columns:1fr 1fr}}
.packcard{border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--card));overflow:hidden;box-shadow:var(--shadow-xs)}
.packhead{display:flex;align-items:center;gap:8px;padding:12px 14px 12px 6px;
border-bottom:1px solid hsl(var(--border))}
.packhead>a{flex:1 1 auto;min-width:0}
.packhead b{display:block;font-size:14.5px;line-height:1.25}
.packhead a:hover b{color:hsl(var(--primary))}
.packhead span{font-size:12.5px;color:hsl(var(--muted))}
.packbest{flex:0 0 auto;text-align:right}
.packbest b{font-family:var(--font-display);font-size:20px;font-weight:700;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:hsl(var(--primary))}
.packbest span{display:block;font-size:11px;color:hsl(var(--muted))}
.packlist{padding:6px 14px 12px}
.packrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:6px 0;font-size:13.5px;border-bottom:1px dashed hsl(var(--border))}
.packrow:last-child{border-bottom:0}
.packrow b{font-weight:600}
.packrow span{font-variant-numeric:tabular-nums;margin-left:auto}
.packrow em{font-style:normal;color:hsl(var(--muted));font-size:12.5px;min-width:74px;
text-align:right;font-variant-numeric:tabular-nums}
/* ---------- panels and forms ---------- */
.panel{margin-top:26px;padding:22px;border:1px solid hsl(var(--border));
border-radius:var(--radius);background:hsl(var(--card));box-shadow:var(--shadow-xs)}
.panel h3{font-family:var(--font-display);font-size:18px;letter-spacing:-.02em;
margin-bottom:6px}
.panelform{margin-top:18px;max-width:560px}
.panelform label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px}
.panelform label span{font-weight:400;color:hsl(var(--faint))}
.panelform input[type=text],.panelform input[type=email],.panelform input[type=url],
.panelform input:not([type]),.panelform textarea,.panelform select{width:100%;height:46px;
border-radius:10px;border:1px solid hsl(var(--input));background:hsl(var(--card));
font:inherit;font-size:15px;padding:0 13px;
transition:border-color .14s ease,box-shadow .14s ease}
.panelform textarea{height:auto;padding:11px 13px;line-height:1.55;resize:vertical}
.panelform input:focus,.panelform textarea:focus{outline:0;border-color:hsl(var(--brand));
box-shadow:var(--ring)}
.panelform .btn{margin-top:18px}
.inlineform{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.inlineform input{flex:1 1 220px;height:46px;border-radius:10px;
border:1px solid hsl(var(--input));font:inherit;font-size:15px;padding:0 13px}
.inlineform input:focus{outline:0;border-color:hsl(var(--brand));box-shadow:var(--ring)}
.inlineform .sheet-msg{flex:1 1 100%;text-align:left}
.pickrow{display:flex;flex-wrap:wrap;gap:8px}
.pick{margin:0!important}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:inline-flex;align-items:center;padding:8px 14px;border-radius:9999px;
border:1px solid hsl(var(--border-strong));background:hsl(var(--card));font-size:13.5px;
font-weight:500;cursor:pointer;transition:all .14s ease}
.pick span:hover{border-color:hsl(var(--brand));color:hsl(var(--primary))}
.pick input:checked+span{background:hsl(var(--primary));border-color:hsl(var(--primary));
color:#fff}
.pick input:focus-visible+span{box-shadow:var(--ring)}
.stars{display:flex;gap:4px;margin-bottom:4px}
.stars button{height:40px;width:40px;border:0;background:none;cursor:pointer;
color:hsl(var(--border-strong));display:flex;align-items:center;justify-content:center}
.stars button svg{width:26px;height:26px}
.stars button.on,.stars button:hover{color:hsl(var(--gold))}
.emptybox{padding:38px 24px;text-align:center;border:1px dashed hsl(var(--border-strong));
border-radius:var(--radius);background:hsl(var(--card))}
.emptybox b{display:block;font-family:var(--font-display);font-size:19px;margin-bottom:8px}
.emptybox p{margin:0 auto 18px;max-width:46ch;color:hsl(var(--muted));font-size:14.5px}
/* ---------- legal / tables ---------- */
.legal .note{font-size:15px;line-height:1.68;max-width:68ch}
.bullets{margin:8px 0 0;padding-left:20px;color:hsl(var(--muted));font-size:15px;
line-height:1.68;max-width:68ch}
.bullets li{margin-bottom:8px}
.bullets b{color:hsl(var(--text))}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctable{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px;min-width:520px}
.ctable th,.ctable td{text-align:left;padding:10px 12px;
border-bottom:1px solid hsl(var(--border));vertical-align:top}
.ctable th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
color:hsl(var(--muted));font-weight:600}
.mailto{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:3px;
font-weight:600}
/* ---------- site index ---------- */
.smgrid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:8px}
@media(min-width:560px){.smgrid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.smgrid{grid-template-columns:repeat(4,1fr)}
.smgrid.wide{grid-template-columns:repeat(3,1fr)}}
.smcol h3{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:hsl(var(--faint));margin-bottom:8px}
.smcol a{display:block;padding:5px 0;font-size:14.5px;color:hsl(var(--text))}
.smcol a:hover{color:hsl(var(--primary));text-decoration:underline}
/* ---------- gym page additions ---------- */
.gymhead{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;
flex-wrap:wrap;margin-bottom:4px}
.gymacts{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-top:4px}
.tcprompt{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
margin-top:20px;padding:18px;border-radius:var(--radius);background:hsl(var(--brand-wash));
border:1px solid hsl(var(--brand)/.3)}
.tcprompt b{display:block;font-size:15px}
.tcprompt span{display:block;font-size:13.5px;color:hsl(var(--muted));margin-top:2px;
max-width:52ch}
.compare .rating{margin-left:8px}
/* ---------- touch sizing for the new controls ----------
The mobile audit counts anything under 32px as a small tap target. These are
the controls that were failing it. */
@media (hover:none) and (pointer:coarse){
.cmpbtn{height:34px;padding:0 12px;font-size:13px}
.heart{height:40px;width:40px}
.logorow a{height:auto;min-height:34px;padding:4px 0}
/* NOT display:flex — flex wraps the text and the in separate anonymous
boxes and eats the space between "Gyms" and "Cost". */
.hdr-c .logo{display:inline-block;padding:8px 0}
.pcalt button,.pcalt a{min-height:34px;display:inline-flex;align-items:center}
.sortrow select{min-height:34px}
.stars button{height:44px;width:44px}
.suggest button{min-height:44px}
.tcnear button{min-height:34px}
.smcol a{min-height:34px;display:flex;align-items:center}
.cmpx{height:28px;width:28px}
}
@media(max-width:767px){
.logowall .logonote{font-size:12px}
.logowall>p:first-child{font-size:12px}
.ftr-end{font-size:13px}
.tcbig{font-size:38px}
.statstrip{grid-template-columns:1fr;max-width:420px}
.statstrip .st{border-right:0;border-bottom:1px solid hsl(var(--border));
display:flex;align-items:baseline;justify-content:center;gap:9px;padding:13px}
.statstrip .st:last-child{border-bottom:0}
.statstrip b{font-size:22px}
.statstrip span{margin-top:0}
.hero{padding:36px 18px 8px}
.hero p.sub{font-size:16px}
.band{padding:32px 0}
.sechead h2{font-size:21px}
.gymacts{width:100%;justify-content:flex-start}
.tcstep{padding:16px 14px}
.nearbar{padding:13px 14px}
}
/* ---------- browse controls, mobile first ----------
On a phone the price-type switch is the most important control on the page,
and in a single horizontally-scrolling row it sat off-screen to the right
where nobody would find it. Below 768px the bar wraps instead: search on its
own line, the Monthly / Day pass / Class packs switch full width under it,
then the dropdowns. The facility chips stay on one line and scroll, so they
do not push the results below the fold. */
@media(max-width:767px){
.filters{flex-wrap:wrap;overflow:visible;gap:8px;padding:10px 12px}
.filters .search{order:1;flex:1 1 100%}
.filters .search input{width:100%}
.filters .seg{order:2;flex:1 1 100%;display:flex}
.filters .seg button{flex:1 1 0;text-align:center;padding:9px 4px}
.filters select.f{order:3;flex:1 1 calc(50% - 4px);min-width:0}
/* Without an explicit order these default to 0 and jump above the search
box, which put "Parking" before "search gyms" on a phone. */
.filters .chipf{order:4;flex:0 0 auto;height:40px}
.filters #resetf{order:5;flex:0 0 auto;height:40px}
.amenbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 12px 10px}
.amenbar::-webkit-scrollbar{display:none}
.amen{flex:0 0 auto}
}
/* On a phone the results are what the visitor came for, so the price
distribution chart moves below them rather than sitting between the
introduction and the first gym. */
@media(max-width:767px){
.listcol{display:flex;flex-direction:column}
.sortrow{order:4}
#results{order:5}
#browsechart{order:9;margin-top:26px}
}
/* ---------- price history ---------- */
.phbox{margin-top:8px;border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--card));padding:18px;box-shadow:var(--shadow-xs)}
.phhead{margin:0;font-size:15.5px;font-weight:600;line-height:1.45}
.phlist{list-style:none;margin:14px 0 0;padding:0}
.phlist li{display:flex;align-items:baseline;gap:12px;padding:9px 0;
border-bottom:1px dashed hsl(var(--border));font-size:14px}
.phlist li:last-child{border-bottom:0}
.phday{flex:0 0 auto;min-width:104px;color:hsl(var(--muted));font-size:13px}
.phmove{flex:1 1 auto;font-variant-numeric:tabular-nums;color:hsl(var(--muted))}
.phmove b{color:hsl(var(--text))}
.phdelta{flex:0 0 auto;font-weight:600;font-variant-numeric:tabular-nums;
padding:2px 8px;border-radius:6px;font-size:12.5px}
.phlist li.up .phdelta{background:hsl(var(--hot)/.10);color:hsl(var(--hot))}
.phlist li.down .phdelta{background:hsl(var(--success)/.10);color:hsl(var(--success))}
.phbox .chartfig{margin-top:14px;border:0;padding:0;box-shadow:none}
.phcta{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;
border-top:1px solid hsl(var(--border))}
.phcta span{font-size:13.5px;color:hsl(var(--muted))}
/* ---------- peak / off-peak nudge ---------- */
.tcpeak{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;
border-radius:12px;background:hsl(var(--accent-soft));
border:1px solid hsl(var(--accent)/.42)}
.tcpeak-i{flex:0 0 auto;height:30px;width:30px;border-radius:9999px;display:flex;
align-items:center;justify-content:center;background:hsl(var(--accent)/.22);
color:hsl(var(--accent-ink))}
.tcpeak b{display:block;font-size:14.5px;color:hsl(var(--accent-ink))}
.tcpeak span{display:block;font-size:13px;line-height:1.55;color:hsl(var(--muted));
margin-top:3px;max-width:62ch}
.tcpeak.flat{background:hsl(var(--brand-wash));border-color:hsl(var(--brand)/.3)}
.tcpeak.flat .tcpeak-i{background:hsl(var(--brand-soft));color:hsl(var(--primary))}
.tcpeak.flat b{color:hsl(var(--primary))}
/* ---------- context bar ----------
The strip that says, on every page, what the numbers are based on: where you
are starting from, how often you go, and which filters are on. Modelled on
the way an airline keeps your route and dates visible through checkout — the
point is that the assumptions are never invisible, and are always one tap
from being changed. */
.ctxbar{position:sticky;top:var(--header-h);z-index:55;background:hsl(var(--card));
border-bottom:1px solid hsl(var(--border));box-shadow:var(--shadow-xs)}
.ctxbar:empty{display:none}
.ctxbar-in{max-width:1440px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;
gap:8px;overflow-x:auto;scrollbar-width:none}
.ctxbar-in::-webkit-scrollbar{display:none}
.ctxplace,.ctxvisits{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
padding:7px 12px;border-radius:9999px;border:1px solid hsl(var(--brand));
background:hsl(var(--brand-wash));font:inherit;font-size:13.5px;color:hsl(var(--text));
cursor:pointer;white-space:nowrap;transition:background .14s ease,border-color .14s ease}
.ctxplace:hover,.ctxvisits:hover{background:hsl(var(--brand-soft))}
.ctxplace svg:first-child{color:hsl(var(--primary))}
.ctxplace b,.ctxvisits b{font-weight:700}
.ctxplace.empty{border-style:dashed;border-color:hsl(var(--border-strong));
background:hsl(var(--card));color:hsl(var(--muted))}
.ctxplace.empty svg:first-child{color:hsl(var(--muted))}
.ctxcaret{opacity:.5;margin-left:1px}
.ctxvisits{border-color:hsl(var(--border-strong));background:hsl(var(--card))}
.ctxvisits span{color:hsl(var(--muted))}
.ctxchips{display:flex;gap:6px;flex:1 1 auto;min-width:0}
.ctxchip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 10px;
border-radius:9999px;border:1px solid hsl(var(--border-strong));background:hsl(var(--card));
font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;color:hsl(var(--text))}
.ctxchip span{color:hsl(var(--muted))}
.ctxchip:hover{border-color:hsl(var(--hot));color:hsl(var(--hot))}
.ctxchip:hover span{color:hsl(var(--hot))}
.ctxchip svg{opacity:.55}
.ctxclear{flex:0 0 auto;background:none;border:0;font:inherit;font-size:12.5px;
color:hsl(var(--muted));cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ctxclear:hover{color:hsl(var(--primary))}
.filters{top:calc(var(--header-h) + 45px)}
@media(max-width:767px){
.ctxbar-in{padding:7px 12px;gap:6px}
.ctxplace,.ctxvisits{padding:8px 12px;font-size:13px}
.filters{top:calc(var(--header-h) + 47px)}
}
#ctxsheet .sheet-card label{margin-top:0}
#ctxsheet .pcform{margin:0}
#ctxsheet .pcalt{justify-content:flex-start;margin-top:10px}
/* ---------- getting there ---------- */
.stations{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;
grid-template-columns:1fr}
@media(min-width:600px){.stations{grid-template-columns:1fr 1fr}}
.stations li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:11px 14px;border:1px solid hsl(var(--border));border-radius:10px;
background:hsl(var(--card));font-size:14px}
.stations li b{font-weight:600}
.stations li span{font-size:12.5px;color:hsl(var(--muted));white-space:nowrap}
.stations li.park{background:hsl(var(--brand-wash));border-color:hsl(var(--brand)/.35)}
.stations li.park.none{background:hsl(var(--bg));border-style:dashed;
border-color:hsl(var(--border-strong))}
.stations li.park.none b{color:hsl(var(--muted));font-weight:500}
.chip.tube{display:inline-flex;align-items:center;gap:4px}
/* ---------- true-cost filters ---------- */
.tcfilters{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.tcfilters select.f{height:34px;font-size:13px;padding:0 28px 0 11px}
.chipf{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;
border-radius:9999px;border:1px solid hsl(var(--border-strong));background:hsl(var(--card));
font:inherit;font-size:13px;font-weight:500;color:hsl(var(--muted));cursor:pointer;
white-space:nowrap;transition:all .14s ease}
.chipf:hover{border-color:hsl(var(--brand));color:hsl(var(--primary))}
.chipf[aria-pressed="true"]{background:hsl(var(--primary));border-color:hsl(var(--primary));
color:#fff}
/* ---------- enquiry / lead form ---------- */
.enquiry{margin-top:22px;border:1px solid hsl(var(--brand)/.4);border-radius:var(--radius);
background:hsl(var(--brand-wash));overflow:hidden}
.enq-head{padding:18px 20px 0}
.enq-head b{display:block;font-family:var(--font-display);font-size:19px;letter-spacing:-.02em}
.enq-head span{display:block;font-size:14px;color:hsl(var(--muted));margin-top:5px;
line-height:1.55;max-width:60ch}
.enquiry .panelform{margin:14px 20px 20px;max-width:none}
.enquiry .panelform input,.enquiry .panelform textarea{background:hsl(var(--card))}
.enq-two{display:grid;gap:0 12px;grid-template-columns:1fr}
@media(min-width:560px){.enq-two{grid-template-columns:1fr 1fr}}
.enq-two label{margin-top:14px}
.pick input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
/* ---------- tube map ---------- */
.tubemapwrap{margin:18px 0 0;border:1px solid hsl(var(--border));border-radius:var(--radius);
overflow:hidden;background:hsl(var(--card));box-shadow:var(--shadow-xs)}
#tubemap{height:440px;width:100%}
@media(max-width:767px){#tubemap{height:340px}}
.tubelegend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 14px;
border-top:1px solid hsl(var(--border));font-size:12.5px;color:hsl(var(--muted))}
.tubelegend span{display:inline-flex;align-items:center;gap:6px}
.tubelegend i{height:10px;width:10px;border-radius:9999px;display:inline-block}
.tubelegend .dot-gym{background:hsl(var(--brand));border:1px solid hsl(var(--border-strong))}
.tubelegend .dot-stn{background:#fff;border:2.5px solid hsl(var(--ink))}
.tubehint{margin-left:auto;font-style:italic}
.stnpin{display:inline-flex;align-items:center;gap:5px;transform:translate(-50%,-50%);
padding:2px;border-radius:9999px;cursor:pointer;white-space:nowrap}
.stnpin::before{content:'';height:11px;width:11px;border-radius:9999px;background:#fff;
border:2.5px solid hsl(var(--ink));flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.stnpin span{font-size:11px;font-weight:600;color:hsl(var(--ink));background:hsl(0 0% 100%/.88);
padding:1px 5px;border-radius:5px}
.stnpin.on::before{background:hsl(var(--primary));border-color:#fff;height:14px;width:14px}
.stnpin.on span{background:hsl(var(--primary));color:#fff}
.tubepanel{margin-top:18px;border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--card));padding:18px;box-shadow:var(--shadow-xs)}
.tubehead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
margin-bottom:6px}
.tubehead b{display:block;font-family:var(--font-display);font-size:24px;letter-spacing:-.03em;
line-height:1.15;margin-top:2px}
.tubesub{display:block;font-size:13.5px;color:hsl(var(--muted));margin-top:3px}
.tubenote{font-size:13px;color:hsl(var(--muted));margin:0 0 14px}
.tubepanel .rows{border:1px solid hsl(var(--border))}
.tubepanel a.cmpbtn{text-decoration:none}
/* ---------- savings banner ---------- */
.tcsave{margin-top:18px;padding:16px 18px;border-radius:12px;
background:hsl(var(--success)/.09);border:1px solid hsl(var(--success)/.35)}
.tcsave b{display:block;font-family:var(--font-display);font-size:18px;letter-spacing:-.02em;
color:hsl(var(--success))}
.tcsave span{display:block;font-size:13.5px;color:hsl(var(--muted));margin-top:4px;
line-height:1.55;max-width:62ch}
/* ================================================================
PLAN YOUR GYM WEEK
The EasyJet-style checkout: steps on the left, a running total on
the right that follows you down the page on desktop.
================================================================ */
.pywrap{max-width:1160px;margin:0 auto;padding:0 20px 60px}
.pygrid{display:grid;gap:20px;margin-top:22px;align-items:start}
@media(min-width:900px){.pygrid{grid-template-columns:1fr 340px}}
.pymain{display:grid;gap:2px;border:1px solid hsl(var(--border));border-radius:var(--radius);
overflow:hidden}
.pymain .pcform{margin-top:2px}
.pyaddr{margin-top:14px;padding-top:14px;border-top:1px solid hsl(var(--border))}
.pydays{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pydays button{height:38px;min-width:44px;padding:0 10px;border-radius:9999px;
border:1px solid hsl(var(--border));background:hsl(var(--card));font:inherit;font-size:13px;
font-weight:600;color:hsl(var(--text));cursor:pointer}
.pydays button:hover{border-color:hsl(var(--brand))}
.pydays button[aria-pressed="true"]{background:hsl(var(--primary));color:#fff;
border-color:hsl(var(--primary))}
.pysum{position:sticky;top:14px;border:1px solid hsl(var(--border));border-radius:var(--radius);
background:hsl(var(--card));padding:20px;box-shadow:var(--shadow-sm)}
.pyempty{text-align:center;padding:20px 8px}
.pyempty b{display:block;font-family:var(--font-display);font-size:17px;margin-bottom:6px}
.pyempty p{margin:0 auto;max-width:32ch;color:hsl(var(--muted));font-size:13.5px}
.pyempty.busy{opacity:.7}
.pyhead{border-bottom:1px solid hsl(var(--border));padding-bottom:14px;margin-bottom:2px}
.pybig{display:block;font-family:var(--font-display);font-size:36px;font-weight:700;
letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}
.pybig i{font-style:normal;font-size:16px;font-weight:500;color:hsl(var(--muted))}
.pysub{display:block;font-size:13px;color:hsl(var(--muted));margin-top:3px}
.pyfare{margin-top:14px;font-size:13px;color:hsl(var(--muted));line-height:1.6}
.pynote{margin-top:10px;font-size:12.5px;color:hsl(var(--primary));line-height:1.55}
.pycaveat{margin-top:12px;font-size:11.5px;color:hsl(var(--faint));line-height:1.6}
.pyacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pysaveform{margin-top:16px;padding-top:16px;border-top:1px solid hsl(var(--border))}
@media(max-width:899px){.pysum{position:static}}
/* ================================================================
THE TUBE MAP
Our own schematic, drawn from TfL open data. Light-blue ground so
the line colours carry the whole thing, which is how a transit
diagram is supposed to work.
================================================================ */
.tubewrap{background:linear-gradient(180deg,hsl(207 60% 97%),hsl(205 55% 95%));
border-bottom:1px solid hsl(var(--border))}
.tubebar{max-width:1440px;margin:0 auto;padding:26px 20px 16px;display:flex;
flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:space-between}
.tubetitle h1{font-family:var(--font-display);font-size:clamp(26px,4vw,38px);
letter-spacing:-.035em;line-height:1.05;font-weight:700}
.tubetitle p{margin:7px 0 0;font-size:14.5px;color:hsl(var(--muted));max-width:52ch}
.tubesearch{position:relative;flex:1 1 260px;max-width:340px}
.tubesearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
color:hsl(var(--muted));pointer-events:none}
.tubesearch input{width:100%;height:44px;border-radius:9999px;
border:1px solid hsl(var(--input));background:hsl(var(--card));font:inherit;font-size:15px;
padding:0 14px 0 38px;box-shadow:var(--shadow-sm)}
.tubesearch input:focus{outline:0;border-color:hsl(var(--brand));box-shadow:var(--ring)}
.tubesearch .suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30}
.tubestage{position:relative;max-width:1440px;margin:0 auto;padding:0 12px 8px;
touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.tubestage.dragging{cursor:grabbing}
/* The stage owns the aspect ratio and the SVG fills it exactly; the viewBox is
then fitted to that box in JS, so the map is never letterboxed into a strip
with dead space either side. */
.tubestage{height:clamp(420px,66vh,720px)}
#tubesvg{display:block;width:100%;height:100%;border-radius:var(--radius);
background:transparent}
.tubezoom{position:absolute;right:22px;top:12px;display:flex;flex-direction:column;gap:5px;
z-index:10}
.tubezoom button{height:36px;width:36px;border-radius:10px;border:1px solid hsl(var(--border));
background:hsl(var(--card)/.94);backdrop-filter:blur(6px);font:inherit;font-size:18px;
font-weight:600;color:hsl(var(--text));cursor:pointer;display:flex;align-items:center;
justify-content:center;box-shadow:var(--shadow-sm)}
.tubezoom button:hover{background:hsl(var(--card));border-color:hsl(var(--brand));
color:hsl(var(--primary))}
.tubetip{position:absolute;left:22px;bottom:16px;margin:0;font-size:11.5px;
color:hsl(var(--faint));background:hsl(var(--card)/.8);padding:4px 10px;border-radius:9999px;
pointer-events:none}
/* the popup that opens right on the station you tapped — median price and a
couple of gyms, so a phone never has to jump away from where you tapped */
.tmpop{position:absolute;z-index:20;min-width:180px;max-width:240px;padding:12px 30px 10px 14px;
border-radius:12px;background:hsl(var(--card));border:1px solid hsl(var(--border));
box-shadow:var(--shadow-lg);pointer-events:auto;opacity:0;
transform:translateY(6px) scale(.97);transition:opacity .16s ease,transform .16s ease}
.tmpop[hidden]{display:none}
.tmpop.on{opacity:1;transform:translateY(0) scale(1)}
.tmpop b{display:block;font-size:14.5px;line-height:1.25}
.tmpop>span{display:block;font-size:12px;color:hsl(var(--muted));margin-top:2px}
.tmpoprows{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.tmpoprows a{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
color:hsl(var(--text));padding:4px 0;border-top:1px solid hsl(var(--border))}
.tmpoprows a:first-child{border-top:none}
.tmpoprows a em{font-style:normal;font-weight:600;color:hsl(var(--primary));white-space:nowrap}
.tmpoprows a em.np{color:hsl(var(--faint));font-weight:500}
.tmpopmore{display:block;margin-top:6px;font-size:11px;color:hsl(var(--faint))}
.tmpopclose{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
border:none;background:transparent;color:hsl(var(--faint));font-size:17px;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center}
.tmpopclose:hover{background:hsl(var(--border))}
@media (prefers-reduced-motion:reduce){.tmpop{transition:opacity .12s ease;transform:none}}
/* line strokes */
.tmline{transition:opacity .18s ease}
#tubesvg.focusline .tmline.dim{opacity:.13}
#tubesvg.focusline .tmline.lit{opacity:1}
/* stations */
.tmhit{fill:transparent;cursor:pointer}
.tmring{fill:#fff;stroke:hsl(207 100% 15%);stroke-width:2.6;pointer-events:none}
.tmdot{fill:hsl(213 42% 46%);pointer-events:none}
.tmtick{fill:#fff;stroke:hsl(207 30% 42%);stroke-width:2;pointer-events:none}
.tmstn{cursor:pointer;outline:none}
.tmstn:focus-visible .tmring,.tmstn:focus-visible .tmtick{stroke:hsl(var(--primary));
stroke-width:3.4}
.tmstn.has .tmring{stroke:hsl(213 42% 46%);stroke-width:3}
.tmstn:hover .tmring,.tmstn:hover .tmtick{stroke:hsl(var(--primary));stroke-width:3.4}
.tmstn.on .tmring{stroke:hsl(8 64% 47%);stroke-width:4}
.tmstn.on .tmdot{fill:hsl(8 64% 47%)}
.tmstn.on .tmtick{stroke:hsl(8 64% 47%);stroke-width:3.4}
/* labels: more of them earn room as you zoom in */
.tmlabel{font-family:var(--font-sans);font-size:11px;font-weight:600;
fill:hsl(207 100% 15%);paint-order:stroke;stroke:hsl(207 60% 97%);stroke-width:3.4;
stroke-linejoin:round;pointer-events:none}
.tmlabel.t2{font-weight:500;fill:hsl(207 20% 38%);opacity:0;transition:opacity .2s ease}
#tubesvg.z2 .tmlabel.t2{opacity:1}
/* legend */
.tubelegendbar{max-width:1440px;margin:0 auto;padding:2px 20px 16px;display:flex;
flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.tmkeytoggle{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
border-radius:9999px;border:1px solid hsl(var(--border-strong));background:hsl(var(--card));
font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:hsl(var(--text))}
.tmkeytoggle:hover{border-color:hsl(var(--brand));color:hsl(var(--primary))}
.tmkeytoggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.tubecredit{font-size:11px;color:hsl(var(--faint));max-width:62ch}
.tmkeypanel{max-width:1440px;margin:0 auto;padding:0 20px 20px;display:grid;gap:16px;
grid-template-columns:1fr}
@media(min-width:720px){.tmkeypanel{grid-template-columns:repeat(4,1fr)}}
.tmkeygroup h4{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:hsl(var(--faint))}
.tmkeys{display:flex;flex-wrap:wrap;gap:5px}
.tmkey{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:9999px;
border:1px solid hsl(var(--border));background:hsl(var(--card));font:inherit;font-size:12.5px;
cursor:pointer;color:hsl(var(--text))}
.tmkey i{height:10px;width:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.tmkey:hover{border-color:hsl(var(--brand))}
.tmkey[aria-pressed="true"]{background:hsl(var(--ink));color:#fff;border-color:hsl(var(--ink))}
/* the panel underneath */
.tubeempty{padding:30px 24px;text-align:center;border:1px dashed hsl(var(--border-strong));
border-radius:var(--radius);background:hsl(var(--card))}
.tubeempty b{display:block;font-family:var(--font-display);font-size:18px;margin-bottom:6px}
.tubeempty p{margin:0 auto;max-width:48ch;color:hsl(var(--muted));font-size:14.5px}
@media(max-width:767px){
.tubebar{padding:18px 16px 12px;gap:12px}
.tubesearch{max-width:none;flex:1 1 100%}
.tubestage{padding:0 8px 6px;height:clamp(360px,58vh,560px)}
.tubezoom{right:16px;top:8px}
.tubezoom button{height:40px;width:40px}
.tubetip{left:50%;transform:translateX(-50%);bottom:10px;font-size:11px}
.tubelegendbar{padding:2px 16px 14px}
.tubecredit{font-size:10.5px}
}
/* ---------- home page cards ----------
Three examples and a way to see the rest, rather than a wall of rows. */
.podium{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.podium{grid-template-columns:repeat(3,1fr)}}
.pcard{position:relative;display:flex;flex-direction:column;gap:3px;padding:18px;
border-radius:var(--radius);border:1px solid hsl(var(--border));background:hsl(var(--card));
box-shadow:var(--shadow-xs);transition:transform .16s cubic-bezier(.22,.61,.36,1),
box-shadow .16s,border-color .16s}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);
border-color:hsl(var(--brand))}
.pc-rank{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:9999px;
background:hsl(var(--brand-soft));color:hsl(var(--primary));margin-bottom:6px}
.pcard:first-child .pc-rank{background:hsl(var(--accent-soft));color:hsl(var(--accent-ink))}
.pc-name{font-family:var(--font-display);font-size:17px;letter-spacing:-.02em;line-height:1.2}
.pc-where{font-size:12.5px;color:hsl(var(--muted))}
.pc-price{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-.03em;
font-variant-numeric:tabular-nums;margin-top:8px;line-height:1}
.pc-price i{font-style:normal;font-size:13px;font-weight:500;color:hsl(var(--muted))}
.pc-was{font-size:12px;color:hsl(var(--faint));text-decoration:none}
.expander{margin-top:12px}
.expander summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
gap:6px;padding:9px 16px;border-radius:9999px;border:1px solid hsl(var(--border-strong));
background:hsl(var(--card));font-size:13.5px;font-weight:600;color:hsl(var(--primary))}
.expander summary::-webkit-details-marker{display:none}
.expander summary::after{content:'▾';font-size:11px;opacity:.6}
.expander[open] summary::after{content:'▴'}
.expander summary:hover{border-color:hsl(var(--brand));background:hsl(var(--brand-wash))}
.expander .rows{margin-top:12px}
.markgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.markgrid{grid-template-columns:repeat(3,1fr)}}
.mcard{display:flex;flex-direction:column;gap:3px;padding:18px;border-radius:var(--radius);
border:1px solid hsl(var(--border));background:hsl(var(--card));box-shadow:var(--shadow-xs);
transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s,border-color .16s}
.mcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);
border-color:hsl(var(--brand))}
.mc-mark{display:flex;align-items:center;justify-content:flex-start;height:38px;
margin-bottom:8px}
.mc-mark .bmark path{transition:fill .16s ease}
.mcard:hover .bmark path{fill:hsl(var(--primary))}
.mc-mark.logo img{filter:grayscale(1);opacity:.72;transition:filter .18s ease,opacity .18s ease;
width:auto;max-width:130px;object-fit:contain}
.mcard:hover .mc-mark.logo img{filter:none;opacity:1}
.mcard b{font-family:var(--font-display);font-size:17px;letter-spacing:-.02em;line-height:1.2}
.mcard span{font-size:12.5px;color:hsl(var(--muted))}
.mc-med{font-size:12px!important;color:hsl(var(--faint))!important}
.typecard{display:flex;flex-wrap:wrap;gap:10px;padding:18px;border-radius:var(--radius);
border:1px solid hsl(var(--border));background:hsl(var(--card));box-shadow:var(--shadow-xs)}
.tchip{display:flex;flex-direction:column;gap:1px;flex:1 1 210px;padding:13px 15px;
border-radius:12px;border:1px solid hsl(var(--border));background:hsl(var(--brand-wash));
transition:border-color .16s ease,background .16s ease}
.tchip:hover{border-color:hsl(var(--brand));background:hsl(var(--brand-soft))}
.tchip b{font-size:14.5px;font-weight:600}
.tchip span{font-size:12px;color:hsl(var(--muted));font-variant-numeric:tabular-nums}
@media(max-width:767px){
.pc-price{font-size:26px}
.typecard{padding:13px;gap:8px}
.tchip{flex:1 1 100%;padding:12px 13px}
}
/* ================================================================
HERO MAP — the first thing on the landing page
================================================================ */
.hero-map{padding:34px 0 40px;
background:linear-gradient(180deg,hsl(207 60% 97%),hsl(205 52% 95%));
border-block:1px solid hsl(var(--border))}
.hm-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;
justify-content:space-between;margin-bottom:16px}
.hm-head h2{font-family:var(--font-display);font-size:clamp(23px,3.4vw,32px);
letter-spacing:-.032em;line-height:1.08;margin-top:5px}
.hm-head p{margin:7px 0 0;font-size:14.5px;color:hsl(var(--muted));max-width:60ch}
.hm-actions{display:flex;gap:8px;flex-wrap:wrap}
.hm-stage{position:relative;border-radius:var(--radius);overflow:hidden;
background:hsl(var(--card));border:1px solid hsl(var(--border));
box-shadow:var(--shadow-sm)}
#heromap{display:block;width:100%;height:auto}
/* boroughs */
.hregion{transition:filter .16s ease}
.hregion:hover{filter:brightness(1.06)}
/* lines */
.hline{transition:opacity .2s ease}
#heromap.focusline .hline.dim{opacity:.1}
#heromap.focusline .hline.lit path{stroke-width:4.2}
.hstn{transition:opacity .2s ease;cursor:pointer;outline:none}
.hstn.dim{opacity:.12;pointer-events:none}
.hhit{fill:transparent}
.hdot{fill:#fff;stroke:hsl(207 100% 15%);stroke-width:2.1;pointer-events:none;
transition:stroke .14s ease,r .14s ease}
.hmark{fill:hsl(207 100% 15%);opacity:.5;pointer-events:none}
.hstn.has:hover .hdot,.hstn.has:focus-visible .hdot{stroke:hsl(8 64% 47%);r:5.2}
/* popover */
.hm-pop{position:absolute;z-index:20;min-width:170px;max-width:230px;padding:12px 14px;
border-radius:12px;background:hsl(var(--card));border:1px solid hsl(var(--border));
box-shadow:var(--shadow-lg);pointer-events:auto}
.hm-pop b{display:block;font-size:14.5px;line-height:1.25}
.hm-pop span{display:block;font-size:12.5px;color:hsl(var(--muted));margin-top:3px}
.hm-pop .btn{margin-top:10px;width:100%}
/* line filters */
.hm-keys{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
@media(min-width:760px){.hm-keys{grid-template-columns:repeat(4,1fr)}}
.hkeygroup h4{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:hsl(var(--faint))}
.hkeys{display:flex;flex-wrap:wrap;gap:6px}
.hkey{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;
border:1px solid hsl(var(--border));background:hsl(var(--card));font:inherit;
font-size:12.5px;cursor:pointer;color:hsl(var(--text));
transition:border-color .14s ease,background .14s ease,transform .14s ease}
.hkey i{height:10px;width:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.hkey:hover{border-color:hsl(var(--brand));transform:translateY(-1px)}
.hkey[aria-pressed="true"]{background:hsl(var(--ink));color:#fff;border-color:hsl(var(--ink))}
.hm-note{margin:14px 0 0;font-size:11.5px;color:hsl(var(--faint));line-height:1.55;
max-width:96ch}
.hero-map .charttable{margin-top:6px}
@media(max-width:767px){
.hero-map{padding:24px 0 30px}
.hm-head{gap:10px}
.hm-actions{width:100%}
.hm-actions .btn{flex:1 1 auto;justify-content:center}
.hm-keys{gap:12px;grid-template-columns:1fr 1fr}
.hkey{padding:7px 11px;font-size:12px}
.hkey span{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-pop{max-width:210px}
}
.tccaveat{margin:8px 0 0;font-size:12px;color:hsl(var(--faint));line-height:1.55;
max-width:68ch}
.tccaveat a{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:2px}
.hero.tight{padding:44px 20px 30px}
@media(max-width:767px){.hero.tight{padding:30px 18px 22px}}
/* type chips with icons */
.tchip{flex-direction:row;align-items:center;gap:11px}
.ticon{flex:0 0 auto;height:34px;width:34px;border-radius:10px;display:flex;
align-items:center;justify-content:center;background:hsl(var(--card));
color:hsl(var(--primary));border:1px solid hsl(var(--border))}
.tchip:hover .ticon{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary))}
.tmeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.tmeta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta span{font-size:12px;color:hsl(var(--muted));font-variant-numeric:tabular-nums;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secnum{display:inline-flex;align-items:center;justify-content:center;min-width:26px;
height:22px;padding:0 7px;margin-left:8px;border-radius:9999px;font-size:12px;
font-weight:700;background:hsl(var(--brand-soft));color:hsl(var(--primary));
vertical-align:2px}
.markgrid.four{grid-template-columns:1fr}
@media(min-width:560px){.markgrid.four{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.markgrid.four{grid-template-columns:repeat(4,1fr)}}