:root{
  /* ADR-028: brand roles come from /brand/brand.css (loaded first). */
  --ink:var(--lo-text);--ink-soft:var(--lo-text-soft);--paper:var(--lo-page);--card:var(--lo-card);--line:var(--lo-divider);
  --navy:var(--lo-surface-strong);--navy-2:#1B3152;--action:var(--lo-action);--action-ink:var(--lo-ink-action,var(--lo-action));--sky:var(--lo-accent-on-dark);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper);
}
*{box-sizing:border-box}
body{margin:0;line-height:1.55;background:var(--paper)}
img,svg{max-width:100%;display:block}
a{color:var(--action-ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--d-bg-ffffff, #fff);color:var(--ink);padding:10px 14px;z-index:10}
.skip:focus{left:12px;top:12px}

/* Top bar */
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{color:#fff;text-decoration:none;font-size:21px;display:inline-flex;align-items:center;border-radius:8px}
.top ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.top nav a:not(.button){color:var(--lo-text-on-dark-soft);text-decoration:none;padding:10px 12px;border-radius:8px;font-weight:600;font-size:15px}
.top nav a:not(.button):hover{color:#fff;background:rgba(255,255,255,.08)}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid transparent;white-space:nowrap}
.button.primary{background:var(--action);color:#fff}
.button.primary:hover{background:var(--lo-action-hover)}
.lo-dark .button.primary{background:var(--sky);color:var(--navy)}
.lo-dark .button.primary:hover{background:var(--d-bg-b3ceff, #B3CEFF)}
.button.ghost{border-color:var(--action);color:var(--action-ink);background:transparent}
.top .button.ghost,.button.ghost.light{border-color:rgba(255,255,255,.55);color:#fff}
.button.ghost.light:hover,.top .button.ghost:hover{background:rgba(255,255,255,.1)}

/* Hero */
.hero{background:radial-gradient(1200px 500px at 85% 20%,#24427A 0%,transparent 60%),linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:72px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);margin:0 0 14px}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.08;letter-spacing:-.02em;margin:0 0 20px}
.hero .subhead{font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.25;margin:-6px 0 16px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--lo-text-on-dark-soft);max-width:36em;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.cta.center{justify-content:center}
.fine{font-size:14px;color:var(--lo-text-on-dark-soft);margin:18px 0 0}
.section .fine{color:var(--ink-soft)}
.center{text-align:center}
.art{position:relative;margin:0}
.art img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 40px rgba(0,0,0,.35)}
.score-card{position:absolute;left:-12px;bottom:-26px;background:var(--d-bg-ffffff, #fff);color:var(--ink);border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px rgba(0,0,0,.28);display:grid;gap:2px;min-width:210px}
.sc-label{font-size:12px;font-weight:700;color:var(--ink-soft)}
.sc-score{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;display:flex;gap:10px;align-items:baseline}
.sc-score i{font-style:normal;color:var(--ink-soft);font-weight:400}
.sc-meta{font-size:12px;color:var(--action-ink);font-weight:700}

/* Sections */
.section{padding:76px 0}
.section.alt{background:var(--d-bg-eaeff6, #EAEFF6)}
.section h2{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.015em;line-height:1.15;margin:0 0 10px}
.section-lead{font-size:18px;color:var(--ink-soft);margin:0 0 36px;max-width:40em}
.center .section-lead{margin-left:auto;margin-right:auto}

.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:18px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.feature h3{font-size:19px;margin:10px 0 8px}
.feature p{margin:0;color:var(--ink-soft);font-size:15.5px}
.status{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:999px}
.status.now{background:var(--d-bg-dcefe7, #dcefe7);color:var(--d-fg-0d5a41, #0d5a41)} /* status colour, not brand */
.status.soon{background:var(--d-bg-fdf0cc, #fdf0cc);color:var(--d-fg-6b5000, #6b5000)}

.sports{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.sport{display:flex;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.sport svg{width:88px;height:88px;flex:none}
.sport picture{flex:none}
.sport-photo{display:block;width:120px;height:120px;border-radius:14px;object-fit:cover}
.sport.pool{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;border-color:var(--navy)}
.sport.pool p{color:var(--lo-text-on-dark-soft)}
.sport h3{margin:0 0 6px;font-size:21px}
.sport p{margin:0 0 10px;color:var(--ink-soft)}

.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps li{counter-increment:step;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px 22px 22px;position:relative}
.steps li::before{content:counter(step);display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:10px}
.steps h3{margin:0 0 6px;font-size:18px}.steps p{margin:0;color:var(--ink-soft)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.plan.featured{border:2px solid var(--action);box-shadow:0 16px 36px rgba(36,84,204,.15)}
.plan h3{margin:0 0 8px;font-size:20px}
.price{margin:0;font-size:16px;color:var(--ink-soft)}.price b{font-size:36px;color:var(--ink);letter-spacing:-.02em}
.annual{margin:2px 0 0;font-size:14px;color:var(--ink-soft)}
.plan ul{margin:18px 0 0;padding-left:20px}.plan li{margin:6px 0}

.closing{background:var(--navy);color:#fff}
.closing .section-lead{color:var(--lo-text-on-dark-soft)}

.foot{background:#0E1A2B;color:var(--lo-text-on-dark-soft);font-size:14px}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:22px;padding-bottom:22px}
.foot p{margin:0}.foot a{color:var(--sky)}.foot strong{color:#fff}
.foot-brand{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .75rem}.foot-brand .lo-lockup{font-size:17px}.foot-brand .descriptor{color:var(--lo-text-on-dark-soft)}

@media (max-width:860px){
  .hero{padding:48px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .score-card{left:8px}
  .steps,.plans{grid-template-columns:1fr}
}
@media (max-width:560px){
  .top nav li:not(.keep){display:none}
  .top nav .button{min-height:44px;padding:8px 12px;font-size:15px}
  .section{padding:56px 0}
  .cta .button{flex:1 1 100%}
}
@media (max-width:420px){
  .bar{gap:8px}
  .brand{font-size:18px}
  .top ul{gap:2px}
  .top nav a:not(.button){padding:10px 8px}
}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Live coming-soon page (leagueorbit.com). */
.soon-note{display:inline-block;margin:0;padding:10px 14px;border-radius:10px;background:rgba(138,180,255,.14);border:1px solid rgba(138,180,255,.4);color:#fff;font-weight:600}
/* ADR-072 follow-up: the guides link in the hero (visible on every screen size). */
.guides-note{margin-top:14px}
.guides-note a{color:inherit;font-weight:650;text-decoration:underline;text-underline-offset:3px}
.free-note{margin:12px 0 0;font-size:1.05rem}
.top nav li.keep a:not(.button){display:inline-flex;align-items:center;min-height:44px}
/* ADR-090: photographs (league night, the rack, tournament tables, the closing room). */
.feature-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 10px}
.feature-photos figure{margin:0}
.feature-photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--navy)}
.feature-photos figcaption{margin-top:10px;font-weight:700}
.photo-note{font-size:13px;color:var(--ink-soft);margin:0 0 28px}
.closing{position:relative;overflow:hidden;padding:104px 0}
.closing-photo{position:absolute;inset:0}
.closing-photo picture,.closing-photo img{display:block;width:100%;height:100%}
.closing-photo img{object-fit:cover;object-position:right bottom}
.closing-text{position:relative}
.closing-text h2,.closing-text .section-lead{max-width:min(100%,520px)}
.closing-text .section-lead{margin-bottom:0}
@media (max-width:700px){
  .feature-photos{grid-template-columns:1fr}
  .closing-photo img{object-position:left bottom}
}
/* ADR-093: text only for screen readers (the comparison's ✓ and —). */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ADR-093: the About page — story, comparison tables (scroll inside their box on phones). */
.about-hero{padding:56px 0 48px}
.prose{max-width:46rem}
.prose p{font-size:17.5px;line-height:1.65;margin:0 0 16px}
.signature{font-weight:700;margin-top:24px}.signature span{font-weight:400;color:var(--ink-soft)}
.legend{max-width:52rem;color:var(--ink-soft)}
.table-scroll{position:relative;overflow-x:auto;margin:0 0 32px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.table-scroll:focus{outline:3px solid var(--action);outline-offset:2px}
.compare,.prices{border-collapse:collapse;width:100%;font-size:15px}
.compare caption,.prices caption{text-align:left;font-weight:700;padding:12px 14px}
.compare th,.compare td,.prices th,.prices td{border-top:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.compare td{text-align:center;font-size:18px}
.compare thead th{font-size:13px;white-space:nowrap}
.compare tbody th{min-width:14rem;font-weight:600}
.prices td{min-width:12rem}
.why{padding-left:20px}.why li{margin:8px 0}
@media (max-width:560px){.prose p{font-size:16.5px}}
/* ADR-124: the sports hub tiles and the coming-soon art. */
.sport-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.sport-tile{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sport-tile.live{border:2px solid var(--action);box-shadow:0 16px 36px rgba(36,84,204,.12)}
.tile-art{aspect-ratio:16/9;background:var(--navy);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile-art picture,.tile-art img{display:block;width:100%;height:100%;object-fit:cover}
.tile-art.icon svg{width:132px;height:132px}
.tile-body{display:flex;flex-direction:column;gap:10px;padding:22px;flex:1}
.tile-body h3{margin:0;font-size:22px}
.covers{margin:0 0 6px;padding-left:1.1rem;color:var(--ink-soft)}.covers li{margin:.3rem 0}
.tile-body .button{margin-top:auto;align-self:flex-start}
.soon-art{display:flex;align-items:center;justify-content:center}.soon-art svg{width:min(60vw,280px);height:auto}
.tile-body .button.ghost{border-color:var(--action);color:var(--action-ink);background:var(--d-bg-ffffff, #fff)}.tile-body .button.ghost:hover{background:var(--lo-tint,#eef3ff)}
.tile-body .status{align-self:flex-start}
/* ADR-166: the games page (leagueorbit.com/games) — phone screenshots in device frames, one card per game. */
.games-hero{padding:64px 0 72px}
.phone{display:block;border-radius:26px;border:7px solid var(--d-bd-0b1424, #0B1424);background:#0B1424;overflow:hidden;box-shadow:0 22px 44px rgba(5,12,24,.35)}
.phone img{display:block;width:100%;height:auto}
.phone-pair{position:relative;height:520px;width:100%;max-width:440px;margin-left:auto}
.phone-pair .phone{position:absolute;width:220px}
.phone-pair .front{right:0;top:0;width:240px;z-index:2}
.phone-pair .back{left:0;top:56px;transform:rotate(-5deg);opacity:.95}
.game-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 18px 40px rgba(20,36,59,.08)}
.section.game:not(.alt) .game-card{background:linear-gradient(180deg,var(--d-bg-ffffff, #fff) 0%,var(--d-bg-f6f9fd, #F6F9FD) 100%)}
.game-head{max-width:46rem}
.game-kicker{margin:0 0 10px}
.game-head h2{margin:0}
.game-tagline{margin:4px 0 14px;font-weight:700;color:var(--action-ink);letter-spacing:.02em}
.game-head p:last-child{color:var(--ink-soft);font-size:17px}
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:26px 0 8px}
.shots figure{margin:0}
.shots figcaption{margin-top:10px;font-size:14px;font-weight:650;color:var(--ink-soft);text-align:center}
.shots:focus{outline:3px solid var(--action);outline-offset:4px;border-radius:12px}
.game-details{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;margin-top:22px;border-top:1px solid var(--line);padding-top:22px}
.game-details h3{margin:0 0 12px;font-size:19px}
.facts{margin:0;padding-left:1.1rem}.facts li{margin:.45rem 0;color:var(--ink-soft)}.facts strong{color:var(--ink)}
.tiers{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--d-bg-ffffff, #fff);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tiers th,.tiers td{padding:9px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.tiers thead th{background:var(--navy);color:#fff;border-top:0;font-size:13px}
.tiers td{text-align:center}
.tiers tbody th{font-weight:600}
.tier-note{font-size:14px;color:var(--ink-soft);margin:10px 0 14px}
.game-meta{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.game-meta span{display:inline-block;min-width:7.5rem;font-weight:700;color:var(--ink)}
.games-stats .steps{margin-top:8px}
.shots-note{font-size:13px;color:var(--ink-soft);padding-top:14px;padding-bottom:14px;margin:0 auto}
@media (max-width:900px){.game-details{grid-template-columns:1fr}}
@media (max-width:860px){.phone-pair{height:440px;margin:0 auto}.phone-pair .phone{width:190px}.phone-pair .front{width:205px}}
@media (max-width:700px){
  .game-card{padding:20px}
  .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px}
  .shots figure{flex:0 0 46%;scroll-snap-align:start}
  .phone{border-width:5px;border-radius:20px}
}
@media (max-width:420px){.phone-pair{height:380px}.phone-pair .phone{width:160px}.phone-pair .front{width:175px}}
.eyebrow.dark{color:var(--action-ink)}
.games-band-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.games-band-shots{display:flex;gap:16px;justify-content:center}
.games-band-shots .phone{width:min(40%,180px)}
.games-band-shots .phone:last-child{margin-top:40px}
@media (max-width:760px){.games-band-grid{grid-template-columns:1fr}}
.games-features{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.game-meta li{display:grid;grid-template-columns:7.5rem 1fr;gap:8px}.game-meta span{min-width:0}
/* ADR-235 amendment (John, October 22, 2026): the review rating in the hero, filled by /brand/rating.js; hidden without it. The hero is navy in both themes. */
.rating-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 .3em;margin:16px 0 0;padding:6px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:var(--navy);color:var(--lo-text-on-dark-soft);font-size:15px;line-height:1.5}
.rating-badge[hidden]{display:none}
.rating-badge .rating-star{color:var(--sky);font-size:17px}
.rating-badge strong{color:#fff}
.rating-badge a{color:var(--sky);font-weight:650;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:32px}
/* October 24, 2026: each feature says why it matters; "Make it yours" lists what organizers set themselves. */
.feature p.why{margin-top:10px;padding-left:0;font-size:14.5px;color:var(--ink)}
#customize .feature{border-style:dashed}
.request-band{background:var(--card)}
.request-band .cta{margin-top:14px}
/* Official Google Play badge: its artwork carries its own clear space; don't restyle it. */
.store-badge{display:inline-flex;align-items:center}.store-badge img{display:block;height:60px;width:auto}
.game-meta li.store-row{display:block}.store-also{margin:10px 0 0;font-size:15px}.store-also a{color:inherit}.store-mark{font-size:13px;opacity:.8}
.store-badge-apple img{height:40px}
.games-trio{gap:12px;align-items:flex-start}.games-trio .phone{width:31%;max-width:190px;border-width:5px;border-radius:20px}.games-trio .phone:nth-child(2){margin-top:32px}.games-trio .phone:last-child{margin-top:0}
.game-badges{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px}.game-badges li{display:flex;flex-direction:column;gap:4px;font-weight:600}
.stream-shots{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.stream-shots img{display:block;width:100%;height:auto;border-radius:12px;background:var(--navy);border:1px solid var(--line)}
/* leagueorbit.com/operators: the two signup forms, side by side on wide screens and stacked on phones. */
.signup-forms{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.signup-form{border:1px solid var(--lo-divider,#d5dbe3);border-radius:12px;padding:20px;background:var(--lo-card,#fff)}
.signup-form label{display:block;font-weight:600;margin:14px 0 4px}.signup-form input[type=text],.signup-form input[type=email],.signup-form input[type=number],.signup-form input[type=month],.signup-form select{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:8px 10px;font:inherit}
.signup-form fieldset{border:1px solid var(--lo-divider,#d5dbe3);border-radius:8px;margin:14px 0 0;padding:6px 12px 10px}.signup-form legend{font-weight:600}
.signup-form label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}.signup-form label.check input{width:20px;height:20px;margin:2px 0 0;flex:none}
.signup-form button{margin-top:18px;min-height:44px}.signup-form .problem{border-left:4px solid #a4161a;padding:6px 10px;font-weight:600}.signup-form .trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}