[data-theme="dark"]{
  --bg:#05080C;--bg2:#080D13;--panel:#0E151D;--panel2:#131C26;
  --soft:rgba(255,255,255,.055);--bd:rgba(255,255,255,.15);--bd2:rgba(255,255,255,.075);
  --tx:#EAF1F6;--tx2:#A8B8C6;--tx3:#75879a;
  --brand:#FFC24B;--brandi:#180F00;--acc:#5FD9C6;--accbd:rgba(95,217,198,.4);
  --mark:#FFC24B;--hdbg:rgba(5,8,12,.86);--ovl:rgba(0,0,0,.7);
  --shadow:0 18px 46px rgba(0,0,0,.55);
  --lamp:#FFE6AE;--glow:rgba(255,194,75,.35);
  --stripA:#05080C;--stripB:#121A22;--stripTx:#A8B8C6;--stripName:#FFC24B;--stripBd:rgba(255,194,75,.28)}
[data-theme="light"]{
  --bg:#F4F1EA;--bg2:#FFFFFF;--panel:#FFFFFF;--panel2:#EFEADF;
  --soft:#EDE8DC;--bd:#D8D0BF;--bd2:#E7E1D3;
  --tx:#181410;--tx2:#4A4238;--tx3:#6C6355;
  --brand:#9A6A08;--brandi:#FFFBF2;--acc:#0E6E62;--accbd:#A6D6CE;
  --mark:#9A6A08;--hdbg:rgba(244,241,234,.92);--ovl:rgba(24,20,16,.4);
  --shadow:0 14px 34px rgba(24,20,16,.09);
  --lamp:#B98B22;--glow:rgba(154,106,8,.2);
  --stripA:#05080C;--stripB:#121A22;--stripTx:#A8B8C6;--stripName:#FFC24B;--stripBd:rgba(255,194,75,.28)}

:root{--f-d:'Syne','Manrope',system-ui,sans-serif;--f-u:'Manrope',system-ui,sans-serif;
  --r:9px;--rl:13px;--max:780px;--f-hand:'Caveat','Manrope',cursive}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f-u);
  font-size:16px;line-height:1.6;overflow-x:clip;
  transition:background .4s ease,color .4s ease}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-d);letter-spacing:-.028em;line-height:1.07;margin:0}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:20px}
.eyebrow{font:700 11px var(--f-u);letter-spacing:.16em;color:var(--acc);
  margin:0 0 12px;text-transform:uppercase}
[lang-vi]{display:none!important}
[data-lang="vi"] [lang-en]{display:none!important}
[data-lang="vi"] [lang-vi]{display:revert!important}
html[data-lang="vi"]{--f-d:'Manrope',system-ui,sans-serif}
.mk{color:var(--mark);overflow:visible;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 15px var(--f-u);border-radius:var(--r);padding:15px 18px;min-height:52px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform .15s ease,filter .2s ease,background .2s ease,box-shadow .2s ease;min-width:0}
.btn:active{transform:translateY(1px)}
.b1{background:var(--brand);color:var(--brandi)}
.b1:hover{filter:brightness(1.08)}
.b2{border-color:var(--bd);color:var(--tx);background:transparent}
.b2:hover{background:var(--soft)}
.brow{display:flex;gap:10px;margin-top:22px}
.brow .btn{flex:1}

header{position:sticky;top:0;z-index:60;background:var(--hdbg);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bd2)}
.hd{display:flex;align-items:center;gap:8px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font:800 18px var(--f-d);
  letter-spacing:-.02em;background:none;border:0;padding:6px 4px;margin-inline-start:-4px;
  color:var(--tx);cursor:pointer;min-height:44px;min-width:0}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools{display:flex;align-items:center;gap:2px;margin-inline-start:auto;flex:none}
@media(max-width:359px){.brand{font-size:16px;gap:7px}
  .lang{width:40px}.icb{width:40px}}
/* ── one flag, and it shows what you are switching TO ──────────── */
.lang{width:44px;height:44px;border-radius:11px;border:1px solid var(--bd2);
  background:none;display:grid;place-items:center;padding:0;cursor:pointer}
.lang:hover{background:var(--soft)}
.lang .flag{width:26px;height:17px;border-radius:2.5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.22)}
.lang .f-vn{display:none}
[data-lang="en"] .lang .f-us{display:none}
[data-lang="en"] .lang .f-vn{display:block}
.icb{background:none;border:0;width:44px;height:44px;border-radius:11px;color:var(--tx2);
  display:grid;place-items:center;cursor:pointer;font-size:17px}
.icb:hover{background:var(--soft)}
/* 1 Oct 2026 — the sun/moon is drawn, not typed. As a text character (☀ ☾) each
   phone drew it in its own font and at its own height, so it could not sit
   exactly in the middle of its 44px button. The same drawn icons as Pool, Spa
   and Pilates; dark shows the sun, light the moon, as before. */
#themeb svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#themeb .ic-moon{display:none}
[data-theme="light"] #themeb .ic-sun{display:none}
[data-theme="light"] #themeb .ic-moon{display:block}


.nav{position:fixed;inset:0;z-index:70;background:var(--ovl);opacity:0;
  pointer-events:none;transition:opacity .25s ease}
.nav.on{opacity:1;pointer-events:auto}
.navp{position:absolute;inset-inline:0;top:0;background:var(--bg2);
  border-bottom:1px solid var(--bd);padding:14px 20px 22px;
  transform:translateY(-102%);transition:transform .34s cubic-bezier(.2,.85,.25,1);
  max-width:var(--max);margin:0 auto}
.nav.on .navp{transform:none}
.navh{display:flex;align-items:center;height:46px;margin-bottom:6px}
.navh b{font:800 16px var(--f-d)}
.navh .icb{margin-inline-start:auto}
.nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--bd2);
  text-decoration:none;font-weight:700;font-size:16px;gap:10px}
.nav a:last-of-type{border-bottom:0}
.nav a i{font-style:normal;color:var(--acc);font-size:13px;width:20px}
.nav .btn{margin-top:14px;width:100%}

section{padding:40px 0}
section[id],#board{scroll-margin-block-start:70px}
.shead{margin-bottom:22px}
.shead h2{font-size:clamp(25px,6.2vw,36px);margin-bottom:9px}
.shead p{color:var(--tx2);font-size:15.5px;max-width:60ch}
.alt{background:var(--bg2);border-block:1px solid var(--bd2)}
h1{font-size:clamp(33px,8.6vw,56px);margin-bottom:14px}
h1 em{font-style:normal;color:var(--brand)}
.lede{color:var(--tx2);font-size:clamp(15.5px,4.1vw,18px);max-width:62ch}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);
  border-radius:999px;padding:7px 13px;font:700 12px var(--f-u);color:var(--tx2);
  background:var(--panel);margin-bottom:16px}
.pill s{width:7px;height:7px;border-radius:50%;background:var(--brand);text-decoration:none;
  animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.trust{margin-top:20px;color:var(--tx3);font-size:13px;line-height:1.55}

.cards{display:grid;gap:12px}
.card{background:var(--panel);border:1px solid var(--bd2);border-radius:var(--rl);
  padding:17px;container-type:inline-size;box-shadow:var(--shadow)}
.card i{font-style:normal;display:grid;place-items:center;width:38px;height:38px;
  border-radius:10px;background:var(--soft);color:var(--brand);font-size:17px;
  margin-bottom:12px;flex:none}
.card h3{font-size:17px;margin-bottom:6px}
.card p{color:var(--tx2);font-size:14.5px}
@container (min-width:430px){
  .card{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start}
  .card i{margin-bottom:0;grid-row:span 2}}

.nots{display:grid;gap:10px}
.not{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  background:var(--panel);border:1px solid var(--bd2);border-radius:var(--rl);padding:14px 15px}
.not i{font-style:normal;color:var(--tx3);font-size:14px;line-height:1.5}
.not b{display:block;font:700 15px var(--f-u);margin-bottom:2px}
.not span{color:var(--tx3);font-size:13.5px;line-height:1.5}

.tiers{display:grid;gap:12px}
.tier{background:var(--panel);border:1px solid var(--bd2);border-radius:var(--rl);
  padding:17px;position:relative;box-shadow:var(--shadow)}
.tier.here{border-color:var(--brand);border-width:2px;padding:16px}
.tth{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.tth i{font-style:normal;font-size:17px;color:var(--brand)}
.tth h3{font-size:19px}
.tth u{margin-inline-start:auto;text-decoration:none;font:800 9.5px var(--f-u);
  letter-spacing:.12em;background:var(--brand);color:var(--brandi);
  padding:5px 8px;border-radius:999px;white-space:nowrap}
.tprice{font:800 20px var(--f-d);margin:8px 0 3px}
.tsub{font-weight:700;font-size:14px;margin-bottom:5px}
.tier p{color:var(--tx2);font-size:14px}
.tier .ann{margin-top:8px;font-size:12.5px;color:var(--tx3)}

.pcard{background:var(--panel);border:1px solid var(--bd);border-radius:var(--rl);
  overflow:hidden;box-shadow:var(--shadow)}
.prow{display:flex;align-items:baseline;gap:12px;padding:14px 16px;border-block-end:1px solid var(--bd2)}
.prow span{font-size:14px;color:var(--tx2);min-width:0}
.prow b{margin-inline-start:auto;font:800 16px var(--f-d);white-space:nowrap;text-align:end}
.prow.big b{font-size:24px;color:var(--brand)}
.prow.free b{color:var(--acc)}
.plist{padding:14px 16px 4px}
.plist div{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-bottom:11px;
  font-size:14.5px;color:var(--tx2);align-items:start}
.plist i{font-style:normal;color:var(--brand);font-weight:800;line-height:1.5}
.pfoot{padding:4px 16px 16px}
.pfoot .btn{width:100%}
.fine{margin-top:12px;color:var(--tx3);font-size:12.5px;line-height:1.55}

details{background:var(--panel);border:1px solid var(--bd2);border-radius:var(--rl);
  margin-bottom:10px;overflow:hidden}
summary{list-style:none;cursor:pointer;padding:15px 16px;font-weight:700;font-size:15.5px;
  display:flex;gap:12px;align-items:flex-start;min-height:54px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-inline-start:auto;color:var(--brand);font-weight:800;
  font-size:19px;line-height:1.2;flex:none}
details[open] summary::after{content:"\2013"}
details p{padding:0 16px 16px;color:var(--tx2);font-size:14.5px}

.band{background:var(--brand);color:var(--brandi);border-radius:var(--rl);
  padding:24px 20px;text-align:center}
.band h2{font-size:clamp(23px,5.8vw,31px);margin-bottom:9px;color:var(--brandi)}
.band p{opacity:.88;font-size:15px}
.band .brow{justify-content:center}
.band .b1{background:var(--brandi);color:var(--brand)}
.band .b2{border-color:color-mix(in srgb,var(--brandi) 45%,transparent);color:var(--brandi)}
.band .b2:hover{background:color-mix(in srgb,var(--brandi) 14%,transparent)}

/* ══ UNIVERSAL FOOTER — locked markup, every colour from a variable ══ */
footer{background:var(--bg);border-top:1px solid var(--bd)}
.fin{padding-block:30px 24px;text-align:center}
.fbrand{display:flex;align-items:center;justify-content:center;gap:10px;font:800 19px var(--f-d);
  letter-spacing:-.02em;color:var(--tx);background:none;border:0;padding:6px 4px;
  margin:0 auto;min-height:44px;cursor:pointer}
.fbrand .mk{color:var(--mark);width:26px;height:26px;flex:none}
.ftag{color:var(--tx3);font-size:13.5px;line-height:1.5;margin:8px auto 0;max-width:36ch}
.frule{height:1px;background:var(--bd2);margin:20px 0}
.frow{display:flex;flex-wrap:wrap;justify-content:center}
.flink{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 9px;
  font:600 14.5px var(--f-u);color:var(--tx2);cursor:pointer;background:none;border:0;
  text-decoration:none}
.flink:hover{color:var(--brand)}
.ftiers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.tchip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
  border:1px solid var(--bd);border-radius:999px;font:700 13.5px var(--f-u);color:var(--tx2);
  background:var(--panel);cursor:pointer}
.tchip i{font-style:normal;color:var(--tx3);font-size:12px}
.tchip[aria-current="true"]{border-color:var(--brand);color:var(--tx);background:var(--panel2)}
.tchip[aria-current="true"] i{color:var(--brand)}
.fco{display:block;color:var(--tx3);font-size:12.5px;line-height:1.65;margin-top:16px}
.brandfoot{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  white-space:nowrap;position:relative;
  padding:21px 14px calc(32px + env(safe-area-inset-bottom));
  background:linear-gradient(90deg,var(--stripA),var(--stripB) 45%,var(--stripA));
  color:var(--stripTx);overflow:hidden}
/* the credit row (Spa's spec, 8 Oct): a 1px rule in the theme's line colour,
   inset 16px; 20px from the rule to the text; 32px + the safe area under it */
.brandfoot::before{content:"";position:absolute;top:0;inset-inline:16px;height:1px;
  background:var(--bd)}
.brandfoot>*{line-height:1}
.bf1{font:600 9.5px var(--f-u);letter-spacing:.16em;text-transform:uppercase;
  margin-inline-end:12px;flex:none;overflow:visible;text-overflow:clip}
.bf2{font:800 11.5px var(--f-d);letter-spacing:.04em;color:var(--stripTx)}
.bolt{margin:0 11px;font-size:11px;line-height:1}
/* under 340px the four words do not fit one line: "POWERED BY" takes its own
   line and the name, bolt and product sit under it; nothing is ever cut */
@media(max-width:339.98px){
  .brandfoot{flex-wrap:wrap;row-gap:6px}
  .bf1{flex-basis:100%;margin-inline-end:0;text-align:center}
}
.bf3{font:800 11.5px var(--f-d);letter-spacing:.04em;color:var(--stripName)}

/* hub tier cards get a real way through */
.tgo{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:46px;
  margin-top:13px;border-radius:var(--r);border:1px solid var(--bd);background:var(--panel2);
  color:var(--tx);font:700 13.5px var(--f-u);cursor:pointer}
.tgo::after{content:"\2192";font-weight:800;color:var(--brand)}
.tgo:hover{background:var(--brand);color:var(--brandi);border-color:var(--brand)}
.tgo:hover::after{color:var(--brandi)}
.tier.here .tgo{background:var(--brand);color:var(--brandi);border-color:var(--brand)}
.tier.here .tgo::after{color:var(--brandi)}
.prow.cmp{align-items:baseline;flex-wrap:wrap}
.prow.cmp span{font-size:14px}
.prow.cmp span b{font:800 15px var(--f-d);color:var(--tx);margin-inline-end:2px}
.prow.cmp em{flex-basis:100%;font-style:normal;font-size:12px;color:var(--tx3)}

#toast{position:fixed;inset-block-end:calc(18px + env(safe-area-inset-bottom));
  inset-inline:16px;z-index:90;background:var(--tx);color:var(--bg);border-radius:12px;
  padding:14px 16px;font-size:14px;font-weight:600;text-align:center;opacity:0;
  transform:translateY(12px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  max-width:520px;margin:0 auto}
#toast.on{opacity:1;transform:none}

/* scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.25,1),transform .7s cubic-bezier(.2,.8,.25,1)}
.rv.in{opacity:1;transform:none}

@media(min-width:640px){
  .cards{grid-template-columns:1fr 1fr}
  .nots{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr 1fr 1fr;align-items:start}
  section{padding:56px 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

.hero{position:relative;padding:0 0 30px;overflow:hidden}
.cw{position:relative;width:100%;height:clamp(360px,96vw,520px);overflow:hidden;
  background:linear-gradient(180deg,#04070B,#0A1119 60%,#0C141C)}
[data-theme="light"] .cw{background:linear-gradient(180deg,#0A1119,#0C141C)}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.cw::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--bg) 70%,transparent) 80%,var(--bg) 100%)}
.htext{position:relative;z-index:2;margin-top:-70px}
.lampline{position:absolute;z-index:3;inset-block-start:14px;inset-inline:0;
  display:flex;justify-content:center;gap:7px}
.lampline i{width:26px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);
  transition:background .5s ease,box-shadow .5s ease}
.lampline i.on{background:var(--lamp);box-shadow:0 0 12px var(--lamp),0 0 26px var(--glow)}
.hero h1{text-shadow:0 6px 34px rgba(0,0,0,.65)}
[data-theme="light"] .hero h1{text-shadow:none}
.hero .lede{text-shadow:0 3px 18px rgba(0,0,0,.55)}
[data-theme="light"] .hero .lede{text-shadow:none}
.pill{background:rgba(10,16,22,.72);border-color:rgba(255,255,255,.2);color:#D8E3EC;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
[data-theme="light"] .pill{background:var(--panel);border-color:var(--bd);color:var(--tx2)}
.pill s{background:var(--lamp);box-shadow:0 0 9px var(--lamp)}

.b1{box-shadow:0 8px 30px var(--glow)}

/* section headings get a light sweep on reveal. The sweep slides 300% of its
   own width to the right, past the edge of a phone: clip it to the section so
   the page never grows sideways while it runs (row 23, 1 Oct). */
.shead{overflow-x:clip}
.shead h2{position:relative;display:inline-block}
.shead h2::after{content:"";position:absolute;inset-block:-6px;inset-inline-start:-8%;width:34%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lamp) 26%,transparent),transparent);
  opacity:0;pointer-events:none;filter:blur(6px)}
.shead.in h2::after{animation:sweep 1.5s ease .25s 1}
@keyframes sweep{0%{opacity:0;transform:translateX(-40%)}25%{opacity:1}100%{opacity:0;transform:translateX(300%)}}

/* the evening board */
.sig{background:var(--panel);border:1px solid var(--bd2);border-radius:var(--rl);
  overflow:hidden;box-shadow:var(--shadow)}
.bh{display:flex;align-items:center;gap:9px;padding:14px 15px;border-bottom:1px solid var(--bd2);
  background:var(--panel2)}
.bh b{font:800 14px var(--f-d)}
.bh span{font-size:12px;color:var(--tx3)}
.bh u{margin-inline-start:auto;text-decoration:none;font:800 10px var(--f-u);letter-spacing:.12em;
  color:var(--brandi);background:var(--brand);padding:5px 9px;border-radius:999px;
  box-shadow:0 0 16px var(--glow)}
.grid{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gt{border-collapse:collapse;width:100%;min-width:312px;font-size:12.5px;table-layout:fixed}
.gt th,.gt td{border-inline-end:1px solid var(--bd2);border-block-end:1px solid var(--bd2);padding:0;text-align:center}
.gt th:last-child,.gt td:last-child{border-inline-end:0}
.gt tr:last-child td{border-block-end:0}
.gt thead th{font:700 11px var(--f-u);color:var(--tx3);padding:9px 2px;letter-spacing:.05em;background:var(--panel2)}
.gt tbody th{font:700 11px var(--f-u);color:var(--tx3);width:46px;background:var(--panel2);padding:0 4px}
.gt tbody tr{opacity:.18;filter:saturate(.2);transition:opacity .75s ease,filter .75s ease}
.gt tbody tr.lit{opacity:1;filter:none}
.cell{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:5px 2px;min-width:0;position:relative}
.cell b{font:700 11px var(--f-u);line-height:1.15;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cell s{text-decoration:none;font-size:10.5px;color:var(--tx3)}
.full{background:color-mix(in srgb,var(--brand) 16%,transparent);box-shadow:inset 0 0 22px var(--glow)}
.play{background:color-mix(in srgb,var(--acc) 15%,transparent)}
.lesson{background:color-mix(in srgb,var(--acc) 9%,transparent)}
.open b{font-weight:600;color:var(--tx3)}
.open{color:var(--tx3)}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:12px 15px;border-top:1px solid var(--bd2);
  font:600 11.5px var(--f-u);color:var(--tx3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;font-style:normal}
.legend .l1{background:color-mix(in srgb,var(--brand) 60%,transparent)}
.legend .l2{background:color-mix(in srgb,var(--acc) 55%,transparent)}
.legend .l3{background:var(--soft);border:1px solid var(--bd2)}

.card{background:linear-gradient(180deg,var(--panel),var(--panel2));position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-start:-20%;
  width:70%;height:120%;background:radial-gradient(closest-side,var(--glow),transparent);
  opacity:0;transition:opacity .6s ease}
.card.in::before{opacity:.5}
.card i{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}

.tier.here{box-shadow:0 0 0 1px var(--brand),0 18px 48px var(--glow)}
.tier.here .tth i{filter:drop-shadow(0 0 8px var(--glow))}
.prow.big b{text-shadow:0 0 26px var(--glow)}

@media(min-width:640px){
  .cw{height:560px}
  .htext{margin-top:-96px}
}


/* ═══════════════════════════════════════════════════════════════
   HOW THE MENU ARRIVES

   Every page opens the same sitemap from the same wordmark. What
   differs is the second after the tap, and each page gets the one
   that belongs to it. A page declares its own on <html>:
   `data-open="flood"`. A page that declares nothing keeps the plain
   slide above, so this can never break a page it was not written for.

   flood — pickleballmanagerapp.vn, the floodlit-court page.
   The page dims to dusk, the panel lights rather than moves, and the
   rows strike on one bank at a time, top to bottom.
   ═══════════════════════════════════════════════════════════════ */
html[data-open="flood"] .nav{transition:opacity .34s ease}
html[data-open="flood"] .navp{transform:none;opacity:0;transition:none}
html[data-open="flood"] .nav.on .navp{animation:pmLampOn .30s ease forwards}
html[data-open="flood"] .nav.on .navh,
html[data-open="flood"] .nav.on a{animation:pmStrike .42s ease backwards}
html[data-open="flood"] .nav.on .navh{animation-delay:.16s}
html[data-open="flood"] .nav.on a:nth-of-type(1){animation-delay:.26s}
html[data-open="flood"] .nav.on a:nth-of-type(2){animation-delay:.365s}
html[data-open="flood"] .nav.on a:nth-of-type(3){animation-delay:.47s}
html[data-open="flood"] .nav.on a:nth-of-type(4){animation-delay:.575s}
html[data-open="flood"] .nav.on a:nth-of-type(5){animation-delay:.68s}
html[data-open="flood"] .nav.on .btn{animation-delay:.82s}
@keyframes pmLampOn{from{opacity:0}to{opacity:1}}
@keyframes pmStrike{
  0%{opacity:0;filter:brightness(2.4);text-shadow:0 0 14px var(--glow)}
  38%{opacity:1;filter:brightness(1.7);text-shadow:0 0 9px var(--glow)}
  100%{opacity:1;filter:none;text-shadow:none}}

@media(prefers-reduced-motion:reduce){
  html[data-open] .nav,
  html[data-open] .nav.on .navp,
  html[data-open] .nav.on .navh,
  html[data-open] .nav.on a{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html[data-open="flood"] .nav.on .navp{opacity:1}}


/* ═══ THE COMPARISON MATRIX ════════════════════════════════════
   Three tiers as columns, features as rows, ticked and not ticked. William:
   "like you're comparing iPhones and a Samsung."

   THIS BELONGS ON THE MAIN LANDING PAGE ONLY — never on baseline.html,
   rally.html or circuit.html. His rule, 15 Sep 2026: "Only on the app landing
   page, not on the three individual pages." Pilates, Pool and Spa already
   carry one; Pickleball was the only product without.

   ALL THREE COLUMNS SHOW AT EVERY WIDTH INCLUDING PHONE. No chips, no
   switching between cards — "people can't remember and click through things."
   That is why the columns are a fixed 44px and the feature column takes what
   is left, rather than a scroller or a tab set.

   The shape is Pool's `.mx` matrix, carried across so the two facility
   products read the same. The first row is the COURT COUNT, because that is
   the number a court owner states without thinking and, since 15 Sep, the
   thing that decides which version he buys.
   ═════════════════════════════════════════════════════════════════ */
.mx{margin-top:18px;border:1px solid var(--bd2);border-radius:var(--rl);
  background:var(--panel);overflow:hidden}
.mr{display:grid;grid-template-columns:1fr 44px 44px 44px;align-items:center;
  border-block-start:1px solid var(--bd2);text-align:start}
.mr:first-child{border-block-start:0}
.mr > span{padding:10px 12px;font-size:12.5px;line-height:1.35;color:var(--tx2)}
.mr > i{font-style:normal;text-align:center;padding:10px 0;font-weight:800;
  font-size:14px}

/* The head is NOT sticky, deliberately. Pool's is, because Pool's matrix runs
   nineteen rows down a longer page. Sticky here pinned the head over the first
   two rows the moment the section reached the top of the phone — and the first
   row is the COURT COUNT, the one number that decides which version a club
   buys. A header that hides the most important row is worse than no header.
   Seventeen rows read fine without it. */
.mr.hd{background:var(--panel2)}
.mr.hd > span{font:800 10px var(--f-u);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);padding-block:12px}
.mr.hd > i{display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--brand);font-size:15px;line-height:1;padding:10px 2px}
/* no letter-spacing: CIRCUIT is the longest name and 44px is all it gets */
.mr.hd > i u{text-decoration:none;font:800 8px var(--f-u);letter-spacing:0;
  text-transform:uppercase;color:var(--tx3)}

/* the court row and the price row are NUMBERS, not ticks */
.mr.num{background:var(--soft)}
.mr.num > span{color:var(--tx);font-weight:700}
.mr.num > i{font-family:var(--f-d);font-size:15px;color:var(--tx)}
.mr.price > span{font-size:11.5px;color:var(--tx3)}
.mr.price > i{font-family:var(--f-d);font-size:12.5px;font-weight:800;
  color:var(--brand);letter-spacing:-.02em}

.mr i.yes{color:var(--acc)}
.mr i.no{color:var(--tx3);opacity:.5;font-weight:400}
@media(max-width:359px){
  .mr{grid-template-columns:1fr 38px 38px 38px}
  .mr > span{padding-inline:9px;font-size:11.5px}
}


/* ═══ CENTRED HEADINGS — the house standard ═══════════════════════
   15 Sep 2026. William: "I need all the headers and sub headers to be
   center aligned. This needs to be global."

   Measured first, across all four products at 390: Pool, Spa and Pilates
   already centre every heading and the sub-line under it. Pickleball was
   the only one of the four still setting them to the start edge — every
   h1, h2 and h3 on index, baseline, rally and circuit. So this file is
   the only place that changes.

   The mechanism is Pool's, not a per-heading sweep: the section body
   centres (Pool does `.lp section{text-align:center}`), and the things
   that are LISTS rather than headings opt back out below, because a
   centred feature row or FAQ answer is harder to read, not smarter.
   Pool keeps exactly the same set on its edge — `.live`, `.steps li`,
   `.faq`, `.ad .an`, `.mr`.
   ═══════════════════════════════════════════════════════════════════ */
section,.hero{text-align:center}

/* a centred sub-line has to be a centred BLOCK too, or the max-width
   pins it to the start edge and only its text centres inside it */
.shead p,.lede,.ftag{margin-inline:auto}

/* feature cards: the icon rides with the heading it belongs to */
.card i{margin-inline:auto}

/* tier card heads centre; "YOU ARE HERE" joins the row instead of
   being pushed to the end by an auto margin */
.tth{justify-content:center;flex-wrap:wrap}
.tth u{margin-inline-start:0}

/* these read as lists and tables, and keep their edge */
.not,.plist div,.prow span,.prow em,.fine,
.bh,.legend,summary,details p{text-align:start}
.prow b{text-align:end}


/* ═══ THE TIER MARKS — "the kitchen" ══════════════════════════════
   15 Sep 2026. Chosen by William from three drawn options (round two,
   all three variations on "the court"): the face of the paddle IS the
   court board. The net runs straight across, the service line down the
   middle, and the courts light either side of the net — one for
   Baseline, two for Rally, four for Circuit.

   Until now every tier was a Unicode glyph — ▦ ● ◆ — which is a
   typeface's opinion, not a logo. The marks are inline SVG on
   currentColor, so a chip that is the current page, a tier card, and
   the matrix head each get the colour they already had.

   THE CIRCUIT MARK IS THE PRODUCT'S LOGO. His instruction: "use the
   circuit logo for all marketing — OG, Twitter, favicon and so forth."
   So the four-court version is the header wordmark, the footer
   wordmark, the favicon, the app icons and the mark on every OG card,
   while the one- and two-court versions only ever label their tier.

   The glyphs on the FEATURE cards (.card i) are decoration, not tier
   marks, and are deliberately left alone.
   ═══════════════════════════════════════════════════════════════════ */
.tth i,.tchip i{display:inline-flex}


/* ═══ THE ENQUIRY FORM — "at the price" ═══════════════════════════
   15 Sep 2026. William picked option C of three: the form lives INSIDE the
   pricing card, where "Ask which one fits" used to be. His reasoning is the
   card's: a price question happens while you are reading the prices, not two
   screens later.

   On the landing page it REPLACES the Zalo button — the details come first
   and the Zalo number is handed back once the row is saved. On a tier page it
   sits under that tier's "Start with …" button, because the trial is still
   the primary action there and the form is the quieter second.

   Fields are centred like everything else on these pages, and every control
   clears 44px. .enqok and the Zalo button are what replaces the form once it
   has sent.
   ═══════════════════════════════════════════════════════════════════ */
.enq{padding:4px 16px 18px}
.pcard .enq{border-block-start:1px solid var(--bd2);padding-block-start:16px;margin-top:2px}
.enq .enqlede{color:var(--tx2);font-size:14px;line-height:1.5;margin-bottom:13px}
.enq .fld{width:100%;min-height:52px;border:1px solid var(--bd);border-radius:var(--r);
  background:var(--bg2);color:var(--tx);font:500 15px var(--f-u);padding:14px 15px;
  text-align:center;margin-bottom:9px;display:block}
.enq .fld::placeholder{color:var(--tx3)}
.enq .fld:focus-visible{border-color:var(--brand)}
.enq .btn{width:100%;margin-top:4px}
.enq .btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.enq .enqmsg{margin-top:10px;font-size:13px;line-height:1.5;color:var(--tx2)}
.enq .enqpv{margin:14px auto 0;max-width:36ch;font-size:12px;line-height:1.5;color:var(--tx2);text-wrap:balance}
.enq .enqpv .pvk{display:inline-block;width:11px;height:12px;vertical-align:-1px;margin-right:5px}
.enq .enqpvl{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;font-weight:700;color:var(--acc);text-decoration:none}
.enq .enqpvl:hover{text-decoration:underline;text-underline-offset:3px}
.enq .enqmsg.bad{color:var(--brand);font-weight:700}
.enq .enqok{font:700 15px var(--f-u);line-height:1.5;margin-bottom:14px;color:var(--tx)}
/* the honeypot: invisible to a person, irresistible to a robot. Clipped
   rather than parked off-screen at -9999px, so it can never be the thing
   that widens a page. */
.enq .hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pfoot .enq{padding-inline:0}

/* 22 Sep 2026: menu and footer links jump to the form; land it below the sticky header */
#enq{scroll-margin-top:96px}
/* row 64, 9 Oct 2026: in English at 320 the Syne "Pickleball" was cut to "Pickle…" since the phone
   Sign in icon arrived (8c9caf1). Below 360 px the mark, its gap and the wordmark tighten so the name
   shows whole beside the flag, theme and person icons (needs 101 px, has 105). Vietnamese uses
   Manrope and already fits. */
@media (max-width:359px){#menub.brand{gap:5px;padding-inline:2px}#menub.brand .mk{width:20px;height:20px}
  html[data-lang=en] #menub.brand span{font-size:13.5px;letter-spacing:-.03em;text-overflow:clip}}
/* 16 px so iPhone never zooms into the enquiry fields (A12 / point 84, 22 Oct 2026) */
.enq .fld{font-size:16px}