/* World Premier Squash arena: fixes layered on top of the design stylesheet (site.css).
   site.css is generated from the design export and never hand-edited. Everything here is
   engineering, accessibility and real-asset work, the same set the WBL arena carries, adapted to
   the WPS design. None of it is meant to change how the design looks. */

/* ---- headings: real elements, same pixels ---- */
/* the hero lock-up is the page h1; stop the generic `.hero h1` type rules reaching it */
.hero h1.hlock{font:inherit;font-variation-settings:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit}
/* timeline headings were h4, which had no global rule; the global h3 line-height must not apply */
.tl .node h3.nh{line-height:inherit}

/* ---- anchors clear the sticky nav at every width (the design only set this under 720px) ---- */
:target{scroll-margin-top:calc(var(--navh, 68px) + 18px)}
.sec,#finalstage,#stmtstage,#terms,#main section,header,footer{scroll-margin-top:calc(var(--navh, 68px) + 18px)}
#main{outline:0}

/* ---- no sideways scroll on phones ----
   The design's two swipe rails (How to Play steps, press cards) use negative margins sized for a
   20px and 24px gutter, but the wrap's gutter is 16px under 720px, so both boxes poke past the
   viewport and the page scrolls sideways. Clipping the sections at the viewport edge removes that
   without moving a card. */
@media(max-width:720px){#how.hiw3,#press{overflow-x:clip}}

/* ---- nav ---- */
.brand{text-decoration:none;color:inherit}
.brand:hover{color:inherit}
/* the drawer sits inside the blurred sticky nav, so its translucent white composited with the
   page and the hero read straight through the links. Opaque, with a scrim and scroll lock. */
.navdrawer{background:#FFFFFF;backdrop-filter:none;-webkit-backdrop-filter:none}
.navscrim{position:fixed;inset:0;z-index:58;background:rgba(14,11,11,.42);opacity:0;pointer-events:none;transition:opacity .26s ease}
.navscrim.on{opacity:1;pointer-events:auto}
html.nav-open{overflow:hidden}
@media(min-width:961px){.navscrim{display:none}}
@media(prefers-reduced-motion:reduce){.navdrawer,.navscrim{transition:none}}

/* ---- the way back to Future of Sports (the same entry as the WBL arena) ----
   The plain word FSP, linking to /, as the last item in the link row so it reads between "Pricing"
   and "Reserve your place". Asked for on 25 Sep 2026, replacing the mark that sat beside the WPS
   lockup earlier that day (and the mark before 18 Sep, when it was taken out of the nav bar for
   crowding the CTA). It takes the row's own link styling, so it has no rules of its own.
   Below 961 the burger takes the row, and "Back to Future of Sports" is the drawer's first item.
   .fsp-mark stays: the drawer entry still draws it. */
.fsp-mark{display:block;flex:none;width:auto;height:15px;fill:currentColor}
@media(min-width:961px){.nav-links{gap:26px}}
@media(min-width:1280px){.nav-links{gap:22px}}
/* fsp-www-registered-mark (28 Sep 2026): the nav width WBL has, so the menu row fits on one line */
@media(min-width:1280px){.nav-in{max-width:1440px;padding-left:64px;padding-right:64px}}
.navdrawer a.nd-fsp>span{display:inline-flex;align-items:center;gap:11px}
.navdrawer a.nd-fsp .fsp-mark{height:13px}

/* ---- first layout: the nav, the hero and the Statement only (as the WBL arena) ----
   Sections below the Statement start with data-defer, so the browser skips their layout and paint
   for the first frame; js/app.js removes the attribute one section per task right after the first
   paint (or at once for a section the reader scrolls to, an in-page link, a CTA, or a deep link). Once
   removed, nothing of this rule remains: no containment, no clipping. */
[data-defer]{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---- performance (15 Sep 2026) ----
   Content already on screen when the page opens is revealed at once, without the fade (app.js adds
   and then removes this class). Map city pings pause while their map is off screen. */
.reveal.rv-now,#captains.cn .reveal.rv-now{transition:none!important}
#heroMap.map-idle .ring,#heroMap.map-idle .lit,#pcMap.map-idle .ring,#pcMap.map-idle .lit{animation-play-state:paused}
/* The hero's allowance for the nav and ticker (min-height: 100svh minus it). app.js measures and writes
   the real value, but the page can paint before app.js runs, and the design's 106px fallback then moved
   the hero's content by a few pixels (a load-time layout shift, in the original too). These are the
   measured nav + ticker heights at each range, so the first paint already matches; app.js still wins. */
.hero{--chrome:113px}
@media(max-width:1189px){.hero{--chrome:131px}}
@media(max-width:960px){.hero{--chrome:111px}}
@media(max-width:560px){.hero{--chrome:104px}}
/* Same for the nav height used by anchor offsets and the drawer: with the usual value already in CSS,
   app.js only writes to :root (a whole-page restyle) when the measured height differs. */
:root{--navh:78px}
@media(max-width:1189px){:root{--navh:96px}}
@media(max-width:960px){:root{--navh:76px}}
@media(max-width:560px){:root{--navh:69px}}
/* Statement points on phones: laid out open at the design's open size, so opening them never moves
   the headline through layout; app.js replays the design's max-height and margin-top transition with
   translate and clip-path instead */
@media(max-width:720px){.stmt-points,.stmt-points.on{max-height:900px;margin-top:34px;transition:none}}

/* ---- as featured in: the real marks of outlets that covered WPS, white on the claret ----
   Each mark sits in a box the size of the design's text label in that slot (10.5px caps on a 17px
   line, plus its 2px underline gap and 1px underline), so the row keeps the design's spacing and
   wraps at the same widths. Slot order: Reuters, ESPN, Bloomberg, USA Today, SportBusiness.
   Every mark is then drawn 30% larger than that label size, twice over (both box and height scaled
   by 1.69, so the marks keep their relative weighting). The row box grew with them: it is border-box
   over a 2px underline gap and a 1px underline, so 23.28px is the smallest box whose content area
   still holds the tallest mark (Sportstar, 20.28px). */
.stmt-points .press a span{display:inline-flex;align-items:center;justify-content:center;height:23.28px;line-height:1}
.stmt-points .press .plogo{display:block;width:auto;height:21.97px;max-width:100%;object-fit:contain;filter:brightness(0) invert(1)}
.stmt-points .press a:has(.pl-sportstar) span{width:107.6px}
.stmt-points .press a:has(.pl-ani) span{width:61.5px}
.stmt-points .press a:has(.pl-sportbusiness) span{width:144.53px}
.stmt-points .press a:has(.pl-businessstandard) span{width:129.39px}
.stmt-points .press a:has(.pl-economictimes) span{width:193.37px}
.stmt-points .press .pl-sportstar{height:20.28px}
.stmt-points .press .pl-ani{height:18.59px}
.stmt-points .press .pl-sportbusiness{height:20.28px}
.stmt-points .press .pl-businessstandard{height:15.21px}
.stmt-points .press .pl-economictimes{height:16.9px}
/* 2026-09-20: on phones the five marks wrap onto two lines, and site.css's hover arrow still
   takes its place in each link at opacity 0 — a 7px gap plus the glyph, sitting after the mark.
   That dead space lands at the end of every line, so each centred line pushes its marks left of
   the column's centre by half the arrow and the two lines stop short at different x. A phone
   cannot hover the arrow into view, so take it out of the flow below 720px and let each line
   centre on the marks themselves. */
@media(max-width:720px){.stmt-points .press a:after{display:none}}

/* ---- press cards: real thumbnails, whole card is the link ---- */
a.upd{display:block;color:inherit;text-decoration:none;transition:border-color .3s ease,transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
a.upd:hover,a.upd:focus-visible{color:inherit;border-color:var(--papaya);transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(14,11,11,.45)}
a.upd:hover .t,a.upd:focus-visible .t{color:var(--papaya)}
/* thumbnails are wider than the card with the outlet's badge top right, so crop from the left */
.upd .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transition:transform .6s cubic-bezier(.22,1,.36,1)}
a.upd:hover .im img{transform:scale(1.045)}
.upd .t{transition:color .25s ease}
.upd .dt .ext{margin-left:8px;display:inline-block;transition:transform .3s ease}
a.upd:hover .dt .ext{transform:translate(2px,-2px)}
.updall{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.updall:hover{color:var(--papaya)!important}
.updall .ext{transition:transform .3s ease}
.updall:hover .ext{transform:translate(2px,-2px)}

/* ---- How to Play layers: the real clip and its tracking, drawn where the stills were ----
   The video and the canvases share one object-fit; kte-layers.js sets the same object-position on
   all four every frame (it follows the player across the 16:9 capture). */
#how.hiw3 .hk-plane video,#how.hiw3 .hk-plane .hk-cv{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%}
/* The clip runs at its own exposure. The design dimmed its still so the white layers would read on
   top, but under the real footage saturate(.5) brightness(.6) left the video looking grey. The
   dimming stays on the stills: site.css scopes it to .hk-plane img, which this page has none of. */
#how.hiw3 .hk-plane .hk-cv{pointer-events:none}
/* The three tracking planes are glass: only their lines and their label, no ground. The design gave
   every plane the same tinted ground, which stacked three times over the clip and left the video
   under a dark wash. The base plane keeps its ground (the poster sits on it before the clip loads). */
#how.hiw3 .hk-plane[data-p=skel],#how.hiw3 .hk-plane[data-p=ball],#how.hiw3 .hk-plane[data-p=venue]{background:transparent}
/* and they sit further apart at rest, so each one reads on its own (was 70px between planes).
   Above 720px only: below that the stage is shorter and clips, and keeps its own spacing.
   :not(:hover) because site.css's hover rules only beat its resting ones on source order, and
   this file is read later; hovering still separates the planes the whole way. */
@media(min-width:721px){
  #how.hiw3 .hk-stage.in:not(:hover) .hk-plane[data-p=base]{transform:translateZ(-145px)}
  #how.hiw3 .hk-stage.in:not(:hover) .hk-plane[data-p=skel]{transform:translateZ(-50px)}
  #how.hiw3 .hk-stage.in:not(:hover) .hk-plane[data-p=ball]{transform:translateZ(45px)}
  #how.hiw3 .hk-stage.in:not(:hover) .hk-plane[data-p=venue]{transform:translateZ(140px)}
}

/* ---- waitlist form ---- */
.wl-pot{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.wl-submit[aria-busy="true"]{opacity:.7;cursor:progress}

/* ---- waitlist success screen: legible on the WPS reserve ground ----
   The design's success screen colours its summary, next steps and links with the ink and papaya
   tokens. On the WBL page that sat on vermillion and read fine; the WPS design darkened the reserve
   section to #4E070B..#240406, and the same text became near-invisible (checked by submitting the
   design's own form). Same layout and type, the section's existing on-dark whites. */
#reserve .wl-done .sum .k{color:rgba(255,255,255,.7)}
#reserve .wl-done .sum .v{color:#fff}
#reserve .wl-done .next .hd{color:#fff}
#reserve .wl-done .next li{color:rgba(255,255,255,.86)}
#reserve .wl-done .next li:before{color:rgba(255,255,255,.6)}
#reserve .wl-done .qs a,#reserve .wl-done .qs a i{color:#fff}
#reserve .wl-done .qs a:hover{color:rgba(255,255,255,.75)}

/* ---- keyboard affordances ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:500;background:var(--ink);color:#fff;padding:12px 20px;font-family:var(--disp);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:12px;top:12px;color:#fff}
:focus-visible{outline:2px solid var(--papaya);outline-offset:3px}
.g-verm :focus-visible,.hero :focus-visible,.heroflow :focus-visible,#reserve :focus-visible,footer :focus-visible,#finalstage :focus-visible,.hk-meas :focus-visible{outline-color:#fff}
.btn:focus-visible{outline-offset:2px}

/* ---- no sideways scroll between 721px and 820px ----
   In that range the design keeps the desktop timeline's 64px side padding but sizes the 2027 launch
   node for the phone rail (100vw - 48px), so it ran 16px past the viewport and the page scrolled
   sideways (the design does the same). Clipping the section at the viewport edge removes the scroll;
   nothing moves, and the node's centred copy sits well inside the viewport. */
@media(min-width:721px) and (max-width:820px){#history{overflow-x:clip}}

/* ---- phones: the rewards block is one raised card, and the reward barrel turns sideways ----
   Asked for on 20 Sep 2026: match the Future of Sports home page, where the barrel spins about a
   vertical axis and the prize copy, the host and the barrel all sit together on a raised white card,
   so the block reads as one dedicated panel instead of loose rows on the page.
   js/app.js switches the barrel to rotateY under 900px; the fade has to run left to right with it,
   and its panels have to span the full width and be allowed to wrap, because sideways they tile edge
   to edge around the cylinder rather than stacking. Nothing here applies above 900px. */
@media(max-width:900px){
  #rewards .pz{padding:16px 18px 28px;border-radius:18px;background:linear-gradient(#fff,#F7F3EE);border:1px solid rgba(14,11,11,.08);box-shadow:inset 0 1px 0 #fff,0 2px 4px -2px rgba(14,11,11,.10),0 18px 28px -18px rgba(14,11,11,.30),0 44px 62px -42px rgba(14,11,11,.34)}
  #rewards .drum{min-height:120px!important;height:auto;padding:0;overflow:hidden;perspective:700px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  #rewards .drum .ln{left:0;right:0;width:auto;max-width:none;box-sizing:border-box;padding:0 8px;white-space:normal;text-wrap:balance;line-height:1.1}
}

/* ---- the layer label is a label, not a chip ----
   Asked for on 20 Sep 2026: drop the tinted box behind each layer's caption and the 01-04 numbering
   in front of it (the numbers came out of index.html), so the caption reads as plain white type on
   the footage the way the layer console on the Future of Sports home page does. Same on /wbl, /tlc. */
#how.hiw3 .hk-tag{background:none;padding:0;border-radius:0}

/* ---- pricing switch: the same slide as /tlc ----
   Asked for on 20 Sep 2026: match the Club / Pro switch to the one on /tlc, which slides cleanly.
   The switch carries the class "pro" so its pill can slide, which also hands it the Pro plan's own
   rules. site.css answers that at its .od-seg declaration, but a later 900px block re-states
   ".od>div.pro{padding:0!important;border-right:0!important}" and wins on source order, so the
   moment Pro was picked the switch lost its 3px padding and its right edge and snapped smaller
   underneath the sliding pill. /tlc keeps its shape through the slide because port.css re-states the
   switch's own declaration last; this does the same with site.css's values. */
@media(max-width:900px){#pricing .od>div.od-seg{padding:3px!important;border:1px solid var(--rule)!important}}
/* fsp-www-registered-mark (30 Sep 2026): a 24px+ touch target, same layout */
#pricing .od .od-more{padding:5px 0;margin:-5px 0}