/* Sports Scheduling Software hub + guides on the homepage (arena) design.
   Loaded after the arena section files; only adds what the homepage has no component for (TOC bar, prose,
   tables, checklists, guide article) and moves the homepage's dark wells onto charcoal (no navy). */
.ssa-shell {
  --ssa-ink: #0b0f13;      /* arena --ink, charcoal */
  --ssa-well: #0e1116;
  --ssa-deep: #08090c;
  --ssa-card: #12151a;
  --ssa-line: rgba(255,255,255,.08);
  --ssa-line-2: rgba(255,255,255,.14);
  background: var(--ssa-ink);
  overflow-x: hidden;
}
.ssa-shell .hero, .ssa-shell .hero::after { --ink-3: var(--ssa-deep); }
.ssa-shell .hero::after { background: linear-gradient(180deg, rgba(8,9,12,0), var(--ssa-deep)); }
.ssa-shell .hero-rail { background: rgba(10,11,14,.84); }
.ssa-shell .hero-rail-tile { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)), rgba(18,20,24,.6); }
.ssa-shell .ft { background: var(--ssa-deep); }
.ssa-shell .cm, .ssa-shell .faq { background: var(--ssa-deep); }
.ssa-shell .cm-shade { background:
  radial-gradient(ellipse 50% 70% at 78% 50%, rgba(153,44,255,.20), transparent 70%),
  linear-gradient(90deg, var(--ssa-deep) 8%, rgba(8,9,12,.72) 38%, rgba(8,9,12,.22) 62%, rgba(8,9,12,.55) 88%, var(--ssa-deep) 100%),
  linear-gradient(180deg, var(--ssa-deep) 0%, transparent 18%, transparent 80%, var(--ssa-deep) 100%); }
.ssa-shell .gain-card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--ssa-card); }
.ssa-shell .faq-list { background: rgba(14,17,22,.9); border-color: var(--ssa-line-2); }
.ssa-shell .faq-item { border-bottom-color: var(--ssa-line); }
.ssa-shell a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 3px; }

/* ---------- hero: scheduling copy in the homepage composition ---------- */
.ssa-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 18px; padding: 0; list-style: none; font: 600 12px/1.4 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: rgba(226,232,240,.7); }
.ssa-crumbs li + li::before { content: '/'; margin-right: 10px; color: var(--purple); }
.ssa-crumbs a { color: #e6e1f5; text-decoration: underline; text-decoration-color: rgba(153,44,255,.6); text-underline-offset: 4px; }
.ssa-crumbs a:hover { color: var(--lime); }
.ssa-crumbs [aria-current] { color: rgba(226,232,240,.6); }
.ssa-hero .hero-copy { width: min(44vw, 600px); }
.ssa-plan-note { margin: -8px 0 22px; max-width: 520px; font: 500 14px/1.45 var(--f-ui); color: #cfd0dc; }
.ssa-plan-note a, .hero-sub a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.ssa-byline { margin: 0 0 18px; font: 600 13px/1.4 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: rgba(226,232,240,.72); }
.ssa-hero--guide { min-height: 0; }
.ssa-hero--guide .hero-inner { padding: 136px 0 72px; }
.ssa-hero--guide .hero-copy { width: min(100%, 860px); margin-left: 0; }
.ssa-hero--guide .hero-title { font-size: clamp(40px, 4.6vw, 68px); }
.ssa-hero--guide .hero-sub { max-width: 720px; }
.ssa-hero--guide .hero-wordmark { top: 58%; color: rgba(236,231,248,.08); }

/* ---------- On this page bar ---------- */
.ssa-toc { position: sticky; top: 0; z-index: 40; background: rgba(11,15,19,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block: 1px solid var(--ssa-line); }
.ssa-toc-in { display: flex; align-items: center; gap: 6px 26px; min-height: 56px; overflow-x: auto; scrollbar-width: none; }
.ssa-toc-in::-webkit-scrollbar { display: none; }
.ssa-toc-label { flex: none; font: 700 11px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--purple); }
.ssa-toc a { flex: none; display: inline-flex; align-items: center; min-height: 44px; font: 700 13px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #cdd1df; border-bottom: 2px solid transparent; }
.ssa-toc a:hover, .ssa-toc a.is-active { color: var(--lime); border-bottom-color: var(--lime); }
body.ssa-shell:has(.p2e-sh-bar) .ssa-toc { top: var(--p2e-sh-h, 0px); }

/* ---------- section rhythm (homepage: sch / gain / about / faq alternate wells and glows) ---------- */
.ssa-sec { padding: clamp(72px, 8vw, 116px) 0; overflow: hidden; overflow: clip; isolation: isolate; }
.ssa-tone-0 { background: radial-gradient(900px 440px at 85% 10%, rgba(153,44,255,.16), transparent 60%), var(--ssa-ink); }
.ssa-tone-1 { background: radial-gradient(1000px 520px at 50% 110%, rgba(153,44,255,.22), transparent 65%), var(--ssa-deep); border-block: 1px solid rgba(153,44,255,.14); }
.ssa-tone-2 { background: radial-gradient(700px 380px at 8% 92%, rgba(208,250,0,.06), transparent 60%), radial-gradient(800px 400px at 92% 0%, rgba(153,44,255,.12), transparent 60%), var(--ssa-well); }
.ssa-sec.sch { background: radial-gradient(900px 440px at 85% 18%, rgba(153,44,255,.22), transparent 60%), radial-gradient(700px 380px at 8% 92%, rgba(208,250,0,.07), transparent 60%), var(--ssa-ink); padding: 110px 0 100px; }
.ssa-poster { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); z-index: -1; font: 400 clamp(90px, 16vw, 300px)/1 var(--f-poster); color: rgba(236,231,248,.04); white-space: nowrap; pointer-events: none; user-select: none; }
.ssa-head { margin-bottom: clamp(30px, 4vw, 52px); }
.ssa-head:not(.sch-grid) .ssa-head-copy { max-width: 860px; }
.ssa-title { display: flex; flex-wrap: wrap; column-gap: .28em; font-size: clamp(40px, 4.8vw, 70px); margin: 12px 0 18px; }
.ssa-sec.sch .ssa-title { flex-direction: column; font-size: clamp(44px, 5.4vw, 78px); line-height: .92; }
.ssa-lede { margin: 0 0 14px; max-width: 760px; color: #c9ccd3; font: 400 clamp(16px, 1.4vw, 19px)/1.55 var(--f-ui); }
.ssa-lede a, .ssa-prose a, .ssa-card a:not(.ssa-card-link), .ssa-checklist a, .faq-a-body a, .ssa-table a, .ssa-article a { color: var(--lime); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ssa-sec.sch .ssa-head { margin-bottom: 0; }
.ssa-board-features { margin-top: 64px; }
.ssa-feature-title { margin: 0; color: #f5f6f8; font: 800 19px/1.2 'Barlow', sans-serif; }
.ssa-board-features p { margin: 0; }

/* ---------- cards (homepage "What You'll Gain" cards, left-aligned for longer copy) ---------- */
.ssa-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssa-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ssa-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssa-cards--1 { grid-template-columns: minmax(0, 1fr); }
.ssa-card { align-items: flex-start; text-align: left; padding: 30px 24px 26px; }
.ssa-card .gain-num { left: auto; right: 18px; top: 18px; }
.ssa-card h3 { font-size: clamp(19px, 1.5vw, 22px); }
.ssa-card h3 a { color: inherit; }
.ssa-card h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.ssa-card p { font-size: 15.5px; line-height: 1.5; color: #b7bbc9; }
.ssa-card p + p { margin-top: 10px; }
.ssa-card-steps { margin: 0; padding-left: 20px; color: #b7bbc9; font: 400 15.5px/1.5 var(--f-ui); }
.ssa-card-steps li + li { margin-top: 6px; }
.ssa-card-steps li::marker { color: var(--lime); font-weight: 700; }
.ssa-card-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font: 800 13px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.ssa-card-kicker { margin: 0 0 10px !important; font: 700 11px/1 var(--f-ui) !important; letter-spacing: .26em; text-transform: uppercase; color: var(--purple) !important; }
.ssa-card-more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.ssa-guide-card { min-height: 260px; }
.ssa-steps { counter-reset: none; }

/* ---------- prose ---------- */
.ssa-prose { margin-top: clamp(28px, 3vw, 44px); max-width: 880px; color: #c4c8d4; font: 400 17px/1.7 var(--f-body); }
.ssa-prose p { margin: 0 0 16px; }
.ssa-prose--cols { max-width: none; columns: 2 380px; column-gap: 56px; }
.ssa-prose--cols p { break-inside: avoid; }
.ssa-sec--prose .ssa-prose { margin-top: 0; }

/* ---------- tables (sch-board panel styling) ---------- */
.ssa-table { margin: 0; border-radius: 22px; padding: 10px; background: linear-gradient(160deg, rgba(48,49,54,.94), rgba(30,31,35,.97)); border: 1px solid #3d3e44; box-shadow: 0 34px 90px rgba(0,0,0,.5), inset 0 0 0 1px rgba(153,44,255,.14); }
.ssa-table-scroll { overflow-x: auto; border-radius: 14px; }
.ssa-table-scroll:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.ssa-table table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font: 400 15px/1.5 var(--f-ui); color: #d6d8df; }
.ssa-table caption { caption-side: top; text-align: left; padding: 12px 14px 14px; font: 700 12px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #c9ccd3; }
.ssa-table thead th { padding: 14px; text-align: left; font: 800 12px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #c99bff; background: rgba(153,44,255,.12); }
.ssa-table thead th:first-child { border-top-left-radius: 12px; }
.ssa-table thead th:last-child { border-top-right-radius: 12px; }
.ssa-table tbody th, .ssa-table td { padding: 14px; text-align: left; vertical-align: top; border-top: 1px solid rgba(255,255,255,.07); }
.ssa-table tbody th { color: #f5f6f8; font-weight: 700; }
.ssa-table tbody tr:hover td, .ssa-table tbody tr:hover th { background: rgba(255,255,255,.03); }
.ssa-table figcaption { padding: 12px 14px 6px; font-size: 13px; color: #9aa0ab; }

/* ---------- checklists ---------- */
.ssa-checklists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ssa-checklist { padding: 28px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--ssa-line); }
.ssa-checklist h3 { margin: 0 0 18px; font: 800 clamp(22px, 2vw, 28px)/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.ssa-checklist ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ssa-checklist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; color: #c9ccd3; font: 400 16px/1.5 var(--f-ui); }
.ssa-check { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; color: var(--lime-ink); background: var(--lime); }

/* ---------- FAQ list in a content section ---------- */
.ssa-sec--faq .ssa-head { margin-bottom: 28px; }
.ssa-faq { max-width: 980px; }
.ssa-faq .faq-a-body { padding-left: 62px; }

/* ---------- sources, CTAs ---------- */
.ssa-sources { margin: 18px 0 0; font: 400 13px/1.6 var(--f-ui); color: #9aa0ab; }
.ssa-sources > span { margin-right: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c9ccd3; }
.ssa-sources a { color: #d5bbff; text-decoration: underline; text-underline-offset: 3px; }
.ssa-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- North America locations (T6 data) ---------- */
.ssa-locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ssa-loc-country { padding: 26px 28px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--ssa-line); }
.ssa-loc-country h3 { margin: 0 0 14px; font: 800 28px/1 var(--f-display); text-transform: uppercase; }
.ssa-loc-country h3 a { color: #fff; text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 6px; }
.ssa-loc-country ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #9aa0ab; font: 400 16px/1.5 var(--f-ui); }
.ssa-loc-country li a { color: #d6d8df; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.ssa-loc-country .ssa-loc-state { color: var(--lime); font-weight: 700; }

/* ---------- community band reused as the closing CTA ---------- */
.ssa-cta .cm-title { font-size: clamp(42px, 5.6vw, 88px); }

/* ---------- guide article ---------- */
.ssa-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; padding: clamp(56px, 6vw, 88px) 0; }
.ssa-article { min-width: 0; max-width: 780px; color: #c4c8d4; font: 400 18px/1.75 var(--f-body); }
.ssa-article > section + section { margin-top: clamp(40px, 4vw, 56px); }
.ssa-article h2 { margin: 0 0 18px; font: 800 clamp(30px, 3vw, 44px)/1 var(--f-display); text-transform: uppercase; color: #fff; scroll-margin-top: 110px; }
.ssa-article h2 .hl-purple { color: var(--purple); }
.ssa-article h3 { margin: 26px 0 10px; font: 700 21px/1.25 var(--f-ui); color: #f3f1fb; }
.ssa-article p { margin: 0 0 18px; }
.ssa-article ul:not([class]), .ssa-article ol:not([class]) { margin: 0 0 18px; padding-left: 22px; }
.ssa-article li::marker { color: var(--lime); }
.ssa-article .ssa-table, .ssa-article .ssa-checklists, .ssa-article .ssa-faq, .ssa-article .ssa-cards { margin: 26px 0; }
.ssa-article .ssa-checklists { grid-template-columns: minmax(0, 1fr); }
.ssa-article .ssa-table table { min-width: 560px; }
.ssa-article .ssa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssa-article-end { margin-top: 48px; padding: 26px 28px; border-radius: 18px; background: linear-gradient(120deg, rgba(153,44,255,.16), rgba(153,44,255,.04)); border: 1px solid rgba(153,44,255,.35); font-size: 17px; }
.ssa-article-end p:last-child { margin: 0; }
.ssa-aside { position: sticky; top: 120px; display: grid; gap: 18px; }
.ssa-aside-box { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--ssa-line); }
.ssa-aside-box h2 { margin: 0 0 12px; font: 700 11px/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--purple); }
.ssa-aside-box ol, .ssa-aside-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ssa-aside-box a { display: flex; align-items: center; min-height: 40px; color: #d6d8df; font: 600 15px/1.35 var(--f-ui); }
.ssa-aside-box a:hover { color: var(--lime); }
.ssa-aside-box .btn { width: 100%; justify-content: center; margin-top: 12px; }
.ssa-aside-box p { margin: 0; color: #b7bbc9; font: 400 15px/1.5 var(--f-ui); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .ssa-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssa-hero .hero-copy { width: min(52vw, 560px); margin-left: 32px; }
}
@media (max-width: 991px) {
  .ssa-sec.sch { padding: 72px 0; }
  .ssa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssa-article-wrap { grid-template-columns: minmax(0, 1fr); }
  .ssa-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ssa-hero .hero-copy, .ssa-hero--guide .hero-copy { width: 100%; margin-left: 0; }
  .ssa-hero--guide .hero-inner { padding: 112px 0 48px; }
  .ssa-sec { padding: 60px 0; }
  .ssa-title { font-size: 40px; }
  .ssa-sec.sch .ssa-title { font-size: 44px; }
  .ssa-cards, .ssa-cards--2, .ssa-cards--4, .ssa-article .ssa-cards { grid-template-columns: minmax(0, 1fr); }
  .ssa-card { padding: 26px 20px 22px; }
  .ssa-checklists, .ssa-locations { grid-template-columns: minmax(0, 1fr); }
  .ssa-checklist, .ssa-loc-country { padding: 22px 18px; }
  .ssa-prose { font-size: 16px; }
  .ssa-prose--cols { columns: 1; }
  .ssa-faq .faq-a-body { padding-left: 16px; }
  .ssa-table { padding: 6px; border-radius: 16px; }
  .ssa-article { font-size: 17px; }
  .ssa-aside { grid-template-columns: minmax(0, 1fr); }
  .ssa-ctas .btn, .ssa-sec .sch-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
  .ssa-title, .ssa-sec.sch .ssa-title { font-size: 34px; }
  .ssa-hero .hero-title { font-size: 46px; }
  .ssa-hero--guide .hero-title { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .ssa-toc a { transition: none; } }

/* ---------- round 2: homepage parity ---------- */
/* the season board shows finished when motion is off (?static, reduced motion) */
html:not(.arena-anim) .sch-board.sch-arm .sch-rows li, html:not(.arena-anim) .sch-board.sch-arm .sch-ref,
html:not(.arena-anim) .sch-board.sch-arm .sch-status, html:not(.arena-anim) .sch-board.sch-arm .sch-moved .sch-time s { opacity: 1; transform: none; animation: none; }
.ssa-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssa-card.ssa-guide-card h3 a { color: #f3f1fb; text-decoration: none; }
.ssa-card.ssa-guide-card:hover h3 a, .ssa-card.ssa-guide-card h3 a:focus-visible { color: var(--lime); }
.ssa-faq-sec .faq-a-body { padding-left: 62px; }
.ssa-faq-sec .faq-head .eyebrow { margin: 0 0 12px; }
@media (max-width: 991px) { .ssa-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ssa-cards--3 { grid-template-columns: minmax(0, 1fr); } .ssa-faq-sec .faq-a-body { padding-left: 16px; } }

/* ---------- round 3: guide polish ---------- */
.ssa-aside-box a.btn { color: var(--lime-ink); min-height: 48px; font-size: 13px; }
.ssa-aside-box a.btn:hover { color: var(--lime-ink); }
.ssa-article-sec { padding-top: clamp(40px, 4vw, 64px); }
.ssa-article-wrap { padding-top: 0; }
.ssa-guide-figure { position: absolute; z-index: 4; right: max(16px, calc(50vw - 670px)); bottom: 0; width: min(440px, 32vw); margin: 0; pointer-events: none; }
.ssa-guide-figure img { position: relative; z-index: 1; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%); mask-image: linear-gradient(0deg, transparent 0, #000 22%); filter: drop-shadow(0 26px 42px rgba(0,0,0,.6)); }
.ssa-hero--guide .hero-copy { width: min(100%, 760px); }
@media (max-width: 991px) { .ssa-guide-figure { display: none; } .ssa-hero--guide .hero-copy { width: 100%; } }
.ssa-cta .cm-body + .cm-body { margin-top: 12px; }

/* ---------- hero option A: live schedule board on a laptop + phone notice (hero.visual = "board") ---------- */
.ssa-hero .hero-stage { max-width: 100%; }
.ssa-hb { position: absolute; z-index: 4; right: max(24px, calc(50vw - 660px)); top: 150px; width: min(640px, 45vw); }
.ssa-hb-laptop { position: relative; }
.ssa-hb-screen { position: relative; padding: 14px; border-radius: 16px 16px 6px 6px; border: 10px solid #1b1d22; border-bottom-width: 14px;
  background: radial-gradient(480px 260px at 85% 0%, rgba(153,44,255,.28), transparent 60%), linear-gradient(160deg, #17191e, #0f1115);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(153,44,255,.25), 0 0 60px -10px rgba(153,44,255,.45); }
.ssa-hb-base { height: 14px; margin: 0 -3%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #2a2c33, #15161a); box-shadow: 0 18px 30px rgba(0,0,0,.5); }
.ssa-hb-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 700 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #c9ccd3; }
.ssa-hb-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssa-hb-dots { display: inline-flex; gap: 5px; } .ssa-hb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #3a3c44; }
.ssa-hb-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; }
.ssa-hb-col { display: grid; align-content: start; gap: 8px; min-width: 0; }
.ssa-hb-venue { margin: 0 0 2px; padding: 7px 10px; border-radius: 10px; background: rgba(153,44,255,.14); color: #d9c2ff; font: 800 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.ssa-hb-game { display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.ssa-hb-when { font: 800 11px/1.2 var(--f-ui); letter-spacing: .04em; color: #c99bff; }
.ssa-hb-match { font: 600 12.5px/1.3 var(--f-ui); color: #f2f3f6; overflow-wrap: anywhere; }
.ssa-hb-game.is-moved { border-color: var(--lime); background: rgba(208,250,0,.10); box-shadow: 0 0 0 1px rgba(208,250,0,.35), 0 0 28px -6px rgba(208,250,0,.55); }
.ssa-hb-game.is-moved .ssa-hb-when { color: var(--lime); }
.ssa-hb-tag { justify-self: start; margin-top: 2px; padding: 3px 7px; border-radius: 6px; background: var(--lime); color: var(--lime-ink); font: 800 10px/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.ssa-hb-tag s { margin-left: 4px; opacity: .65; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ssa-hb-note { margin: 10px 0 0; color: #8f95a1; font: 500 11px/1.3 var(--f-ui); }
.ssa-hb-phone { position: absolute; right: -34px; bottom: -96px; width: 176px; padding: 8px; border-radius: 30px; background: #111215; border: 1px solid #34363d;
  box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(153,44,255,.25); }
.ssa-hb-phone-in { min-height: 220px; padding: 16px 10px; border-radius: 23px; background: radial-gradient(160px 120px at 50% 0%, rgba(153,44,255,.35), transparent 70%), #0b0c0f; }
.ssa-hb-phone-time { display: block; text-align: center; margin-bottom: 14px; font: 700 26px/1 var(--f-display); color: #fff; }
.ssa-hb-notice { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(208,250,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ssa-hb-bell { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--lime); color: var(--lime-ink); font-size: 13px; }
.ssa-hb-notice-text { display: grid; gap: 2px; font: 500 11.5px/1.35 var(--f-ui); color: #e6e7ec; }
.ssa-hb-notice-text strong { font-weight: 800; color: #fff; }
.ssa-hb-notice-text em { font-style: normal; font-weight: 800; color: var(--lime); }
.arena-anim .ssa-hb-game { animation: ssa-hb-in .7s var(--ease-out) both; animation-delay: calc(.3s + var(--i, 0) * .08s); }
.arena-anim .ssa-hb-game.is-moved { animation: ssa-hb-in .7s var(--ease-out) both, ssa-hb-flash 1.4s ease 1.6s 2; }
.arena-anim .ssa-hb-phone { animation: ssa-hb-phone .9s var(--ease-out) 1.9s both; }
@keyframes ssa-hb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ssa-hb-flash { 50% { background: rgba(208,250,0,.24); } }
@keyframes ssa-hb-phone { from { opacity: 0; transform: translateY(30px) rotate(4deg); } to { opacity: 1; transform: none; } }
@media (max-width: 1180px) { .ssa-hb { width: min(560px, 46vw); } .ssa-hb-phone { width: 160px; right: -12px; } }
@media (max-width: 991px) {
  .ssa-hb { position: relative; right: auto; top: auto; width: min(100% - 32px, 640px); margin: 28px auto 128px; }
  .ssa-hb-phone { right: -4px; bottom: -112px; }
  .ssa-hb-base { margin: 0; }
}
@media (max-width: 575px) {
  .ssa-hb-screen { padding: 10px; border-width: 7px; border-bottom-width: 10px; }
  .ssa-hb-grid { gap: 6px; } .ssa-hb-game { padding: 7px; } .ssa-hb-match { font-size: 11px; } .ssa-hb-venue { font-size: 9.5px; padding: 6px; letter-spacing: .06em; }
  .ssa-hb-phone { width: 138px; padding: 6px; border-radius: 24px; } .ssa-hb-phone-in { min-height: 170px; border-radius: 19px; } .ssa-hb-phone-time { font-size: 20px; }
  .ssa-hb-notice-text { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .ssa-hb-game, .ssa-hb-phone { animation: none !important; } }

/* ---------- per-page organizer photo (hero.image), text kept on the left third ---------- */
.ssa-hero-photo { position: absolute; inset: 0; z-index: 1; margin: 0; pointer-events: none; }
.ssa-hero-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focal, 65% 40%); }
.ssa-hero--photo .hero-layer-video { display: none; }
.ssa-hero--photo .hero-scrim { background:
  linear-gradient(90deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.82) 30%, rgba(8,9,12,.25) 58%, rgba(8,9,12,.15) 100%),
  linear-gradient(180deg, rgba(8,9,12,.7) 0%, transparent 22%, transparent 70%, rgba(8,9,12,.92) 100%); }
.ssa-hero--photo .hero-wordmark { display: none; }
@media (max-width: 991px) {
  .ssa-hero-photo { position: relative; z-index: 6; inset: auto; order: 2; height: auto; margin: 8px 16px 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10;
    box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(153,44,255,.3); }
  .ssa-hero--photo .hero-scrim { background: linear-gradient(180deg, rgba(8,9,12,.6), rgba(8,9,12,.9)); }
  .ssa-hero--photo .hero-rail, .ssa-hero--photo .ssa-hb { order: 3; }
}

/* guide sources (external, official pages only) */
.ssa-article .ssa-guide-sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ssa-line); }
.ssa-article .ssa-guide-sources h2 { font-size: 22px; margin-bottom: 10px; }
.ssa-article .ssa-guide-sources ul { margin: 0; padding-left: 20px; font: 400 15px/1.6 var(--f-ui); color: #9aa0ab; }
.ssa-article .ssa-guide-sources a { color: #d5bbff; }

/* card photo (e.g. the league page's sport cards): replaces the icon tile */
.ssa-card .ssa-card-img { position: relative; z-index: 1; display: block; width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -30px -24px 18px; border-radius: 16px 16px 0 0; }
.ssa-card:has(.ssa-card-img) .gain-num { z-index: 2; color: rgba(255,255,255,.75); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
@media (max-width: 767px) { .ssa-card .ssa-card-img { width: calc(100% + 40px); margin: -26px -20px 16px; } }

/* photo + live board (owner 2026-10-12: "move this box down off his face"): the organizer's face (~70% x, 25-35% y)
   and the tablet in his hands stay clear. The board anchors to the hero's bottom edge and overlaps into the next
   band, the phone frame sits at the board's lower right, and the sports rail shortens to make room. */
@media (min-width: 992px) {
  .ssa-hero--photo.ssa-hero--board { overflow: visible; z-index: 41; }
  .ssa-hero--photo.ssa-hero--board .ssa-hb { top: auto; bottom: -150px; right: max(24px, calc(50vw - 660px)); width: min(520px, 38vw); }
  .ssa-hero--photo.ssa-hero--board .ssa-hb-phone { right: -30px; bottom: -40px; width: 150px; }
  .ssa-hero--photo.ssa-hero--board .ssa-hb-phone-in { min-height: 180px; }
  .ssa-hero--photo.ssa-hero--board .hero-rail { margin-right: calc(min(520px, 38vw) + max(24px, calc(50vw - 660px)) + 40px); }
  .ssa-hero--photo.ssa-hero--board + .ssa-toc .ssa-toc-in { padding-right: calc(min(520px, 38vw) + 40px); }
  .ssa-hero--photo.ssa-hero--board ~ .ssa-sec:first-of-type { padding-top: clamp(150px, 12vw, 190px); }
}
@media (max-width: 991px) {
  .ssa-hero--photo.ssa-hero--board .ssa-hb { order: 3; }
  .ssa-hero--photo.ssa-hero--board .hero-rail { order: 4; }
}

/* compact board over a photo (owner: "smaller so we can see the image"): ~60% size, header + two games */
@media (min-width: 992px) {
  .ssa-hero--photo.ssa-hero--board .ssa-hb { width: min(330px, 26vw); bottom: -96px; right: calc(max(24px, calc(50vw - 660px)) + 96px); }
  .ssa-hero--photo.ssa-hero--board .hero-rail { margin-right: calc(min(330px, 26vw) + max(24px, calc(50vw - 660px)) + 130px); }
  .ssa-hero--photo.ssa-hero--board + .ssa-toc .ssa-toc-in { padding-right: calc(min(330px, 26vw) + 200px); }
  .ssa-hero--photo.ssa-hero--board ~ .ssa-sec:first-of-type { padding-top: clamp(120px, 10vw, 150px); }
  .ssa-hb--compact .ssa-hb-screen { padding: 9px; border-width: 6px; border-bottom-width: 9px; border-radius: 12px 12px 5px 5px; }
  .ssa-hb--compact .ssa-hb-bar { margin-bottom: 7px; font-size: 11px; gap: 6px; }
  .ssa-hb--compact .ssa-hb-dots i { width: 6px; height: 6px; }
  .ssa-hb--compact .sch-pill { padding: 3px 7px; font-size: 11px; }
  .ssa-hb--compact .ssa-hb-grid { gap: 6px; }
  .ssa-hb--compact .ssa-hb-venue { padding: 5px 7px; font-size: 11px; letter-spacing: .08em; }
  .ssa-hb--compact .ssa-hb-game { padding: 7px; border-radius: 9px; }
  .ssa-hb--compact .ssa-hb-when, .ssa-hb--compact .ssa-hb-match, .ssa-hb--compact .ssa-hb-tag, .ssa-hb--compact .ssa-hb-note { font-size: 11px; }
  .ssa-hb--compact .ssa-hb-note { margin-top: 6px; }
  .ssa-hb--compact .ssa-hb-base { height: 9px; }
  .ssa-hero--photo.ssa-hero--board .ssa-hb--compact .ssa-hb-phone { right: -78px; bottom: -26px; width: 112px; padding: 5px; border-radius: 20px; }
  .ssa-hb--compact .ssa-hb-phone-in { min-height: 0; padding: 9px 6px; border-radius: 16px; }
  .ssa-hb--compact .ssa-hb-phone-time { font-size: 16px; margin-bottom: 7px; }
  .ssa-hb--compact .ssa-hb-notice { grid-template-columns: 1fr; gap: 5px; padding: 7px; border-radius: 10px; }
  .ssa-hb--compact .ssa-hb-bell { width: 20px; height: 20px; font-size: 10px; border-radius: 6px; }
  .ssa-hb--compact .ssa-hb-notice-text { font-size: 11px; line-height: 1.3; }
}
@media (max-width: 991px) {
  .ssa-hb--compact { margin-bottom: 170px; }
  .ssa-hb--compact .ssa-hb-phone { right: 4px; bottom: -150px; width: 132px; }
  .ssa-hb--compact .ssa-hb-phone-in { min-height: 0; padding: 10px 7px; }
  .ssa-hb--compact .ssa-hb-phone-time { font-size: 16px; margin-bottom: 8px; }
  .ssa-hb--compact .ssa-hb-notice { grid-template-columns: 1fr; gap: 5px; padding: 8px; }
  .ssa-hb--compact .ssa-hb-notice-text { font-size: 11px; }
}

/* ADDENDUM 3: direct answer under the H1; the longer lede follows the plan note */
.ssa-answer { font-weight: 500; color: #f1f0f7; }
.ssa-hero-more { margin: 0 0 18px; max-width: 520px; font: 400 15px/1.5 var(--f-ui); color: #c4c6d3; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.ssa-hero-more a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- comparison matrix (named competitors): status cells, highlighted Play 2 Earn column ---------- */
.ssa-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 999px; font: 800 12px/1.2 var(--f-ui); letter-spacing: .04em; white-space: nowrap; }
.ssa-st i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.ssa-st--yes { background: rgba(208,250,0,.12); color: var(--lime); } .ssa-st--yes i { background: var(--lime); color: var(--lime-ink); }
.ssa-st--partial { background: rgba(255,184,77,.13); color: #ffc46b; } .ssa-st--partial i { background: #ffb84d; color: #241500; }
.ssa-st--no { background: rgba(255,255,255,.06); color: #a3a7b1; } .ssa-st--no i { background: #4a4d55; color: #e3e5ea; }
.ssa-st--unverified { background: transparent; color: #b9bcc6; border: 1px dashed rgba(255,255,255,.35); } .ssa-st--unverified i { border: 1px dashed rgba(255,255,255,.5); color: #d6d8df; }
.ssa-st-note { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: #c4c7d0; }
.ssa-table--matrix .ssa-table-scroll { max-height: min(80vh, 900px); overflow: auto; }
.ssa-table--matrix table { min-width: 900px; }
.ssa-table--matrix thead th { position: sticky; top: 0; z-index: 3; background: #24202f; }
.ssa-table--matrix tbody th { position: sticky; left: 0; z-index: 2; background: #1c1e23; min-width: 180px; box-shadow: 1px 0 0 rgba(255,255,255,.08); }
.ssa-table--matrix thead th:first-child { left: 0; z-index: 4; }
.ssa-table--matrix .is-hi { background: rgba(153,44,255,.16); box-shadow: inset 1px 0 0 rgba(153,44,255,.55), inset -1px 0 0 rgba(153,44,255,.55); }
.ssa-table--matrix thead th.is-hi { background: #3a2160; color: #fff; padding-top: 28px; position: sticky; }
.ssa-hi-badge { position: absolute; top: 6px; left: 12px; padding: 3px 8px; border-radius: 6px; background: var(--lime); color: var(--lime-ink); font: 800 10px/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.ssa-table--matrix tbody tr:hover td.is-hi { background: rgba(153,44,255,.22); }
.ssa-sources { margin-top: 18px; font: 400 13px/1.6 var(--f-ui); color: #9aa0ab; }
.ssa-sources-head { margin: 0 0 6px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c9ccd3; }
.ssa-sources-head small { font-weight: 600; letter-spacing: .02em; text-transform: none; color: #9aa0ab; }
.ssa-sources ul { margin: 0; padding-left: 18px; }
.ssa-sources a { color: #d5bbff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .ssa-table--matrix table { min-width: 760px; font-size: 14px; }
  .ssa-table--matrix tbody th { min-width: 140px; max-width: 150px; }
  .ssa-table--matrix .ssa-table-scroll { max-height: none; }
}

/* owner 2026-10-12 (round 2): the board sits FULLY inside the hero, above the sports rail and never under the
   sticky On-this-page bar; lower right, between the tablet and the rail, clear of the organizer's face. */
@media (min-width: 992px) {
  .ssa-hero--photo.ssa-hero--board { overflow: hidden; z-index: auto; }
  .ssa-hero--photo.ssa-hero--board .ssa-hb { bottom: 128px; right: calc(max(24px, calc(50vw - 660px)) + 96px); }
  .ssa-hero--photo.ssa-hero--board .ssa-hb--compact .ssa-hb-phone { right: -86px; bottom: 0; }
  .ssa-hero--photo.ssa-hero--board .hero-rail { margin-right: 28px; }
  .ssa-hero--photo.ssa-hero--board + .ssa-toc .ssa-toc-in { padding-right: 0; }
  .ssa-hero--photo.ssa-hero--board ~ .ssa-sec:first-of-type { padding-top: 110px; }
}
/* the homepage app download buttons, smaller, under the organizer CTAs */
.ssa-hero-apps { margin: -6px 0 18px; }
.ssa-hero-apps .p2e-install-row { width: min(380px, 100%); gap: 10px; }
.ssa-hero-apps .p2e-install-button { min-height: 58px; height: 58px; border-radius: 12px; }
.ssa-hero-apps .p2e-store-badge img { height: 44px; width: auto; }
@media (max-width: 767px) { .ssa-hero-apps .p2e-install-row { margin: 0 auto; } }

/* landing pages carry longer pillar lists than the homepage: let them wrap on small screens */
.ssa-hero .hero-pillars { flex-wrap: wrap; row-gap: 8px; }

/* tighter hero (owner: the board must show above the fold at 1440x900 and 1280x800) */
@media (min-width: 992px) {
  .ssa-hero--hub .hero-inner { padding-top: 104px; }
  .ssa-hero--hub .ssa-crumbs ol { margin-bottom: 10px; }
  .ssa-hero--hub .hero-eyebrow { margin-bottom: 14px; }
  .ssa-hero--hub .hero-title { font-size: clamp(44px, 3.7vw, 56px); margin-bottom: 10px; }
  .ssa-hero--hub .hero-copy { width: min(46vw, 620px); }
  .ssa-hero--hub .hero-sub { font-size: 16px; line-height: 1.45; margin-bottom: 14px; }
  .ssa-hero--hub .hero-cta { margin-bottom: 12px; }
  .ssa-hero--hub .ssa-hero-apps { margin: 0 0 10px; }
  .ssa-hero--hub .ssa-hero-apps .p2e-install-button { min-height: 48px; height: 48px; }
  .ssa-hero--hub .ssa-hero-apps .p2e-install-row { width: min(320px, 100%); }
  .ssa-hero--hub .ssa-plan-note { margin: 0 0 12px; }
  .ssa-hero--hub .hero-pillars { display: none; }
  .ssa-hero--hub .hero-rail { margin-top: 8px; }
}

/* page imagery from this site, not the live domain (the homepage's 02-hero.css points the tint at play2earnsports.com) */
.ssa-shell .hero-tint { background-image: url('/media/home/hero-bg-plate.jpg'); }