/* Court-line world: light court sections, dark "clubhouse" bands. Interactive mocks and real screenshots carry the proof; copy stays short. */
:root{
  --bg:#f2f5f3; --surface:#ffffff; --ink:#10302e; --muted:#4d6663; --line:#d3dfdb;
  --teal:#1d6b66; --teal-soft:#e0eeeb; --ball:#d7ea4f; --band:#0f2826; --band-ink:#e6f0ed; --band-muted:#9fb8b3;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1b1a; --surface:#132725; --ink:#e4efec; --muted:#9db5b0; --line:#25403d;
  --teal:#5fc0b6; --teal-soft:#183936; --ball:#d7ea4f; --band:#081413; --band-ink:#e6f0ed; --band-muted:#8aa49f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1b1a; --surface:#132725; --ink:#e4efec; --muted:#9db5b0; --line:#25403d;
  --teal:#5fc0b6; --teal-soft:#183936; --ball:#d7ea4f; --band:#081413; --band-ink:#e6f0ed; --band-muted:#8aa49f; color-scheme:dark}

*{box-sizing:border-box}
html{scrollbar-color:var(--teal) var(--bg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
::selection{background:var(--ball);color:#10302e}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body);margin:0}
.wrap{max-width:72rem;margin:0 auto;padding-inline:clamp(1rem,4vw,2.5rem)}
h1,h2,h3{font-family:var(--display);font-stretch:118%;line-height:1.05;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:850;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:1.15rem;font-weight:700;font-stretch:112%}
p{margin:0}
.lede{color:var(--muted);font-size:1.15rem;max-width:38rem}
.note-sm{color:var(--muted);font-size:.85rem}
.label{font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
a{color:inherit;text-underline-offset:.2em}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ball);outline-offset:3px;border-radius:4px}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.3rem;border-radius:999px;font:600 1rem var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease-out,background-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* tabs (shared by every interactive block) */
.tablist{display:flex;flex-wrap:wrap;gap:.4rem}
.tab{border:1px solid var(--line);background:var(--surface);padding:.5rem .95rem;border-radius:999px;font-size:.92rem;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.tab:hover{border-color:var(--teal)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
[role="tabpanel"][hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){[role="tabpanel"]:not([hidden]){animation:fadein .35s cubic-bezier(.16,1,.3,1)}@keyframes fadein{from{opacity:0;transform:translateY(6px)}}}

/* nav */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:1.25rem;padding-block:.8rem}
.logo{font:850 1.45rem var(--display);font-stretch:112%;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:.45rem}
.logo i{width:.75rem;height:.75rem;border-radius:50%;background:var(--ball);box-shadow:inset -2px -2px 0 rgba(0,0,0,.15)}
.nav ul{display:flex;gap:1.1rem;list-style:none;margin:0 0 0 auto;padding:0;font-size:.93rem;color:var(--muted)}
.nav ul a{text-decoration:none}.nav ul a:hover{color:var(--ink)}
.nav .acts{display:flex;gap:.5rem;align-items:center}
.nav .btn{padding:.6rem 1rem;font-size:.95rem}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;padding:.55rem .85rem;border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:.95rem}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--surface)}
.menu nav{position:absolute;right:0;top:calc(100% + .5rem);background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:.5rem;display:grid;min-width:12rem;box-shadow:0 20px 40px -20px rgba(16,48,46,.4)}
.menu nav a{padding:.55rem .8rem;border-radius:.6rem;text-decoration:none}
.menu nav a:hover{background:var(--teal-soft)}
@media (max-width:1060px){.nav ul{display:none}.nav .acts{margin-left:auto}.menu{display:block}}
@media (max-width:420px){.nav .btn-primary{display:none}}

/* hero */
.hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;position:relative}
.hero-copy{display:grid;gap:1.4rem;min-width:0}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--ball) 62% 92%,transparent 92%);color:inherit}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero small{color:var(--muted);font-size:.9rem}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* phone mock, recoloured by --club (white label) */
.stage{display:grid;justify-items:center;gap:1rem;min-width:0}
.phone{--club:#1d6b66;width:min(100%,21rem);background:#fff;color:#10302e;border:1px solid #d3dfdb;border-radius:1.6rem;padding:1.1rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.45);display:grid;gap:.8rem;transition:--club .3s}
.phone *{transition:background-color .3s,border-color .3s,color .3s}
.phone-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.95rem;gap:.5rem}
.club{display:inline-flex;align-items:center;gap:.5rem}
.club b{width:1.8rem;height:1.8rem;border-radius:.5rem;background:var(--club);color:#fff;display:grid;place-items:center;font:800 .7rem var(--display);font-stretch:112%}
.club b.round{border-radius:50%}.club b.shield{border-radius:.5rem .5rem 50% 50%}
.phone .muted{color:#4d6663;font-size:.8rem;font-weight:500}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;font:500 .7rem var(--mono);text-align:center;color:#4d6663}
.days span{padding:.35rem 0;border-radius:.55rem;border:1px solid #d3dfdb}
.days span strong{display:block;font:700 .95rem var(--body);color:#10302e}
.days .on{background:var(--club);border-color:var(--club);color:#fff}.days .on strong{color:#fff}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.slot{border:1px solid #d3dfdb;border-radius:.7rem;padding:.5rem .6rem;font-size:.78rem;color:#4d6663}
.slot b{display:block;font:700 1rem var(--mono);color:#10302e}
.slot.pick{border:2px solid var(--club);background:color-mix(in srgb,var(--club) 10%,#fff)}
.court{display:flex;justify-content:space-between;align-items:center;border:1px solid #d3dfdb;border-radius:.7rem;padding:.55rem .7rem;font-size:.85rem}
.court.best{border:2px solid var(--club)}
.court em{font-style:normal;font-size:.72rem;color:var(--club);font-weight:600}
.tick{width:1.2rem;height:1.2rem;border-radius:50%;background:var(--club);display:grid;place-items:center;color:#fff}
.tick svg{width:.7rem;height:.7rem}
.pay{background:var(--club);color:#fff;text-align:center;border-radius:.8rem;padding:.7rem;font-weight:600}
.powered{text-align:center;font-size:.68rem;color:#6b7f7c}
.brand{display:grid;gap:.6rem;justify-items:center;text-align:center}
.brand-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:center}
.sw{width:2rem;height:2rem;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.lg{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.35rem .8rem;font-size:.85rem;font-weight:600;cursor:pointer}
.lg[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}

/* proof strip */
.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.6rem}
.strip div{display:grid;gap:.2rem;min-width:0}
.strip b{font:800 1.7rem var(--display);font-stretch:112%;font-variant-numeric:tabular-nums}
.strip span{color:var(--muted);font-size:.9rem}
@media (max-width:760px){.strip .wrap{grid-template-columns:1fr 1fr}}

section{padding-block:clamp(4rem,8vw,6.5rem)}
section[id]{scroll-margin-top:4.5rem}
.head{display:grid;gap:1rem;margin-bottom:2.5rem;max-width:46rem}
.alt{background:var(--surface);border-block:1px solid var(--line)}
.alt .tab{background:var(--bg)}
.alt .tab[aria-selected="true"]{background:var(--ink)}
.cta-sec{padding-top:0}

/* two-app explorer */
.explorer{display:grid;grid-template-columns:17rem 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:stretch}
.ex-tabs{display:grid;gap:.3rem}
.ex-tabs .label{margin:.9rem 0 .3rem}.ex-tabs .label:first-child{margin-top:0}
.ex-tabs .tab{border-radius:.8rem;text-align:left;padding:.75rem 1rem;display:grid;gap:.1rem;background:transparent;border-color:transparent}
.ex-tabs .tab small{font-weight:400;font-size:.82rem;color:var(--muted)}
.ex-tabs .tab[aria-selected="true"]{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 10px 30px -18px rgba(16,48,46,.4)}
.ex-tabs .tab[aria-selected="true"] small{color:var(--muted)}
.ex-stage{background:var(--teal-soft);border-radius:1.6rem;padding:clamp(1.2rem,4vw,2.5rem);min-height:30rem;height:100%;display:grid;place-items:center;min-width:0}
.ex-tabs{align-content:start}
.ex-stage [role="tabpanel"]{width:100%;display:grid;justify-items:center;gap:1.2rem}
.ex-cap{max-width:30rem;text-align:center;display:grid;gap:.3rem}
.ex-cap p{color:var(--muted)}
.mini{width:min(100%,19rem);background:#fff;color:#10302e;border-radius:1.4rem;padding:1rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.45);display:grid;gap:.6rem;font-size:.85rem}
.mini .chips{display:flex;gap:.3rem;flex-wrap:wrap}
.mini .chips span{border:1px solid #d3dfdb;border-radius:999px;padding:.2rem .55rem;font-size:.72rem}
.mini .chips .on{background:#1d6b66;color:#fff;border-color:#1d6b66}
.mini .li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border:1px solid #e3ebe8;border-radius:.7rem;padding:.55rem .65rem}
.mini .li b{font-weight:600}
.mini .li span{font:500 .75rem var(--mono);color:#4d6663}
.mini .hl{background:#10302e;color:#fff;border-radius:.9rem;padding:.8rem;display:grid;gap:.2rem}
.mini .hl small{opacity:.75;font-size:.72rem}
.mini .cta-s{background:#1d6b66;color:#fff;text-align:center;border-radius:.7rem;padding:.55rem;font-weight:600}
.mini .dates{display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;font:500 .68rem var(--mono);text-align:center}
.mini .dates span{border:1px solid #d3dfdb;border-radius:.4rem;padding:.3rem 0}
.mini .dates .on{background:#e0eeeb;border-color:#1d6b66;color:#1d6b66}
.desk{width:min(100%,34rem);background:#fff;color:#10302e;border-radius:1rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.45);overflow:hidden;font-size:.82rem}
.desk-bar{display:flex;gap:.3rem;padding:.55rem .75rem;border-bottom:1px solid #e3ebe8}.desk-bar i{width:.5rem;height:.5rem;border-radius:50%;background:#d3dfdb}
.desk-body{padding:.9rem;display:grid;gap:.6rem}
.sched{display:grid;grid-template-columns:2.6rem repeat(4,1fr);gap:3px;font:500 .66rem var(--mono);color:#4d6663}
.sched span{padding:.2rem 0}
.sched i{height:1.5rem;border-radius:.3rem;background:#f2f5f3}
.sched .b1{background:#1d6b66}.sched .b2{background:#7fb6ae}.sched .b3{background:#d7ea4f}.sched .b4{background:#c9ddd8}
.rcpt .li{display:flex;justify-content:space-between;gap:.5rem;padding:.4rem 0;border-bottom:1px dashed #d3dfdb}
.rcpt .li em{font-style:normal;color:#1d6b66;font-weight:600}
.rcpt .tot{display:flex;justify-content:space-between;font-weight:700;padding-top:.3rem}
.prof{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center}
.prof .av{width:2.6rem;height:2.6rem;border-radius:50%;background:#10302e;color:#fff;display:grid;place-items:center;font-weight:700}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.kv div{background:#f2f5f3;border-radius:.6rem;padding:.5rem;display:grid}
.kv small{color:#4d6663;font-size:.68rem}
.kv b{font:700 .9rem var(--mono)}
.tvm{background:#141414;color:#eee;border-radius:.8rem;padding:.8rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;font-size:.72rem}
.tvm div{background:#232323;border-radius:.5rem;padding:.5rem;display:grid;gap:.2rem}
.tvm b{font-size:.78rem}.tvm em{font-style:normal;color:#5fc0b6;font-size:.66rem}
@media (max-width:860px){.explorer{grid-template-columns:1fr}.ex-tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}.ex-tabs .label{display:none}.ex-tabs .tab small{display:none}.ex-stage{min-height:0}}

/* feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cell{padding:1.4rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:.45rem;align-content:start;min-width:0}
.cell p{color:var(--muted);font-size:.97rem}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* packages stepper */
.pk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.steps-t{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;counter-reset:st}
.steps-t .tab{border-radius:.8rem;padding:.6rem .4rem;display:grid;gap:.15rem;justify-items:center;counter-increment:st;font-size:.85rem}
.steps-t .tab::before{content:counter(st);font:600 .7rem var(--mono);opacity:.7}
.pk-card{background:var(--surface);border:1px solid var(--line);border-radius:1.4rem;padding:1.4rem;display:grid;gap:1rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.35);min-width:0}
.pk-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.pk-top b{font:800 1.2rem var(--display);font-stretch:112%}
.pill{font:600 .72rem var(--body);padding:.3rem .6rem;border-radius:999px;background:var(--teal-soft);color:var(--teal)}
.pill.warn{background:#fdf0c8;color:#7a5200}
.pill.frozen{background:#e3ecf7;color:#1f4fa3}
.dots{display:grid;grid-template-columns:repeat(10,1fr);gap:.35rem}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--teal)}
.dots i.used{background:var(--line)}
.dots i.fam{background:var(--ball)}
.pk-meta{display:flex;justify-content:space-between;font:500 .82rem var(--mono);color:var(--muted);gap:1rem;flex-wrap:wrap}
.pk-say{font-size:1.02rem}
.pk-say b{font-weight:600}
.legend{display:flex;gap:1rem;font-size:.78rem;color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend i{width:.6rem;height:.6rem;border-radius:50%;display:inline-block}
.bubble{justify-self:end;max-width:17rem;background:#dcf8c6;color:#10302e;border-radius:1rem 1rem .2rem 1rem;padding:.7rem .9rem;font-size:.9rem;line-height:1.45}
.bubble small{display:block;margin-top:.3rem;color:#4d6663;font-size:.72rem;text-align:right}
@media (max-width:860px){.pk{grid-template-columns:1fr}}
@media (max-width:480px){.steps-t{grid-template-columns:repeat(3,1fr)}}

/* screenshot frames + splits */
.frame{background:var(--surface);border:1px solid var(--line);border-radius:1rem;overflow:hidden;box-shadow:0 30px 60px -30px rgba(16,48,46,.35);min-width:0}
.frame-bar{display:flex;gap:.35rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,var(--ink))}
.frame-bar i{width:.55rem;height:.55rem;border-radius:50%;background:var(--line)}
.frame img{display:block;width:100%;height:auto}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* level picker */
.ladder{display:flex;flex-wrap:wrap;gap:.35rem;min-height:4.5rem;align-content:flex-start}
.ladder span{font:700 .82rem var(--body);padding:.35rem .7rem;border-radius:999px;color:#fff}
.ladder .k{background:#eef1f0;color:#10302e;border:1px solid #d3dfdb}
.c1{background:#8a8f8e}.c2{background:#7cb342}.c3{background:#43a047}.c4{background:#039be5}.c5{background:#1e88e5}.c6{background:#3949ab}.c7{background:#7e57c2}.c8{background:#e53935}.c9{background:#f4511e}.c10{background:#f9a825;color:#10302e!important}
.lvl-scale{height:.5rem;border-radius:999px;background:linear-gradient(90deg,#8a8f8e,#43a047,#1e88e5,#3949ab,#7e57c2,#e53935,#f9a825)}
.lvl-axis{display:flex;justify-content:space-between;font:500 .7rem var(--mono);color:var(--muted)}

/* dark bands */
.band{background:var(--band);color:var(--band-ink)}
.band .lede{color:var(--band-muted)}
.band .frame{background:#141414;border-color:rgba(255,255,255,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.band .frame-bar{background:#1c1c1c;border-color:rgba(255,255,255,.08)}
.band .frame-bar i{background:#3a3a3a}
.band .tab{background:transparent;border-color:rgba(230,240,237,.22);color:var(--band-ink)}
.band .tab[aria-selected="true"]{background:var(--ball);color:#10302e;border-color:var(--ball)}

/* tournaments */
.formats{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem}
.formats span{font-size:.9rem;padding:.4rem .8rem;border-radius:999px;border:1px solid rgba(230,240,237,.22)}
.tv-shot{margin-top:2.5rem;display:grid;gap:.8rem}
.tv-shot figcaption,.shots figcaption{color:var(--band-muted);font-size:.9rem}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
.shots figure{margin:0;display:grid;gap:.8rem;align-content:start}
.shots figcaption b{display:block;color:var(--band-ink);font:700 1.1rem var(--display);font-stretch:112%;margin-bottom:.2rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(230,240,237,.14)}
.facts p{color:var(--band-muted);font-size:.95rem}
.facts b{display:block;color:var(--ball);font:500 .78rem var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem}
@media (max-width:820px){.shots,.facts{grid-template-columns:1fr}}
figure{margin:0}

/* loyalty */
.loy{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.calc{background:var(--surface);border:1px solid var(--line);border-radius:1.4rem;padding:1.4rem;display:grid;gap:1.1rem}
.calc label{display:grid;gap:.4rem;font-weight:600;font-size:.95rem}
.calc label span{display:flex;justify-content:space-between}
.calc label output{font:600 .9rem var(--mono);color:var(--teal)}
input[type=range]{width:100%;accent-color:var(--teal)}
.score{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:1rem;gap:1rem;flex-wrap:wrap}
.score b{font:800 2rem var(--display);font-stretch:112%;font-variant-numeric:tabular-nums}
.score span{color:var(--muted);font-size:.9rem}
.tiers{display:grid;gap:.7rem}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:1.1rem;padding:1rem 1.2rem;display:grid;grid-template-columns:7rem 1fr;gap:1rem;align-items:center;opacity:.55;transition:opacity .25s,border-color .25s,transform .25s}
.tier.on{opacity:1;border:2px solid var(--teal);transform:translateX(4px)}
.tier.got{opacity:1}
.tier .t{font:800 1.25rem var(--display);font-stretch:112%;display:grid}
.tier .t small{font:500 .72rem var(--mono);color:var(--muted);font-stretch:normal}
.perks{display:flex;flex-wrap:wrap;gap:.35rem}
.perks span{font-size:.82rem;padding:.25rem .6rem;border-radius:999px;background:var(--teal-soft)}
.earn{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem}
.earn span{font-size:.86rem;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.earn span b{font:600 .82rem var(--mono);color:var(--teal);margin-right:.35rem}
@media (max-width:860px){.loy{grid-template-columns:1fr}}
@media (max-width:480px){.tier{grid-template-columns:1fr;gap:.5rem}}

/* whatsapp */
.wa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.chat{background:#e9e1d6;border-radius:1.4rem;padding:1.2rem;min-height:22rem;display:grid;align-content:start;gap:.8rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.35)}
.chat-top{display:flex;align-items:center;gap:.6rem;background:#075e54;color:#fff;margin:-1.2rem -1.2rem .4rem;padding:.8rem 1.2rem;border-radius:1.4rem 1.4rem 0 0;font-weight:600;font-size:.92rem}
.chat-top b{width:1.8rem;height:1.8rem;border-radius:50%;background:#fff;color:#075e54;display:grid;place-items:center;font:800 .7rem var(--display)}
.chat-top small{display:block;font-weight:400;opacity:.8;font-size:.72rem}
.bubble.in{justify-self:start;background:#fff;border-radius:1rem 1rem 1rem .2rem}
.rule{background:#fff;color:#10302e;border-radius:1rem;padding:.9rem;display:grid;gap:.1rem;font-size:.85rem}
.rule .r{display:grid;grid-template-columns:4.5rem 1fr;gap:.6rem;padding:.35rem 0;border-bottom:1px solid #e3ebe8}
.rule .r:last-child{border-bottom:0}
.rule .r span{font:500 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#4d6663;padding-top:.15rem}
.wa-copy{display:grid;gap:1.5rem}
.wa-p{display:grid;gap:.6rem}
@media (max-width:860px){.wa{grid-template-columns:1fr}}

/* analytics */
.dash{background:var(--surface);border:1px solid var(--line);border-radius:1.2rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.35);overflow:hidden}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem 1.2rem;border-bottom:1px solid var(--line)}
.dash-top b{font:700 1rem var(--body)}
.seg{display:flex;gap:.25rem;font:500 .78rem var(--mono)}
.seg span{padding:.3rem .6rem;border-radius:999px;color:var(--muted)}
.seg .on{background:var(--ink);color:var(--bg)}
.dash-tabs{padding:.8rem 1.2rem;border-bottom:1px solid var(--line);overflow-x:auto}
.dash-tabs .tablist{flex-wrap:nowrap}
.dash-tabs .tab{white-space:nowrap;font-size:.85rem;padding:.4rem .8rem}
.dash-body{padding:1.2rem;display:grid;gap:1rem}
.dash-body > [role="tabpanel"]{display:grid;gap:1rem}
.q{font:700 1.15rem var(--display);font-stretch:112%}
.q small{display:block;font:400 .9rem var(--body);color:var(--muted);font-stretch:normal;margin-top:.2rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kpi{border:1px solid var(--line);border-radius:.9rem;padding:1rem;display:grid;gap:.25rem;min-width:0}
.kpi span{font-size:.85rem;color:var(--muted)}
.kpi b{font:800 1.5rem var(--display);font-stretch:112%;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font:500 .76rem var(--mono);color:var(--teal)}
.kpi em.bad{color:#c2410c}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem}
.card{border:1px solid var(--line);border-radius:.9rem;padding:1rem;display:grid;gap:.8rem;align-content:start;min-width:0}
.card h4{margin:0;font:600 .9rem var(--body)}
.att{display:grid;gap:.5rem}
.att div{display:flex;gap:.6rem;align-items:baseline;font-size:.9rem}
.att i{width:.5rem;height:.5rem;border-radius:50%;background:#c2410c;flex:none;transform:translateY(-.1rem)}
.bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;align-items:end;height:8rem}
.bars div{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.bars i{display:block;border-radius:3px 3px 0 0;background:var(--teal)}
.bars i.avg{background:var(--line)}
.bars i.col{background:var(--ball)}
.axis{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;font:500 .62rem var(--mono);color:var(--muted);text-align:center}
.hm{display:grid;grid-template-columns:2rem repeat(16,1fr);gap:3px;font:500 .62rem var(--mono);color:var(--muted)}
.hm i{aspect-ratio:1;border-radius:3px;background:var(--teal-soft)}
.hm span{align-self:center}
.hm .hr{text-align:center}
.opp{background:#10302e;color:#e6f0ed;border-radius:.9rem;padding:1rem;display:grid;gap:.25rem}
.opp b{font:800 1.8rem var(--display);font-stretch:112%;font-variant-numeric:tabular-nums;color:var(--ball)}
.opp span{font-size:.88rem;opacity:.85}
.coh{width:100%;border-collapse:separate;border-spacing:3px;font:500 .78rem var(--mono)}
.coh th{font-weight:500;color:var(--muted);text-align:left;padding:.2rem .3rem}
.coh td{text-align:center;padding:.45rem .2rem;border-radius:.35rem;color:#10302e}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{font:500 .7rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{text-align:right;padding:.55rem .5rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.age{display:grid;gap:.5rem}
.age div{display:grid;grid-template-columns:3.4rem 1fr 4.6rem;gap:.6rem;align-items:center;font-size:.82rem}
.age em{font-style:normal;font:500 .75rem var(--mono);color:var(--muted)}
.age i{height:.6rem;border-radius:999px;background:var(--teal)}
.age span{text-align:right;font:500 .78rem var(--mono);font-variant-numeric:tabular-nums}
.wf{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;align-items:end;height:10rem}
.wf div{display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;height:100%;text-align:center;font:500 .7rem var(--mono);color:var(--muted)}
.wf i{display:block;border-radius:.35rem;background:var(--teal)}
.wf .up i{background:var(--ball)}.wf .down i{background:#e8a48a}
.wf b{font:700 .8rem var(--mono);color:var(--ink)}
.dash-foot{display:flex;gap:.5rem;flex-wrap:wrap;padding:.9rem 1.2rem;border-top:1px solid var(--line)}
.dash-foot span{font:500 .78rem var(--mono);padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
@media (max-width:900px){.kpis{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}}
@media (max-width:560px){.kpi b{font-size:1.25rem}.kpi{padding:.8rem}.hm{grid-template-columns:1.7rem repeat(16,1fr);gap:2px}.wf{height:8rem}.tbl{font-size:.8rem}.tbl .hide-s{display:none}}

/* money band */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.row{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;padding-block:1rem;border-bottom:1px solid rgba(230,240,237,.14)}
.row .k{font:500 .8rem var(--mono);color:var(--ball);padding-top:.2rem;min-width:4.5rem}
.row h3{color:var(--band-ink)}
.row p{grid-column:2;color:var(--band-muted);font-size:.95rem}
@media (max-width:820px){.ledger{grid-template-columns:1fr}}

/* families */
.wallet{background:var(--surface);border:1px solid var(--line);border-radius:1.2rem;padding:1.4rem;display:grid;gap:.8rem}
.member{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem .9rem;border-radius:.8rem;background:var(--teal-soft);font-size:.95rem}
.member span{font:500 .78rem var(--mono);color:var(--muted)}
.member b{font-weight:600}
.pack{border:2px dashed var(--teal);border-radius:.9rem;padding:.9rem;display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;flex-wrap:wrap}
.pack b{font:700 1rem var(--mono)}

/* switching */
.steps{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:500}
.steps li::before{content:counter(s);font:700 .75rem var(--mono);width:1.4rem;height:1.4rem;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.switch-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.switch-notes div{display:grid;gap:.3rem;min-width:0}
.switch-notes p{color:var(--muted);font-size:.95rem}
@media (max-width:820px){.switch-notes{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;font:700 1.08rem var(--display);font-stretch:110%}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.4rem var(--mono);color:var(--teal);transition:transform .2s ease-out}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.1rem;color:var(--muted);max-width:40rem}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* cta */
.cta{background:var(--teal-soft);border-radius:1.6rem;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.cta .actions{display:grid;gap:.8rem;justify-items:start}
.contact{font:500 .95rem var(--mono);color:var(--muted)}
@media (max-width:820px){.cta{grid-template-columns:1fr}}

footer{padding-block:2rem 3rem;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer a{text-decoration:none}footer a:hover{color:var(--ink);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.btn,.tier,.phone *{transition:none}.btn:hover{transform:none}.tier.on{transform:none}}

/* multi-page additions */
.nav ul a[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--ball);text-decoration-thickness:3px;text-underline-offset:.45em}
.menu nav a[aria-current="page"]{background:var(--teal-soft);font-weight:600}
.page-head{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem)}
.page-head .wrap{display:grid;gap:1.2rem}
.page-head h1{font-size:clamp(2.2rem,5vw,3.8rem);max-width:20ch}
.jump{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.jump a{font-size:.9rem;font-weight:600;padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:var(--surface)}
.jump a:hover{border-color:var(--teal)}
.cta-sec{padding-top:clamp(3rem,6vw,4.5rem)}
.teasers{display:grid;gap:clamp(3.5rem,8vw,6rem)}
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.teaser.rev .t-vis{order:-1}
.t-copy{display:grid;gap:1rem;justify-items:start}
.t-copy .more{font-weight:600;text-decoration:none;border-bottom:2px solid var(--ball);padding-bottom:.1rem}
.t-copy .more:hover{border-color:var(--teal)}
.t-vis{min-width:0;display:grid;justify-items:center}
@media (max-width:860px){.teaser{grid-template-columns:1fr}.teaser.rev .t-vis{order:0}}

/* team pages */
.for{font:600 .85rem var(--body);color:var(--teal);display:inline-flex;align-items:center;gap:.5rem}
.for::before{content:'';width:.6rem;height:.6rem;border-radius:50%;background:var(--ball)}

/* ---- v16: laptop-height sizing ---- */
section{padding-block:clamp(3rem,min(8vw,11vh),6rem)}
h1{font-size:clamp(2.2rem,min(6vw,8.5vh),4.4rem)}
h2{font-size:clamp(1.7rem,min(3.6vw,5.6vh),2.8rem)}
.hero{padding-block:clamp(2rem,min(6vw,8vh),5rem)}
.page-head{padding-block:clamp(2rem,min(6vw,8vh),4.5rem) clamp(1.5rem,3vw,2.5rem)}
.page-head h1{font-size:clamp(2rem,min(5vw,8vh),3.6rem)}
.head{margin-bottom:clamp(1.5rem,4vh,2.5rem)}
.ex-stage{min-height:min(30rem,62vh)}
.tv-shot .frame{max-width:58rem}
.teasers{gap:clamp(2.5rem,7vh,5rem)}

/* ---- before / with Apointa ---- */
.ba{display:grid;gap:.8rem}
.ba-head,.ba-row{display:grid;grid-template-columns:1fr 2.5rem 1fr;gap:1rem}
.ba-head{font:500 .75rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ba-row{align-items:stretch}
.ba-row p{margin:0;border-radius:1rem;padding:1rem 1.2rem}
.ba-row .b{border:1px dashed var(--line);color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent)}
.ba-row .a{background:var(--ink);color:var(--bg);font-weight:500}
.ba-row .arr{display:grid;place-items:center;color:var(--teal);font:600 1.3rem var(--mono)}
@media (max-width:700px){.ba-head{display:none}.ba-row{grid-template-columns:1fr;gap:.4rem}.ba-row .arr{transform:rotate(90deg);height:1.6rem}.ba-row + .ba-row{margin-top:.8rem}}

/* ---- campaign audience mock ---- */
.aud{background:var(--surface);border:1px solid var(--line);border-radius:1.4rem;padding:1.3rem;display:grid;gap:.9rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.35);min-width:0}
.aud-top{display:flex;justify-content:space-between;align-items:center}
.aud-rules{display:grid;gap:.4rem}
.aud-rules div{display:grid;grid-template-columns:6rem 1fr;gap:.6rem;align-items:center;padding:.55rem .7rem;border-radius:.7rem;background:var(--teal-soft);font-size:.92rem}
.aud-rules div.ex{background:transparent;border:1px dashed var(--line)}
.aud-rules span{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.aud-count{display:flex;align-items:baseline;gap:.5rem}
.aud-count b{font:800 2.2rem var(--display);font-stretch:112%;font-variant-numeric:tabular-nums}
.aud-count span{color:var(--muted)}
.aud-ch{display:flex;gap:.4rem;flex-wrap:wrap}
.aud-ch span{padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line);font-size:.88rem;font-weight:600}
.aud-ch .on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---- live feed mock ---- */
.feed{background:var(--surface);border:1px solid var(--line);border-radius:1.4rem;padding:1.1rem;display:grid;gap:.4rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.35);min-width:0}
.feed-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.fi{display:grid;grid-template-columns:.6rem 1fr auto;gap:.8rem;align-items:center;padding:.65rem .7rem;border-radius:.8rem}
.fi.warn{background:#fdf3e7}
:root[data-theme="dark"] .fi.warn{background:#3a2a17}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fi.warn{background:#3a2a17}}
.fi i{width:.6rem;height:.6rem;border-radius:50%}
.fi i.g{background:var(--teal)}.fi i.o{background:#c2410c}
.fi b{font-weight:600;font-size:.95rem;display:block}
.fi small{color:var(--muted);font-size:.82rem}
.fi > span{font:500 .75rem var(--mono);color:var(--muted)}
.tbl td.ok{color:var(--teal);font-weight:600}

/* ---- v16: tournaments side-by-side on desktop ---- */
@media (min-width:861px){
  #tournaments > .wrap{display:grid;grid-template-columns:.8fr 1.2fr;column-gap:clamp(2rem,4vw,3.5rem);align-items:center}
  #tournaments > .wrap > .head,#tournaments > .wrap > .formats{grid-column:1}
  #tournaments > .wrap > .tv-shot{grid-column:2;grid-row:1 / span 2;margin-top:0}
  #tournaments > .wrap > .shots,#tournaments > .wrap > .facts{grid-column:1 / -1}
}

/* ---- v16: wide but short screens (15-inch laptops at 125% scaling) ---- */
@media (min-width:861px) and (max-height:860px){
  .ex-tabs .tab{padding:.5rem .9rem}
  .ex-tabs .tab small{display:none}
  .ex-tabs .label{margin:.5rem 0 .2rem}
  .ex-stage{min-height:0;padding:1.5rem}
  .bars{height:6rem}
  .wf{height:7rem}
  .kpi{padding:.75rem .9rem}
  .kpi b{font-size:1.3rem}
  .dash-body{padding:1rem;gap:.8rem}
  .dash-body > [role="tabpanel"]{gap:.8rem}
  .card{padding:.85rem;gap:.6rem}
  .hm{max-width:30rem}
  .tier{padding:.7rem 1rem}
  .calc{padding:1.1rem;gap:.8rem}
  .shots{gap:1.2rem;margin-top:2rem}
  .facts{margin-top:1.8rem;padding-top:1.4rem}
  .page-head{padding-block:2rem 1.5rem}
}

/* ---- v17: compact team cards on home ---- */
.team-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:1rem}
.team-card{position:relative;display:grid;align-content:start;gap:.7rem;padding:1.3rem 1.3rem 3.2rem;border:1px solid var(--line);border-radius:1.2rem;background:var(--surface);text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s}
.alt .team-card{background:var(--bg)}
.team-card b{font:800 1.2rem/1.15 var(--display);font-stretch:112%}
.tc-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.tc-tags i{font-style:normal;font-size:.78rem;padding:.2rem .55rem;border-radius:999px;background:var(--teal-soft)}
.tc-go{position:absolute;left:1.3rem;bottom:1.1rem;font:600 1.1rem var(--mono);color:var(--teal);transition:transform .2s}
.team-card:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(16,48,46,.4)}
.team-card:hover .tc-go{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.team-card,.tc-go{transition:none}.team-card:hover{transform:none}}

/* ---- v20: tournament format groups ---- */
.formats{display:grid;gap:.9rem}
.formats .fg{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.formats .fg p{width:100%;margin:0 0 .1rem;font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--band-muted)}
.fdef{display:grid;gap:.35rem;margin:.2rem 0 0;font-size:.9rem;color:var(--band-muted)}
.fdef div{display:flex;gap:.5rem;flex-wrap:wrap}
.fdef dt{font-weight:600;color:var(--band-ink)}
.fdef dd{margin:0}

/* ---- v20: Club Live illustration ---- */
.cl-points{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cl-points div{display:grid;gap:.15rem;border-top:2px solid var(--ink);padding-top:.6rem}
.cl-points span{color:var(--muted);font-size:.93rem}
.cl{background:#0f1716;color:#e6f0ed;border-radius:1.4rem;padding:1.2rem;display:grid;gap:1rem;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);min-width:0;overflow:hidden}
.cl-top{display:flex;justify-content:space-between;align-items:baseline}
.cl-top b{font:800 1.05rem var(--display);font-stretch:112%}
.cl-top span{font:500 .8rem var(--mono);color:#9fb8b3}
.cl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.cl-kpis div{background:#18231f;border-radius:.7rem;padding:.55rem .65rem;display:grid;gap:.1rem;min-width:0}
.cl-kpis span{font-size:.7rem;color:#9fb8b3}
.cl-kpis b{font:700 .95rem var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-scene{height:12rem;display:grid;place-items:center;perspective:900px;background:radial-gradient(ellipse at center,#1d2b27 0%,#0f1716 70%);border-radius:1rem;overflow:hidden}
.cl-floor{display:grid;grid-template-columns:repeat(4,3.6rem);gap:.55rem;transform:rotateX(58deg) rotateZ(-32deg);transform-style:preserve-3d}
.cl-floor i{height:5.2rem;border-radius:.3rem;border:2px solid rgba(255,255,255,.55);box-shadow:0 10px 0 rgba(0,0,0,.35)}
.cl-floor i.u,.cl-legend i.u{background:#2f8f86}
.cl-floor i.s,.cl-legend i.s{background:#d7ea4f}
.cl-floor i.f,.cl-legend i.f{background:#3a4a46}
@media (prefers-reduced-motion:no-preference){.cl-floor i.s{animation:clpulse 2s ease-in-out infinite}@keyframes clpulse{50%{filter:brightness(1.25)}}}
.cl-legend{display:flex;gap:1rem;font-size:.78rem;color:#9fb8b3;flex-wrap:wrap}
.cl-legend span{display:inline-flex;align-items:center;gap:.35rem}
.cl-legend i{width:.7rem;height:.7rem;border-radius:.2rem;display:inline-block}
.cl-feed{display:grid;gap:.3rem;font-size:.82rem}
.cl-feed div{display:flex;gap:.6rem}
.cl-feed em{font-style:normal;font:500 .75rem var(--mono);color:#9fb8b3}
.cl-note{font-size:.75rem;color:#9fb8b3}
@media (max-width:560px){.cl-kpis{grid-template-columns:1fr 1fr}.cl-points{grid-template-columns:1fr}.cl-floor{grid-template-columns:repeat(4,2.6rem)}.cl-floor i{height:3.8rem}}

/* ---- v20: AI assistant ---- */
.ai-try{display:flex;flex-wrap:wrap;gap:.4rem}
.ai-try span{font-size:.88rem;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.alt .ai-try span{background:var(--bg)}
.ai-note{font-size:.9rem;color:var(--muted);border-left:0;padding:.7rem .9rem;border-radius:.8rem;background:var(--teal-soft)}
.ai{background:var(--surface);border:1px solid var(--line);border-radius:1.4rem;padding:1.2rem;display:grid;gap:.7rem;box-shadow:0 30px 60px -30px rgba(16,48,46,.35);min-width:0}
.alt .ai{background:var(--bg)}
.ai-top{display:flex;justify-content:space-between;align-items:center}
.ai-top span{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:.25rem .55rem;border-radius:999px;background:var(--teal-soft);color:var(--teal)}
.ai-q{justify-self:end;max-width:85%;background:var(--ink);color:var(--bg);border-radius:1rem 1rem .2rem 1rem;padding:.65rem .9rem;font-size:.92rem}
.ai-a{justify-self:start;max-width:92%;background:var(--teal-soft);border-radius:1rem 1rem 1rem .2rem;padding:.75rem .9rem;font-size:.92rem;line-height:1.5}

/* ---- v21: Club Live screenshot ---- */
.cl-shot{display:grid;gap:.7rem}
.cl-shot figcaption{color:var(--muted);font-size:.85rem}
.cl-row{grid-template-columns:repeat(4,1fr);margin-top:2rem}
@media (max-width:860px){.cl-row{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cl-row{grid-template-columns:1fr}}
@media (min-width:861px) and (max-height:860px){.cl-shot .frame{max-width:62rem}}

/* ---- v22: Club Live showcase on home ---- */
.showcase .wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.show-head{display:grid;gap:1.1rem;justify-items:start}
.show-shot{display:grid;gap:.6rem}
.show-shot figcaption{color:var(--band-muted);font-size:.82rem}
.more-dark{color:var(--band-ink);border-bottom-color:var(--ball)}
.more-dark:hover{color:var(--ball)}
@media (max-width:860px){.showcase .wrap{grid-template-columns:1fr}}

/* ---- v23: home additions ---- */
.eh .eh-out{display:grid;gap:.7rem;border-top:1px solid var(--line);padding-top:1rem}
.eh-out div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.eh-out span{color:var(--muted);font-size:.9rem}
.eh-out b{font:800 1.4rem var(--display);font-stretch:112%;font-variant-numeric:tabular-nums}
.eh-out .big{background:#10302e;color:#e6f0ed;border-radius:.9rem;padding:.9rem 1rem}
.eh-out .big span{color:#9fb8b3}
.eh-out .big b{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ball)}
.eh-out p{font-size:.95rem}
.eh-out p b{font:700 1rem var(--body)}
.gulf{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:1rem}
.gulf > div{border:1px solid var(--line);border-radius:1.2rem;padding:1.3rem;display:grid;gap:.4rem;align-content:start;background:var(--surface)}
.alt .gulf > div{background:var(--bg)}
.gulf > div > b{font:800 1.5rem var(--display);font-stretch:112%;color:var(--teal);letter-spacing:-.01em}
.gulf p{color:var(--muted);font-size:.95rem}
.gulf .g-big{grid-row:span 2;background:#10302e!important;color:#e6f0ed;border-color:#10302e;align-content:end;min-height:16rem}
.gulf .g-big > b{font-size:clamp(3rem,7vw,5rem);color:var(--ball);line-height:1}
.gulf .g-big p{color:#9fb8b3}
@media (max-width:900px){.gulf{grid-template-columns:1fr 1fr}.gulf .g-big{grid-column:span 2;grid-row:auto;min-height:0}}
@media (max-width:560px){.gulf{grid-template-columns:1fr}.gulf .g-big{grid-column:auto}}
.go{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:none}
.go li{position:relative;border:1px solid var(--line);border-radius:1.2rem;padding:1.4rem;display:grid;gap:.5rem;align-content:start;background:var(--surface)}
.alt .go li{background:var(--bg)}
.go-n{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:800 1.1rem var(--display);margin-bottom:.4rem}
.go li:not(:last-child)::after{content:"";position:absolute;top:2.6rem;right:-1rem;width:1rem;height:2px;background:var(--line)}
.go p{color:var(--muted);font-size:.95rem}
@media (max-width:860px){.go{grid-template-columns:1fr}.go li::after{display:none}}

/* ---- v24: Club Live as a floating 3D scene ---- */
.live-viz{position:relative;display:grid;gap:.8rem;margin:0}
.lv-stage{position:relative;overflow:hidden;border-radius:2rem;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 48%,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 70% at 50% 48%,#000 55%,transparent 100%)}
.lv-stage img{display:block;width:100%;height:auto;transform-origin:55% 45%}
.on-dark .lv-stage img{filter:saturate(1.08) contrast(1.03)}
@media (prefers-reduced-motion:no-preference){
  .lv-stage img{animation:lvdrift 26s ease-in-out infinite alternate}
  @keyframes lvdrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
  .lv-chip{animation:lvfloat 6s ease-in-out infinite}
  .lv-c{animation-delay:-2s}.lv-d{animation-delay:-4s}
  @keyframes lvfloat{50%{transform:translateY(-6px)}}
  .lv-dot{animation:lvpulse 1.6s ease-in-out infinite}
  @keyframes lvpulse{50%{box-shadow:0 0 0 6px rgba(215,234,79,0)}}
}
.lv-chip{position:absolute;display:grid;gap:.1rem;padding:.6rem .85rem;border-radius:.9rem;background:rgba(255,255,255,.94);color:#10302e;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);backdrop-filter:blur(6px);font-size:.78rem;line-height:1.3;white-space:nowrap}
.lv-chip span{color:#4d6663}
.lv-chip b{font:700 .95rem var(--mono);font-variant-numeric:tabular-nums}
.lv-a{top:6%;left:7%;display:flex;align-items:center;gap:.5rem;font-weight:600;background:#10302e;color:#e6f0ed}
.lv-dot{width:.55rem;height:.55rem;border-radius:50%;background:#d7ea4f;box-shadow:0 0 0 0 rgba(215,234,79,.6)}
.lv-b{top:9%;right:6%}
.lv-c{bottom:20%;left:4%}
.lv-d{bottom:12%;right:8%}
.live-viz figcaption{font-size:.82rem;text-align:center;color:var(--muted)}
.on-dark figcaption{color:var(--band-muted)}
@media (max-width:640px){.lv-chip{font-size:.68rem;padding:.4rem .6rem}.lv-chip b{font-size:.8rem}.lv-d{display:none}.lv-c{bottom:14%}}

/* ---- v24b: stronger fade on dark, cap width on light ---- */
.on-dark .lv-stage{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 48%,#000 38%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 48%,#000 38%,transparent 100%)}
.on-light{max-width:64rem;margin-inline:auto;width:100%}
.on-light .lv-stage{-webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 48%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 70% 66% at 50% 48%,#000 50%,transparent 100%)}

/* ---- v25: Club Live video ---- */
.lv-stage .lv-video{display:block;width:100%;height:auto;background:#e9eceb}
.lv-stage .lv-video{animation:none!important;transform:scale(1.03)}