/* Vukron public site (home, overview, purpose, for venues, legal, sign-in), rebuilt 14 Oct 2026 against the owner's
   $10K checklist (docs/design-redesign/REDESIGN-CHECKLIST.md). Loaded by Pages/Shared/_Layout only, on top of site.css,
   so the signed-in app keeps its own look.

   Point of view: a floodlit night match. Big condensed Anton for the few lines that matter, Manrope for everything
   you read, and lime only where you can act. Structure comes from space and hairlines, not from boxes: the sports
   cards are the one loud thing on the page.

   Colour: pitch #0A0C10 · chalk #F4F2EC · floodlight lime #D4FF3A (actions) · steel #8B939E · surface #13171D. */

:root { --pb-steel: #8B939E; --pb-ease: cubic-bezier(.2, .7, .1, 1); --pb-space: clamp(72px, 9vw, 136px); }
:root[data-theme="light"] { --pb-steel: #5E6470; }

/* ---------- Accessibility helpers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--lime); color: var(--on-fill); font-weight: 800; transition: top .15s; }
.skip-link:focus { top: 12px; color: var(--on-fill); }
main:focus { outline: none; }

/* ---------- Type ---------- */
.pb-h2 { font: 800 clamp(2rem, 3.4vw, 3.1rem)/1.04 var(--body); letter-spacing: -.028em; margin: 0 0 16px; color: var(--text); text-wrap: balance; }
.pb-display { font: 400 clamp(3rem, 7.2vw, 6.6rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 24px; color: var(--text); }
.pb-lead { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.6; color: var(--text2); max-width: 54ch; margin: 0 0 28px; text-wrap: pretty; }
.pb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pb-section { padding: var(--pb-space) 0; }

/* ---------- Header and footer ---------- */
.footer-h { font: 700 .8rem/1 var(--body); letter-spacing: .02em; color: var(--text3); margin: 0 0 14px; }
.nav-signin { display: none; }
.menu-toggle[aria-expanded="true"] { border-color: var(--lime-line); color: var(--text); }

/* Home: the header sits over the hero, clear until you scroll, then takes its usual shade. While clear it uses the
   dark theme's colours in both themes, because the hero is always the dark floodlit picture. */
@media (min-width: 981px) {
.pb-home .site-header { position: fixed; inset: 0 0 auto; transition: background-color .3s, border-color .3s, backdrop-filter .3s; }
.pb-home .site-header:not(.is-solid):not(.open) {
    background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    --text: #F4F2EC; --text2: #D5D9D0; --line: rgba(244,242,236,.22); --line3: rgba(244,242,236,.45); --surface: rgba(10,12,16,.35); --raised: rgba(10,12,16,.35);
    color: #F4F2EC;
}
.pb-home .site-header:not(.is-solid):not(.open) .brand-word { color: #F4F2EC; }
}

/* Small screens: the menu opens as a full sheet with big links, not a dropdown. */
@media (max-width: 860px) {
    .site-header.open .nav {
        position: fixed; inset: 74px 0 0; top: 74px; display: flex; flex-direction: column; gap: 0;
        padding: 12px var(--gutter) 32px; background: var(--bg); border: 0; overflow-y: auto;
    }
    .site-header.open .nav a { font: 400 2.4rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--text); padding: 18px 0; border-bottom: 1px solid var(--line2); }
    .site-header.open .nav a.active { color: var(--lime-ink); border-bottom-color: var(--line2); }
    .site-header.open .nav-signin { display: block; }
    body.menu-open { overflow: hidden; }
    /* A backdrop-filter makes the header the sheet's containing block, which trapped the sheet inside the 74px bar;
       while the menu is open the header is solid instead. */
    .site-header.open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
}

/* ---------- Home hero ---------- */
.pb-hero { min-height: clamp(620px, 100svh, 1000px); }
.pb-hero .fp-hero-inner { padding-top: 150px; padding-bottom: 40px; }
.pb-hero .fp-hero-text { max-width: 820px; }
/* Wide screens: the picture starts under the clear header (75px), so the logo at the top of a banner isn't hidden
   behind the menu (owner, 15 Oct: pictures fill the hero now, see site.css). */
@media (min-width: 981px) { .pb-hero .fp-stage { top: 75px; } }
.pb-hero .pb-hero-title { font: 400 clamp(3.6rem, 9.4vw, 10rem)/.86 var(--display); letter-spacing: .004em; text-transform: uppercase; margin: 0 0 28px; color: #F4F2EC; }
.pb-hero p { max-width: 46ch; }
/* "Now in beta" pill above the headline (29 Oct 2026). Always on the dark hero picture, so fixed light-on-dark colours
   like .fp-ghost; 44 px tall for touch, wraps on a 320 px phone. */
.pb-beta-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 22px; padding: 8px 16px 8px 14px; border-radius: 999px;
    border: 1px solid rgba(212,255,58,.55); background: rgba(10,12,16,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #F4F2EC; font: 700 .9rem/1.3 var(--body); text-decoration: none; transition: border-color .2s, background-color .2s; }
.pb-beta-pill:hover { border-color: #D4FF3A; background: rgba(10,12,16,.75); color: #F4F2EC; }
.pb-beta-pill:focus-visible { outline: 3px solid #D4FF3A; outline-offset: 3px; }
.pb-beta-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #D4FF3A; box-shadow: 0 0 0 4px rgba(212,255,58,.2); }
.pb-beta-go { color: #D4FF3A; transition: transform .2s; }
.pb-beta-pill:hover .pb-beta-go { transform: translateX(3px); }
/* The one entrance on the page: the headline's lines rise out of their own baseline, then the words and buttons follow. */
.pb-line { display: block; overflow: hidden; padding-bottom: .04em; }
.pb-line > span { display: block; animation: pb-rise-line 1s var(--pb-ease) both; }
.pb-line + .pb-line > span { animation-delay: .09s; }
.pb-rise { animation: pb-fade-up .8s var(--pb-ease) .38s both; }
@keyframes pb-rise-line { from { transform: translateY(104%); } to { transform: none; } }
@keyframes pb-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Sports: tall poster cards in one sideways row ----------
   3:4 posters (owner, 14 Oct: tall is the premium look). Each sport has its own tall picture for this row (Admin ›
   Categories › Home poster: the 800 x 500 tile picture extended upwards, so nothing of the design is cut); the player's
   Home and the app keep the 800 x 500 tile picture. */
.pb-sports { padding: var(--pb-space) 0 0; overflow: hidden; }
.pb-sports-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.pb-sports-head .pb-lead { margin-bottom: 0; }
.pb-sports-tools { display: flex; align-items: center; gap: 12px; }
.pb-search { display: flex; align-items: center; gap: 10px; width: min(300px, 100%); min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text3); }
.pb-search:focus-within { border-color: var(--blue-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-ink) 25%, transparent); }
.pb-search input { flex: 1; min-width: 0; min-height: 46px; border: 0; outline: 0; background: transparent; color: var(--text); font: 600 1rem var(--body); }
.pb-rail-nav { display: flex; gap: 8px; }
.pb-rail-nav .icon-btn:disabled { opacity: .35; cursor: default; }

.pb-rail {
    list-style: none; margin: 40px 0 0; padding: 4px var(--gutter) 24px;
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 21.5vw, 330px); gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}
.pb-rail::-webkit-scrollbar { display: none; }
.pb-rail > li { scroll-snap-align: start; }
.pb-sport {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
    aspect-ratio: 3 / 4; padding: 24px; border-radius: 22px; color: #F4F2EC;
    background: radial-gradient(130% 80% at 85% 0%, color-mix(in srgb, var(--sport, #D4FF3A) 34%, transparent), transparent 62%), #13171D;
}
.pb-sport:hover, .pb-sport:focus-visible { color: #F4F2EC; }
.pb-sport img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--pb-ease); }
.pb-sport::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(8,10,12,.9) 0%, rgba(8,10,12,.45) 42%, rgba(8,10,12,0) 72%); }
.pb-sport.no-photo::after { background: linear-gradient(0deg, rgba(8,10,12,.6) 0%, transparent 50%); }
.pb-sport-icon { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: rgba(10,12,16,.5); border: 1px solid rgba(244,242,236,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pb-sport-icon img.icon-dark { display: none !important; }
.pb-sport-icon img.icon-light { display: block !important; }
.pb-sport-name { font: 400 clamp(2.1rem, 2.7vw, 2.9rem)/.92 var(--display); text-transform: uppercase; letter-spacing: .01em; }
/* What answers the pointer: the picture leans in and a lime line draws under the name. */
.pb-sport-go { position: relative; align-self: flex-start; margin-top: 10px; padding-bottom: 6px; font-weight: 700; font-size: .92rem; color: #D5D9D0; }
.pb-sport-go::after { content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px; border-radius: 2px; background: #D4FF3A; transition: width .45s var(--pb-ease); }
.pb-sport:hover img, .pb-sport:focus-visible img { transform: scale(1.06); }
.pb-sport:hover .pb-sport-go::after, .pb-sport:focus-visible .pb-sport-go::after { width: 100%; }
.pb-sport:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
.pb-sports [data-sport-empty] { margin-top: 8px; }

/* ---------- The sports sphere (js/sport-sphere.js): shown instead of the row where 3D can run ---------- */
.pb-sports.has-sphere .pb-rail, .pb-sports.has-sphere .pb-rail-nav { display: none; }
.pb-sphere { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 12px; padding-bottom: calc(var(--pb-space) * .55); }
.pb-sphere[hidden] { display: none; }
.pb-sphere-side { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-chips .chip { min-height: 44px; padding: 0 18px; font: 700 .95rem/1 var(--body); cursor: pointer; color: var(--text2); background: transparent; transition: border-color .2s, color .2s, background .2s; }
.pb-chips .chip:hover { border-color: var(--line3); color: var(--text); }
.pb-chips .chip[aria-pressed="true"] { border-color: var(--lime-line); color: var(--lime-ink); background: var(--lime-tint); }
.pb-chips .chip:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
.pb-chips .chip-more { color: var(--text3); }
.pb-focus { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pb-focus-eyebrow { font: 800 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--lime-ink); }
.pb-focus-name { font: 800 clamp(1.6rem, 2.2vw, 2rem)/1.1 var(--body); letter-spacing: -.02em; margin: 12px 0 6px; color: var(--text); }
.pb-focus-line { margin: 0 0 20px; color: var(--text2); }
.pb-focus-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-sphere-visual { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.pb-sphere-stage { position: relative; width: 100%; max-width: 880px; aspect-ratio: 1 / 1; border-radius: 28px; cursor: grab; touch-action: pan-y;
    background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--lime) 6%, transparent), transparent 62%); }
.pb-sphere-stage:active { cursor: grabbing; }
.pb-sphere-stage:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 4px; }
.pb-sphere-stage canvas { position: absolute; inset: -15%; display: block; width: 130% !important; height: 130% !important; pointer-events: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); transition: opacity .35s var(--pb-ease), filter .35s var(--pb-ease); }
.pb-sphere-stage.is-focused canvas { opacity: .35; filter: blur(2px); }
.pb-sphere-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text3); font-weight: 700; }
.pb-sphere-loading[hidden] { display: none; }
.pb-sphere-controls { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.pb-sphere-controls .icon-btn { width: 44px; height: 44px; }
.pb-sphere-hint { padding: 0 10px; font: 800 .7rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }
.pb-sphere-side .pb-search { width: 100%; }
/* The sport in focus: a large flat card over the dimmed sphere, with the green edge */
.pb-featured { position: absolute; inset: 8% 6%; z-index: 2; display: flex; flex-direction: column; overflow: hidden; cursor: default;
    border: 2px solid var(--lime-line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow), 0 30px 80px -30px rgba(0,0,0,.7);
    animation: pb-featured-in .35s var(--pb-ease) both; }
.pb-featured[hidden] { display: none; }
@keyframes pb-featured-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.pb-featured-image { position: relative; flex: 1 1 auto; min-height: 0; background: var(--photo); }
.pb-featured-image img:not(.sport-icon) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-featured-icon { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: rgba(10,12,16,.6); border: 1px solid rgba(244,242,236,.25); }
.pb-featured-icon:empty { display: none; }
.pb-featured-icon img { position: static; width: 28px; height: 28px; }
.pb-featured-badge { position: absolute; top: 22px; right: 18px; padding: 6px 10px; border-radius: 999px; font: 800 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
    color: #0A0C10; background: #D4FF3A; }
.pb-featured-body { padding: 20px 22px 22px; }
.pb-featured-body h3 { font: 400 clamp(2rem, 3vw, 2.6rem)/.95 var(--display); text-transform: uppercase; margin: 0 0 8px; color: var(--text); }
.pb-featured-body p { margin: 0 0 16px; color: var(--text2); }
.pb-featured-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-featured-actions .btn { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .pb-featured { animation: none; } .pb-sphere-stage canvas { transition: none; } }
/* Large screens: the globe grows to nearly the screen's height and drifts left behind the search and chips, which turn
   to frosted glass over it; a soft fade behind the left column keeps the words readable (owner, 23 Oct 2026). */
@media (min-width: 1101px) {
    .pb-sphere { position: relative; }
    /* The globe's area runs from under the panel to the screen's right edge, and the ball fills it across */
    .pb-sphere-visual { margin-left: -14vw; margin-right: calc(-1 * var(--gutter)); }
    .pb-sphere-stage { width: 100%; max-width: none; aspect-ratio: auto; height: clamp(620px, calc(100vh - 110px), 980px); background: none; }
    /* The sport in focus stays a card-sized card in the middle of the wide area */
    .pb-featured { inset: 0; margin: auto; width: min(640px, 70%); height: min(580px, 88%); }
    .pb-sphere-side { isolation: isolate; }
    .pb-sphere-side::before { content: ""; position: absolute; z-index: -1; inset: -64px -140px -64px -48px; pointer-events: none;
        background: radial-gradient(120% 90% at 0% 50%, color-mix(in srgb, var(--bg) 86%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, transparent 100%); }
    .pb-sphere-side .pb-search, .pb-sphere-side .pb-chips .chip, .pb-sphere-side .pb-focus {
        background: color-mix(in srgb, var(--surface) 42%, transparent);
        border-color: color-mix(in srgb, var(--text) 14%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
        box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 14px 40px -22px rgba(0,0,0,.7);
    }
    .pb-sphere-side .pb-chips .chip:hover { background: color-mix(in srgb, var(--surface) 62%, transparent); }
    .pb-sphere-side .pb-chips .chip[aria-pressed="true"] { background: color-mix(in srgb, var(--lime) 16%, transparent); border-color: var(--lime-line);
        box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--lime) 18%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--lime) 55%, transparent); }
    .pb-sphere-side .pb-focus { background: color-mix(in srgb, var(--surface) 52%, transparent); border-radius: 22px; }
}
/* Tablets and small laptops: the sphere full width on top, the search, chips and sport in focus below */
@media (max-width: 1100px) and (min-width: 761px) {
    .pb-sphere { grid-template-columns: 1fr; gap: 32px; }
    .pb-sphere-visual { order: -1; }
    .pb-sphere-stage { max-width: 760px; }
    .pb-sphere-side { width: 100%; max-width: 760px; margin: 0 auto; }
}

/* ---------- How it works: the runners beside the three steps ---------- */
.pb-how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.pb-how-art { margin: 0; }
.pb-how-art img { width: 100%; height: auto; aspect-ratio: 2 / 3; max-height: 820px; object-fit: cover; border-radius: 24px; background: var(--surface); }
.pb-steps { list-style: none; counter-reset: step; margin: 40px 0 0; padding: 0; }
.pb-steps li { counter-increment: step; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.pb-steps li:last-child { border-bottom: 1px solid var(--line); }
.pb-steps li::before { content: counter(step); grid-row: span 2; font: 400 3.4rem/.9 var(--display); color: var(--pb-steel); }
.pb-steps h3 { font: 800 1.35rem/1.2 var(--body); letter-spacing: -.01em; margin: 2px 0 6px; }
.pb-steps p { margin: 0; max-width: 46ch; }
/* Across instead of down (For venues). */
.pb-steps.is-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.pb-steps.is-row li { grid-template-columns: 1fr; border-bottom: 0; padding-top: 28px; }
.pb-steps.is-row li::before { grid-row: auto; margin-bottom: 20px; font-size: 4.4rem; color: var(--text); }

/* ---------- The venue pitch and the Court Board drawing ---------- */
.pb-owner { background: var(--bg2); border-block: 1px solid var(--line2); }
.pb-owner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.pb-board { margin: 0; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.pb-board-grid { display: grid; grid-template-columns: 52px repeat(4, minmax(0, 1fr)); grid-template-rows: 34px repeat(8, 42px); gap: 6px; }
.pb-board-court { grid-row: 1; align-self: center; font: 700 .8rem/1 var(--mono); color: var(--text2); padding-left: 4px; }
.pb-board-time { grid-column: 1; align-self: start; font: 500 .72rem/1 var(--mono); color: var(--text3); padding-top: 2px; border-top: 1px solid var(--line2); }
.pb-board-slot { display: flex; align-items: flex-start; padding: 8px 10px; border-radius: 10px; font: 700 .78rem/1.2 var(--body); overflow: hidden; }
.pb-board-slot.is-online { background: var(--lime); color: #10140A; }
.pb-board-slot.is-desk { background: var(--raised); color: var(--text); border: 1px solid var(--line3); }
.pb-board-slot.is-open { color: var(--lime-ink); border: 1.5px dashed var(--lime-line); }
.pb-board-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line2); font-size: .85rem; font-weight: 600; color: var(--text2); }
.pb-board-key span { display: inline-flex; align-items: center; gap: 8px; }
.pb-board-key i { width: 14px; height: 14px; border-radius: 4px; }
.pb-board-key i.is-online { background: var(--lime); }
.pb-board-key i.is-desk { background: var(--raised); border: 1px solid var(--line3); }
.pb-board-key i.is-open { border: 1.5px dashed var(--lime-line); }

/* ---------- Closing ---------- */
.pb-close .pb-display { max-width: 22ch; text-wrap: balance; }
.pb-close-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.pb-close-row .pb-lead { margin: 0; }

/* Phones: the hero's main button waits at the bottom once the hero has scrolled away. */
.pb-dock { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 45; transition: transform .35s var(--pb-ease), opacity .35s; }
.pb-dock.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 761px) { .pb-dock { display: none !important; } }

/* ---------- Inner pages: hero, feature lists, statements, picture band ---------- */
.pb-pagehero { padding: clamp(64px, 9vw, 128px) 0 clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line2); }
.pb-pagehero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.pb-pagehero h1 { font: 400 clamp(3.4rem, 8.2vw, 8.2rem)/.86 var(--display); text-transform: uppercase; letter-spacing: .004em; margin: 0; color: var(--text); }
.pb-pagehero .pb-lead { margin-bottom: 24px; }
.pb-pagehero.has-art .pb-pagehero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.pb-pagehero.has-art h1 { font-size: clamp(3.2rem, 6.4vw, 6.6rem); margin-bottom: 24px; }

.pb-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.pb-split-head { position: sticky; top: 110px; }
.pb-split-head .pb-lead { margin-bottom: 24px; }
.pb-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.pb-features li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; padding: 24px 0; border-top: 1px solid var(--line); }
.pb-features svg { width: 22px; height: 22px; color: var(--lime-ink); margin-top: 3px; }
.pb-features h3 { font: 800 1.12rem/1.3 var(--body); margin: 0 0 6px; }
.pb-features p { margin: 0; font-size: .97rem; }

.pb-statements { margin: 0; }
.pb-statements > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px clamp(24px, 5vw, 80px); padding: clamp(28px, 3.4vw, 44px) 0; border-top: 1px solid var(--line); }
.pb-statements > div:last-child { border-bottom: 1px solid var(--line); }
.pb-statements dt { font: 700 1rem/1.4 var(--body); color: var(--text3); }
.pb-statements dd { margin: 0; font: 600 clamp(1.3rem, 2.15vw, 1.9rem)/1.38 var(--body); letter-spacing: -.012em; color: var(--text); max-width: 40ch; }

.pb-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
.pb-principles li { padding: 30px 0; border-top: 1px solid var(--line); }
.pb-principles h3 { font: 800 1.4rem/1.2 var(--body); letter-spacing: -.01em; margin: 0 0 10px; }
.pb-principles p { margin: 0; max-width: 48ch; }

.pb-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.pb-terms > div { padding-top: 28px; border-top: 1px solid var(--line); }
.pb-terms h3 { font: 800 1.4rem/1.2 var(--body); margin: 0 0 10px; }
.pb-terms .link-btn { text-decoration: underline; text-underline-offset: 4px; }

/* A full-width picture with one line over it. Always the dark floodlit look. */
.pb-band { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(440px, 52vw, 760px); background: #0A0C10; color: #F4F2EC; }
.pb-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; } /* the picture's logo sits at the right edge: keep it whole */
.pb-band::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(8,10,12,.9) 0%, rgba(8,10,12,.55) 40%, rgba(8,10,12,0) 75%), linear-gradient(0deg, rgba(8,10,12,.85) 0%, transparent 45%); }
.pb-band .wrap { padding: clamp(40px, 6vw, 88px) 0; }
.pb-band .pb-display { color: #F4F2EC; max-width: 12ch; }
.pb-band .pb-lead { color: #D5D9D0; }
.pb-band .btn:not(.btn-primary) { background: rgba(10,12,16,.4); border-color: rgba(244,242,236,.4); color: #F4F2EC; }

/* ---------- Tablets and phones: laid out for the hand, not shrunk ---------- */
@media (max-width: 980px) {
    .pb-how, .pb-owner-grid, .pb-pagehero-grid, .pb-pagehero.has-art .pb-pagehero-grid, .pb-split { grid-template-columns: 1fr; }
    .pb-how-art img { max-height: 520px; aspect-ratio: 4 / 5; object-position: center 30%; }
    .pb-split-head { position: static; }
    .pb-steps.is-row { grid-template-columns: 1fr; }
    .pb-steps.is-row li { grid-template-columns: 64px minmax(0, 1fr); padding-top: 24px; }
    .pb-steps.is-row li::before { grid-row: span 2; margin: 0; font-size: 3.4rem; color: var(--pb-steel); }
    /* The stacked hero puts the picture on top (site.css), under the usual header, and is only as tall as it needs. */
    .pb-hero { min-height: 0; }
    .pb-hero .fp-hero-inner { padding-top: 28px; }
}
@media (max-width: 760px) {
    .pb-rail-nav { display: none; }
    .pb-sports-tools, .pb-search { width: 100%; }
    .pb-rail { grid-auto-columns: 70vw; gap: 12px; margin-top: 28px; }
    .pb-sport { padding: 20px; border-radius: 20px; }
    /* Phones: the sphere first, then the chips and the sport in focus; the card's buttons stack */
    .pb-sphere { grid-template-columns: 1fr; margin-top: 24px; gap: 24px; }
    .pb-sphere-visual { order: -1; }
    .pb-sphere-stage { border-radius: 20px; aspect-ratio: 4 / 5; }
    .pb-featured-image { min-height: 120px; }
    .pb-featured { inset: 4%; }
    .pb-featured-actions { flex-direction: column; }
    .pb-featured-actions .btn, .pb-focus-actions .btn { width: 100%; justify-content: center; }
    .pb-sphere-hint { display: none; }
    .pb-features, .pb-principles, .pb-terms { grid-template-columns: 1fr; }
    .pb-statements > div { grid-template-columns: 1fr; }
    .pb-board-grid { grid-template-columns: 40px repeat(4, minmax(0, 1fr)); grid-template-rows: 30px repeat(8, 34px); gap: 4px; }
    .pb-board-slot { font-size: 0; padding: 0; }
    .pb-board-court { font-size: .68rem; padding-left: 2px; }
    .pb-home .site-footer { padding-bottom: 104px; }
    .pb-close-row .pb-actions, .pb-close-row .pb-actions .btn { width: 100%; }
}
@media (max-width: 430px) {
    .pb-hero .pb-hero-title { font-size: clamp(3.2rem, 17vw, 4.6rem); }
}

@media (prefers-reduced-motion: reduce) {
    .pb-line > span, .pb-rise { animation: none; }
    .pb-sport img, .pb-sport-go::after, .pb-dock, .pb-home .site-header { transition: none; }
    .pb-sport:hover img, .pb-sport:focus-visible img { transform: none; }
}

/* Links inside running text are underlined as well as lime, so they don't rely on colour alone (WCAG 1.4.1). */
.pb-principles p a, .pb-statements a, .pb-lead a { color: var(--lime-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Account type switch on Register: two links styled as the segmented choice. */
.segmented .seg-opt { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: var(--surface); display: grid; gap: 2px; color: var(--text); }
.segmented .seg-opt strong { font-size: 1rem; }
.segmented .seg-opt span { font-size: .82rem; color: var(--text3); font-weight: 600; }
.segmented .seg-opt:hover { border-color: var(--line3); color: var(--text); }
.segmented .seg-opt[aria-current="page"] { border-color: var(--lime-line); background: var(--lime-tint); box-shadow: var(--glow); }
/* Legal index cards: real h2s (the page had h1 then h3), sized as before. */
.card h2.card-h { font: 800 1.3rem/1.2 var(--body); letter-spacing: 0; margin: 16px 0 .5em; }
/* Lime links in running text are underlined too, so they don't rely on colour alone (WCAG 1.4.1). */
p a.lime { text-decoration: underline; text-underline-offset: 3px; }

/* The close with its cinemagraph: always the dark floodlit look. The photo never moves on its own; the camera drifts
   in over 26 s, rain falls in two layers (near and fast, far and slow) and mist slides past. */
.pb-close-film { position: relative; isolation: isolate; overflow: hidden; background: #0A0C10; color: #F4F2EC;
    --text: #F4F2EC; --text2: #D5D9D0; --line: rgba(244,242,236,.22); --line3: rgba(244,242,236,.45); --raised: rgba(10,12,16,.45); }
.pb-close-film::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(8,10,12,.94) 0%, rgba(8,10,12,.7) 45%, rgba(8,10,12,.3) 100%), linear-gradient(0deg, rgba(8,10,12,.9) 0%, transparent 50%); }
.pb-close-film .pb-display { color: #F4F2EC; }
.pb-film { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pb-film-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; opacity: .62;
    transform-origin: 64% 42%; animation: pb-push 26s ease-in-out infinite alternate; }
.pb-film-rain { position: absolute; top: -180px; right: -40px; bottom: 0; left: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg stroke='%23fff' stroke-opacity='0.55' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='58.3' y1='27.2' x2='53.8' y2='49.7'/%3E%3Cline x1='58.3' y1='-152.8' x2='53.8' y2='-130.3'/%3E%3Cline x1='58.3' y1='207.2' x2='53.8' y2='229.7'/%3E%3Cline x1='-121.7' y1='27.2' x2='-126.2' y2='49.7'/%3E%3Cline x1='-121.7' y1='-152.8' x2='-126.2' y2='-130.3'/%3E%3Cline x1='-121.7' y1='207.2' x2='-126.2' y2='229.7'/%3E%3Cline x1='238.3' y1='27.2' x2='233.8' y2='49.7'/%3E%3Cline x1='238.3' y1='-152.8' x2='233.8' y2='-130.3'/%3E%3Cline x1='238.3' y1='207.2' x2='233.8' y2='229.7'/%3E%3Cline x1='13.0' y1='96.5' x2='9.1' y2='116.1'/%3E%3Cline x1='13.0' y1='-83.5' x2='9.1' y2='-63.9'/%3E%3Cline x1='13.0' y1='276.5' x2='9.1' y2='296.1'/%3E%3Cline x1='-167.0' y1='96.5' x2='-170.9' y2='116.1'/%3E%3Cline x1='-167.0' y1='-83.5' x2='-170.9' y2='-63.9'/%3E%3Cline x1='-167.0' y1='276.5' x2='-170.9' y2='296.1'/%3E%3Cline x1='193.0' y1='96.5' x2='189.1' y2='116.1'/%3E%3Cline x1='193.0' y1='-83.5' x2='189.1' y2='-63.9'/%3E%3Cline x1='193.0' y1='276.5' x2='189.1' y2='296.1'/%3E%3Cline x1='10.4' y1='91.3' x2='7.2' y2='107.7'/%3E%3Cline x1='10.4' y1='-88.7' x2='7.2' y2='-72.3'/%3E%3Cline x1='10.4' y1='271.3' x2='7.2' y2='287.7'/%3E%3Cline x1='-169.6' y1='91.3' x2='-172.8' y2='107.7'/%3E%3Cline x1='-169.6' y1='-88.7' x2='-172.8' y2='-72.3'/%3E%3Cline x1='-169.6' y1='271.3' x2='-172.8' y2='287.7'/%3E%3Cline x1='190.4' y1='91.3' x2='187.2' y2='107.7'/%3E%3Cline x1='190.4' y1='-88.7' x2='187.2' y2='-72.3'/%3E%3Cline x1='190.4' y1='271.3' x2='187.2' y2='287.7'/%3E%3Cline x1='78.1' y1='12.6' x2='74.7' y2='29.5'/%3E%3Cline x1='78.1' y1='-167.4' x2='74.7' y2='-150.5'/%3E%3Cline x1='78.1' y1='192.6' x2='74.7' y2='209.5'/%3E%3Cline x1='-101.9' y1='12.6' x2='-105.3' y2='29.5'/%3E%3Cline x1='-101.9' y1='-167.4' x2='-105.3' y2='-150.5'/%3E%3Cline x1='-101.9' y1='192.6' x2='-105.3' y2='209.5'/%3E%3Cline x1='258.1' y1='12.6' x2='254.7' y2='29.5'/%3E%3Cline x1='258.1' y1='-167.4' x2='254.7' y2='-150.5'/%3E%3Cline x1='258.1' y1='192.6' x2='254.7' y2='209.5'/%3E%3Cline x1='76.4' y1='148.8' x2='73.0' y2='166.1'/%3E%3Cline x1='76.4' y1='-31.2' x2='73.0' y2='-13.9'/%3E%3Cline x1='76.4' y1='328.8' x2='73.0' y2='346.1'/%3E%3Cline x1='-103.6' y1='148.8' x2='-107.0' y2='166.1'/%3E%3Cline x1='-103.6' y1='-31.2' x2='-107.0' y2='-13.9'/%3E%3Cline x1='-103.6' y1='328.8' x2='-107.0' y2='346.1'/%3E%3Cline x1='256.4' y1='148.8' x2='253.0' y2='166.1'/%3E%3Cline x1='256.4' y1='-31.2' x2='253.0' y2='-13.9'/%3E%3Cline x1='256.4' y1='328.8' x2='253.0' y2='346.1'/%3E%3Cline x1='40.2' y1='112.9' x2='35.1' y2='138.4'/%3E%3Cline x1='40.2' y1='-67.1' x2='35.1' y2='-41.6'/%3E%3Cline x1='40.2' y1='292.9' x2='35.1' y2='318.4'/%3E%3Cline x1='-139.8' y1='112.9' x2='-144.9' y2='138.4'/%3E%3Cline x1='-139.8' y1='-67.1' x2='-144.9' y2='-41.6'/%3E%3Cline x1='-139.8' y1='292.9' x2='-144.9' y2='318.4'/%3E%3Cline x1='220.2' y1='112.9' x2='215.1' y2='138.4'/%3E%3Cline x1='220.2' y1='-67.1' x2='215.1' y2='-41.6'/%3E%3Cline x1='220.2' y1='292.9' x2='215.1' y2='318.4'/%3E%3Cline x1='103.9' y1='71.4' x2='98.7' y2='97.2'/%3E%3Cline x1='103.9' y1='-108.6' x2='98.7' y2='-82.8'/%3E%3Cline x1='103.9' y1='251.4' x2='98.7' y2='277.2'/%3E%3Cline x1='-76.1' y1='71.4' x2='-81.3' y2='97.2'/%3E%3Cline x1='-76.1' y1='-108.6' x2='-81.3' y2='-82.8'/%3E%3Cline x1='-76.1' y1='251.4' x2='-81.3' y2='277.2'/%3E%3Cline x1='283.9' y1='71.4' x2='278.7' y2='97.2'/%3E%3Cline x1='283.9' y1='-108.6' x2='278.7' y2='-82.8'/%3E%3Cline x1='283.9' y1='251.4' x2='278.7' y2='277.2'/%3E%3Cline x1='8.4' y1='154.5' x2='4.6' y2='173.4'/%3E%3Cline x1='8.4' y1='-25.5' x2='4.6' y2='-6.6'/%3E%3Cline x1='8.4' y1='334.5' x2='4.6' y2='353.4'/%3E%3Cline x1='-171.6' y1='154.5' x2='-175.4' y2='173.4'/%3E%3Cline x1='-171.6' y1='-25.5' x2='-175.4' y2='-6.6'/%3E%3Cline x1='-171.6' y1='334.5' x2='-175.4' y2='353.4'/%3E%3Cline x1='188.4' y1='154.5' x2='184.6' y2='173.4'/%3E%3Cline x1='188.4' y1='-25.5' x2='184.6' y2='-6.6'/%3E%3Cline x1='188.4' y1='334.5' x2='184.6' y2='353.4'/%3E%3Cline x1='26.0' y1='21.2' x2='22.1' y2='40.3'/%3E%3Cline x1='26.0' y1='-158.8' x2='22.1' y2='-139.7'/%3E%3Cline x1='26.0' y1='201.2' x2='22.1' y2='220.3'/%3E%3Cline x1='-154.0' y1='21.2' x2='-157.9' y2='40.3'/%3E%3Cline x1='-154.0' y1='-158.8' x2='-157.9' y2='-139.7'/%3E%3Cline x1='-154.0' y1='201.2' x2='-157.9' y2='220.3'/%3E%3Cline x1='206.0' y1='21.2' x2='202.1' y2='40.3'/%3E%3Cline x1='206.0' y1='-158.8' x2='202.1' y2='-139.7'/%3E%3Cline x1='206.0' y1='201.2' x2='202.1' y2='220.3'/%3E%3Cline x1='146.9' y1='32.5' x2='142.5' y2='54.3'/%3E%3Cline x1='146.9' y1='-147.5' x2='142.5' y2='-125.7'/%3E%3Cline x1='146.9' y1='212.5' x2='142.5' y2='234.3'/%3E%3Cline x1='-33.1' y1='32.5' x2='-37.5' y2='54.3'/%3E%3Cline x1='-33.1' y1='-147.5' x2='-37.5' y2='-125.7'/%3E%3Cline x1='-33.1' y1='212.5' x2='-37.5' y2='234.3'/%3E%3Cline x1='326.9' y1='32.5' x2='322.5' y2='54.3'/%3E%3Cline x1='326.9' y1='-147.5' x2='322.5' y2='-125.7'/%3E%3Cline x1='326.9' y1='212.5' x2='322.5' y2='234.3'/%3E%3Cline x1='115.0' y1='67.0' x2='110.7' y2='88.5'/%3E%3Cline x1='115.0' y1='-113.0' x2='110.7' y2='-91.5'/%3E%3Cline x1='115.0' y1='247.0' x2='110.7' y2='268.5'/%3E%3Cline x1='-65.0' y1='67.0' x2='-69.3' y2='88.5'/%3E%3Cline x1='-65.0' y1='-113.0' x2='-69.3' y2='-91.5'/%3E%3Cline x1='-65.0' y1='247.0' x2='-69.3' y2='268.5'/%3E%3Cline x1='295.0' y1='67.0' x2='290.7' y2='88.5'/%3E%3Cline x1='295.0' y1='-113.0' x2='290.7' y2='-91.5'/%3E%3Cline x1='295.0' y1='247.0' x2='290.7' y2='268.5'/%3E%3Cline x1='11.3' y1='10.7' x2='7.7' y2='28.8'/%3E%3Cline x1='11.3' y1='-169.3' x2='7.7' y2='-151.2'/%3E%3Cline x1='11.3' y1='190.7' x2='7.7' y2='208.8'/%3E%3Cline x1='-168.7' y1='10.7' x2='-172.3' y2='28.8'/%3E%3Cline x1='-168.7' y1='-169.3' x2='-172.3' y2='-151.2'/%3E%3Cline x1='-168.7' y1='190.7' x2='-172.3' y2='208.8'/%3E%3Cline x1='191.3' y1='10.7' x2='187.7' y2='28.8'/%3E%3Cline x1='191.3' y1='-169.3' x2='187.7' y2='-151.2'/%3E%3Cline x1='191.3' y1='190.7' x2='187.7' y2='208.8'/%3E%3Cline x1='122.5' y1='77.0' x2='118.6' y2='96.1'/%3E%3Cline x1='122.5' y1='-103.0' x2='118.6' y2='-83.9'/%3E%3Cline x1='122.5' y1='257.0' x2='118.6' y2='276.1'/%3E%3Cline x1='-57.5' y1='77.0' x2='-61.4' y2='96.1'/%3E%3Cline x1='-57.5' y1='-103.0' x2='-61.4' y2='-83.9'/%3E%3Cline x1='-57.5' y1='257.0' x2='-61.4' y2='276.1'/%3E%3Cline x1='302.5' y1='77.0' x2='298.6' y2='96.1'/%3E%3Cline x1='302.5' y1='-103.0' x2='298.6' y2='-83.9'/%3E%3Cline x1='302.5' y1='257.0' x2='298.6' y2='276.1'/%3E%3Cline x1='105.4' y1='81.6' x2='101.6' y2='100.6'/%3E%3Cline x1='105.4' y1='-98.4' x2='101.6' y2='-79.4'/%3E%3Cline x1='105.4' y1='261.6' x2='101.6' y2='280.6'/%3E%3Cline x1='-74.6' y1='81.6' x2='-78.4' y2='100.6'/%3E%3Cline x1='-74.6' y1='-98.4' x2='-78.4' y2='-79.4'/%3E%3Cline x1='-74.6' y1='261.6' x2='-78.4' y2='280.6'/%3E%3Cline x1='285.4' y1='81.6' x2='281.6' y2='100.6'/%3E%3Cline x1='285.4' y1='-98.4' x2='281.6' y2='-79.4'/%3E%3Cline x1='285.4' y1='261.6' x2='281.6' y2='280.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 180px 180px; opacity: .4; animation: pb-rain-near .62s linear infinite; }
.pb-film-rain.is-far { top: -110px; right: -24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg stroke='%23fff' stroke-opacity='0.45' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='87.4' y1='76.9' x2='85.5' y2='86.4'/%3E%3Cline x1='87.4' y1='-33.1' x2='85.5' y2='-23.6'/%3E%3Cline x1='87.4' y1='186.9' x2='85.5' y2='196.4'/%3E%3Cline x1='-22.6' y1='76.9' x2='-24.5' y2='86.4'/%3E%3Cline x1='-22.6' y1='-33.1' x2='-24.5' y2='-23.6'/%3E%3Cline x1='-22.6' y1='186.9' x2='-24.5' y2='196.4'/%3E%3Cline x1='197.4' y1='76.9' x2='195.5' y2='86.4'/%3E%3Cline x1='197.4' y1='-33.1' x2='195.5' y2='-23.6'/%3E%3Cline x1='197.4' y1='186.9' x2='195.5' y2='196.4'/%3E%3Cline x1='63.2' y1='57.8' x2='60.5' y2='71.0'/%3E%3Cline x1='63.2' y1='-52.2' x2='60.5' y2='-39.0'/%3E%3Cline x1='63.2' y1='167.8' x2='60.5' y2='181.0'/%3E%3Cline x1='-46.8' y1='57.8' x2='-49.5' y2='71.0'/%3E%3Cline x1='-46.8' y1='-52.2' x2='-49.5' y2='-39.0'/%3E%3Cline x1='-46.8' y1='167.8' x2='-49.5' y2='181.0'/%3E%3Cline x1='173.2' y1='57.8' x2='170.5' y2='71.0'/%3E%3Cline x1='173.2' y1='-52.2' x2='170.5' y2='-39.0'/%3E%3Cline x1='173.2' y1='167.8' x2='170.5' y2='181.0'/%3E%3Cline x1='80.2' y1='31.7' x2='77.5' y2='45.6'/%3E%3Cline x1='80.2' y1='-78.3' x2='77.5' y2='-64.4'/%3E%3Cline x1='80.2' y1='141.7' x2='77.5' y2='155.6'/%3E%3Cline x1='-29.8' y1='31.7' x2='-32.5' y2='45.6'/%3E%3Cline x1='-29.8' y1='-78.3' x2='-32.5' y2='-64.4'/%3E%3Cline x1='-29.8' y1='141.7' x2='-32.5' y2='155.6'/%3E%3Cline x1='190.2' y1='31.7' x2='187.5' y2='45.6'/%3E%3Cline x1='190.2' y1='-78.3' x2='187.5' y2='-64.4'/%3E%3Cline x1='190.2' y1='141.7' x2='187.5' y2='155.6'/%3E%3Cline x1='13.0' y1='46.0' x2='10.5' y2='58.5'/%3E%3Cline x1='13.0' y1='-64.0' x2='10.5' y2='-51.5'/%3E%3Cline x1='13.0' y1='156.0' x2='10.5' y2='168.5'/%3E%3Cline x1='-97.0' y1='46.0' x2='-99.5' y2='58.5'/%3E%3Cline x1='-97.0' y1='-64.0' x2='-99.5' y2='-51.5'/%3E%3Cline x1='-97.0' y1='156.0' x2='-99.5' y2='168.5'/%3E%3Cline x1='123.0' y1='46.0' x2='120.5' y2='58.5'/%3E%3Cline x1='123.0' y1='-64.0' x2='120.5' y2='-51.5'/%3E%3Cline x1='123.0' y1='156.0' x2='120.5' y2='168.5'/%3E%3Cline x1='16.7' y1='53.8' x2='15.1' y2='62.0'/%3E%3Cline x1='16.7' y1='-56.2' x2='15.1' y2='-48.0'/%3E%3Cline x1='16.7' y1='163.8' x2='15.1' y2='172.0'/%3E%3Cline x1='-93.3' y1='53.8' x2='-94.9' y2='62.0'/%3E%3Cline x1='-93.3' y1='-56.2' x2='-94.9' y2='-48.0'/%3E%3Cline x1='-93.3' y1='163.8' x2='-94.9' y2='172.0'/%3E%3Cline x1='126.7' y1='53.8' x2='125.1' y2='62.0'/%3E%3Cline x1='126.7' y1='-56.2' x2='125.1' y2='-48.0'/%3E%3Cline x1='126.7' y1='163.8' x2='125.1' y2='172.0'/%3E%3Cline x1='73.5' y1='84.1' x2='71.2' y2='95.5'/%3E%3Cline x1='73.5' y1='-25.9' x2='71.2' y2='-14.5'/%3E%3Cline x1='73.5' y1='194.1' x2='71.2' y2='205.5'/%3E%3Cline x1='-36.5' y1='84.1' x2='-38.8' y2='95.5'/%3E%3Cline x1='-36.5' y1='-25.9' x2='-38.8' y2='-14.5'/%3E%3Cline x1='-36.5' y1='194.1' x2='-38.8' y2='205.5'/%3E%3Cline x1='183.5' y1='84.1' x2='181.2' y2='95.5'/%3E%3Cline x1='183.5' y1='-25.9' x2='181.2' y2='-14.5'/%3E%3Cline x1='183.5' y1='194.1' x2='181.2' y2='205.5'/%3E%3Cline x1='96.3' y1='34.5' x2='93.9' y2='46.7'/%3E%3Cline x1='96.3' y1='-75.5' x2='93.9' y2='-63.3'/%3E%3Cline x1='96.3' y1='144.5' x2='93.9' y2='156.7'/%3E%3Cline x1='-13.7' y1='34.5' x2='-16.1' y2='46.7'/%3E%3Cline x1='-13.7' y1='-75.5' x2='-16.1' y2='-63.3'/%3E%3Cline x1='-13.7' y1='144.5' x2='-16.1' y2='156.7'/%3E%3Cline x1='206.3' y1='34.5' x2='203.9' y2='46.7'/%3E%3Cline x1='206.3' y1='-75.5' x2='203.9' y2='-63.3'/%3E%3Cline x1='206.3' y1='144.5' x2='203.9' y2='156.7'/%3E%3Cline x1='65.4' y1='63.8' x2='63.2' y2='74.5'/%3E%3Cline x1='65.4' y1='-46.2' x2='63.2' y2='-35.5'/%3E%3Cline x1='65.4' y1='173.8' x2='63.2' y2='184.5'/%3E%3Cline x1='-44.6' y1='63.8' x2='-46.8' y2='74.5'/%3E%3Cline x1='-44.6' y1='-46.2' x2='-46.8' y2='-35.5'/%3E%3Cline x1='-44.6' y1='173.8' x2='-46.8' y2='184.5'/%3E%3Cline x1='175.4' y1='63.8' x2='173.2' y2='74.5'/%3E%3Cline x1='175.4' y1='-46.2' x2='173.2' y2='-35.5'/%3E%3Cline x1='175.4' y1='173.8' x2='173.2' y2='184.5'/%3E%3Cline x1='92.4' y1='103.9' x2='90.2' y2='114.8'/%3E%3Cline x1='92.4' y1='-6.1' x2='90.2' y2='4.8'/%3E%3Cline x1='92.4' y1='213.9' x2='90.2' y2='224.8'/%3E%3Cline x1='-17.6' y1='103.9' x2='-19.8' y2='114.8'/%3E%3Cline x1='-17.6' y1='-6.1' x2='-19.8' y2='4.8'/%3E%3Cline x1='-17.6' y1='213.9' x2='-19.8' y2='224.8'/%3E%3Cline x1='202.4' y1='103.9' x2='200.2' y2='114.8'/%3E%3Cline x1='202.4' y1='-6.1' x2='200.2' y2='4.8'/%3E%3Cline x1='202.4' y1='213.9' x2='200.2' y2='224.8'/%3E%3Cline x1='73.1' y1='6.7' x2='70.6' y2='18.9'/%3E%3Cline x1='73.1' y1='-103.3' x2='70.6' y2='-91.1'/%3E%3Cline x1='73.1' y1='116.7' x2='70.6' y2='128.9'/%3E%3Cline x1='-36.9' y1='6.7' x2='-39.4' y2='18.9'/%3E%3Cline x1='-36.9' y1='-103.3' x2='-39.4' y2='-91.1'/%3E%3Cline x1='-36.9' y1='116.7' x2='-39.4' y2='128.9'/%3E%3Cline x1='183.1' y1='6.7' x2='180.6' y2='18.9'/%3E%3Cline x1='183.1' y1='-103.3' x2='180.6' y2='-91.1'/%3E%3Cline x1='183.1' y1='116.7' x2='180.6' y2='128.9'/%3E%3Cline x1='71.2' y1='109.2' x2='68.6' y2='122.2'/%3E%3Cline x1='71.2' y1='-0.8' x2='68.6' y2='12.2'/%3E%3Cline x1='71.2' y1='219.2' x2='68.6' y2='232.2'/%3E%3Cline x1='-38.8' y1='109.2' x2='-41.4' y2='122.2'/%3E%3Cline x1='-38.8' y1='-0.8' x2='-41.4' y2='12.2'/%3E%3Cline x1='-38.8' y1='219.2' x2='-41.4' y2='232.2'/%3E%3Cline x1='181.2' y1='109.2' x2='178.6' y2='122.2'/%3E%3Cline x1='181.2' y1='-0.8' x2='178.6' y2='12.2'/%3E%3Cline x1='181.2' y1='219.2' x2='178.6' y2='232.2'/%3E%3Cline x1='31.3' y1='42.4' x2='28.9' y2='54.4'/%3E%3Cline x1='31.3' y1='-67.6' x2='28.9' y2='-55.6'/%3E%3Cline x1='31.3' y1='152.4' x2='28.9' y2='164.4'/%3E%3Cline x1='-78.7' y1='42.4' x2='-81.1' y2='54.4'/%3E%3Cline x1='-78.7' y1='-67.6' x2='-81.1' y2='-55.6'/%3E%3Cline x1='-78.7' y1='152.4' x2='-81.1' y2='164.4'/%3E%3Cline x1='141.3' y1='42.4' x2='138.9' y2='54.4'/%3E%3Cline x1='141.3' y1='-67.6' x2='138.9' y2='-55.6'/%3E%3Cline x1='141.3' y1='152.4' x2='138.9' y2='164.4'/%3E%3Cline x1='2.5' y1='50.8' x2='0.7' y2='59.8'/%3E%3Cline x1='2.5' y1='-59.2' x2='0.7' y2='-50.2'/%3E%3Cline x1='2.5' y1='160.8' x2='0.7' y2='169.8'/%3E%3Cline x1='-107.5' y1='50.8' x2='-109.3' y2='59.8'/%3E%3Cline x1='-107.5' y1='-59.2' x2='-109.3' y2='-50.2'/%3E%3Cline x1='-107.5' y1='160.8' x2='-109.3' y2='169.8'/%3E%3Cline x1='112.5' y1='50.8' x2='110.7' y2='59.8'/%3E%3Cline x1='112.5' y1='-59.2' x2='110.7' y2='-50.2'/%3E%3Cline x1='112.5' y1='160.8' x2='110.7' y2='169.8'/%3E%3Cline x1='12.9' y1='6.5' x2='10.4' y2='19.1'/%3E%3Cline x1='12.9' y1='-103.5' x2='10.4' y2='-90.9'/%3E%3Cline x1='12.9' y1='116.5' x2='10.4' y2='129.1'/%3E%3Cline x1='-97.1' y1='6.5' x2='-99.6' y2='19.1'/%3E%3Cline x1='-97.1' y1='-103.5' x2='-99.6' y2='-90.9'/%3E%3Cline x1='-97.1' y1='116.5' x2='-99.6' y2='129.1'/%3E%3Cline x1='122.9' y1='6.5' x2='120.4' y2='19.1'/%3E%3Cline x1='122.9' y1='-103.5' x2='120.4' y2='-90.9'/%3E%3Cline x1='122.9' y1='116.5' x2='120.4' y2='129.1'/%3E%3Cline x1='14.2' y1='27.2' x2='12.2' y2='37.6'/%3E%3Cline x1='14.2' y1='-82.8' x2='12.2' y2='-72.4'/%3E%3Cline x1='14.2' y1='137.2' x2='12.2' y2='147.6'/%3E%3Cline x1='-95.8' y1='27.2' x2='-97.8' y2='37.6'/%3E%3Cline x1='-95.8' y1='-82.8' x2='-97.8' y2='-72.4'/%3E%3Cline x1='-95.8' y1='137.2' x2='-97.8' y2='147.6'/%3E%3Cline x1='124.2' y1='27.2' x2='122.2' y2='37.6'/%3E%3Cline x1='124.2' y1='-82.8' x2='122.2' y2='-72.4'/%3E%3Cline x1='124.2' y1='137.2' x2='122.2' y2='147.6'/%3E%3Cline x1='95.9' y1='8.9' x2='93.7' y2='19.6'/%3E%3Cline x1='95.9' y1='-101.1' x2='93.7' y2='-90.4'/%3E%3Cline x1='95.9' y1='118.9' x2='93.7' y2='129.6'/%3E%3Cline x1='-14.1' y1='8.9' x2='-16.3' y2='19.6'/%3E%3Cline x1='-14.1' y1='-101.1' x2='-16.3' y2='-90.4'/%3E%3Cline x1='-14.1' y1='118.9' x2='-16.3' y2='129.6'/%3E%3Cline x1='205.9' y1='8.9' x2='203.7' y2='19.6'/%3E%3Cline x1='205.9' y1='-101.1' x2='203.7' y2='-90.4'/%3E%3Cline x1='205.9' y1='118.9' x2='203.7' y2='129.6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 110px 110px; opacity: .24; animation: pb-rain-far 1.05s linear infinite; }
.pb-film-mist { position: absolute; inset: -20%; pointer-events: none; filter: blur(24px);
    background: radial-gradient(38% 26% at 28% 72%, rgba(220,228,220,.13), transparent 70%), radial-gradient(30% 22% at 72% 66%, rgba(212,255,58,.07), transparent 70%),
                radial-gradient(45% 20% at 50% 90%, rgba(200,210,205,.10), transparent 70%);
    animation: pb-mist 38s ease-in-out infinite alternate; }
@keyframes pb-push { from { transform: scale(1.02); } to { transform: scale(1.09); } }
@keyframes pb-rain-near { to { transform: translate(-36px, 180px); } }
@keyframes pb-rain-far { to { transform: translate(-22px, 110px); } }
@keyframes pb-mist { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
/* Off screen nothing runs (site.js sets is-on while the section is in view). */
.pb-film:not(.is-on) > * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pb-film > * { animation: none; } }

/* In-page jumps (the skip link) glide rather than snap, unless reduced motion is asked for. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The film over the still: invisible until it is really playing, then it fades in and the CSS rain and mist step back
   (the film has its own weather). */
.pb-film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; opacity: 0; transition: opacity 1.2s ease; }
.pb-film.is-playing .pb-film-video { opacity: .62; }
.pb-film.is-playing .pb-film-rain, .pb-film.is-playing .pb-film-mist { opacity: 0; transition: opacity 1.2s ease; }

/* Small context labels: quiet sentence case (site.css, shared with the signed-in pages). */

/* Legal documents: a plain list, title and version, the whole row a link. */
.pb-doclist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.pb-doclist a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); color: var(--text); }
.pb-doclist a:hover { color: var(--lime-ink); }
.pb-doc-title { font: 800 clamp(1.15rem, 1.6vw, 1.4rem)/1.25 var(--body); letter-spacing: -.01em; }
.pb-doc-meta { flex: none; font: 500 .85rem/1 var(--mono); color: var(--text3); }

/* House rules: numbered hairline rows. */
.pb-rules { list-style: none; counter-reset: rule; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.pb-rules li { counter-increment: rule; display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line);
    font: 800 clamp(1.1rem, 1.5vw, 1.3rem)/1.3 var(--body); color: var(--text); }
.pb-rules li::before { content: counter(rule, decimal-leading-zero); font: 400 1.6rem/1 var(--display); color: var(--pb-steel); }

/* A tall poster in the sign-in panel shows whole from the top (its athlete sits low, under the line). */
.auth-art.is-poster .art-photo { object-position: center 20%; opacity: .7; }

/* Slides sit in an <a> box whether or not they link anywhere (without href it is no link at all). */
.fp-slide .fp-link { position: absolute; inset: 0; display: block; }

/* Phones (14 Oct, owner: the wide banner shown whole was a thin strip). The hero picture is a tall 4:5 frame. A slide's
   phone version fills it; a wide banner pans slowly across during its turn, from the athletes to the logo, so all of
   it is seen without shrinking it to a strip. The headline then rises over the foot of the picture. Reduced motion
   holds the frame on the athletes. */
@media (max-width: 760px) {
    .pb-hero .fp-stage { aspect-ratio: 4 / 5; }
    .pb-hero .fp-fill { display: none; }
    .pb-hero .fp-slide .fp-pic { position: absolute; inset: 0; top: 0; translate: none; width: 100%; height: 100%; max-height: none;
        object-fit: cover; object-position: 62% 50%; -webkit-mask-image: none; mask-image: none; }
    .pb-hero .fp-slide.is-on .fp-pic { animation: pb-pan var(--fp-interval, 7s) ease-in-out both; }
    .pb-hero .fp-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; z-index: 2; pointer-events: none;
        background: linear-gradient(0deg, #0A0C10 0%, rgba(10,12,16,.75) 45%, transparent 100%); }
    .pb-hero .fp-hero-inner { margin-top: -88px; position: relative; z-index: 3; padding-top: 0; }
}
@keyframes pb-pan { from { object-position: 30% 50%; } to { object-position: 100% 50%; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .pb-hero .fp-slide.is-on .fp-pic { animation: none; } }
