/* COURTSIDE MEDIA NETWORK: advertiser page */

/* ------------------------------------------------------------ tokens */
:root {
  --bg: #0B1A14;
  --surface: #10241C;
  --raised: #142B22;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .22);
  --text: #EEF3F0;
  --text-2: #DCE5E0;
  --muted: #8FA79B;
  --lime: #7BF1A8;
  --lime-hi: #95F5BA;
  --ink: #0B1A14;
  --error: #B42318;

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --pill: 999px;

  --f-display: 'Cabinet Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label: 'Barlow Condensed', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --gut: 16px;
  --sec-y: var(--s8);
  --col-gap: var(--s4);
  --mbar-h: 68px;
  --nav-h: 72px;
  color-scheme: dark;
}
@media (min-width: 600px) { :root { --gut: 32px; --col-gap: var(--s5); } }
@media (min-width: 1024px) { :root { --gut: clamp(48px, 5.6vw, 80px); --sec-y: var(--s10); --col-gap: var(--s6); --nav-h: 88px; } }

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: #0B1A14;
  color: var(--text);
  font: 500 17px/1.55 var(--f-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
@media (max-width: 899px) {
  body { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom) + 16px); }
}
img, svg, canvas { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.close :focus-visible { outline-color: var(--ink); }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px; border-radius: var(--pill);
  background: var(--lime); color: var(--ink); font-weight: 800; transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: calc(1280px + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

/* ------------------------------------------------------------ type */
.eyebrow, .label, .ctl-label, .belt-label, .close-eyebrow, .campaign-label, .courts-label, .point-num, .step-num, .pkg-tag {
  font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
.eyebrow { font-size: 14px; color: var(--lime); }
.label { font-size: 14px; color: var(--lime); margin-bottom: var(--s5); display: flex; align-items: center; gap: var(--s3); }
.label::before { content: ''; width: 24px; height: 2px; background: var(--lime); }
.h2 {
  font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 6.2vw, 96px); line-height: .92; letter-spacing: -.02em;
  max-width: 14ch; text-wrap: balance;
}
.h2-wide { max-width: none; }
/* loud / quiet: the Network (the USP) and Packages keep the full display step; the rest sit one step down */
.h2-sm { font-size: clamp(36px, 4vw, 60px); line-height: .94; }
.h2 .line { display: block; }
.h2 .marker { white-space: nowrap; }
.nw { white-space: nowrap; }
.intro { margin-top: var(--s5); font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 44ch; }
@media (min-width: 1024px) { .intro { font-size: 20px; } }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
.help { margin-top: var(--s2); font: 600 14px/1.35 var(--f-label); letter-spacing: .04em; color: var(--muted); }
sup.fn { font: 700 13px/0 var(--f-label); vertical-align: super; margin-left: 0; }
sup.fn a { position: relative; display: inline-block; padding: 0 2px; color: var(--lime); border-radius: 4px; }
sup.fn a::after { content: ''; position: absolute; inset: -22px -16px; } /* 44px hit area, same line height */
sup.fn a:hover { background: rgba(123, 241, 168, .14); }

/* marker: a lime band that sweeps in behind the payoff */
.marker {
  /* band hugs the caps: Cabinet Grotesk cap top sits .19em below the inline box top, the baseline .87em */
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 .12em / 0% .86em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .07em; margin: 0 -.07em 0 0; /* bleed right only, so the slab never eats the word space before it */
  transition: background-size .8s var(--ease) var(--md, 0ms), color .2s linear calc(var(--md, 0ms) + 340ms);
}
.line > .marker { margin-left: -.07em; } /* a marker that starts a line may bleed left */
.is-marked .marker { background-size: 100% .86em; color: var(--ink); }
html:not(.js) .marker { background-size: 100% .86em; color: var(--ink); transition: none; }

/* ------------------------------------------------------------ buttons */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--h); padding: 0 22px; border-radius: var(--pill);
  font: 800 16px/1.1 var(--f-display); letter-spacing: -.005em; text-align: center;
  transition: background-color .25s var(--ease), border-color .25s, color .25s, transform .25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-sm { --h: 44px; font-size: 15px; padding: 0 18px; gap: 10px; }
.btn-lg { --h: 56px; font-size: 17px; padding: 0 26px; }
.btn-block { width: 100%; }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-hi); }
.btn-ink { background: var(--ink); color: var(--lime); }
.btn-ink:hover { background: #1F3A2F; }
.btn-ink-ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-ink-ghost:hover { background: rgba(16, 37, 29, .08); }
.btn-icon { width: 20px; height: 20px; }
.btn-arrow { position: relative; width: 18px; height: 18px; overflow: hidden; flex-shrink: 0; }
.btn-arrow svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn-arrow svg + svg { transform: translateX(-120%); }
.btn:hover .btn-arrow svg:first-child, .btn:focus-visible .btn-arrow svg:first-child { transform: translateX(120%); }
.btn:hover .btn-arrow svg + svg, .btn:focus-visible .btn-arrow svg + svg { transform: none; }
.text-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  font: 600 14px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
  transition: color .2s;
}
.text-btn:hover { color: var(--lime); }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; color: var(--text); transition: color .2s; }
.arrow-link:hover { color: var(--lime); }
.arrow-link .al-icon { width: 18px; height: 18px; color: var(--lime); transition: transform .3s var(--ease); }
.arrow-link:hover .al-icon { transform: translateY(3px); }
.arrow-link .al-right, .foot-club .al-right { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.arrow-link:hover .al-right, .foot-club a:hover .al-right { transform: translateX(4px); }
.al-up { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .25s var(--ease); }
.to-top:hover .al-up { transform: rotate(-90deg) translateX(3px); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(123, 241, 168, .6); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.text-link:hover { color: var(--lime); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--lime); color: var(--lime); transition: background-color .2s, color .2s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--lime); color: var(--ink); }

/* ------------------------------------------------------------ nav */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; pointer-events: none; }
.nav {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 24px;
  width: 100%; max-width: calc(1280px + 2 * var(--gut)); height: var(--nav-h); margin: 0 auto; padding: 0 var(--gut);
  border: 1px solid transparent; border-radius: 0;
  transition: max-width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), padding .4s var(--ease),
    background-color .4s, border-color .4s, border-radius .4s var(--ease), box-shadow .4s;
}
.is-scrolled .nav {
  max-width: 940px; height: 60px; margin-top: 14px; padding: 0 8px 0 18px; border-radius: var(--pill);
  background: rgba(16, 37, 29, .82); border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; }
.wordmark-ball { width: 28px; height: 28px; }
.wordmark-text { display: flex; flex-direction: column; font: 900 17px/1 var(--f-display); letter-spacing: .01em; white-space: nowrap; }
.wordmark-text .wm-2 { font: 700 13px/1 var(--f-label); letter-spacing: .2em; color: var(--text-2); margin-top: 3px; }
.nav-links { display: flex; gap: 28px; margin: 0 auto; }
.nav-links a { position: relative; font-weight: 700; font-size: 15px; color: rgba(234, 243, 238, .78); padding: 12px 0; transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current='true'] { color: var(--text); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(.4); }
.nav-links a[aria-current='true']::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-links + .nav-actions { margin-left: 0; }
.menu-btn {
  display: none; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line-strong);
  font: 600 14px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase;
}
.menu-icon, .menu-icon::before { display: block; width: 16px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: transform .3s var(--ease); }
.menu-icon { box-shadow: none; }
.menu-icon::before { content: ''; position: absolute; left: 0; top: 5px; }
.menu-icon { top: -2.5px; }
.menu-open .menu-icon { transform: translateY(2.5px) rotate(45deg); }
.menu-open .menu-icon::before { transform: translateY(-5px) rotate(-90deg); }

@media (max-width: 899px) {
  .nav { gap: 10px; }
  .nav-links { display: none; }
  .nav-links + .nav-actions { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .nav-actions .wa-btn { display: none; }
  .is-scrolled .nav { height: 60px; margin: 8px 8px 0; width: auto; padding: 0 6px 0 14px; }
}
@media (max-width: 599px) {
  .nav { padding: 0 12px 0 16px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-sm { padding: 0 14px; font-size: 14px; gap: 6px; }
  .nav-actions .btn-arrow { width: 14px; height: 14px; }
  .nav-actions .btn-arrow svg { width: 14px; height: 14px; }
  .menu-btn { width: 44px; padding: 0; justify-content: center; }
  .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wordmark { gap: 8px; }
  .wordmark-ball { width: 24px; height: 24px; }
  .wordmark-text { font-size: 15px; }
  .wordmark-text .wm-2 { font-size: 13px; letter-spacing: .1em; }
}
@media (max-width: 374px) {
  .nav { padding: 0 10px 0 12px; }
  .is-scrolled .nav { padding: 0 4px 0 10px; }
  .wordmark { gap: 6px; }
  .wordmark-ball { display: block; width: 22px; height: 22px; }
}
@media (max-width: 899px) {
  .nav-actions .btn { transition: opacity .25s, visibility 0s linear 0s, background-color .25s; }
  .mbar-on .nav-actions .btn { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
}

.menu-sheet {
  position: fixed; inset: 0; z-index: 55; background: var(--bg); padding: 104px var(--gut) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--s6); overflow-y: auto;
}
.menu-links a {
  display: block; padding: 6px 0; font: 900 40px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.02em;
  opacity: 0; transform: translateY(12px); animation: sheetIn .45s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 40ms + 60ms);
}
.menu-links a:hover { color: var(--lime); }
@keyframes sheetIn { to { opacity: 1; transform: none; } }
.menu-contact { display: grid; margin-top: auto; }
.menu-contact a {
  display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line);
  font: 600 16px/1.2 var(--f-label); letter-spacing: .06em; color: var(--text-2); overflow-wrap: anywhere;
}
.menu-contact .mc-label { text-transform: uppercase; letter-spacing: .12em; color: var(--text); }
.menu-contact .mc-sep { color: var(--muted); }
.menu-contact svg { width: 20px; height: 20px; color: var(--lime); }
.menu-open { overflow: hidden; }

/* ------------------------------------------------------------ hero */
.hero {
  position: relative; padding-top: calc(var(--nav-h) + var(--s5)); overflow: hidden; isolation: isolate;
  background: radial-gradient(900px 600px at 82% 18%, rgba(123, 241, 168, .08), transparent 70%), var(--bg);
}
.hero-lines {
  position: absolute; z-index: -1; right: -14%; top: 4%; width: min(1100px, 92vw); aspect-ratio: 2 / 1; height: auto;
  color: rgba(255, 255, 255, .08); overflow: visible;
  transform: perspective(1400px) rotateX(58deg) rotateZ(-8deg); transform-origin: 50% 40%;
}
.hero-lines rect, .hero-lines path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .hero-lines rect, .js .hero-lines path { stroke-dashoffset: 1; }
.js .hero.is-in .hero-lines rect, .js .hero.is-in .hero-lines path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.6, .05, .2, 1); }
.js .hero.is-in .hero-lines path { transition-delay: .5s; }
.hero-inner { position: relative; }
.hero-title {
  margin-top: var(--s4); font-weight: 900; text-transform: uppercase;
  font-size: clamp(44px, 12.6vw, 168px); line-height: .9; letter-spacing: -.025em;
}
.hero-title .line { display: block; }
.hero-row { display: grid; gap: var(--s5); margin-top: var(--s5); }
.hero-sub { font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 38ch; text-wrap: balance; }
.intro, .point-line, .pkg-line, .step-line, .faq-list .ans p, .close-sub, .notes p { text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.hero-price { margin-top: var(--s4); font: 600 14px/1.45 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* the price line may only break between its phrases; once "Minimum 10 courts" drops to its own line the dot goes (script.js) */
.hero-price.is-wrapped .hp-sep { display: none; }
.hero-price.is-wrapped .hp-min { display: block; }
@media (max-width: 599px) {
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-ctas .arrow-link { margin-top: -4px; }
}
@media (min-width: 600px) {
  .hero-title { font-size: clamp(56px, 9.6vw, 168px); }
}
@media (min-width: 1024px) {
  .hero { min-height: max(760px, 100svh); display: flex; flex-direction: column; }
  .hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: var(--s3); padding-bottom: var(--s6); }
  .hero-title { font-size: clamp(56px, 7.9vw, 168px); margin-top: var(--s5); }
  .hero-row { margin-top: var(--s6); }
  .hero-sub { font-size: clamp(20px, 1.55vw, 22px); }
}
/* 1024–1359: one left-aligned column (sub, then the CTA row, then the price line) */
@media (min-width: 1024px) and (max-width: 1359px) {
  .hero-row { gap: var(--s5); }
  .hero-sub { max-width: 40ch; }
  .hero-price { margin-top: var(--s3); }
}
/* 1360+: sub on the left, actions on the right, bottoms aligned */
@media (min-width: 1360px) {
  .hero-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .hero-sub { grid-column: 1 / 7; max-width: 36ch; }
  .hero-actions { grid-column: 7 / 13; justify-self: end; text-align: right; }
  .hero-ctas { justify-content: flex-end; }
}

/* club belt: the hero's visual */
.belt { position: relative; padding-bottom: var(--s6); }
.belt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-top: var(--s4); padding-bottom: var(--s3); border-top: 1px solid var(--line); }
.belt-label { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.belt-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(123, 241, 168, .16); }
.belt-pause { font-size: 13px; }
.belt-rows { display: grid; gap: var(--s3); padding: var(--s1) 0 var(--s4); border-bottom: 1px solid var(--line); }
.belt-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}
.belt-track { display: flex; width: max-content; animation: beltL 70s linear infinite; will-change: transform; }
.belt-row[data-dir='right'] .belt-track { animation-name: beltR; animation-duration: 80s; }
.belt.is-paused .belt-track { animation-play-state: paused; }
@media (hover: hover) { .belt-row:hover .belt-track { animation-play-state: paused; } }
@keyframes beltL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes beltR { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.belt-set { display: flex; align-items: center; }
.club {
  position: relative; display: flex; align-items: center; height: 72px; padding: 0 30px; margin-right: 34px; flex-shrink: 0;
  border-radius: var(--pill); background: #10241C; border: 1px solid rgba(255, 255, 255, .07);
  font: 800 clamp(20px, 1.75vw, 26px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; color: var(--text); white-space: nowrap;
  transition: border-color .25s, color .25s;
}
.club::after { content: ''; position: absolute; right: -21px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--lime); }
/* logos: sized by optical weight (--lh per logo in the markup), one monochrome treatment for all of them */
.club-logo { gap: 14px; }
.club-logo img {
  width: auto; height: var(--lh, 40px); max-width: var(--lw, 180px); object-fit: contain;
  filter: brightness(0) invert(1); opacity: .92; transition: filter .35s var(--ease), opacity .35s;
}
@media (hover: hover) {
  .club:hover { border-color: rgba(123, 241, 168, .5); }
  .club-logo:hover img { filter: none; opacity: 1; }
}
html:not(.js) .belt-track, html:not(.js) .belt-row[data-dir] .belt-track { animation: none; transform: none; width: auto; }
html:not(.js) .belt-row { -webkit-mask-image: none; mask-image: none; overflow: visible; }
html:not(.js) .belt-set { flex-wrap: wrap; gap: 10px 0; padding: 0 var(--gut); }
html:not(.js) .belt-pause { display: none; }
@media (max-width: 599px) {
  .club { height: 56px; padding: 0 22px; margin-right: 26px; font-size: 18px; }
  .club::after { right: -17px; width: 6px; height: 6px; margin-top: -3px; }
  .club-logo img { height: calc(var(--lh, 40px) * .8); max-width: calc(var(--lw, 180px) * .8); }
  .belt-track, .belt-row[data-dir='right'] .belt-track { animation-duration: 55s; }
  .belt-row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
}
@media (min-width: 1024px) { .belt { padding-bottom: var(--s5); } }

/* ------------------------------------------------------------ sections */
/* surfaces alternate strictly: hero 0f, studio 15, network 0f, packages 15, how 0f, faq 15, close lime, footer 0f */
.section { padding: var(--sec-y) 0; position: relative; scroll-margin-top: calc(var(--s5) - var(--sec-y)); } /* nav jumps land on the label, not on the padding */
.sec-head { margin-bottom: var(--s7); }
@media (min-width: 1024px) { .sec-head { margin-bottom: var(--s8); } }

/* ------------------------------------------------------------ studio */
.studio { background: var(--surface); border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .studio { padding-bottom: var(--s8); }
  .studio { scroll-margin-top: calc(var(--s4) - var(--sec-y)); } /* a Studio jump shows the head, the stage and every control */
  .studio-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6); align-items: last baseline; margin-bottom: var(--s5); }
  .studio-head .label { grid-column: 1 / -1; margin-bottom: var(--s3); }
  .studio-head .h2 { max-width: none; }
  .studio-head .intro { margin-top: 0; max-width: 26ch; text-align: right; text-wrap: balance; }
}
.studio-grid { display: grid; gap: var(--s5); }
.stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); background: var(--bg); isolation: isolate;
  border: 1px solid var(--line); touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none;
}
@media (pointer: fine) { .stage { cursor: grab; } .stage.is-dragging { cursor: grabbing; } }
.stage-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; -webkit-user-drag: none; }
.stage-poster.is-gone { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.stage-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .22); }
.stage-placeholder svg { width: 72%; height: auto; aspect-ratio: 2 / 1; transform: perspective(900px) rotateX(50deg); }
.studio-host { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; z-index: 1; }
.studio-host.is-live { opacity: 1; }
.studio-host.is-live.is-muted { opacity: 0; }
.studio-host canvas { width: 100%; height: 100%; display: block; }
.stage-tag, .stage-status {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, .72); color: #fff; border-radius: var(--pill);
  font: 700 13px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.stage-tag { left: 14px; top: 14px; padding: 8px 12px; pointer-events: none; }
.stage-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.stage-status { left: 14px; bottom: 14px; right: auto; max-width: calc(100% - 28px); padding: 6px 6px 6px 14px; min-height: 36px; letter-spacing: .06em; text-transform: none; font-weight: 600; font-size: 14px; flex-wrap: wrap; cursor: default; }
.stage-status:not(:has(.stage-load:not([hidden]))) { padding-right: 14px; }
.stage-status.is-loading::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(123, 241, 168, .35); border-top-color: var(--lime); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage-load { position: relative; min-height: 32px; padding: 0 12px; border-radius: var(--pill); background: var(--lime); color: var(--ink); font: 700 13px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; }
.stage-load::before { content: ''; position: absolute; inset: -6px -4px; } /* 44px hit area around the 32px pill */
.stage-noscript { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .78); font: 600 14px/1.35 var(--f-label); letter-spacing: .04em; }
.stage-captions { display: grid; align-content: start; gap: 2px; margin-top: var(--s3); padding: 0 4px; min-height: 42px; }
.caption { font: 600 15px/1.4 var(--f-label); letter-spacing: .04em; color: var(--text-2); }
.caption-2 { color: var(--muted); }

/* phones and tablets: the stage sticks under the nav while the controls scroll beneath it */
@media (max-width: 1023px) {
  .studio-stage-col {
    position: sticky; top: 76px; z-index: 5; background: var(--surface);
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) var(--s3);
  }
  .studio-stage-col::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 20px; background: linear-gradient(var(--surface), rgba(16, 36, 28, 0)); pointer-events: none; }
  .stage { aspect-ratio: 4 / 5; max-height: 40svh; width: 100%; }
  .stage-captions { min-height: calc(3 * 1.4 * 15px + 4px); } /* the tallest pair of captions: toggling never shifts the controls */
  /* typing: nav + stage + label + field + helper all fit above the on-screen keyboard */
  .studio.is-typing .stage { max-height: max(96px, calc(var(--vvh, 100svh) - 250px)); }
  .studio.is-typing .stage-captions { display: none; }
  .studio-rail :is(input, button, a) { scroll-margin-top: var(--stage-h, 50svh); } /* keyboard focus never lands under the sticky stage */
}
@media (min-width: 600px) and (max-width: 1023px) { .stage { aspect-ratio: 16 / 10; } }

.studio-rail { display: grid; gap: var(--s5); align-content: start; }
.ctl { display: grid; gap: var(--s2); min-width: 0; }
.ctl-head { display: flex; align-items: center; justify-content: space-between; }
.ctl-label { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
legend.ctl-label { margin-bottom: var(--s2); }
.ctl-reset { position: relative; min-height: 24px; font-size: 13px; color: var(--muted); }
.ctl-reset::before { content: ''; position: absolute; inset: -10px -8px; } /* 44px hit area */
.brand-input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: #0B1A14;
  font: 800 19px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.brand-input::placeholder { color: #67776F; opacity: 1; }
.brand-input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(123, 241, 168, .3); }
.help.is-limit { color: var(--lime); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatch span {
  width: 32px; height: 32px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(135deg, var(--bg) 50%, var(--fg) 50%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .2s var(--ease), box-shadow .2s;
}
@media (hover: hover) { .swatch:hover span { transform: scale(1.08); } }
.swatch input:checked + span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.swatch input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 5px; }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chip {
  min-height: 44px; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); color: var(--text);
  font: 800 15px/1.1 var(--f-display); transition: background-color .2s, border-color .2s, color .2s;
}
@media (hover: hover) { .chip:hover { border-color: rgba(123, 241, 168, .6); } }
.chip[aria-selected='true'] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
@media (max-width: 599px) {
  .chips { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .chip { font-size: 14px; padding: 6px 4px; white-space: nowrap; }
}
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #0B1A14; border: 1px solid var(--line-strong); }
.seg-opt { position: relative; display: grid; gap: 2px; justify-items: center; padding: 9px 6px; border-radius: 10px; cursor: pointer; text-align: center; transition: background-color .25s, color .25s; }
.seg-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg-main { font: 800 16px/1.1 var(--f-display); }
.seg-sub { font: 600 13px/1.1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.seg-opt:has(input:checked) { background: var(--lime); color: var(--ink); }
.seg-opt:has(input:checked) .seg-sub { color: #0F3D2E; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.club-note { font: 600 15px/1.4 var(--f-label); letter-spacing: .03em; color: var(--muted); padding-left: 12px; border-left: 2px solid var(--lime); }

/* 1024–1279: full-width stage, the controls under it as one 3-column bar */
@media (min-width: 1024px) and (max-width: 1279px) {
  .studio-grid { gap: var(--s4); }
  .studio-rail {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr); grid-template-rows: auto auto; grid-auto-flow: column;
    gap: var(--s5) var(--s6); align-items: start;
    padding: var(--s5); border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line);
  }
  .studio-rail .chips { grid-template-columns: 1fr 1fr; }
  .studio-rail > .btn { align-self: end; }
  .stage { max-height: max(420px, calc(100svh - 260px)); }
  .swatches { gap: 2px; }
  .swatch input:checked + span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
}
/* 1280+: stage and rail side by side as one instrument; the canvas fills the rail's height */
@media (min-width: 1280px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s5); align-items: stretch; }
  .studio-stage-col { display: flex; flex-direction: column; min-height: 0; }
  .stage { aspect-ratio: auto; flex: 1; min-height: 360px; }
  .studio-rail { gap: var(--s4); padding: var(--s4) 20px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); }
  .studio-rail .help { margin-top: 2px; }
  .studio-rail .seg-opt { padding: 7px 6px; }
  .studio-rail .chips { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .studio-rail .chip { font-size: 14px; padding: 6px 4px; white-space: nowrap; }
  .studio-rail .brand-input { height: 48px; }
  .swatch input:checked + span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
}

/* short landscape phones: stage beside the controls, no sticky bar */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); align-items: start; }
  .studio-stage-col { top: 76px; margin: 0; padding: 0; background: none; }
  .studio-stage-col::after { display: none; }
  .stage { aspect-ratio: 16 / 10; max-height: calc(100svh - 148px); }
  .stage-captions { min-height: 0; }
  .chips { grid-template-columns: 1fr 1fr; }
  .studio-rail :is(input, button, a) { scroll-margin-top: 0; }
  .mbar { display: none !important; }
  body { padding-bottom: 0; }
  html { scroll-padding-bottom: 0; }
}

/* the hinge from one court to the network */
.bridge {
  margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line);
  font: 800 clamp(30px, 3.6vw, 52px)/1.05 var(--f-display); letter-spacing: -.02em;
}
.bridge span { display: block; text-wrap: balance; }

/* ------------------------------------------------------------ network */
.network {
  background: radial-gradient(760px 460px at 88% 78%, rgba(123, 241, 168, .05), transparent 70%), var(--bg);
  overflow: hidden; isolation: isolate;
}
@media (min-width: 1024px) { .network { padding-top: var(--s8); } }
.net-lines {
  position: absolute; z-index: -1; right: -12%; bottom: -8%; width: min(1000px, 96vw); height: auto; aspect-ratio: 2 / 1;
  color: rgba(255, 255, 255, .045); overflow: visible; pointer-events: none;
  transform: perspective(1400px) rotateX(58deg) rotateZ(8deg); transform-origin: 50% 60%;
}
.points { display: grid; margin-top: var(--s7); border-top: 1px solid var(--line); }
.point { padding: var(--s6) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s3); align-content: start; }
.point-num, .step-num { font-size: 14px; color: var(--muted); }
.point-num .num, .step-num .num { color: var(--lime); font-weight: 700; }
/* the USP section's colour moment: big lime numerals over their labels */
.network .point-num .num { display: block; margin-bottom: var(--s2); font: 700 40px/1 var(--f-label); letter-spacing: 0; }
.network .pn-sep { display: none; }
.point-title { font: 800 clamp(24px, 2.3vw, 32px)/1.1 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.point-line { font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 44ch; }
@media (min-width: 1024px) {
  .points { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s8); border-bottom: 1px solid var(--line); }
  .point { padding: var(--s6) var(--s6) var(--s7) 0; border-bottom: 0; }
  .point + .point { padding-left: var(--s6); border-left: 1px solid var(--line); }
  .point-title { min-height: 2.2em; }
}

/* ------------------------------------------------------------ packages */
.packages { background: var(--surface); border-top: 1px solid var(--line); }
.pkg-cards { display: grid; gap: var(--s4); }
@media (min-width: 768px) { .pkg-cards { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.pkg-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) var(--s5) var(--s5);
  border-radius: var(--r-lg); background: var(--bg); border: 2px solid var(--line); cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s, transform .3s var(--ease);
}
@media (min-width: 1024px) { .pkg-card { padding: var(--s7) var(--s6) var(--s6); } }
@media (hover: hover) { .pkg-card:hover { border-color: rgba(123, 241, 168, .45); } .pkg-card:hover .pkg-choose { border-color: var(--lime); } }
.pkg-card.is-on { border-color: var(--lime); background: #E9FAF0; }
.pkg-card:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 4px; }
.pkg-tag { align-self: flex-start; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line-strong); font-size: 13px; color: var(--text-2); transition: background-color .3s, color .3s, border-color .3s; }
.pkg-card.is-on .pkg-tag { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pkg-name { display: block; margin-top: var(--s2); font: 900 clamp(32px, 3.4vw, 48px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; }
.pkg-line { display: block; font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 40ch; }
.pkg-price { display: grid; gap: 4px; margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--line); }
.pkg-amount { font: 900 clamp(28px, 2.8vw, 40px)/1 var(--f-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.pkg-unit { font: 600 14px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pkg-choose { display: inline-flex; align-self: flex-start; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--pill); border: 1.5px solid var(--line-strong); font: 800 15px/1 var(--f-display); transition: all .3s var(--ease); }
.pkg-card.is-on .pkg-choose { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pc-on { display: none; }
.pkg-card.is-on .pc-on { display: inline; }
.pkg-card.is-on .pc-off { display: none; }
.pkg-card.is-on .pc-on::before { content: '✓'; margin-right: 8px; }

.campaign {
  position: relative; display: grid; gap: var(--s4) var(--s5); align-items: center; margin-top: var(--s5);
  padding: var(--s5); border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line-strong);
  grid-template-columns: auto 1fr; scroll-margin-top: var(--s2);
}
.campaign:focus { outline: none; }
.campaign:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.campaign-label { grid-column: 1 / -1; font-size: 14px; color: var(--lime); }
.courts { display: grid; grid-template-columns: auto; gap: 6px; }
.courts-label { font-size: 13px; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; height: 52px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: #0B1A14; }
.step-btn { display: grid; place-items: center; width: 48px; height: 50px; border-radius: var(--pill); color: var(--text); transition: color .2s, background-color .2s; }
.step-btn:hover { color: var(--lime); }
.step-btn svg { width: 18px; height: 18px; }
.step-btn:disabled { opacity: .35; cursor: not-allowed; }
.courts-input { width: 3.2ch; min-width: 52px; height: 50px; border: 0; background: transparent; text-align: center; font: 900 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.courts-input:focus { outline: none; }
.stepper:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(123, 241, 168, .3); }
.stepper.is-err { border-color: var(--error); }
.courts-help { font: 600 13px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.figure { min-width: 0; }
.figure-total { font: 900 clamp(24px, 2.6vw, 36px)/1.05 var(--f-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.figure-formula { margin-top: 6px; font: 600 15px/1.3 var(--f-label); letter-spacing: .05em; color: var(--muted); }
.courts-msg { margin-top: 6px; font: 600 15px/1.3 var(--f-label); letter-spacing: .04em; color: var(--error); }
.courts-msg:empty { display: none; }
.courts-msg.is-note { color: var(--lime); }
.campaign-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.campaign .panel-slot { grid-column: 1 / -1; justify-self: end; }
@media (max-width: 599px) { .campaign .panel-slot { justify-self: stretch; } }
.panel-slot:empty { display: none; }
@media (max-width: 599px) {
  .campaign { grid-template-columns: 1fr; }
  .campaign-actions .btn { flex: 1 1 100%; }
  .stepper { display: flex; justify-content: space-between; }
  .step-btn { width: 56px; }
  .courts-input { flex: 1; }
}
@media (min-width: 600px) { .stepper { justify-self: start; } }
@media (min-width: 1024px) {
  .campaign { grid-template-columns: auto auto minmax(0, 1fr) auto; padding: var(--s5) var(--s6); column-gap: var(--s6); }
  .campaign-label { grid-column: auto; align-self: center; }
  .campaign-actions { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0; text-align: center; }
  .campaign-actions .text-link { justify-content: center; }
}
.pkg-fine { margin-top: var(--s4); padding: 0 4px; }

/* ------------------------------------------------------------ how */
.how { background: var(--bg); border-top: 1px solid var(--line); }
.steps { position: relative; display: grid; gap: var(--s6); margin-top: var(--s7); padding-left: 36px; --g: var(--s6); }
.step { position: relative; display: grid; gap: var(--s2); align-content: start; }
.node { position: absolute; left: -36px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(123, 241, 168, .45); background: var(--bg); transition: background-color .3s, border-color .3s; z-index: 1; }
.step::before, .step::after { content: ''; position: absolute; left: -30px; top: 16px; width: 2px; height: calc(100% + var(--g) - 16px + 2px); background: rgba(255, 255, 255, .12); }
.step::after { background: var(--lime); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 450ms + 200ms); }
.step:nth-child(4)::before, .step:nth-child(4)::after { display: none; }
.step-line { font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 34ch; }
.steps.is-run .step::after { transform: none; }
.steps.is-run .node { background: var(--lime); border-color: var(--lime); transition-delay: calc(var(--i, 0) * 450ms); }
.step-ball { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -2px 0 0 -40px; z-index: 2; transform: translate3d(var(--bx0, 0), var(--by0, 0), 0); transition: transform 1.8s cubic-bezier(.45, .05, .25, 1) .2s; opacity: 0; }
.step-ball svg { width: 100%; height: 100%; transition: transform 1.8s cubic-bezier(.45, .05, .25, 1) .2s; }
.steps.is-run .step-ball { opacity: 1; transform: translate3d(var(--bx, 0), var(--by, 0), 0); }
.steps.is-run .step-ball svg { transform: rotate(var(--rot, 720deg)); }
.steps.is-ready .step-ball { opacity: 1; }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); padding-left: 0; padding-top: 44px; margin-top: var(--s8); }
  .node { left: 0; top: -44px; }
  .step::before, .step::after { left: 14px; top: -38px; height: 2px; width: calc(100% + var(--g) - 14px); }
  .step::after { transform: scaleX(0); transform-origin: left; }
  .step-ball { margin: -48px 0 0 -4px; }
}

/* ------------------------------------------------------------ faq */
.faq { background: var(--surface); border-top: 1px solid var(--line); }
.faq-grid { display: grid; gap: var(--s7); }
.faq-aside { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 17px; color: var(--text-2); }
.faq-aside .arrow-link { color: var(--lime); }
.faq-aside .al-right { color: var(--lime); }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .faq-side { grid-column: 1 / 6; position: sticky; top: 120px; }
  .faq-list { grid-column: 6 / 13; }
}
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 22px 0; min-height: 44px;
  font: 800 clamp(19px, 1.5vw, 21px)/1.3 var(--f-display); cursor: pointer; list-style: none; transition: color .2s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--lime); }
.faq-list summary svg { width: 22px; height: 22px; color: var(--lime); transition: transform .35s var(--ease); }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list .ans { padding: 0 44px 24px 0; }
.faq-list .ans p { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 58ch; }
.js .faq-list details[open] .ans { animation: ansIn .4s var(--ease); }
@keyframes ansIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ close */
.close { background: var(--lime); color: var(--ink); padding: var(--s9) 0; }
@media (min-width: 1024px) { .close { padding: var(--s10) 0; } }
.close-grid { display: grid; gap: var(--s7); }
@media (min-width: 1024px) {
  .close-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s7); align-items: start; }
  .close-head { grid-column: 1 / -1; }
  .close-main { grid-column: 1 / 8; }
  .contact-rows { grid-column: 9 / 13; }
  .close-title .line { display: block; }
}
.close-grid { row-gap: var(--s6); }
.close-eyebrow { font-size: 14px; }
.close-title { margin-top: var(--s4); font: 900 clamp(52px, 9.4vw, 152px)/.88 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; text-wrap: balance; }
.close-sub { font-size: 19px; line-height: 1.45; max-width: 36ch; font-weight: 700; }
.close-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.close-micro { margin-top: var(--s3); font: 600 15px/1.3 var(--f-label); letter-spacing: .04em; color: #0F3D2E; }
.close .panel-slot { margin-top: var(--s4); }
@media (max-width: 599px) { .close-ctas .btn { flex: 1 1 100%; } }
.contact-rows { border-top: 1.5px solid var(--ink); }
.contact-rows a { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--s3); min-height: 56px; border-bottom: 1.5px solid rgba(16, 37, 29, .3); font: 600 17px/1.2 var(--f-label); letter-spacing: .04em; transition: padding .25s var(--ease); }
@media (hover: hover) { .contact-rows a:hover { padding-left: 6px; } }
.cr-label { text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: #0F3D2E; }
.cr-val { overflow-wrap: normal; min-width: 0; }
@media (max-width: 399px) {
  .contact-rows a { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .cr-val { font-size: 16px; }
}

/* post-click panel */
.mail-panel { scroll-margin: var(--s5) 0; max-width: 560px; padding: var(--s4) var(--s5); border-radius: var(--r-md); background: var(--ink); color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: ansIn .35s var(--ease); }
.campaign .mail-panel { background: #0B1A14; border: 1px solid var(--line-strong); }
.mp-text { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.mini-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--pill); background: var(--lime); color: var(--ink); font: 800 14px/1 var(--f-display); }
.mini-btn:hover { background: var(--lime-hi); }
.mini-btn.ghost { background: transparent; color: var(--text-2); border: 1px solid var(--line-strong); }
.mini-btn.ghost:hover { color: var(--text); border-color: var(--text); }
.close .mail-panel :focus-visible { outline-color: var(--lime); }

/* ------------------------------------------------------------ footer */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding-top: var(--s8); }
.foot-top { display: grid; gap: var(--s6); }
@media (min-width: 900px) {
  .foot-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .foot-brand { grid-column: 1 / 5; } .foot-links { grid-column: 5 / 7; } .foot-contact { grid-column: 7 / 10; } .foot-club { grid-column: 10 / 13; }
}
.wordmark-lg .wordmark-ball { width: 34px; height: 34px; }
.wordmark-lg .wordmark-text { font-size: 22px; }
.wordmark-lg .wordmark-text .wm-2 { font-size: 15px; }
.foot-desc { margin-top: var(--s3); font-size: 16px; color: var(--text-2); }
.foot-links, .foot-contact { display: grid; align-content: start; }
.foot-links a, .foot-contact a { display: inline-flex; align-items: center; min-height: 36px; font: 600 15px/1.2 var(--f-label); letter-spacing: .08em; color: var(--text-2); overflow-wrap: anywhere; }
.foot-links a { text-transform: uppercase; letter-spacing: .12em; }
.foot-links a:hover, .foot-contact a:hover { color: var(--lime); }
.foot-club a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 15px; color: var(--muted); }
.foot-club a:hover { color: var(--lime); }
.foot-notes { margin-top: var(--s7); }
.notes { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .notes { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } .notes .note-plain { grid-column: 1 / -1; max-width: 76ch; } }
.notes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; padding: 8px 10px 8px 0; font-size: 13px; line-height: 1.55; color: var(--muted); border-left: 3px solid transparent; border-radius: 4px; transition: background-color .4s, border-color .4s, padding .3s; max-width: 72ch; }
.notes li:focus { outline: none; }
.note-n { font: 700 13px/1.55 var(--f-label); color: var(--lime); }
.notes a.ext { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.notes a.back { color: var(--lime); font-weight: 700; margin-left: 4px; white-space: nowrap; }
.notes li.is-flash { background: rgba(123, 241, 168, .12); border-left-color: var(--lime); padding-left: 10px; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: var(--s6); padding-top: var(--s4); padding-bottom: var(--s4); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot-bar a { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 899px) {
  .foot-links a, .foot-contact a, .foot-club a, .foot-bar a { min-height: 44px; }
}
.foot-bar a:hover { color: var(--lime); }
.ball-tray { position: relative; height: 180px; overflow: hidden; border-top: 1px solid var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (min-width: 900px) { .ball-tray { height: 240px; } }
.ball-tray-hint { position: absolute; left: var(--gut); top: 16px; font: 600 13px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: opacity .4s; }
.ball-tray.touched .ball-tray-hint { opacity: 0; }
.pball { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; cursor: grab; touch-action: none; background: radial-gradient(circle at 32% 30%, #95F5BA, var(--lime) 45%, #1F7A57 100%); box-shadow: inset -6px -8px 18px rgba(0, 0, 0, .25); }
.pball:active { cursor: grabbing; }
.pball.white { background: radial-gradient(circle at 32% 30%, #fff, #DCE5E0 50%, #BFCDC6 100%); }
.pball.grey { background: radial-gradient(circle at 32% 30%, #BFCDC6, #5D6E66 50%, #5D6E66 100%); }
.pball svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------ mobile sticky bar */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; align-items: center; gap: 10px;
  height: calc(var(--mbar-h) + env(safe-area-inset-bottom)); padding: 0 12px env(safe-area-inset-bottom);
  background: rgba(16, 37, 29, .88); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transform: translateY(110%); transition: transform .35s var(--ease), visibility 0s linear .35s; visibility: hidden;
}
@media (max-width: 899px) { .mbar { display: flex; } }
.mbar.show { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.mbar-cta { flex: 1; }

/* ------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--mbar-h) + 20px + env(safe-area-inset-bottom)); z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--pill); background: var(--text); color: var(--ink); font-weight: 800; font-size: 15px; text-align: center;
  transition: opacity .25s, transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .toast { bottom: 32px; } }
.copy-buffer { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------ reveals */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .hero-in { opacity: 0; transform: translateY(18px); }
.js .hero.is-in .hero-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .marker { background-size: 100% .86em; color: var(--ink); }
  .js .rv, .js .hero-in { opacity: 1; transform: none; }
  .js .hero-lines rect, .js .hero-lines path { stroke-dashoffset: 0; }
  .belt-track { animation: none !important; width: max-content; transform: none !important; }
  .belt-row {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: none; mask-image: none;
  }
  .belt-row::-webkit-scrollbar { display: none; }
  .belt-set { flex-wrap: nowrap; padding: 0 var(--gut); }
  .belt-set[aria-hidden='true'] { display: none; }
  .belt-pause { display: none; }
  .club { scroll-snap-align: start; scroll-margin-left: var(--gut); }
  .belt-set > .club:last-child { margin-right: 0; }
  .belt-set > .club:last-child::after { display: none; }
  .step::after { transform: none !important; }
  .node { background: var(--lime) !important; border-color: var(--lime) !important; }
  .step-ball { opacity: 1 !important; transform: translate3d(var(--bx, 0), var(--by, 0), 0) !important; }
  .menu-links a { opacity: 1; transform: none; animation: none; }
}

/* ------------------------------------------------------------ 1024–1279 refinements */
@media (min-width: 1024px) and (max-width: 1279px) {
  .close-main { grid-column: 1 / 7; }
  .contact-rows { grid-column: 7 / 13; }
  .campaign { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--s3); }
  .campaign-label { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .foot-brand { grid-column: 1 / 5; } .foot-links { grid-column: 5 / 8; } .foot-contact { grid-column: 8 / 13; }
  .foot-club { grid-column: 8 / 13; }
}
.menu-open .nav-actions > a { visibility: hidden; }

/* studio v2: logo upload + brand 2 */
.logo-drop{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 14px;border:1px dashed #1F3A2F;border-radius:10px;color:#B7CCC1;cursor:pointer;font-size:15px;transition:border-color .2s,color .2s}
.logo-drop:hover,.logo-drop:focus-within{border-color:#7BF1A8;color:#fff}
.logo-drop-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.brand2{display:grid;gap:12px;padding:16px;border:1px solid #1F3A2F;border-radius:12px}
.brand2[hidden]{display:none}
.swatches-sm .swatch span{width:28px;height:28px}

/* ===== WHITE THEME PREVIEW ===== */
:root {
  --bg: #ffffff; --surface: #EEF3F0; --raised: #EEF3F0;
  --line: rgba(16, 37, 29,.10); --line-strong: rgba(16, 37, 29,.22);
  --text: #0B1A14; --text-2: #3A4B43; --muted: #5D6E66;
  --error: #B42318;
  color-scheme: light;
}
html, body { background: #ffffff; color: #0B1A14; }
body { background: #ffffff; }
/* surfaces that were hard-coded dark */
.club { background: #EEF3F0; border-color: rgba(16, 37, 29,.08); }
.club-logo img { filter: brightness(0); opacity: .85; }
.brand-input, .seg, .stepper, .campaign .mail-panel { background: #ffffff; }
.pkg-card.is-on { background: #E9FAF0; }
.is-scrolled .nav { background: rgba(255,255,255,.86); border-color: rgba(16, 37, 29,.10); box-shadow: 0 12px 32px rgba(16, 37, 29,.12); }
.mbar { background: rgba(255,255,255,.9); }
/* lime text needs a darker shade to read on white; lime fills stay */
.eyebrow, .label, .ctl-label, .belt-label, .point-num, .step-num, .num, .fn a, .text-link, .faq summary svg, .arrow-link svg { color: #1F7A57; }
.faq summary svg { stroke: #1F7A57; }
.nav-links a { color: rgba(16, 37, 29,.72); }
.nav-links a:hover, .nav-links a[aria-current='true'] { color: #0B1A14; }
.logo-drop:hover, .logo-drop:focus-within { color: #0B1A14; }
.hero-lines { color: rgba(16, 37, 29,.07); }
.net-lines { color: rgba(16, 37, 29,.05); }
.icon-btn { color: #0B1A14; border-color: rgba(16, 37, 29,.25); }
.icon-btn:hover { background: var(--lime); border-color: var(--lime); }
.faq-aside a, .text-link { color: #1F7A57; }

@media (min-width: 1024px) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.step:nth-child(4)::before, .step:nth-child(4)::after { display: block; }
.step:nth-child(5)::before, .step:nth-child(5)::after { display: none; }
.step::before { background: rgba(16, 37, 29,.12); }
[hidden]{display:none !important}

/* ===== SPACING SYSTEM: one rhythm everywhere =====
   section padding: --sec-y (64 mobile / 128 desktop), top and bottom, every section
   heading -> content: --head-gap (32 mobile / 48 desktop)
   block -> block inside a section: --block-gap (32 mobile / 48 desktop) */
:root { --head-gap: var(--s6); --block-gap: var(--s6); }
@media (min-width: 1024px) { :root { --head-gap: var(--s7); --block-gap: var(--s7); } }
.section, .close { padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; }
.sec-head, .studio-head { margin-bottom: var(--head-gap) !important; }
.points { margin-top: var(--head-gap) !important; }
.steps { margin-top: var(--head-gap) !important; }
.bridge { margin-top: var(--block-gap); padding-top: var(--block-gap); }
.campaign { margin-top: var(--s5); }
.pkg-fine { margin-top: var(--s4); }
.faq-grid, .close-grid { gap: var(--head-gap) !important; row-gap: var(--head-gap) !important; }
.hero-row { margin-top: var(--head-gap); }
.belt { padding-bottom: var(--s6) !important; }

/* tighter rhythm (desktop 96 between sections; hero hugs its content) */
@media (min-width: 1024px) {
  :root { --sec-y: var(--s9); }
  .hero { min-height: 0 !important; }
  .hero-inner { flex: none; padding-top: var(--s7) !important; padding-bottom: var(--s7) !important; }
}


/* ===== BRAND v3 (locked 14 Oct 2026): deep green + mint, Familjen Grotesk, 07 Venue Grid logo ===== */
:root {
  --bg: #FFFFFF; --surface: #F3F6F4; --raised: #EEF3F0;
  --line: #DCE5E0; --line-strong: #BFCDC6;
  --text: #10251D; --text-2: #3A4B43; --muted: #5D6E66;
  --ink: #0F3D2E; --heading: #0F3D2E; --deep: #0F3D2E;
  --lime: #7BF1A8; --lime-hi: #95F5BA; --accent-text: #1F7A57; --accent-tint: #E9FAF0;
  --f-label: 'Familjen Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Familjen Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html, body { background: #FFFFFF; color: var(--text); }
body, input, button, select, textarea { font-family: var(--f-body); }
h1, h2, h3, .h2, .hero-title, .close-title, .pkg-name, .bridge, .faq-head h2 { color: var(--heading); }
.marker { color: var(--deep); }
/* primary action = deep green; mint is the highlight */
.btn-lime { background: var(--deep); color: #FFFFFF; }
.btn-lime:hover { background: #0B3326; }
.btn-ink { background: var(--deep); color: var(--lime); }
.eyebrow, .label, .ctl-label, .belt-label, .point-num, .step-num, .num, .fn a, .text-link, .faq summary svg, .arrow-link svg, .faq-aside a { color: var(--accent-text); }
.icon-btn { color: var(--deep); border-color: rgba(15,61,46,.28); }
.icon-btn:hover { background: var(--lime); border-color: var(--lime); color: var(--deep); }
.nav-links a { color: rgba(16,37,29,.72); }
.nav-links a:hover, .nav-links a[aria-current='true'] { color: var(--heading); }
.nav-links a::after { background: var(--accent-text); }
:focus-visible { outline-color: var(--accent-text); }
/* wordmark = the 07 Venue Grid lockup */
.wordmark { gap: 0; }
.wordmark-logo { display: block; height: 40px; width: auto; }
.wordmark-lg .wordmark-logo { height: 52px; }
@media (max-width: 599px) { .wordmark-logo { height: 34px; } }
/* closing band: deep green with mint */
.close { background: var(--deep); color: #FFFFFF; }
.close .close-title, .close h2 { color: #FFFFFF; }
.close .marker { background: var(--lime); color: var(--deep); }
.close-eyebrow, .close .cr-label { color: #C9E9D8; }
.close p, .close a, .close .cr-value { color: #FFFFFF; }
.close .btn-lime { background: var(--lime); color: var(--deep); }
.close .btn-lime:hover { background: var(--lime-hi); }
.close .btn-ink, .close .btn-ink-ghost, .close .btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,.4); }
.close .contact-rows, .close .contact-rows li { border-color: rgba(255,255,255,.18); }
.close .btn-ink { background: var(--lime) !important; color: var(--deep) !important; }
.close .btn-ink:hover { background: var(--lime-hi) !important; }
.num, .point-num, .step-num, .campaign-label, .courts-label, .text-link, .faq-aside a, .eyebrow, .label { color: var(--accent-text) !important; }
.close .close-eyebrow { color: #C9E9D8 !important; }

/* ===== match the advertiser deck: Familjen Grotesk bold, sentence case, no highlight blocks ===== */
h1, h2, h3, .h2, .hero-title, .close-title, .pkg-name, .bridge, .point-title, .faq-head h2, .faq summary {
  font-family: var(--f-body) !important; text-transform: none !important; letter-spacing: -0.025em !important;
}
.hero-title, .h2, .close-title, .pkg-name { font-weight: 700 !important; }
.hero-title { font-size: clamp(44px, 6.2vw, 88px) !important; line-height: 1.02 !important; }
.h2, .faq-head h2 { font-size: clamp(34px, 4vw, 56px) !important; line-height: 1.05 !important; }
.close-title { font-size: clamp(44px, 6vw, 84px) !important; line-height: 1.02 !important; }
.pkg-name { font-size: clamp(28px, 2.6vw, 38px) !important; }
.marker { background: none !important; color: var(--accent-text) !important; padding: 0 !important; box-shadow: none !important; }
.marker::before, .marker::after { display: none !important; }
.close .marker { color: var(--lime) !important; }
.club { font-family: var(--f-body) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.01em !important; }
.btn, .nav-links a, .chip, .seg-main, .pkg-choose, .pkg-tag { font-family: var(--f-body) !important; }
.pkg-card { border-radius: 16px; }
.pkg-card:not(.is-on) { background: var(--surface) !important; border-color: transparent !important; }
.pkg-card:not(.is-on) { background: #FFFFFF !important; border-color: var(--line) !important; }

/* Familjen Grotesk ships 400-700: cap heavier requests so nothing is faux-bolded */
.btn, .club, .nav-links a, .chip, .seg-main, .pkg-choose, .pkg-tag, strong, b { font-weight: 700 !important; }

/* =====================================================================
   COURTSIDE MEDIA NETWORK design system v3, LIGHT, as in the updated app.
   Source: design-system/tokens.css (colours, type scale, radii, controls).
   This layer is the source of truth for the public site from 16 Oct 2026.
   ===================================================================== */
:root {
  --bg: #F3F6F4; --surface: #FFFFFF; --surface-2: #F6F9F7; --surface-3: #EEF3F0;
  --line: #DCE5E0; --line-strong: #BFCDC6; --control-border: #7A8E84;
  --text: #10251D; --text-2: #3A4B43; --muted: #5D6E66; --heading: #0F3D2E;
  --deep: #0F3D2E; --action: #0F3D2E; --action-hover: #0B3326;
  --lime: #7BF1A8; --lime-hi: #6BE89A; --accent-text: #1F7A57; --accent-tint: #E9FAF0; --accent-line: #C6EED7;
  --r-card: 14px; --r-ctl: 10px; --h-ctl: 46px; --h-ctl-lg: 50px;
  --shadow-float: 0 1px 2px rgba(16,37,29,.06), 0 16px 40px rgba(16,37,29,.10);
}
html, body { background: var(--bg) !important; color: var(--text); font-family: var(--f-body); }
body { font-size: 17px; line-height: 1.5; font-weight: 400; }

/* sections sit on the page ground; content lives on white cards */
.hero, .studio, .network, .packages, .how, .faq, .site-footer, .belt { background: var(--bg) !important; border-top: 0 !important; }
.section + .section { border-top: 1px solid var(--line) !important; }

/* type scale (Familjen Grotesk 700, sentence case, heading green) */
.hero-title { font-size: clamp(40px, 5vw, 64px) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--heading) !important; }
.h2, .faq-head h2 { font-size: clamp(28px, 2.6vw, 34px) !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--heading) !important; }
.close-title { font-size: clamp(36px, 4.4vw, 52px) !important; line-height: 1.05 !important; }
.point-title, .pkg-name { font-size: 21px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--heading) !important; }
.bridge { font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
.hero-sub, .intro { font-size: 18px !important; line-height: 1.5 !important; color: var(--text-2) !important; font-weight: 400 !important; }
.point-line, .step-line, .pkg-line, .faq .ans p { font-size: 15px !important; line-height: 1.45 !important; color: var(--text-2) !important; }
.marker, .close .marker { color: inherit !important; }
.eyebrow, .label, .point-num, .step-num, .campaign-label, .courts-label, .ctl-label, .pkg-tag, .close-eyebrow, .cr-label {
  font-family: var(--f-body) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
.num { font-size: 30px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.fine, .help, .courts-help { font-size: 13px !important; color: var(--muted) !important; }

/* logo: the 07 Venue Grid horizontal lockup, app size */
.wordmark-logo { height: 46px !important; }
.wordmark-lg .wordmark-logo { height: 56px !important; }
@media (max-width: 599px) { .wordmark-logo { height: 38px !important; } }

/* buttons: app shape (10px radius), not pills */
.btn { border-radius: var(--r-ctl) !important; min-height: var(--h-ctl) !important; padding: 0 20px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important; box-shadow: none !important; }
.btn-lg { min-height: var(--h-ctl-lg) !important; padding: 0 22px !important; }
.btn-sm { min-height: 38px !important; padding: 0 14px !important; font-size: 14px !important; }
.btn-lime, .btn-ink { background: var(--action) !important; color: #FFFFFF !important; border: 1px solid var(--action) !important; }
.btn-lime:hover, .btn-ink:hover { background: var(--action-hover) !important; }
.btn-ink-ghost { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--control-border) !important; }
.btn-ink-ghost:hover { background: var(--surface-2) !important; }
.icon-btn { border-radius: var(--r-ctl) !important; width: var(--h-ctl) !important; height: var(--h-ctl) !important; background: var(--surface) !important; border: 1px solid var(--control-border) !important; color: var(--text) !important; }
.mini-btn, .text-btn { border-radius: 8px !important; }
.arrow-link { color: var(--heading) !important; font-weight: 700 !important; }

/* nav: white bar with a line, like the app shell */
.nav { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; }
.is-scrolled .nav { border-radius: var(--r-card) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-float) !important; background: rgba(255,255,255,.96) !important; }
.nav-links a { font-size: 15px !important; font-weight: 600 !important; color: var(--text) !important; }
.nav-links a[aria-current='true'] { color: var(--heading) !important; }

/* cards */
.studio-rail, .pkg-card, .campaign, .stage, .faq details, .step, .point {
  border-radius: var(--r-card) !important; }
.studio-rail, .campaign { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.pkg-card { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; padding: 28px !important; }
.pkg-card.is-on { background: var(--accent-tint) !important; border-color: var(--accent-text) !important; box-shadow: 0 0 0 1px var(--accent-text) !important; }
.pkg-tag { border-radius: 999px !important; background: var(--surface-3) !important; color: var(--text-2) !important; border: 0 !important; padding: 4px 10px !important; }
.pkg-card.is-on .pkg-tag { background: var(--lime) !important; color: var(--deep) !important; }
.pkg-choose { border-radius: var(--r-ctl) !important; }
.points { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; overflow: hidden; }
.faq-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 20px; }
.faq details { border-radius: 0 !important; }

/* club belt: white tiles with a line */
.club { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; height: 64px !important; font-size: 18px !important; font-weight: 600 !important; color: var(--text) !important; }
.club::after { background: var(--lime) !important; }

/* controls: inputs, segmented, chips */
.brand-input, .courts-input { border-radius: var(--r-ctl) !important; border: 1px solid var(--control-border) !important; background: var(--surface) !important; height: var(--h-ctl) !important; font-size: 15px !important; color: var(--text) !important; }
.logo-drop { border-radius: var(--r-ctl) !important; border: 1px dashed var(--control-border) !important; background: var(--surface) !important; }
.stepper { border-radius: var(--r-ctl) !important; border: 1px solid var(--control-border) !important; background: var(--surface) !important; height: var(--h-ctl) !important; }
.seg { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 4px !important; }
.seg-opt { border-radius: 8px !important; }
.seg-opt:has(input:checked) { background: var(--action) !important; color: #FFFFFF !important; }
.seg-opt:has(input:checked) .seg-sub { color: #C9E9D8 !important; }
.chips { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px !important; }
.chip { border-radius: 8px !important; border: 0 !important; background: transparent !important; color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; min-height: 38px !important; }
.chip[aria-selected='true'], .chip[aria-pressed='true'] { background: var(--action) !important; color: #FFFFFF !important; }
.brand2 { border-radius: 12px !important; border: 1px solid var(--line) !important; }

/* closing band on deep green, app "on-deep" tokens */
.close { background: var(--deep) !important; }
.close .btn-ink { background: var(--lime) !important; color: var(--deep) !important; border-color: var(--lime) !important; }
.close .btn-ink:hover { background: var(--lime-hi) !important; }
.close .btn-ink-ghost { background: transparent !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.5) !important; }

/* how it works line + nodes in brand green */
.step::before { background: var(--line) !important; } .step::after { background: var(--accent-text) !important; }
.steps.is-run .node { background: var(--accent-text) !important; border-color: var(--accent-text) !important; }
.step, .point { border-radius: 0 !important; }
.foot-links a, .foot-contact a, .foot-links li, .foot-bar, .foot-bar p, .to-top, .tray-label { font-family: var(--f-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--text) !important; }
.foot-bar p, .to-top, .tray-label { font-size: 13px !important; font-weight: 400 !important; color: var(--muted) !important; }
.stepper .courts-input { border: 0 !important; height: auto !important; background: transparent !important; }

/* ===== deck-flow sections (16 Oct 2026) ===== */
.why, .solve, .book, .aud, .compare { background: var(--bg) !important; }
.label.on-deep { color: #C9E9D8 !important; }
.stat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 20px; display: grid; gap: 4px; }
.stat-card strong { font-size: clamp(36px, 3.6vw, 48px); line-height: 1; font-weight: 700; color: var(--heading); letter-spacing: -0.02em; margin-bottom: 10px; }
.stat-card span { font-size: 17px; font-weight: 700; color: var(--text); }
.stat-card small { font-size: 14px; color: var(--muted); }

.solve-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .solve-grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } }
.prob-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prob-list li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.prob-list b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--deep); color: var(--lime); font-size: 15px; }
.prob-list h3 { margin: 4px 0 4px; font-size: 19px; font-weight: 700; color: var(--heading); }
.prob-list p { margin: 0; font-size: 15px; color: var(--text-2); }
.sol-card { background: var(--deep); color: #fff; border-radius: var(--r-card); padding: 28px; display: grid; align-content: start; gap: 14px; }
.sol-card h3 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.4; }
.ck { width: 22px; height: 22px; margin-top: 1px; }
.ck rect { fill: var(--accent-tint); } .ck path { stroke: var(--accent-text); }
.sol-card .ck rect { fill: var(--lime); } .sol-card .ck path { stroke: var(--deep); }
.sol-card .checks li { color: #fff; }

.book-grid { display: grid; gap: 16px; }
@media (min-width: 1000px) { .book-grid { grid-template-columns: 1fr 2fr; gap: 24px; } }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.tiers li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; }
.star { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--deep); color: var(--lime); font-weight: 700; font-size: 17px; }
.tiers h3 { margin: 0 0 2px; font-size: 19px; font-weight: 700; color: var(--heading); }
.tiers p { margin: 0; font-size: 15px; color: var(--text-2); }
.formats { display: grid; gap: 16px; }
@media (min-width: 640px) { .formats { grid-template-columns: 1fr 1fr; } }
.fmt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 12px 20px; display: grid; gap: 8px; align-content: start; }
.fmt img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 8px; }
.fmt h3 { margin: 0 8px; font-size: 21px; font-weight: 700; color: var(--heading); }
.fmt p { margin: 0 8px; font-size: 15px; color: var(--text-2); }
.tag { justify-self: start; margin: 6px 8px 0; font-size: 13px; font-weight: 600; color: var(--accent-text); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 999px; padding: 4px 10px; }
.book-fine { margin-top: 20px !important; }

.aud-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .aud-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; } }
.aud-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 16px; align-content: start; }
.pill { justify-self: start; font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 10px; }
.pill-b { background: var(--deep); color: var(--lime); } .pill-p { background: #2F6B52; color: #fff; } .pill-s { background: var(--surface-3); color: var(--heading); }
.sub-h { margin: 48px 0 16px; font-size: 21px; font-weight: 700; color: var(--heading); }
.times { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .times { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } }
.times li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.times h4 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--heading); }
.times p { margin: 0; font-size: 15px; color: var(--text-2); }
.aud-facts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.aud-facts li { display: grid; gap: 2px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--r-card); padding: 14px 18px; }
.aud-facts strong { font-size: 19px; color: var(--heading); } .aud-facts span { font-size: 14px; color: var(--text-2); }

.cmp-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.cmp th, .cmp td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cmp thead th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.cmp tbody th { font-weight: 600; color: var(--text); }
.cmp td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.cmp tr.us th, .cmp tr.us td { background: var(--deep); color: #fff; font-weight: 700; border-bottom: 0; }
.cmp tr.us td:nth-child(2) { color: var(--lime); }
.how-cta { margin: 40px 0 0; }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.step:nth-child(4)::before, .step:nth-child(4)::after { display: none !important; }
.h2, .sec-head .h2 { max-width: 24ch !important; }
@media (min-width: 1024px) { .studio-grid { align-items: start !important; } .studio-stage-col { position: sticky; top: 96px; } #studio-stage { aspect-ratio: 16 / 10 !important; height: auto !important; } }

/* ============================================================ WOW layer (16 Oct): cinematic hero, big numbers, deep sections */
.hero{position:relative !important;min-height:min(100svh,980px) !important;display:flex !important;flex-direction:column !important;justify-content:flex-end !important;background:#0B2C21 !important;color:#fff !important;overflow:hidden !important;padding-top:140px !important;isolation:isolate !important}
.hero-media{position:absolute !important;inset:0 !important;z-index:-2 !important}
.hero-media img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:12% 40% !important;transform:scale(1.08);animation:heroZoom 18s ease-out forwards !important;will-change:transform !important}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-shade{position:absolute !important;inset:0 !important;z-index:-1 !important;background:
  linear-gradient(90deg,rgba(11,44,33,.96) 0%,rgba(11,44,33,.82) 34%,rgba(11,44,33,.25) 62%,rgba(11,44,33,0) 80%),
  linear-gradient(0deg,#0B2C21 0%,rgba(11,44,33,.0) 38%),
  radial-gradient(60% 50% at 70% 35%,rgba(123,241,168,.18),transparent 70%) !important}
.hero .hero-inner{position:relative !important;padding-bottom:56px !important}
.hero-kicker{align-self:flex-start !important;display:inline-flex !important;align-items:center !important;gap:10px !important;font-size:12px !important;font-weight:600 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:#7BF1A8 !important;margin:0 0 22px !important;padding:8px 14px !important;border:1px solid rgba(123,241,168,.35) !important;border-radius:999px !important;background:rgba(15,61,46,.5) !important;backdrop-filter:blur(8px) !important}
.hero-kicker .dot{width:7px !important;height:7px !important;border-radius:50% !important;background:#7BF1A8 !important;box-shadow:0 0 0 0 rgba(123,241,168,.6) !important;animation:pulse 2s infinite !important}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(123,241,168,0)}100%{box-shadow:0 0 0 0 rgba(123,241,168,0)}}
.hero .hero-title{color:#fff !important;font-size:clamp(48px,8.6vw,124px) !important;line-height:.94 !important;letter-spacing:-.035em !important;max-width:11ch !important;margin:0 !important}
.hero .hero-title .marker{color:#7BF1A8 !important;background:none !important}
.hero .hero-row{margin-top:28px !important;display:flex !important;flex-wrap:wrap !important;align-items:flex-end !important;gap:24px 48px !important}
.hero .hero-sub{color:rgba(255,255,255,.78) !important;font-size:clamp(16px,1.4vw,19px) !important;max-width:44ch !important;margin:0 !important}
.hero .btn-lime{background:#7BF1A8 !important;color:#0F3D2E !important;border-color:#7BF1A8 !important;box-shadow:0 10px 40px -10px rgba(123,241,168,.6) !important}
.hero .btn-lime:hover{background:#fff !important;border-color:#fff !important}
.hero .arrow-link{color:#fff !important}
.hero-chips{list-style:none !important;display:flex !important;gap:10px !important;flex-wrap:wrap !important;padding:0 !important;margin:40px 0 0 !important}
.hero-chips li{display:flex !important;align-items:baseline !important;gap:8px !important;padding:12px 18px !important;border-radius:14px !important;background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.14) !important;backdrop-filter:blur(12px) !important;color:rgba(255,255,255,.75) !important;font-size:14px !important}
.hero-chips b{font-size:26px !important;font-weight:700 !important;color:#fff !important;letter-spacing:-.02em !important}
.hero-tag{position:absolute !important;right:max(16px,3vw) !important;bottom:64px !important;font-size:11px !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:rgba(255,255,255,.6) !important}
.hero .belt{position:relative !important;background:#F3F6F4 !important;padding:22px 0 !important;margin:0 !important}
@media (max-width:760px){.hero{padding-top:110px !important;min-height:auto !important}.hero-media img{object-position:62% 30% !important}
 .hero-shade{background:linear-gradient(0deg,#0B2C21 30%,rgba(11,44,33,.55) 70%,rgba(11,44,33,.2)) !important}
 .hero .hero-inner{padding-top:34vh !important}.hero-tag{bottom:auto !important;top:96px !important}}

/* big numbers */
.why .stat-grid{gap:0 !important;border-top:1px solid rgba(15,61,46,.14) !important}
.why .stat-card{background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:34px 24px 10px 0 !important;border-right:1px solid rgba(15,61,46,.12) !important}
.why .stat-card:last-child{border-right:0 !important}
.why .stat-card strong{display:block !important;font-size:clamp(56px,7vw,104px) !important;line-height:.9 !important;letter-spacing:-.045em !important;color:#0F3D2E !important;font-variant-numeric:tabular-nums !important}
.why .stat-card strong::after{content:"" !important;display:block !important;width:44px !important;height:6px !important;border-radius:3px !important;background:#7BF1A8 !important;margin:18px 0 14px !important}
@media (max-width:760px){.why .stat-card{border-right:0 !important;border-bottom:1px solid rgba(15,61,46,.12) !important;padding:24px 0 !important}}
.why .h2,.solve .h2{font-size:clamp(34px,4.6vw,60px) !important;max-width:18ch !important;letter-spacing:-.03em !important;line-height:1 !important}

/* deep sections */
.section.deep,.close.deep{background:#0F3D2E !important;color:#fff !important;position:relative !important;overflow:hidden !important}
.section.deep::before,.close.deep::before{content:"" !important;position:absolute !important;inset:-20% -10% auto auto !important;width:70vw !important;height:70vw !important;background:radial-gradient(closest-side,rgba(123,241,168,.16),transparent) !important;pointer-events:none !important}
.deep .h2{color:#fff !important;font-size:clamp(36px,5vw,68px) !important;letter-spacing:-.035em !important;line-height:.98 !important;max-width:16ch !important}
.deep .label{color:#7BF1A8 !important}
.deep .tiers li{background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.12) !important;color:#fff !important;transition:transform .3s,border-color .3s,background .3s !important}
.deep .tiers li:hover{transform:translateX(6px) !important;border-color:#7BF1A8 !important;background:rgba(123,241,168,.08) !important}
.deep .tiers h3{color:#fff !important}.deep .tiers p,.deep .fine{color:rgba(255,255,255,.65) !important}
.deep .star{background:#7BF1A8 !important;color:#0F3D2E !important}
.deep .fmt{background:#fff !important;color:#0F3D2E !important;overflow:hidden !important;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s !important}
.deep .fmt:hover{transform:translateY(-8px) !important;box-shadow:0 30px 60px -20px rgba(0,0,0,.5) !important}
.fmt img{transition:transform .8s cubic-bezier(.2,.7,.2,1) !important}.fmt:hover img{transform:scale(1.05) !important}
.close.deep .close-title{color:#fff !important;font-size:clamp(52px,8vw,120px) !important;line-height:.92 !important;letter-spacing:-.04em !important}
.close.deep .close-title .line:last-child{color:#7BF1A8 !important}
.close.deep .close-eyebrow{color:#7BF1A8 !important}.close.deep .close-sub,.close.deep .cr-label{color:rgba(255,255,255,.7) !important}
.close.deep .cr-val,.close.deep a{color:#fff !important}
.close.deep .contact-rows li{border-color:rgba(255,255,255,.14) !important}
.close.deep .btn-ink{background:#7BF1A8 !important;color:#0F3D2E !important;border-color:#7BF1A8 !important}
.close.deep .btn-ink-ghost{color:#fff !important;border-color:rgba(255,255,255,.35) !important;background:transparent !important}
.sol-card{box-shadow:0 40px 80px -30px rgba(15,61,46,.55) !important}

/* scroll reveals */
.wow-rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1) !important;transition-delay:var(--d,0s) !important}
.wow-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.wow-rv{opacity:1 !important;transform:none !important;transition:none !important}.hero-media img{animation:none !important;transform:none !important}}
@media (max-width:760px){.hero-media{bottom:auto !important;height:52vh !important}.hero-media img{object-position:50% 78% !important}
 .hero-shade{background:linear-gradient(0deg,#0B2C21 50%,rgba(11,44,33,.35) 72%,rgba(11,44,33,0) 90%) !important}
 .hero .hero-inner{padding-top:30vh !important}.hero-tag{top:auto !important;bottom:auto !important;display:none !important}}

/* hero v2: network of courts (replaces render) */
.hero{background:radial-gradient(90% 80% at 75% 40%,#145040 0%,#0F3D2E 45%,#0A2A20 100%) !important}
.hero-net{perspective:1400px;overflow:hidden}
.net-plane{position:absolute;left:38%;top:50%;width:1300px;display:grid;grid-template-columns:repeat(13,1fr);gap:14px;transform:translate(-20%,-50%) rotateX(56deg) rotateZ(-32deg);transform-style:preserve-3d}
.net-plane i{display:block;aspect-ratio:1/2;border-radius:6px;border:1.5px solid rgba(123,241,168,.22);background:
 linear-gradient(transparent calc(50% - .75px),rgba(123,241,168,.28) calc(50% - .75px),rgba(123,241,168,.28) calc(50% + .75px),transparent calc(50% + .75px)),
 linear-gradient(90deg,transparent calc(50% - .5px),rgba(123,241,168,.14) calc(50% - .5px),rgba(123,241,168,.14) calc(50% + .5px),transparent calc(50% + .5px)) 0 30%/100% 40% no-repeat,
 rgba(255,255,255,.02);transition:background-color .6s,border-color .6s,box-shadow .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.net-plane i.on{background-color:rgba(123,241,168,.9);border-color:#7BF1A8;box-shadow:0 0 30px rgba(123,241,168,.55),0 0 0 6px rgba(123,241,168,.08);transform:translateZ(18px)}
.hero-shade{background:linear-gradient(90deg,rgba(10,42,32,.95) 0%,rgba(10,42,32,.75) 32%,rgba(10,42,32,0) 62%),linear-gradient(0deg,#0A2A20 0%,transparent 30%) !important}
.hero-tag{display:inline-flex !important;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);color:#fff !important;font-size:12px !important;transition:opacity .4s}
.hero-tag i{width:8px;height:8px;border-radius:50%;background:#7BF1A8;box-shadow:0 0 10px #7BF1A8}
@media (max-width:760px){.hero-media{height:56vh !important}.net-plane{left:50%;width:900px;gap:10px;transform:translate(-50%,-50%) rotateX(56deg) rotateZ(-32deg)}
 .hero-shade{background:linear-gradient(0deg,#0A2A20 46%,rgba(10,42,32,.3) 70%,rgba(10,42,32,0)) !important}
 .hero-tag{display:inline-flex !important;position:absolute;top:96px !important;left:16px;right:auto;bottom:auto !important}}

/* hero v3: real padel court tiles */
.net-plane i{position:relative;border:0 !important;border-radius:0 !important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20-4%20108%20208%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22200%22%20rx%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.025%29%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.30%29%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M0%2030.5H100M0%20169.5H100M50%2030.5V169.5%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.30%29%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-2%20-1H102M-2%20201H102M-1%20-2V40M101%20-2V40M-1%20160V202M101%20160V202%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.45%29%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-3%20100H103%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.55%29%22%20stroke-width%3D%223.5%22/%3E%3Ccircle%20cx%3D%22-3%22%20cy%3D%22100%22%20r%3D%223.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.55%29%22/%3E%3Ccircle%20cx%3D%22103%22%20cy%3D%22100%22%20r%3D%223.2%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.55%29%22/%3E%3C/svg%3E") center/100% 100% no-repeat !important;box-shadow:none !important}
.net-plane i::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20-4%20108%20208%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22200%22%20rx%3D%222%22%20fill%3D%22%237BF1A8%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%222.2%22/%3E%3Cpath%20d%3D%22M0%2030.5H100M0%20169.5H100M50%2030.5V169.5%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%222.2%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-2%20-1H102M-2%20201H102M-1%20-2V40M101%20-2V40M-1%20160V202M101%20160V202%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-3%20100H103%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%223.5%22/%3E%3Ccircle%20cx%3D%22-3%22%20cy%3D%22100%22%20r%3D%223.2%22%20fill%3D%22%230F3D2E%22/%3E%3Ccircle%20cx%3D%22103%22%20cy%3D%22100%22%20r%3D%223.2%22%20fill%3D%22%230F3D2E%22/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:0;transition:opacity .6s}
.net-plane i.on{background-color:transparent !important;box-shadow:none !important;filter:drop-shadow(0 0 18px rgba(123,241,168,.55))}
.net-plane i.on::after{opacity:1}

.net-plane{width:2300px !important;gap:8px !important;grid-template-columns:repeat(40,1fr) !important}
@media (max-width:760px){.net-plane{width:1500px !important;gap:5px !important}}

.net-plane{transform:translate(-20%,-50%) rotateX(44deg) rotateZ(-24deg) !important}
@media (max-width:760px){.net-plane{transform:translate(-50%,-50%) rotateX(44deg) rotateZ(-24deg) !important}}
.hero-net{perspective:2200px !important}
.net-plane{transform:translate(-22%,-50%) rotateX(44deg) rotateZ(-24deg) scale(.66) !important}
@media (max-width:760px){.net-plane{transform:translate(-50%,-50%) rotateX(44deg) rotateZ(-24deg) scale(.62) !important}}

.net-plane i.soft:not(.on)::after{opacity:.16}
.net-plane{transform:translate(-22%,-50%) rotateX(40deg) rotateZ(-20deg) scale(.64) !important}
@media (max-width:760px){.net-plane{transform:translate(-50%,-50%) rotateX(40deg) rotateZ(-20deg) scale(.56) !important}}
@media (max-width:760px){.hero-tag{top:auto !important;bottom:auto !important;position:relative !important;left:0;margin-top:22px}}
/* logo-true view: no side rotation so the 4x4 reads square, like the mark */
.net-plane{transform:translate(-22%,-50%) rotateX(32deg) scale(.6) !important}
@media (max-width:760px){.net-plane{transform:translate(-50%,-50%) rotateX(32deg) scale(.5) !important}}
.net-plane i.soft:not(.on)::after{opacity:.3 !important}

/* ===== hero v4: two clean columns, crisp court field ===== */
.hero{justify-content:center !important;min-height:min(100svh,900px) !important;padding-top:120px !important}
.hero .hero-inner{padding-bottom:72px !important}
.hero .hero-inner > *{max-width:560px}
.hero .hero-title{font-size:clamp(48px,6.6vw,104px) !important}
.hero .hero-row{flex-direction:column !important;align-items:flex-start !important;gap:30px !important;margin-top:26px !important}
.hero .hero-ctas{display:flex;align-items:center;gap:22px}
.hero-chips{margin-top:44px !important}
.hero-net{left:40% !important;right:0 !important;bottom:0 !important;height:auto !important;perspective:1600px !important;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 52% 48%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse 60% 62% at 52% 48%,#000 35%,transparent 78%)}
.hero-shade{background:linear-gradient(0deg,#0A2A20 0%,transparent 22%) !important}
.net-plane{left:50% !important;width:1820px !important;gap:12px !important;grid-template-columns:repeat(28,1fr) !important;transform:translate(-50%,-50%) rotateX(var(--tilt,52deg)) scale(1.5) !important}
.net-plane i{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20-4%20108%20208%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22200%22%20rx%3D%223%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.03%29%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.22%29%22%20stroke-width%3D%222.5%22/%3E%3Cpath%20d%3D%22M0%2030.5H100M0%20169.5H100M50%2030.5V169.5%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.22%29%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-1%20-1H101M-1%20201H101%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.35%29%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-3%20100H103%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.35%29%22%20stroke-width%3D%224%22/%3E%3C/svg%3E") center/100% 100% no-repeat !important}
.net-plane i::after{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20-4%20108%20208%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22200%22%20rx%3D%223%22%20fill%3D%22%237BF1A8%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M0%2030.5H100M0%20169.5H100M50%2030.5V169.5%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%223%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-1%20-1H101M-1%20201H101%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-3%20100H103%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%224%22/%3E%3C/svg%3E") center/100% 100% no-repeat !important}
.net-plane i.on{filter:drop-shadow(0 0 14px rgba(123,241,168,.7)) !important}
.hero-tag{right:auto !important;left:calc(40% + 40px) !important;bottom:56px !important}
@media (max-width:980px){.hero-net{left:30% !important}}
@media (max-width:760px){
 .hero-net{left:0 !important;height:52vh !important;bottom:auto !important;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 40%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 40%,transparent 80%)}
 .net-plane{width:1100px !important;gap:8px !important;transform:translate(-50%,-50%) rotateX(var(--tilt,52deg)) scale(1.15) !important}
 .hero .hero-inner{padding-top:40vh !important}
 .hero-tag{left:16px !important}
 .hero .hero-ctas{flex-direction:column;align-items:stretch;width:100%}}


/* ===== hero v6: logomark drawn with the field's own courts ===== */
/* the two courts of a square fuse into one rounded tile: close the inner gap, round the outer corners */
.net-plane i.lg::before{content:"";position:absolute;top:0;bottom:0;background:transparent no-repeat;opacity:0;
  transition:opacity .4s ease,transform .55s cubic-bezier(.2,.9,.25,1.25),background-color .4s;transform:scale(.82)}
.net-plane{--g:12px}
.net-plane i.lg{--bw:100%;--bh:100%}
.net-plane i.lg-er{--bw:calc(100% - var(--g))}
.net-plane i.lg-ed{--bh:calc(100% - var(--g))}
.net-plane i.lg::before{left:0;top:0;right:0;bottom:0;background-position:left top;background-size:var(--bw) var(--bh);border-radius:var(--rtl,0) var(--rtr,0) var(--rbr,0) var(--rbl,0)}
.net-plane i.lg-er::before{right:calc(var(--g)*-1)}
.net-plane i.lg-ed::before{bottom:calc(var(--g)*-1)}
.net-plane i.lg-tl{--rtl:16px}.net-plane i.lg-tr{--rtr:16px}.net-plane i.lg-bl{--rbl:16px}.net-plane i.lg-br{--rbr:16px}
.net-plane i.lg-on::before{opacity:1;transform:none;background-color:#7BF1A8;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20-4%20108%20208%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22200%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M0%2030.5H100M0%20169.5H100M50%2030.5V169.5%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%223%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-3%20100H103%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%224.800000000000001%22/%3E%3C/svg%3E");box-shadow:0 0 28px rgba(123,241,168,.45)}
.net-plane i.lg-soft::before{opacity:1;transform:none;background-color:rgba(123,241,168,.28);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20-4%20108%20208%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22200%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.6%29%22%20stroke-width%3D%222.5%22/%3E%3Cpath%20d%3D%22M0%2030.5H100M0%20169.5H100M50%2030.5V169.5%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.6%29%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M-3%20100H103%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.6%29%22%20stroke-width%3D%224.0%22/%3E%3C/svg%3E")}


@media (max-width:760px){.net-plane{--g:8px}}
@media (prefers-reduced-motion:reduce){.net-plane i.lg::before{transition:none}}
.net-plane i.lg-on,.net-plane i.lg-soft{background:none !important}
.hero-net{perspective:2400px !important}

/* ===== hero type on the LOCKED green system (14 Oct reference, as rebuilt in the app): Familjen Grotesk only ===== */
.hero .hero-kicker{font-size:12px !important;line-height:1.45 !important;font-weight:600 !important;letter-spacing:.12em !important;padding:6px 12px !important;margin:0 0 24px !important}
/* page title style (Familjen 700, 1.1, -0.02em) scaled for the marketing hero */
.hero .hero-title{font-family:"Familjen Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important;font-weight:700 !important;
  font-size:clamp(40px,5.6vw,80px) !important;line-height:1.05 !important;letter-spacing:-.02em !important;max-width:12ch !important}
.hero .hero-sub{font-size:18px !important;line-height:1.45 !important;font-weight:400 !important;max-width:40ch !important;color:rgba(234,243,238,.78) !important}
.hero .hero-row{margin-top:24px !important;gap:32px !important}
/* controls as measured in the app: 46px, 0 20px, 15/700, r10 */
.hero .btn-lg{min-height:46px !important;padding:0 20px !important;border-radius:10px !important;font-size:15px !important;font-weight:700 !important}
.hero .arrow-link{font-size:15px !important;font-weight:700 !important}
/* chips: number 24/700 tabular + meta 13 */
.hero-chips{gap:8px !important;margin-top:40px !important}
.hero-chips li{padding:10px 16px !important;border-radius:12px !important;font-size:13px !important;line-height:1.45 !important;gap:8px !important}
.hero-chips b{font-size:24px !important;line-height:1.15 !important;font-weight:700 !important;letter-spacing:0 !important;font-variant-numeric:tabular-nums}
.hero-tag{font-size:12px !important;font-weight:600 !important;letter-spacing:.12em !important}
@media (max-width:760px){.hero .hero-title{font-size:40px !important}.hero .hero-sub{font-size:16px !important}}
.net-plane i.lg-tl{--rtl:8px}.net-plane i.lg-tr{--rtr:8px}.net-plane i.lg-bl{--rbl:8px}.net-plane i.lg-br{--rbr:8px}

/* ===== hero v7: isometric logomark, 16 courts ===== */
.hero-net{left:42% !important;right:0 !important;top:0 !important;bottom:0 !important;height:auto !important;perspective:none !important;-webkit-mask-image:none !important;mask-image:none !important;overflow:visible !important}
.net-plane{--t:clamp(78px,7.6vw,118px);position:absolute !important;left:50% !important;top:50% !important;width:auto !important;margin:0 !important;
  display:grid !important;grid-template-columns:repeat(4,var(--t)) !important;gap:calc(var(--t)*.12) !important;
  transform:translate(-50%,-46%) rotateX(48deg) rotateZ(-14deg) !important;transform-style:preserve-3d}
.net-plane i{width:var(--t);height:var(--t);aspect-ratio:auto !important;position:relative;border:0 !important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2298%22%20height%3D%2298%22%20rx%3D%2216%22%20fill%3D%22rgba%28123%2C241%2C168%2C0.05%29%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.28%29%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%2228%22%20y%3D%226%22%20width%3D%2244%22%20height%3D%2288%22%20rx%3D%221.5%22%20fill%3D%22none%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.45%29%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M28%2019.4H72M28%2080.6H72M50%2019.4V80.6%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.45%29%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M28%206H72M28%2094H72M28%206V20M72%206V20M28%2094V80M72%2094V80%22%20stroke%3D%22rgba%28123%2C241%2C168%2C0.7%29%22%20stroke-width%3D%223.08%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M24%2050H76%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.7%29%22%20stroke-width%3D%222.52%22/%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2250%22%20r%3D%221.9599999999999997%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.7%29%22/%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%2250%22%20r%3D%221.9599999999999997%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.7%29%22/%3E%3C/svg%3E") center/100% 100% no-repeat !important;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.9,.25,1.2),filter .5s}
.net-plane i::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2298%22%20height%3D%2298%22%20rx%3D%2216%22%20fill%3D%22%237BF1A8%22%20stroke%3D%22%237BF1A8%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%2228%22%20y%3D%226%22%20width%3D%2244%22%20height%3D%2288%22%20rx%3D%221.5%22%20fill%3D%22none%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%221.8%22/%3E%3Cpath%20d%3D%22M28%2019.4H72M28%2080.6H72M50%2019.4V80.6%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M28%206H72M28%2094H72M28%206V20M72%206V20M28%2094V80M72%2094V80%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.9600000000000004%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M24%2050H76%22%20stroke%3D%22%230F3D2E%22%20stroke-width%3D%223.24%22/%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2250%22%20r%3D%222.52%22%20fill%3D%22%230F3D2E%22/%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%2250%22%20r%3D%222.52%22%20fill%3D%22%230F3D2E%22/%3E%3C/svg%3E") center/100% 100% no-repeat !important;opacity:0;transition:opacity .35s}
.net-plane i::before{content:"";position:absolute;inset:6%;border-radius:18%;background:rgba(0,0,0,.45);filter:blur(10px);opacity:0;transform:translateZ(-1px);transition:opacity .5s}
.net-plane i.on{transform:translateZ(22px);filter:drop-shadow(0 0 18px rgba(123,241,168,.55)) !important}
.net-plane i.on::after{opacity:1}
.net-plane i.on::before{opacity:1;transform:translateZ(-22px)}
.hero-tag{left:calc(42% + 40px) !important}
@media (max-width:980px){.hero-net{left:34% !important}}
@media (max-width:760px){.hero-net{left:0 !important;height:50vh !important;bottom:auto !important}.net-plane{--t:62px}}

/* ===== 3D courts ===== */
.net-plane i{--h:calc(var(--t)*.17);--th:calc(var(--t)*.07)}
.net-plane i.on{filter:none !important}
.net-plane i.on::after{box-shadow:0 0 34px rgba(123,241,168,.5);border-radius:16%}
.net-plane i b{position:absolute;display:block;transform-style:preserve-3d;transition:background-color .35s,border-color .35s,opacity .35s;pointer-events:none}
/* slab thickness (front and right edges hang below the plot) */
.net-plane i .edge-s{left:8%;right:8%;top:100%;height:var(--th);transform-origin:top;transform:rotateX(-90deg);background:rgba(10,42,32,.9);border-top:1px solid rgba(123,241,168,.25)}
.net-plane i .edge-e{top:8%;bottom:8%;left:100%;width:var(--th);transform-origin:left;transform:rotateY(90deg);background:rgba(6,30,22,.95)}
.net-plane i.on .edge-s{background:#3FBF7A}
.net-plane i.on .edge-e{background:#2C9A60}
/* glass end walls stand up from the baselines */
.net-plane i .wall{left:28%;width:44%;height:var(--h);transform-origin:top;transform:rotateX(90deg);
  background:rgba(123,241,168,.08);border:1px solid rgba(123,241,168,.45);border-bottom:0}
.net-plane i .wall-n{top:6%}
.net-plane i .wall-s{top:94%}
/* side glass returns at each corner */
.net-plane i .side{width:var(--h);height:14%;transform-origin:left;transform:rotateY(-90deg);
  background:rgba(123,241,168,.06);border:1px solid rgba(123,241,168,.4);border-left:0}
.net-plane i .side-nw{left:28%;top:6%}.net-plane i .side-ne{left:72%;top:6%}
.net-plane i .side-sw{left:28%;top:80%}.net-plane i .side-se{left:72%;top:80%}
/* the net */
.net-plane i .net{left:24%;width:52%;top:50%;height:calc(var(--h)*.42);transform-origin:top;transform:rotateX(90deg);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 4px);border-top:2px solid rgba(255,255,255,.75)}
.net-plane i.on .wall,.net-plane i.on .side{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.9)}
.net-plane i.on .net{background:repeating-linear-gradient(90deg,rgba(15,61,46,.55) 0 1px,transparent 1px 4px);border-top-color:#0F3D2E}
.net-plane i{--h:calc(var(--t)*.3);--th:calc(var(--t)*.1)}
.net-plane i .wall{background:linear-gradient(rgba(123,241,168,.22),rgba(123,241,168,.06));border-color:rgba(123,241,168,.7)}
.net-plane i .side{background:linear-gradient(90deg,rgba(123,241,168,.2),rgba(123,241,168,.05));border-color:rgba(123,241,168,.6)}
.net-plane i.on .wall{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.18))}
.net-plane i.on .side{background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.15))}
/* ===== hero v8: three.js logomark ===== */
.hero-net{left:40% !important;right:0 !important;top:0 !important;bottom:0 !important;height:auto !important}
#logo3d{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:760px){.hero-net{left:0 !important;height:50vh !important;bottom:auto !important}}

/* ================= SLEEK PASS (locked green system, Familjen only) ================= */
:root{--hair:rgba(15,61,46,.10);--hair-2:rgba(15,61,46,.16);--ink:#0F3D2E;--ink-2:#4A6A5E;--sec-y:clamp(80px,10vw,136px)}
/* one container, one rhythm, no divider lines */
.container{max-width:1200px !important;padding-left:clamp(16px,4vw,40px) !important;padding-right:clamp(16px,4vw,40px) !important}
.section{padding-top:var(--sec-y) !important;padding-bottom:var(--sec-y) !important;border:0 !important}
.section + .section{border-top:0 !important}
/* section heads: eyebrow + big tight heading */
.sec-head{margin-bottom:clamp(36px,4vw,56px) !important}
.sec-head .label,.label{font-size:12px !important;font-weight:600 !important;letter-spacing:.12em !important;color:#1F7A57 !important;margin-bottom:14px !important}
.label::before{display:none !important}
.h2,.why .h2,.solve .h2,.deep .h2{font-size:clamp(34px,4.2vw,56px) !important;line-height:1.04 !important;letter-spacing:-.03em !important;font-weight:700 !important;max-width:20ch !important}
.deep .label{color:#7BF1A8 !important}
/* glass header */
.nav{background:rgba(255,255,255,.82) !important;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hair) !important}
.is-scrolled .nav{box-shadow:0 8px 30px -12px rgba(15,61,46,.18) !important;border:1px solid var(--hair) !important}
/* club belt: one quiet line, no boxes */
.hero .belt{padding:28px 0 !important;border-bottom:1px solid var(--hair)}
.belt-row[data-dir="right"]{display:none !important}
.belt .club{background:none !important;border:0 !important;box-shadow:none !important;padding:0 28px !important;color:#6E857B !important;font-weight:600 !important;font-size:15px !important;opacity:.85}
.belt .club img{filter:grayscale(1) contrast(.9);opacity:.7}
.belt .club::after,.belt .club::before{display:none !important}
/* cards: hairline, no shadow, roomy */
.stat-card,.prob-list li,.tiers li,.fmt,.aud-col,.times > *,.step,.faq details,.pkg-card,.points{box-shadow:none !important}
.prob-list li,.aud-col,.times > *,.fmt{background:#fff !important;border:1px solid var(--hair) !important;border-radius:16px !important}
.prob-list{gap:12px !important}
.prob-list li{padding:24px 26px !important;transition:border-color .25s,transform .25s}
.prob-list li:hover{border-color:var(--hair-2) !important;transform:translateY(-2px)}
.prob-list b{background:none !important;color:#1F7A57 !important;border:1px solid var(--hair-2) !important;font-weight:600 !important}
.prob-list h3,.fmt h3,.tiers h3{font-size:19px !important;letter-spacing:-.01em !important}
.prob-list p,.fmt p,.tiers p{color:var(--ink-2) !important;font-size:15px !important}
.sol-card{border-radius:20px !important;box-shadow:none !important;padding:clamp(28px,3vw,40px) !important;background:linear-gradient(160deg,#124A37,#0F3D2E 60%) !important}
.sol-card h3{font-size:clamp(26px,2.4vw,32px) !important;letter-spacing:-.02em !important}
/* stats: lighter rules */
.why .stat-grid{border-top:1px solid var(--hair) !important}
.why .stat-card{border-right:1px solid var(--hair) !important}
.why .stat-card strong{font-size:clamp(52px,6vw,88px) !important;letter-spacing:-.04em !important}
.why .stat-card strong::after{width:28px !important;height:4px !important}
/* deep networks section */
.deep .tiers li{border-radius:16px !important;border:1px solid rgba(255,255,255,.10) !important;background:rgba(255,255,255,.03) !important;padding:20px 22px !important}
.deep .star{border-radius:10px !important;font-weight:700 !important}
.deep .fmt{border:0 !important;border-radius:18px !important;padding:0 0 24px !important}
.deep .fmt h3,.deep .fmt p,.deep .fmt .tag{margin-left:24px !important;margin-right:24px !important}
.deep .fmt img{border-radius:18px 18px 0 0 !important;margin-bottom:20px}
.tag{border-radius:999px !important;font-size:12px !important;font-weight:600 !important;padding:5px 11px !important}
/* comparison table */
.cmp{border:1px solid var(--hair) !important;border-radius:16px !important;overflow:hidden;box-shadow:none !important}
.cmp th,.cmp td{padding:18px 20px !important;border-color:var(--hair) !important}
.cmp tr.us td{background:rgba(123,241,168,.14) !important}
/* faq */
.faq details{border:0 !important;border-bottom:1px solid var(--hair) !important;border-radius:0 !important;background:none !important}
.faq summary{padding:22px 0 !important;font-size:18px !important;font-weight:600 !important}
/* buttons everywhere as in the app */
.btn{min-height:46px !important;padding:0 20px !important;border-radius:10px !important;font-size:15px !important;font-weight:700 !important}
@media (max-width:760px){.why .stat-card{border-right:0 !important;border-bottom:1px solid var(--hair) !important}.belt .club{padding:0 18px !important;font-size:14px !important}}
.ball-tray{display:none !important}
.belt .club img{height:26px !important;max-height:26px !important;width:auto !important;max-width:150px !important;object-fit:contain}
@media (max-width:760px){.site-header .btn{min-height:40px !important;padding:0 14px !important;font-size:14px !important}.site-header .icon-btn{width:40px !important;height:40px !important}}
@media (max-width:430px){.site-header .btn-lime{display:none !important}}
/* ================= MERGED HERO: opportunity folded in, no pills ================= */
.hero-kicker,.hero-chips,.hero-tag{display:none !important}
.hero .hero-inner > .hero-stats{max-width:640px}
.hero-stats{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.hero-stats-label{margin:0 0 14px !important;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7BF1A8}
.hero-stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-stats li{display:grid;gap:6px;align-content:start;padding:0 18px;border-left:1px solid rgba(255,255,255,.14);min-width:0}
.hero-stats li:first-child{padding-left:0;border-left:0}
.hero-stats strong{font-size:clamp(26px,2.4vw,34px);line-height:1;font-weight:700;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.hero-stats span{font-size:13px;line-height:1.35;color:rgba(255,255,255,.72)}
@media (max-width:760px){
  .hero-stats{margin-top:32px}
  .hero-stats ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .hero-stats li:nth-child(odd){padding-left:0;border-left:0}
}
/* ================= REWORKED WIREFRAME: attention first, networks with audiences ================= */
.cmp-intro{max-width:62ch;font-size:17px;line-height:1.55;color:var(--ink-2);margin:-16px 0 36px}
.tiers-aud{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px !important}
.tiers-aud > li{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:16px;align-content:start;padding:24px !important}
.tiers-aud > li:hover{transform:translateY(-2px) !important}
.tiers-aud .tier-head{display:flex;gap:14px;align-items:center}
.tiers-aud .checks{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;gap:10px}
.tiers-aud .checks li{font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.82)}
.tiers-aud .ck{width:18px;height:18px}
.tiers-aud .checks li{grid-template-columns:18px 1fr;gap:10px}
.tiers-aud .ck rect{fill:var(--lime)}.tiers-aud .ck path{stroke:var(--deep)}
.book .formats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.deep .sub-h{color:#fff;margin:clamp(32px,4vw,48px) 0 16px}
.deep .times li{background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.12) !important}
.deep .times h4{color:#fff}
.deep .times p{color:rgba(255,255,255,.65) !important}
@media (max-width:900px){.tiers-aud{grid-template-columns:minmax(0,1fr)}.book .formats{grid-template-columns:minmax(0,1fr)}}
.tiers-aud .checks li:hover{transform:none !important}
/* hero height: compact */
.hero{min-height:clamp(540px,76svh,720px) !important;padding-top:104px !important}
.hero .hero-inner{padding-bottom:48px !important}
.hero-chips{margin-top:28px !important}
@media (max-width:760px){.hero{min-height:0 !important}.hero-net{height:42vh !important}.hero .hero-inner{padding-top:34vh !important;padding-bottom:40px !important}}
/* hero height pass 2: two-line title, tighter stack */
.hero{padding-top:92px !important;min-height:0 !important}
.hero .hero-inner{padding-top:28px !important;padding-bottom:32px !important}
.hero .hero-title{max-width:15ch !important;font-size:clamp(40px,5vw,72px) !important}
.hero .hero-row{margin-top:20px !important;gap:24px !important}
.hero-stats{margin-top:30px !important;padding-top:18px !important}
.hero .belt{padding:18px 0 !important}
@media (max-width:760px){.hero .hero-title{font-size:40px !important}}
@media (max-width:760px){.hero .hero-inner{padding-top:calc(40vh - 72px) !important}}

/* ================= CONVINCE PASS: interactive sections ================= */
.sec-sub{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:52ch;margin:14px 0 0}
.deep .sec-sub{color:rgba(255,255,255,.7)}
/* segmented controls (app style) */
.seg-viz,.seg-pick{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:#fff;border:1px solid var(--hair)}
.seg-btn{appearance:none;border:0;background:none;border-radius:9px;min-height:38px;padding:0 14px;font:600 14px/1 "Familjen Grotesk",sans-serif;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s;display:inline-flex;align-items:center;gap:8px}
.seg-btn[aria-selected="true"],.seg-btn.is-on{background:var(--ink);color:#fff}
.deep .seg-pick{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.deep .seg-btn{color:rgba(255,255,255,.7)}
.deep .seg-btn[aria-selected="true"]{background:#7BF1A8;color:var(--ink)}
.seg-btn .star{font-size:12px;font-weight:700;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.12)}
.deep .seg-btn[aria-selected="true"] .star{background:rgba(15,61,46,.14)}

/* comparison chart */
.viz-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:28px 0 18px}
.viz-note{margin:0;font-size:14px;color:var(--ink-2)}
.viz{display:grid;gap:10px}
.viz[hidden]{display:none}
.viz-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr minmax(96px,auto);align-items:center;gap:16px;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid var(--hair);transition:border-color .25s,transform .25s}
.viz-row:hover{border-color:var(--hair-2);transform:translateX(4px)}
.viz-row.us{background:var(--ink);border-color:var(--ink);color:#fff}
.viz-name{font-weight:600;font-size:15px}
.viz-name small{display:block;font-weight:400;font-size:13px;color:var(--ink-2);margin-top:2px}
.viz-row.us .viz-name small{color:rgba(255,255,255,.65)}
.viz-bar{height:12px;border-radius:999px;background:rgba(15,61,46,.08);overflow:hidden}
.viz-row.us .viz-bar{background:rgba(255,255,255,.14)}
.viz-bar i{display:block;height:100%;width:0;border-radius:999px;background:#1F7A57;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.viz-row.us .viz-bar i{background:#7BF1A8}
.viz-val{text-align:right;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.viz-val small{display:block;font-weight:400;font-size:12px;color:var(--ink-2)}
.viz-row.us .viz-val small{color:rgba(255,255,255,.65)}
.cmp-wrap[hidden]{display:none}
@media (max-width:640px){.viz-row{grid-template-columns:1fr auto;gap:8px 12px}.viz-bar{grid-column:1 / -1}.seg-viz{width:100%;overflow:auto}.seg-btn{white-space:nowrap}}

/* network picker */
.pick-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center}
.pick-panels{position:relative;margin-top:28px;min-height:230px}
.pick-panel{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;pointer-events:none}
.pick-panel.is-on{opacity:1;transform:none;pointer-events:auto;position:relative}
.pick-panel h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em;margin:0 0 10px;color:#fff}
.pick-line{color:rgba(255,255,255,.72);font-size:16px;line-height:1.5;margin:0 0 18px;max-width:40ch}
.pick-foot{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:13px;color:rgba(255,255,255,.6)}
.pick-dot{width:8px;height:8px;border-radius:50%;background:#7BF1A8;box-shadow:0 0 12px #7BF1A8}
.pick-stage{position:relative;aspect-ratio:1/0.88;min-height:300px}
.pick-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:900px){.pick-grid{grid-template-columns:1fr;gap:8px}.pick-stage{order:-1;aspect-ratio:1/0.8;min-height:260px}}

/* time-of-week slider */
.day{margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.12)}
.day-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.day .sub-h{margin:0 !important}
.day-hint{margin:0;font-size:13px;color:rgba(255,255,255,.55)}
.day-track{position:relative;margin-top:22px;--p:0%}
.day-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;margin:0;cursor:pointer;
  background:linear-gradient(90deg,#7BF1A8 var(--p),rgba(255,255,255,.14) var(--p))}
.day-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#7BF1A8;border:4px solid #0F3D2E;box-shadow:0 0 0 2px #7BF1A8,0 0 24px rgba(123,241,168,.6);cursor:grab}
.day-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#7BF1A8;border:4px solid #0F3D2E;box-shadow:0 0 0 2px #7BF1A8}
.day-ticks{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.day-ticks span{transition:color .2s}
.day-ticks span.is-on{color:#7BF1A8}
.day-out{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:22px}
.day-out strong{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;color:#fff}
.day-out span{font-size:16px;color:rgba(255,255,255,.72)}

/* interactive steps */
.step{cursor:pointer}
.step-hit{position:absolute;inset:-12px;background:none;border:0;cursor:pointer;z-index:1;border-radius:12px}
.step-hit:focus-visible{outline:2px solid #1F7A57;outline-offset:2px}
.step .step-num,.step .step-line{transition:color .3s,opacity .3s}
.steps.is-run .step:not(.is-on) .step-line{opacity:.55}
.steps.is-run .step.is-on .num{color:#1F7A57}
.steps.is-run .step.is-on .node{box-shadow:0 0 0 6px rgba(123,241,168,.25)}
.node{transition:background-color .3s,border-color .3s,box-shadow .3s !important}
.steps.is-run .step-ball{transition:transform .9s cubic-bezier(.45,.05,.25,1) !important}
.steps.is-run .step-ball svg{transition:transform .9s cubic-bezier(.45,.05,.25,1) !important}
/* convince pass: fixes */
#net-pick.seg{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.14) !important;border-radius:12px !important;padding:4px !important;display:inline-flex !important;gap:4px !important}
#net-pick .seg-btn{color:rgba(255,255,255,.72) !important;background:none !important;border:0 !important}
#net-pick .seg-btn[aria-selected="true"]{background:#7BF1A8 !important;color:#0F3D2E !important}
#net-pick .seg-btn .star{background:rgba(255,255,255,.12);color:inherit}
#net-pick .seg-btn[aria-selected="true"] .star{background:rgba(15,61,46,.14)}
.pick-panel .checks{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;padding:0;margin:0;list-style:none}
.pick-panel .checks li{display:flex !important;align-items:flex-start;gap:10px;font-size:16px;color:rgba(255,255,255,.9);width:auto !important}
.pick-panel .checks li::before{content:"";flex:0 0 20px;width:20px;height:20px;margin-top:1px;border-radius:6px;background:#7BF1A8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='%230F3D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.pick-stage{aspect-ratio:1/0.82 !important}
@media (max-width:520px){#net-pick.seg{display:grid !important;grid-template-columns:repeat(3,1fr) !important;width:100%}#net-pick .seg-btn{justify-content:center;padding:0 8px !important;gap:6px}#net-pick .seg-btn .star{padding:2px 5px;font-size:11px}}
#net-pick .star{display:inline-flex !important;align-items:center;width:auto !important;height:auto !important;min-width:0 !important;padding:2px 6px !important;font-size:11px !important;line-height:1.2 !important;border-radius:6px !important;background:rgba(255,255,255,.12) !important;color:inherit !important;box-shadow:none !important}
#net-pick .seg-btn[aria-selected="true"] .star{background:rgba(15,61,46,.16) !important}
@media (max-width:420px){#net-pick .star{display:none !important}}

/* ===== WHITE HERO + GREEN BELT ===== */
.hero{background:#FFFFFF !important;color:#0F3D2E !important}
.hero-shade{display:none !important}
.hero .hero-title{color:#0F3D2E !important}
.hero .hero-title .marker{color:#1F7A57 !important}
.hero .hero-sub{color:#4A6A5E !important}
.hero .btn-lime{background:#0F3D2E !important;border-color:#0F3D2E !important;color:#fff !important;box-shadow:0 10px 30px -12px rgba(15,61,46,.45) !important}
.hero .btn-lime:hover{background:#1F7A57 !important;border-color:#1F7A57 !important}
.hero .arrow-link{color:#0F3D2E !important}
.hero-stats{border-top-color:rgba(15,61,46,.12) !important}
.hero-stats-label{color:#1F7A57 !important}
.hero-stats li{border-left-color:rgba(15,61,46,.12) !important}
.hero-stats strong{color:#0F3D2E !important}
.hero-stats span{color:#4A6A5E !important}
/* the belt carries the brand green */
.hero .belt{background:#0F3D2E !important;border:0 !important}
.belt .club{color:rgba(234,243,238,.82) !important;opacity:1 !important}
.belt .club img{filter:brightness(0) invert(1) !important;opacity:.85 !important}
/* stats band after the belt */
.stats-band{padding-top:clamp(56px,6vw,88px) !important;padding-bottom:clamp(24px,3vw,40px) !important;background:#fff}
.stats-band .hero-stats{margin:0 !important;padding:0 !important;border:0 !important;max-width:none !important}
.stats-band .hero-stats ul{gap:0}
.stats-band .hero-stats strong{font-size:clamp(40px,4.6vw,64px) !important;letter-spacing:-.035em !important}
.stats-band .hero-stats span{font-size:15px !important}
.stats-band .hero-stats li{padding:0 28px !important}
.stats-band .hero-stats li:first-child{padding-left:0 !important}
.hero .hero-row{margin-top:28px !important}
@media (max-width:760px){.stats-band .hero-stats li{padding:0 16px !important}.stats-band .hero-stats li:nth-child(odd){padding-left:0 !important}}
/* header login dropdown (replaces the WhatsApp icon) */
.login-dd{position:relative}
.login-btn{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid rgba(15,61,46,.18);background:#fff;color:#0F3D2E;font:700 15px/1 "Familjen Grotesk",sans-serif;cursor:pointer;user-select:none;transition:border-color .2s,background .2s}
.login-btn::-webkit-details-marker{display:none}
.login-btn:hover{border-color:rgba(15,61,46,.35)}
.login-btn svg{width:12px;height:12px;transition:transform .2s}
.login-dd[open] .login-btn svg{transform:rotate(180deg)}
.login-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:260px;padding:6px;border-radius:14px;background:#fff;border:1px solid rgba(15,61,46,.12);box-shadow:0 18px 40px -16px rgba(15,61,46,.35);z-index:60;animation:ddIn .16s ease-out}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}}
.login-menu a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;color:#0F3D2E;text-decoration:none}
.login-menu a:hover,.login-menu a:focus-visible{background:#F3F6F4;outline:none}
.login-menu b{font-size:15px;font-weight:700}
.login-menu span{font-size:13px;color:#4A6A5E}
@media (max-width:430px){.login-btn{min-height:38px;padding:0 10px;font-size:14px}}
/* hero = ~65% of the viewport (belt included) */
.hero{height:65svh !important;min-height:520px !important;max-height:none !important;justify-content:flex-end !important}
.hero .hero-inner{margin-top:auto !important;margin-bottom:auto !important;padding-top:0 !important;padding-bottom:0 !important}
@media (max-width:760px){.hero{height:auto !important;min-height:65svh !important}}
@media (max-width:760px){.hero .hero-inner{padding-top:calc(40vh - 60px) !important;padding-bottom:32px !important;margin:0 !important}}
@media (max-width:760px){.hero-net{height:36vh !important}.hero .hero-inner{padding-top:calc(34vh - 70px) !important}}
.hero{height:89svh !important}@media (max-width:760px){.hero{height:auto !important;min-height:89svh !important}}
.hero{height:80svh !important}@media (max-width:760px){.hero{height:auto !important;min-height:80svh !important}}
/* belt: two rows, opposite directions, transparent, green type */
.hero .belt{background:transparent !important;border-top:1px solid rgba(15,61,46,.10) !important;border-bottom:1px solid rgba(15,61,46,.10) !important;padding:16px 0 !important}
.belt-row[data-dir="right"]{display:block !important}
.belt-rows{display:grid;gap:10px}
.belt .club{color:#1F7A57 !important;opacity:1 !important}
.belt .club img{filter:brightness(0) saturate(100%) invert(33%) sepia(53%) saturate(560%) hue-rotate(110deg) brightness(92%) contrast(88%) !important;opacity:.95 !important}
/* belt: logos and names 35% bigger, dark green */
.belt .club{color:#0F3D2E !important;font-size:20px !important;padding:0 36px !important}
.belt .club img{height:35px !important;max-height:35px !important;max-width:200px !important;filter:brightness(0) saturate(100%) invert(17%) sepia(30%) saturate(1400%) hue-rotate(115deg) brightness(92%) contrast(95%) !important;opacity:1 !important}
@media (max-width:760px){.belt .club{font-size:18px !important;padding:0 24px !important}.belt .club img{height:30px !important;max-height:30px !important}}
.hero{height:100svh !important;min-height:560px !important}@media (max-width:760px){.hero{height:auto !important;min-height:100svh !important}}
/* studio: stage and control rail share one height */
.studio-grid{align-items:stretch !important}
.studio-stage-col{display:flex !important;flex-direction:column;height:auto !important;position:relative !important;top:auto !important}
.studio-stage-col .stage{flex:1 1 auto;aspect-ratio:auto !important;height:auto !important;min-height:420px;position:relative !important;top:auto !important}
.studio-stage-col .stage .stage-poster,.studio-stage-col .stage .studio-host,.studio-stage-col .stage canvas{position:absolute !important;inset:0;width:100% !important;height:100% !important;object-fit:cover}
.stage-tag{display:none !important}
@media (max-width:1023px){.studio-stage-col .stage{aspect-ratio:16/10 !important;min-height:0}}
.h2.h2-long{max-width:26ch !important}
#cmp-title .ln{display:block}#cmp-title{max-width:none !important}
/* audience section (light): time-of-week slider */
.aud-sec .day{margin-top:0;padding-top:0;border-top:0}
.aud-sec .day-head{display:block}
.day-lead{margin:0;font-size:17px;color:var(--ink-2);max-width:52ch}
.aud-sec .day-range{background:linear-gradient(90deg,#1F7A57 var(--p),rgba(15,61,46,.10) var(--p))}
.aud-sec .day-range::-webkit-slider-thumb{background:#7BF1A8;border-color:#fff;box-shadow:0 0 0 2px #1F7A57,0 6px 18px rgba(15,61,46,.25)}
.aud-sec .day-ticks{color:rgba(15,61,46,.45)}
.aud-sec .day-ticks span.is-on{color:#1F7A57}
.aud-sec .day-out strong{color:#0F3D2E}
.aud-sec .day-out span{color:var(--ink-2)}
.hero .belt{margin-top:24px !important}
.hero .belt{border-top:2px solid #0F3D2E !important;border-bottom:2px solid #0F3D2E !important}
/* networks: three cards */
.net-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.net-card{border-radius:18px;padding:28px 26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);transition:transform .3s,border-color .3s,background .3s}
.net-card:hover{transform:translateY(-4px);border-color:#7BF1A8;background:rgba(123,241,168,.06)}
.net-card .star{display:inline-flex;align-items:center;padding:4px 10px;border-radius:8px;background:#7BF1A8;color:#0F3D2E;font-weight:700;font-size:13px;width:auto;height:auto}
.net-card h3{color:#fff;font-size:24px;letter-spacing:-.02em;margin:18px 0 8px}
.net-card .pick-line{margin-bottom:20px}
.net-card .checks{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;padding:0;margin:0;list-style:none}
.net-card .checks li{display:flex !important;align-items:flex-start;gap:10px;font-size:15px;color:rgba(255,255,255,.9)}
.net-card .checks li::before{content:"";flex:0 0 20px;width:20px;height:20px;margin-top:1px;border-radius:6px;background:#7BF1A8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='%230F3D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
@media (max-width:900px){.net-cards{grid-template-columns:1fr}}
.net-card .star{display:inline-flex !important;width:auto !important;height:auto !important;min-width:0 !important;padding:5px 10px !important;font-size:14px !important;line-height:1 !important;border-radius:8px !important;background:#7BF1A8 !important;color:#0F3D2E !important;font-weight:700 !important}
/* belt: hairlines back; breathing room inside, above and below the logos */
.hero .belt{border-top:1px solid rgba(15,61,46,.10) !important;border-bottom:1px solid rgba(15,61,46,.10) !important;margin-top:0 !important;padding:34px 0 !important}
.belt-rows{gap:22px !important}
@media (max-width:760px){.hero .belt{padding:24px 0 !important}.belt-rows{gap:16px !important}}
.nav-links a,.login-btn,.site-header .btn{white-space:nowrap}
@media (max-width:1180px){.nav-links{gap:18px !important}.nav-links a{font-size:14px !important}}
/* hero alone fills the first screen minus the belt band; the belt breathes on its own */
.hero{height:calc(100svh - 230px) !important;min-height:480px !important}
.hero .hero-inner{margin:auto 0 !important}
.belt-band{padding:56px 0 !important;background:#fff}
.belt-band .belt{background:transparent !important;border-top:1px solid rgba(15,61,46,.10);border-bottom:1px solid rgba(15,61,46,.10);padding:28px 0 !important;margin:0 !important}
.belt-band .belt-rows{gap:22px !important}
@media (max-width:760px){.hero{height:auto !important;min-height:0 !important}.belt-band{padding:36px 0 !important}.belt-band .belt{padding:22px 0 !important}}

/* why padel: the title is three cards */
#cmp-title{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:none !important}
#cmp-title .ln{display:flex;align-items:flex-end;min-height:180px;padding:26px 28px;border-radius:18px;background:#fff;border:1px solid rgba(15,61,46,.10);font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.025em}
#cmp-title .ln:last-child{background:#0F3D2E;color:#fff;border-color:#0F3D2E}
#cmp-title .ln:last-child::first-line{color:#7BF1A8}
@media (max-width:860px){#cmp-title{grid-template-columns:1fr}#cmp-title .ln{min-height:0}}
.belt-band{padding:40px 0 !important}.hero{height:calc(100svh - var(--belt-h,310px)) !important}
/* revert: hero fills the screen again so the 3D mark keeps its original size; the belt band follows below */
.hero{height:100svh !important;min-height:560px !important}

/* ===== SPACING SYSTEM (one rhythm everywhere) =====
   section: --sec-y top and bottom · inside a grouped section: --sub-y · heading block -> content: 56px · eyebrow -> heading: 14px */
:root{--sub-y:clamp(56px,6vw,80px)}
.stats-band{padding-top:var(--sec-y) !important;padding-bottom:0 !important}
.section.compare{padding-top:var(--sub-y) !important}
.h2.h2-sm,.faq .h2,.studio .h2{font-size:clamp(34px,4.2vw,56px) !important;line-height:1.04 !important;letter-spacing:-.03em !important}
.label{display:block}
.how .label{margin-bottom:14px !important}
.how .sec-head{margin-bottom:clamp(36px,4vw,56px) !important}
.faq-side .label{margin-bottom:14px !important}
.studio-head{margin-bottom:clamp(36px,4vw,56px) !important}
.belt-band{padding:40px 0 !important}

/* ===== audience switcher (header, top right) ===== */
.aud-switch{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:#F3F6F4;border:1px solid rgba(15,61,46,.10)}
.aud-switch a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:8px;font:600 14px/1 "Familjen Grotesk",sans-serif;color:#4A6A5E;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.aud-switch a:hover{color:#0F3D2E}
.aud-switch a[aria-current="page"]{background:#0F3D2E;color:#fff}
.nav-actions{gap:10px !important}
@media (max-width:1180px){.nav-links{display:none !important}}
@media (max-width:640px){.aud-switch a{padding:0 9px;font-size:13px;min-height:32px}.site-header .btn-lime{display:none !important}}
@media (max-width:420px){.wordmark-logo{height:32px !important}}

/* ===== venue page ===== */
.page-venue .hero .hero-title{max-width:13ch !important}
.v-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:none}
.v-step{background:#fff;border:1px solid rgba(15,61,46,.10);border-radius:18px;padding:26px 24px}
.v-num{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.08em;color:#1F7A57}
.v-step h3{margin:14px 0 8px;font-size:20px;letter-spacing:-.01em;color:#0F3D2E}
.v-step p{margin:0;font-size:15px;line-height:1.5;color:#4A6A5E}
.v-earn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v-earn-card{border-radius:18px;padding:30px 28px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.v-earn-card strong{display:block;font-size:clamp(44px,5vw,68px);line-height:1;letter-spacing:-.035em;color:#7BF1A8}
.v-earn-card h3{margin:18px 0 6px;font-size:20px;color:#fff}
.v-earn-card p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.72)}
.v-work-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.v-checks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.v-checks li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid rgba(15,61,46,.10)}
.v-checks li:first-child{border-top:1px solid rgba(15,61,46,.10)}
.v-checks b{font-size:18px;color:#0F3D2E}
.v-checks span{font-size:16px;line-height:1.5;color:#4A6A5E}
@media (max-width:980px){.v-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.v-earn{grid-template-columns:1fr}.v-work-grid{grid-template-columns:1fr}}
@media (max-width:560px){.v-steps{grid-template-columns:1fr}.v-checks li{grid-template-columns:1fr;gap:6px}}
.page-venue .hero .hero-title{max-width:16ch !important}
@media (max-width:480px){.site-header .login-dd{display:none !important}.nav-actions{gap:6px !important}}
@media (max-width:480px){.site-header .menu-btn{display:none !important}}

/* ===== utility top bar: audience switch + log in, above the main nav ===== */
.topbar{height:40px;overflow:hidden;transition:height .25s ease,opacity .25s ease}
.topbar-in{max-width:1200px;height:40px;margin:0 auto;padding:0 clamp(16px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar .aud-switch{padding:2px;border-radius:9px;background:transparent;border:0}
.topbar .aud-switch a{min-height:28px;padding:0 10px;font-size:13px;border-radius:7px}
.topbar .login-btn{min-height:28px;padding:0 10px;border:0;background:transparent;font-size:13px;font-weight:600}
.topbar .login-btn:hover{background:#F3F6F4}
.site-header.is-scrolled .topbar{height:0;opacity:0}
.topbar .login-dd{position:static}
.topbar .login-menu{top:44px;right:clamp(16px,4vw,40px)}
.topbar-in{position:relative}
.hero{padding-top:132px !important}
@media (max-width:1180px){.nav-links{display:flex !important}}
@media (max-width:900px){.nav-links{display:none !important}}
@media (max-width:480px){.topbar .login-dd{display:block !important}.site-header .menu-btn{display:inline-flex !important}.site-header .btn-lime{display:none !important}}
/* header v3: switcher always visible in the main nav; no header CTA */
.hero{padding-top:92px !important}
.site-header .aud-switch{display:inline-flex !important}
.site-header .login-dd{display:block !important}
@media (max-width:1180px){.nav-links{display:flex !important;gap:16px !important}}
@media (max-width:980px){.nav-links{display:none !important}}
@media (max-width:480px){.site-header .menu-btn{display:none !important}.aud-switch a{padding:0 8px !important;font-size:13px !important}.login-btn{padding:0 8px !important}.wordmark-logo{height:30px !important}}
@media (max-width:480px){.site-header .login-dd{display:none !important}}
/* header v4: logo · centred audience switcher · log in. No section links. */
.site-header .nav-links{display:none !important}
.site-header .nav{display:grid !important;grid-template-columns:1fr auto 1fr !important;align-items:center !important;gap:16px !important}
.site-header .nav > .wordmark{justify-self:start}
.site-header .nav-actions{display:contents !important}
.site-header .aud-switch{justify-self:center;grid-column:2}
.site-header .login-dd{justify-self:end;grid-column:3}
.site-header .aud-switch a{min-height:36px;padding:0 16px;font-size:14px}
@media (max-width:480px){.site-header .nav{grid-template-columns:auto 1fr !important}.site-header .aud-switch{justify-self:end;grid-column:2}.site-header .aud-switch a{padding:0 10px !important}}

/* ===== contact form (close section, on deep green) ===== */
.close .contact-form{grid-column:1 / -1;display:grid;gap:16px;margin-top:8px;max-width:760px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.cf-field > span,.cf-field legend{font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.cf-field em{font-style:normal;font-weight:400;color:rgba(255,255,255,.55)}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form textarea{width:100%;min-height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:400 16px/1.4 "Familjen Grotesk",sans-serif;transition:border-color .2s,background .2s}
.contact-form textarea{padding:12px 14px;min-height:120px;resize:vertical}
.contact-form ::placeholder{color:rgba(255,255,255,.4)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#7BF1A8;background:rgba(255,255,255,.09)}
.cf-role{display:flex;flex-wrap:wrap;gap:8px}
.cf-role legend{margin-bottom:8px}
.cf-role label{position:relative}
.cf-role input{position:absolute;opacity:0;pointer-events:none}
.cf-role span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.cf-role input:checked + span{background:#7BF1A8;border-color:#7BF1A8;color:#0F3D2E}
.cf-role input:focus-visible + span{outline:2px solid #7BF1A8;outline-offset:2px}
.cf-error{margin:0;font-size:14px;color:#FFB4A8}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cf-note{margin:0;font-size:13px;color:rgba(255,255,255,.6);max-width:44ch}
.cf-direct{grid-column:1 / -1;margin:8px 0 0;font-size:14px;color:rgba(255,255,255,.7)}
.cf-direct a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.close .close-ctas .btn-ink-ghost{display:none !important}
@media (max-width:640px){.cf-row{grid-template-columns:1fr}}
/* close: headline + CTA left, form right */
.close .close-grid{display:grid !important;grid-template-columns:minmax(0,5fr) minmax(0,7fr) !important;column-gap:clamp(32px,5vw,80px) !important;row-gap:0 !important;align-items:start}
.close .close-head{grid-column:1;grid-row:1}
.close .close-main{grid-column:1;grid-row:2}
.close .contact-form{grid-column:2 !important;grid-row:1 / span 3;margin:0 !important;max-width:none}
.close .cf-direct{grid-column:2 !important}
.close.deep .close-title{font-size:clamp(44px,5.4vw,80px) !important}
@media (max-width:900px){.close .close-grid{grid-template-columns:1fr !important}.close .contact-form,.close .cf-direct{grid-column:1 !important;grid-row:auto;margin-top:32px !important}}
.close .close-main{margin-top:28px !important}.close .close-head{margin:0 !important}
.viz-mult{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:8px;background:#7BF1A8;color:#0F3D2E;font-size:20px;font-weight:700;line-height:1.2;vertical-align:middle;letter-spacing:-.01em}
.viz-val > span{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}
.viz-mult{margin:0 !important;font-size:15px !important;line-height:1 !important;padding:5px 8px !important;border-radius:7px !important;vertical-align:middle}

/* ===== CARDS v2: dimensional, consistent across the site ===== */
/* padel reach: four cards */
.stats-band .hero-stats ul{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:16px !important}
.stats-band .hero-stats li{border:0 !important;padding:28px 26px !important;display:flex !important;flex-direction:column;justify-content:space-between;min-height:180px}
.stats-band .hero-stats li:first-child{padding-left:26px !important}
.stats-band .hero-stats-label{margin-bottom:22px !important}
@media (max-width:900px){.stats-band .hero-stats ul{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.stats-band .hero-stats li{min-height:150px;padding:22px 20px !important}.stats-band .hero-stats li:nth-child(odd){padding-left:20px !important}}

/* shared light card */
.stats-band .hero-stats li,#cmp-title .ln:not(:last-child),.v-step{
  position:relative;border-radius:22px !important;
  background:linear-gradient(165deg,#FFFFFF 0%,#F6FAF7 55%,#EEF5F1 100%) !important;
  border:1px solid rgba(15,61,46,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(15,61,46,.06),0 10px 24px -14px rgba(15,61,46,.28),0 30px 60px -36px rgba(15,61,46,.30) !important}
/* shared deep card */
#cmp-title .ln:last-child,.net-card,.v-earn-card{
  position:relative;border-radius:22px !important;
  background:radial-gradient(120% 90% at 0% 0%,rgba(123,241,168,.16),transparent 55%),linear-gradient(165deg,#155440 0%,#0F3D2E 60%,#0B2F23 100%) !important;
  border:1px solid rgba(123,241,168,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 4px rgba(0,0,0,.18),0 18px 40px -18px rgba(0,0,0,.55),0 40px 80px -40px rgba(11,47,35,.6) !important}
/* tilt + light (cards.js sets --rx/--ry/--mx/--my) */
.card3d{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;will-change:transform;isolation:isolate}
.card3d:hover{transition:transform .08s linear,box-shadow .35s}
.card3d::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light;z-index:2}
.card3d:hover::after{opacity:1}
.stats-band .hero-stats li.card3d:hover,#cmp-title .ln.card3d:not(:last-child):hover,.v-step.card3d:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(15,61,46,.08),0 18px 36px -16px rgba(15,61,46,.35),0 44px 80px -40px rgba(15,61,46,.38) !important}
.net-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important;background:radial-gradient(120% 90% at 0% 0%,rgba(123,241,168,.22),transparent 55%),linear-gradient(165deg,#155440 0%,#0F3D2E 60%,#0B2F23 100%) !important}
/* accents inside cards */
.stats-band .hero-stats strong{background:linear-gradient(180deg,#0F3D2E,#1F7A57);-webkit-background-clip:text;background-clip:text;color:transparent !important}
#cmp-title .ln:last-child{color:#fff !important}
#cmp-title .ln{min-height:190px !important}

/* ===== CARDS v3: quiet, compact, crafted ===== */
:root{--card-r:16px;--card-pad:20px 22px}
/* light */
.stats-band .hero-stats li,#cmp-title .ln:not(:last-child),.v-step,.viz-row:not(.us),.studio-rail{
  border-radius:var(--card-r) !important;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box !important;
  border:1px solid transparent !important;
  box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22) !important}
/* deep */
#cmp-title .ln:last-child,.net-card,.v-earn-card,.viz-row.us{
  border-radius:var(--card-r) !important;
  background:linear-gradient(160deg,#134A38,#0F3D2E 55%,#0C3326) padding-box,linear-gradient(160deg,rgba(123,241,168,.7),rgba(123,241,168,.08) 40%,rgba(255,255,255,.04)) border-box !important;
  border:1px solid transparent !important;
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 24px -14px rgba(0,0,0,.5) !important}
/* compact sizing */
.stats-band .hero-stats li{min-height:0 !important;padding:var(--card-pad) !important;gap:14px}
.stats-band .hero-stats li:first-child,.stats-band .hero-stats li:nth-child(odd){padding-left:22px !important}
.stats-band .hero-stats strong{font-size:clamp(30px,3vw,42px) !important;letter-spacing:-.03em !important}
.stats-band .hero-stats span{font-size:13px !important;line-height:1.35 !important}
#cmp-title{gap:12px !important}
#cmp-title .ln{min-height:0 !important;padding:22px 22px !important;font-size:clamp(20px,1.9vw,26px) !important;line-height:1.12 !important;align-items:flex-start !important}
#cmp-title .ln::before{content:"";display:block;position:absolute;left:22px;top:22px;width:22px;height:3px;border-radius:2px;background:#7BF1A8}
#cmp-title .ln{padding-top:40px !important}
.net-cards{gap:12px !important}
.net-card{padding:var(--card-pad) !important}
.net-card h3{font-size:20px !important;margin:14px 0 6px !important}
.net-card .pick-line{font-size:14px !important;margin-bottom:14px !important}
.net-card .checks li{font-size:14px !important}
.v-steps,.v-earn{gap:12px !important}
.v-step,.v-earn-card{padding:var(--card-pad) !important}
.v-earn-card strong{font-size:clamp(34px,3.6vw,48px) !important}
.v-earn-card h3,.v-step h3{font-size:17px !important;margin:12px 0 4px !important}
.v-step p,.v-earn-card p{font-size:14px !important}
.viz{gap:8px !important}
.viz-row{padding:12px 18px !important}
/* motion: a quiet lift, light tilt; highlight kept faint */
.card3d{transform:perspective(1000px) translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card3d:hover{transform:perspective(1000px) translateY(-3px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important}
.card3d::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 50%) !important}
.viz-row:hover{transform:none}
@media (max-width:900px){#cmp-title .ln{padding-top:38px !important}}
/* all cards take the Why padel card treatment: mint accent bar top-left, content beneath */
.stats-band .hero-stats li,.net-card,.v-step,.v-earn-card{position:relative;padding-top:40px !important}
.stats-band .hero-stats li::before,.net-card::before,.v-step::before,.v-earn-card::before{content:"";position:absolute;left:22px;top:22px;width:22px;height:3px;border-radius:2px;background:#7BF1A8}
.v-step .v-num{display:none}
.net-card .star{margin-top:2px}
.hero .hero-title{max-width:20ch !important}.page-venue .hero .hero-title{max-width:16ch !important}
body:not(.page-venue) .hero .hero-title{max-width:12.5ch !important}
/* hero H1: two clean lines, only "a network" in accent */
body:not(.page-venue) .hero .hero-title{max-width:none !important;font-size:clamp(34px,3.7vw,58px) !important;line-height:1.05 !important}
body:not(.page-venue) .hero .hero-title .line{display:block;white-space:nowrap}
body:not(.page-venue) .hero .hero-title .line:last-child{color:#0F3D2E}
@media (max-width:760px){body:not(.page-venue) .hero .hero-title{font-size:clamp(30px,8.6vw,40px) !important}body:not(.page-venue) .hero .hero-title .line{white-space:normal}}
body:not(.page-venue) .hero .hero-title .marker{margin:0 !important;padding:0 !important;background:none !important;display:inline !important}
@media (max-width:760px){body:not(.page-venue) .hero .hero-title{font-size:7vw !important}body:not(.page-venue) .hero .hero-title .line{white-space:nowrap}}

/* ===== landscape section: stats strip + claims strip + chart, one compact block ===== */
.section.land-sec{padding-top:var(--sec-y) !important}
.land .label{margin-bottom:18px !important}
.land-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-radius:16px;overflow:hidden;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box;
  border:1px solid transparent;box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22)}
.land-stats li{display:grid;gap:4px;padding:18px 22px;border-left:1px solid rgba(15,61,46,.08)}
.land-stats li:first-child{border-left:0}
.land-stats strong{font-size:clamp(28px,2.8vw,40px);line-height:1;letter-spacing:-.03em;font-weight:700;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#0F3D2E,#1F7A57);-webkit-background-clip:text;background-clip:text;color:transparent}
.land-stats span{font-size:13px;line-height:1.35;color:#4A6A5E}
#cmp-title.land-claims{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 !important;margin:12px 0 0 !important;max-width:none !important;
  border-radius:16px;overflow:hidden;font-size:inherit !important;letter-spacing:0 !important;
  background:linear-gradient(160deg,#134A38,#0F3D2E 55%,#0C3326) padding-box,linear-gradient(160deg,rgba(123,241,168,.7),rgba(123,241,168,.08) 40%,rgba(255,255,255,.04)) border-box;
  border:1px solid transparent;box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 24px -14px rgba(0,0,0,.5)}
.land-claims .lc{display:grid;gap:6px;padding:20px 22px;border-left:1px solid rgba(255,255,255,.10);position:relative}
.land-claims .lc:first-child{border-left:0}
.land-claims .lc::before{content:"";width:22px;height:3px;border-radius:2px;background:#7BF1A8;margin-bottom:8px}
.land-claims b{font-size:clamp(18px,1.6vw,22px);line-height:1.15;letter-spacing:-.015em;color:#fff;font-weight:700}
.land-claims small{font-size:13px;line-height:1.4;color:rgba(234,243,238,.7);font-weight:400}
.land-sec .viz-head{margin-top:28px !important}
@media (max-width:900px){.land-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.land-stats li:nth-child(3){border-left:0}.land-stats li:nth-child(n+3){border-top:1px solid rgba(15,61,46,.08)}
  #cmp-title.land-claims{grid-template-columns:1fr !important}.land-claims .lc{border-left:0;border-top:1px solid rgba(255,255,255,.10)}.land-claims .lc:first-child{border-top:0}}
.viz-row{grid-template-columns:minmax(150px,260px) 1fr 210px !important}@media (max-width:640px){.viz-row{grid-template-columns:1fr auto !important}}

/* ===== landscape glyphs: each tile shows its number ===== */
.land-stats li,.land-claims .lc{position:relative;overflow:hidden}
.land-stats li{grid-template-columns:1fr auto !important;align-items:center;column-gap:12px}
.ls-t{display:grid;gap:4px;min-width:0}
.land-stats .g{width:84px;height:48px;flex:0 0 auto;justify-self:end}
.land-claims .lc{display:grid !important;grid-template-columns:1fr 72px;column-gap:14px;align-items:center}
.lc-t{display:grid;gap:6px;min-width:0}
.land-claims .lc::before{grid-column:1 / -1}
.land-claims .g{width:72px;height:48px}
/* stroke/fill palette: light strip = accent green, deep strip = mint */
.land-stats .g{--ink:#1F7A57;--soft:rgba(31,122,87,.14)}
.land-claims .g{--ink:#7BF1A8;--soft:rgba(123,241,168,.18)}
/* courts grid */
.g-courts rect{fill:var(--soft);transition:fill .35s ease var(--d,0ms)}
.g-courts path{stroke:#fff;stroke-width:1;opacity:0;transition:opacity .35s ease var(--d,0ms)}
.go .g-courts rect{fill:var(--ink)}
.go .g-courts path{opacity:.9}
/* area */
.g-area rect{fill:none;stroke:var(--ink);stroke-width:2.2;transform-origin:32px 32px;transform:scale(.2);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms),opacity .4s var(--d,0ms)}
.g-area rect:last-child{fill:var(--ink);stroke:none}
.go .g-area rect{transform:scale(1);opacity:1}
/* ring + clock */
.g-ring .trk,.g-clock .trk{fill:none;stroke:var(--soft);stroke-width:6}
.g-clock .trk{stroke-width:4}
.g-ring .arc,.g-clock .arc{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:32px 32px;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .15s}
.g-clock .arc{stroke-width:4}
.go .g-ring .arc,.go .g-clock .arc{stroke-dashoffset:var(--o)}
.g-clock .hand{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;transform-origin:32px 32px;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .15s}
.go .g-clock .hand{transform:rotate(270deg)}
.g-clock .pin{fill:var(--ink)}
/* districts */
.g-dist .dot{fill:var(--ink);transform-origin:center;transform-box:fill-box;transform:scale(0);transition:transform .45s cubic-bezier(.2,.9,.3,1.4) var(--d,0ms)}
.g-dist .pulse{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:0;transform-origin:center;transform-box:fill-box}
.go .g-dist .dot{transform:scale(1)}
.go .g-dist .pulse{animation:dpulse 2.6s ease-out var(--d,0ms) infinite}
@keyframes dpulse{0%{opacity:.7;transform:scale(1)}70%{opacity:0;transform:scale(3.2)}100%{opacity:0;transform:scale(3.2)}}
/* glass + band */
.g-glass .pane{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.55);stroke-width:1.6}
.g-glass .post{stroke:rgba(255,255,255,.35);stroke-width:1.6}
.g-glass .band{fill:var(--ink);transform-origin:8px 46px;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .2s}
.go .g-glass .band{transform:scaleX(1)}
/* share of voice blocks */
.g-sov rect{fill:var(--soft);transition:fill .3s ease var(--d,0ms)}
.go .g-sov rect{fill:var(--ink)}
@media (prefers-reduced-motion:reduce){.land .g *{transition:none !important;animation:none !important}}
@media (max-width:900px){.land-stats .g{width:68px;height:40px}}
@media (max-width:560px){.land-claims .lc{grid-template-columns:1fr 60px}}
@media (max-width:900px){
  .land-stats li{grid-template-columns:1fr !important;padding-right:84px !important;min-height:96px}
  .land-stats .g{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:60px;height:36px}
  .land-stats span{font-size:12.5px}
}
@media (max-width:600px){
  .land-stats{grid-template-columns:1fr}
  .land-stats li{grid-template-columns:1fr auto !important;padding:14px 18px !important;min-height:0;border-left:0 !important;border-top:1px solid rgba(15,61,46,.08)}
  .land-stats li:first-child{border-top:0}
  .land-stats li:nth-child(n+3){border-top:1px solid rgba(15,61,46,.08)}
  .land-stats .g{position:static;transform:none;width:64px;height:36px}
  .land-stats strong{font-size:26px}
  .land-stats span{font-size:13px}
}

/* ===== landscape: audience strip + living claims strip ===== */
.land-aud{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:16px 28px;align-items:center;margin-top:12px;padding:18px 22px;border-radius:16px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box;border:1px solid transparent;
  box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22)}
.la-head{display:grid;gap:6px}
.la-k{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#1F7A57}
.la-s{margin:0;font-size:14px;line-height:1.4;color:#4A6A5E}
.la-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.la-list li{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:10px;background:#F3F6F4;border:1px solid rgba(15,61,46,.06);font-size:13.5px;font-weight:600;color:#0F3D2E;
  opacity:0;transform:translateY(8px) scale(.98);transition:opacity .4s ease var(--d,0ms),transform .5s cubic-bezier(.2,.8,.2,1) var(--d,0ms),background .2s,border-color .2s}
.land.go .la-list li{opacity:1;transform:none}
.la-list li:hover{background:#EAF7EF;border-color:rgba(31,122,87,.3)}
.la-list svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:#1F7A57;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.la-list span{line-height:1.2}
/* claims strip: a slow drifting light so the block breathes */
#cmp-title.land-claims{position:relative;isolation:isolate}
#cmp-title.land-claims::after{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:radial-gradient(28% 60% at 20% 50%,rgba(123,241,168,.18),transparent 70%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-10%)}to{transform:translateX(70%)}}
@media (prefers-reduced-motion:reduce){#cmp-title.land-claims::after{animation:none}.la-list li{transition:none;opacity:1;transform:none}}
@media (max-width:900px){.land-aud{grid-template-columns:1fr}.la-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.la-list{grid-template-columns:1fr}.la-list li{min-height:38px}}
.la-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.la-list li{min-height:46px;font-size:14.5px}@media (max-width:560px){.la-list{grid-template-columns:1fr !important}}
/* audience pills: hover / focus pop-up */
.land-aud,.la-list{overflow:visible}
.la-list li{position:relative;cursor:default;outline:none}
.la-list li:focus-visible{box-shadow:0 0 0 2px #1F7A57}
.la-tip{position:absolute;left:12px;right:12px;bottom:calc(100% + 10px);z-index:20;display:grid;gap:4px;padding:12px 14px;border-radius:12px;
  background:#0F3D2E;color:rgba(234,243,238,.92);font-size:13px;font-weight:400;line-height:1.45;
  box-shadow:0 12px 30px -10px rgba(11,47,35,.55);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s ease,transform .25s ease}
.la-tip b{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7BF1A8}
.la-tip::after{content:"";position:absolute;left:22px;top:100%;border:7px solid transparent;border-top-color:#0F3D2E}
.la-list li:hover .la-tip,.la-list li:focus-visible .la-tip{opacity:1;transform:none}
.la-list li:hover{z-index:21}
.la-list li:focus .la-tip{opacity:1;transform:none}.la-list li:focus{z-index:21}
/* audience ring: four segments, the hovered audience lights its quarter */
.la-head{grid-template-columns:auto 1fr;align-items:center;column-gap:14px}
.la-head .la-k{grid-column:1 / -1}
.la-ring{width:96px;height:96px}
.la-seg{fill:none;stroke:rgba(31,122,87,.16);stroke-width:9;stroke-linecap:round;transition:stroke .3s ease,stroke-width .3s ease}
.land.go .la-seg{stroke:#1F7A57;transition:stroke .5s ease var(--d,0ms),stroke-width .3s}
.land.go .la-seg.s2{stroke:#3FA37A}.land.go .la-seg.s3{stroke:#7BF1A8}.land.go .la-seg.s4{stroke:#0F3D2E}
.la-n{font:700 22px "Familjen Grotesk",sans-serif;fill:#0F3D2E}
.la-l{font:600 8px "Familjen Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase;fill:#4A6A5E}
.land-aud:has(.la-list li:hover) .la-seg{stroke:rgba(31,122,87,.16) !important}
.land-aud:has(.la-list li:nth-child(1):hover) .la-seg.s1,.land-aud:has(.la-list li:nth-child(2):hover) .la-seg.s2,
.land-aud:has(.la-list li:nth-child(3):hover) .la-seg.s3,.land-aud:has(.la-list li:nth-child(4):hover) .la-seg.s4{stroke:#1F7A57 !important;stroke-width:12}
.la-list li:nth-child(1) svg{stroke:#1F7A57}.la-list li:nth-child(2) svg{stroke:#3FA37A}.la-list li:nth-child(3) svg{stroke:#2FBF77}.la-list li:nth-child(4) svg{stroke:#0F3D2E}
/* audience crowd: one figure per segment */
.la-ring{display:none}
.la-head{grid-template-columns:1fr !important}
.la-crowd{width:150px;height:72px;overflow:visible}
.la-p{opacity:0;transform-box:fill-box}
.la-p circle,.la-p path{stroke:#fff;stroke-width:2.5;paint-order:stroke}
.la-p.p1 *{fill:#1F7A57}.la-p.p2 *{fill:#3FA37A}.la-p.p3 *{fill:#7BF1A8}.la-p.p4 *{fill:#0F3D2E}
.land.go .la-p{animation:laPop .55s cubic-bezier(.2,.9,.3,1.3) var(--d,0ms) forwards}
@keyframes laPop{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.la-p{transition:translate .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.land-aud:has(.la-list li:hover) .la-p{opacity:.35 !important}
.land-aud:has(.la-list li:nth-child(1):hover) .la-p.p1,.land-aud:has(.la-list li:nth-child(2):hover) .la-p.p2,
.land-aud:has(.la-list li:nth-child(3):hover) .la-p.p3,.land-aud:has(.la-list li:nth-child(4):hover) .la-p.p4{opacity:1 !important;translate:0 -6px}
.la-list li:nth-child(3) svg{stroke:#2FBF77}
@media (prefers-reduced-motion:reduce){.la-p{opacity:1;animation:none !important}}
/* OOH comparison: its own section */
.section.land-sec{padding-bottom:var(--sec-y) !important}
.section.vs-sec{background:#fff;border-top:1px solid rgba(15,61,46,.08) !important;border-bottom:1px solid rgba(15,61,46,.08) !important}
.vs-sec .h2{max-width:22ch !important}
.vs-sec .viz-head{margin-top:0 !important}
.vs-sec .viz-row:not(.us){background:linear-gradient(#F7FAF8,#F7FAF8) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box !important}

/* vs section: light and compact */
.section.vs-sec{padding:var(--sub-y) 0 !important;background:#fff !important;border-top:1px solid rgba(15,61,46,.08) !important;border-bottom:1px solid rgba(15,61,46,.08) !important}
.vs-sec .sec-head{margin-bottom:20px !important}
.vs-sec .h2{font-size:clamp(28px,3vw,40px) !important;max-width:none !important}
.vs-sec .viz-head{margin:0 0 12px !important}
.vs-sec .viz{gap:6px !important}
.vs-sec .viz-row{padding:10px 18px !important}
/* time-of-week slider, compact, inside "Who you reach" */
.la-day{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:10px 28px;align-items:center;padding-top:16px;margin-top:4px;border-top:1px solid rgba(15,61,46,.08)}
.la-day .day-track{margin:0;--p:0%}
.la-day .day-range{height:8px;background:linear-gradient(90deg,#1F7A57 var(--p),rgba(15,61,46,.10) var(--p))}
.la-day .day-range::-webkit-slider-thumb{width:22px;height:22px;background:#7BF1A8;border:3px solid #fff;box-shadow:0 0 0 2px #1F7A57,0 4px 12px rgba(15,61,46,.25)}
.la-day .day-range::-moz-range-thumb{width:16px;height:16px;background:#7BF1A8;border:3px solid #fff;box-shadow:0 0 0 2px #1F7A57}
.la-day .day-ticks{margin-top:8px;font-size:11px;color:rgba(15,61,46,.45)}
.la-day .day-ticks span.is-on{color:#1F7A57}
.la-day .day-out{margin:0;display:grid;gap:2px}
.la-day .day-out strong{font-size:18px;color:#0F3D2E;letter-spacing:-.01em}
.la-day .day-out span{font-size:13px;color:#4A6A5E;line-height:1.35}
@media (max-width:760px){.la-day{grid-template-columns:1fr}}
.la-day-lead{grid-column:1 / -1;margin:0 0 4px;font-size:14px;color:#4A6A5E}

/* =====================================================================
   COMPACT SYSTEM (final layer): the landscape block's rhythm, site-wide
   section: --sub-y top/bottom · head: eyebrow 12/.12em + H2 28–40 · head→content 20px
   strips: 16px radius, gradient hairline edge, soft shadow, 18/22 padding, hairline dividers
   ===================================================================== */
:root{--sub-y:clamp(48px,5.5vw,72px);--strip-r:16px;--strip-pad:18px 22px;--hair:rgba(15,61,46,.08)}
main > .section:not(.hero),main > .close{padding-top:var(--sub-y) !important;padding-bottom:var(--sub-y) !important}
.belt-band{padding:28px 0 !important}
.section.land-sec{padding-bottom:var(--sub-y) !important}
/* heads */
.sec-head,.how .sec-head,.studio-head,.faq-side{margin-bottom:20px !important}
.label,.hero-stats-label,.la-k{font-size:12px !important;font-weight:600 !important;letter-spacing:.12em !important;text-transform:uppercase !important;margin:0 0 10px !important}
.h2,.h2.h2-sm,.vs-sec .h2,.studio .h2,.faq .h2,.how .h2{font-size:clamp(28px,3vw,40px) !important;line-height:1.08 !important;letter-spacing:-.025em !important;font-weight:700 !important;max-width:24ch !important}
.sec-sub{font-size:14px !important;line-height:1.45 !important;margin:8px 0 0 !important;max-width:56ch !important}
/* strip primitives */
.strip{border-radius:var(--strip-r);overflow:hidden;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box;border:1px solid transparent;box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22)}
.strip-deep{border-radius:var(--strip-r);overflow:hidden;background:linear-gradient(160deg,#134A38,#0F3D2E 55%,#0C3326) padding-box,linear-gradient(160deg,rgba(123,241,168,.7),rgba(123,241,168,.08) 40%,rgba(255,255,255,.04)) border-box;border:1px solid transparent;box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 24px -14px rgba(0,0,0,.5)}

/* ---- Campaign simulator ---- */
.studio-grid{gap:16px !important}
.studio-rail{padding:16px 18px !important;border-radius:var(--strip-r) !important;gap:12px}
.studio-rail .ctl{margin:0 0 12px !important}
.studio-rail .ctl-label,.studio-rail legend.ctl-label{font-size:12px !important;letter-spacing:.12em !important;text-transform:uppercase !important;font-weight:600 !important;margin-bottom:8px !important}
.studio-rail .brand-input{min-height:42px !important;font-size:15px !important}
.studio-rail .help,.studio-rail .club-note{font-size:12.5px !important;line-height:1.4 !important}
.studio-rail .chip{min-height:34px !important;font-size:13.5px !important;padding:0 12px !important}
.studio-rail .logo-drop{min-height:44px !important;font-size:13.5px !important}
.studio-rail .btn-block{min-height:44px !important}
.studio-stage-col .stage{min-height:360px;border-radius:var(--strip-r) !important}

/* ---- Hours of attention (chart) ---- */
.vs-sec .viz-head{margin:0 0 10px !important}
.vs-sec .viz{gap:6px !important}
.vs-sec .viz-row{padding:10px 18px !important;border-radius:12px !important}
.vs-sec .viz-name{font-size:14.5px}
.vs-sec .viz-val{font-size:15px}

/* ---- How it works: four connected cells, the active one lit ---- */
.steps{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:0 !important;padding:0 !important;margin:0 !important;
  border-radius:var(--strip-r);overflow:hidden;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box;border:1px solid transparent;box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22)}
.step{position:relative;display:grid !important;gap:6px !important;padding:var(--strip-pad) !important;padding-top:34px !important;border-left:1px solid var(--hair);transition:background .35s}
.step:first-child{border-left:0}
.step::before{content:"";position:absolute;left:22px;top:18px;width:22px;height:3px;border-radius:2px;background:rgba(15,61,46,.14);transition:background .35s}
.step::after,.node,.step-ball{display:none !important}
.step.is-on{background:linear-gradient(180deg,rgba(123,241,168,.14),rgba(123,241,168,.04))}
.step.is-on::before{background:#7BF1A8}
.step-num{margin:0 !important;font-size:12px !important;letter-spacing:.12em !important;text-transform:uppercase !important;font-weight:600 !important;color:#1F7A57 !important}
.step-num .num{font-size:12px !important;font-weight:700 !important}
.step-line{margin:0 !important;font-size:14px !important;line-height:1.45 !important;color:#4A6A5E !important;opacity:1 !important}
.steps.is-run .step:not(.is-on) .step-line{opacity:1 !important}
.how-cta{margin-top:16px !important}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr !important}.step:nth-child(3){border-left:0}.step:nth-child(n+3){border-top:1px solid var(--hair)}}
@media (max-width:560px){.steps{grid-template-columns:1fr !important}.step{border-left:0 !important;border-top:1px solid var(--hair)}.step:first-child{border-top:0}}

/* ---- FAQ ---- */
.faq-grid{gap:16px 40px !important}
.faq-list{border-radius:var(--strip-r);overflow:hidden;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box;border:1px solid transparent;box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22);padding:0 22px}
.faq details{border:0 !important;border-top:1px solid var(--hair) !important;background:none !important;border-radius:0 !important}
.faq details:first-child{border-top:0 !important}
.faq summary{padding:14px 0 !important;font-size:15px !important;font-weight:600 !important}
.faq .ans{padding:0 0 14px !important}
.faq .ans p{font-size:14px !important;line-height:1.5 !important;color:#4A6A5E !important;margin:0 !important}
.faq-aside{font-size:14px !important}

/* ---- Close + form ---- */
.close.deep .close-title{font-size:clamp(34px,4.2vw,56px) !important;line-height:1.02 !important;letter-spacing:-.03em !important}
.close .close-sub{font-size:15px !important;line-height:1.5 !important}
.close .close-main{margin-top:18px !important}
.close .contact-form{gap:12px !important}
.cf-row{gap:12px !important}
.cf-field > span,.cf-field legend{font-size:13px !important}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel]{min-height:42px !important;font-size:15px !important}
.contact-form textarea{min-height:104px !important;font-size:15px !important}
.cf-role span{min-height:36px !important;font-size:13px !important}
.cf-note{font-size:12.5px !important}
.cf-direct{font-size:13px !important}

/* ---- Venue page ---- */
.v-steps{display:grid;gap:0 !important;border-radius:var(--strip-r);overflow:hidden;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box;border:1px solid transparent;box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22)}
.v-step{background:none !important;border:0 !important;border-left:1px solid var(--hair) !important;border-radius:0 !important;box-shadow:none !important;padding:var(--strip-pad) !important;padding-top:34px !important}
.v-step:first-child{border-left:0 !important}
.v-step::before{top:18px;left:22px}
.v-step h3{font-size:16px !important;margin:0 0 6px !important}
.v-step p{font-size:14px !important}
.v-earn{display:grid;gap:0 !important;border-radius:var(--strip-r);overflow:hidden;background:linear-gradient(160deg,#134A38,#0F3D2E 55%,#0C3326) padding-box,linear-gradient(160deg,rgba(123,241,168,.7),rgba(123,241,168,.08) 40%,rgba(255,255,255,.04)) border-box;border:1px solid transparent;box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 24px -14px rgba(0,0,0,.5)}
.v-earn-card{background:none !important;border:0 !important;border-left:1px solid rgba(255,255,255,.10) !important;border-radius:0 !important;box-shadow:none !important;padding:var(--strip-pad) !important;padding-top:34px !important}
.v-earn-card:first-child{border-left:0 !important}
.v-earn-card::before{top:18px;left:22px}
.v-earn-card strong{font-size:clamp(30px,3vw,42px) !important}
.v-earn-card h3{font-size:16px !important;margin:10px 0 4px !important}
.v-earn-card p{font-size:14px !important}
.v-work-grid{gap:16px 40px !important}
.v-checks li{padding:14px 0 !important;grid-template-columns:140px 1fr !important}
.v-checks b{font-size:15px !important}
.v-checks span{font-size:14px !important}
.section.book.deep{padding-top:var(--sub-y) !important;padding-bottom:var(--sub-y) !important}
.deep .sec-sub{color:rgba(255,255,255,.72) !important}
@media (max-width:900px){.v-steps{grid-template-columns:1fr 1fr !important}.v-step:nth-child(3){border-left:0 !important}.v-step:nth-child(n+3){border-top:1px solid var(--hair)}.v-earn{grid-template-columns:1fr !important}.v-earn-card{border-left:0 !important;border-top:1px solid rgba(255,255,255,.10)}.v-earn-card:first-child{border-top:0}}
@media (max-width:560px){.v-steps{grid-template-columns:1fr !important}.v-step{border-left:0 !important;border-top:1px solid var(--hair)}.v-step:first-child{border-top:0}}
/* card tilt off for strip cells (they are one object now) */
.step.card3d,.v-step.card3d,.v-earn-card.card3d{transform:none !important}
.step.card3d::after,.v-step.card3d::after,.v-earn-card.card3d::after{display:none}
.deep .h2,.section.deep .h2{font-size:clamp(28px,3vw,40px) !important;line-height:1.08 !important;letter-spacing:-.025em !important;max-width:24ch !important}
/* hero + belt = one screen; the 3D mark keeps its size (logo3d.js fixes px scale) */
.hero{height:calc(100svh - var(--belt-h,250px)) !important;min-height:520px !important}
.belt-band{padding:24px 0 !important}
.belt-band .belt{padding:20px 0 !important}
.belt-band .belt-rows{gap:16px !important}
@media (max-width:760px){.hero{height:auto !important;min-height:0 !important}}
/* room for the full-size mark: canvas starts under the nav; belt band trimmed (64px rows were 35px logos) */
.hero-net{top:88px !important}
.belt-band{padding:20px 0 !important}
.belt-band .belt{padding:16px 0 !important}
.belt-band .belt-rows{padding:0 !important;gap:12px !important}
.belt .club,.belt-row{height:44px !important;min-height:0 !important}
.belt .club{display:inline-flex !important;align-items:center}
@media (max-width:760px){.hero-net{top:72px !important}}
/* mobile hero: mark on top, text starts below it */
@media (max-width:760px){
  .hero{padding-top:72px !important;height:auto !important;min-height:0 !important}
  .hero-net{top:72px !important;height:42vh !important;max-height:380px}
  .hero .hero-inner{padding-top:calc(min(42vh,380px) + 20px) !important;padding-bottom:28px !important;margin:0 !important}
  .hero .hero-row{margin-top:16px !important}
  .hero .hero-ctas{flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:12px 20px}
  .hero .btn-lg{min-height:44px !important}
}
/* fixed header follows the document width (never the window) */
.site-header{left:0 !important;right:auto !important;width:var(--docw,100%) !important;max-width:100% !important}
/* studio on small screens: no min-height (with 16/10 it forced a 576px-wide stage), tracks may shrink */
@media (max-width:1023px){
  .studio-stage-col .stage{min-height:0 !important;aspect-ratio:16/10 !important;height:auto !important}
  .studio-grid{grid-template-columns:minmax(0,1fr) !important}
  .studio-stage-col,.studio-rail{min-width:0 !important;width:auto !important;max-width:100%}
}

/* ===================================================================================================
   VENUE v2 (17 Oct): deck narrative. Opportunity strip, before/after, 6-step process, week grid,
   beyond-advertising strip, network strip. Same compact system as the advertiser page.
   =================================================================================================== */
/* hero H1: two clean lines, accent on the second */
.page-venue .hero .hero-title{max-width:none !important;font-size:clamp(34px,3.7vw,58px) !important;line-height:1.05 !important}
.page-venue .hero .hero-title .line{display:block;white-space:nowrap}
.page-venue .hero .hero-title .marker{margin:0 !important;padding:0 !important;background:none !important;display:inline !important;color:#1F7A57}
@media (max-width:760px){.page-venue .hero .hero-title{font-size:7vw !important}}

/* deep three-cell strip (opportunity, beyond advertising) */
.vo-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-radius:var(--strip-r);overflow:hidden;
  background:linear-gradient(160deg,#134A38,#0F3D2E 55%,#0C3326) padding-box,linear-gradient(160deg,rgba(123,241,168,.7),rgba(123,241,168,.08) 40%,rgba(255,255,255,.04)) border-box;
  border:1px solid transparent;box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 24px -14px rgba(0,0,0,.5)}
.vo{position:relative;display:grid;grid-template-columns:1fr 76px;align-items:center;gap:6px 14px;padding:20px 22px;border-left:1px solid rgba(255,255,255,.10);overflow:hidden}
.vo:first-child{border-left:0}
.vo::before{content:"";grid-column:1 / -1;width:22px;height:3px;border-radius:2px;background:#7BF1A8;margin-bottom:8px}
.vo-t{display:grid;gap:6px;min-width:0}
.vo b{font-size:clamp(18px,1.6vw,22px);line-height:1.15;letter-spacing:-.015em;color:#fff;font-weight:700}
.vo small{font-size:13px;line-height:1.4;color:rgba(234,243,238,.7);font-weight:400}
.vo .g{width:76px;height:50px;--ink:#7BF1A8;--soft:rgba(123,241,168,.18)}
@media (max-width:900px){.vo-strip{grid-template-columns:1fr}.vo{border-left:0;border-top:1px solid rgba(255,255,255,.10)}.vo:first-child{border-top:0}}
/* glyphs on the deep strips */
.g-people g{translate:0 14px;opacity:0;transition:translate .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms),opacity .5s var(--d,0ms)}
.g-people circle,.g-people path{fill:var(--ink)}
.go .g-people g{translate:0 0;opacity:1}
.g-repeat rect{fill:var(--soft);transition:fill .35s ease var(--d,0ms)}
.go .g-repeat rect.on{fill:var(--ink)}
.g-bracket .l{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .7s ease var(--d,0ms)}
.g-bracket .win{fill:var(--ink);transform:scale(0);transform-origin:78px 32px;transition:transform .5s cubic-bezier(.2,.9,.3,1.4) var(--d,0ms)}
.go .g-bracket .l{stroke-dashoffset:0}.go .g-bracket .win{transform:scale(1)}
.g-spark .s{fill:var(--ink);transform:scale(0) rotate(-30deg);transform-origin:center;transform-box:fill-box;transition:transform .6s cubic-bezier(.2,.9,.3,1.3) var(--d,0ms)}
.g-spark .sm{fill:var(--soft)}
.go .g-spark .s{transform:scale(1) rotate(0)}
.go .g-spark .s:first-child{animation:sparkle 3.2s ease-in-out 1.2s infinite}
@keyframes sparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.88) rotate(12deg)}}
.g-grow rect{fill:var(--ink);transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;transition:transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.g-grow rect:nth-child(-n+2){fill:var(--soft)}
.go .g-grow rect{transform:scaleY(1)}

/* before / after */
.v-ba{background:#F7FAF8}
.ba{position:relative;aspect-ratio:16/10;border-radius:var(--strip-r);overflow:hidden;background:#0F3D2E;isolation:isolate;
  box-shadow:0 1px 1px rgba(15,61,46,.06),0 18px 40px -22px rgba(15,61,46,.45);user-select:none;-webkit-user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;pointer-events:none}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--x,100%)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x,100%);width:2px;margin-left:-1px;background:#7BF1A8;box-shadow:0 0 0 1px rgba(15,61,46,.35),0 0 18px rgba(123,241,168,.5);pointer-events:none;z-index:2}
.ba-knob{position:absolute;top:50%;left:var(--x,100%);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#7BF1A8;color:#0F3D2E;display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(0,0,0,.35),0 0 0 4px rgba(15,61,46,.25);pointer-events:none;z-index:3;transition:transform .2s}
.ba-knob svg{width:22px;height:22px}
.ba:hover .ba-knob,.ba:active .ba-knob{transform:scale(1.06)}
.ba-tag{position:absolute;top:14px;z-index:2;padding:7px 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1;pointer-events:none}
.ba-tag.l{left:14px;background:rgba(255,255,255,.92);color:#0F3D2E}
.ba-tag.r{right:14px;background:#0F3D2E;color:#7BF1A8;box-shadow:0 0 0 1px rgba(123,241,168,.35)}
.ba-range{position:absolute;inset:0;z-index:4;display:block;margin:0}
.ba-range input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none;-webkit-appearance:none;appearance:none}
.ba-range input::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:1px}
.ba-range input:focus-visible{opacity:1;outline:3px solid #7BF1A8;outline-offset:-3px;background:none}
.ba-cap{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ba-cap li{display:grid;gap:4px;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--hair)}
.ba-cap b{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1F7A57}
.ba-cap li:last-child b{color:#0F3D2E}
.ba-cap span{font-size:14px;line-height:1.45;color:#4A6A5E}
@media (max-width:640px){.ba-cap{grid-template-columns:1fr}.ba-knob{width:40px;height:40px;margin:-20px 0 0 -20px}.ba-tag{top:10px;font-size:10px}}

/* six-step process: 3 x 2 */
.steps.steps-6{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.steps-6 .step:nth-child(4){border-left:0}
.steps-6 .step:nth-child(n+4){border-top:1px solid var(--hair)}
.steps-6 .step-num{white-space:nowrap}
@media (max-width:900px){.steps.steps-6{grid-template-columns:1fr 1fr !important}.steps-6 .step{border-left:1px solid var(--hair);border-top:0}.steps-6 .step:nth-child(odd){border-left:0}.steps-6 .step:nth-child(n+3){border-top:1px solid var(--hair)}}
@media (max-width:560px){.steps.steps-6{grid-template-columns:1fr !important}.steps-6 .step{border-left:0 !important;border-top:1px solid var(--hair) !important}.steps-6 .step:first-child{border-top:0 !important}}

/* nothing to manage: checklist + week grid */
.easy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px 40px;align-items:center}
.easy-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.easy-list li{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 16px;border-radius:10px;background:#F3F6F4;border:1px solid rgba(15,61,46,.08);font-size:14.5px;line-height:1.3;color:#0F3D2E;font-weight:500;
  opacity:0;transform:translateX(-10px);transition:opacity .5s ease var(--d,0ms),transform .5s cubic-bezier(.2,.8,.2,1) var(--d,0ms),background .25s,border-color .25s}
.easy-list li:nth-child(1){--d:0ms}.easy-list li:nth-child(2){--d:90ms}.easy-list li:nth-child(3){--d:180ms}.easy-list li:nth-child(4){--d:270ms}.easy-list li:nth-child(5){--d:360ms}
.go .easy-list li{opacity:1;transform:none}
.easy-list li::before{content:"";flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#7BF1A8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230F3D2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.easy-list li:hover{background:#EAF7EF;border-color:rgba(31,122,87,.3)}
.wk-wrap{display:grid;gap:10px;padding:18px 22px;border-radius:var(--strip-r);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box;border:1px solid transparent;box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22)}
.wk-k{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#1F7A57}
.wk{position:relative;display:grid;gap:3px}
.wk-days,.wk-row{display:grid;grid-template-columns:26px repeat(7,minmax(0,1fr));gap:3px;align-items:center}
.wk-days span{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4A6A5E;text-align:center;padding-bottom:2px}
.wk-h{font-size:10px;color:#8AA398;font-variant-numeric:tabular-nums;line-height:1}
.wk-row i{display:block;height:7px;border-radius:2px;background:rgba(15,61,46,.06);transform:scaleX(.2);transform-origin:left;opacity:.4;transition:transform .45s cubic-bezier(.2,.8,.2,1) var(--d,0ms),opacity .35s var(--d,0ms),background .3s}
.go .wk-row i{transform:none;opacity:1}
.wk-row .c-b1{background:rgba(31,122,87,.35)}
.wk-row .c-b2{background:#1F7A57}
.wk-row .c-inst{background:#7BF1A8;box-shadow:0 0 0 1px rgba(15,61,46,.25)}
.go .wk-row .c-inst{animation:instpulse 2.2s ease-in-out 1.4s infinite}
@keyframes instpulse{0%,100%{box-shadow:0 0 0 1px rgba(15,61,46,.25)}50%{box-shadow:0 0 0 3px rgba(123,241,168,.55)}}
.wk-pin{position:absolute;left:calc(26px + (100% - 26px) * 3 / 7 + 4px);top:calc(18px + 7.6 * 10px);padding:6px 10px;border-radius:999px;background:#0F3D2E;color:#7BF1A8;font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s 1.1s,transform .4s 1.1s;box-shadow:0 6px 16px -6px rgba(15,61,46,.5);z-index:2}
.go .wk-pin{opacity:1;transform:none}
.wk-legend{list-style:none;margin:0;padding:0;display:flex;gap:16px;font-size:12.5px;color:#4A6A5E}
.wk-legend li{display:flex;align-items:center;gap:7px}
.wk-legend i{width:14px;height:7px;border-radius:2px;display:block}
.k-book{background:#1F7A57}.k-inst{background:#7BF1A8;box-shadow:0 0 0 1px rgba(15,61,46,.25)}
@media (max-width:900px){.easy{grid-template-columns:1fr}}

/* the network: light four-cell strip */
.net-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--strip-r);overflow:hidden;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(123,241,168,.55),rgba(15,61,46,.08) 38%,rgba(15,61,46,.06)) border-box;border:1px solid transparent;box-shadow:0 1px 1px rgba(15,61,46,.04),0 6px 16px -10px rgba(15,61,46,.22)}
.net-strip li{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding:18px 22px;padding-top:34px;border-left:1px solid var(--hair);overflow:hidden}
.net-strip li:first-child{border-left:0}
.net-strip li::before{content:"";position:absolute;left:22px;top:18px;width:22px;height:3px;border-radius:2px;background:#7BF1A8}
.ns-t{display:grid;gap:5px;min-width:0}
.net-strip b{font-size:16px;line-height:1.2;color:#0F3D2E;font-weight:700}
.net-strip span{font-size:13.5px;line-height:1.4;color:#4A6A5E}
.net-strip .tiers{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.net-strip .tiers em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:#F3F6F4;border:1px solid rgba(15,61,46,.1);color:#0F3D2E}
.net-strip .tiers em:first-child{background:#0F3D2E;color:#7BF1A8;border-color:#0F3D2E}
.net-strip .g{width:68px;height:40px;--ink:#1F7A57;--soft:rgba(31,122,87,.14);justify-self:end}
.g-tiers rect{fill:var(--soft);transform:translateY(8px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1) var(--d,0ms),opacity .4s var(--d,0ms),fill .4s var(--d,0ms)}
.go .g-tiers rect{transform:none;opacity:1}
.go .g-tiers rect:last-child{fill:var(--ink)}
.g-first .trk{stroke:var(--soft);stroke-width:4;fill:none;stroke-linecap:round}
.g-first .run{stroke:var(--ink);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) .1s}
.g-first .tip{stroke:var(--ink);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s 1s}
.go .g-first .run{stroke-dashoffset:0}.go .g-first .tip{opacity:1}
.g-sports circle{fill:var(--soft);stroke:var(--ink);stroke-width:2;transform:scale(0);transform-origin:center;transform-box:fill-box;transition:transform .5s cubic-bezier(.2,.9,.3,1.4) var(--d,0ms),fill .4s var(--d,0ms)}
.go .g-sports circle{transform:scale(1)}
.go .g-sports circle:first-child{fill:var(--ink)}
@media (max-width:1200px){.net-strip{grid-template-columns:1fr 1fr}.net-strip li:nth-child(3){border-left:0}.net-strip li:nth-child(n+3){border-top:1px solid var(--hair)}}
@media (max-width:560px){.net-strip{grid-template-columns:1fr}.net-strip li{border-left:0;border-top:1px solid var(--hair)}.net-strip li:first-child{border-top:0}}
@media (prefers-reduced-motion:reduce){.page-venue .g *,.easy-list li,.wk-row i,.wk-pin{transition:none !important;animation:none !important;opacity:1 !important;transform:none !important}.g-bracket .l{stroke-dashoffset:0}.g-first .run{stroke-dashoffset:0}}

/* ===== VENUE v2.1: before/after IS the hero · big-brand belt · venue-side opportunity ===== */
.page-venue .hero{height:calc(100svh - var(--belt-h,250px)) !important;min-height:560px !important;display:flex !important;align-items:center !important;padding-top:92px !important}
.page-venue .hero-inner.v-hero{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,11fr);gap:32px 56px;align-items:center;margin:auto auto !important;padding-top:0 !important;padding-bottom:0 !important}
.page-venue .v-hero-text{min-width:0}
.page-venue .v-hero-media{min-width:0;position:relative}
.page-venue .v-hero-media .ba{box-shadow:0 1px 1px rgba(15,61,46,.06),0 30px 60px -28px rgba(15,61,46,.55);transform:perspective(1600px) rotateY(-4deg);transform-origin:left center}
.page-venue .v-hero-media .ba:hover{transform:perspective(1600px) rotateY(0)}
.page-venue .v-hero-media .ba{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ba-hint{margin:10px 0 0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#4A6A5E;text-align:right;transition:opacity .4s}
.ba-hint::before{content:"";display:inline-block;width:18px;height:2px;background:#7BF1A8;vertical-align:middle;margin-right:8px;border-radius:1px}
.v-hero-media.is-touched .ba-hint{opacity:0}
@media (max-width:980px){.page-venue .hero-inner.v-hero{grid-template-columns:1fr;gap:24px}.page-venue .v-hero-media .ba{transform:none !important}}
@media (max-width:760px){
  .page-venue .hero{padding-top:72px !important;height:auto !important;min-height:0 !important;padding-bottom:28px !important}
  .page-venue .hero-inner.v-hero{padding-top:12px !important;padding-bottom:0 !important}
  .page-venue .v-hero-media{order:-1}
  .ba-hint{text-align:left}
  .page-venue .hero .hero-row{margin-top:16px !important}
}
/* brand belt: every logo as a dark-green silhouette, so the mix of wordmarks reads as one line */
.belt .club-brand{display:flex;align-items:center}
.belt .club-brand .bl{display:block;height:var(--lh,28px);width:calc(var(--lh,28px) * var(--r,3));background:#0F3D2E;-webkit-mask:var(--src) center / contain no-repeat;mask:var(--src) center / contain no-repeat}
/* opportunity glyphs */
.vo .g-glass .pane{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.5);stroke-width:1.6}
.vo .g-glass .post{stroke:rgba(255,255,255,.3);stroke-width:1.6}
.vo .g-glass .band{fill:var(--ink);transform-origin:8px 46px;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .2s}
.go .vo .g-glass .band{transform:scaleX(1)}
.g-check .ring{fill:none;stroke:var(--soft);stroke-width:5}
.g-check .tick{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1) .35s}
.go .g-check .tick{stroke-dashoffset:0}
.go .g-check .ring{stroke:var(--ink);transition:stroke .5s .2s}
/* venue hero sub-copy */
.page-venue .hero .hero-sub{margin:16px 0 0 !important;font-size:clamp(16px,1.35vw,18px) !important;line-height:1.5 !important;color:#4A6A5E !important;max-width:46ch !important;font-weight:400 !important}
@media (max-width:760px){.page-venue .hero .hero-sub{margin-top:12px !important;font-size:15.5px !important;max-width:none !important}}
/* venue: no belt band for now, so the hero owns the viewport */
.page-venue .hero{height:86svh !important;min-height:560px !important;max-height:760px !important}
@media (max-width:760px){.page-venue .hero{height:auto !important;min-height:0 !important}}

/* ===== VENUE: advertising inventory (deck slide "Your courts. Multiple branding opportunities.") ===== */
.v-inv{background:#F7FAF8}
.inv{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,9fr);gap:18px}
.inv-stage{position:relative;aspect-ratio:16/10;border-radius:var(--strip-r);overflow:hidden;background:#0F3D2E;box-shadow:0 1px 1px rgba(15,61,46,.06),0 18px 40px -22px rgba(15,61,46,.45)}
.inv-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.inv-shot.is-on{opacity:1;transform:scale(1)}
.inv-badge{position:absolute;left:14px;bottom:14px;padding:6px 10px;border-radius:999px;background:rgba(15,61,46,.75);color:#CFF3DE;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(6px)}
.inv-picks{display:grid;align-content:start;gap:10px}
.inv-pick{display:grid;grid-template-columns:44px 1fr 18px;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border-radius:12px;cursor:pointer;
  background:#fff;border:1px solid var(--hair);box-shadow:0 1px 1px rgba(15,61,46,.04);transition:border-color .25s,box-shadow .25s,background .25s,transform .25s;font:inherit;color:inherit;position:relative;overflow:hidden}
.inv-pick::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#7BF1A8;transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.inv-pick:hover{border-color:rgba(31,122,87,.35);transform:translateX(2px)}
.inv-pick.is-on{background:linear-gradient(160deg,#134A38,#0F3D2E 60%);border-color:#0F3D2E;box-shadow:0 10px 26px -16px rgba(15,61,46,.7)}
.inv-pick.is-on::after{transform:scaleY(1)}
.inv-pick b{display:block;font-size:15.5px;font-weight:700;line-height:1.2;color:#0F3D2E}
.inv-pick small{display:block;font-size:13px;line-height:1.35;color:#4A6A5E;margin-top:3px}
.inv-pick.is-on b{color:#fff}.inv-pick.is-on small{color:rgba(234,243,238,.72)}
.ip-i{width:34px;height:34px;justify-self:center;fill:none;stroke:#1F7A57;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ip-i .bd{fill:rgba(31,122,87,.18);stroke:none;transition:fill .3s}
.ip-i .sh{stroke:rgba(31,122,87,.4)}
.ip-i .mesh path{stroke-width:1.2}
.inv-pick.is-on .ip-i{stroke:#7BF1A8}
.inv-pick.is-on .ip-i .bd{fill:#7BF1A8}
.inv-pick.is-on .ip-i .sh{stroke:rgba(123,241,168,.45)}
.ip-a{width:18px;height:18px;fill:none;stroke:#7BF1A8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.inv-pick.is-on .ip-a{opacity:1;transform:none}
.inv-pick:focus-visible{outline:2px solid #1F7A57;outline-offset:2px}
.inv-note{margin:6px 0 0;font-size:13px;line-height:1.45;color:#4A6A5E}
@media (max-width:980px){.inv{grid-template-columns:1fr}.inv-picks{grid-template-columns:1fr;gap:8px}}
@media (prefers-reduced-motion:reduce){.inv-shot{transition:none;transform:none}.inv-pick{transition:none}}
/* network strip glyphs: connections + three months */
.g-link .ln path{stroke:var(--soft);stroke-width:2;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .6s ease var(--d,0ms),stroke .4s var(--d,0ms)}
.go .g-link .ln path{stroke-dashoffset:0;stroke:var(--ink)}
.g-link .hub{fill:var(--ink)}
.g-link .nd{fill:var(--soft);stroke:var(--ink);stroke-width:1.8;transform:scale(0);transform-origin:center;transform-box:fill-box;transition:transform .45s cubic-bezier(.2,.9,.3,1.4) var(--d,0ms)}
.go .g-link .nd{transform:scale(1)}
.g-cal .mo{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;opacity:0;transform:translateY(6px);transition:opacity .45s var(--d,0ms),transform .5s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.g-cal .mo rect{fill:var(--soft)}
.go .g-cal .mo{opacity:1;transform:none}
.net-strip li b{line-height:1.25}
/* network strip: production / install glyph */
.g-fit .panel{fill:var(--soft);stroke:var(--ink);stroke-width:2;transform:scale(.7);transform-origin:center;transform-box:fill-box;opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1) .1s,opacity .4s .1s,fill .4s .5s}
.go .g-fit .panel{transform:none;opacity:1;fill:var(--ink)}
.g-fit .br{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;opacity:0;transition:opacity .35s var(--d,0ms)}
.go .g-fit .br{opacity:1}
.g-fit .shine{stroke:#fff;stroke-width:6;opacity:0;transform:translateX(-26px)}
.go .g-fit .shine{animation:fitshine 2.6s ease-in-out 1s infinite}
@keyframes fitshine{0%{opacity:0;transform:translateX(-26px)}35%{opacity:.35}60%{opacity:0;transform:translateX(46px)}100%{opacity:0;transform:translateX(46px)}}
@media (prefers-reduced-motion:reduce){.g-fit .panel{transform:none;opacity:1}.g-fit .br{opacity:1}.g-fit .shine{display:none}}
/* advertiser hero without the belt (belt parked 17 Oct — see _work/parked/club-logo-belt.html) */
body:not(.page-venue) .hero{height:86svh !important;min-height:560px !important;max-height:820px !important}
@media (max-width:760px){body:not(.page-venue) .hero{height:auto !important;min-height:0 !important}}