/* ==========================================================================
   SPORTSHUB-KE DESIGN SYSTEM
   Warm, clear and bright: white and warm paper carry the page, the four brand
   colours give each sport and role its identity, and real photography does the work.
   Type is measured, never shouting. Black is kept for the footer only.
   Quicksand everywhere. No gradients. No decorative bubbles.
   ========================================================================== */
:root{
  --blue:#1FB6F5;--green:#3DB54A;--magenta:#EC1C72;--yellow:#FFB522;
  --blue-t:#E6F7FE;--green-t:#ECF8EE;--magenta-t:#FDECF3;--yellow-t:#FFF6E3;
  --blue-d:#0A7FB0;--green-d:#26812F;--magenta-d:#B80F55;--yellow-d:#B86400;
  --bk:#0B0B0D;--bk-2:#151518;--bk-3:#26262B;--bk-4:#3A3A41;--wh:#FFFFFF;--navy:#0B0B0D;
  --ink:#1A1D23;--ink-2:#4A4F59;--ink-3:#6F7480;--ink-4:#A0A4AC;
  --line:#ECE7DF;--line-2:#F3EFE9;--soft:#FBF6EE;--soft-2:#FDFAF5;--paper:#FFFAF2;--white:#FFFFFF;
  --r:12px;--r-lg:18px;--r-img:14px;
  --gut:clamp(16px,4vw,40px);--wrap:1200px;--narrow:760px;--head:72px;
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --fast:200ms var(--ease);--med:420ms var(--ease);--slow:900ms var(--ease);
  --c:var(--blue);--ct:var(--blue-t);--cd:var(--blue-d);--con:#fff;
  --sec:clamp(64px,8vw,112px);
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .2s ease both}
::view-transition-new(root){animation:vtIn .45s var(--ease) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
#main{overflow-x:clip}
body{margin:0;background:var(--wh);color:var(--ink);font-family:'Quicksand',system-ui,sans-serif;font-size:16px;line-height:1.65;font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;overflow-x:clip}
img,svg,video{max-width:100%}
img{display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.02em}
h3{font-size:1.12rem;letter-spacing:-.01em}h4{font-size:1rem}
p{margin:0;text-wrap:pretty}ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;background:var(--bk);color:#fff;padding:8px 14px;z-index:999;border-radius:8px}.skip:focus{top:12px}
svg.i{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.18em}
#bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--c,var(--blue));z-index:60;transition:background .4s}

/* ----- Colour identities: one colour per sport or role ----- */
.c-blue{--c:var(--blue);--ct:var(--blue-t);--cd:var(--blue-d);--con:#fff}
.c-green{--c:var(--green);--ct:var(--green-t);--cd:var(--green-d);--con:#fff}
.c-magenta{--c:var(--magenta);--ct:var(--magenta-t);--cd:var(--magenta-d);--con:#fff}
.c-yellow{--c:var(--yellow);--ct:var(--yellow-t);--cd:var(--yellow-d);--con:var(--ink)}

/* ----- Layout ----- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.wrap.narrow{max-width:calc(var(--narrow) + var(--gut)*2)}
.section{padding:var(--sec) 0}.section.tight{padding:clamp(40px,5vw,64px) 0}
.soft{background:var(--paper)}
.dk{background:var(--bk);color:#fff}.dk .muted,.dk .lede,.dk .faint{color:#A7AAB1}
.stack{display:flex;flex-direction:column;gap:16px}.stack.sm{gap:8px}.stack.lg{gap:28px}.stack.xl{gap:48px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.row.sm{gap:6px}.row.top{align-items:flex-start}.row.nowrap{flex-wrap:nowrap}
.between{justify-content:space-between}.grow{flex:1;min-width:0}
.grid{display:grid;gap:24px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.g-5-7{grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px)}.g-7-5{grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,80px)}
.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}.small{font-size:.88rem}.xs{font-size:.78rem}.strong{font-weight:700}.semi{font-weight:600}
.tar{text-align:right}.nums{font-variant-numeric:tabular-nums}.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hide{display:none!important}.only-m{display:none}
.mt{margin-top:16px}.mt-lg{margin-top:40px}.mb{margin-bottom:16px}
.lede{font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;color:var(--ink-2);max-width:56ch;font-weight:500}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--cd);letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:'';width:18px;height:3px;background:var(--c);border-radius:2px;flex:none}
.dk .eyebrow{color:#A7AAB1}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head .stack{gap:14px;max-width:720px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--cd,var(--ink));position:relative;padding-bottom:3px;transition:gap var(--fast)}
.link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform-origin:right;transition:transform .5s var(--ease)}
.link:hover{gap:12px}.link:hover::after{transform:scaleX(0)}
.dk .link{color:#fff}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.lanes{display:inline-flex;gap:3px;align-items:center}.lanes i{display:block;width:14px;height:3px;border-radius:2px}.lanes i:nth-child(1){background:var(--blue)}.lanes i:nth-child(2){background:var(--green)}.lanes i:nth-child(3){background:var(--magenta)}.lanes i:nth-child(4){background:var(--yellow)}

/* ----- Buttons: bright pills in the brand colours. Never black. ----- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 24px;border-radius:999px;border:1.5px solid transparent;background:var(--magenta);color:#fff;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:transform var(--fast),background var(--fast),color var(--fast),border-color var(--fast),box-shadow var(--fast);max-width:100%}
.btn::after{content:'';position:absolute;top:0;bottom:0;left:-75%;width:45%;background:rgba(255,255,255,.22);transform:skewX(-20deg);pointer-events:none;z-index:-1;transition:left 0s}
.btn:hover::after{left:135%;transition:left .75s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(236,28,114,.65)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
/* Busy: the label hides and a spinner turns in its place, so a press always shows it was heard. */
.btn.is-busy{cursor:progress;transform:none;box-shadow:none;color:transparent!important;pointer-events:none;--spin:#fff}
.btn.is-busy>*{visibility:hidden}
.btn.is-busy::before{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid var(--spin);border-right-color:transparent;animation:spin .7s linear infinite;z-index:1}
.btn-ghost.is-busy,.btn-white.is-busy,.btn-yellow.is-busy,.btn-google.is-busy,.btn-bad.is-busy{--spin:var(--ink)}
.dk .btn-ghost.is-busy,.btn-ghost.on-dark.is-busy{--spin:#fff}
.btn-sm.is-busy::before{width:16px;height:16px;margin:-8px 0 0 -8px;border-width:2px}
.btn svg.i{transition:transform .35s var(--ease)}.btn:hover svg.i{transform:translateX(3px)}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{box-shadow:0 10px 24px -8px rgba(31,182,245,.7)}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{box-shadow:0 10px 24px -8px rgba(61,181,74,.7)}
.btn-magenta{background:var(--magenta);color:#fff}.btn-magenta:hover{box-shadow:0 10px 24px -8px rgba(236,28,114,.6)}
.btn-yellow{background:var(--yellow);color:var(--ink)}.btn-yellow:hover{box-shadow:0 10px 24px -8px rgba(255,181,34,.75)}
.btn-c{background:var(--c);color:var(--con)}.btn-c:hover{box-shadow:0 10px 24px -10px var(--c)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}.btn-ghost::after{background:rgba(11,11,13,.04)}.btn-ghost:hover{border-color:var(--c,var(--magenta));color:var(--cd,var(--magenta-d));box-shadow:none}
.btn-white{background:#fff;color:var(--ink)}.btn-white:hover{box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}.btn-white::after{background:rgba(11,11,13,.06)}
.dk .btn-ghost,.btn-ghost.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}.dk .btn-ghost:hover,.btn-ghost.on-dark:hover{border-color:#fff}
.btn-bad{background:transparent;border-color:var(--magenta);color:var(--magenta-d)}.btn-bad:hover{background:var(--magenta);color:#fff}
.btn-sm{min-height:36px;padding:6px 15px;font-size:11.5px;letter-spacing:.05em}
.btn-block{width:100%}
.btn-google{background:#fff;color:var(--ink);border-color:var(--line);font-weight:700;text-transform:none;letter-spacing:0;font-size:14.5px}.btn-google:hover{border-color:var(--blue);box-shadow:none}.btn-google .g{width:18px;height:18px;flex:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;position:relative;transition:background var(--fast);flex:none}
.icon-btn:hover{background:rgba(127,127,135,.14)}
.count{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;background:var(--magenta);color:#fff;font-size:.66rem;font-weight:700;line-height:17px;text-align:center;border-radius:9px;animation:countPop .5s var(--ease)}
@keyframes countPop{from{transform:scale(0)}60%{transform:scale(1.25)}}

/* ----- Status ----- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2);white-space:nowrap}
.badge.ok{background:var(--green-t);color:var(--green-d)}.badge.warn{background:var(--yellow-t);color:var(--yellow-d)}.badge.bad{background:var(--magenta-t);color:var(--magenta-d)}.badge.info{background:var(--blue-t);color:var(--blue-d)}
.tag{display:inline-block;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:6px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tag.sim,.tag.demo{border-color:var(--yellow);background:var(--yellow-t);color:var(--bk)}
.sport-pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:3px 11px 3px 9px;border-radius:999px;background:var(--ct);color:var(--ink);white-space:nowrap}
.sport-pill svg{color:var(--cd)}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700}.verified svg{color:var(--green)}

/* ----- Forms ----- */
.form{display:grid;gap:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>label,.field>.lab{font-size:13px;font-weight:700;color:var(--ink)}
.field .req{color:var(--magenta)}
.input,.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select,.field textarea{width:100%;min-height:50px;padding:12px 15px;background:#fff;border:1.5px solid var(--line);border-radius:10px;font-weight:500;font-size:15px;transition:border-color var(--fast),box-shadow var(--fast),background var(--fast)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#CFCFCA}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,182,245,.18)}
.field input[readonly]{background:var(--soft-2);color:var(--ink-2)}
/* Password with a show/hide eye */
.pw{position:relative;display:block}
.field .pw input{padding-right:50px!important}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border-radius:9px;color:var(--ink-3);cursor:pointer;transition:color var(--fast),background var(--fast)}
.pw-eye:hover{color:var(--ink);background:var(--soft-2)}
.pw-eye:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.pw-eye[aria-pressed=true]{color:var(--blue)}
.pw-eye .i{width:19px;height:19px}
.hint{font-size:.8rem;color:var(--ink-3);line-height:1.45}
.err{font-size:.86rem;color:var(--magenta-d);font-weight:600;background:var(--magenta-t);padding:11px 14px;border-radius:10px}
.notice{padding:14px 16px;border-radius:10px;background:var(--ct,var(--soft));font-size:.9rem;border-left:3px solid var(--c,var(--ink-3));line-height:1.55}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{position:relative;display:inline-flex}
.check input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.check span{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:.86rem;font-weight:600;background:#fff;transition:all var(--fast)}
.check span{border-radius:999px!important}.check:hover span{border-color:var(--blue)}
.check input:checked+span{background:var(--blue-t);color:var(--blue-d);border-color:var(--blue)}
.check input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;cursor:pointer}.tick input{margin:4px 0 0;width:18px;height:18px;accent-color:var(--magenta);flex:none}
.filepick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.filepick img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.steps-mini{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-bottom:32px;overflow-x:auto;counter-reset:st}
.steps-mini li{min-width:90px;padding:12px 0 0;font-size:.82rem;font-weight:700;color:var(--ink-4);border-top:2px solid var(--line);transition:color var(--med),border-color var(--med)}
.steps-mini li.on{color:var(--ink);border-color:var(--magenta)}.steps-mini li.done{color:var(--ink-2);border-color:var(--green)}
.geo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1.5px dashed var(--line);border-radius:10px}
.geo .gstat{font-size:.84rem;color:var(--ink-2)}.geo.ok{border-style:solid;border-color:var(--green);background:var(--green-t)}

/* ----- Data display ----- */
.tbl-wrap{overflow-x:auto;position:relative}
.tbl th{font-size:.72rem;font-weight:700;color:var(--ink-3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.06em;text-transform:uppercase}
.tbl td{padding:14px;border-bottom:1px solid var(--line-2);vertical-align:middle;font-size:.92rem}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--fast)}.tbl tbody tr:hover{background:var(--soft-2)}
.tbl td.act{text-align:right;white-space:nowrap}.tbl td.act .btn+.btn,.tbl td.act .btn+a{margin-left:6px}
/* Figures: one calm band of numbers separated by hairlines, never a wall of coloured cards. */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0 8px}
.metric{padding:20px 22px 18px 0;position:relative;display:flex;flex-direction:column;gap:4px}
.metric+.metric{padding-left:22px;border-left:1px solid var(--line)}
.metric .v{display:block;font-size:clamp(1.3rem,1.8vw,1.65rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.metric .l{font-size:.8rem;color:var(--ink-3);font-weight:600}
.dk .metrics{border-color:var(--bk-3)}.dk .metric+.metric{border-color:var(--bk-3)}.dk .metric .l{color:#A7AAB1}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;font-size:.92rem;margin:0}.kv dt{color:var(--ink-3)}.kv dd{margin:0;font-weight:600}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.2vw,26px)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.panel-head h3{font-weight:600;font-size:1.06rem}
.panel-head a{font-size:.84rem;font-weight:700;color:var(--ink-2);transition:color var(--fast)}.panel-head a:hover{color:var(--ink)}
.panel .tbl th:first-child,.panel .tbl td:first-child{padding-left:0}.panel .tbl th:last-child,.panel .tbl td:last-child{padding-right:0}
.lines>*{border-bottom:1px solid var(--line-2);padding:13px 0}.lines>*:last-child{border-bottom:0}.lines>*:first-child{padding-top:2px}
.line-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left}
.line-row:hover .t{color:var(--cd,var(--ink))}.t{transition:color var(--fast)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--ct,var(--line-2));color:var(--bk);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.84rem;flex:none;overflow:hidden;object-fit:cover}
.avatar.sq{border-radius:10px}.avatar.lg{width:96px;height:96px;font-size:1.5rem}.avatar.sm{width:32px;height:32px;font-size:.72rem}
.avatars{display:flex}.avatars .avatar{margin-left:-9px;border:2px solid #fff}.avatars .avatar:first-child{margin-left:0}
.tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:24px;padding:4px;scrollbar-width:none;background:var(--soft);border-radius:12px;width:max-content;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 16px;font-weight:600;font-size:13.5px;border-radius:9px;color:var(--ink-2);white-space:nowrap;transition:background var(--fast),color var(--fast),box-shadow var(--fast)}
.tabs{border-radius:999px}.tab{border-radius:999px}.tab:hover{color:var(--ink)}.tab.on{background:#fff;color:var(--magenta-d);font-weight:700;box-shadow:0 1px 3px rgba(11,11,13,.12)}
.bar{height:4px;background:var(--line-2);border-radius:2px;overflow:hidden}.bar i{display:block;height:100%;background:var(--c,var(--ink));border-radius:2px;transition:width 1s var(--ease)}
.empty{padding:48px 24px;text-align:center;color:var(--ink-2);border:1px dashed var(--line);border-radius:var(--r-lg)}
.empty svg{width:26px;height:26px;color:var(--ink-3);margin:0 auto 12px;display:block}
.empty h4{margin-bottom:4px;color:var(--ink);font-weight:600;font-size:1.05rem}
.dk .empty{border-color:var(--bk-3);color:#A7AAB1}.dk .empty h4{color:#fff}
.skel{background:var(--line-2);border-radius:10px;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--magenta);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ----- Eight-session tracker: one marker per session ----- */
.meter{display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:6px}
.cred{height:44px;border-radius:8px;display:flex;align-items:flex-end;justify-content:flex-start;padding:6px 8px;font-size:.72rem;font-weight:700;position:relative;transition:background var(--med),color var(--med),box-shadow var(--med)}
.cred::after{content:attr(data-n);font-variant-numeric:tabular-nums}
.cred.free{background:var(--green);color:#fff}
.cred.held{background:#fff;color:var(--bk);box-shadow:inset 0 0 0 2px var(--yellow)}
.cred.held::before{content:'';position:absolute;right:8px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--yellow);animation:heldPulse 1.8s ease-in-out infinite}
@keyframes heldPulse{50%{transform:scale(1.7);opacity:.35}}
.cred.used{background:var(--line-2);color:var(--ink-4)}
.cred.used::before{content:'';position:absolute;right:9px;top:9px;width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.meter.pop .cred{animation:credIn .7s var(--ease) backwards}
@keyframes credIn{from{transform:scaleY(.2);transform-origin:bottom;opacity:0}}
.dk .cred.used{background:var(--bk-3);color:#7C7F87}.dk .cred.held{background:transparent;color:#fff}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-2)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.dk .legend{color:#A7AAB1}
.legend .lg-free{background:var(--green)}.legend .lg-held{background:#fff;box-shadow:inset 0 0 0 2px var(--yellow)}.legend .lg-used{background:var(--line)}
.sess .cred.used{background:#fff;color:var(--ink-4)}.sess .cred.held{background:#fff}
.big-num{font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums}

/* ----- Fixture rows: the common way a game appears ----- */
.board{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.fx{display:grid;grid-template-columns:96px minmax(0,1fr) 170px 110px;gap:20px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);position:relative;transition:background var(--fast),padding var(--med)}
.fx::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--c);transition:width .6s var(--ease)}
.fx:hover{background:var(--soft-2);padding-left:14px}.fx:hover::before{width:100%}
.fx .when b{display:block;font-size:1.2rem;font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.fx .when span{font-size:.78rem;color:var(--ink-3);font-weight:600}
.fx .ttl{font-weight:600;font-size:1.04rem;line-height:1.3}
.fx .meta{font-size:.84rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px}
.fx .meta span{display:inline-flex;gap:5px;align-items:center}.fx .meta svg{color:var(--ink-3)}
.why{font-size:.78rem;color:var(--ink-3);margin-top:4px}
.fit{font-size:.78rem;font-weight:700;color:var(--ink);background:var(--ct);padding:4px 9px;border-radius:6px;white-space:nowrap}
.cards3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:40px 28px}
.game-card{display:flex;flex-direction:column;color:var(--ink)}
.game-card .gc-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft);border-radius:var(--r-img)}
.game-card .gc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.game-card:hover .gc-img img{transform:scale(1.05)}
.game-card .gc-sport{position:absolute;left:12px;top:12px}.game-card .gc-sport .sport-pill{background:#fff}
.game-card .gc-date{position:absolute;right:12px;top:12px;background:#fff;border-radius:6px;padding:6px 10px;text-align:center;line-height:1.1;font-size:.7rem;font-weight:700;color:var(--ink-2)}
.game-card .gc-date b{display:block;font-size:1.15rem;color:var(--ink)}
.game-card .gc-b{padding:16px 0 0;display:flex;flex-direction:column;gap:8px;flex:1}
.game-card h3{font-size:1.1rem}
.game-card .gc-meta{font-size:.84rem;color:var(--ink-2);display:flex;flex-direction:column;gap:3px}
.game-card .gc-meta span{display:flex;align-items:center;gap:7px}
.game-card .gc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}

/* ----- Public chrome ----- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--ink);height:var(--head);background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:height .5s var(--ease),border-color .5s,box-shadow .5s}
.site-head.sm{height:62px;border-color:var(--line);box-shadow:0 6px 24px -18px rgba(26,29,35,.4)}
.site-head .wrap{display:flex;align-items:center;gap:clamp(10px,2.4vw,34px);height:100%}
/* The logo is always the artwork itself: the light version on white, the dark version on black. */
.brand{display:inline-flex;align-items:center;flex:none;line-height:0}
.brand img{height:46px;width:auto;max-width:none;transition:height .5s var(--ease)}
.site-head.sm .brand img{height:40px}
.side .brand img{height:42px}.foot-grid .brand img{height:64px}.drawer .brand img{height:38px}
.nav{display:flex;gap:clamp(14px,2vw,30px);flex:1;min-width:0;margin-left:10px}
.nav a{font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap;position:relative;padding:6px 0;transition:color var(--fast)}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:currentColor;transition:right .5s var(--ease)}
.nav a:hover,.nav a.on{color:var(--magenta-d)}.nav a:hover::after,.nav a.on::after{right:0}
.head-acts{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.head-acts .btn{min-height:38px;padding:6px 18px;font-size:11.5px}
.burger{display:none;width:44px;height:44px}
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:110;opacity:0;pointer-events:none;transition:opacity .4s}
.drawer-scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(90vw,400px);background:#fff;color:var(--ink);z-index:120;transform:translateX(102%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:0 10px calc(24px + env(safe-area-inset-bottom,0px))}
.drawer.open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.drawer .d-top{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-bottom:1px solid var(--line);min-height:64px;flex:none}
.drawer .d-nav{display:flex;flex-direction:column;padding:12px 0;flex:1}
.drawer .d-nav a,.drawer .d-nav button{display:flex;align-items:center;gap:12px;padding:13px 14px;font-size:16px;font-weight:700;border-radius:12px;color:var(--ink-2);width:100%;text-align:left;transition:background var(--fast),color var(--fast),padding var(--med)}
.drawer.open .d-nav a{animation:seqIn .6s var(--ease) backwards}
.drawer .d-nav a:hover,.drawer .d-nav a.on{background:var(--magenta-t);color:var(--magenta-d);padding-left:20px}
.drawer h6{font-size:.7rem;color:var(--ink-3);margin:16px 14px 4px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.drawer .btn-ghost.on-dark{background:#fff;color:var(--ink);border-color:var(--line)}
.drawer .d-acts{display:flex;flex-direction:column;gap:10px;padding:16px 12px 0;border-top:1px solid var(--line);flex:none}
html.dlock,html.dlock body{overflow:hidden}
.site-foot{background:var(--bk);color:#A7AAB1;border-top:4px solid var(--yellow);padding:clamp(56px,7vw,88px) 0 calc(40px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:2.2fr repeat(4,1fr);gap:40px}
.foot-grid h5{font-size:.72rem;font-weight:700;color:#fff;margin-bottom:16px;letter-spacing:.14em;text-transform:uppercase}
.foot-grid a:not(.brand){display:block;font-size:.92rem;padding:4px 0;transition:color var(--fast)}.foot-grid a:not(.brand):hover{color:#fff}
.foot-grid .brand{color:#fff}
.foot-end{margin-top:56px;padding-top:24px;border-top:1px solid var(--bk-3);font-size:.82rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.up{position:fixed;right:20px;bottom:24px;z-index:40;width:46px;height:46px;border-radius:50%;background:var(--magenta);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;translate:0 16px;transition:opacity .5s,translate .5s var(--ease),visibility 0s .5s,background var(--fast)}
.up.show{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.up:hover{background:var(--magenta-d)}
.up svg{width:18px;height:18px}

/* ----- Motion system -----
   Reveals run once, on entry. Directions: .u up, .l from the left, .r from the right,
   .z subtle scale, .f fade. Stagger with --d. Headlines reveal line by line with .lnr. */
.rv{opacity:0;transition:opacity 1s var(--ease),transform 1.1s var(--ease),clip-path 1.2s var(--ease);transition-delay:var(--d,0s)}
.rv.l{transform:translateX(-48px)}.rv.r{transform:translateX(48px)}.rv.u{transform:translateY(40px)}.rv.z{transform:scale(.94)}.rv.f{transform:none}
.rv.in{opacity:1;transform:none}
.lnr{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.lnr>span{display:inline-block;transform:translateY(108%);transition:transform 1.1s var(--ease) var(--d,0s)}
.in .lnr>span,.lnr.in>span{transform:none}
h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
h1 .ln>span{display:inline-block;transform:translateY(105%);animation:up 1.1s var(--ease) forwards;animation-delay:calc(.15s + var(--li,0)*.12s)}
@keyframes up{to{transform:none}}
/* Image reveal: a curtain lifts while the photograph settles from a slight zoom. */
.img-rv{overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease-io) var(--d,0s)}
.img-rv img{transform:scale(1.18);transition:transform 2s var(--ease) var(--d,0s)}
.img-rv.in{clip-path:inset(0 0 0 0)}.img-rv.in img{transform:scale(1)}
.img-rv.side{clip-path:inset(0 100% 0 0)}.img-rv.side.in{clip-path:inset(0 0 0 0)}
/* SVG strokes draw themselves when they enter. */
.draw-in path,.draw-in line,.draw-in polyline,.draw-in circle,.draw-in rect{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.8s var(--ease-io) var(--d,0s)}
.draw-in.in path,.draw-in.in line,.draw-in.in polyline,.draw-in.in circle,.draw-in.in rect{stroke-dashoffset:0}
.page-enter{animation:pageIn .6s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}}
.seq{animation:seqIn .7s var(--ease) backwards;animation-delay:calc(var(--i,0)*50ms)}
@keyframes seqIn{from{opacity:0;transform:translateY(14px)}}
.swap-out{opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.swap-in>*{animation:seqIn .6s var(--ease) backwards}
.swap-in>*:nth-child(2){animation-delay:.05s}.swap-in>*:nth-child(3){animation-delay:.1s}.swap-in>*:nth-child(4){animation-delay:.15s}.swap-in>*:nth-child(5){animation-delay:.2s}.swap-in>*:nth-child(6){animation-delay:.25s}.swap-in>*:nth-child(n+7){animation-delay:.3s}
/* Retired decoration: the old floating shapes are switched off everywhere. */
.blob,.orbit,.rays,.waves,.orb,.sf-blob{display:none!important}
.note{font-weight:700;font-size:clamp(14px,1.5vw,18px);line-height:1.15}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
/* Hero: warm paper, a measured headline and a mosaic of real photographs. */
.hx{position:relative;background:var(--paper);color:var(--ink);overflow:hidden}
.hx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;padding-top:calc(var(--head) + clamp(36px,5vw,64px));padding-bottom:clamp(36px,5vw,56px)}
.hx-kick{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta-d);margin-bottom:20px;opacity:0;animation:fadeUp 1s var(--ease) .1s forwards}
.hx h1{font-size:clamp(2.2rem,3.6vw,3.1rem);line-height:1.08;letter-spacing:-.025em;font-weight:700;max-width:12ch}
.hx h1 em{font-style:normal;color:var(--magenta);position:relative;display:inline-block}
.hx h1 .uline{position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.2em;overflow:visible}
.hx h1 .uline path{fill:none;stroke:var(--yellow);stroke-width:6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:drawU 1.4s var(--ease-io) 1.1s forwards}
@keyframes drawU{to{stroke-dashoffset:0}}
.hx-p{color:var(--ink-2);font-size:clamp(15.5px,1.2vw,17px);line-height:1.65;max-width:46ch;margin-top:20px;opacity:0;animation:fadeUp 1s var(--ease) .6s forwards}
.hx-find{margin-top:28px;opacity:0;animation:fadeUp 1s var(--ease) .8s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.srch{display:flex;align-items:center;gap:4px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 6px 6px 22px;width:min(100%,540px);color:var(--ink);box-shadow:0 14px 34px -24px rgba(26,29,35,.45);transition:box-shadow var(--fast),border-color var(--fast)}
.srch:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,182,245,.18)}
.srch select,.srch input{flex:1;min-width:0;border:0;background:none;padding:11px 4px;font-size:14.5px;font-weight:700;outline:none;cursor:pointer}
.srch .sep{width:1px;height:24px;background:var(--line);flex:none;margin:0 8px}
.srch .go{position:relative;overflow:hidden;isolation:isolate;height:44px;padding:0 22px;border-radius:999px;background:var(--magenta);color:#fff;display:flex;align-items:center;gap:8px;justify-content:center;flex:none;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;transition:background var(--fast),transform var(--fast)}
.srch .go:hover{background:var(--magenta-d)}.srch .go svg{transition:transform .35s var(--ease)}.srch .go:hover svg{transform:translateX(3px)}
.hx-alt{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:18px;font-size:14px;font-weight:700}
.hx-alt a{color:var(--ink-2);transition:color var(--fast)}.hx-alt a:hover{color:var(--magenta-d)}
.hx-alt a b{color:var(--blue-d)}
.hx-sponsor{font-size:12px;color:var(--ink-3);margin-top:14px}.hx-sponsor b{color:var(--ink)}
/* Photo mosaic: one tall photograph and two smaller ones, each revealed by a curtain. */
.hx-art{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:clamp(380px,40vw,540px)}
.hx-art figure{margin:0;position:relative;border-radius:20px;overflow:hidden;background:var(--soft);clip-path:inset(100% 0 0 0);animation:curtain 1.3s var(--ease-io) forwards}
.hx-art figure:nth-child(1){grid-row:1/3;animation-delay:.15s}
.hx-art figure:nth-child(2){animation-delay:.35s}.hx-art figure:nth-child(3){animation-delay:.5s}
.hx-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:settle 2.4s var(--ease) .15s forwards}
@keyframes curtain{to{clip-path:inset(0 0 0 0)}}
@keyframes settle{to{transform:scale(1)}}
.hx-art figcaption{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--ink);border-radius:999px;padding:7px 14px 7px 12px;font-size:12px;font-weight:700;display:flex;gap:8px;align-items:center;max-width:calc(100% - 24px)}
.hx-art figcaption i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
/* Live strip of real upcoming games, under the hero. */
.hx-live{position:relative;border-top:1px solid var(--line);background:#fff}
.hx-live .wrap{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));align-items:stretch}
.hx-live .lbl{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-d);padding:18px 0}
.hx-live .lbl i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:heldPulse 1.8s ease-in-out infinite}
.hx-live a{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:16px 22px;border-left:1px solid var(--line);transition:background var(--fast);min-width:0;position:relative}
.hx-live a::before{content:'';position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.hx-live a:hover{background:var(--soft-2)}.hx-live a:hover::before{transform:scaleX(1)}
.hx-live a small{font-size:12px;color:var(--ink-3);font-weight:700;display:flex;gap:8px;align-items:center}
.hx-live a small b{color:var(--cd);font-weight:700}
.hx-live a span{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Section index label: 01, 02 ... gives the long page a clear rhythm. */
.idx{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.idx b{font-variant-numeric:tabular-nums;color:var(--cd,var(--magenta))}
.idx::after{content:'';flex:0 0 40px;height:2px;border-radius:2px;background:var(--c,var(--magenta));transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease) .2s}
.idx.in::after{transform:scaleX(1)}
h2+.lede,h2+p.lede{margin-top:16px}
.stack>.link,.venue-meta>.link{align-self:flex-start}
.hd{max-width:18ch}.hd.wide{max-width:24ch}
.tint-blue{background:var(--blue-t)}.tint-yellow{background:var(--yellow-t)}.tint-green{background:var(--green-t)}.tint-magenta{background:var(--magenta-t)}

/* 01 Sports: a mosaic of photo tiles. Each tile carries the sport's colour and live numbers. */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,17vw,230px);gap:14px}
.tile{position:relative;border-radius:18px;overflow:hidden;background:var(--soft);display:block;color:var(--ink);isolation:isolate}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile .tl{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:10px 12px 10px 14px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile .tl::before{content:'';width:4px;align-self:stretch;border-radius:3px;background:var(--c);flex:none}
.tile .tl>span{flex:1;min-width:0}
.tile .tl b{display:block;font-size:1rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tl small{display:block;font-size:12px;color:var(--ink-3);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tl .arw{width:32px;height:32px;border-radius:50%;background:var(--ct);color:var(--cd);display:flex;align-items:center;justify-content:center;flex:none;transition:background var(--fast),color var(--fast),transform .4s var(--ease)}
.tile:hover .tl{transform:translateY(-4px);box-shadow:0 14px 30px -16px rgba(0,0,0,.45)}
.tile:hover .tl .arw{background:var(--c);color:var(--con);transform:rotate(-45deg)}
.tile.big .tl{left:18px;right:auto;bottom:18px;max-width:min(380px,calc(100% - 36px));padding:14px 14px 14px 18px}
.tile.big .tl b{font-size:1.35rem}
.tile.big .tl p{font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:4px;white-space:normal}
.tile.more{background:var(--magenta);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:20px}
.tile.more b{font-size:1.25rem;line-height:1.2}
.tile.more span{font-size:13px;font-weight:600;opacity:.9}
.tile.more .arw{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--magenta-d);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease)}
.tile.more:hover .arw{transform:translateX(4px)}
.tiles-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;align-items:center}
.tiles-foot span{font-size:13px;font-weight:700;color:var(--ink-3);margin-right:4px}
.tiles-foot a{font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;transition:border-color var(--fast),color var(--fast)}
.tiles-foot a:hover{border-color:var(--c);color:var(--cd)}

/* 02 Games: a fixture board with a sport filter. */
.gb-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filt{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink-2);border:1.5px solid var(--line);background:#fff;transition:all var(--fast)}
.filt:hover{border-color:var(--c,var(--magenta));color:var(--ink)}
.filt[aria-pressed=true]{background:var(--c,var(--magenta));border-color:var(--c,var(--magenta));color:var(--con,#fff)}
.filt[data-s=""]{--c:var(--magenta);--con:#fff}
.filt .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:0}
.filt[aria-pressed=true] .dot{background:currentColor}
.views{display:flex;gap:4px;background:#fff;border:1px solid var(--line);padding:4px;border-radius:999px}
.views a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink-2);transition:all var(--fast)}
.views a:hover{color:var(--ink)}.views a.on{background:var(--blue-t);color:var(--blue-d)}
.gb{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.gr{display:grid;grid-template-columns:110px minmax(0,1.6fr) minmax(0,1fr) 150px 112px;gap:20px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line-2);position:relative;transition:background var(--fast)}
.gr:last-child{border-bottom:0}
.gr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);transform:scaleY(0);transition:transform .5s var(--ease)}
.gr:hover{background:var(--soft-2)}.gr:hover::before{transform:scaleY(1)}
.gr .d b{display:block;font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cd)}
.gr .d span{display:block;font-size:.78rem;font-weight:700;color:var(--ink-3);margin-top:5px}
.gr .t{font-weight:700;font-size:1rem;line-height:1.3}
.gr .t small{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-3);font-weight:600;margin-top:4px;flex-wrap:wrap}
.gr .t small i{width:8px;height:8px;border-radius:50%;background:var(--c);display:inline-block}
.gr .v{font-size:.88rem;color:var(--ink-2);min-width:0;font-weight:600}.gr .v span{display:block;font-size:.78rem;color:var(--ink-3);font-weight:500}
.gr .s{font-size:.8rem;font-weight:700;color:var(--ink-2)}.gr .s .bar{margin-top:7px}
.gr .go{justify-self:end}
.gr .vm{display:none}
.gb-empty{padding:40px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

/* 03 Teams: a photograph beside the story, then a clean index of sides. */
.tm-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center}
.tm-split .pic{aspect-ratio:16/10;border-radius:20px}
.tm-split p{color:var(--ink-2);max-width:42ch;margin-top:16px}
.teams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,48px)}
.team{display:flex;flex-direction:column;gap:16px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;position:relative;overflow:hidden;transition:transform var(--med),box-shadow var(--med),border-color var(--fast)}
.team::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.team:hover{transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(26,29,35,.45);border-color:var(--c)}
.team .crest{width:52px;height:52px;border-radius:14px;background:var(--ct);color:var(--cd);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;overflow:hidden}
.team .crest img{width:100%;height:100%;object-fit:cover}
.team h3{font-size:1.1rem}
.team .loc{font-size:.84rem;color:var(--ink-3);margin-top:3px}
.team .rec{display:flex;gap:24px;font-size:.76rem;color:var(--ink-3);font-weight:700}
.team .rec b{display:block;font-size:1.15rem;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.team .need{font-size:.84rem;color:var(--ink-2);display:flex;gap:7px;align-items:center;font-weight:600}
.team .need svg{color:var(--cd)}

/* 04 Coaches: credential-first profiles beside a training photograph. */
.coach-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.coach-split .lede{margin-top:16px}
.coach-pic{aspect-ratio:16/10;border-radius:18px;margin-top:28px}
.trust{display:flex;flex-direction:column;gap:0;margin-top:24px}
.trust div{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:12px 0;font-size:.9rem;color:var(--ink-2);align-items:start}
.trust svg{width:20px;height:20px;color:var(--cd)}
.trust div>svg{box-sizing:content-box;padding:8px;border-radius:10px;background:var(--ct)}
.trust b{display:block;color:var(--ink);font-weight:700}
.coaches{display:flex;flex-direction:column;gap:12px}
.coach{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:transform var(--med),border-color var(--fast)}
.coach:hover{transform:translateX(6px);border-color:var(--c)}
.coach .avatar{width:64px;height:64px;font-size:1.1rem;border-radius:50%}
.coach h3{font-size:1.05rem}
.coach .q{font-size:.84rem;color:var(--ink-2);margin-top:3px}
.coach .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.coach .yrs{text-align:right;font-size:.76rem;color:var(--ink-3);font-weight:700}.coach .yrs b{display:block;font-size:1.4rem;color:var(--cd);font-weight:700;line-height:1}

/* 05 Facilities: big photograph, honest availability. */
.venue{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center}
.venue .pic{aspect-ratio:16/11;border-radius:20px}
.venue-meta{display:flex;flex-direction:column;gap:14px}
.venue-meta h3{font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.02em}
.venue-meta dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:6px 0 0;border-top:1px solid var(--line);padding-top:16px;font-size:.9rem}
.venue-meta dt{color:var(--ink-3)}.venue-meta dd{margin:0;font-weight:700}
.venues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.vn{display:flex;flex-direction:column;gap:10px}
.vn .pic{aspect-ratio:4/3;border-radius:16px}
.vn h4{font-size:.98rem;font-weight:700}.vn span{font-size:.82rem;color:var(--ink-3)}

/* 06 Marketplace: a bright lead photograph and the products beside it. */
.shop{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,48px);align-items:stretch}
.shop-lead{position:relative;border-radius:20px;overflow:hidden;min-height:460px;display:flex;align-items:flex-end;padding:16px}
.shop-lead .img-rv{position:absolute;inset:0}.shop-lead img{width:100%;height:100%;object-fit:cover}
.shop-lead>div:last-child{position:relative;z-index:2;background:#fff;border-radius:16px;padding:18px 20px;width:100%}
.shop-lead h3{font-size:1.25rem;letter-spacing:-.02em}
.shop-lead .link{margin-top:8px}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px 20px}
.prod{display:block}
.prod .pic{aspect-ratio:4/5;background:var(--soft);margin-bottom:12px;border-radius:16px}
.prod .pic img{transition:transform 1.2s var(--ease)}
.prod:hover .pic img{transform:scale(1.05)}
.prod .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-4)}.noimg svg{width:40px;height:40px;stroke-width:1.1}
.prod h4{font-weight:700;line-height:1.35;font-size:.94rem}
.price{font-weight:700;font-variant-numeric:tabular-nums;color:var(--magenta-d)}.was{color:var(--ink-3);text-decoration:line-through;font-weight:500;margin-left:6px;font-size:.88em}
.stars{display:inline-flex;gap:1px;color:var(--yellow);vertical-align:-1px}.stars svg{width:14px;height:14px}.stars svg.on{fill:var(--yellow)}
.qty{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}.qty button{width:34px;height:34px}.qty span{min-width:30px;text-align:center;line-height:34px;font-weight:700}.qty button:hover{background:var(--soft)}
.store-cover{height:240px;background:var(--soft);overflow:hidden}.store-cover img{width:100%;height:100%;object-fit:cover}

/* 07 Competitions: a programme of fixtures on bright blue paper. */
.comps{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start}
.comp-list{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);padding:4px 22px;border:1px solid var(--line)}
.comp-row{display:grid;grid-template-columns:84px minmax(0,1fr) 150px auto;gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--line-2);transition:padding var(--med)}
.comp-row:first-child,.comp-list>div:first-child .comp-row{border-top:0}
.comp-row:hover{padding-left:8px}
.cdate b{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cd)}.cdate span{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.comp-row .nm{font-size:1.02rem;font-weight:700;display:block;line-height:1.3}
.comp-row .sub{font-size:.84rem;color:var(--ink-3)}
.comp-row .cap{font-size:.78rem;font-weight:700;color:var(--ink-2)}.comp-row .cap .bar{margin-top:7px;background:var(--line-2)}

/* Membership: the eight sessions, explained by drawing them. */
.member{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.eight{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.eight div{position:relative;aspect-ratio:1.2;border-radius:16px;border:1.5px dashed var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:14px 14px 12px;font-size:.78rem;font-weight:700;color:var(--ink-3);background:#fff;transition:background .7s var(--ease),border-color .7s,color .7s;transition-delay:calc(var(--i)*110ms)}
.eight div b{font-size:1.15rem;font-weight:700;color:var(--ink-4);transition:color .7s;transition-delay:calc(var(--i)*110ms);font-variant-numeric:tabular-nums}
.eight.in div{border-style:solid;border-color:var(--c);background:var(--ct);color:var(--cd)}.eight.in div b{color:var(--cd)}
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.prices div{padding:16px 18px;border-radius:16px;background:var(--ct,var(--soft))}
.prices b{display:block;font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--cd)}.prices span{font-size:.82rem;color:var(--ink-2);font-weight:700}

/* Community and sponsorship */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
.pst{display:flex;flex-direction:column;gap:12px}
.pst .pic{aspect-ratio:4/3;border-radius:16px}
.pst p{font-size:.94rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pst .by{display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:700}
.pst .post-acts{margin-top:0}
.sponsor-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center;padding:24px 28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.sponsor-line .ad-label{white-space:nowrap}
.sponsor-line h3{font-size:1.15rem;letter-spacing:-.01em}
.sponsor-line p{font-size:.9rem;color:var(--ink-2);margin-top:4px;max-width:62ch}
.sponsor{position:relative;overflow:hidden;background:var(--blue-t);color:var(--ink);border-radius:var(--r-lg);padding:clamp(22px,3.4vw,36px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* Closing call to action: the brand artwork beside a clear next step. */
.final{position:relative;background:var(--yellow-t);color:var(--ink);padding:var(--sec) 0}
.final-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.final-art{display:block;border-radius:24px;overflow:hidden;background:#000;aspect-ratio:934/1000;max-width:440px;width:100%;justify-self:center}
.final-art img{width:100%;height:100%;object-fit:cover}
.final h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.12;max-width:18ch}
.final p{color:var(--ink-2);margin-top:14px;max-width:46ch}
.final .row{margin-top:28px}
.price-tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.price-tile b{display:block;font-size:1.5rem;letter-spacing:-.02em}

/* Shared legacy blocks, kept calm for pages not yet redesigned. */
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;color:var(--ink);display:flex;flex-direction:column;gap:12px;transition:border-color var(--med)}
.team-card:hover{border-color:var(--c,var(--magenta))}
.dk .team-card{background:var(--bk-2);border-color:var(--bk-3);color:#fff}
.team-card .rec{display:flex;gap:18px;font-size:.78rem;color:var(--ink-3)}.team-card .rec b{display:block;font-size:1.15rem;color:inherit}
.place{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2);transition:padding var(--med)}
.place:last-child{border-bottom:0}
.place:hover{padding-left:6px}
.place .pic{width:96px;height:72px;border-radius:var(--r-img)}
aside .place{grid-template-columns:72px minmax(0,1fr)}aside .place .pic{width:72px;height:56px}aside .place>:last-child{grid-column:2}
.pic{overflow:hidden;background:var(--soft);display:block;position:relative;border-radius:var(--r-img)}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
a.pic:hover img,a:hover>.pic img{transform:scale(1.04)}
.r-43{aspect-ratio:4/3}.r-34{aspect-ratio:3/4}.r-169{aspect-ratio:16/9}.r-11{aspect-ratio:1}
.morph-pic{position:relative;border-radius:var(--r-img);overflow:hidden;background:var(--soft)}
.morph-pic img{width:100%;height:100%;object-fit:cover}
.layered{position:relative}
.ath-card{display:flex;flex-direction:column;gap:6px;padding:24px 0;border-top:1px solid var(--line);transition:padding var(--med)}
.ath-card:hover{padding-left:8px}
.ath-card .avatar{width:64px;height:64px;font-size:1.1rem;margin-bottom:10px}
.ad-slot{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:16px 0}
.ad-in{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:18px;align-items:center}
.ad-in .pic{height:70px;border-radius:var(--r-img)}.ad-label{font-size:.68rem;font-weight:700;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase}

/* ----- Inner page heroes ----- */
.pg-hero{background:var(--ct);color:var(--ink);position:relative;overflow:hidden;padding:calc(var(--head) + clamp(36px,5vw,64px)) 0 clamp(36px,5vw,56px)}
.pg-hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.pg-hero h1{font-size:clamp(2rem,3.6vw,3rem);max-width:20ch}
.pg-hero .lede{color:var(--ink-2);margin-top:14px;max-width:560px}
.pg-hero .ph-copy{position:relative;z-index:2;max-width:760px}
.pg-hero .eyebrow::before{background:var(--c)}
.pg-hero .ph-line{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--c);transform-origin:left;animation:lineIn 1.4s var(--ease) .2s backwards}
@keyframes lineIn{from{transform:scaleX(0)}}
.pg-hero .ph-cut{display:none}

/* ----- How it works (legacy) ----- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);margin-top:0}
.step{padding:28px 24px 0 0}.step+.step{padding-left:24px;border-left:1px solid var(--line)}
.step .circ{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--ct);color:var(--cd)}
.step h3{font-size:1.05rem}.step p{font-size:.88rem;color:var(--ink-3);margin-top:6px}
.chev{display:none}
.sport-feature{position:relative;display:block;border-radius:var(--r-img);overflow:hidden;background:var(--soft);min-height:280px}
.sport-feature .sf-cut{display:none}
.sport-feature .sf-t{padding:24px;display:flex;flex-direction:column;gap:4px}
.sport-chips{display:flex;flex-wrap:wrap;gap:8px}
.sport-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:.86rem;background:#fff;transition:all var(--fast)}
.sport-chip svg{color:var(--cd)}
.sport-chip:hover{border-color:var(--c);background:var(--ct)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;background:#fff;color:var(--ink);transition:all var(--fast)}
.chip:hover,.chip.on{background:var(--ct);border-color:var(--c)}
.dk .chip{background:transparent;color:#fff;border-color:var(--bk-4)}.dk .chip:hover,.dk .chip.on{border-color:var(--c);background:transparent;color:#fff}

/* ==========================================================================
   APPLICATION SHELL AND DASHBOARDS
   ========================================================================== */
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh;background:var(--paper)}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--line);padding:22px 14px 28px;display:flex;flex-direction:column;gap:18px;background:#fff;scrollbar-width:thin}
.side .brand{padding:2px 8px 6px}
.role-switch{border:1px solid var(--line);border-radius:10px;padding:9px 12px;position:relative}
.role-switch::before{content:'';position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.role-switch label{display:block;font-size:.68rem;color:var(--ink-3);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.role-switch select{border:0;background:none;width:100%;font-weight:700;padding:0;outline:none;cursor:pointer}
.side-group{display:flex;flex-direction:column;gap:1px}
.side-group h6{font-size:.66rem;font-weight:700;color:var(--ink-4);padding:8px 12px 4px;margin:0;letter-spacing:.14em;text-transform:uppercase}
.side-link{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--ink-2);position:relative;transition:background var(--fast),color var(--fast)}
.side-link svg{color:var(--ink-3);transition:color var(--fast)}
.side-link:hover{background:var(--soft-2);color:var(--ink)}
.side-link.on{background:var(--ct);color:var(--cd);font-weight:700}
.side-link.on svg{color:var(--cd)}
.side-link.on::before{content:'';position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.side-link .n{margin-left:auto;font-size:.68rem;font-weight:700;background:var(--magenta);color:#fff;border-radius:9px;padding:0 6px;line-height:17px}.side-link .n:empty{display:none}
.app-main{min-width:0;display:flex;flex-direction:column}
.app-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;height:64px;padding:0 36px;background:rgba(255,250,242,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.search-box{position:relative;flex:1;max-width:440px}
.search-box>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.search-box input{width:100%;height:40px;padding:0 14px 0 38px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.9rem;transition:border-color var(--fast),box-shadow var(--fast)}
.search-box input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,182,245,.15)}
.page{padding:36px 36px 96px;max-width:1320px;width:100%}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.02em}
.page .sec-head h2{font-size:clamp(1.2rem,1.7vw,1.45rem)}.page .sec-head{margin-bottom:16px}
.tabbar{display:none}

/* Dashboard header: who you are and what matters now. No decoration. */
.dash-hero{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:8px 0 28px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.dash-hero .dh-c{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:760px}
.dash-hero .dh-k{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cd)}
.dash-hero .dh-k::before{content:'';width:18px;height:3px;border-radius:2px;background:var(--c)}
.dash-hero h1{font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:-.02em;line-height:1.1}
.dash-hero .sub{color:var(--ink-2);font-size:.92rem;display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center}
.dash-hero .sub>span{display:inline-flex;align-items:center;gap:6px}
.dash-hero .dh-a{display:flex;gap:9px;flex-wrap:wrap}
.dash-hero .dh-photo{width:clamp(88px,10vw,128px);aspect-ratio:1;border-radius:18px;overflow:hidden;flex:none;order:-1}
.dash-hero .dh-photo img{width:100%;height:100%;object-fit:cover}
.dash-hero .dh-cut{display:none}
.dash-hero.has-photo{justify-content:flex-start}
.dash-hero.has-photo .dh-a{margin-left:auto}
.next-step{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-left:4px solid var(--c);background:#fff;border-radius:14px;padding:16px 18px;margin-bottom:28px;transition:transform var(--fast),border-color var(--fast)}
.next-step:hover{transform:translateX(4px)}
.next-step .ns-i{width:40px;height:40px;border-radius:10px;background:var(--ct);color:var(--cd);display:flex;align-items:center;justify-content:center;flex:none}

/* Membership session strip: the eight sessions read at a glance. */
.sess{background:var(--green-t);color:var(--ink);border:1px solid #CFEBD3;border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.sess .n{display:flex;align-items:baseline;gap:12px}
.sess .n b{font-size:clamp(2.6rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-.04em;line-height:.9;color:var(--green-d);font-variant-numeric:tabular-nums}
.sess .n span{font-size:.9rem;color:var(--ink-2);max-width:14ch;line-height:1.35;font-weight:600}
.sess .meter{margin-bottom:14px}
.sess .row{margin-top:18px}
.sess .renew{font-size:.84rem;color:var(--ink-2);margin-top:6px}
.sess.low{background:var(--yellow-t);border-color:#FBE2AE}.sess.low .n b{color:var(--yellow-d)}
.sess-cta{border:1px solid var(--line);border-left:4px solid var(--c);background:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.sess-cta h3{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.015em;margin:8px 0 6px}
.sess-cta .eight{max-width:280px;gap:6px}.sess-cta .eight div{aspect-ratio:1.4;padding:6px 8px}.sess-cta .eight div b{font-size:.9rem}

/* Agenda: upcoming items as a dated timeline. */
.agenda{display:flex;flex-direction:column}
.ag{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2);position:relative}
.ag:last-child{border-bottom:0}
.ag .dt{text-align:left;line-height:1.05}.ag .dt b{display:block;font-size:1.2rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.ag .dt span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ag .what{min-width:0}.ag .what b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ag .what span{font-size:.84rem;color:var(--ink-3)}
.ag.soon .dt b{color:var(--cd)}

/* Two-column dashboard grid with a quieter side column. */
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.dcol{display:flex;flex-direction:column;gap:40px;min-width:0}
.blk-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.blk-h h2{font-size:1.15rem;letter-spacing:-.01em}
.blk-h a{font-size:.84rem;font-weight:700;color:var(--ink-2)}.blk-h a:hover{color:var(--ink)}
.blk-h .k{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cd,var(--ink-3))}
.side-list{display:flex;flex-direction:column}
.side-list>*{padding:12px 0;border-bottom:1px solid var(--line-2)}.side-list>*:last-child{border-bottom:0}

/* Figures band used on dashboards: numbers with a label, separated by hairlines. */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.figs>*{padding:18px 20px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line)}
.figs>*:last-child{border-right:0}
.figs b{font-size:clamp(1.15rem,1.5vw,1.45rem);white-space:nowrap;font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.figs span{font-size:.8rem;color:var(--ink-3);font-weight:600}
.figs .warn b{color:var(--magenta-d)}
.figs a{transition:background var(--fast)}.figs a:hover{background:var(--soft-2)}

/* Action queue: things waiting on this person, ranked. */
.queue{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.qi{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-2);transition:background var(--fast)}
.qi:last-child{border-bottom:0}
.qi:hover{background:var(--soft-2)}
.qi .q-t{font-weight:600}.qi .q-s{font-size:.82rem;color:var(--ink-3)}
.qi .q-n{font-size:1.25rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.qi.zero{opacity:.55}.qi.zero .q-n{color:var(--ink-4)}
.qi.hot .q-n{color:var(--magenta-d)}
.qi svg.i{color:var(--ink-3);transition:transform var(--fast)}.qi:hover svg.i{transform:translateX(3px)}

/* Week strip: seven days with what is on each. */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wd{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;min-height:118px;display:flex;flex-direction:column;gap:6px}
.wd .h{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.wd .h b{font-size:1.1rem;color:var(--ink);letter-spacing:-.02em;text-transform:none}
.wd.today{border-color:var(--c);box-shadow:inset 0 3px 0 var(--c)}.wd.today .h b{color:var(--cd)}
.wd .ev{font-size:.74rem;font-weight:600;padding:5px 7px;border-radius:6px;background:var(--ct);border-left:2px solid var(--c);line-height:1.3;display:block;overflow:hidden;animation:seqIn .5s var(--ease) backwards;transition:transform var(--fast)}
.wd .ev b{display:block;font-variant-numeric:tabular-nums}
.wd .ev span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;color:var(--ink-2)}
a.ev:hover{transform:translateX(2px)}
.wd .none{font-size:.72rem;color:var(--ink-4);margin-top:auto}

/* Facility day board: every space, every hour, today. */
.dayb{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;overflow-x:auto}
.dayb-g{display:grid;grid-template-columns:130px minmax(480px,1fr);row-gap:10px;min-width:610px}
.dayb .hrs{display:grid;grid-template-columns:repeat(var(--h),minmax(0,1fr));font-size:.7rem;font-weight:700;color:var(--ink-3);border-bottom:1px solid var(--line);padding-bottom:6px}
.dayb .rn{font-size:.86rem;font-weight:600;align-self:center;padding-right:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dayb .rn small{display:block;font-size:.74rem;color:var(--ink-3);font-weight:600}
.dayb .track{position:relative;height:40px;background:var(--soft-2);border-radius:8px;display:grid;grid-template-columns:repeat(var(--h),minmax(0,1fr))}
.dayb .track>.hl{border-right:1px solid var(--line-2)}.dayb .track>.hl:last-of-type{border-right:0}
.dayb .bk{position:absolute;top:4px;bottom:4px;border-radius:6px;background:var(--c);color:var(--con);font-size:.72rem;font-weight:700;padding:4px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform-origin:left;animation:growX .9s var(--ease) backwards}
.dayb .bk.pending{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--yellow)}
.dayb .bk.maint{background:var(--line);color:var(--ink-2)}
.dayb .now{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--magenta);border-radius:2px;z-index:2}
.dayb .now::before{content:'';position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--magenta)}
.util{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:120px}
.util div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;font-size:.7rem;font-weight:700;color:var(--ink-3)}
.util i{display:block;width:100%;max-width:36px;background:var(--c);border-radius:5px 5px 2px 2px;transform-origin:bottom;animation:barUp 1s var(--ease) backwards;min-height:3px}
.util i.low{background:var(--line)}
.util em{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}

/* Match-up desk: teams and fixtures near a facility that could play there. */
.mdesk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.md{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.md:last-child{border-bottom:0}
.md .crest{width:48px;height:48px;border-radius:10px;background:var(--ct);color:var(--cd);display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}
.md .crest img{width:100%;height:100%;object-fit:cover}
.md b{display:block;font-weight:600}.md span{font-size:.82rem;color:var(--ink-3)}

/* ----- Overlays ----- */
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(11,11,13,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto;animation:fade .3s ease}
.modal{background:#fff;width:100%;max-width:560px;border-radius:18px;animation:mdpop .5s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.35);margin:auto 0}
.modal.wide{max-width:820px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:24px 26px 12px;position:sticky;top:0;background:#fff;z-index:2;border-radius:18px 18px 0 0}
.modal-head h2{font-size:1.35rem;letter-spacing:-.02em}
.modal-head .icon-btn{background:var(--soft);transition:transform var(--med),background var(--fast)}.modal-head .icon-btn:hover{transform:rotate(90deg)}
.modal-body{padding:4px 26px 22px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 26px;border-top:1px solid var(--line);flex-wrap:wrap}
@keyframes fade{from{opacity:0}}
@keyframes mdpop{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes rise{from{transform:translateY(10px);opacity:0}}
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:6px;width:min(440px,calc(100vw - 32px));pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:13px 16px 13px 18px;border-radius:10px;font-size:.9rem;font-weight:600;animation:rise .5s var(--ease);position:relative;overflow:hidden;pointer-events:auto;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--blue))}
.search-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;z-index:60;max-height:60vh;overflow-y:auto;animation:rise var(--fast);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.search-drop a{display:flex;gap:10px;padding:10px 14px;align-items:center;font-size:.88rem}.search-drop a:hover{background:var(--soft-2)}.search-drop h6{margin:0;padding:10px 14px 2px;font-size:.66rem;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;min-width:220px;z-index:60;animation:rise var(--fast);box-shadow:0 18px 40px rgba(0,0,0,.14);overflow:hidden;padding:6px}
.menu a,.menu button{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;font-size:.88rem;font-weight:600;text-align:left;border-radius:8px}.menu a:hover,.menu button:hover{background:var(--soft-2)}

/* ----- Calendar ----- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cal-h{font-size:.7rem;font-weight:700;color:var(--ink-3);padding:10px 8px;border-bottom:1px solid var(--line);letter-spacing:.1em;text-transform:uppercase}
.cal-d{min-height:108px;padding:6px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:3px;text-align:left;align-items:stretch;transition:background var(--fast)}
.cal-d:hover{background:var(--soft-2)}.cal-d.off{background:var(--soft-2);color:var(--ink-4)}
.cal-d .dn{font-size:.82rem;font-weight:700;width:26px;height:26px;line-height:26px;text-align:center;border-radius:7px}
.cal-d.today .dn{background:var(--magenta);color:#fff}
.cal-e{font-size:.72rem;font-weight:600;line-height:1.3;padding:3px 6px;border-radius:5px;background:var(--ct);border-left:2px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-align:left;animation:seqIn .5s var(--ease) backwards}
.day-list .cal-e{white-space:normal;font-size:.9rem;padding:10px 12px;border-radius:10px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
.slot{padding:10px 4px;text-align:center;border:1.5px solid var(--line);border-radius:8px;font-size:.86rem;font-weight:700;transition:all var(--fast)}
.slot:hover:not([disabled]){border-color:var(--blue)}.slot.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.slot[disabled]{background:var(--soft-2);color:var(--ink-4);text-decoration:line-through;cursor:not-allowed}
.heat{display:grid;grid-template-columns:150px repeat(7,minmax(0,1fr));gap:5px;align-items:center;font-size:.8rem}
.heat .hc{height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.74rem;background:var(--soft)}
.heat .hd{text-align:center;font-weight:700;color:var(--ink-3);font-size:.72rem}
.heat .h1{background:var(--green-t)}.heat .h2{background:var(--yellow-t)}.heat .h3{background:var(--yellow)}.heat .h4{background:var(--magenta);color:#fff}
#game-map{height:560px;border-radius:var(--r-lg);overflow:hidden;background:var(--soft);z-index:1}
.map-pin{width:18px;height:18px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35)}

/* ----- Messaging ----- */
.chat{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100vh - 64px)}
.chat-list{background:#fff;border-right:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column}
.chat-list .top{padding:14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.conv{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-2);align-items:center;text-align:left;width:100%;transition:background var(--fast)}
.conv:hover{background:var(--soft-2)}.conv.on{background:var(--soft)}
.conv .n{background:var(--magenta);color:#fff;font-size:.66rem;font-weight:700;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;padding:0 4px;display:inline-block;animation:countPop .5s var(--ease)}
.chat-main{display:flex;flex-direction:column;min-width:0;height:100%}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);background:#fff}
.chat-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:6px;background:var(--paper)}
.msg{max-width:min(72%,520px);padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;align-self:flex-start;font-size:.93rem}
.msg:last-child{animation:rise .4s var(--ease)}
.msg.me{align-self:flex-end;background:var(--blue-d);border-color:var(--blue-d);color:#fff;border-radius:14px 14px 4px 14px}
.msg .m{font-size:.68rem;opacity:.7;margin-top:2px;display:flex;gap:6px;justify-content:flex-end;align-items:center}
.msg .who{font-size:.74rem;font-weight:700;color:var(--blue-d);margin-bottom:1px}
.msg img{border-radius:8px;max-height:240px;margin-bottom:4px}
.typing{font-size:.8rem;color:var(--ink-3);min-height:20px;padding:0 18px;background:var(--paper)}
.chat-foot{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);align-items:flex-end;background:#fff}
.chat-foot textarea{flex:1;min-height:44px;max-height:120px;padding:11px 16px;border:1.5px solid var(--line);border-radius:12px;resize:none}
.chat-foot textarea:focus{outline:none;border-color:var(--blue)}
.dot-on{width:8px;height:8px;background:var(--green);border-radius:50%;display:inline-block;flex:none}

/* ----- Community ----- */
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:14px}
.post .pic{margin-top:12px;max-height:420px}
.post-acts{display:flex;gap:18px;margin-top:10px;font-size:.85rem;color:var(--ink-2)}
.post-acts button,.post-acts span{display:inline-flex;align-items:center;gap:6px;font-weight:700;transition:color var(--fast)}.post-acts button:hover{color:var(--ink)}.post-acts button.on{color:var(--magenta)}.post-acts button.on svg{fill:var(--magenta)}

/* ----- Bracket ----- */
.bracket{display:flex;gap:28px;overflow-x:auto;padding-bottom:8px}.bracket .col{min-width:210px;display:flex;flex-direction:column;gap:10px;justify-content:space-around}
.match{background:#fff;border:1px solid var(--line);border-radius:10px;font-size:.86rem;overflow:hidden}
.match>div{display:flex;justify-content:space-between;padding:8px 12px;gap:8px}.match>div+div{border-top:1px solid var(--line-2)}.match .win{font-weight:700;background:var(--yellow-t)}

/* ----- Charts ----- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:inherit;font-size:11px;fill:var(--ink-3);font-weight:600}
.chart rect.b{transform-box:fill-box;transform-origin:bottom;animation:barUp 1s var(--ease) backwards;transition:opacity var(--fast)}.chart g:hover rect.b{opacity:.75}
@keyframes barUp{from{transform:scaleY(0)}}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-2);margin-bottom:8px}.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.hbar{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) 56px;gap:12px;align-items:center;padding:6px 0;font-size:.86rem}
.hbar .track{height:6px;background:var(--line-2);border-radius:3px;overflow:hidden}.hbar .track i{display:block;height:100%;background:var(--c,var(--blue));border-radius:3px;animation:growX 1.1s var(--ease) backwards;transform-origin:left}
@keyframes growX{from{transform:scaleX(0)}}
.stackbar{display:flex;gap:3px;height:12px;border-radius:6px;overflow:hidden}.stackbar i{display:block;min-width:3px;transform-origin:left;animation:growX 1.1s var(--ease) backwards}

/* ----- Sign in and registration ----- */
.auth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100vh;background:#fff}
.auth-pic{position:sticky;top:0;height:100vh;background:var(--bk);color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(16px,3vh,32px);padding:clamp(24px,4vh,48px) clamp(24px,3vw,48px)}
.auth-pic .ph{display:block;width:100%;max-width:min(520px,62vh);aspect-ratio:760/655}
.auth-pic .ph img{width:100%;height:100%;object-fit:contain;transform:scale(1.06);opacity:0;animation:authIn 1.6s var(--ease) .1s forwards}
@keyframes authIn{to{transform:scale(1);opacity:1}}
.auth-pic .au-c{text-align:center;max-width:40ch}
.auth-pic .au-t{font-weight:700;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.25;letter-spacing:-.01em}
.auth-pic .au-s{color:#B9BCC3;font-size:.9rem;margin-top:8px}
.auth-pic .au-l{display:block;height:3px;width:48px;background:var(--c);margin:0 auto 14px;border-radius:2px;transform-origin:center;animation:lineIn 1.2s var(--ease) .3s backwards}
.auth-pic img.cut{display:none}
.auth-main{padding:clamp(28px,6vh,72px) clamp(20px,6vw,96px);display:flex;flex-direction:column;justify-content:center;gap:28px;background:#fff;min-height:100vh}
.auth-main>.brand{display:none}
.auth-main h1{font-size:clamp(1.8rem,2.8vw,2.4rem);letter-spacing:-.02em;line-height:1.1}
.auth-card{width:100%;max-width:460px;display:flex;flex-direction:column;gap:24px}
.auth-card.wide{max-width:720px}
.or{display:flex;align-items:center;gap:14px;font-size:.78rem;font-weight:700;color:var(--ink-4);letter-spacing:.12em;text-transform:uppercase}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.join-types{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.join-type{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);width:100%;text-align:left;position:relative;transition:padding var(--med),background var(--fast)}
.join-type::before{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--c);transition:width .7s var(--ease)}
.join-type:hover{padding-left:14px}.join-type:hover::before{width:100%}
.join-type .avatar{width:52px;height:52px;background:var(--ct);color:var(--cd);border-radius:14px}
.join-type .jt{font-size:1.05rem;font-weight:700;display:block;letter-spacing:-.01em}
.join-type>svg.i{color:var(--ink-3);transition:transform var(--med),color var(--fast)}.join-type:hover>svg.i{transform:translateX(4px);color:var(--ink)}
.setup-card{max-width:680px;margin:0 auto;padding:clamp(40px,10vh,110px) var(--gut)}
.setup-card code{background:var(--soft);padding:2px 7px;border-radius:6px;font-size:.88em}

/* ==========================================================================
   MOTION, PART TWO: scroll reveals that slide in and back out, rotating
   headlines, a pulsing call to action and a calm page loader.
   ========================================================================== */
.reveal{opacity:0;transform:translateY(46px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s);will-change:transform,opacity}
.reveal-left{opacity:0;transform:translateX(-64px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s);will-change:transform,opacity}
.reveal-right{opacity:0;transform:translateX(64px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s);will-change:transform,opacity}
.reveal-scale{opacity:0;transform:scale(.88);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s);will-change:transform,opacity}
.reveal-fade{opacity:0;transition:opacity .8s var(--ease);transition-delay:var(--d,0s)}
.reveal-rotate{opacity:0;transform:translateY(34px) rotate(-2.5deg) scale(.96);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--d,0s);will-change:transform,opacity}
.reveal.in,.reveal-left.in,.reveal-right.in,.reveal-scale.in,.reveal-fade.in,.reveal-rotate.in{opacity:1;transform:none}
.rv{transition:opacity .75s var(--ease),transform .8s var(--ease),clip-path 1.2s var(--ease);transition-delay:var(--d,0s)}
.rv.l{transform:translateX(-64px)}.rv.r{transform:translateX(64px)}.rv.u{transform:translateY(46px)}.rv.z{transform:scale(.9)}
.rv.in{opacity:1;transform:none}

/* Hover life on cards and their icons. */
.team:hover .crest,.coach:hover .avatar,.join-type:hover .avatar,.next-step:hover .ns-i{transform:scale(1.1) rotate(8deg)}
.team .crest,.coach .avatar,.join-type .avatar,.next-step .ns-i,.trust div>svg{transition:transform .4s var(--ease),background .4s}
.trust div:hover>svg{transform:scale(1.1) rotate(8deg);background:var(--c);color:#fff}
.trust div{transition:transform .4s var(--ease)}.trust div:hover{transform:translateX(6px)}
.venue:hover .pic img,.shop-lead:hover img{transform:scale(1.04)}

/* The main call to action breathes, and a band of light passes over it. */
.btn-pulse{animation:ctaPulse 2.6s ease-in-out infinite}
.btn-pulse::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:rgba(255,255,255,.35);transform:skewX(-20deg);pointer-events:none;z-index:-1;animation:ctaShine 3.4s ease-in-out infinite}
.btn-pulse:hover{animation-play-state:paused;transform:translateY(-3px) scale(1.03)}
.btn-pulse:hover::before{animation-play-state:paused}
.btn-pulse.btn-green{--pulse:rgba(61,181,74,.5)}.btn-pulse.btn-blue{--pulse:rgba(31,182,245,.5)}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 var(--pulse,rgba(236,28,114,.5)),0 12px 26px -12px rgba(26,29,35,.35)}50%{box-shadow:0 0 0 12px rgba(236,28,114,0),0 12px 26px -12px rgba(26,29,35,.35)}}
@keyframes ctaShine{0%{left:-60%}55%,100%{left:130%}}

/* Page loader: four brand-colour bars that rise in turn. Shown until the page has its content. */
/* Page loader: eight brand-coloured balls fill a circle one by one while it turns, empty in the same order, and run again.
   It sits in the middle of the screen; min-height keeps the footer out of view until the page is in. */
.loader{min-height:62vh;position:relative;animation:fade .4s ease .15s backwards}
.app-page .loader{min-height:70vh}
#page-slot .loader{min-height:40vh}
.loader>.ld-ring,.loader>.ld-t{position:fixed;left:50%;z-index:5;pointer-events:none}
.ld-ring{top:50%;width:76px;height:76px;margin:-48px 0 0 -38px;animation:ldTurn 2.4s linear infinite}
.ld-ring i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;transform:rotate(calc(var(--n) * 45deg)) translateY(-31px) scale(0);animation:ldFill 2.4s var(--ease-io) infinite;animation-delay:calc(var(--n) * .15s)}
.ld-ring i:nth-child(1){--n:0;background:var(--blue)}.ld-ring i:nth-child(2){--n:1;background:var(--green)}.ld-ring i:nth-child(3){--n:2;background:var(--magenta)}.ld-ring i:nth-child(4){--n:3;background:var(--yellow)}
.ld-ring i:nth-child(5){--n:4;background:var(--blue)}.ld-ring i:nth-child(6){--n:5;background:var(--green)}.ld-ring i:nth-child(7){--n:6;background:var(--magenta)}.ld-ring i:nth-child(8){--n:7;background:var(--yellow)}
@keyframes ldFill{0%{transform:rotate(calc(var(--n) * 45deg)) translateY(-31px) scale(0)}12%,55%{transform:rotate(calc(var(--n) * 45deg)) translateY(-31px) scale(1)}67%,100%{transform:rotate(calc(var(--n) * 45deg)) translateY(-31px) scale(0)}}
@keyframes ldTurn{to{transform:rotate(360deg)}}
.loader>.ld-t{top:50%;margin-top:44px;transform:translateX(-50%)}
.ld-t{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
body:not([data-ready="1"]) .site-foot,body:not([data-ready="1"]) .up{display:none}

/* Hero, sized to fill its space: rotating headlines, real figures, cross-fading photographs. */
.hx-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:min(calc(100svh - 70px),820px)}
.hx h1,.hx .h1like{font-size:clamp(2.6rem,4.5vw,4rem);line-height:1.06;letter-spacing:-.025em;font-weight:700;max-width:13ch;color:var(--ink);margin:0}
.hx .h1like em{font-style:normal;color:var(--magenta)}
.hslides{display:grid}
.hslide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease,visibility 0s .7s}
.hslide.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform .7s ease}
.hx-p{font-size:clamp(16px,1.3vw,18.5px);max-width:44ch;margin-top:22px}
.hslide .hx-p{opacity:1;animation:none}
.hslides>.hslide:first-child .hx-p{opacity:0;animation:fadeUp 1s var(--ease) .6s forwards}
.hdots{display:flex;gap:8px;margin-top:26px}
.hdots button{width:11px;height:11px;border-radius:6px;background:var(--line);transition:width .35s var(--ease),background .35s}
.hdots button.on{width:30px;background:var(--magenta)}
.hx-stats{display:flex;gap:clamp(22px,4vw,44px);margin-top:28px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.hx-stats div{opacity:0;animation:fadeUp .9s var(--ease) forwards}
.hx-stats div:nth-child(1){animation-delay:1s}.hx-stats div:nth-child(2){animation-delay:1.1s}.hx-stats div:nth-child(3){animation-delay:1.2s}.hx-stats div:nth-child(4){animation-delay:1.3s}
.hx-stats b{display:block;font-size:1.6rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--cd)}
.hx-stats span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hx-art{height:clamp(420px,46vw,600px)}

/* Three small add-on cards under the hero: a figure and a label each, centred. */
.pillars{background:#fff;padding:22px 0;border-bottom:1px solid var(--line)}
.pillars-grid{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.pillar{position:relative;display:flex;align-items:center;gap:12px;min-width:250px;padding:12px 16px 12px 14px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:14px;background:#fff;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.pillar:hover{transform:translateY(-3px);box-shadow:0 12px 26px -18px rgba(26,29,35,.45);border-color:var(--c)}
.pillar .p-ic{color:var(--cd);display:flex;flex:none;transition:transform .4s var(--ease)}
.pillar .p-ic svg{width:22px;height:22px}
.pillar:hover .p-ic{transform:scale(1.12) rotate(8deg)}
.pillar .p-t{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}
.pillar b{font-size:1.3rem;font-weight:700;line-height:1;color:var(--cd);font-variant-numeric:tabular-nums}
.pillar .p-t span{font-size:.84rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.pillar .p-go{color:var(--ink-4);display:flex;transition:transform .3s var(--ease),color .3s}
.pillar:hover .p-go{transform:translateX(3px);color:var(--cd)}

/* Teams: one area, a photograph beside the story and the newest teams. */
.tm-split .pic{aspect-ratio:4/3}
.tm-list{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--line)}
.tm-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2);transition:padding var(--med)}
.tm-row:hover{padding-left:6px}
.tm-row .crest{width:44px;height:44px;border-radius:12px;background:var(--ct);color:var(--cd);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;overflow:hidden}
.tm-row .crest img{width:100%;height:100%;object-fit:cover}
.tm-row b{display:block;font-weight:700}.tm-row small{font-size:.8rem;color:var(--ink-3)}
.tm-row .need{font-size:.78rem;font-weight:700;color:var(--cd);white-space:nowrap}

/* Closing call to action: the logo on its own clean island. */
.island{background:#fff;border-radius:28px;padding:clamp(28px,4vw,48px);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -36px rgba(26,29,35,.45);border:1px solid var(--line);max-width:420px;width:100%;justify-self:center;transition:transform .5s var(--ease)}
.island:hover{transform:translateY(-6px)}
.island img{width:100%;height:auto;max-width:320px}

/* Form actions: a clear bar at the foot of the form, never floating below it. */
.wiz-acts{display:flex;gap:10px;align-items:center;padding-top:18px;margin-top:2px;border-top:1px solid var(--line)}
.wiz-acts .btn:not(.btn-ghost){flex:1}
/* Marketplace lead: the full square artwork, with its label underneath rather than over it. */
.shop-lead{flex-direction:column;align-items:stretch;padding:0;min-height:0;background:#fff;border:1px solid var(--line);align-self:start}
.shop-lead .img-rv{position:relative;inset:auto;aspect-ratio:1}
.shop-lead>div:last-child{border-radius:0;padding:16px 20px 18px}
/* Competitions: the section grows with the list, never with empty space. */
.comps{align-items:start}
.comps .comp-list{margin-top:0}

/* Closing call to action: the artwork at a modest size. */
.final-in{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.final-art{max-width:340px;box-shadow:0 24px 50px -28px rgba(0,0,0,.6);transition:transform .5s var(--ease)}
.final-art:hover{transform:rotate(-2deg) scale(1.02)}

/* Forms: compact, calm fields with quiet placeholders. */
.form{gap:16px}.form-grid{gap:14px 16px}
.field{gap:6px}
.field>label,.field>.lab{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.input,.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select,.field textarea{min-height:44px;padding:9px 14px;font-size:14px;border-radius:12px;border-width:1px;background:var(--soft-2)}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{background:#fff}
.field textarea{min-height:88px}
::placeholder{color:var(--ink-4);opacity:1;font-size:13.5px;font-weight:500}
.check span{min-height:34px;padding:5px 13px;font-size:.82rem;border-width:1px}
.hint{font-size:.76rem}
.auth-card{gap:20px}.auth-card.wide{max-width:620px}
.auth-main h1{font-size:clamp(1.6rem,2.3vw,2rem)}
.steps-mini{margin-bottom:22px}.steps-mini li{font-size:.78rem;padding-top:10px}
.geo{padding:11px 14px;border-width:1px}
.notice{font-size:.86rem;padding:12px 14px}
.join-type{padding:15px 4px}

/* ----- Responsive ----- */
@media (max-width:1080px){
  :root{--head:64px}
  .nav{display:none}.burger{display:inline-flex}
  .head-acts .hide-t{display:none!important}
  .g-side,.g-5-7,.g-7-5,.dgrid{grid-template-columns:minmax(0,1fr);gap:32px}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,1fr)}.foot-grid>div:first-child{grid-column:1/-1}
  .hx-grid{grid-template-columns:minmax(0,1fr)}.hx-art{height:clamp(300px,56vw,460px)}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense}
  .hx-live .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}.hx-live .lbl{display:none}.hx-live a:first-of-type{border-left:0;padding-left:0}
  .tm-split,.coach-split,.venue,.shop,.comps,.member,.final-in{grid-template-columns:minmax(0,1fr)}
  .final-art{max-width:360px;justify-self:start}
  .venues{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teams{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gr{grid-template-columns:96px minmax(0,1fr) 130px 110px}.gr .v{display:none}.gr .vm{display:inline}
  .shop-lead{min-height:340px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.step:nth-child(3){border-left:0;padding-left:0}
  .app{grid-template-columns:minmax(0,1fr)}.side{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;font-size:.66rem;font-weight:700;color:var(--ink-3);position:relative;transition:color var(--fast)}
  .tabbar svg.i{width:21px;height:21px}.tabbar .on{color:var(--ink)}.tabbar .on::before{content:'';position:absolute;top:-1px;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--c)}
  .page{padding:24px var(--gut) 110px}.app-top{padding:0 var(--gut)}
  .chat{height:calc(100vh - 64px - 58px)}
  .up{bottom:76px}
  .site-foot{padding-bottom:40px}
  .auth{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .brand img{height:40px}.site-head.sm .brand img{height:36px}
}
@media (max-width:760px){
  body{font-size:15.5px}
  :root{--sec:clamp(64px,14vw,96px)}
  .hide-m{display:none!important}.only-m{display:inline-flex}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .hx-grid{padding-top:calc(var(--head) + 28px);gap:28px}
  .hx h1{font-size:clamp(2.1rem,9vw,2.7rem)}
  .hx-art{height:auto;grid-template-columns:1.25fr 1fr;grid-template-rows:150px 150px;gap:10px}.hx-art figure{border-radius:16px}
  .hx-art figcaption{font-size:11px;padding:6px 10px}
  .srch{flex-wrap:wrap;padding:6px;gap:0;border-radius:22px}.srch select{flex:1 1 45%;padding:12px 10px}.srch .sep{display:none}.srch .go{flex:1 1 100%;margin-top:4px}
  .hx-live .wrap{grid-template-columns:minmax(0,1fr)}.hx-live a{border-left:0;border-top:1px solid var(--line);padding:14px 0}.hx-live a:first-of-type{border-top:0}.hx-live a::before{display:none}
  .tiles{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,300px);grid-template-rows:280px;grid-auto-rows:280px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 6px;scroll-padding:0 var(--gut)}
  .tiles::-webkit-scrollbar{display:none}
  .tile{scroll-snap-align:start}.tile.big{grid-column:auto;grid-row:auto}.tile.big .tl{left:12px;right:12px;bottom:12px;max-width:none;padding:10px 12px 10px 14px}.tile.big .tl b{font-size:1rem}.tile.big .tl p{display:none}.tile.more{display:flex}
  .teams{grid-template-columns:minmax(0,1fr)}
  .tiles-foot{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:18px calc(var(--gut)*-1) 0;padding:0 var(--gut)}.tiles-foot::-webkit-scrollbar{display:none}.tiles-foot a,.tiles-foot span{flex:none}
  .gb-top{flex-direction:column;align-items:flex-start}
  .gr{grid-template-columns:72px minmax(0,1fr);gap:8px 14px;padding:16px}.gr .d b{font-size:1.1rem}.gr .s{grid-column:2}.gr .go{grid-column:2;justify-self:start}
  .venues{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .coach{grid-template-columns:52px minmax(0,1fr);padding:14px}.coach .avatar{width:52px;height:52px}.coach .yrs{grid-column:2;text-align:left}
  .comp-list{padding:4px 16px}.comp-row{grid-template-columns:60px minmax(0,1fr);gap:8px 14px}.comp-row .cap{grid-column:2}.comp-row>:last-child{grid-column:2;justify-self:start}.cdate b{font-size:1.3rem}
  .posts{grid-template-columns:minmax(0,1fr)}
  .sponsor-line{grid-template-columns:minmax(0,1fr);padding:20px}
  .eight{gap:6px}.eight div{padding:10px 8px 8px;font-size:.66rem;overflow-wrap:normal;word-break:normal;border-radius:12px}.eight div b{font-size:1rem}
  .final-art{max-width:260px}
  .fx{grid-template-columns:66px minmax(0,1fr);gap:4px 12px;padding:16px 0}.fx:hover{padding-left:0}
  .fx .when b{font-size:1.1rem}.fx .cap{grid-column:2}.fx .acts{grid-column:2;margin-top:4px;text-align:left}
  .ad-in{grid-template-columns:64px minmax(0,1fr)}.ad-in .btn{grid-column:1/-1}.ad-in .pic{height:56px}
  .place{grid-template-columns:76px minmax(0,1fr)}.place>:last-child{grid-column:2}.place .pic{width:76px;height:60px}
  .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
  .auth{grid-template-columns:minmax(0,1fr)}.auth-pic{display:none}.auth-main{padding:20px var(--gut) 56px;justify-content:flex-start;gap:22px}.auth-main>.brand{display:inline-flex}
  .brand img{height:36px}.site-head.sm .brand img{height:34px}.foot-grid .brand img{height:52px}
  .modal-bg{padding:0;align-items:flex-end}.modal{max-width:none!important;border-radius:18px 18px 0 0;max-height:94vh;overflow-y:auto;margin:0}
  .search-box{max-width:none}.app-top .search-box input{font-size:16px}
  .app-top>div[style]{display:none}
  .tbl-wrap{overflow:visible}.tbl thead{display:none}.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:12px 0;border-bottom:1px solid var(--line)}.tbl tr:last-child{border-bottom:0}
  .tbl td,.panel .tbl td:first-child,.panel .tbl td:last-child{display:flex;justify-content:space-between;gap:16px;padding:3px 0;border:0;text-align:right}
  .tbl td::before{content:attr(data-l);color:var(--ink-3);font-size:.78rem;text-align:left;flex:none;max-width:45%}
  .tbl td:first-child{font-weight:700}.tbl td.act{justify-content:flex-end;flex-wrap:wrap;gap:6px;padding-top:8px;white-space:normal}.tbl td.act::before{display:none}.tbl td.act .btn+.btn,.tbl td.act .btn+a{margin-left:0}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric,.metric+.metric{padding:16px 14px 14px 0;border-left:0}.metric:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}.metric:nth-child(n+3){border-top:1px solid var(--line)}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}.figs>*{border-bottom:1px solid var(--line)}.figs>*:nth-child(even){border-right:0}
  .sess{grid-template-columns:minmax(0,1fr)}
  .sess-cta{grid-template-columns:minmax(0,1fr)}
  .meter{gap:4px}.cred{height:38px;padding:4px 6px}
  .week{grid-template-columns:repeat(7,minmax(84px,1fr));overflow-x:auto;padding-bottom:6px}
  .cal-d{min-height:56px;padding:3px}.cal-e{font-size:0;height:6px;padding:0;border:0;background:var(--c)}.cal-h{padding:6px 2px;text-align:center}.cal-d .dn{align-self:center}
  .chat{grid-template-columns:minmax(0,1fr)}.chat.open .chat-list{display:none}.chat:not(.open) .chat-main{display:none}
  .msg{max-width:86%}
  .page-head .btn{flex:1}
  .dash-hero .dh-a{width:100%}.dash-hero .dh-a .btn{flex:1}.dash-hero.has-photo .dh-a{margin-left:0}
  .heat{grid-template-columns:92px repeat(7,minmax(30px,1fr));overflow-x:auto}
  .steps{grid-template-columns:minmax(0,1fr)}.step,.step+.step{padding:22px 0 0;border-left:0}
  .ctas .btn{flex:1 1 100%}
  .foot-end{justify-content:flex-start}
}
@media (max-width:1080px){
  .hx-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .hx-art{height:clamp(320px,60vw,480px)}
  .final-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .hx h1,.hx .h1like{font-size:clamp(2.2rem,9.4vw,2.8rem)}
  .hx-art{height:auto}
  .hx-stats{gap:18px 26px}.hx-stats b{font-size:1.3rem}
  .reveal-left,.rv.l{transform:translateX(-36px)}.reveal-right,.rv.r{transform:translateX(36px)}
  .pillars-grid{flex-direction:column;align-items:stretch;gap:8px}.pillar{min-width:0}
  .island{max-width:300px;justify-self:start;padding:24px}
  .btn-pulse{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.reveal-fade,.reveal-rotate{opacity:1;transform:none;transition:none}
  .btn-pulse,.btn-pulse::before{animation:none!important}
  .hslide{transition:none}.hx-stats div,.hslides>.hslide:first-child .hx-p{opacity:1;animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv,.img-rv{opacity:1;transform:none;translate:none;clip-path:none}.img-rv img{transform:none}
  .lnr>span,h1 .ln>span{transform:none;animation:none}
  .hx-kick,.hx-p,.hx-find{opacity:1;animation:none}.hx-art figure{clip-path:none;animation:none}.hx-art img,.auth-pic .ph img{transform:none;animation:none;opacity:1}
  .draw-in path,.draw-in line,.draw-in polyline,.draw-in circle,.draw-in rect,.hx h1 .uline path{stroke-dashoffset:0}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media (prefers-reduced-motion:reduce){.ld-ring,.ld-ring i,.btn.is-busy::before{animation-duration:3.6s!important;animation-iteration-count:infinite!important}.btn.is-busy::before{animation-duration:1.2s!important}}
@media print{.side,.app-top,.tabbar,.site-head,.site-foot,.up,#bar{display:none!important}.app{display:block}}