/* Padeliga website. Structured calm, light only, same palette as the app. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/BarlowCondensed-700.woff2) format('woff2')}

:root{
  color-scheme:light;
  --bg:#F1EDE4; --sunk:#E7E1D4; --group:#FFFEFB; --surface:#FDFBF6;
  --ink:#13213B; --ink2:#3D4A63; --ink3:#4E5970;
  --edge:rgba(19,33,59,.12); --ctl:#8A7D66;
  --court:#1F5C97; --ball:#C5DF3F; --ball2:#E9F3C2; --clay:#A93E23;
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --r:14px; --r-lg:22px; --wrap:1120px; --gut:16px;
  /* layout scale (29 Sep 2026 layout pass, _research/layout-audit.md):
     --sy   the one gap between sections, --hd-h the sticky header height (anchors land 32px under it),
     --measure the reading column, about 75 characters of body text */
  --sy:clamp(60px,7.5vw,104px); --hd-h:65px; --measure:680px;
}
@media (min-width:760px){:root{--hd-h:73px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--court);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--court);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.01em;margin:0;color:var(--ink)}
h1{font-size:clamp(44px,11vw,76px);letter-spacing:-.015em}
h2{font-size:clamp(34px,7vw,48px)}
h3{font-size:24px;font-weight:600;line-height:1.1}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* ---------- header ---------- */
.hd{border-bottom:1px solid var(--edge);background:var(--bg)}
.hd .wrap{display:flex;align-items:center;gap:6px 12px;min-height:64px;flex-wrap:wrap;padding-top:8px}
.brand{display:block;line-height:0;padding:6px 0;margin-right:auto}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:4px;order:3;width:100%;margin:0 -10px;padding-bottom:6px}
.nav a{position:relative;color:var(--ink2);text-decoration:none;font-weight:500;font-size:16px;padding:10px 10px;border-radius:10px;line-height:1.2}
.nav a:hover{color:var(--ink);background:rgba(19,33,59,.05)}
.nav a[aria-current="page"]{color:var(--ink)}
.login{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--group);border:1px solid var(--ctl);color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.login:hover{background:#fff;border-color:var(--ink)}
@media (min-width:760px){
  .nav{order:0;width:auto;margin:0 8px 0 0;padding:0}
  .hd .wrap{min-height:72px;flex-wrap:nowrap;padding-top:0}
  .brand img{height:38px}
}

/* ---------- buttons, store badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;
  font:600 16px/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn.fill{background:var(--ink);color:#fff}
.btn.fill:hover{background:#0B1528}
.btn.soft{background:var(--group);color:var(--ink);border-color:var(--ctl)}
.btn.soft:hover{border-color:var(--ink)}
.stores{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-width:168px;min-height:54px;padding:6px 18px 7px;border-radius:12px;
  background:var(--ink);color:#fff;text-decoration:none;line-height:1.1}
.store small{font-size:12px;font-weight:500;opacity:.9}
.store b{font:600 21px/1.05 var(--display);letter-spacing:.01em}
a.store:hover{background:#0B1528}
.store.soon{background:transparent;color:var(--ink2);border:1px dashed var(--ctl)}
.store.soon b{color:var(--ink)}
.android-now{margin:14px 0 0;font-size:15px;color:var(--ink2)}
.android-now a{font-weight:600}

/* ---------- hero ---------- */
.hero{padding:34px 0 18px}
.hero .wrap{display:grid;gap:34px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--ink2);margin:0 0 16px}
.eyebrow::before{content:"";width:28px;height:4px;background:var(--ball);border-radius:2px}
.lede{font-size:19px;color:var(--ink2);max-width:34em;margin:18px 0 0}
.hero .shot{justify-self:center}
@media (min-width:900px){
  .hero{padding:64px 0 40px}
  .hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center;gap:48px}
  .hero .phone{width:310px}
  .lede{font-size:20px}
}

/* ---------- phone frame ---------- */
.phone{width:min(280px,76vw);border-radius:38px;background:var(--ink);padding:9px;box-shadow:0 30px 60px -30px rgba(19,33,59,.45)}
.phone img{border-radius:30px;width:100%;aspect-ratio:600/1298;background:var(--bg)}
.phone.sm{width:100%;max-width:230px;border-radius:30px;padding:7px}
.phone.sm img{border-radius:24px}
.laptop{border-radius:14px;background:var(--ink);padding:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.laptop img{border-radius:8px;width:100%;aspect-ratio:1180/800}

/* ---------- sections ---------- */
.sec{--pt:var(--sy);padding:var(--pt) 0 var(--sy)}
/* two paper sections in a row share one gap; a navy band keeps its own padding on both sides */
.sec.tight{--pt:calc(var(--sy) * .5)}
.sec:not(.band) + .sec:not(.band){--pt:0px}
.hero + .sec.tight{--pt:calc(var(--sy) * .25)}
.page-head + .sec{--pt:32px}
.sec-head{max-width:40em;margin:0 0 28px}
.sec-head h2::before{content:"";display:block;width:40px;height:5px;background:var(--ball);border-radius:3px;margin:0 0 16px}
.sec-head p{color:var(--ink2);font-size:18px;margin:14px 0 0}
.center .sec-head h2::before{margin-inline:auto}
.center p{margin-inline:auto}
@media (min-width:900px){.sec-head{margin-bottom:40px}}
/* body text never runs past about 75 characters a line */
:where(main) :where(p,li,dd){max-width:34em}
/* a heading column beside its content (For clubs FAQ and enquiry form) */
.rail{display:grid;gap:0 64px}
@media (min-width:1000px){
  .rail{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}
  .rail > .sec-head{position:sticky;top:calc(var(--hd-h) + 32px);margin:0}
}

/* grouped panel, the app's calm list */
.group{background:var(--group);border-radius:var(--r);overflow:hidden}
.group > .row{padding:16px 18px;position:relative}
.group > .row + .row::before{content:"";position:absolute;top:0;left:18px;right:0;height:1px;background:var(--edge)}
.row h3{font-size:22px;margin:0 0 4px}
.row p{margin:0;color:var(--ink2)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.step{background:var(--group);border-radius:var(--r-lg);padding:20px;display:grid;grid-template-columns:1fr 38%;gap:16px;align-items:start;align-content:start}
.step .n{font:700 15px/1 var(--body);color:var(--ink);background:var(--ball);border-radius:999px;width:30px;height:30px;display:grid;place-items:center;margin:0 0 14px}
.step h3{margin:0 0 8px}
.step p{margin:0;color:var(--ink2);font-size:16px}
.step .phone.sm{justify-self:end}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:18px}
  .step{grid-template-columns:1fr;padding:22px 22px 26px}
  .step .phone.sm{order:-1;justify-self:center;margin:0 0 20px;max-width:210px}
}

/* league styles */
.styles{display:grid;gap:18px}
.styles .row{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.styles .row .k{grid-row:span 2;width:10px;height:10px;border-radius:50%;background:var(--ball);box-shadow:0 0 0 2px #5A6A0A inset;align-self:start;margin-top:8px}
@media (min-width:900px){.styles{grid-template-columns:1.2fr .8fr;align-items:center;gap:48px}}
.styles .pics{display:flex;gap:16px;justify-content:center}
.styles .pics .phone.sm{max-width:200px}

/* two column feature blocks */
.split{display:grid;gap:30px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}.split.flip > :first-child{order:2}}
.ticks{list-style:none;margin:18px 0 0;padding:0}
.ticks li{position:relative;padding:0 0 10px 28px;color:var(--ink2)}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:6px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg)}
.ticks li b{color:var(--ink);font-weight:600}

/* clubs band */
.band{background:var(--ink);color:#EDEAE2;border-radius:0}
.band h2,.band h3{color:#fff}
.band .sec-head p,.band p{color:#D6D9E0}
.band a:not(.btn){color:#fff}
.band .btn.fill{background:var(--ball);color:var(--ink)}
.band .btn.fill:hover{background:#D3EA5A}
.band .btn.soft{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.band .btn.soft:hover{border-color:#fff}
.band .ticks li{color:#D6D9E0}
.band .ticks li b{color:#fff}
.band .ticks li::before{border-color:var(--ball)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}

.proof{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:500;background:var(--group);border-radius:var(--r);padding:18px 20px;margin:0}
.proof::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--ball);box-shadow:0 0 0 2px #5A6A0A inset}
.band .proof{background:rgba(255,255,255,.08);color:#fff;margin:22px 0 0;font-size:17px}

/* feature grid (clubs) */
.feats{display:grid;gap:14px}
.feat{background:var(--group);border-radius:var(--r);padding:20px}
.feat h3{font-size:22px;margin:0 0 6px}
.feat p{margin:0;color:var(--ink2);font-size:16px}
@media (min-width:640px){.feats{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.feats{grid-template-columns:1fr 1fr 1fr}.feats.two{grid-template-columns:1fr 1fr}}

/* Getting started (For clubs): a timeline. Phones and tablets: a vertical rail in one panel.
   From 1000px: five equal columns on one horizontal rail. */
.launch{counter-reset:l;list-style:none;margin:0;padding:8px 0;background:var(--group);border-radius:var(--r-lg)}
.launch li{counter-increment:l;position:relative;padding:14px 20px 14px 68px}
.launch li::before{content:counter(l);position:absolute;left:20px;top:12px;width:32px;height:32px;border-radius:50%;background:var(--ball);
  display:grid;place-items:center;font:700 15px/1 var(--body);color:var(--ink);z-index:1}
.launch li:not(:last-child)::after{content:"";position:absolute;left:35px;top:44px;bottom:-12px;width:2px;background:var(--edge)}
.launch b{display:block;font:600 22px/1.15 var(--display);color:var(--ink);margin:4px 0 4px}
.launch span{display:block;color:var(--ink2);font-size:16px;line-height:1.45}
@media (min-width:1000px){
  .launch{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:32px 0 34px}
  .launch li{padding:58px 24px 0}
  .launch li::before{left:24px;top:0;width:38px;height:38px;font-size:16px}
  /* the rail runs from each number to the next column */
  .launch li:nth-child(n)::after{content:"";position:absolute;background:var(--edge);left:calc(-100% + 62px);top:18px;bottom:auto;width:calc(100% - 38px);height:2px}
  .launch li:first-child::after{display:none}
  .launch b{font-size:24px}
}

/* The deal (For clubs): its own navy band. The trial leads, four terms sit under it on one rule. */
.deal-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 32px;margin:0 0 28px}
.deal-head .sec-head{margin:0}
.band .deal-head .proof{margin:0;font-size:17px}
.deal-terms{display:grid;gap:0;margin:0}
.deal-terms p{margin:0;padding:16px 0;border-top:1px solid rgba(255,255,255,.16);color:#fff;font-size:19px;line-height:1.35}
.deal-terms .deal-lead{border-top:0;padding:0 0 20px;font:700 clamp(40px,8vw,64px)/1 var(--display);letter-spacing:-.01em;color:#fff}
.deal-terms .deal-lead::after{content:"";display:block;width:64px;height:5px;border-radius:3px;background:var(--ball);margin:18px 0 0}
/* phones: heading, the terms, then the proof line closes the band */
@media (max-width:639px){
  .deal > .wrap{display:flex;flex-direction:column}
  .deal-head{display:contents}
  .deal-head .sec-head{margin:0 0 28px}
  .band .deal-head .proof{order:3;margin:24px 0 0}
}
@media (min-width:640px){
  .deal-terms{grid-template-columns:1fr 1fr;column-gap:32px}
  .deal-terms .deal-lead{grid-column:1/-1}
}
@media (min-width:1000px){
  .deal-head{margin-bottom:40px}
  .deal-terms{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}
  .deal-terms p{padding:22px 0 0;border-top:3px solid var(--ball);font-size:20px}
  .deal-terms .deal-lead{border-top:0;padding:0 0 36px}
  .deal-terms .deal-lead::after{display:none}
}

/* form */
.form{background:var(--group);border-radius:var(--r-lg);padding:22px}
.form .f{display:block;margin:0 0 16px}
.form label,.form .lab{display:block;font-weight:600;font-size:15px;margin:0 0 6px}
.form .opt{font-weight:400;color:var(--ink3)}
.form input,.form select,.form textarea{width:100%;font:400 17px/1.4 var(--body);color:var(--ink);background:#fff;border:1px solid var(--ctl);
  border-radius:12px;padding:12px 14px;min-height:48px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--court);outline-offset:1px;border-color:var(--ink)}
.form .two{display:grid;gap:0 14px}
@media (min-width:640px){.form .two{grid-template-columns:1fr 1fr}.form{padding:30px}}
.form .note{font-size:14px;color:var(--ink3);margin:14px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* FAQ */
.faq{background:var(--group);border-radius:var(--r);overflow:hidden}
.faq details{position:relative}
.faq details + details::before{content:"";position:absolute;top:0;left:18px;right:0;height:1px;background:var(--edge)}
.faq summary{list-style:none;cursor:pointer;padding:18px 52px 18px 18px;font-weight:600;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 18px 18px;color:var(--ink2)}
.faq .a p:last-child{margin:0}

/* prose pages (privacy, terms) */
.page-head{padding:40px 0 10px}
.page-head p{color:var(--ink2);font-size:19px;max-width:34em;margin:16px 0 0}
.wrap.prose > *{max-width:var(--measure)}
.wrap.prose > :is(p,ul,ol){max-width:34em}
.wrap.prose > h1{max-width:min(100%,12em)}
.card{background:var(--group);border-radius:var(--r);padding:20px 20px 6px;margin:0 0 14px}
.card h2{font-size:28px;margin:0 0 12px}
.card ul{padding-left:20px;margin:0 0 1em}
.card li{margin:0 0 .6em}
.card b{font-weight:600}
.tiny{font-size:15px;color:var(--ink3)}
@media (min-width:900px){.page-head{padding:64px 0 16px}.card{padding:26px 28px 10px}}
/* one message pages (404, thanks): the message sits in the middle of the screen, not jammed under the header */
main:has(> .page-head:only-child){display:grid;align-content:center;min-height:max(420px,calc(100svh - 300px))}
main > .page-head:only-child{padding-bottom:48px}

/* footer */
.ft{border-top:1px solid var(--edge);padding:40px 0 28px;margin-top:40px;font-size:15px;color:var(--ink2)}
.ft .wrap{display:grid;gap:26px}
.ft img{height:32px;width:auto}
.ft .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ft h2{font:600 14px/1.2 var(--body);letter-spacing:0;color:var(--ink3);margin:0 0 8px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin:0 0 4px}
.ft a{color:var(--ink);text-decoration:none;display:inline-block;padding:5px 0}
.ft a:hover{text-decoration:underline}
.ft .base{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;border-top:1px solid var(--edge);padding-top:18px;color:var(--ink3);font-size:14px}
.ft .base a{color:var(--ink3)}
@media (min-width:760px){.ft .wrap{grid-template-columns:1fr 2fr}.ft .cols{grid-template-columns:repeat(3,1fr)}.ft .base{grid-column:1/-1}}

.center{text-align:center}
.muted{color:var(--ink2)}
.mt0{margin-top:0}
.form ::placeholder{color:#5A6478;opacity:1}

/* =====================================================================
   MOTION AND INTERACTION LAYER
   Everything that moves is gated on html.mo, which the inline script in
   each page's head sets only when JavaScript runs AND the visitor has not
   asked for reduced motion. Without it the page is the plain, complete
   site: nothing starts hidden. assets/motion.js drives the rest.
   ===================================================================== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:calc(var(--hd-h) + 32px)}
/* a section lands with its heading 32px under the sticky header, whatever its top padding */
.sec[id]{scroll-margin-top:calc(var(--hd-h) + 32px - var(--pt))}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* page to page cross fade, done by the browser (View Transitions) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.2s var(--ease) both vt-out}
  ::view-transition-new(root){animation:.35s var(--ease-out) both vt-in}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- intro (home, once per visit) ---------- */
.intro{display:none}
html.intro-on{--d0:.8s}
html.intro-on .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--bg);pointer-events:none;
  animation:intro-out .6s var(--ease-io) .55s forwards}
html.intro-on .intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--ball)}
html.intro-on .intro img{width:130px;height:auto;animation:intro-logo .6s var(--ease-out) both}
@keyframes intro-logo{from{clip-path:inset(0 0 100% 0);translate:0 26px}to{clip-path:inset(0);translate:0 0}}
@keyframes intro-out{to{transform:translateY(-100%);visibility:hidden}}

/* ---------- sticky header, progress bar, underline ---------- */
html.js .hd{position:sticky;top:0;z-index:50;background:rgba(241,237,228,.9);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);transition:box-shadow .3s}
html.js .hd.scrolled{box-shadow:0 12px 30px -24px rgba(19,33,59,.6)}
.prog{display:none}
html.js .prog{display:block;position:absolute;left:0;right:0;bottom:-1px;height:3px;overflow:hidden;pointer-events:none}
.prog i{display:block;height:100%;background:var(--ball);transform:scaleX(0);transform-origin:0 50%}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:3px;border-radius:2px;background:var(--ball);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- mobile menu (only when JS runs; otherwise the nav stays a visible row) ---------- */
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;border-radius:999px;border:1px solid var(--ctl);
  background:transparent;color:var(--ink);font:600 15px/1 var(--body);cursor:pointer}
.menu-btn .bars{position:relative;width:18px;height:12px}
.menu-btn .bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-btn .bars i:first-child{top:1px}
.menu-btn .bars i:last-child{top:9px}
.hd.open .menu-btn .bars i{top:5px}
.hd.open .menu-btn .bars i:first-child{transform:rotate(45deg)}
.hd.open .menu-btn .bars i:last-child{transform:rotate(-45deg)}
@media (max-width:759px){
  html.js .hd .wrap{flex-wrap:nowrap;padding-top:0;gap:8px}
  html.js .menu-btn{display:inline-flex}
  html.js .login{padding:0 16px}
  html.js .nav{position:absolute;left:0;right:0;top:100%;margin:0;width:auto;order:0;flex-direction:column;gap:0;
    padding:10px var(--gut) 26px;background:var(--bg);border-bottom:1px solid var(--edge);box-shadow:0 30px 40px -30px rgba(19,33,59,.45);
    visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease-io),visibility 0s linear .45s}
  html.js .hd.open .nav{visibility:visible;clip-path:inset(0 0 -60px 0);transition:clip-path .55s var(--ease-out)}
  html.js .nav a{font:700 40px/1.05 var(--display);color:var(--ink);padding:10px 0;border-radius:6px;
    opacity:0;translate:0 16px;transition:opacity .3s,translate .45s var(--ease-out)}
  html.js .hd.open .nav a{opacity:1;translate:0 0}
  html.js .hd.open .nav a:nth-child(2){transition-delay:.06s}
  html.js .hd.open .nav a:nth-child(3){transition-delay:.12s}
  html.js .nav a::after{left:0;right:auto;width:64px;bottom:6px}
  html.js .nav a:hover{background:none}
}

/* ---------- buttons: lift on hover, magnetic pull (vars set by motion.js) ---------- */
.btn,.store,.login,.menu-btn,.hs-btn,.mq-btn{transform:translate(var(--tx,0px),var(--ty,0px));
  transition:background-color .25s,border-color .25s,box-shadow .3s,translate .3s var(--ease),transform .5s var(--ease)}
html.mo .btn:hover,html.mo a.store:hover,html.mo .login:hover{translate:0 -2px;box-shadow:0 14px 26px -16px rgba(19,33,59,.6)}
.band .btn.fill:hover{box-shadow:0 14px 30px -14px rgba(197,223,63,.55)}

/* ---------- headline words rise, hero items fade up ---------- */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin:0 -.02em -.12em}
.wd>span{display:inline-block}
.hl>span{background:linear-gradient(var(--ball),var(--ball)) 0 86%/100% .2em no-repeat}
html.mo .wd>span{animation:word-up .85s var(--ease-out) both;animation-delay:calc(var(--d0,0s) + .05s + var(--i,0) * 70ms)}
html.mo .hl>span{animation:word-up .85s var(--ease-out) both,hl-sweep .7s var(--ease-out) both;
  animation-delay:calc(var(--d0,0s) + .05s + var(--i,0) * 70ms),calc(var(--d0,0s) + .75s + var(--i,0) * 70ms)}
@keyframes word-up{from{transform:translateY(108%)}to{transform:none}}
@keyframes hl-sweep{from{background-size:0 .2em}to{background-size:100% .2em}}
html.mo .up{animation:fade-up .7s var(--ease-out) both;animation-delay:calc(var(--d0,0s) + .15s + var(--u,0) * .08s)}
@keyframes fade-up{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* ---------- scroll reveals (motion.js adds .in; .rv-all is the failsafe) ---------- */
/* only blocks that were below the fold at load get .pre, so nothing on screen ever waits */
html.mo:not(.rv-all) [data-rv].pre:not(.in),
html.mo:not(.rv-all) [data-rv-kids].pre:not(.in) > *{opacity:0;translate:0 28px}
html.mo:not(.rv-all) [data-rv="side"].pre:not(.in){translate:44px 0}
html.mo:not(.rv-all) [data-rv="zoom"].pre:not(.in){translate:0 20px;scale:.94}
html.mo [data-rv]:not(.done),
html.mo [data-rv-kids]:not(.done) > *{transition:opacity .7s var(--ease-out) var(--rd,0s),translate .9s var(--ease-out) var(--rd,0s),scale .9s var(--ease-out) var(--rd,0s),transform .6s var(--ease)}
[data-rv-kids] > :nth-child(2){--rd:.07s}[data-rv-kids] > :nth-child(3){--rd:.14s}[data-rv-kids] > :nth-child(4){--rd:.21s}
[data-rv-kids] > :nth-child(5){--rd:.28s}[data-rv-kids] > :nth-child(6){--rd:.35s}[data-rv-kids] > :nth-child(7){--rd:.42s}
[data-rv-kids] > :nth-child(8){--rd:.49s}[data-rv-kids] > :nth-child(9){--rd:.56s}[data-rv-kids] > :nth-child(10){--rd:.63s}

/* ---------- tilt and pointer spotlight (desktop pointers only, set by motion.js) ---------- */
html .tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--ts,1));transition:transform .6s var(--ease)}
html .tilt.hot{transition:transform .15s linear}
.feat.tilt,.hs-card{position:relative;isolation:isolate;overflow:hidden}
.feat.tilt::before,.hs-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%),rgba(197,223,63,.38),transparent 65%);opacity:0;transition:opacity .35s}
.tilt.hot::before{opacity:1}

/* ---------- hero: floating phone, rally line ---------- */
.hero .shot{position:relative}
html.mo .float{animation:float 6s ease-in-out calc(var(--d0,0s) + 1.2s) infinite}
@keyframes float{50%{translate:0 -10px}}
.rally{height:64px;margin-top:6px}
.rally svg{display:block;width:100%;height:64px;overflow:visible}
.rally .path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 9;opacity:.4}
html.mo .rally .path{animation:dash 1.1s linear infinite}
html.mo .rally.off .path{animation-play-state:paused}
@keyframes dash{to{stroke-dashoffset:-10}}

/* ---------- lime marquee ---------- */
.mq{position:relative;background:var(--ball);color:var(--ink);overflow:hidden}
.mq-set{list-style:none;margin:0;display:flex;flex-wrap:wrap;justify-content:center;padding:14px var(--gut)}
.mq-set li{display:flex;align-items:center;white-space:nowrap;font:700 26px/1.15 var(--display);text-transform:uppercase;letter-spacing:.02em}
.mq-set li::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink);margin:0 16px}
.mq-set li:last-child::after{display:none}
.mq .rep,.mq .dup,.mq-btn{display:none}
html.mo .mq-track{display:flex;width:max-content;animation:mq 45s linear infinite}
html.mo .mq.rev .mq-track{animation-direction:reverse}
html.mo .mq-set{flex-wrap:nowrap;padding:16px 0}
html.mo .mq-set li:last-child::after{display:block}
html.mo .mq .rep,html.mo .mq .dup{display:flex}
html.mo .mq:hover .mq-track,html.mo .mq:focus-within .mq-track,html.mo .mq.paused .mq-track,html.mo .mq.off .mq-track{animation-play-state:paused}
html.mo .mq-btn{display:grid;place-items:center;position:absolute;right:8px;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:#fff;border:0;cursor:pointer;z-index:2}
.mq-btn span{width:11px;height:12px;border-left:3.5px solid #fff;border-right:3.5px solid #fff}
.mq.paused .mq-btn span{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;margin-left:3px}
.mq-btn:focus-visible{outline-color:var(--ink);outline-offset:3px}
@keyframes mq{to{transform:translateX(-50%)}}
@media (min-width:900px){.mq-set li{font-size:38px}.mq-set li::after{width:11px;height:11px;margin:0 24px}}

/* ---------- pinned "How it works" (home) ---------- */
.how-stage{display:none}
html.mo .how-pin{display:grid;grid-template-columns:minmax(0,1fr) 42%;gap:0 16px;align-items:start}
html.mo .how-stage{display:flex;flex-direction:column;align-items:center;gap:14px;grid-column:2;grid-row:1;position:sticky;top:max(84px,calc(50vh - 170px))}
html.mo .how-pin .steps{display:block;grid-column:1;grid-row:1}
html.mo .how-pin .step{display:flex;align-items:center;min-height:62vh;padding:0;background:transparent}
html.mo .how-pin .step:first-child{min-height:48vh;align-items:flex-start}
html.mo .how-pin .step:last-child{min-height:52vh;align-items:flex-end}
html.mo .how-pin .step .phone{display:none}
html.mo .how-pin .step > div{padding:20px 18px;border-radius:var(--r-lg);transition:background-color .45s,box-shadow .45s}
html.mo .how-pin .step.on > div{background:var(--group);box-shadow:0 22px 40px -30px rgba(19,33,59,.45)}
html.mo .how-pin .step .n{background:transparent;box-shadow:inset 0 0 0 2px var(--ink);transition:background-color .3s,box-shadow .3s}
html.mo .how-pin .step.on .n{background:var(--ball);box-shadow:none}
.how-stage .phone{width:100%;max-width:290px;padding:6px;border-radius:26px}
.screens{position:relative;aspect-ratio:600/1298;border-radius:21px;overflow:hidden;background:var(--bg)}
.screens img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;opacity:0;transform:translateY(5%) scale(.97);transition:opacity .45s var(--ease),transform .7s var(--ease-out)}
.screens img.on{opacity:1;transform:none}
.how-meter{display:flex;gap:6px}
.how-meter i{width:18px;height:4px;border-radius:2px;background:rgba(19,33,59,.2);transition:background-color .3s,width .4s var(--ease)}
.how-meter i.on{background:var(--ink);width:34px}
@media (min-width:900px){
  html.mo .how-pin{grid-template-columns:1fr 1fr;gap:0 48px}
  html.mo .how-stage{top:max(96px,calc(50vh - 350px))}
  .how-stage .phone{width:min(290px,calc((100vh - 200px) / 2.25));padding:9px;border-radius:38px}
  .screens{border-radius:30px}
  html.mo .how-pin .step{min-height:70vh}
  html.mo .how-pin .step > div{padding:30px 32px;max-width:30em}
  html.mo .how-pin .step h3{font-size:34px}
  html.mo .how-pin .step p{font-size:18px}
}

/* ---------- counters ---------- */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stats li{background:var(--group);border-radius:var(--r);padding:18px 18px 16px}
.stats b{display:block;font:700 clamp(58px,15vw,92px)/.9 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stats b::after{content:"";display:block;width:34px;height:5px;border-radius:3px;background:var(--ball);margin:12px 0 0}
.stats span{display:block;margin-top:10px;color:var(--ink2);font-size:15px;line-height:1.35}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr);gap:16px}.stats li{padding:24px 24px 22px}.stats span{font-size:16px}}

/* ---------- For clubs: KPI tiles, notes and the league calculator ---------- */
.stats .kpi{display:block;font:600 13px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.kpi-note{max-width:34em;margin:18px 0 0;color:var(--ink2);font-size:16px}
.calc{background:var(--group);border-radius:var(--r-lg);padding:20px}
.calc-in{display:grid;gap:18px}
.calc fieldset{border:0;margin:0;padding:0;min-width:0}
.calc legend,.calc-range label{font-weight:600;color:var(--ink);font-size:16px;padding:0;margin:0 0 10px}
.calc-style{display:flex;flex-wrap:wrap;gap:8px}
.calc-style legend{flex:1 0 100%}
.calc-style label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ctl);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer}
.calc-style input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.calc-style label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.calc-style label:has(input:focus-visible){outline:3px solid var(--court);outline-offset:2px}
.calc-range{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 12px}
.calc-range label{margin:0}
.calc-range output{font:700 30px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.calc-range input{grid-column:1/-1;width:100%;height:44px;margin:0;accent-color:var(--ink);cursor:pointer}
.calc-out{border-top:1px solid var(--edge);padding-top:18px}
.calc-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.calc-nums div{display:flex;flex-direction:column-reverse;justify-content:flex-end;background:var(--bg);border-radius:var(--r);padding:12px}
.calc-nums dd{margin:0;font:700 clamp(34px,9vw,56px)/.95 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calc-nums dt{margin-top:8px;color:var(--ink2);font-size:14px;line-height:1.3}
.calc-words{margin:16px 0 0;color:var(--ink);font-size:17px}
.calc-note{margin:10px 0 0;color:var(--ink2);font-size:15px}
.calc-nojs{margin:0 0 12px;color:var(--ink2);font-size:15px}
html.js .calc-nojs{display:none}
html:not(.js) .calc-style,html:not(.js) .calc-range{display:none}
html:not(.js) .calc-out{border-top:0;padding-top:0}
@media (min-width:900px){
  .calc{padding:30px}
  .calc-in{grid-template-columns:.9fr 1.1fr;gap:18px 44px;align-items:start}
  .calc-in > :not(.calc-out){grid-column:1}
  .calc-out{grid-column:2;grid-row:1 / span 3;border-top:0;padding-top:0;border-left:1px solid var(--edge);padding-left:40px}
  html:not(.js) .calc-in{grid-template-columns:1fr}
  html:not(.js) .calc-out{grid-column:1;border-left:0;padding-left:0}
  .calc-nums dt{font-size:15px}
}

/* ---------- live demo phone (home) ---------- */
html:not(.js) .demo{display:none}
.demo .split{align-items:center}
.demo-steps{list-style:none;counter-reset:d;margin:0;padding:0;display:grid;gap:8px}
.demo-steps li{counter-increment:d;position:relative;padding:12px 16px 12px 54px;border-radius:var(--r);font-weight:500;color:var(--ink2);transition:background-color .35s,color .35s}
.demo-steps li::before{content:counter(d);position:absolute;left:14px;top:50%;margin-top:-14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font:700 14px/1 var(--body);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ctl);transition:background-color .3s,box-shadow .3s}
.demo-steps li.on{background:var(--group);color:var(--ink)}
.demo-steps li.on::before{background:var(--ball);box-shadow:none}
.demo-steps li.done::before{background:var(--ink);color:#fff;box-shadow:none}
.demo-wrap{display:grid;justify-items:center}
.demo-phone{width:min(300px,84vw)}
.dp{aspect-ratio:600/1298;border-radius:30px;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;font-size:14px;line-height:1.35;text-align:left}
.dp-top{display:flex;align-items:center;gap:10px;padding:20px 16px 12px;border-bottom:1px solid var(--edge)}
.dp-av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font:600 12px/34px var(--body);text-align:center}
.dp-top b{display:block;font:700 19px/1.05 var(--display)}
.dp-top small{display:block;color:var(--ink2);font-size:12px}
.dp-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:14px 12px}
.dp-card{background:var(--group);border-radius:14px;padding:14px 14px 14px 16px;box-shadow:inset 3px 0 0 var(--clay);transition:box-shadow .4s}
.dp-card.ok{box-shadow:inset 3px 0 0 var(--ball)}
.dp-tag{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12px;font-weight:600;color:var(--clay)}
.dp-tag i{width:7px;height:7px;border-radius:50%;background:currentColor}
.dp-card.ok .dp-tag{color:#4F5E08}
.dp-title{font-size:23px;margin:0 0 4px}
.dp-text{margin:0 0 12px;color:var(--ink2);font-size:13.5px;min-height:2.7em}
.dp-sets{display:grid;gap:4px;margin:0 0 12px}
.dp-sets span{display:flex;align-items:center;gap:6px;font-size:13px}
.dp-sets small{flex:1;font-size:13px;color:var(--ink)}
.dp-sets b{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--sunk);font-weight:700}
.dp-sets span:first-child b{background:var(--ink);color:#fff}
.dp-rally{position:relative;height:30px;margin:0 0 12px;border-bottom:2px solid var(--ink)}
.dp-rally span{position:absolute;left:0;bottom:2px;width:14px;height:14px;border-radius:50%;background:var(--ball);box-shadow:inset 0 0 0 1.5px var(--ink)}
html.mo .dp-rally span{animation:rally-x 1.4s linear both,rally-y .35s cubic-bezier(.3,0,.7,1) 4 alternate both}
@keyframes rally-x{50%{left:calc(100% - 14px)}to{left:0}}
@keyframes rally-y{from{bottom:2px}to{bottom:22px}}
.dp-btns{display:flex;gap:8px}
.dp-b{flex:1;min-height:44px;border-radius:999px;border:1px solid var(--ctl);background:var(--group);color:var(--ink);font:600 14px/1 var(--body);cursor:pointer;padding:0 10px;transition:background-color .2s,scale .15s}
.dp-b.fill{background:var(--ink);border-color:var(--ink);color:#fff}
.dp-b:active{scale:.96}
.dp-card.end .dp-tag{color:var(--ink);font-size:13px}
.dp-card.end .dp-tag i{position:relative;width:18px;height:18px;background:var(--ball);box-shadow:inset 0 0 0 1.5px var(--ink)}
.dp-card.end .dp-tag i::after{content:"";position:absolute;left:5px;top:4px;width:7px;height:4px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.dp-card.end .dp-text{margin:0 0 10px;color:var(--ink)}
.dp-card.end .dp-sets{margin:0}
.dp-again{align-self:center;margin:-4px 0 0;padding:6px 10px;min-height:32px;border:0;background:none;color:var(--ink2);font:500 13px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dp-again:hover{color:var(--ink)}
.dp-again[hidden],.dp-btns[hidden]{display:none}
.dp-note{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--ball2);font-size:12.5px;color:var(--ink)}
.dp-table{background:var(--group);border-radius:14px;padding:10px 12px 4px}
.dp-th{display:flex;justify-content:space-between;margin:0 0 4px;font-size:11.5px;font-weight:600;color:var(--ink3)}
.dp-table ol{list-style:none;margin:0;padding:0;position:relative}
.dp-table li{position:relative;display:flex;align-items:center;gap:10px;height:34px;border-top:1px solid var(--edge);font-size:13.5px;background:var(--group)}
.dp-table li.me{background:var(--ball2);margin:0 -12px;padding:0 12px;z-index:1}
.dp-table .pos{width:14px;font-weight:600;color:var(--ink3)}
.dp-table .nm{flex:1}
.dp-table li.flash{animation:row-flash 1.2s var(--ease-out)}
@keyframes row-flash{0%{box-shadow:0 0 0 0 rgba(197,223,63,.9)}100%{box-shadow:0 0 0 10px rgba(197,223,63,0)}}
.dp.swap .dp-card{animation:card-swap .45s var(--ease-out)}
.dp-nav{display:flex;justify-content:space-around;margin:auto 10px 12px;padding:8px 6px;border-radius:999px;background:var(--group);box-shadow:0 8px 20px -14px rgba(19,33,59,.5)}
.dp-nav span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--ink3);padding:2px 10px;border-radius:999px}
.dp-nav i{width:16px;height:12px;border-radius:3px;border:1.8px solid currentColor}
.dp-nav .on{color:var(--ink);background:var(--ball2)}
@keyframes card-swap{from{opacity:.2;translate:0 8px}}

/* ---------- five league styles, horizontal strip (home) ---------- */
.hs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hs-ctl{display:none}
html.js .hs-ctl{display:flex;gap:8px;flex:none;margin:0 0 28px}
.hs-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--ctl);background:var(--group);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.hs-btn span{width:10px;height:10px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;rotate:45deg;margin-left:-4px}
.hs-btn[data-dir="-1"] span{rotate:-135deg;margin-left:4px}
.hs-btn:hover{border-color:var(--ink)}
.hs-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.hs{--pad:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad);scrollbar-width:none;padding:6px 0 20px;border-radius:0}
.hs::-webkit-scrollbar{display:none}
.hs:focus-visible{outline-offset:-3px}
.hs-track{list-style:none;margin:0;padding:0 var(--pad);display:flex;gap:14px;width:max-content}
.hs-card{scroll-snap-align:start;width:min(78vw,330px);min-height:320px;background:var(--group);border-radius:var(--r-lg);padding:22px 22px 26px;display:flex;flex-direction:column}
.hs-n{font:700 16px/1 var(--display);letter-spacing:.08em;color:var(--ink3)}
.mini{display:block;width:120px;height:72px;margin:24px 0 28px}
.hs-card h3{font-size:32px;margin:auto 0 8px}
.hs-card p{margin:0;color:var(--ink2);font-size:16px}
.hs-bar{display:none}
html.js .hs-bar{display:block;height:4px;max-width:260px;background:rgba(19,33,59,.12);border-radius:2px;overflow:hidden}
.hs-bar i{display:block;height:100%;width:25%;background:var(--ink);border-radius:2px}
html.fine .hs{cursor:grab}
html.fine .hs.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
html.mo .hs.pre .dr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out) .35s}
html.mo .hs.in .dr,html.rv-all .hs .dr,html.mo .hs:not(.pre) .dr{stroke-dashoffset:0}
@media (min-width:900px){.hs-card{width:340px;min-height:360px;padding:26px 26px 30px}}

/* ---------- proof line: a live dot ---------- */
html.mo .proof::before{animation:live 2.2s ease-in-out infinite}
@keyframes live{0%,100%{box-shadow:0 0 0 2px #5A6A0A inset,0 0 0 0 rgba(197,223,63,.8)}60%{box-shadow:0 0 0 2px #5A6A0A inset,0 0 0 9px rgba(197,223,63,0)}}

/* ---------- FAQ answers open smoothly where the browser supports it ---------- */
@media (prefers-reduced-motion:no-preference){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ---------- playful footer ---------- */
.ft-play{display:grid;gap:8px;padding:0 0 26px;border-bottom:1px solid var(--edge)}
.ft-line{margin:0;font:700 clamp(50px,14vw,128px)/.88 var(--display);letter-spacing:-.02em;color:var(--ink)}
.ft-rule{position:relative;height:44px;border-bottom:3px solid var(--ink);touch-action:pan-y}
.ft-ball{position:absolute;left:0;bottom:0;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#E6F39A,var(--ball) 55%,#A9C12E);box-shadow:inset 0 0 0 2px var(--ink);
  transform:translateX(var(--bx,0px)) rotate(var(--br,0deg));transition:transform 1.4s var(--ease-out)}
.ft-ball.live{transition:none}
.ft-ball::before,.ft-ball::after{content:"";position:absolute;top:5px;bottom:5px;width:16px;border:2px solid #FFFEFB;border-radius:50%}
.ft-ball::before{left:-8px;border-left-color:transparent}
.ft-ball::after{right:-8px;border-right-color:transparent}
.ft-top{justify-self:start;font-weight:600}
@media (min-width:760px){.ft-play{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- guides ---------- */
.crumbs{font-size:14px;color:var(--ink3);margin:0 0 18px}
.crumbs a{color:var(--ink2)}
.crumbs span[aria-hidden]{margin:0 6px}
.guide{font-size:18px}
.guide h2{font-size:clamp(28px,6vw,36px);margin:44px 0 12px}
.guide h2:first-child{margin-top:0}
.guide p,.guide li{color:var(--ink2)}
.guide b{color:var(--ink);font-weight:600}
.guide ul{padding-left:22px;margin:0 0 1em}
.guide li{margin:0 0 .5em}
.guide-cta{margin-top:48px;padding-bottom:24px;border-left:5px solid var(--ball)}
.guide-cta h2{margin-top:0}
.tbl-wrap{overflow-x:auto;margin:0 0 1.2em;border-radius:var(--r);background:var(--group)}
.tbl{width:100%;border-collapse:collapse;font-size:16px;min-width:420px}
.tbl th,.tbl td{text-align:left;padding:12px 16px;border-top:1px solid var(--edge);vertical-align:top}
.tbl thead th{border-top:0;font-weight:600;color:var(--ink);font-size:15px}
.tbl tbody th{font-weight:600;color:var(--ink)}
.tbl td{color:var(--ink2)}
.glist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:640px){.glist{grid-template-columns:1fr 1fr}}
@media (min-width:640px) and (max-width:999px){:is(.glist,.feats.q6):has(> :nth-child(odd):last-child) > :first-child{grid-column:1/-1}}
/* card grids on a six column track, so any count fills its rows: 2 and 4 go two across,
   5 goes two then three, 7 two, two, three, 8 three, three, two. No lone card on a row. */
@media (min-width:1000px){
  .glist,.feats.q6{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
  .glist > li,.feats.q6 > *{grid-column:span 2}
  :is(.glist,.feats.q6):is(:has(> :nth-child(2):last-child),:has(> :nth-child(4):last-child)) > *,
  :is(.glist,.feats.q6):has(> :nth-child(5):last-child) > :nth-child(-n+2),
  :is(.glist,.feats.q6):has(> :nth-child(7):last-child) > :nth-child(-n+4),
  :is(.glist,.feats.q6):has(> :nth-child(8):last-child) > :nth-last-child(-n+2){grid-column:span 3}
  :is(.glist,.feats.q6) > :only-child{grid-column:1/-1}
}
.gcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;height:100%;min-height:260px;padding:24px;border-radius:var(--r-lg);background:var(--group);color:var(--ink);text-decoration:none}
.gcard::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%),rgba(197,223,63,.38),transparent 65%);opacity:0;transition:opacity .35s}
.gcard.hot::before{opacity:1}
.gcard h2,.gcard h3{font-size:30px;margin:18px 0 10px}
.gcard p{color:var(--ink2);font-size:16px;margin:0 0 18px}
.gcard .more{margin-top:auto;font-weight:600;color:var(--court);text-decoration:underline;text-underline-offset:3px}
.gcard:hover .more{text-decoration-thickness:2px}
html.js .hd.open .nav a:nth-child(4){transition-delay:.18s}

/* ---------- guide extras: direct answer, contents, related (SEO pass 2) ---------- */
.answer{margin:22px 0 0;padding:18px 20px;border-radius:var(--r);background:var(--group);border-left:5px solid var(--ball);max-width:40em}
.page-head .answer p{margin:0;color:var(--ink);font-size:18px}
.page-head .answer .answer-k{font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
.byline{margin-top:14px!important}
.toc{background:var(--group);border-radius:var(--r);padding:16px 20px;margin:0 0 36px;font-size:16px}
.toc-k{font-weight:600;color:var(--ink)!important;margin:0 0 6px}
.toc ol{margin:0;padding-left:22px}
.toc li{margin:0 0 4px}
.guide h3{font-size:24px;margin:28px 0 8px}
.guide .faq{margin:0 0 1em}
.guide .faq p{font-size:17px}
.related{margin-top:44px}
.related h2{font-size:28px!important;margin:0 0 10px!important}
.related ul{list-style:none;padding:0;display:grid;gap:8px}
.related li{margin:0}
.related a{font-weight:600}
.guide .note{background:var(--ball2);border-radius:var(--r);padding:14px 18px;color:var(--ink)}
.entity{font-size:20px!important;color:var(--ink)!important}
.facts .row h3{font-size:20px}
/* wide screens: the guide's contents list moves to a sticky rail beside the text */
@media (min-width:1100px){
  .wrap.prose.guide{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);column-gap:clamp(48px,6vw,88px);align-items:start}
  .wrap.prose.guide > *{grid-column:1}
  .wrap.prose.guide > .toc{grid-column:2;grid-row:1 / span 200;position:sticky;top:calc(var(--hd-h) + 32px);margin:0;max-width:340px;font-size:15px;padding:20px 22px}
  .wrap.prose.guide > .toc + *{margin-top:0}
  .wrap.prose.guide > h2{margin-top:30px}
}
/* For clubs formats: the tab panel stands as tall as the two phones beside it */
@media (min-width:900px){
  .styles{align-items:stretch}
  .styles .pics{align-items:center}
  .fmt{display:flex;flex-direction:column}
  .fmt .group.is-tabs{flex:1}
  .group.is-tabs > .row{grid-template-rows:1fr auto auto}
}

/* =====================================================================
   MOTION PASS 2 (29 Sep 2026). Ideas studied from ten motion led sites,
   rebuilt in Padeliga's brand (notes: _research/motion-refs.md).
   Same rules as above: nothing hides without html.mo, transforms and
   opacity only, reduced motion shows every final state.
   ===================================================================== */

/* ---------- page to page: a navy and lime wipe (View Transitions) ---------- */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(root){animation-duration:.34s}
  ::view-transition-old(root){animation:.34s var(--ease-io) both vt-push}
  ::view-transition-new(root){animation:.34s var(--ease-io) both vt-wipe;box-shadow:0 -7px 0 var(--ball),0 -64px 0 var(--ink)}
}
@keyframes vt-push{to{transform:translateY(-7%);opacity:.35}}
@keyframes vt-wipe{from{transform:translateY(100%)}}
/* the new page's text arrives just behind the wipe */
html.vt-in{--d0:.2s}
html.mo.vt-in .page-head .wrap > *,html.mo.nav-in .page-head .wrap > *{animation:fade-up .6s var(--ease-out) both;animation-delay:calc(var(--d0,0s) + var(--k,0) * 60ms)}
.page-head .wrap > :nth-child(2){--k:1}.page-head .wrap > :nth-child(3){--k:2}.page-head .wrap > :nth-child(4){--k:3}.page-head .wrap > :nth-child(5){--k:4}
/* browsers without View Transitions: a lime sweep under the header instead */
html.mo.nav-in .prog::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;animation:nav-sweep .5s var(--ease-io) both}
@keyframes nav-sweep{from{transform:scaleX(0)}60%{transform:scaleX(1);opacity:1}to{transform:scaleX(1);opacity:0}}

/* ---------- home hero: a slow liquid wash (canvas on desktop, still gradient elsewhere) ---------- */
.hero[data-liquid]{position:relative;isolation:isolate}
.hero[data-liquid]::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(55% 65% at 84% 40%,rgba(197,223,63,.22),transparent 70%),radial-gradient(45% 55% at 6% 95%,rgba(233,243,194,.7),transparent 70%)}
.liquid{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.liquid.on{opacity:1}
.liquid canvas{display:block;width:100%;height:100%}

/* ---------- Apple style: the How it works phone turns and zooms with the scroll ---------- */
.how-stage .rig{display:block;width:100%;max-width:290px;will-change:transform}
.how-stage .rig .phone{width:100%;max-width:none}
@media (min-width:900px){.how-stage .rig{width:min(290px,calc((100vh - 200px) / 2.25))}}
.how-floor{display:block;width:70%;height:22px;margin:-6px auto 0;border-radius:50%;background:radial-gradient(closest-side,rgba(19,33,59,.28),transparent);transform-origin:50% 50%}
.screens .glare{position:absolute;inset:-20% -60%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.32) 50%,transparent 60%);transform:translateX(var(--gx,-30%))}
html:not(.mo) .screens .glare{display:none}
html.mo .screens img{transform:translateY(8%) scale(.94);transition:opacity .5s var(--ease),transform .8s var(--ease-out)}
html.mo .screens img.was{opacity:0;transform:translateY(-6%) scale(.96)}
html.mo .screens img.on{opacity:1;transform:none}
.how-meter i{position:relative;overflow:hidden}
.how-meter i b{position:absolute;inset:0;background:var(--ball);transform:scaleX(0);transform-origin:0 50%}
.how-meter i.on b{transform:scaleX(var(--fill,0))}

/* ---------- Pitch style bento: tiles with small looping product moments ---------- */
.bento{display:grid;gap:14px;margin:30px 0 0}
.bento-list{display:contents;list-style:none;margin:0;padding:0}
.tile{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);padding:14px 20px 20px;display:flex;flex-direction:column;gap:12px}
.tile .art{display:block;width:100%;height:auto;max-height:190px;margin:0 auto}
.tile p{margin:0}
.tile-t{display:block}
.tile-shot{padding:14px;justify-content:center}
.tile-shot .laptop{box-shadow:none}
@media (min-width:640px){.bento{grid-template-columns:1fr 1fr}.tile-shot,.tile.wide{grid-column:1/-1}}
@media (min-width:1000px){
  .bento{grid-template-columns:repeat(6,1fr);gap:16px}
  .bento-home .tile.tile-shot{grid-column:1/5;grid-row:1}
  .bento-home .tile{grid-column:span 2}
  .bento-home .tile.t1{grid-column:5/7;grid-row:1}
  .bento-home .tile.t1 .art{max-height:none;margin:auto 0}
  .bento-club .tile{grid-column:span 2}
  .bento-club .tile.wide{grid-column:span 4}
  .bento-club .tile.half{grid-column:span 3}
}
/* on the navy band */
.band .tile{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#D6D9E0}
.band .tile-t{color:#D6D9E0;font-size:17px}
.band .tile b{color:#fff;font-weight:600}
.band-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin:22px 0 0}
.band-foot .proof{margin:0}
.band-foot .cta{margin:0}
/* on paper */
.bento-club .tile{background:var(--group)}
.bento-club .tile h3{font-size:22px;margin:0 0 6px}
.bento-club .tile p{color:var(--ink2);font-size:16px}
/* art palette */
.art{--a-card:#FDFBF6;--a-ink:var(--ink);--a-sub:rgba(19,33,59,.18);--a-soft:#E7E1D4;--a-panel:#F1EDE4;--a-line:rgba(255,255,255,.34);--a-bar:rgba(255,255,255,.3);--a-dot:rgba(255,255,255,.14);--a-seg:rgba(255,255,255,.14);--a-big:#fff;overflow:visible}
.bento-club .art{--a-card:var(--bg);--a-panel:var(--group);--a-line:rgba(19,33,59,.28);--a-bar:rgba(19,33,59,.16);--a-dot:rgba(19,33,59,.08);--a-seg:rgba(19,33,59,.12);--a-big:var(--ink)}
.k-card{fill:var(--a-card)}.k-ink{fill:var(--a-ink)}.k-sub{fill:var(--a-sub)}.k-soft{fill:var(--a-soft)}.k-panel{fill:var(--a-panel)}
.k-lime{fill:var(--ball)}.k-clay{fill:var(--clay)}.k-bar{fill:var(--a-bar)}.k-bar2{fill:rgba(255,255,255,.6)}.k-dot{fill:var(--a-dot)}.k-seg{fill:var(--a-seg)}
.k-pill{fill:none;stroke:var(--a-line);stroke-width:1.5}
.k-owe{fill:none;stroke:var(--clay);stroke-width:1.5}
.k-tick{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k-num{font:700 17px var(--display);text-anchor:middle;fill:var(--ink)}
.k-onink{fill:#fff}
.k-cur{font:600 13px var(--body);text-anchor:middle;fill:var(--clay)}
.k-big{font:700 46px var(--display);text-anchor:middle;fill:var(--a-big)}
.k-glow{fill:none;stroke:var(--ball);stroke-width:3}
.k-ring{fill:none;stroke:var(--ball);stroke-width:2.5}
.k-edge{stroke:var(--ink);stroke-width:2}
.k-edge2{stroke:var(--a-line);stroke-width:1}
.k-shadow{fill:rgba(19,33,59,.14)}
.k-hi{stroke:var(--ball);stroke-width:1.5}
.k-stroke{fill:none;stroke:var(--a-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* final state is the default. While running, motion.js adds .run, then s1, s2... one per beat */
.art-console .nq{transform:translateY(34px)}
.art-console .nr2{opacity:0}
.art-poster .scan{display:none}
.art g,.art rect,.art circle,.art path{transform-box:fill-box;transform-origin:50% 50%}
.art [transform]{transform-box:view-box;transform-origin:0 0}
.art .bar{transform-origin:50% 100%}
.art .orbit,.art .orbit *{transform-box:view-box}
.art .orbit{transform-origin:140px 75px}
html.mo .art :is(.s1i,.s2i,.s3i,.s4i,.q,.w,.bar,.nq,.nr2,.nnew){transition:opacity .45s var(--ease-out) calc(var(--i,0) * 70ms),transform .7s var(--ease-out) calc(var(--i,0) * 70ms)}
html.mo .art .w{transition-delay:calc(var(--i,0) * 150ms)}
html.mo .art .q{transition-delay:calc(var(--i,0) * 35ms)}
.art.run :is(.s1i,.s2i,.s3i,.s4i,.q,.w){opacity:0}
.art.run .p:is(.s1i,.s2i,.s3i,.s4i){transform:scale(.4)}
.art.run .sl:is(.s1i,.s2i,.s3i,.s4i){transform:translateX(22px)}
.art.run .bar{transform:scaleY(.08)}
.art.run.s1 :is(.s1i,.bar),.art.run.s2 :is(.s2i,.q),.art.run.s3 .s3i,.art.run.s4 .s4i,.art-season.run.s1 .w{opacity:1;transform:none}
.art-console.run:not(.s2) .nq{transform:none}
.art-console.run:not(.s2) .nr2{opacity:1}
.art-console.run:not(.s2) .nnew{opacity:0;transform:translateY(-18px)}
.art-poster.run.s2 .scan{display:inline;animation:scan 1.5s ease-in-out infinite alternate}
@keyframes scan{from{transform:translateY(-28px)}to{transform:translateY(26px)}}
.art-season.run .orbit{animation:orbit 5.2s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.art-export.run.s4 .arrow{animation:bob .9s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(4px)}}
.art-board .k-ring{opacity:0}
.art-board.run.s3 .k-ring{opacity:0;transform:scale(1.7)}
.art-console.run.s3 .pulse{animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.5);opacity:.55}}

/* ---------- Dropbox style tabs: one highlight slides between them ---------- */
.fmt-tabs{position:relative;display:flex;gap:4px;padding:5px;margin:0 0 14px;border-radius:999px;background:var(--sunk);overflow-x:auto;scrollbar-width:none;max-width:100%;width:max-content}
.fmt-tabs::-webkit-scrollbar{display:none}
.fmt-tab{position:relative;z-index:1;flex:none;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--ink2);font:600 16px/1 var(--body);cursor:pointer;white-space:nowrap;transition:color .3s}
.fmt-tab[aria-selected="true"]{color:var(--ink)}
.fmt-tab:hover{color:var(--ink)}
.fmt-tab:focus-visible{outline-offset:-3px}
.fmt-ink{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:100px;border-radius:999px;background:var(--group);box-shadow:0 6px 16px -10px rgba(19,33,59,.5);transform-origin:0 50%;pointer-events:none}
.fmt-ink i{position:absolute;left:18px;right:18px;bottom:6px;height:3px;border-radius:2px;background:var(--ball)}
html.mo .fmt-ink{transition:transform .5s cubic-bezier(.3,1.25,.5,1)}
html.mo .fmt-ink.stretch{transition:transform .2s var(--ease)}
.group.is-tabs{display:grid;background:var(--group);border-radius:var(--r-lg)}
.group.is-tabs > .row{grid-area:1/1;padding:26px 26px 28px;display:grid;grid-template-columns:1fr;align-content:start;gap:6px;visibility:hidden;opacity:0}
.group.is-tabs > .row::before{display:none}
.group.is-tabs > .row.on{visibility:visible;opacity:1}
.group.is-tabs .k{display:none}
.group.is-tabs .row h3{font-size:34px}
.group.is-tabs .row p{font-size:18px;max-width:28em}
.group .row .mini{display:none}
.group.is-tabs .row .mini{display:block;width:150px;height:90px;margin:0 0 14px}
html.mo .group.is-tabs > .row{transition:opacity .16s var(--ease),visibility 0s linear .16s}
html.mo .group.is-tabs > .row.on{transition:opacity .4s var(--ease) .14s,visibility 0s}
.fmt{min-width:0}
html.mo .group.is-tabs > .row > *{transition:transform .6s var(--ease-out)}
html.mo .group.is-tabs > .row:not(.on) > *{transform:translateY(12px)}
html.mo .group.is-tabs .row.on .dr{stroke-dasharray:1;animation:draw 1s var(--ease-out) .1s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- Wonderland style: the hero moves like a camera, cards tilt with a sheen ---------- */
.hero .shot .phone,.hero .laptop{will-change:transform}
.tilt{--gx:50%;--gy:0%}
.phone.tilt,.laptop.tilt{position:relative}
html.fine .phone.tilt::after,html.fine .laptop.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,30%),rgba(255,255,255,.22),transparent 45%)}
html.fine .tilt.hot::after{opacity:1}
html .tilt.hot{transition:transform .2s linear}
html.fine .tilt.hot{--ts:1.015}

/* ---------- Lusion style: a field of small padel balls that part round the pointer ---------- */
[data-field]{position:relative;isolation:isolate}
.field{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
.field.on{opacity:1}
.field canvas{display:block;width:100%;height:100%}

/* ---------- Rive style: a padel ball that watches and hops (404 page) ---------- */
.mascot{display:block;width:120px;height:120px;margin:0 0 18px;overflow:visible;cursor:pointer;touch-action:manipulation}
.mascot .body{transform-box:fill-box;transform-origin:50% 100%}
.mascot .pupil{transition:transform .25s var(--ease-out)}
html.mo .mascot.hop .body{animation:hop .7s var(--ease-out)}
@keyframes hop{0%{transform:scale(1.12,.86)}30%{transform:translateY(-34px) scale(.94,1.06)}62%{transform:translateY(0) scale(1.1,.9)}82%{transform:scale(.98,1.02)}to{transform:none}}
html.mo .mascot .lid{animation:blink 5s infinite}
.mascot .lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
@keyframes blink{0%,94%,100%{transform:scaleY(0)}97%{transform:scaleY(1)}}