/*
  paduno design system.

  House rules for this codebase:
  - Built from real things players use: a game list, a rule sheet, a league table, a crew page.
  - Black, electric lime and warm off-white only. Lime marks something the player
    can act on, a live result, or a status flag. It is never decoration.
  - No gradient overlays (except the hero scrim and the member card's foil and glare), glow, blur,
    ticker tapes or numbered feature lists.
  - Motion lives in motion.js and the "motion" section at the end. Every effect has a resting end
    state that html.rm (reduced motion) and no-JS visitors see.
  - Phone first: every layout is composed at 390px, then given room at 700px and 900px.
  - Anything not yet operational carries a .flag chip. Never style a preview to look live.
*/

@font-face{font-family:"Paduno Display";src:url(/fonts/paduno-display.woff2) format("woff2"),url(/fonts/paduno-display.otf) format("opentype");font-weight:800;font-display:swap}

:root{
  /* surfaces, darkest to lightest */
  --bg:#0f110f;            /* primary background: near-black with a faint green bias */
  --bg-deep:#090a09;       /* ink on light surfaces, deepest background */
  --bg-2:#181b18;          /* raised surface: cards, sheets, inputs */
  --bg-3:#222622;          /* hover surface, strong hairlines */
  --bg-alt:#131513;        /* supporting background for alternate sections */

  --cream:#faf7ef;         /* primary text on dark, light surface */
  --paper:#ffffff;        /* light cards */
  --lime:#d4ff3a;          /* action and result */

  --dim:rgba(250,247,239,.66);
  --dimmer:rgba(250,247,239,.46);
  --line:rgba(250,247,239,.15);
  --line-2:rgba(250,247,239,.28);

  --ink:var(--bg-deep);
  --ink-dim:rgba(15,17,15,.72);
  --ink-line:rgba(15,17,15,.2);

  --f-head:"Paduno Display","Outfit","Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --g:max(16px,env(safe-area-inset-left,0px));
  --max:1320px;
  --r:14px;   /* card radius */
  /* film grain for surfaces that should feel like a material, not a fill */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --edge:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(246,243,234,.1);
  --grain-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lift:0 30px 60px -32px rgba(0,0,0,.85),0 12px 24px -16px rgba(0,0,0,.6);
  --r-lg:20px;
}
@media (min-width:900px){:root{--g:48px}}

*{box-sizing:border-box}
html{background:var(--bg);overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;font-kerning:normal;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--f-head);font-weight:800;text-transform:lowercase;line-height:.92;letter-spacing:-.035em}
h4,h5{margin:0}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

[id]{scroll-margin-top:84px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--g)}
.dim{color:var(--dim)}
.note{font-size:13px;color:var(--dim);margin-top:14px;max-width:62ch}
.note a{color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lime);color:var(--ink);padding:12px 18px;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* Photography: one black-and-white treatment, so stock from many shoots reads as
   one brand. Replace with an own shoot before launch. */
.bw{filter:grayscale(1) contrast(1.1)}

/* ---------- status flags -------------------------------------------------
   Every claim about something that is not yet operational carries one. */
.flag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;background:var(--bg-2);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
.flag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dimmer);flex:none}
.flag.live{color:var(--lime)}
.flag.live::before{background:var(--lime)}
.flag.demo::before{background:#f2b705}
.flag.plan::before{background:var(--dimmer)}
.on-light .flag,.joinwrap .flag{background:rgba(15,17,15,.08);color:var(--ink-dim);box-shadow:inset 0 0 0 1px var(--ink-line)}
.on-light .flag::before{background:rgba(15,17,15,.4)}

/* A full-width honesty strip. Used anywhere sample content appears. */
.strip{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;padding:14px 16px;border-radius:var(--r);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.strip p{font-size:13.5px;color:var(--dim);max-width:70ch}
.strip p b{color:var(--cream);font-weight:700}

/* ---------- buttons ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:0;white-space:nowrap;text-align:center;transition:background .16s,color .16s,box-shadow .16s}
.btn.v{background:var(--lime);color:var(--ink)}
.btn.w{background:var(--cream);color:var(--ink)}
.btn.o{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--cream)}
.btn.o:hover{box-shadow:inset 0 0 0 1.5px var(--cream);color:var(--ink)}
.btn.k{background:var(--ink);color:var(--cream)}
.btn.sm{min-height:42px;padding:0 18px;font-size:14px}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--bg-2);color:var(--dimmer);box-shadow:none;cursor:not-allowed}
.link{font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.link:hover{color:var(--lime)}

/* ---------- header ------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:66px;gap:30px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none}
.mark img{height:26px;width:auto}
.mark .ic{height:34px;margin-top:-3px}
.nav nav{display:flex;gap:26px;font-weight:700;font-size:16px}
.nav nav a{text-decoration:none;padding:21px 0;border-bottom:2px solid transparent}
.nav nav a:hover{border-color:var(--line-2)}
.nav nav a[aria-current="page"]{border-color:var(--lime)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav .right .quiet{font-size:14px;font-weight:700;text-decoration:none;color:var(--dim)}
.nav .right .quiet:hover{color:var(--cream)}
.menu{display:none;width:44px;height:44px;border:0;background:transparent;padding:0;place-items:center}
.menu span{display:block;width:20px;height:2px;background:var(--cream);box-shadow:0 -6px 0 var(--cream),0 6px 0 var(--cream)}
.drawer{display:none}
@media (max-width:900px){
  .nav nav,.nav .right .quiet{display:none}
  .menu{display:grid}
  .drawer{position:fixed;inset:67px 0 0;z-index:39;background:var(--bg);padding:10px var(--g) 48px;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
  .drawer.on{display:flex}
  .drawer a{text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px}
  .drawer a.big{font-family:var(--f-head);font-weight:800;font-size:clamp(38px,11vw,52px);letter-spacing:-.03em;text-transform:lowercase;line-height:1;padding:11px 0}
  .drawer a[aria-current="page"]{color:var(--lime)}
  .drawer h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin:22px 0 2px}
  .drawer .btn{margin-top:22px}
}

/* ---------- page furniture ---------------------------------------------- */
.ph{padding:40px 0 30px;border-bottom:1px solid var(--line)}
.ph h1{font-size:clamp(48px,12.5vw,136px)}
.ph .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.ph p{font-size:17px;max-width:44ch;margin-top:16px;color:var(--dim)}
.ph p strong{color:var(--cream);font-weight:700}
.ph .flag{margin-top:18px}
@media (min-width:900px){
  .ph{padding:66px 0 44px}
  .ph .wrap{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:56px}
  .ph p{margin-top:0;font-size:18px}
}

.sec{padding:52px 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec h2{font-size:clamp(36px,8.5vw,80px)}
.sec h3{font-size:clamp(26px,5.5vw,38px)}
.sec .intro{color:var(--dim);font-size:17px;max-width:44ch;margin-top:14px}
.sec .lede{font-size:19px;max-width:52ch;margin-top:16px}
.sec.alt{background:var(--bg-alt)}
.sec.sunk{background:var(--bg-deep)}
.split{display:grid;gap:30px}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
@media (min-width:900px){
  .sec{padding:84px 0}
  .split{grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .split.sticky > div:first-child{position:sticky;top:96px}
}

/* generic prose block */
.prose p{color:var(--dim);font-size:16.5px;max-width:62ch}
.prose p + p,.prose ul + p,.prose p + ul{margin-top:14px}
.prose strong{color:var(--cream)}
.prose ul{margin:14px 0 0;padding-left:20px;color:var(--dim);max-width:62ch}
.prose li{margin-bottom:8px}
.prose h3{margin-top:30px}
.prose h3 + p{margin-top:12px}

/* ---------- home hero ----------------------------------------------------
   The photo fills the whole hero; the copy sits on it. The one gradient on the
   site lives here, as a scrim that keeps the copy legible over any photo. */
.hero{display:grid;position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 67px);background:var(--bg-2)}
.hero figure{grid-area:1/1;margin:0;position:relative;z-index:-1}
.hero figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,17,15,.6) 0,rgba(15,17,15,0) 150px),linear-gradient(to top,rgba(15,17,15,.97) 0%,rgba(15,17,15,.86) 36%,rgba(15,17,15,.25) 66%,rgba(15,17,15,0) 100%)}
.hero .copy{grid-area:1/1;align-self:end;padding:120px var(--g) 40px;max-width:780px}
.hero h1{font-size:clamp(54px,15vw,152px)}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero h1 .l{display:block}
.hero .kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:16px}
.hero .copy > p{font-size:18px;max-width:36ch;margin-top:18px;color:rgba(246,243,234,.82)}
.hero .ctas{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.hero .ctas .btn{flex:1 1 auto;min-width:150px}
.hero .btn.o{box-shadow:inset 0 0 0 1.5px rgba(246,243,234,.6)}
.hero .under{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap;font-size:13.5px;color:var(--dim)}
@media (min-width:900px){
  .hero{min-height:clamp(600px,calc(100svh - 67px),940px)}
  /* mirrored on wide screens so the player sits right of the copy, and her reflection behind it */
  .hero figure img{object-position:50% 24%;transform:scaleX(-1)}
  .hero figure::after{background:
    linear-gradient(to bottom,rgba(15,17,15,.55) 0,rgba(15,17,15,0) 160px),
    linear-gradient(90deg,rgba(15,17,15,.94) 0%,rgba(15,17,15,.78) 34%,rgba(15,17,15,.2) 62%,rgba(15,17,15,0) 80%),
    linear-gradient(to top,rgba(15,17,15,.7) 0%,rgba(15,17,15,0) 45%)}
  .hero h1{font-size:min(7vw,120px)}
  .hero .copy{padding:120px var(--g) 64px;margin-left:max(0px,calc((100vw - var(--max)) / 2));max-width:min(780px,54vw)}
  .hero .ctas .btn{flex:0 0 auto}
}
@media (min-width:1500px){.hero h1{font-size:104px}.hero .copy{max-width:640px}.hero figure img{object-position:50% 20%}}

/* ---------- numbered steps ---------------------------------------------- */
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;background:var(--bg-2);border-radius:var(--r);padding:20px 20px 22px;box-shadow:inset 0 0 0 1px var(--line)}
.steps li::before{content:counter(s);display:block;font-family:var(--f-head);font-weight:800;font-size:30px;line-height:1;color:var(--lime);margin-bottom:12px}
.steps h3{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:18px;font-weight:700;line-height:1.3}
.steps p{color:var(--dim);font-size:14.5px;margin-top:7px}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1050px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}

/* ---------- the three pillars ------------------------------------------- */
.doors{display:grid;gap:34px}
.door{text-decoration:none;display:block}
.door figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2);border-radius:var(--r)}
.door img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.door:hover img{transform:scale(1.035)}
.door h2{font-size:clamp(48px,12vw,86px);margin-top:16px}
.door .sub{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-top:12px}
.door p{color:var(--dim);margin-top:8px;max-width:36ch}
.door > span.go{display:inline-block;margin-top:14px;font-weight:700;border-bottom:2px solid var(--lime)}
.door:hover > span.go{color:var(--lime)}
@media (min-width:900px){.doors{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.door figure{aspect-ratio:4/5}.door h2{font-size:min(5vw,76px)}}


/* ---------- full-width photo plate -------------------------------------- */
.plate .wrap > figure{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2);border-radius:var(--r-lg)}
.plate .wrap > figure img{width:100%;height:100%;object-fit:cover}
.plate .cap{display:grid;gap:12px;padding-top:24px}
.plate h2{font-size:clamp(46px,12vw,132px)}
.plate h2 em{font-style:normal;color:var(--lime)}
.plate p{color:var(--dim);font-size:17px;max-width:46ch}
@media (min-width:900px){.plate .wrap > figure{aspect-ratio:21/9}.plate .cap{grid-template-columns:1.25fr 1fr;align-items:end;gap:48px;padding-top:30px}}

/* a single portrait photo beside text */
.photo{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2);border-radius:var(--r-lg)}
.photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.photo{aspect-ratio:4/3}}

/* ---------- filters ------------------------------------------------------ */
.bar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--g) * -1);padding:0 var(--g) 2px}
.bar::-webkit-scrollbar{display:none}
.pill{flex:none;min-height:42px;padding:0 16px;border-radius:999px;border:0;background:var(--bg-2);font-weight:700;font-size:14px;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line);transition:background .14s,color .14s}
.pill:hover{background:var(--bg-3)}
.pill[aria-pressed="true"]{background:var(--lime);color:var(--ink);box-shadow:none}
.fgroup{margin-bottom:20px}
.fgroup > h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin-bottom:10px}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.day{border:0;background:transparent;border-radius:12px;padding:9px 0 7px;text-align:center;box-shadow:inset 0 0 0 1px var(--line);color:var(--cream);min-height:56px}
.day small{display:block;font-size:11.5px;font-weight:700;color:var(--dim)}
.day b{display:block;font-family:var(--f-head);font-weight:800;font-size:22px;line-height:1.05}
.day[aria-pressed="true"]{background:var(--lime);color:var(--ink);box-shadow:none}
.day[aria-pressed="true"] small{color:var(--ink)}
.toggles{display:grid;gap:4px}
.tog{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:15px;cursor:pointer;border-bottom:1px solid var(--line)}
.tog:last-child{border-bottom:0}
.tog input{width:21px;height:21px;accent-color:var(--lime);flex:none}
.tog span{color:var(--dim)}
.tog input:checked + span{color:var(--cream);font-weight:700}
.rng{margin:4px 0 2px}
.rng label{display:flex;justify-content:space-between;font-weight:700;font-size:14px;margin-bottom:8px}
.rng label b{font-family:var(--f-head);font-weight:800;font-size:20px;color:var(--lime)}
.rng input{width:100%;accent-color:var(--lime);height:28px}
.reset{background:none;border:0;padding:0;color:var(--dim);font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.reset:hover{color:var(--lime)}
.count{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--dim);margin-top:22px;padding-bottom:12px;border-bottom:1px solid var(--cream)}
.count b{color:var(--cream)}
.count select{background:transparent;border:0;font-weight:700;color:var(--cream);font-size:14px}
.count select option{color:var(--ink)}

/* ---------- game cards --------------------------------------------------- */
.games{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.game{background:var(--bg-2);border-radius:var(--r);padding:16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:12px}
.game .gtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.game .gwhen{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.game time{font-family:var(--f-head);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:.9}
.game .gdate{font-size:13px;color:var(--dim);font-weight:700}
.game h3{font-family:var(--f-body);text-transform:none;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:0;margin-top:9px}
.game .buying{display:block;font-size:13px;color:var(--lime);font-weight:700;margin-top:5px}
.game .venue{display:block;font-size:14.5px;color:var(--dim);margin-top:6px}
.game .tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;padding:4px 9px;border-radius:7px;background:rgba(250,247,239,.09);font-size:12px;font-weight:700;color:var(--dim);white-space:nowrap}
.tag.hi{background:var(--lime);color:var(--ink)}
.tag.o{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.game dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:0;padding:13px 0;border-block:1px solid var(--line)}
.game dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer);font-weight:700}
.game dd{margin:2px 0 0;font-size:14.5px;font-weight:700}
.game .gfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.game .price{display:flex;align-items:baseline;gap:7px}
.game .price b{font-family:var(--f-head);font-weight:800;font-size:30px;letter-spacing:-.03em}
.game .price span{font-size:12.5px;color:var(--dim)}
.game .gfoot .btn{flex:1 1 150px}
.slots{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--dim)}
.slots i{display:flex;gap:2px}
.slots i s{width:7px;height:13px;border-radius:2px;background:rgba(250,247,239,.18)}
.slots i s.f{background:var(--cream)}
.slots.hot{color:var(--lime)}
.slots.hot i s.f{background:var(--lime)}
.game.full{opacity:.72}
.none{padding:30px 0;color:var(--dim)}
.none b{display:block;color:var(--cream);font-family:var(--f-head);font-size:28px;text-transform:lowercase;letter-spacing:-.03em;margin-bottom:8px}
@media (min-width:700px){
  .games{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game{padding:20px}
}
@media (min-width:900px){
  .finder{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start}
  .finder .side{position:sticky;top:96px;max-height:calc(100svh - 120px);overflow-y:auto;padding-right:6px}
  .finder .bar{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
}
@media (min-width:1150px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- format cards ------------------------------------------------- */
.formats{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.fmt{background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);display:grid}
.fmt > img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fmt .body{padding:20px}
.fmt h3{font-size:clamp(30px,7vw,42px)}
.fmt .kind{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.fmt > .body > p{color:var(--dim);margin-top:10px;font-size:15.5px;max-width:58ch}
.fmt dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px}
.fmt dt{color:var(--dimmer);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding-top:2px}
.fmt dd{margin:0}
.fmt dd b{color:var(--lime)}
@media (min-width:900px){
  .fmt{grid-template-columns:300px 1fr}
  .fmt > img{aspect-ratio:auto;height:100%}
  .fmt .body{padding:28px 30px}
}

/* ---------- a plain fact table ------------------------------------------ */
.facts{width:100%;border-collapse:collapse;border-top:1px solid var(--cream)}
.facts th,.facts td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
.facts th{width:38%;color:var(--dim);font-weight:400;padding-right:16px}
.facts td{font-weight:700}
.facts td span{display:block;font-weight:400;color:var(--dim);font-size:14px;margin-top:4px}
@media (max-width:560px){
  .facts.stack th,.facts.stack td{display:block;width:auto;padding-right:0}
  .facts.stack th{border-bottom:0;padding-bottom:2px}
  .facts.stack td{padding-top:0}
}

/* ---------- rule sheet --------------------------------------------------- */
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--cream)}
.rules li{padding:18px 0;border-bottom:1px solid var(--line)}
.rules b{display:block;font-family:var(--f-head);font-weight:800;font-size:clamp(26px,6vw,44px);text-transform:lowercase;letter-spacing:-.03em;line-height:1}
.rules span{display:block;color:var(--dim);margin-top:8px;max-width:58ch}

/* scoring ladder, used on /rules */
.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:22px}
.ladder div{background:var(--bg-2);border-radius:12px;padding:14px 4px;text-align:center;box-shadow:inset 0 0 0 1px var(--line)}
.ladder b{display:block;font-family:var(--f-head);font-weight:800;font-size:clamp(24px,6.6vw,44px);line-height:1;letter-spacing:-.03em}
.ladder div.win b{color:var(--lime);font-size:clamp(18px,5vw,40px)}
.ladder span{display:block;font-size:11px;color:var(--dim);margin-top:8px;font-weight:700;white-space:nowrap}
@media (min-width:700px){.ladder{gap:10px}.ladder div{padding:20px 10px}.ladder span{font-size:12.5px}}

/* court diagram */
.court{margin:0;background:var(--bg-2);border-radius:var(--r-lg);padding:20px;box-shadow:inset 0 0 0 1px var(--line)}
.court svg{width:100%;height:auto;display:block}
.court figcaption{font-size:13px;color:var(--dim);margin-top:14px;max-width:56ch}

/* definition rows for terminology */
.terms{margin:0;display:grid;gap:0;border-top:1px solid var(--cream)}
.terms > div{padding:16px 0;border-bottom:1px solid var(--line)}
.terms dt{font-weight:700;font-size:16.5px}
.terms dd{margin:6px 0 0;color:var(--dim);font-size:15px;max-width:62ch}
@media (min-width:700px){.terms > div{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:baseline}.terms dd{margin:0}}

/* ---------- league and rating -------------------------------------------- */
.divs{display:flex;gap:6px;margin-top:22px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.divs::-webkit-scrollbar{display:none}
.divs span{flex:none;padding:8px 13px;border-radius:999px;font-weight:700;font-size:13px;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim)}
.divs span.on{background:var(--lime);color:var(--ink);box-shadow:none}
.tbl{width:100%;border-collapse:collapse;border-top:2px solid var(--cream)}
.tbl th{font-size:11.5px;font-weight:700;color:var(--dimmer);text-align:left;padding:10px 0;letter-spacing:.05em;text-transform:uppercase}
.tbl td{padding:13px 0;border-top:1px solid var(--line);vertical-align:middle}
.tbl .p{width:38px;font-family:var(--f-head);font-weight:800;font-size:21px}
.tbl .n b{display:block;font-weight:700}
.tbl .n small{color:var(--dim);font-size:12.5px}
.tbl .s{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tbl .mv{text-align:right;width:42px;font-size:12px;font-weight:700;color:var(--dim)}
.tbl .mv.up{color:var(--lime)}
.tbl tr.top .p{color:var(--lime)}
.tbl tr.zone td{font-size:11px;font-weight:700;color:var(--lime);padding:8px 0;border-top:1px dashed rgba(212,255,58,.45);letter-spacing:.06em;text-transform:uppercase}
.tbl tr.zone.down td{color:var(--dim);border-top-color:var(--line-2)}
.tbl tr.you td{background:rgba(250,247,239,.06)}
.tbl tr.you td:first-child{padding-left:10px;border-radius:8px 0 0 8px}
.tbl tr.you td:last-child{padding-right:10px;border-radius:0 8px 8px 0}
.tbl tr.you .n b{color:var(--lime)}
.dates{list-style:none;margin:0;padding:0;border-top:1px solid var(--cream)}
.dates li{display:grid;grid-template-columns:96px 1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dates time{font-weight:700;font-size:14.5px}
.dates span{color:var(--dim);font-size:15px}
.dates b{font-size:14px;white-space:nowrap}

/* two-system contrast block */
.systems{display:grid;gap:14px;margin-top:28px}
.system{background:var(--bg-2);border-radius:var(--r-lg);padding:22px;box-shadow:inset 0 0 0 1px var(--line)}
.system.a{box-shadow:inset 0 0 0 1.5px rgba(212,255,58,.5)}
.system h3{font-size:clamp(28px,6vw,40px)}
.system > p{color:var(--dim);margin-top:10px;font-size:15.5px}
.system ul{list-style:none;margin:18px 0 0;padding:0}
.system li{padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--dim)}
.system li b{color:var(--cream)}
.system .never{margin-top:18px;padding:12px 14px;border-radius:10px;background:rgba(15,17,15,.45);font-size:13.5px;color:var(--dim)}
.system .never b{color:var(--lime)}
@media (min-width:900px){.systems{grid-template-columns:1fr 1fr;align-items:start}}

/* ---------- crews -------------------------------------------------------- */
.crews{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.crew{background:var(--bg-2);border-radius:var(--r-lg);padding:20px;box-shadow:inset 0 0 0 1px var(--line)}
.crew .badge{width:52px;height:52px;border-radius:14px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-family:var(--f-head);font-weight:800;font-size:22px;letter-spacing:-.04em;text-transform:lowercase}
.crew h3{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:19px;font-weight:700;margin-top:14px}
.crew .where{display:block;font-size:13.5px;color:var(--dim);margin-top:4px}
.crew p{color:var(--dim);font-size:14.5px;margin-top:12px}
.crew .meta{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.crew .meta div b{display:block;font-family:var(--f-head);font-weight:800;font-size:22px;line-height:1;color:var(--lime)}
.crew .meta div span{font-size:11.5px;color:var(--dim);font-weight:700}
@media (min-width:700px){.crews{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- community cards ---------------------------------------------- */
.cards{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.card{background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card .body{padding:20px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:19px;font-weight:700;line-height:1.3}
.card p{color:var(--dim);font-size:14.5px;margin-top:9px}
.card .go{margin-top:auto;padding-top:16px;font-weight:700;font-size:14.5px}
.card .go span{border-bottom:2px solid var(--lime);padding-bottom:2px}
.card a.go:hover span{color:var(--lime)}
.card .flag{margin-top:14px;align-self:flex-start}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1050px){.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- timeline ----------------------------------------------------- */
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--cream)}
.timeline li{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.timeline time{font-family:var(--f-head);font-weight:800;font-size:22px;line-height:1.1}
.timeline b{display:block}
.timeline span{color:var(--dim);font-size:14.5px}

/* ---------- booking sheet ------------------------------------------------ */
.book{border:0;padding:0;margin:auto auto 0;width:100%;max-width:100%;background:var(--bg-2);color:var(--cream);border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92svh}
.book::backdrop{background:rgba(15,17,15,.78)}
.book[open]{animation:up .25s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(32px);opacity:0}}
.sb{padding:14px var(--g) calc(22px + env(safe-area-inset-bottom,0px))}
.sb .grab{width:44px;height:5px;border-radius:5px;background:var(--line-2);margin:0 auto 14px}
.sb .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sb .x{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg-3);color:var(--cream);font-size:20px;line-height:1;flex:none}
.sb h3{font-size:clamp(32px,8vw,44px)}
.sb .when{color:var(--dim);margin-top:6px;font-size:14.5px}
.sb dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:18px 0;padding:16px 0;border-block:1px solid var(--line);font-size:14.5px}
.sb dt{color:var(--dim)}
.sb dd{margin:0;font-weight:700;text-align:right}
.sb .opt{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:15px;cursor:pointer}
.sb .opt input{width:22px;height:22px;accent-color:var(--lime)}
.sb .pay{display:flex;align-items:center;gap:14px;margin-top:14px}
.sb .pay b{font-family:var(--f-head);font-size:36px}
.sb .pay .btn{flex:1}
.sb .fine{font-size:12.5px;color:var(--dim);margin-top:12px}
.sb .done p{color:var(--dim);margin-top:10px;font-size:15px}
.sb .flag{margin-bottom:14px}
@media (min-width:700px){.book{margin:auto;max-width:520px;border-radius:var(--r-lg)}.sb{padding:24px 28px 28px}.sb .grab{display:none}}

/* ---------- forms -------------------------------------------------------- */
.f{display:grid;gap:6px;margin-bottom:14px}
.f label{font-weight:700;font-size:13px}
.f input:not([type=checkbox]):not([type=radio]),.f select,.f textarea{min-height:52px;border:0;border-radius:10px;background:var(--cream);color:var(--ink);padding:13px 14px;font-size:16px;width:100%;appearance:none}
.f textarea{min-height:110px;resize:vertical}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 23px,calc(100% - 15px) 23px;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.f input:not([type=checkbox]):focus,.f select:focus,.f textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.f .err{font-size:13px;font-weight:700;color:#7a1f12}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #a8301c}
.prefs{border:0;padding:0;margin:4px 0 14px;min-width:0}
.prefs legend{font-weight:700;font-size:13px;margin-bottom:6px;padding:0}
.prefs .tog{border-color:var(--ink-line)}
.prefs .tog span,.prefs .tog input:checked + span{color:var(--ink)}
.prefs .tog input{accent-color:var(--bg)}
.prefs{border:0;padding:0;margin:4px 0 14px;min-width:0}
.prefs legend{font-weight:700;font-size:13px;margin-bottom:6px;padding:0}
.prefs .tog{border-color:var(--ink-line)}
.prefs .tog span,.prefs .tog input:checked + span{color:var(--ink)}
.prefs .tog input{accent-color:var(--bg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.small{font-size:13px;margin-top:10px;opacity:.78}
.formnote{font-size:13px;color:var(--dim);margin-top:12px;max-width:52ch}

/* ---------- join (lime page) --------------------------------------------- */
.joinwrap{background:var(--lime);color:var(--ink)}
.joinwrap .ph{border-color:var(--ink-line)}
.joinwrap .ph p{color:var(--ink-dim)}
.joinwrap .ph p strong,.joinwrap .ph .eyebrow{color:var(--ink)}
.joinwrap .sec{border-color:var(--ink-line)}
.joinwrap .facts{border-top-color:var(--ink)}
.joinwrap .facts th,.joinwrap .facts td{border-bottom-color:var(--ink-line)}
.joinwrap .facts th{color:var(--ink-dim)}
.joinwrap .formnote,.joinwrap .note{color:var(--ink-dim)}
.joinwrap .link:hover{color:var(--bg)}
.plus p{max-width:42ch;margin-top:12px;color:var(--ink-dim)}
.perks{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.perks li{padding:14px 0;border-bottom:1px solid var(--ink-line);font-weight:700;font-size:16.5px}
.perks li span{display:block;font-weight:400;font-size:14.5px;color:var(--ink-dim);margin-top:3px}

/* ---------- venue calculator --------------------------------------------- */
.calc{background:var(--bg-2);border-radius:var(--r-lg);padding:20px;box-shadow:inset 0 0 0 1px var(--line)}
.out{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--cream);margin-top:18px}
.out div{padding:14px 0;border-bottom:1px solid var(--line)}
.out b{display:block;font-family:var(--f-head);font-weight:800;font-size:clamp(28px,7vw,38px);letter-spacing:-.03em;line-height:1}
.out span{font-size:12.5px;color:var(--dim);font-weight:700;display:block;margin-top:6px}
.out div.wide{grid-column:1/-1}
.out div.lead b{color:var(--lime)}
.assume{margin:16px 0 0;padding:14px;border-radius:10px;background:rgba(15,17,15,.4);font-size:13px;color:var(--dim)}
.assume h4{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer);margin-bottom:8px}
.assume ul{margin:0;padding-left:18px}
.assume li{margin-bottom:5px}
.receipt{width:100%;border-collapse:collapse;border-top:1px solid var(--cream)}
.receipt th,.receipt td{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;text-align:left}
.receipt th{font-weight:400;color:var(--dim)}
.receipt td{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.receipt .us th,.receipt .us td{color:var(--lime);font-weight:700}
.receipt .sum th,.receipt .sum td{border-top:2px solid var(--cream);border-bottom:0;padding-top:16px;color:var(--cream);font-family:var(--f-head);font-weight:800;font-size:clamp(24px,5vw,34px);letter-spacing:-.02em}

/* ---------- FAQ ---------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--cream)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--lime);font-weight:400;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details .ans{color:var(--dim);padding:0 0 20px;max-width:64ch}
.faq details .ans p + p{margin-top:12px}
.faq details .ans b{color:var(--cream)}
.faq h2{font-size:clamp(28px,6vw,44px);margin:40px 0 12px}
.faq h2:first-child{margin-top:0}

/* ---------- legal / long-form document ----------------------------------- */
.doc{max-width:74ch}
.doc h2{font-size:clamp(28px,6vw,42px);margin-top:44px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:19px;font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:700;margin-top:28px}
.doc p,.doc li{color:var(--dim);font-size:16px}
.doc p{margin-top:12px}
.doc ul,.doc ol{margin:12px 0 0;padding-left:20px}
.doc li{margin-bottom:8px}
.doc strong{color:var(--cream)}
.doc .meta{font-size:13.5px;color:var(--dimmer);margin-bottom:8px}
.toc{list-style:none;margin:0;padding:0;position:sticky;top:96px}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:block;padding:11px 0;text-decoration:none;font-size:14.5px;color:var(--dim);font-weight:700}
.toc a:hover{color:var(--lime)}

/* ---------- status board -------------------------------------------------- */
.board{list-style:none;margin:0;padding:0;border-top:1px solid var(--cream)}
.board li{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid var(--line)}
.board b{font-size:17px;font-weight:700}
.board p{color:var(--dim);font-size:14.5px;max-width:60ch}
@media (min-width:700px){.board li{grid-template-columns:1fr 190px;align-items:start;gap:24px}.board .flag{justify-self:start}}

/* ---------- closing call to action --------------------------------------- */
.next{border-top:1px solid var(--line);padding:56px 0;background:var(--bg-deep)}
.next .wrap{display:grid;gap:22px}
.next h2{font-size:clamp(38px,9vw,84px)}
.next h2 em{font-style:normal;color:var(--lime)}
.next p{color:var(--dim);max-width:44ch;margin-top:14px}
.next .btns{display:flex;gap:10px;flex-wrap:wrap}
.next .btns .btn{flex:1 1 auto;min-width:150px}
@media (min-width:900px){.next{padding:76px 0}.next .wrap{grid-template-columns:1.4fr 1fr;align-items:end}.next .btns{justify-self:end}.next .btns .btn{flex:0 0 auto}}

/* ---------- footer -------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:44px 0 56px;font-size:14px;background:var(--bg)}
footer .top{display:grid;gap:30px}
footer .mark img{height:22px}
footer .mark .ic{height:28px}
footer .blurb{color:var(--dim);font-size:14px;max-width:34ch;margin-top:14px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}
.social a:hover{background:var(--lime);color:var(--ink)}
.social svg{width:19px;height:19px;display:block}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.fcols h4{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer)}
.fcols a{display:block;color:var(--dim);text-decoration:none;padding:4px 0}
.fcols a:hover{color:var(--lime)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:38px;padding-top:20px;border-top:1px solid var(--line);color:var(--dimmer);font-size:12.5px}
.legal a{color:inherit;text-decoration:none}
.legal a:hover{color:var(--cream)}
@media (min-width:900px){footer .top{grid-template-columns:1fr 2.4fr}.fcols{grid-template-columns:repeat(4,1fr)}}

/* ---------- 404 ----------------------------------------------------------- */
.lost{padding:80px 0 90px;text-align:center}
.lost h1{font-size:clamp(70px,22vw,200px)}
.lost p{color:var(--dim);margin:16px auto 0;max-width:40ch}
.lost .ctas{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}


/* =========================================================================
   motion
   ========================================================================= */

/* page-to-page: the header stays put, the page lifts out and the next one rises in */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(root){animation:vt-out .24s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .6s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(26px)}}

/* reveal: rise and settle, staggered within a group */
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 75ms)}
.js [data-r].in{opacity:1;transform:none}

/* headline words rise out of their own line */
.w{display:inline-block;clip-path:inset(-.3em -.15em -.2em -.15em)}
.wi{display:inline-block}
.wd{display:inline-block;white-space:nowrap}
.js [data-split] .wi{transform:translateY(135%);transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi,0) * 62ms + var(--base,0ms))}
.js [data-split].in .wi{transform:none}

/* the ball as a full stop: a padel ball with its seam, dropping into place */
.dot{display:inline-block;width:.2em;height:.2em;margin-left:.03em;border-radius:50%;transform-origin:50% 100%;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.2 4.2c4.3 2.4 4.3 9.2 0 11.6M16.8 4.2c-4.3 2.4-4.3 9.2 0 11.6' fill='none' stroke='%230f110f' stroke-width='1.4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") center/100% no-repeat}
.js [data-split] .dot{opacity:0}
.js [data-split].in .dot{opacity:1;transform:none;animation:ball-drop 1.3s linear both;animation-delay:calc(var(--wi,0) * 62ms + var(--base,0ms) + 420ms)}
@keyframes ball-drop{
  0%{opacity:0;transform:translateY(-3.4em);animation-timing-function:cubic-bezier(.55,0,1,.55)}
  5%{opacity:1}
  36%{transform:translateY(0) scale(1.22,.78);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  56%{transform:translateY(-1em) scale(.95,1.05);animation-timing-function:cubic-bezier(.55,0,1,.55)}
  72%{transform:translateY(0) scale(1.12,.88);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  83%{transform:translateY(-.3em);animation-timing-function:cubic-bezier(.55,0,1,.55)}
  93%{transform:translateY(0) scale(1.04,.96)}
  100%{opacity:1;transform:none}}

/* header: transparent over the home hero, solid once you scroll, tucked on the way down */
.nav{transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .35s,border-color .35s}
.nav.tuck{transform:translateY(-100%)}
body[data-page="index"] main{margin-top:-67px}
body[data-page="index"] .nav:not(.solid){background:transparent;border-color:transparent}
body:has(.drawer.on) .nav{background:var(--bg)!important;transform:none}
body[data-page="index"] .hero{min-height:100svh}
@media (min-width:900px){body[data-page="index"] .hero{min-height:clamp(640px,100svh,1000px)}}

/* hero entrance */
.hero figure img{animation:hero-in 2s cubic-bezier(.16,1,.3,1) both}
@keyframes hero-in{from{opacity:0;scale:1.14}}
.hero h1{--base:220ms}
.js .hero .copy > [data-r]{transition-delay:calc(560ms + var(--i,0) * 120ms)}

/* buttons: the next colour rises through the pill */
.btn{position:relative;isolation:isolate;overflow:hidden;transition:color .3s,box-shadow .3s,transform .22s cubic-bezier(.2,.8,.2,1)}
.btn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--fill,var(--cream));transform:translateY(104%);transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:-1}
.btn.v{--fill:var(--cream)}
.btn.w{--fill:var(--lime)}
.btn.o{--fill:var(--cream)}
.btn.k{--fill:var(--bg-3)}
.btn[disabled]::after{display:none}
@media (hover:hover){.btn:hover::after{transform:none}}
.btn:active{transform:scale(.965)}

/* links: the underline is replaced by a lime one drawn from the left */
.link{text-decoration:none;padding-bottom:2px;background-repeat:no-repeat;
  background-image:linear-gradient(var(--lime),var(--lime)),linear-gradient(currentColor,currentColor);
  background-size:0% 2px,100% 1.5px;background-position:0 100%,100% 100%;
  transition:background-size .5s cubic-bezier(.16,1,.3,1),color .25s}
.link:hover{background-size:100% 2px,0% 1.5px}
.joinwrap .link{background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(currentColor,currentColor)}

/* cards lift a touch under the pointer */
.game,.card,.crew,.fmt,.steps li{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s}
@media (hover:hover){
  .game:hover,.card:hover,.crew:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-2)}
  .game:hover .btn::after{transform:none}
}
.games > li.enter{animation:card-in .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes card-in{from{opacity:0;transform:translateY(20px) scale(.98)}}
.pill,.day{transition:background .2s,color .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.pill:active,.day:active{transform:scale(.94)}

/* pillar photos unmask from the floor up */
.js .door[data-r] figure{clip-path:inset(100% 0 0 0 round var(--r));transition:clip-path 1.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 130ms + 100ms)}
.js .door[data-r].in figure{clip-path:inset(0 0 0 0 round var(--r))}

/* how-it-works steps: a lime edge draws across each card in turn */
.steps li{position:relative;overflow:hidden}
.steps li::after{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--lime);transform:scaleX(1);transform-origin:left}
.js .steps li::after{transform:scaleX(0);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 160ms + 350ms)}
.js .steps li.in::after{transform:none}

/* stranger to community: a segmented track fills as you scroll */

/* be someone's fourth */
.fourth{margin:0 0 24px;padding:18px;border-radius:var(--r-lg);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.fourth svg{display:block;width:100%;height:auto;overflow:visible}
.fourth .ct{fill:var(--bg-deep);stroke:var(--line-2);stroke-width:2;transition:stroke .6s 1.2s}
.fourth .ln{stroke:var(--line-2);stroke-width:1.2;transition:stroke .6s 1.2s}
.fourth .net{stroke:var(--cream);stroke-width:3;opacity:.8}
.fourth .pl circle{fill:var(--bg-3);stroke:var(--line-2);stroke-width:1.5}
.fourth .pl text,.fourth .you text{font:700 13px var(--f-body);fill:var(--cream);text-anchor:middle;dominant-baseline:central}
.fourth .slot{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-dasharray:4 5;transform-box:fill-box;transform-origin:center;animation:slot 1.6s ease-in-out infinite}
@keyframes slot{50%{opacity:.35;transform:scale(.9)}}
.fourth .you{transform:translate(0,120px);opacity:0;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .4s}
.fourth .you circle{fill:var(--lime)}
.fourth .you text{fill:var(--ink)}
.fourth .rally{fill:var(--lime);opacity:0}
.fourth.go .you{transform:none;opacity:1}
.fourth.go .slot{animation:none;opacity:0;transition:opacity .3s .6s}
.fourth.go .ct,.fourth.go .ln{stroke:rgba(212,255,58,.55)}
.fourth.go .rally{opacity:1;transition:opacity .3s 1.6s;animation:rally 3.2s cubic-bezier(.45,0,.55,1) 1.6s infinite}
.fourth.rm .rally{display:none}
@keyframes rally{
  0%{transform:translate(140px,65px)} 25%{transform:translate(260px,155px)}
  50%{transform:translate(140px,155px)} 75%{transform:translate(260px,65px)} 100%{transform:translate(140px,65px)}}
.fourth figcaption{display:grid;margin-top:14px;font-weight:700;font-size:15px}
.fourth figcaption span{grid-area:1/1;justify-self:start;transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.fourth figcaption .st-b{color:var(--lime);opacity:0;transform:translateY(8px)}
.fourth.go figcaption .st-a{opacity:0;transform:translateY(-8px);transition-delay:.9s}
.fourth.go figcaption .st-b{opacity:1;transform:none;transition-delay:1.1s}

/* scoring ladder plays a game */
.js .ladder div b{opacity:.26;transition:opacity .3s,color .3s}
.ladder div.on b{opacity:1}
.ladder div{transition:background-color .35s,box-shadow .35s}
.ladder div.on{box-shadow:inset 0 0 0 1px rgba(212,255,58,.4)}
.js .ladder div.win.on{background:var(--lime);animation:pop .5s cubic-bezier(.2,.8,.2,1)}
.js .ladder div.win.on b,.js .ladder div.win.on span{color:var(--ink)}
@keyframes pop{45%{transform:scale(1.08)}}

/* the serve */
.sv-ball{fill:var(--lime);opacity:0}
.sv-shadow{fill:#000;opacity:0}
[data-serve].live .sv-ball{opacity:1}
[data-serve].live .sv-shadow{opacity:.45}
.sv-mark{fill:none;stroke:var(--lime);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.sv-mark.on{opacity:.85;animation:ring .6s cubic-bezier(.16,1,.3,1)}
@keyframes ring{from{opacity:0;transform:scale(2.6)}}
.sv-glass{stroke:transparent;stroke-width:4;stroke-linecap:round}
.sv-glass.on{stroke:var(--lime);animation:glass .9s ease-out}
@keyframes glass{0%{stroke-width:9;opacity:1}100%{stroke-width:4}}
.sv-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.sv-cap{font-weight:700;font-size:14px;min-height:1.5em}
.sv-replay{background:none;border:0;color:var(--lime);font-weight:700;font-size:13.5px;padding:8px 0;opacity:.4;pointer-events:none;transition:opacity .3s}
[data-serve].done .sv-replay{opacity:1;pointer-events:auto}

/* format rotation demos */
.rot{margin-top:20px;padding:16px;border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);max-width:460px}
.rot-court{position:relative;aspect-ratio:2/1;border:1.5px solid var(--line-2);border-radius:8px;background:var(--bg-deep)}
.rot-net{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;background:var(--cream);opacity:.75;transform:translateX(-50%)}
.tok{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:grid;place-items:center;background:var(--bg-3);color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line-2);
  transition:left .85s cubic-bezier(.65,0,.35,1),top .85s cubic-bezier(.65,0,.35,1),opacity .45s,background-color .45s,color .45s}
.tok b{font-size:16px;font-weight:700;line-height:1}
.tok.side-l{background:var(--lime);color:var(--ink);box-shadow:none}
.tok small{position:absolute;top:100%;margin-top:3px;font-size:10.5px;color:var(--dim);white-space:nowrap;font-weight:700}
.tok.enter,.tok.gone{opacity:0}
.rot-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.rot-label{font-weight:700;font-size:14px}
.rot-next{background:none;border:0;color:var(--lime);font-weight:700;font-size:13.5px;padding:8px 0}
.rot-next span{display:inline-block;transition:transform .3s}
.rot-next:hover span{transform:translateX(4px)}
.rot-note{font-size:13px;color:var(--dim);margin-top:4px}

/* rating playground */
.ratelab{margin-top:36px;padding:22px;border-radius:var(--r-lg);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.ratelab h3{font-size:clamp(26px,6vw,36px)}
.ratelab > p{color:var(--dim);font-size:14.5px;margin-top:8px;max-width:52ch}
.rl-grid{display:grid;gap:2px 24px;margin-top:20px}
@media (min-width:700px){.rl-grid{grid-template-columns:1fr 1fr}}
.rl-bars{display:grid;gap:12px;margin-top:18px}
.rl-bar{display:grid;grid-template-columns:110px 1fr 42px;align-items:center;gap:10px;font-size:13px;color:var(--dim);font-weight:700}
.rl-bar i{display:block;height:10px;border-radius:10px;background:var(--bg-3);position:relative;overflow:hidden}
.rl-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:inherit;background:var(--cream);transition:width .55s cubic-bezier(.16,1,.3,1)}
.rl-bar i.act::after{background:var(--lime)}
.rl-bar span:last-child{text-align:right;color:var(--cream);font-variant-numeric:tabular-nums}
.rl-out{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.rl-out b{font-family:var(--f-head);font-weight:800;font-size:clamp(46px,11vw,68px);line-height:1;letter-spacing:-.03em;color:var(--lime);display:inline-block}
.rl-out b.neg{color:#ff9b85}
.rl-out span{font-weight:700;color:var(--dim);font-size:14px}
.ratelab.bump .rl-out b{animation:bump .32s cubic-bezier(.2,.8,.2,1)}
@keyframes bump{40%{transform:scale(1.07)}}
.rl-why{font-size:13px;color:var(--dim);margin-top:10px;max-width:62ch;font-variant-numeric:tabular-nums}

.mc-ball{border-radius:50%;opacity:0;transform-origin:50% 100%;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.2 4.2c4.3 2.4 4.3 9.2 0 11.6M16.8 4.2c-4.3 2.4-4.3 9.2 0 11.6' fill='none' stroke='%230f110f' stroke-width='1.4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") center/100% no-repeat}
@keyframes card-ball{
  0%{opacity:0;transform:translateY(-120px);animation-timing-function:cubic-bezier(.55,0,1,.55)}
  6%{opacity:1}
  38%{transform:none;animation-timing-function:cubic-bezier(0,.55,.45,1)}
  40%{transform:scale(1.2,.8)}
  58%{transform:translateY(-34px);animation-timing-function:cubic-bezier(.55,0,1,.55)}
  76%{transform:scale(1.1,.9);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  88%{transform:translateY(-10px)}
  100%{opacity:1;transform:none}}

/* footer sign-off: the last thing on every page */
.signoff{margin:0 0 46px;font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.045em;line-height:.86;font-size:clamp(56px,15vw,210px);color:var(--cream)}
.signoff .l{display:block}
.signoff .l + .l{color:var(--lime)}

/* 404: the ball goes over the fence */
.js .lost h1.in .dot{animation:ball-out 2.4s linear both;animation-delay:.6s}
@keyframes ball-out{
  0%{opacity:0;transform:translateY(-3.4em);animation-timing-function:cubic-bezier(.55,0,1,.55)}
  5%{opacity:1}
  30%{transform:translateY(0) scale(1.2,.8);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  55%{transform:translate(1.4em,-1.6em);animation-timing-function:cubic-bezier(.3,0,.7,1)}
  80%{opacity:1;transform:translate(3.4em,-.4em)}
  100%{opacity:0;transform:translate(5em,1.4em)}}

/* table of contents follows your reading */
.toc a{transition:color .25s,padding .35s cubic-bezier(.16,1,.3,1)}
.toc a.cur{color:var(--lime);padding-left:10px}

/* sheet open and close */
.book::backdrop{animation:fade .3s both}
.book.closing{animation:down .22s cubic-bezier(.4,0,1,1) forwards}
.book.closing::backdrop{animation:fade .22s reverse forwards}
@keyframes down{to{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}

/* =========================================================================
   materials: each kind of card is made from something in padel
   ========================================================================= */

/* --- game listings: a punched match ticket --------------------------------- */
.tk{--notch:84px;padding:0;gap:0;background:var(--bg-2);border-radius:16px;box-shadow:none;
  -webkit-mask:radial-gradient(circle 10px at 0 var(--notch),#0000 96%,#000 100%) 0 0/51% 100% no-repeat,radial-gradient(circle 10px at 100% var(--notch),#0000 96%,#000 100%) 100% 0/51% 100% no-repeat;
          mask:radial-gradient(circle 10px at 0 var(--notch),#0000 96%,#000 100%) 0 0/51% 100% no-repeat,radial-gradient(circle 10px at 100% var(--notch),#0000 96%,#000 100%) 100% 0/51% 100% no-repeat}
.tk-stub{height:var(--notch);display:flex;justify-content:space-between;align-items:center;gap:14px;padding:0 20px;background:var(--bg-3);border-bottom:2px dashed rgba(246,243,234,.2)}
.tk-when time{display:block;font-family:var(--f-head);font-weight:800;font-size:34px;letter-spacing:-.04em;line-height:.9}
.tk-when span{display:block;margin-top:6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.tk-courts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:58%}
.tk-courts .c{position:relative;width:30px;height:19px;border:1.5px solid rgba(246,243,234,.42);border-radius:3px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;place-items:center;padding:0 3px}
.tk-courts .c::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1.5px;background:rgba(246,243,234,.7);transform:translateX(-50%)}
.tk-courts .c i{width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1.3px var(--lime)}
.tk-courts small{flex-basis:100%;text-align:right;font-size:11px;font-weight:700;color:var(--dim);margin-top:2px}
.tk-body{padding:18px 20px 20px;display:grid;gap:12px}
.tk .tk-kind{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.tk h3{font-family:var(--f-head);text-transform:lowercase;font-size:30px;letter-spacing:-.03em;line-height:.95;margin-top:2px}
.tk .buying{margin-top:6px}
.tk dl{border-block:1px solid var(--line)}
.tk .gfoot{padding-top:2px}
@media (hover:hover){.tk:hover{transform:translateY(-4px) rotate(-.35deg);box-shadow:none}}
@media (min-width:700px){.tk-stub{padding:0 22px}.tk-body{padding:20px 22px 22px}}

/* --- steps: the court fills, one player per step ---------------------------- */
.steps li{counter-increment:none;background:transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:4px 4px 18px 4px;padding:22px 20px 24px}
.steps li::before{display:none}
.fill{display:flex;gap:6px;margin-bottom:16px}
.fill i{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(246,243,234,.35);transition:background .35s,box-shadow .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.fill[data-n="1"] i:nth-child(-n+1),.fill[data-n="2"] i:nth-child(-n+2),.fill[data-n="3"] i:nth-child(-n+3),.fill[data-n="4"] i{background:var(--cream);box-shadow:none}
.fill[data-n="4"] i:last-child{background:var(--lime)}
.js .steps li:not(.in) .fill i{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(246,243,234,.35);transform:scale(.6)}
.steps li .fill i{transition-delay:calc(var(--i,0) * 160ms + 450ms)}
.steps .sn{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);margin-bottom:8px}
.steps li:last-child{background:var(--bg-2)}

/* --- pillars: the brand board's own marks ------------------------------------ */
.door figure{position:relative;overflow:visible}
.door figure img{border-radius:var(--r)}
.door .mk{position:absolute;left:18px;bottom:-26px;width:58px;height:58px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 6px var(--bg);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.door .mk svg{width:28px;height:28px}
.door .sub{margin-top:38px}
@media (hover:hover){.door:hover .mk{transform:rotate(-12deg) scale(1.06)}}
.js .door[data-r] figure,.js .door[data-r].in figure{clip-path:none}
.js .door[data-r] figure img{clip-path:inset(100% 0 0 0 round var(--r));transition:clip-path 1.2s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 130ms + 100ms),0s}
.js .door[data-r].in figure img{clip-path:inset(0 0 0 0 round var(--r))}
.js .door[data-r] .mk{transform:scale(0);transition:transform .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0) * 130ms + 700ms)}
.js .door[data-r].in .mk{transform:none}

/* --- community: posters ------------------------------------------------------ */
.cards.poster .card{background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.cards.poster .pf{position:relative;margin:0;overflow:hidden;border-radius:4px 4px 22px 4px;aspect-ratio:4/5}
.cards.poster .pf img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.cards.poster .pf h3{position:absolute;left:0;bottom:0;margin:0;padding:12px 16px 12px 0;background:var(--bg-alt);font-family:var(--f-head);text-transform:lowercase;font-size:clamp(28px,6vw,40px);letter-spacing:-.035em;line-height:.9;border-top-right-radius:14px}
.sec.alt .cards.poster .pf h3{background:var(--bg-alt)}
.cards.poster .pf .flag{position:absolute;top:14px;right:14px;margin:0;transform:rotate(4deg);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)}
.cards.poster .body{padding:16px 0 0}
@media (hover:hover){.cards.poster .card:hover{transform:none;box-shadow:none}.cards.poster .card:hover .pf img{transform:scale(1.04)}}

/* --- index cards: text cards with their own drawn mark ----------------------- */
.cards.index{gap:0 28px}
.cards.index .card{background:transparent;border-radius:0;box-shadow:none;border-top:2px solid var(--cream);overflow:visible}
.cards.index .card .body{padding:20px 0 30px}
.cards.index .gl{width:56px;height:56px;margin-bottom:18px;overflow:visible}
.cards.index .gl *{vector-effect:non-scaling-stroke}
.gl .s{fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gl .f{fill:var(--cream)}
.gl .o{fill:none;stroke:rgba(246,243,234,.45);stroke-width:1.4}
.gl .l{fill:var(--lime)}
.gl .ls{fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round}
.js .cards.index .card[data-r] .gl{opacity:0;transform:translateY(10px) scale(.9);transition:opacity .6s,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 75ms + 250ms)}
.js .cards.index .card[data-r].in .gl{opacity:1;transform:none}
@media (hover:hover){.cards.index .card:hover{transform:none;box-shadow:none;border-top-color:var(--lime)}.cards.index .card:hover .gl{transform:translateY(-3px)}}
@media (min-width:700px){.cards.index .card .body{padding-right:12px}}

/* --- crews: stitched club patches -------------------------------------------- */
.crew{position:relative;background:var(--bg-2);border-radius:26px 26px 26px 6px;box-shadow:none;padding:26px 22px 22px}
.crew::before{content:"";position:absolute;inset:7px;border-radius:20px 20px 20px 3px;border:1.5px dashed rgba(246,243,234,.2);pointer-events:none}
.crew .flag{position:absolute;top:18px;right:18px;transform:rotate(5deg)}
.crew .shield{display:block;width:64px;height:74px;margin-top:4px}
.crew .shield path{fill:var(--lime)}
.crew .shield text{font:800 24px var(--f-head);fill:var(--ink);text-anchor:middle;letter-spacing:-1px}
.crew h3{font-family:var(--f-head);text-transform:lowercase;font-size:34px;letter-spacing:-.035em;line-height:.9;margin-top:16px}
.crew .where{display:flex;align-items:center;gap:6px;margin-top:8px}
.crew .where svg{width:13px;height:13px;flex:none}
.crew .meta{border-top:1.5px dashed rgba(246,243,234,.2)}
@media (hover:hover){.crew:hover{transform:translateY(-4px) rotate(.4deg);box-shadow:none}}

/* --- rating vs rewards: a scoreboard and a stamp card ------------------------ */
.system{border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}
.system.a{box-shadow:inset 0 0 0 1px var(--line)}
.scoreb{display:flex;align-items:center;gap:14px;margin:18px 0 6px;padding:16px 18px;border-radius:4px;background:#050605;box-shadow:inset 0 0 0 1px rgba(246,243,234,.08)}
.scoreb b{font:700 clamp(30px,7vw,44px)/1 "Outfit",var(--f-body);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--cream)}
.scoreb b.to{color:var(--lime)}
.scoreb i{font-style:normal;color:var(--dimmer);font-size:20px}
.scoreb small{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer);text-align:right;line-height:1.35}
.system.b{background:var(--paper);color:var(--ink);box-shadow:none;border-radius:6px 6px 26px 6px}
.system.b > p,.system.b li{color:var(--ink-dim)}
.system.b li{border-top-color:var(--ink-line)}
.system.b li b{color:var(--ink)}
.system.b .flag{background:rgba(15,17,15,.07);color:var(--ink-dim);box-shadow:inset 0 0 0 1px var(--ink-line)}
.system.b .flag::before{background:rgba(15,17,15,.4)}
.system.b .never{background:rgba(15,17,15,.06);color:var(--ink-dim)}
.system.b .never b{color:var(--ink)}
.system.b .never .link{background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(currentColor,currentColor)}
.stamps{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,1vw,8px);margin:18px 0 8px;padding:14px;border:1.5px dashed var(--ink-line);border-radius:6px}
.stamps i{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-line)}
.stamps i.on{background:var(--ink);box-shadow:none;display:grid;place-items:center}
.stamps i.on::after{content:"";width:46%;height:46%;border-radius:50%;background:var(--lime)}
.stamps i.on:nth-child(2){transform:rotate(-14deg)}
.js .system[data-r] .stamps i.on{transform:scale(0) rotate(-40deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.js .system[data-r].in .stamps i.on{transform:none;transition-delay:calc(var(--s) * 180ms + 600ms)}
.stamps small,.scoreb + small{grid-column:1/-1}
.sys-cap{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer)}
.system.b .sys-cap{color:var(--ink-dim)}

/* --- format cards: rulebook pages with an index tab -------------------------- */
.fmt{border-radius:6px 6px 26px 6px;box-shadow:inset 0 0 0 1px var(--line);overflow:visible;position:relative}
.fmt > img{border-radius:6px 6px 0 0}
@media (min-width:900px){.fmt > img{border-radius:6px 0 0 26px}}
.fmt .kind{display:inline-block;padding:6px 12px 6px 10px;margin:0 0 14px -20px;background:var(--lime);color:var(--ink);border-radius:0 999px 999px 0;letter-spacing:.08em}
@media (min-width:900px){.fmt .kind{margin-left:-30px}}
.fmt dl{border-top:2px solid var(--cream)}
.fmt dt{color:var(--dim)}

/* --- provisional notices: dashed means not final ----------------------------- */
.strip{background:transparent;box-shadow:none;border:1.5px dashed rgba(246,243,234,.28);border-radius:6px}


/* =========================================================================
   iconography, surfaces, slogan
   ========================================================================= */

/* icons come from the sprite in src/partials/icons.svg (tools/build-icons.py) */
.ic{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.16em;overflow:visible}
.it{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:var(--bg-2) var(--grain);box-shadow:var(--edge);color:var(--cream)}
.it .ic{width:32px;height:32px}

/* materials share one surface: a fill, grain, and a lit top edge */
.tk-in,.crew,.system:not(.b),.fmt,.ratelab,.calc,.rot,.fourth,.court,.steps li:last-child{background-image:var(--grain);box-shadow:var(--edge)}
.crew,.fmt,.ratelab,.calc,.fourth,.court{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
@media (hover:hover){.crew:hover,.fmt:hover{box-shadow:var(--edge),var(--lift)}}

/* page eyebrows carry the section's mark */
.ph .eyebrow{display:inline-flex;align-items:center;gap:10px;letter-spacing:.14em}
.ph .eyebrow .ic{width:22px;height:22px;color:var(--cream)}
.ph .eyebrow::after{content:"";width:34px;height:1px;background:rgba(212,255,58,.5)}
.joinwrap .ph .eyebrow .ic{color:var(--ink);--ica:var(--ink)}
.joinwrap .ph .eyebrow::after{background:var(--ink-line)}

/* pillar marks: a dark tile sitting on the photo's edge */
.door .mk{width:64px;height:64px;border-radius:19px;background:var(--bg-2) var(--grain);color:var(--cream);box-shadow:var(--edge),0 0 0 6px var(--bg);bottom:-28px}
.door .mk svg,.door .mk .ic{width:34px;height:34px}
.door .sub{margin-top:42px}

/* index cards hold an icon tile */
.cards.index .it{margin-bottom:20px;transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .4s}
@media (hover:hover){.cards.index .card:hover .it{transform:translateY(-3px) rotate(-4deg);box-shadow:var(--edge),0 0 0 1px rgba(212,255,58,.45)}}
.js .cards.index .card[data-r] .it{opacity:0;transform:scale(.7);transition:opacity .5s,transform .8s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0) * 75ms + 250ms)}
.js .cards.index .card[data-r].in .it{opacity:1;transform:none}

/* --- the match ticket, second cut --------------------------------------------- */
.game.tk{background:none;-webkit-mask:none;mask:none;padding:0;border-radius:0;transition:transform .5s cubic-bezier(.16,1,.3,1),filter .5s}
.tk-in{--notch:92px;position:relative;height:100%;display:flex;flex-direction:column;background-color:var(--bg-2);border-radius:18px;
  -webkit-mask:radial-gradient(circle 11px at 0 var(--notch),#0000 96%,#000 100%) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--notch),#0000 96%,#000 100%) 100% 0/51% 100% no-repeat;
          mask:radial-gradient(circle 11px at 0 var(--notch),#0000 96%,#000 100%) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--notch),#0000 96%,#000 100%) 100% 0/51% 100% no-repeat}
@media (hover:hover){.game.tk:hover{transform:translateY(-6px) rotate(-.4deg);filter:drop-shadow(0 26px 24px rgba(0,0,0,.55))}}
.tk-stub{height:var(--notch);display:grid;grid-template-columns:auto 1px 1fr;align-items:center;gap:18px;padding:0 22px;background:rgba(246,243,234,.035);border-bottom:0;position:relative}
.tk-stub::after{content:"";position:absolute;left:18px;right:18px;bottom:0;border-bottom:2px dashed rgba(246,243,234,.2)}
.tk-stub > i{width:1px;align-self:stretch;margin:18px 0;background:var(--line)}
.tk-when time{font-size:38px}
.tk-courts{justify-content:flex-start;max-width:none;gap:6px}
.tk-courts small{text-align:left;flex-basis:100%;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;color:var(--dimmer)}
.tk-courts .c{width:32px;height:20px;border-radius:4px}
.tk-body{padding:20px 22px 22px;gap:16px;flex:1;display:flex;flex-direction:column}
.tk-body .gfoot{margin-top:auto}
.tk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tk-admit{flex:none;padding:5px 9px;border:1.5px solid rgba(212,255,58,.55);border-radius:6px;color:var(--lime);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;text-align:center;transform:rotate(3deg)}
.tk h3{font-size:clamp(30px,7vw,36px)}
.tk-meta{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.tk-meta li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:700;line-height:1.35}
.tk-meta li.wide{grid-column:1/-1}
.tk-meta .ic{width:20px;height:20px;margin-top:-1px;color:var(--dim)}
.tk-meta small{display:block;font-weight:400;color:var(--dim);font-size:12.5px;margin-top:2px}
.tk .tags:empty{display:none}
.tk .gfoot{border-top:1px solid var(--line);padding-top:16px}
.tk .price b{font-size:34px}

/* --- crew patch: icon pin -------------------------------------------------------- */
.crew .where .ic{width:15px;height:15px;color:var(--dim)}

/* --- join perks with marks --------------------------------------------------------- */
.perks li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:start}
.perks li .ic{grid-row:1/3;width:26px;height:26px;margin-top:1px;--ica:var(--ink)}
.perks li span{grid-column:2}

/* --- the slogan: plain type in the display face, no motion ---------------------- */
.hero .copy > .slogan{margin:0 0 18px;max-width:none;font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.025em;line-height:1;font-size:clamp(22px,6vw,34px);color:var(--cream)}
.slogan em{font-style:normal;color:var(--lime)}

/* mini court, used by the member card */
.sg-court{position:relative;flex:none;width:2.3em;height:1.5em;border-radius:.26em;border:.085em solid rgba(246,243,234,.45);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;place-items:center;padding:0 .22em;transition:border-color .5s}
.sg-court::before{content:"";position:absolute;left:50%;top:-.16em;bottom:-.16em;width:.085em;background:var(--cream);transform:translateX(-50%);opacity:.8}
.sg-court i{width:.34em;height:.34em;border-radius:50%;box-shadow:inset 0 0 0 .07em rgba(246,243,234,.35);transition:background-color .3s,box-shadow .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.sg-court i.p{background:var(--cream);box-shadow:none}
.sg-court i.me{background:var(--lime);box-shadow:none}
.sg-court i.slot{box-shadow:inset 0 0 0 .07em var(--lime);animation:slot-wait 1.4s ease-in-out infinite}
@keyframes slot-wait{50%{transform:scale(.7);opacity:.5}}


/* =========================================================================
   phones: different content gets different treatments, never one long stack
   ========================================================================= */

/* swipe rails (any list with data-swipe) and their progress track */
.swipe-ind{display:none;align-items:center;gap:12px;margin-top:14px;font-family:var(--f-head);font-weight:800;font-size:15px;letter-spacing:-.02em}
.swipe-ind .count{display:flex;gap:6px;white-space:nowrap}
.swipe-ind .cur{color:var(--lime);min-width:1.4em}
.swipe-ind .tot{color:var(--dimmer)}
.swipe-ind .bar{flex:1;display:flex;gap:4px}
.swipe-ind .bar i{flex:1;height:3px;border-radius:3px;background:var(--line);transition:background-color .35s}
.swipe-ind .bar i.on{background:var(--lime)}

/* community posters: the title is cut into the photo on wide screens */
.cards.poster .card{display:grid;grid-template-rows:auto 1fr}
.cards.poster .pf{grid-area:1/1}
.cards.poster .pt{grid-area:1/1;align-self:end;justify-self:start;position:relative;z-index:1;margin:0;padding:12px 16px 12px 0;background:var(--bg-alt);font-family:var(--f-head);text-transform:lowercase;font-size:clamp(28px,6vw,40px);letter-spacing:-.035em;line-height:.9;border-top-right-radius:14px}
.cards.poster .body{grid-row:2}

/* formats: rule sheets fold on phones */
.fmt-more summary{display:none}

/* play: filters sheet furniture (desktop shows the sidebar as before) */
.fbtn,.side-top,#fdone{display:none}
.fsheet-bg{position:fixed;inset:0;z-index:44;background:rgba(9,10,9,.72)}
.datebar{margin-bottom:4px}
.side-top .x{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg-3);color:var(--cream);font-size:20px;line-height:1}
.side-foot{display:flex;align-items:center;justify-content:space-between;gap:14px}

@media (max-width:899px){
  .fbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;margin-top:14px;border:0;border-radius:999px;background:var(--bg-2) var(--grain);box-shadow:var(--edge);color:var(--cream);font-weight:700;font-size:14px}
  .fbtn .ic{width:18px;height:18px}
  .fbtn span{color:var(--lime)}
  .finder .side{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:86svh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg-2);border-radius:24px 24px 0 0;padding:0 var(--g) calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(105%);visibility:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1),visibility 0s .5s;box-shadow:0 -24px 48px rgba(0,0,0,.55)}
  .finder .side.open{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .side-top{display:flex;justify-content:space-between;align-items:center;padding:18px 0 14px;position:sticky;top:0;background:var(--bg-2);z-index:2}
  .side-top h3{font-size:34px}
  .side-foot{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom,0px));background:var(--bg-2);padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);z-index:2}
  #fdone{display:inline-flex;flex:1}
  .finder .bar{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
  .count{margin-top:18px}
}

@media (max-width:699px){
  .m-hide{display:none}
  .sec{padding:46px 0}
  .sec h2{font-size:clamp(34px,10.4vw,46px)}
  .sec h3{font-size:clamp(24px,7vw,32px)}
  .sec .intro{font-size:15.5px;margin-top:10px}
  .ph{padding:28px 0 26px}
  .ph h1{font-size:clamp(46px,14vw,66px)}
  .ph p{font-size:16px;margin-top:14px}
  .next{padding:48px 0}
  .next h2{font-size:clamp(38px,11vw,54px)}
  .signoff{font-size:clamp(50px,14.6vw,74px);margin-bottom:34px}
  .strip{padding:12px 14px}
  .strip p{font-size:13px}

  [data-swipe]{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(var(--g) * -1);padding:4px var(--g) 10px;scroll-padding-inline:var(--g);scrollbar-width:none}
  [data-swipe]::-webkit-scrollbar{display:none}
  [data-swipe] > *{flex:0 0 84%;min-width:0;scroll-snap-align:start}
  .swipe-ind{display:flex}

  /* pillars: a gallery you thumb through */
  .doors[data-swipe] > .door{flex-basis:78%}
  .doors .door figure{aspect-ratio:4/5}
  .door h2{font-size:46px;margin-top:12px}
  .door .sub{margin-top:40px}

  /* tickets: a stack you flick through */
  #soon[data-swipe] > li{flex-basis:88%}

  /* index cards become solid tiles in a rail */
  .cards.index[data-swipe] .card{background:var(--bg-2) var(--grain);box-shadow:var(--edge);border-top:0;border-radius:20px}
  .cards.index[data-swipe] .card .body{padding:20px 18px 20px}
  .cards.index[data-swipe] .card p{font-size:14px}

  /* steps: a tight timeline, each marker a court filling up */
  .steps{gap:0;margin-top:22px}
  .steps li,.steps li:last-child{display:grid;grid-template-columns:58px 1fr;column-gap:16px;padding:16px 0;background:none;box-shadow:none;border-radius:0;border-top:1px solid var(--line);overflow:visible}
  .steps li:last-child{border-bottom:1px solid var(--line)}
  .steps li::after{display:none}
  .steps .fill{grid-row:1/4;position:relative;display:grid;grid-template-columns:1fr 1fr;place-items:center;row-gap:6px;width:58px;height:38px;margin:2px 0 0;padding:0 6px;border:1.5px solid var(--line-2);border-radius:6px}
  .steps .fill::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1.5px;background:var(--cream);opacity:.7;transform:translateX(-50%)}
  .steps .fill i{width:10px;height:10px}
  .steps li:last-child .fill{border-color:var(--lime)}
  .steps .sn{grid-column:2;margin-bottom:4px}
  .steps h3,.steps p{grid-column:2}
  .steps p{margin-top:4px;font-size:14px}
  .steps h3{font-size:17.5px;line-height:1.25}

  /* the fourth: the diagram carries the idea, the photo steps aside */
  .plate .wrap > figure{display:none}
  .plate .cap{padding-top:0;gap:18px}
  .plate h2{font-size:clamp(48px,14vw,66px)}

  /* community: an editorial list */
  .cards.poster{gap:0;margin-top:22px}
  .cards.poster .card{grid-template-columns:92px 1fr;grid-template-rows:auto auto;column-gap:16px;padding:16px 0;border-top:1px solid var(--line)}
  .cards.poster .card:last-child{border-bottom:1px solid var(--line)}
  .cards.poster .pf{grid-area:1/1/3/2;aspect-ratio:1;border-radius:14px}
  .cards.poster .pf .flag{display:none}
  .cards.poster .pt{grid-area:1/2;align-self:end;background:none;padding:0;font-size:27px;border-radius:0}
  .cards.poster .body{grid-area:2/2;padding:6px 0 0}
  .cards.poster .body p{font-size:14px}
  .cards.poster .go{padding-top:10px}

  /* formats */
  .fmt > img{aspect-ratio:2/1}
  .rot{max-width:none}
  .fmt-more{margin-top:16px;border-top:1px solid var(--line)}
  .fmt-more summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-weight:700;font-size:14.5px;cursor:pointer;list-style:none}
  .fmt-more summary::-webkit-details-marker{display:none}
  .fmt-more summary::after{content:"+";color:var(--lime);font-size:24px;font-weight:400;line-height:1}
  .fmt-more[open] summary::after{content:"\2013"}
  .fmt-more dl{margin-top:0}
}

/* fold rows (phones only; motion.js wires them) */
@media (max-width:699px){
  .folding .fold-head{position:relative;cursor:pointer;padding-right:34px;-webkit-tap-highlight-color:transparent}
  .folding .fold-head::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--lime);font:400 24px/1 var(--f-body);transition:transform .3s}
  .folding .is-open > .fold-head::after,.folding .fold-head.is-open::after{content:"\2013"}
  .folding.terms > div{padding:14px 0}
  .folding.terms dd{margin-top:8px}
  .prose.folding h3{margin-top:0;padding:16px 0;border-top:1px solid var(--line);font-size:17.5px}
  .prose.folding .fold-body{padding-bottom:14px}
  .prose.folding > h3:first-child{border-top:1px solid var(--cream)}
}

/* =========================================================================
   type system, menu, headers, help, receipt
   ========================================================================= */

/* small capitals use Archivo at its expanded width, like kit lettering */
.flag,.ph .eyebrow,.door .sub,.fgroup > h4,.game dt,.tk-kind,.tk-when span,.tk-courts small,.tk-admit,.steps .sn,
.fcols h4,.fmt .kind,.fmt dt,.sys-cap,.scoreb small,.tbl th,.tbl tr.zone td,.hero .under,.assume h4,.strip .flag,
.dr-grid,.legal,.cards.poster .pf .flag,.crew .meta div span,.out span,.rl-bar > span:first-child,.tk-meta small,.slip-head{
  font-family:var(--f-body);font-stretch:125%}
.flag,.ph .eyebrow,.door .sub,.fgroup > h4,.tk-kind,.tk-when span,.tk-courts small,.steps .sn,.fcols h4,.fmt .kind,.sys-cap,.tbl th{letter-spacing:.07em}
.tk-admit{letter-spacing:.09em}
/* figures: tabular wherever numbers sit in a column or tick over */
.receipt td,.tbl .s,.out b,.rl-bar span:last-child,.dates time,.facts td,.rng label b,.price b,.scoreb b{font-variant-numeric:tabular-nums}
.scoreb b{font-family:var(--f-body);font-stretch:75%;font-weight:800;letter-spacing:-.01em}
.btn{font-weight:650;letter-spacing:-.005em}
.sec .intro,.ph p,.prose p{letter-spacing:-.003em}

/* primary buttons carry an arrow that leans into the hover */
.btn .ic{width:18px;height:18px;margin:0 -4px 0 10px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.btn:hover .ic{transform:translateX(5px)}}

/* --- phone menu ----------------------------------------------------------- */
@media (max-width:900px){
  .drawer{padding:8px var(--g) calc(28px + env(safe-area-inset-bottom,0px));gap:0;background:var(--bg) var(--grain)}
  .drawer a{border-bottom:0;padding:0;font-size:inherit}
  .dr-main{display:grid;border-bottom:1px solid var(--line)}
  /* three pillars in big type, then a plain list, then one button */
  .drawer a.dr-big{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 0 14px;border-top:1px solid var(--line);font-weight:400}
  .dr-main a.dr-big:first-child{border-top:0}
  .dr-big b{font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.035em;font-size:clamp(36px,10.5vw,48px);line-height:.95}
  .dr-big small{font-size:13px;color:var(--dimmer);text-align:right}
  .drawer a.dr-big[aria-current="page"] b{color:var(--lime)}
  .drawer a.dr-big[data-soon]::after{display:none}
  .drawer a.dr-big[data-soon] small::after{content:" · soon";color:var(--dimmer)}
  .dr-list{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;padding:14px 0 0}
  .drawer .dr-list a{padding:13px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:15.5px;color:var(--dim)}
  .drawer .dr-list a[aria-current="page"]{color:var(--lime)}
  .dr-foot{margin-top:auto;padding-top:22px}
  .drawer .dr-foot .btn{margin-top:0;width:100%}
  .drawer.on .dr-big,.drawer.on .dr-list,.drawer.on .dr-foot{animation:dr-in .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k,0) * 40ms + 40ms)}
}
@keyframes dr-in{from{opacity:0;transform:translateY(14px)}}

/* --- page headers: a court plan drawn in hairlines behind the title -------- */
.ph{position:relative;overflow:hidden;isolation:isolate}
.ph::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:-6%;top:34%;width:min(680px,60vw);aspect-ratio:2/1;opacity:.09;transform:translateY(-50%) rotate(-7deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' fill='none' stroke='%23f6f3ea' stroke-width='1.2'%3E%3Crect x='2' y='2' width='396' height='196' rx='4'/%3E%3Cpath d='M200 0v200M71 2v196M329 2v196M71 100h258'/%3E%3Ccircle cx='286' cy='54' r='5' fill='%23d4ff3a' stroke='none'/%3E%3Cpath d='M112 150Q200 20 286 54' stroke='%23d4ff3a' stroke-dasharray='1 6' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.joinwrap .ph::before{opacity:.18;filter:invert(1) brightness(.2)}
@media (max-width:699px){.ph::before{width:150vw;right:-75vw;top:30%;opacity:.1}}

/* --- help: answers ease open, the toggle turns to a close ------------------ */
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .5s cubic-bezier(.16,1,.3,1),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq summary{transition:color .25s}
@media (hover:hover){.faq summary:hover{color:var(--lime)}}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);
  background:linear-gradient(var(--lime),var(--lime)) center/12px 1.75px no-repeat,linear-gradient(var(--lime),var(--lime)) center/1.75px 12px no-repeat;
  transition:transform .45s cubic-bezier(.16,1,.3,1),background-color .3s,box-shadow .3s}
.faq details[open] summary::after{content:"";transform:rotate(135deg);background-color:var(--lime);box-shadow:none;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink))}

/* --- the receipt: a paper slip with a torn foot ---------------------------- */
.slip{margin-top:18px;padding:22px 22px 34px;background:var(--paper);color:var(--ink);border-radius:6px 6px 0 0;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;
  box-shadow:0 30px 40px -30px rgba(0,0,0,.6);transform:rotate(-.6deg)}
.slip-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1.5px dashed var(--ink-line);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.slip-head b{color:var(--ink)}
.slip .receipt{border-top:0}
.slip .receipt th,.slip .receipt td{border-bottom:1px dashed var(--ink-line);color:var(--ink-dim);font-size:15px}
.slip .receipt td{color:var(--ink)}
.slip .receipt .us th,.slip .receipt .us td{color:var(--ink);font-weight:800}
.slip .receipt .us th::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ink);margin-right:8px;vertical-align:1px}
.slip .receipt .sum th,.slip .receipt .sum td{color:var(--ink);border-top:2px solid var(--ink)}
.slip-foot{margin-top:14px;font-size:12px;color:var(--ink-dim);text-align:center}

/* --- stranger to community: one line, six stops, filling as you scroll ------- */
.rail{list-style:none;margin:28px 0 0;padding:0;position:relative;display:grid;--p:1}
.rail::before,.rail::after{content:"";position:absolute;left:13px;top:var(--top,34px);bottom:var(--bot,34px);width:2px;border-radius:2px;background:var(--line)}
.rail::after{background:var(--lime);transform-origin:top;transform:scaleY(var(--p))}
.js .rail{--p:0}
.rail li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:18px;align-items:baseline;padding:13px 0}
.rail li::before{content:"";grid-row:1/3;align-self:center;justify-self:center;position:relative;z-index:1;width:14px;height:14px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 0 5px var(--bg);transition:background-color .35s,box-shadow .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.js .rail li:not(.lit)::before{background:var(--bg);box-shadow:inset 0 0 0 2px var(--line-2),0 0 0 5px var(--bg);transform:scale(.85)}
.rail li:last-child::before{width:22px;height:22px;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.2 4.2c4.3 2.4 4.3 9.2 0 11.6M16.8 4.2c-4.3 2.4-4.3 9.2 0 11.6' fill='none' stroke='%230f110f' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center/100% no-repeat}
.rail b{font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.035em;line-height:1;font-size:clamp(26px,7.4vw,34px);transition:color .4s}
.rail span{grid-column:2;margin-top:4px;color:var(--dim);font-size:14.5px}
.rail li.lit b,html:not(.js) .rail b{color:var(--cream)}
.js .rail li:not(.lit) b{color:rgba(246,243,234,.32)}
.rail li:last-child.lit b,html:not(.js) .rail li:last-child b{color:var(--lime)}
@media (min-width:700px){
  .rail li{grid-template-columns:28px minmax(170px,.8fr) minmax(0,1fr);column-gap:22px;padding:15px 0;border-bottom:1px solid var(--line)}
  .rail li:last-child{border-bottom:0}
  .rail li::before{grid-row:1}
  .rail span{grid-column:3;margin-top:0}
}

/* =========================================================================
   white cards: every raised card is paper. Tokens flip inside, so components
   keep working; lime becomes a fill (tabs, stamps, highlighter), never text.
   ========================================================================= */
.tk-in,.ratelab,.crew,.fmt,.court,.calc,.fourth,.system:not(.b){--cream:#0f110f;--dim:rgba(15,17,15,.64);--dimmer:rgba(15,17,15,.46);--line:rgba(15,17,15,.11);--line-2:rgba(15,17,15,.24);--bg:#fff;--bg-2:#fff;--bg-3:#ecede8;--bg-deep:#f3f4f0;--ica:#0f110f;--edge:inset 0 0 0 1px rgba(15,17,15,.06);background-color:var(--paper);background-image:none;color:var(--cream)}
@media (min-width:700px){.steps li,.steps li:last-child{--cream:#0f110f;--dim:rgba(15,17,15,.64);--dimmer:rgba(15,17,15,.46);--line:rgba(15,17,15,.11);--line-2:rgba(15,17,15,.24);--bg:#fff;--bg-2:#fff;--bg-3:#ecede8;--bg-deep:#f3f4f0;--ica:#0f110f;--edge:inset 0 0 0 1px rgba(15,17,15,.06);background-color:var(--paper);background-image:none;color:var(--cream)}}
@media (max-width:699px){.cards.index[data-swipe] .card{--cream:#0f110f;--dim:rgba(15,17,15,.64);--dimmer:rgba(15,17,15,.46);--line:rgba(15,17,15,.11);--line-2:rgba(15,17,15,.24);--bg:#fff;--bg-2:#fff;--bg-3:#ecede8;--bg-deep:#f3f4f0;--ica:#0f110f;--edge:inset 0 0 0 1px rgba(15,17,15,.06);background-color:var(--paper);background-image:none;color:var(--cream)}
  .cards.index[data-swipe] .card .it{--cream:#f6f3ea;--dim:rgba(246,243,234,.66);--dimmer:rgba(246,243,234,.46);--line:rgba(246,243,234,.15);--line-2:rgba(246,243,234,.28);--bg-2:#181b18;--bg-3:#222622;--ica:#d4ff3a;color:var(--cream);background:#0f110f}}
.rot{background:var(--bg-deep);box-shadow:inset 0 0 0 1px var(--line);background-image:none}

/* dark inserts that stay dark on paper */
.scoreb{--cream:#f6f3ea;--dim:rgba(246,243,234,.66);--dimmer:rgba(246,243,234,.46);--line:rgba(246,243,234,.15);--line-2:rgba(246,243,234,.28);--bg-2:#181b18;--bg-3:#222622;--ica:#d4ff3a;color:var(--cream)}

/* lime as a highlighter on paper */
.tk-in .buying,.fmt dd b,.out div.lead b,.system .never b,.fourth figcaption .st-b{color:var(--ink);background:linear-gradient(transparent 56%,var(--lime) 56%,var(--lime) 94%,transparent 94%);padding:0 .12em;margin:0 -.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ratelab .rl-out b{color:var(--ink);background:linear-gradient(transparent 62%,var(--lime) 62%,var(--lime) 92%,transparent 92%);padding:0 .06em}
.ratelab .rl-out b.neg{color:#b4351a;background:none}
.ratelab .rng label b,.calc .rng label b,.crew .meta div b{color:var(--ink)}
.ratelab input[type=range],.calc input[type=range]{accent-color:#0f110f}
.ratelab .rl-bar i{background:#e2e3dd}
.ratelab .rl-bar i.act::after{background:var(--lime);box-shadow:inset 0 0 0 1px rgba(15,17,15,.22)}

/* ticket on paper: one sheet, stub above the perforation */
.tk-in .tk-stub{background:transparent}
.tk-in .tk-stub::after{border-bottom-color:rgba(15,17,15,.22)}
.tk-in .tk-courts .c{border-color:rgba(15,17,15,.5)}
.tk-in .tk-courts .c::before{background:rgba(15,17,15,.6)}
.tk-in .tk-courts .c i{box-shadow:inset 0 0 0 1.3px rgba(15,17,15,.6)}
.tk-in .tk-admit{background:var(--lime);color:var(--ink);border-color:transparent}
.tk-in .tag{background:rgba(15,17,15,.06);color:var(--dim)}
.tk-in .tag.hi{background:var(--lime);color:var(--ink)}
.tk-in .tk-meta .ic{color:rgba(15,17,15,.55)}
.tk-in .btn.v,.ratelab .btn.v,.calc .btn.v{--fill:#0f110f}
@media (hover:hover){.tk-in .btn.v:hover,.calc .btn.v:hover{color:var(--lime)}}

/* crew patch on paper: black shield, lime initials, ink stitching */
.crew::before{border-color:rgba(15,17,15,.16)}
.crew .meta{border-top-color:rgba(15,17,15,.16)}
.crew .shield path{fill:#0f110f}
.crew .shield text{fill:var(--lime)}

/* formats, rotation demo and the fourth-player court */
.fmt-more summary::after,.rot-next{color:var(--ink)}
.fmt dl{border-top-color:var(--ink)}
.rot .tok{background:#fff}
.rot .tok.side-l{background:var(--lime);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(15,17,15,.25)}
.fourth .slot{stroke:var(--ink)}
.fourth.go .ct,.fourth.go .ln{stroke:rgba(15,17,15,.5)}
.fourth .you circle{stroke:var(--ink);stroke-width:1.5}
.fourth .rally{stroke:var(--ink);stroke-width:1.2}

/* rules diagram keeps its dark court plate */
.court .sv-replay{color:var(--ink)}

/* calculator, rating card inserts */
.calc .assume,.system .never{background:var(--bg-3)}
.calc .out{border-top-color:var(--ink)}

/* desktop step cards on paper */
@media (min-width:700px){
  .steps .fill i{box-shadow:inset 0 0 0 1.5px rgba(15,17,15,.28)}
  .js .steps li:not(.in) .fill i{box-shadow:inset 0 0 0 1.5px rgba(15,17,15,.28)}
  .steps .fill[data-n] i:last-child{box-shadow:inset 0 0 0 1.5px rgba(15,17,15,.28)}
  .steps li .fill[data-n="4"] i:last-child{background:var(--lime);box-shadow:inset 0 0 0 1.5px rgba(15,17,15,.3)}
}

.calc .out div.lead b{display:inline-block}
.court svg{background:#090a09;border-radius:12px;padding:8px 6px}
.ladder div{--cream:#0f110f;--dim:rgba(15,17,15,.64);--dimmer:rgba(15,17,15,.46);--line:rgba(15,17,15,.11);--line-2:rgba(15,17,15,.24);--bg:#fff;--bg-2:#fff;--bg-3:#ecede8;--bg-deep:#f3f4f0;--ica:#0f110f;--edge:inset 0 0 0 1px rgba(15,17,15,.06);background-color:var(--paper);background-image:none;color:var(--cream);box-shadow:none}
.ladder div.on{box-shadow:inset 0 0 0 1.5px rgba(15,17,15,.85)}
.js .ladder div.win.on{box-shadow:none}

/* =========================================================================
   court system: the court is the grid, the scoreboard is the type.
   Built for one person arriving alone: every number reads like a score,
   every status like a scoreboard light, every section is a line on a court.
   ========================================================================= */

/* one numeral style for every score, time, price and count: Archivo at its
   narrowest and heaviest, like the digits on a court-side scoreboard */
.tk-when time,.price b,.day b,.rl-out b,.out b,.crew .meta div b,.rng label b,.num,.timeline time,
.night time,.swipe-ind .cur,.swipe-ind .tot,.g-num,.deal b{
  font-family:var(--f-body);font-stretch:62%;font-weight:800;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.015em}
.receipt td{font-stretch:75%;font-weight:800;font-variant-numeric:tabular-nums}
.tk-when time{font-size:44px;line-height:.86}
.tk .price b{font-size:40px;line-height:.9}
.day b{font-size:26px}

/* status: a squared scoreboard light, never a rounded chip. Three words only:
   Live, Preview, Planned. */
.flag{border-radius:3px;padding:5px 10px 5px 8px;gap:8px}
.flag::before{width:5px;height:11px;border-radius:1px}
.flag.live::before{box-shadow:0 0 0 2px rgba(212,255,58,.2)}
.tag{border-radius:3px}
.pill{border-radius:7px}
.day{border-radius:7px}

/* buttons: squared ends, like a court line, not a capsule */
.btn{border-radius:8px}
.fbtn{border-radius:8px}

/* sections are separated by a court line with the service T dropping from it */
.sec{position:relative}
.sec + .sec{border-top:0}
.sec + .sec::before,.sec + .sec::after{content:"";position:absolute;left:50%;pointer-events:none}
.sec + .sec::before{top:0;height:1px;width:min(calc(100% - 2 * var(--g)),calc(var(--max) - 2 * var(--g)));transform:translateX(-50%);background:var(--line)}
.sec + .sec::after{top:0;width:1px;height:22px;background:var(--line-2)}
.sec.alt + .sec::before,.sec + .sec.alt::before{width:100%}

/* reveals: content is simply there. It fades in, it does not travel. Motion is kept
   for padel things: the ball dropping, a court filling, a line being drawn. */
.js [data-r]{transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 45ms)}

/* --- the journey: where this page sits between stranger and competitor ---- */
.journey{grid-column:1/-1;list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.journey::before{content:"";position:absolute;left:6px;right:0;top:6px;height:1.5px;background:var(--line-2)}
.journey li{position:relative;padding-top:22px;display:flex;align-items:baseline;min-width:0}
.journey li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.journey li.done::after{content:"";position:absolute;left:6px;right:0;top:6px;height:1.5px;background:var(--cream)}
.journey li.done::before{background:var(--cream);box-shadow:none}
.journey li.cur::before{width:17px;height:17px;top:-2px;left:-2px;box-shadow:none;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.2 4.2c4.3 2.4 4.3 9.2 0 11.6M16.8 4.2c-4.3 2.4-4.3 9.2 0 11.6' fill='none' stroke='%230f110f' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center/100% no-repeat}
.journey small{font:800 12px var(--f-body);font-stretch:62%;color:var(--dimmer);font-variant-numeric:tabular-nums}
.journey b{font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.03em;font-size:19px;line-height:1;color:var(--dimmer);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.journey li.done b,.journey li.done small{color:var(--dim)}
.journey li.cur b{color:var(--lime)}
.journey li.cur small{color:var(--cream)}
@media (max-width:699px){
  .journey{margin-top:22px}
  .journey li:not(.cur) b{display:none}
  .journey li.cur{grid-column:span 2}
  .journey li.cur ~ li{grid-column:auto}
  .journey{grid-template-columns:repeat(6,minmax(0,1fr))}
  .journey li.cur + li b{display:block;font-size:15px;opacity:.8}
}
.on-light .journey li::before{background:var(--lime-page,#d4ff3a)}
.on-light .journey::before{background:rgba(15,17,15,.25)}
.on-light .journey li.done::after,.on-light .journey li.done::before{background:var(--ink)}
.on-light .journey li.cur::before{background-color:var(--ink);filter:none}
.on-light .journey b,.on-light .journey small{color:rgba(15,17,15,.5)}
.on-light .journey li.cur b,.on-light .journey li.cur small{color:var(--ink)}

/* --- the Full Court Guarantee seal -------------------------------------- */
.seal{display:inline-block;width:var(--sz,112px);aspect-ratio:1;flex:none;color:var(--cream);transform:rotate(-9deg)}
.seal svg{display:block;width:100%;height:100%;overflow:visible}
.seal .r1{fill:var(--bg);stroke:currentColor;stroke-width:1.4}
.seal .r2{fill:none;stroke:currentColor;stroke-width:1;opacity:.45}
.seal text{font-family:var(--f-body);font-stretch:125%;font-weight:800;font-size:9.6px;letter-spacing:.08em;text-transform:uppercase;fill:currentColor}
.seal .ct{fill:none;stroke:currentColor;stroke-width:1.3}
.seal .nt{stroke:currentColor;stroke-width:1.6}
.seal .ln{fill:none;stroke:currentColor;stroke-width:.8;opacity:.7}
.seal .p4{fill:var(--lime);stroke:none}
.seal.ink{color:var(--ink)}
.seal.ink .r1{fill:var(--lime)}

/* --- home: the seal sits on the photo like a sticker on the glass ---------- */
.hero .under{gap:14px}
.hero .under > span{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero .under .seal{--sz:66px}
@media (min-width:900px){
  .hero .under .seal{position:absolute;--sz:150px;right:max(var(--g),calc((100vw - var(--max)) / 2 + var(--g)));bottom:70px;transform:rotate(-11deg)}
  .hero .under .seal .r1{fill:rgba(15,17,15,.62)}
}

/* --- home: the guarantee, a court on the left and the rule sheet on the right */
.guar .wrap{display:grid;gap:34px}
.guar h2 em{font-style:normal;color:var(--lime)}
.guar .fourth{margin:28px 0 0}
.gsheet{position:relative;padding:26px 22px 24px;border-radius:6px 6px 26px 6px;--cream:#0f110f;--dim:rgba(15,17,15,.66);--dimmer:rgba(15,17,15,.46);--line:rgba(15,17,15,.12);--line-2:rgba(15,17,15,.26);--bg:#fff;--bg-2:#fff;--bg-3:#ecede8;--ica:#0f110f;background:var(--paper);color:var(--cream)}
.gs-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;font:700 11.5px var(--f-body);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.gsheet .seal{--sz:92px;margin:-52px -14px -30px 0}
.gsheet .seal .r1{fill:var(--lime)}
.gs-lede{font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.03em;line-height:.98;font-size:clamp(26px,6.4vw,34px);margin-top:10px;max-width:16ch}
.gsheet ol{list-style:none;margin:22px 0 0;padding:0}
.gsheet li{display:grid;grid-template-columns:1fr;gap:4px 12px;padding:16px 0;border-top:1px solid var(--line)}
.gsheet .g-num{font-size:40px;line-height:.82;color:var(--cream)}
.gsheet h3{font-family:var(--f-body);text-transform:none;letter-spacing:-.005em;font-size:17.5px;font-weight:800;line-height:1.25}
.gsheet li p{color:var(--dim);font-size:14.5px;margin-top:5px;max-width:52ch}
.gs-foot{padding-top:16px;border-top:2px solid var(--cream);font-size:14.5px;color:var(--dim)}
.gs-foot b{color:var(--ink);background:linear-gradient(transparent 56%,var(--lime) 56%,var(--lime) 94%,transparent 94%);padding:0 .12em;margin:0 -.12em}
@media (min-width:900px){
  .guar .wrap{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:64px;align-items:start}
  .guar .g-court{position:sticky;top:96px}
  .gsheet{padding:34px 34px 30px}
  .gsheet .seal{--sz:118px;margin:-74px -30px -40px 0}
}

/* --- home: your first night, a scoresheet strip --------------------------- */
.night{list-style:none;margin:28px 0 0;padding:0;display:grid;position:relative}
.night li{display:grid;grid-template-columns:62px 1fr;column-gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.night li:last-child{border-bottom:1px solid var(--line)}
.night time{grid-row:1/3;font-size:28px;line-height:.95;color:var(--dim)}
.night b{font-size:17.5px;font-weight:800;line-height:1.25}
.night span{color:var(--dim);font-size:14.5px;margin-top:4px;max-width:44ch}
.night span strong{color:var(--cream)}
.night li.pay time,.night li.pay b{color:var(--lime)}
@media (min-width:900px){
  .night{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 22px;margin-top:40px}
  .night::before{content:"";position:absolute;left:0;right:0;top:46px;height:1.5px;background:var(--line-2)}
  .night li,.night li:last-child{display:block;border:0;padding:0;position:relative}
  .night time{display:block;font-size:38px;color:var(--cream)}
  .night li::before{content:"";position:absolute;left:0;top:40px;width:13px;height:13px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--cream)}
  .night li.pay::before{width:17px;height:17px;top:38px;box-shadow:none;
    background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.2 4.2c4.3 2.4 4.3 9.2 0 11.6M16.8 4.2c-4.3 2.4-4.3 9.2 0 11.6' fill='none' stroke='%230f110f' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center/100% no-repeat}
  .night b{display:block;margin-top:34px}
  .night span{display:block}
}

/* --- home: the rail carries the pillar each stage belongs to --------------- */
.rail span em{font-style:normal;display:inline-block;margin-left:6px;padding:2px 6px 1px;border-radius:3px;font:700 10px var(--f-body);font-stretch:125%;letter-spacing:.07em;text-transform:uppercase;color:var(--dimmer);box-shadow:inset 0 0 0 1px var(--line);vertical-align:1px}

/* --- home: notices pinned up for the people who make the game possible ----- */
.notices{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:26px}
.notices li{position:relative;padding:28px 22px 24px;border-radius:4px 4px 22px 4px;--cream:#0f110f;--dim:rgba(15,17,15,.66);--dimmer:rgba(15,17,15,.46);--line:rgba(15,17,15,.12);--ica:#0f110f;background:var(--paper);color:var(--cream)}
.notices li::before{content:"";position:absolute;top:-9px;left:26px;width:76px;height:20px;background:rgba(212,255,58,.9);transform:rotate(-4deg);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.notices li:nth-child(2)::before{left:auto;right:30px;transform:rotate(5deg)}
.b-kind{display:flex;align-items:center;gap:9px;font:700 11.5px var(--f-body);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.b-kind .ic{width:22px;height:22px}
.notices h3{font-size:clamp(28px,7vw,40px);margin-top:14px;max-width:14ch}
.notices p{color:var(--dim);font-size:15px;margin-top:12px;max-width:50ch}
.notices p b{color:var(--cream);font-size:1.3em;line-height:1}
.notices .link{display:inline-block;margin-top:16px;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(currentColor,currentColor)}
@media (min-width:800px){
  .notices{grid-template-columns:1fr 1fr;gap:32px}
  .notices li{padding:36px 32px 30px}
  .notices li:nth-child(1){rotate:-.7deg}
  .notices li:nth-child(2){rotate:.6deg;translate:0 18px}
}

.pill small{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-stretch:125%;opacity:.6;margin-left:4px}

@media (max-width:899px){
  .hero .under{flex-wrap:nowrap;align-items:center}
  .hero .under > span{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:699px){
  .tk-when time{font-size:38px}
  .tk-stub{gap:14px;padding:0 18px}
  .tk-courts{gap:4px}
  .tk-courts .c{width:25px;height:17px;padding:0 2px}
  .tk-courts .c i{width:4px;height:4px}
}

/* --- join: one question at a time, the card building above it ------------- */
.jn .wrap{display:grid;gap:44px}
.jn-form{max-width:520px}
.convo{margin-top:6px}
.cv-steps{list-style:none;display:flex;gap:6px;margin:0 0 18px;padding:0}
.cv-steps li{width:28px;height:4px;border-radius:2px;background:var(--ink-line);transition:background-color .35s}
.cv-steps li.on{background:var(--ink)}
html:not(.js) .cv-steps,html:not(.js) .cv-nav{display:none}
.cv{border:0;margin:0 0 22px;padding:0;min-width:0}
.convo.stepped .cv{margin-bottom:0}
.convo.stepped .cv.cur{animation:cv-in .45s cubic-bezier(.16,1,.3,1)}
@keyframes cv-in{from{opacity:0;transform:translateX(18px)}}
.cv legend{padding:0;margin-bottom:14px;font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(30px,8vw,42px);color:var(--ink)}
.cv-n{display:block;margin-bottom:10px;font:700 11px var(--f-body);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tiles.rows{grid-template-columns:1fr}
.tile{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile > span{display:grid;gap:3px;min-height:64px;align-content:center;padding:12px 14px;border-radius:8px;box-shadow:inset 0 0 0 1.5px rgba(15,17,15,.35);transition:background-color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.tile b{font-size:17px;font-weight:800;line-height:1.15}
.tile small{font-size:12.5px;color:var(--ink-dim);line-height:1.3}
.tile:hover > span{box-shadow:inset 0 0 0 1.5px var(--ink)}
.tile input:checked + span{background:var(--ink);color:var(--lime);box-shadow:none}
.tile input:checked + span small{color:rgba(212,255,58,.75)}
.tile input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.tile:active > span{transform:scale(.97)}
.tiles.rows .tile > span{grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px;min-height:54px}
.cv-hint{font-size:13px;color:var(--ink-dim);margin-top:12px;max-width:46ch}
.cv .f input:not([type=checkbox]){background:#fff}
.cv-more{margin:4px 0 16px;border-top:1px solid var(--ink-line)}
.cv-more summary{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-weight:700;font-size:14px;cursor:pointer;list-style:none}
.cv-more summary::-webkit-details-marker{display:none}
.cv-more summary span{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-stretch:125%;color:var(--ink-dim)}
.cv-more .tog{border-color:var(--ink-line)}
.cv-more .tog span,.cv-more .tog input:checked + span{color:var(--ink)}
.cv-more .tog input{accent-color:var(--bg)}
#jgo{width:100%}
.cv-nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;min-height:42px}
.cv-nav .btn{margin-left:auto}
.cv-back{background:none;border:0;padding:8px 0;font-weight:700;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.jd-h{margin-top:22px;font-size:clamp(34px,9vw,48px);color:var(--ink)}
.jd-share{margin-top:18px;padding-top:14px;border-top:1px solid var(--ink-line)}
.jn-why h2{font-size:clamp(30px,7vw,46px);margin-bottom:18px}
.jn-next-h{margin-top:34px;font-size:clamp(24px,6vw,30px)}
.jn-next{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0;border-top:1.5px solid var(--ink)}
.jn-next li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--ink-line);font-size:14.5px}
.jn-next b{font-weight:800}
.jn-next span{color:var(--ink-dim)}
@media (min-width:900px){
  .jn .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
  .jn-form{position:sticky;top:96px}
}

/* --- home: the founding band, a two-field form at the point of most intent --- */
.found{background:var(--lime);color:var(--ink)}
.found + .sec::before,.found + .sec::after{display:none}
.found .wrap{display:grid;gap:22px;align-items:end}
.found h2{color:var(--ink);font-size:clamp(40px,10.5vw,84px)}
.found p.lede{color:var(--ink-dim);margin-top:12px;font-size:17px;max-width:44ch}
.qf{display:grid;gap:8px}
.qf label{font:700 11px var(--f-body);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.qf .row{display:grid;grid-template-columns:1fr;gap:8px}
.qf select,.qf input{min-height:54px;border:0;border-radius:8px;background:#fff;color:var(--ink);padding:0 14px;font-size:16px;width:100%;appearance:none}
.qf select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 24px,calc(100% - 15px) 24px;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.qf .btn{min-height:54px}
.qf small{font-size:12.5px;color:var(--ink-dim)}
.found .perk-row{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-weight:700;font-size:13.5px}
.found .perk-row span{display:inline-flex;align-items:center;gap:7px}
.found .perk-row .ic{width:18px;height:18px;--ica:var(--ink)}
@media (min-width:700px){.qf .row{grid-template-columns:150px 1fr auto}}
@media (min-width:1000px){.found .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px}}

/* --- phones: a founding-spot dock that appears once you've read the pitch ---- */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:38;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:12px;background:var(--lime);color:var(--ink);text-decoration:none;box-shadow:0 18px 40px -12px rgba(0,0,0,.7);transform:translateY(calc(100% + 30px));transition:transform .5s cubic-bezier(.16,1,.3,1);visibility:hidden}
.dock.on{transform:none;visibility:visible}
.dock span{flex:1;display:grid;line-height:1.2}
.dock b{font-weight:800;font-size:15.5px}
.dock small{font-size:12px;color:var(--ink-dim)}
.dock i{font-style:normal;display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--ink);color:var(--lime)}
.dock i .ic{width:18px;height:18px}
@media (min-width:700px){.dock{display:none}}

.sb .perk{margin-top:14px;padding:12px 14px;border-radius:8px;background:rgba(212,255,58,.1);box-shadow:inset 0 0 0 1px rgba(212,255,58,.35);font-size:14px;color:var(--dim)}
.sb .perk b{color:var(--lime)}

.sec + .found::before,.sec + .found::after{display:none}
.found .flag{background:rgba(15,17,15,.08);color:var(--ink-dim);box-shadow:inset 0 0 0 1px var(--ink-line);vertical-align:1px;margin-left:4px}
.found .flag::before{background:rgba(15,17,15,.4)}

@media (max-width:699px){.jn .wrap{gap:36px}}

/* =========================================================================
   the member card: a physical card you can pick up. It tilts under the pointer
   (or a finger dragged sideways), the court lines are foil that catch the light,
   it turns over to show the guarantee, and when you join it spins and the ball
   drops into your empty place on court.
   Depth inside a face is parallax (--px/--py), because a clipped face can't hold
   real 3D children; the card itself is real 3D with a 3px edge.
   ========================================================================= */
.pcard-wrap{width:100%;max-width:460px}
.pcard{--rx:0deg;--ry:0deg;--px:0;--py:0;--gx:50%;--gy:30%;--mx:.5;--go:.35;
  position:relative;width:100%;aspect-ratio:1.586;perspective:1100px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.pcard:active{cursor:grabbing}
.pc-shadow{position:absolute;left:9%;right:9%;top:16%;bottom:-4%;border-radius:30px;background:rgba(9,10,9,.62);filter:blur(22px);
  transform:translate(calc(var(--px) * -16px),calc(14px + var(--py) * -10px));pointer-events:none}
.pc-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.pc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,1.3,.45,1)}
.pcard.flipped .pc-inner{transform:rotateY(180deg)}
.pc-edge{position:absolute;inset:0;border-radius:20px;background:#2a2e2a;box-shadow:inset 0 0 0 1px rgba(212,255,58,.35)}
.pc-face{position:absolute;inset:0;border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(120% 90% at 18% 0%,#1d211d 0%,#0c0d0c 55%,#070807 100%);color:#f6f3ea;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.16)}
.pc-front{transform:translateZ(1.6px)}
.pc-back{transform:rotateY(180deg) translateZ(1.6px)}
.pc-face::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.9;pointer-events:none}

/* light: a soft glare that follows the pointer */
.pc-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:var(--go);transition:opacity .5s;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.75) 0%,rgba(255,255,255,.18) 22%,transparent 52%)}

/* front, laid out on the card's own grid; nearer things move further (parallax) */
.pc-front > *:not(.pc-glare){position:absolute}
.pc-top{left:7%;right:6%;top:8.5%;display:flex;justify-content:space-between;align-items:flex-start;
  transform:translate(calc(var(--px) * 3px),calc(var(--py) * 3px))}
.pc-top small{margin-top:4px;font:700 8.5px var(--f-body);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,234,.5);transition:color .5s}
.pc-tag{padding:5px 9px 4px;border-radius:4px;font:800 9.5px var(--f-body);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:#0f110f;
  background:linear-gradient(105deg,#c4f02c 0%,#d4ff3a 30%,#f6ffcf calc(var(--mx) * 100%),#d4ff3a 75%,#b9e624 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 6px rgba(0,0,0,.4)}
.pc-chip{left:7%;top:36%;display:flex;align-items:center;gap:10px;font-size:clamp(20px,5.6vw,26px);
  transform:translate(calc(var(--px) * 7px),calc(var(--py) * 7px))}
.pc-chip .sg-court{border-color:rgba(212,255,58,.55);background:linear-gradient(135deg,rgba(212,255,58,.12),rgba(212,255,58,.02))}
.pc-chip .sg-court::before{background:rgba(212,255,58,.7)}
.pc-chip .sg-court i.p{background:#f6f3ea}
.pc-chip .slot{position:relative}
.pc-chip .mc-ball{position:absolute;inset:0}
.pc-chip small{font:700 8.5px var(--f-body);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,234,.45)}
.pcard h3{left:7%;right:7%;top:56%;margin:0;font-size:clamp(30px,8.6vw,44px);line-height:.9;color:#f6f3ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 0 rgba(0,0,0,.35);transform:translate(calc(var(--px) * 10px),calc(var(--py) * 10px));transition:color .4s}
.pcard h3.empty{color:rgba(246,243,234,.32)}
.pc-meta{left:7%;right:44%;bottom:9%;margin:0;display:grid;grid-template-columns:auto auto 1fr;gap:clamp(14px,5vw,30px);transform:translate(calc(var(--px) * 5px),calc(var(--py) * 5px))}
.pc-meta div{min-width:0}
.pc-meta dt{white-space:nowrap;font:700 8.5px var(--f-body);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,234,.45)}
.pc-meta dd{margin:3px 0 0;font-size:clamp(17px,4.6vw,21px);line-height:1;color:#d4ff3a;white-space:nowrap}
.pc-meta dd:not(.num){font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.02em}
.pc-meta div:last-child dd{color:rgba(246,243,234,.4)}

/* both faces: matte black. No lacquer, no streaks; light falls broad and soft.
   The racket-P is printed huge in spot gloss varnish, black on black, bleeding off
   the edge: it only shows where the light catches it as the card tilts. The ball
   is the one thing printed in colour, sitting where it sits on the real mark. */
.pc-edge{background:#151615;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pc-face{background:#0b0c0b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.07)}
.pc-face::before{display:none}
.pc-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pc-mark{position:absolute;height:128%;aspect-ratio:2104/2160;left:19%;top:4%;pointer-events:none;
  -webkit-mask:url(/img/brand/paduno-mark-racket.svg) center/contain no-repeat;mask:url(/img/brand/paduno-mark-racket.svg) center/contain no-repeat;
  background:#121312;overflow:hidden;
  transform:translate(calc(var(--px) * 3px),calc(var(--py) * 3px))}
.pc-ball{position:absolute;height:128%;aspect-ratio:2104/2160;left:19%;top:4%;pointer-events:none;
  background:url(/img/brand/paduno-mark-ball.svg) center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transform:translate(calc(var(--px) * 9px),calc(var(--py) * 9px))}
.pc-front .pc-logo{position:absolute;left:7%;top:9%;right:auto;bottom:auto;display:block;filter:none;transform:translate(calc(var(--px) * 4px),calc(var(--py) * 4px))}
.pc-front .pc-logo img{height:clamp(17px,4.6vw,22px);width:auto}
.pc-front .pc-top{left:7%;right:auto;top:24%;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pc-front .pc-tag{padding:0;background:none;box-shadow:none;border-radius:0;color:#d4ff3a;font-size:9.5px;letter-spacing:.2em}
.pc-front .pc-top small{margin-top:0;font-size:8px}
.pc-front .pc-chip{top:41%}
.pcard h3{top:60%;right:30%}
.pc-face .pc-glare{mix-blend-mode:soft-light;opacity:calc(var(--go) * .4);
  background:radial-gradient(90% 90% at var(--gx) var(--gy),rgba(255,255,255,.35) 0%,transparent 70%)}
.pc-back{display:grid;place-items:center;align-content:center;gap:clamp(10px,3vw,16px)}
.pc-backmark{position:relative;height:44%;width:auto;transform:translate(calc(var(--px) * 6px),calc(var(--py) * 6px))}
.pc-back .pc-deboss{position:relative;left:auto;top:auto;font-size:clamp(14px,3.8vw,18px);color:#1f211f;
  text-shadow:0 1px 0 rgba(255,255,255,.07),0 -1px 0 rgba(0,0,0,.9)}

/* the hint under the card */
.pc-hint{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 22px;font:700 10.5px var(--f-body);font-stretch:125%;letter-spacing:.1em;text-transform:uppercase}
.pc-turn{background:none;border:0;padding:6px 0;font:inherit;letter-spacing:inherit;color:inherit;display:inline-flex;align-items:center;gap:8px}
.pc-turn::before{content:"";width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;
  background:conic-gradient(currentColor 0 25%,transparent 0) center/7px 7px no-repeat;transition:transform .6s cubic-bezier(.3,1.3,.45,1)}
.pc-turn[aria-pressed="true"]::before{transform:rotate(180deg)}
.pc-drag{opacity:.55}
@media (hover:none){.pc-drag::before{content:"Tap or drag sideways · "}.pc-drag{font-size:0}.pc-drag::before{font-size:10.5px}}
.on-light .pc-hint,.found .pc-hint{color:var(--ink)}

/* the payoff: the card lifts, tilts, settles, and the ball drops into your place */
.pcard.done .pc-tilt{animation:pc-spin 1.5s cubic-bezier(.25,.9,.3,1)}
/* a lift and a tilt, not a full turn: WebKit can keep showing the wrong face after a 360 */
@keyframes pc-spin{0%{transform:rotateX(0) rotateY(0) translateY(0)}35%{transform:rotateX(16deg) rotateY(-24deg) translateY(-18px) scale(1.05)}70%{transform:rotateX(-4deg) rotateY(8deg) translateY(-4px) scale(1.01)}100%{transform:rotateX(var(--rx)) rotateY(var(--ry))}}
.pcard.done .mc-ball{opacity:1;animation:card-ball 1.3s 1.2s linear both}
.pcard.done .pc-chip .slot{animation:none;background:var(--lime);box-shadow:none;transition-delay:1.75s}
.pcard.done .pc-chip .sg-court{border-color:var(--lime);transition-delay:1.75s}
.pcard.done #mc-state{color:var(--lime)}
.pcard.done .pc-tag{animation:pc-tag 1s 1.9s cubic-bezier(.3,1.3,.45,1) both}
@keyframes pc-tag{40%{transform:scale(1.18) rotate(-4deg)}}

/* home: the card sits above the quick form on wide screens */
.found-r{display:grid;gap:22px;justify-items:start}
.found .pcard-wrap{max-width:400px;justify-self:center}
.found .pc-hint{margin:12px 0 0}
@media (max-width:999px){.found .pcard-wrap{display:none}}

html.rm .pc-inner{transition:none}

/* =========================================================================
   /demo: the engine. A guide strip, then one board: the captain's phone beside a
   tabbed panel (Levels, Ledger, Results, League), so nothing runs down the page.
   ========================================================================= */
.ph-tight{padding-bottom:22px}
.ph-tight h1{font-size:clamp(38px,8.5vw,62px)}
.ph-tight::before{display:none}
@media (min-width:900px){.ph-tight{padding:34px 0 24px}.ph-tight .wrap{grid-template-columns:1fr 1fr}}
.sec.en{padding-top:26px}

/* the guide */
.en-guide{display:grid;gap:14px;margin-bottom:22px}
.en-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.en-steps li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);
  font-weight:700;font-size:13px;color:var(--dimmer);min-width:0;white-space:nowrap;overflow:hidden}
.en-steps .num{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:14px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.en-steps li.done{color:var(--dim)}
.en-steps li.done .num{background:var(--cream);color:var(--ink);box-shadow:none}
.en-steps li.cur{color:var(--ink);background:var(--lime);box-shadow:none}
.en-steps li.cur .num{background:var(--ink);color:var(--lime);box-shadow:none}
.en-say{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:14px 16px;border-radius:12px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.en-say p{flex:1 1 380px;font-size:15px;color:var(--dim);line-height:1.45}
.en-say p b{color:var(--cream);font-weight:700}
.en-say .btn{flex:none}
@media (max-width:699px){
  .en-steps{grid-template-columns:repeat(5,auto);justify-content:start;overflow-x:auto;scrollbar-width:none}
  .en-steps li{font-size:0;padding:6px}
  .en-steps li.cur{font-size:12.5px;padding:6px 10px 6px 6px}
  .en-say .btn{width:100%}
}

/* the board */
.en-grid{display:grid;gap:18px;align-items:start}
@media (min-width:1000px){.en-grid{grid-template-columns:372px minmax(0,1fr);gap:28px}}

/* the phone */
.en-phone{position:relative;width:100%;max-width:372px;justify-self:center;padding:10px;border-radius:42px;background:#1b1d1b;
  box-shadow:inset 0 0 0 1.5px #3a3d3a,inset 0 0 0 6px #0c0d0c,0 30px 60px -30px rgba(0,0,0,.9)}
.en-notch{position:absolute;left:50%;top:17px;width:84px;height:22px;border-radius:12px;background:#000;transform:translateX(-50%);z-index:2}
.en-screen{border-radius:33px;background:#0b0c0b;padding:46px 12px 14px;display:flex;flex-direction:column;gap:10px}
.en-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--dim)}
.en-bar b{color:var(--cream)}
.en-live{display:inline-flex;align-items:center;gap:6px;font:700 10px var(--f-body);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
.en-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);animation:en-pulse 1.6s ease-in-out infinite}
@keyframes en-pulse{50%{opacity:.3}}
.en-tabs{display:flex;gap:5px}
.en-tabs button{flex:1;min-height:32px;border:0;border-radius:7px;background:var(--bg-2);color:var(--dim);font-weight:700;font-size:12.5px;box-shadow:inset 0 0 0 1px var(--line)}
.en-tabs button[aria-selected="true"]{background:var(--cream);color:var(--ink)}
#en-app{display:grid;gap:8px}
.en-court{border-radius:12px;background:#151715;box-shadow:inset 0 0 0 1px var(--line);padding:9px 10px 10px}
.en-court.is-verified{box-shadow:inset 0 0 0 1px rgba(212,255,58,.4)}
.en-court.is-pending{box-shadow:inset 0 0 0 1px var(--line-2)}
.en-court.is-disputed{box-shadow:inset 0 0 0 1.5px #ff9b85}
.en-court.is-void{box-shadow:none;outline:1.5px dashed var(--line-2);outline-offset:-1.5px}
.en-ch{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.en-ch b{font-size:12.5px}
.en-ch span{font:700 9.5px var(--f-body);font-stretch:125%;letter-spacing:.07em;text-transform:uppercase;color:var(--dimmer)}
.is-open .en-ch span{color:var(--cream)}
.is-verified .en-ch span{color:var(--lime)}
.is-disputed .en-ch span{color:#ff9b85}
.en-match{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:stretch}
.en-pair{display:grid;align-content:center;gap:1px;min-height:50px;padding:6px 9px;border:0;border-radius:8px;background:var(--bg-3);color:var(--cream);font-weight:700;font-size:13.5px;line-height:1.2;text-align:left;
  transition:background-color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.en-pair + .en-sc + .en-pair{text-align:right}
.en-pair .cap{color:var(--lime)}
.en-pair:not([disabled]):hover{box-shadow:inset 0 0 0 1.5px var(--cream)}
.en-pair:not([disabled]):active{transform:scale(.97)}
.en-pair[disabled]{cursor:default;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.en-pair.won,.is-verified .en-pair.won{background:var(--lime);color:var(--ink);box-shadow:none}
.en-pair.won .cap{color:var(--ink)}
.en-sc{display:flex;align-items:center;gap:3px;padding:0 2px}
.en-sc b{min-width:28px;text-align:center;font-size:28px;line-height:1}
.en-sc i{font-style:normal;color:var(--dimmer)}
.is-open .en-sc b{color:var(--dim)}
.en-cf{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.en-cf p{flex:1 1 auto;font-size:12.5px;color:var(--dim)}
.en-cf .btn{min-height:34px;padding:0 13px;font-size:12.5px}
.en-court .btn.k{background:var(--cream);color:var(--ink);--fill:var(--lime)}
.en-lose{flex:1 1 150px;display:grid;gap:2px;font-size:11.5px;color:var(--dim)}
.en-lose input{width:100%;accent-color:var(--lime);height:22px}
.en-void{font-size:12.5px;color:var(--dim)}
.en-x{background:none;border:0;padding:6px 2px;font-weight:700;font-size:12.5px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.en-move{display:flex;align-items:center;gap:8px;border-radius:12px;padding:10px 12px;background:var(--lime);color:var(--ink)}
.en-move p{flex:1;font-size:13px;line-height:1.3}
.en-move small{display:block;font-size:11.5px;opacity:.7}
.en-move .btn{min-height:32px;padding:0 12px;font-size:12.5px}
.en-move .en-x{color:var(--ink)}
.en-actions{display:flex;gap:6px}
.en-actions .btn{flex:1;min-height:38px;font-size:13px;padding:0 8px}

/* the panel */
.en-panel{--cream:#0f110f;--dim:rgba(15,17,15,.64);--dimmer:rgba(15,17,15,.46);--line:rgba(15,17,15,.11);--line-2:rgba(15,17,15,.24);--bg:#fff;--bg-2:#fff;--bg-3:#ecede8;--ica:#0f110f;
  background:var(--paper);color:var(--cream);border-radius:16px;padding:6px 16px 16px;min-width:0;display:flex;flex-direction:column}
@media (min-width:1000px){.en-panel{height:620px}}
.en-ptabs{display:flex;gap:2px;border-bottom:1.5px solid var(--cream);margin:0 -4px;overflow-x:auto;scrollbar-width:none}
.en-ptabs button{flex:none;display:inline-flex;align-items:center;gap:6px;padding:12px 12px 10px;border:0;background:none;font-weight:800;font-size:14.5px;color:var(--dimmer);border-bottom:3px solid transparent;margin-bottom:-1.5px}
.en-ptabs button[aria-selected="true"]{color:var(--cream);border-bottom-color:var(--lime)}
.en-ptabs button[disabled]{opacity:.4;cursor:default}
.en-ptabs b{font:800 11px var(--f-body);font-stretch:62%;padding:1px 6px;border-radius:999px;background:var(--bg-3);color:var(--dim)}
.en-pane{flex:1;min-height:0;overflow-y:auto;padding-top:12px}
@media (max-width:999px){.en-pane{max-height:70svh}}
.en-tip{font-size:12.5px;color:var(--dim);margin-bottom:10px;max-width:70ch}
.en-tip b{color:var(--cream)}
.en-p,.en-pn i{font-style:normal;font:700 8.5px var(--f-body);font-stretch:125%;letter-spacing:.05em;text-transform:uppercase;padding:2px 4px;border-radius:3px;background:var(--bg-3);color:var(--dim);vertical-align:1px}

/* levels: three courts side by side, at every width */
.en-roster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.en-cn{display:block;font:700 9.5px var(--f-body);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);padding-bottom:5px;border-bottom:2px solid var(--cream)}
.en-roster ol{list-style:none;margin:0;padding:0}
.en-roster li li button{width:100%;display:grid;gap:3px;padding:7px 4px 8px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:inherit;border-radius:4px}
.en-roster li li button:hover:not([disabled]){background:var(--bg-3)}
.en-roster li li button[disabled]{cursor:default}
.en-pn{display:flex;align-items:center;gap:4px;font-weight:800;font-size:13.5px;min-width:0}
.en-pn i.rv{background:#ffe2b8;color:#7a4300}
.en-pn i.out{background:#0f110f;color:#fff}
.en-pn i.rf{background:var(--lime);color:#0f110f}
.en-lv{display:flex;align-items:baseline;gap:6px}
.en-lv b{font-size:21px;line-height:1}
.en-lv small{font-size:12px;color:var(--dimmer)}
.en-lv small.up{color:#0f110f;background:var(--lime);padding:0 .2em;border-radius:2px}
.en-lv small.down{color:#b4351a}
.en-conf{height:3px;border-radius:2px;background:var(--bg-3);overflow:hidden}
.en-conf i{display:block;height:100%;background:var(--cream);transition:width .6s cubic-bezier(.16,1,.3,1)}
@media (max-width:420px){.en-roster{gap:6px}.en-pn{font-size:12.5px}.en-lv{flex-direction:column;gap:1px}.en-lv b{font-size:19px}}

/* ledger */
.en-ledger{list-style:none;margin:0;padding:0;border-top:2px solid var(--cream);font-size:12.5px}
.en-ledger li{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line-2)}
.en-ledger li.new{animation:en-in 1.4s cubic-bezier(.16,1,.3,1)}
@keyframes en-in{from{background:rgba(212,255,58,.45)}}
.en-ledger li b{font:800 9px var(--f-body);font-stretch:125%;letter-spacing:.05em;padding:2px 5px;border-radius:3px;background:var(--bg-3);justify-self:start}
.en-ledger li p{color:var(--dim);line-height:1.4}
.en-ledger .c-level b,.en-ledger .c-confirm b{background:#0f110f;color:#fff}
.en-ledger .c-refund b,.en-ledger .c-people b,.en-ledger .c-stamp b,.en-ledger .c-captain b{background:var(--lime)}
.en-ledger .c-review b,.en-ledger .c-dispute b,.en-ledger .c-drop b{background:#ffe2b8;color:#7a4300}
.en-ledger .c-league b{background:#dfe6ff;color:#1b2f7a}

/* results */
.en-who{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.en-who button{min-height:32px;padding:0 11px;border:0;border-radius:7px;background:var(--bg-3);color:var(--cream);font-weight:700;font-size:13px}
.en-who button[aria-selected="true"]{background:#0f110f;color:var(--lime)}
.en-rc-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.en-rc h3{font-size:clamp(34px,7vw,46px)}
.en-rc-lv{display:flex;align-items:baseline;gap:8px;font-size:18px;color:var(--dimmer)}
.en-rc-lv span{font-size:26px}
.en-rc-lv b{font-size:36px;color:var(--cream);line-height:1}
.en-rc-lv em{font-style:normal;font-size:17px;padding:0 .2em;border-radius:2px}
.en-rc-lv em.up{background:var(--lime);color:#0f110f}
.en-rc-lv em.down{color:#b4351a}
.en-rc-sub{font-size:12.5px;color:var(--dim);margin-top:6px}
.en-rc-rounds{list-style:none;margin:12px 0 0;padding:0;border-top:2px solid var(--cream)}
.en-rc-rounds li{display:grid;grid-template-columns:28px 1fr auto 48px;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--dim)}
.en-rc-rounds li > span:first-child{font-weight:800;color:var(--dimmer)}
.en-rc-rounds li b{color:var(--cream)}
.en-rc-rounds li b.num{font-size:21px;line-height:1}
.en-rc-rounds li em{font-style:normal;text-align:right}
.en-rc-again{margin-top:12px;padding:12px;border-radius:10px;background:#0f110f;color:#f6f3ea}
.en-rc-again p{font-size:13px;color:rgba(246,243,234,.7)}
.en-rc-again p b{color:#f6f3ea;font-family:var(--f-head);font-weight:800;text-transform:lowercase;letter-spacing:-.02em;font-size:20px;margin-right:4px}
.en-rc-again div{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.en-rc-again button{min-height:32px;padding:0 11px;border:0;border-radius:7px;background:#222622;color:#f6f3ea;font-weight:700;font-size:12.5px}
.en-rc-again button[aria-pressed="true"]{background:#f6f3ea;color:#0f110f}
.en-rc-again button.mu{background:var(--lime);color:#0f110f}
.en-rc-again small{display:block;margin-top:8px;font-size:11px;color:rgba(246,243,234,.5)}

/* league */
.en-lg-top{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-bottom:6px}
.en-lg-top .en-tip{margin:0}
.en-btns{display:flex;flex-wrap:wrap;gap:6px}
.en-btns .btn{min-height:36px;padding:0 13px;font-size:13px}
.en-btns .btn.o{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--cream)}
.en-btns .btn.k{background:#0f110f;color:#fff}
.en-lg{display:grid;gap:14px}
@media (min-width:1200px){.en-lg{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.en-tbl td{padding:8px 0}
.en-tbl .p{font-size:18px}
.en-tbl tr.bot .p{color:#b4351a}
.en-panel .tbl tr.zone td{color:#0f110f;border-top-color:rgba(15,17,15,.4)}
.en-panel .tbl tr.top .p{color:#0f110f;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:4px;text-underline-offset:-1px}
.en-weeks{list-style:none;margin:0;padding:0;font-size:12px;color:var(--dimmer)}
.en-weeks li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line)}
.en-weeks li b{width:36px;color:var(--dim)}
.en-weeks li.played{color:var(--cream)}
.en-weeks li.next b{color:#0f110f;background:var(--lime);padding:0 4px;border-radius:2px;width:auto}
.en-weeks em{font-style:normal;color:var(--dim)}
.en-empty{color:var(--dim)}

/* =========================================================================
   buttons: every button is part of the same rally.
   - Action buttons end in the ball, not an arrow. Point at one and the ball hops;
     press it and the whole button squashes, like a ball meeting the strings.
   - Anything you select (a filter, a tab, an answer, a player) gets the ball rolled
     into it, so "chosen" always looks the same across the site.
   ========================================================================= */
:root{
  --ball-lime:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23d4ff3a'/%3E%3Cpath d='M3.2 4.2c4.3 2.4 4.3 9.2 0 11.6M16.8 4.2c-4.3 2.4-4.3 9.2 0 11.6' fill='none' stroke='%230f110f' stroke-width='1.5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  --ball-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230f110f'/%3E%3Cpath d='M3.2 4.2c4.3 2.4 4.3 9.2 0 11.6M16.8 4.2c-4.3 2.4-4.3 9.2 0 11.6' fill='none' stroke='%23d4ff3a' stroke-width='1.5' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E");
  --ball-grey:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23777a77'/%3E%3Cpath d='M3.2 4.2c4.3 2.4 4.3 9.2 0 11.6M16.8 4.2c-4.3 2.4-4.3 9.2 0 11.6' fill='none' stroke='%23222622' stroke-width='1.5' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
}

/* action buttons */
.btn{border-radius:7px;gap:0;transition:color .3s,box-shadow .3s,transform .28s cubic-bezier(.3,1.6,.5,1)}
.btn > .ic{display:none}
.btn::before{content:"";order:9;flex:none;width:.6em;height:.6em;margin:0 -.1em 0 .75em;border-radius:50%;
  background:var(--ball-lime) center/100% no-repeat;transform-origin:50% 100%}
.btn.v::before,.btn.w::before,.btn.o:hover::before{background-image:var(--ball-ink)}
.btn[disabled]::before,.btn[aria-disabled="true"]::before{background-image:var(--ball-grey);animation:none!important}
@media (hover:hover){.btn:not([disabled]):hover::before{animation:btn-hop .75s cubic-bezier(.3,0,.3,1)}}
@keyframes btn-hop{
  0%{transform:none}
  32%{transform:translateY(-.62em) scale(.94,1.06)}
  58%{transform:translateY(0) scale(1.22,.8)}
  76%{transform:translateY(-.2em)}
  100%{transform:none}}
.btn:active{transform:scale(1.03,.92)}

/* on paper and lime surfaces the ball is ink, and the fill under the pointer is ink */
.on-light .btn.o::before,.found .btn.o::before,.en-panel .btn.o::before,.en-court .btn.k::before{background-image:var(--ball-ink)}
.en-panel .btn.o:hover,.calc .btn.o:hover{color:#fff}
.en-panel .btn.o:hover::before,.tk-in .btn.v:hover::before,.calc .btn.v:hover::before,.ratelab .btn.v:hover::before{background-image:var(--ball-lime)}
.en-court .btn.k:hover::before{background-image:var(--ball-ink)}

/* the dock's go-square carries the ball too */
.dock i .ic{display:none}
.dock i::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--ball-lime) center/100% no-repeat}
.dock.on i::before{animation:btn-hop .9s .5s cubic-bezier(.3,0,.3,1) both}

/* selected things: the ball rolls in */
.pill,.en-tabs button,.en-who button,.en-rc-again button{display:inline-flex;align-items:center;justify-content:center}
.pill::before,.en-tabs button::before,.en-who button::before,.en-rc-again button::before{content:"";flex:none;width:0;height:.62em;margin-right:0;border-radius:50%;
  background:var(--ball-ink) center/contain no-repeat;transform:rotate(-200deg);
  transition:width .35s cubic-bezier(.3,1.4,.5,1),margin .35s cubic-bezier(.3,1.4,.5,1),transform .5s cubic-bezier(.3,1.2,.5,1)}
.pill[aria-pressed="true"]::before,.en-tabs button[aria-selected="true"]::before,.en-who button[aria-selected="true"]::before,.en-rc-again button[aria-pressed="true"]::before{width:.62em;margin-right:.45em;transform:none}
.en-who button[aria-selected="true"]::before{background-image:var(--ball-lime)}
.en-rc-again button.mu::before{background-image:var(--ball-ink)}

/* answers you pick on the join form, and the pair you mark as winning */
.tile > span{position:relative}
.tile > span::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:var(--ball-lime) center/100% no-repeat;transform:scale(0) rotate(-180deg);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.tile input:checked + span::after{transform:none}
.tiles.rows .tile > span{padding-right:36px}
.en-pair{position:relative}
.en-pair::after{content:"";position:absolute;top:6px;width:11px;height:11px;border-radius:50%;background:var(--ball-ink) center/100% no-repeat;
  transform:scale(0);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.en-pair[data-win$=":0"]::after{right:6px}
.en-pair[data-win$=":1"]::after{left:6px}
.en-pair.won::after{transform:none}

/* small text-buttons share the press */
.en-x:active,.reset:active,.cv-back:active,.pc-turn:active,.fbtn:active{transform:scale(1.03,.92)}
.en-x,.reset,.cv-back,.fbtn{transition:transform .28s cubic-bezier(.3,1.6,.5,1),color .2s}

/* the shape: every button is a small version of the paduno mark, a speech bubble
   with soft corners and its tail at the bottom left. */
:root{--bub:1.15em 1.15em 1.15em .22em;--bub-s:.95em .95em .95em .2em}
.btn{border-radius:var(--bub)}
.btn.sm,.en-cf .btn,.en-move .btn,.en-btns .btn,.en-actions .btn{border-radius:var(--bub-s)}
.pill,.day,.fbtn,.en-tabs button,.en-who button,.en-rc-again button,.en-pair,.tile > span,.dock,.dock i,.qf select,.qf input{border-radius:var(--bub-s)}
.en-pair[data-win$=":1"]{border-radius:.95em .95em .2em .95em}
.dock{border-radius:1.1em 1.1em 1.1em .25em}

@media (prefers-reduced-motion:reduce){.btn:hover::before,.dock.on i::before{animation:none}}

/* =========================================================================
   texture: the page itself is a surface. A padel racket's hole pattern sits on the
   black at a whisper, with fine grain over it, and drifts a little slower than the
   page as you scroll. Under a mouse the holes nearest the pointer catch the light,
   like the spot gloss on the member card. Solid sections, paper cards and the lime
   pages cover it, so it only ever shows on open black.
   ========================================================================= */
body{background:transparent}
footer{background:transparent}
body::before{content:"";position:fixed;left:0;right:0;top:-40px;bottom:-40px;z-index:-1;pointer-events:none}
body::before{
  background:
    var(--grain),
    radial-gradient(circle,rgba(246,243,234,.1) 0 1.05px,transparent 1.55px) 0 0/14px 12px,
    radial-gradient(circle,rgba(246,243,234,.1) 0 1.05px,transparent 1.55px) 7px 6px/14px 12px;
  -webkit-mask:radial-gradient(140% 90% at 50% 0%,#000 30%,rgba(0,0,0,.62) 100%);
          mask:radial-gradient(140% 90% at 50% 0%,#000 30%,rgba(0,0,0,.62) 100%);
}
/* the light under the mouse: a 480px layer that moves by transform; the lime hole
   pattern inside it moves the opposite way, so it lines up with the texture */
.lite{position:fixed;left:0;top:0;width:480px;height:480px;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;
  -webkit-mask:radial-gradient(circle 240px at 50% 50%,#000 0%,rgba(0,0,0,.4) 45%,transparent 100%);
          mask:radial-gradient(circle 240px at 50% 50%,#000 0%,rgba(0,0,0,.4) 45%,transparent 100%);
  opacity:0;transition:opacity .6s;will-change:transform,opacity}
.lite i{position:absolute;left:0;top:-40px;width:100vw;height:calc(100vh + 80px);will-change:transform;
  background:
    radial-gradient(circle,rgba(212,255,58,.5) 0 1.15px,transparent 1.7px) 0 0/14px 12px,
    radial-gradient(circle,rgba(212,255,58,.5) 0 1.15px,transparent 1.7px) 7px 6px/14px 12px}
html.lit .lite{opacity:1}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .door:hover img{transform:none}
}

/* --- coming soon: locked pages, locked sections, chips on links to them ----- */
/* A locked page is an empty court: four dashed places, nobody on it yet. Dashed
   means provisional everywhere on this site. */
.soon{padding:56px 0 72px;border-bottom:0}
.soon .wrap{display:grid;gap:40px;align-items:center}
.soon h1{font-size:clamp(52px,13vw,112px);line-height:.95;margin-bottom:6px}
.soon p{max-width:46ch}
.soon-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.soon-act .ic{width:20px;height:20px;margin-left:10px}
.soon .soon-foot{font-size:14.5px;color:var(--dimmer);margin-top:20px}
.soon-foot a{color:var(--cream)}
.soon-foot a:hover{color:var(--lime)}
.soon-court{position:relative;max-width:520px}
.soon-court svg{display:block;width:100%;height:auto;overflow:visible}
.soon-court .sc-ct{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1.2}
.soon-court .sc-ln{stroke:var(--line);stroke-width:1}
.soon-court .sc-nt{stroke:var(--cream);stroke-width:1.6;opacity:.55}
.soon-court .sc-p{fill:none;stroke:var(--dimmer);stroke-width:1.2;stroke-dasharray:2.4 3}
.soon-court .sc-gl{fill:none;stroke:var(--line-2);stroke-width:2.2;stroke-linejoin:round}
.soon-court .sc-ms{fill:none;stroke:var(--line-2);stroke-width:.9;stroke-dasharray:1 2.6;stroke-linecap:round}
.soon-court .sc-po{fill:var(--cream);opacity:.55}
.soon-court .flag{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);margin:0;background:var(--bg);white-space:nowrap}
@media (min-width:900px){
  .soon{padding:96px 0 120px}
  .soon .wrap{grid-template-columns:1.2fr 1fr;gap:64px}
  .soon h1{font-size:clamp(72px,7.4vw,112px)}
}

.soon-strip{padding:26px 0;border-block:1px dashed var(--line-2)}
.soon-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.soon-strip p{color:var(--dim)}
.soon-strip b{color:var(--cream)}
.soon-strip a{color:var(--cream)}
.soon-strip a:hover{color:var(--lime)}

.nav nav a[data-soon]::after,.drawer a[data-soon]::after,.fcols a[data-soon]::after{
  content:"Soon";display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;vertical-align:.15em;
  font:700 9.5px/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer);box-shadow:inset 0 0 0 1px var(--line)}
.nav nav a[data-soon],.drawer a[data-soon],.fcols a[data-soon]{color:var(--dimmer)}

/* --- /join: free waitlist and the paid founding tier ------------------------ */
/* Founding wears the member card's black, so paying reads as getting the card.
   On the waitlist choice the card dims: it belongs to founding members only. */
#tierhint{margin-top:10px}
.f100-box{margin-top:32px;padding:26px 22px 22px;border-radius:14px;background:var(--bg);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(212,255,58,.35)}
.f100-box .flag{background:var(--bg-2);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
.f100-box .flag::before{background:var(--lime)}
.f100-box .note{color:var(--dimmer);margin-top:14px}
.jd-f100{margin-bottom:12px}
.pcard{transition:opacity .35s,filter .35s}
.pcard.off{opacity:.42;filter:grayscale(1)}
.f100-sum{margin-top:16px;padding:12px 14px;border-radius:8px;background:var(--bg-2);font-size:14.5px;color:var(--cream)}
.tier .tile > span{padding:16px 16px;gap:6px}
.tier-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:19px}
.tier-h i{font-style:normal;font-family:var(--f-head);font-size:24px;line-height:1}
.tier .tile small{font-size:13.5px}
.tier-note{padding:12px 14px;border-radius:8px;background:var(--ink);color:var(--cream)}
.tier-note b{color:var(--lime)}
.cmp{width:100%;margin-top:18px;border-collapse:collapse;font-size:15px}
.cmp thead th{width:84px;padding:0 6px 12px;text-align:center;font-weight:700;font-size:13px;vertical-align:bottom}
.cmp thead th b{display:block;font-family:var(--f-head);font-size:24px;line-height:1.1;margin-top:2px}
.cmp thead .cf{background:var(--ink);color:var(--cream);border-radius:10px 10px 0 0;padding-top:12px}
.cmp thead .cf b{color:var(--lime)}
.cmp tbody th{text-align:left;font-weight:400;padding:12px 10px 12px 0;border-top:1px solid var(--ink-line);line-height:1.35}
.cmp td{text-align:center;border-top:1px solid var(--ink-line)}
.cmp td.n{color:var(--ink-dim)}
.cmp td .ic{width:20px;height:20px;vertical-align:middle;--ica:var(--ink)}
.cmp tbody td:last-child{background:var(--ink);border-top-color:var(--line)}
.cmp tbody td:last-child .ic{--ica:var(--lime);color:var(--cream)}
.cmp tbody tr:last-child td:last-child{border-radius:0 0 10px 10px}
/* WebKit lets a transformed child of a hidden face show through; hide them too */
.pc-face > *{-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* --- member card, final layout: a premium membership card ------------------
   Wordmark and tier across the top, a brushed metal chip, the member number,
   then the name embossed in capitals over level, home and validity. */
.pc-front .pc-chip{display:none}
.pc-front .pc-top{left:7%;right:auto;top:21%;align-items:flex-start;text-align:left;flex-direction:row;gap:10px;align-items:baseline}
.pc-emv{position:absolute;left:7%;top:35%;width:13.5%;aspect-ratio:1.28;border-radius:14%/18%;overflow:hidden;
  background:linear-gradient(135deg,#8e8a7f 0%,#d9d4c6 calc(var(--mx) * 60%),#a39e91 60%,#6f6b62 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.08);transform:translate(calc(var(--px) * 5px),calc(var(--py) * 5px))}
.pc-emv i{position:absolute;background:rgba(40,38,34,.45)}
.pc-emv i:nth-child(1){left:0;right:0;top:33%;height:1px}
.pc-emv i:nth-child(2){left:0;right:0;top:66%;height:1px}
.pc-emv i:nth-child(3){top:0;bottom:0;left:36%;width:1px}
.pc-emv i:nth-child(4){left:36%;right:24%;top:33%;bottom:34%;background:none;box-shadow:0 0 0 1px rgba(40,38,34,.45);border-radius:2px}
.pc-no{position:absolute;left:7%;top:56%;margin:0;color:#f6f3ea;font:700 clamp(17px,4.6vw,22px)/1 var(--f-body);letter-spacing:.18em;
  text-shadow:0 1px 0 rgba(0,0,0,.7),0 -1px 0 rgba(255,255,255,.08);transform:translate(calc(var(--px) * 7px),calc(var(--py) * 7px))}
.pc-no small{font-size:.6em;letter-spacing:.1em;color:rgba(246,243,234,.55);margin-right:.2em}
.pc-no span{color:rgba(246,243,234,.45)}
.pcard h3{top:auto;bottom:25%;left:7%;right:7%;font:700 clamp(15px,4.2vw,20px)/1 var(--f-body);text-transform:uppercase;letter-spacing:.16em;
  color:#f6f3ea;text-shadow:0 1px 0 rgba(0,0,0,.75),0 -1px 0 rgba(255,255,255,.1)}
.pcard h3.empty{color:rgba(246,243,234,.38)}
.pc-meta{left:7%;right:7%;bottom:9%;grid-template-columns:auto auto 1fr;gap:clamp(16px,5vw,30px)}
.pc-meta div:last-child{justify-self:end;text-align:right}
.pc-meta dt{font-size:7.5px;color:rgba(246,243,234,.42)}
.pc-meta dd{font-size:clamp(12px,3.3vw,14px);font-family:var(--f-body)!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:#f6f3ea}
.pc-meta dd.num{color:#d4ff3a}
.pc-meta div:last-child dd{color:rgba(246,243,234,.75)}
/* WebKit paints the back face over the front after a layout change; order them */
.pc-front{z-index:2}
.pc-back{z-index:1}
.pcard.flipped .pc-front{z-index:1}
.pcard.flipped .pc-back{z-index:2}

/* --- the fourth-player court, drawn to scale ------------------------------ */
.fourth .ct{stroke-width:1.5}
.fourth .ln{stroke-width:1.3}
.fourth .gl{fill:none;stroke:rgba(15,17,15,.38);stroke-width:3.2;stroke-linejoin:round}
.fourth .ms{fill:none;stroke:rgba(15,17,15,.32);stroke-width:1.2;stroke-dasharray:1.2 3.2;stroke-linecap:round}
.fourth .net{stroke:var(--ink);stroke-width:2.4;opacity:1}
.fourth .post{fill:var(--ink)}
.fourth circle.pl{fill:var(--ink);stroke:none}
.fourth .you circle{stroke:none}
.fourth .you text{font:700 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;fill:var(--ink);dominant-baseline:auto}
.fourth .slot{stroke-width:1.4;stroke-dasharray:3 4}

/* --- hero: shuffled photos, and the phone layout ----------------------------
   Every photo is stacked in the figure; .on is the one showing. Each sets its own
   framing (--pos phones, --dpos wide) and mirroring (--flip) inline. */
.hero{grid-template-columns:minmax(0,1fr)}
.hero-shuffle img{opacity:0;transition:opacity 1.6s ease;object-position:var(--pos,50% 30%)!important;
  transform:none!important;translate:none!important}
.hero-shuffle img.on{opacity:1}
.hero-shuffle img:not(:first-child),.hero-shuffle.cycled img{animation:none}
@media (min-width:900px){
  .hero-shuffle img{object-position:var(--dpos,50% 30%)!important;transform:scaleX(var(--flip,1))!important}
}
@media (max-width:899px){
  /* phones: the photo owns the top of the screen and the copy sits under the
     player's face instead of across it */
  .hero figure{align-self:start;height:clamp(300px,54svh,520px)}
  .hero figure::after{background:linear-gradient(to bottom,rgba(15,17,15,.55) 0,rgba(15,17,15,0) 120px),
    linear-gradient(to top,var(--bg) 0%,rgba(15,17,15,.7) 22%,rgba(15,17,15,0) 55%)}
  .hero{background:var(--bg)}
  .hero .copy{align-self:start;padding-top:calc(clamp(300px,54svh,520px) - 96px);padding-bottom:36px}
  .hero h1{font-size:clamp(44px,14vw,96px)}
}
@media (max-width:359px){
  .nav .mark img:last-child{height:20px;width:auto}
  .nav .right .btn.sm{padding:0 14px;font-size:13px}
  .nav .right{gap:8px}
}
@media (max-width:899px) and (max-height:700px),(min-width:600px) and (max-width:899px){
  .hero figure{height:clamp(220px,42svh,420px)}
  .hero .copy{padding-top:calc(clamp(220px,42svh,420px) - 80px)}
  .hero .copy > .slogan{margin-bottom:12px}
}

/* --- the waitlist, shown the same way on home, hero and /join ---------------
   Three numbered steps on ink lines, then the two ways in as cards. */
.wl-flow{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;counter-reset:none;border-top:1.5px solid var(--ink)}
.wl-flow li{display:grid;grid-template-columns:1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--ink-line)}
.wl-n{font-family:var(--f-head);font-size:26px;line-height:1;color:var(--ink)}
.wl-flow h3{font-size:18px;color:var(--ink);margin:0}
.wl-flow p{margin:4px 0 0;font-size:15px;color:var(--ink-dim);max-width:46ch}
@media (min-width:760px){
  .wl-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:0}
  .wl-flow li{grid-template-columns:1fr;gap:10px;padding:16px 0 0;border-bottom:0;border-top:1.5px solid var(--ink)}
}
.found .wl-flow{margin-bottom:24px}
.found .flag.live{background:var(--ink);color:var(--lime);box-shadow:none}
.found .flag.live::before{background:var(--lime)}
.found h2{margin-top:14px;font-size:clamp(40px,9vw,68px)}
.wl-ways{display:grid;gap:10px;width:100%}
.wl-way{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:16px 18px;border-radius:12px;text-decoration:none;
  color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);transition:background-color .2s}
.wl-way b{font-size:18px}
.wl-way i{font-style:normal;font-family:var(--f-head);font-size:24px;line-height:1}
.wl-way span{grid-column:1/-1;font-size:14.5px;color:var(--ink-dim)}
.wl-way.f{background:var(--ink);color:var(--cream);box-shadow:none}
.wl-way.f i{color:var(--lime)}
.wl-way.f span{color:var(--dim)}
@media (hover:hover){.wl-way:hover{background:rgba(15,17,15,.06)}.wl-way.f:hover{background:#000}}
.wl-way:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (min-width:1000px){.found .wrap{align-items:start}.found-r{padding-top:44px}}
.ph .wl-flow{margin-top:26px;max-width:1000px}
.hero .under a.link{color:var(--cream)}
.hero .under > span{font:400 14.5px/1.45 var(--f-body);letter-spacing:0;text-transform:none;color:var(--dim);display:block;max-width:44ch}
.hero .under > span .flag{display:inline-flex;margin:0 6px 4px 0;vertical-align:middle}
.hero .under a.link{font-weight:700;white-space:nowrap}
.wl-flow li{align-content:start}
.wl-flow li > div > h3{margin:0!important;line-height:1.15}

/* --- member card at rest: breathing on the GPU --------------------------------
   The idle tilt and the varnish sheen are CSS animations (transform and translate
   only), so the card no longer repaints on every frame. While someone tilts it,
   .live hands control to the script. Periods match the old script: 10.5s and 7.6s. */
.pc-mark::after{content:"";position:absolute;top:0;bottom:0;left:-100%;width:300%;pointer-events:none;
  background:linear-gradient(118deg,transparent 36%,rgba(255,255,255,.1) 46%,transparent 54%);
  transform:translateX(calc((var(--mx) - .5) * 40%));will-change:transform}
.pc-tilt{animation:pc-breathe-x 7.6s ease-in-out infinite;will-change:transform}
.pcard:not(.live) .pc-tilt{rotate:y 0deg;animation:pc-breathe-x 7.6s ease-in-out infinite,pc-breathe-y 10.5s ease-in-out infinite}
.pcard:not(.live) .pc-mark::after{animation:pc-sheen 10.5s ease-in-out infinite}
.pcard.live .pc-tilt,.pcard.live .pc-mark::after{animation:none}
@keyframes pc-breathe-x{0%,100%{transform:rotateX(0deg)}25%{transform:rotateX(-1.8deg)}75%{transform:rotateX(1.8deg)}}
@keyframes pc-breathe-y{0%,100%{rotate:y 0deg}25%{rotate:y 3.7deg}75%{rotate:y -3.7deg}}
@keyframes pc-sheen{0%,100%{translate:0 0}25%{translate:4% 0}75%{translate:-4% 0}}
.pcard.done:not(.live) .pc-tilt{animation:pc-spin 1.5s cubic-bezier(.25,.9,.3,1),pc-breathe-y 10.5s ease-in-out 1.5s infinite}
.fourth:not(.vis) .rally{animation-play-state:paused}
html.rm .pc-tilt,html.rm .pc-mark::after{animation:none!important}
.nav{will-change:transform}

/* --- member card while tilting: transform-only --------------------------------
   The glare is a large soft spot that slides by transform instead of a gradient
   redrawn at a new position each frame; the blurred shadow gets its own layer. */
.pc-face .pc-glare{background:none!important;overflow:hidden}
.pc-glare::before{content:"";position:absolute;left:-50%;top:-50%;width:200%;height:200%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.35) 0%,transparent 36%);
  transform:translate(calc(var(--px) * 27.5%),calc(var(--py) * 27.5% - 5%));will-change:transform}
.pc-shadow{will-change:transform}

/* --- hero: one line, changing with the photo, area by area --------------- */
.areas{margin-top:26px;max-width:34ch;font-size:17px;line-height:1.45;color:var(--dim)}
.areas-line{transition:opacity .35s ease}
.areas-line.out{opacity:0}
html.rm .areas-line{transition:none}
.areas-line b{color:var(--cream);font-weight:700}
.areas-line strong{color:var(--lime);font-weight:700;font-variant-numeric:tabular-nums}
.areas .link{color:var(--cream);white-space:nowrap}

/* bot trap on the join form: off screen, never seen or focused by people */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- home one-step join: town field, error, done state -------------------- */
.qf input[hidden]{display:none}
@media (min-width:700px){.qf .row:has(#qp:not([hidden])){grid-template-columns:150px 1fr 1fr auto}}
.qf-err{margin:8px 0 0;font-size:14px;font-weight:700;color:var(--ink)}
.qf-done{outline:none;padding:18px 0 4px;border-top:1.5px solid var(--ink)}
.qf-done h3{font-size:26px;color:var(--ink);margin:0}
.qf-done p{margin:6px 0 0;color:var(--ink-dim);font-size:15.5px}
.qf-done .link{color:var(--ink)}

/* --- home hero: the join form sits in the hero, on black ------------------ */
.qf-hero{margin-top:24px;max-width:620px;scroll-margin-top:90px}
.qf-hero .qf-note{color:var(--dim)}
.qf-hero .qf-note .link{color:var(--cream)}
.qf-hero .qf-err{color:var(--lime)}
.qf-hero .qf-done{border-top-color:var(--lime)}
.qf-hero .qf-done h3,.qf-hero .qf-done .link{color:var(--cream)}
.qf-hero .qf-done p{color:var(--dim)}
@media (max-width:900px){
  .drawer a.dr-big[data-soon] small{font-size:0}
  .drawer a.dr-big[data-soon] small::after{content:"Soon";font-size:13px}
}

/* --- cards: one finish across the site --------------------------------------
   Every card uses the same two radii, the same hairline edge and the same soft
   drop, so tickets, sheets and panels read as one family. Light cards (paper)
   get a deeper shadow to lift off the black; dark cards get a faint top light. */
:root{--r:16px;--r-lg:16px;--card-edge:0 0 0 1px rgba(250,247,239,.07);
  --card-lift:0 1px 0 rgba(250,247,239,.05) inset,0 18px 40px -22px rgba(0,0,0,.75);
  --paper-lift:0 1px 2px rgba(0,0,0,.25),0 22px 44px -24px rgba(0,0,0,.8)}
.fmt,.system,.crew,.card,.assume,.f100-box,.en-screen,.wl-way{border-radius:var(--r-lg)}
.fmt,.system,.crew,.card,.assume{box-shadow:var(--card-edge),var(--card-lift)}
.game,.gsheet{border-radius:var(--r-lg);box-shadow:var(--paper-lift)}
.wl-way{box-shadow:none}
.tk-in{border-radius:calc(var(--r-lg) + 2px)}
@media (hover:hover){
  a.card,a.game,a.crew,.game{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
  a.card:hover,a.crew:hover,.game:hover{transform:translateY(-3px)}
}
/* notices ("Preview", "Not live yet"): a quiet solid card, not a dashed box */
.strip{border:0 !important;border-radius:var(--r-lg);background:var(--bg-2);box-shadow:var(--card-edge)}
.qf-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px !important}
.qf-share span{font-weight:700;color:var(--cream);font-variant-numeric:tabular-nums;padding:10px 14px;border-radius:10px;box-shadow:var(--card-edge);background:var(--bg-2)}

/* --- overlap fixes ------------------------------------------------------------ */
/* guarantee card: the seal sits in the top-right corner, clear of the text */
.gsheet .gs-head{justify-content:flex-end}
.gsheet .gs-head .seal{margin:-52px -14px 4px 0}
/* footer sign-off: "play together." fits on one line at any phone width */
@media (max-width:699px){.signoff{font-size:min(74px,11.4vw);line-height:.95}}
/* footer legal links: real line height so wrapped links don't stack on each other */
.legal{line-height:1.6}
.legal > *{display:flex;flex-wrap:wrap;gap:4px 16px}
/* small phones: logo and header button keep a gap */
@media (max-width:359px){
  .nav .mark img:last-child{height:16px}
  .nav .mark{gap:6px}
  .nav .btn.sm{padding-left:12px;padding-right:12px}
}

/* photos are baked to black and white at build time */
.bw{filter:none}