@import url('tokens.1abac13a.css');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: Hanken, system-ui, sans-serif; font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; }
a { color: var(--orange-ink); }
/* --orange is 3.29:1 on canvas: above the 3:1 minimum for a focus ring. */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
h1, h2 {
  font-family: Anton, Impact, sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1;
}
h1 { font-size: clamp(2.5rem, 7vw, 3.75rem); margin: 0 0 16px; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.25rem); margin: 48px 0 12px; }
.kicker {
  font-family: Saira, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-ink);
  margin: 0 0 8px;
}
.lede { font-size: 1.12rem; color: var(--muted); max-width: 34em; }

/* Broadcast tags: solid rectangles, never pills (app design system motif 1). */
.tag {
  display: inline-block; font-family: Saira, sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; padding: 5px 9px; border-radius: 3px; white-space: nowrap;
}
.tag-ink    { background: var(--ink); color: var(--canvas); }
.tag-orange { background: var(--orange-cta); color: #fff; }
.tag-amber  { background: var(--amber-tag); color: #fff; }

.phone {
  display: block; height: auto; border: 5px solid var(--ink);
  border-radius: 22px; background: var(--ink);
}

.band-dark { background: var(--dark); color: var(--dark-body); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--canvas); border-bottom: 2px solid var(--ink);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
/* The app icon itself, as a rounded square (motif 3). */
.brand-icon { flex: none; display: block; width: 30px; height: 30px; border-radius: 8px; }
.brand-name {
  font-family: Anton, Impact, sans-serif; text-transform: uppercase;
  font-size: 19px; letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 24px); font-size: 14px; font-weight: 700; }
.site-nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--orange-ink); }
.site-nav .tag { display: none; }
@media (min-width: 720px) { .site-nav .tag { display: inline-block; } }
/* 360px Android: wordmark + three links overflow. The page scrolls straight
   into How it works anyway, so that link is the one to drop. */
@media (max-width: 419px) { .nav-how { display: none; } }
@media (max-width: 359px) {
  .brand-name { display: none; }
}

/* Main + footer */
main { padding-bottom: 64px; }
main:has(> .band-fulltime:last-child) { padding-bottom: 0; }
.site-footer { border-top: 2px solid var(--ink); padding: 20px 0 32px; font-size: 14px; color: var(--muted); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer nav a { color: var(--ink); font-weight: 700; text-decoration: none; }
.site-footer nav a:hover { color: var(--orange-ink); }

/* Inner pages: one readable column, left-aligned with the header wordmark. */
.page { padding-top: 40px; }
.page > * { max-width: var(--measure); }
/* Section headers sit above a 2px ink rule (motif 2). */
.page h2 { padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
/* Policy URLs and the support address are single unbreakable words: without
   this they push a 360px page sideways. */
.page a { overflow-wrap: anywhere; }
.ruled-block { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 12px 0; margin: 16px 0 8px; }
.ruled-block p { margin: 0 0 8px; }
.ruled-block p:last-child { margin: 0; }

/* FAQ: each section's questions are ruled accordion rows, like the app's
   Help screen. h3 is only used here. */
.faq-topic { border-bottom: 1px solid var(--rule); }
.faq-topic summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; cursor: pointer; list-style: none;
}
.faq-topic summary::-webkit-details-marker { display: none; }
.faq-topic summary h3 {
  margin: 0; font-family: Saira, sans-serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.02em;
}
.faq-topic summary::after {
  content: '+'; flex: none; width: 1ch; text-align: center;
  font-family: Saira, sans-serif; font-weight: 700; font-size: 1.4rem; line-height: 1;
  color: var(--orange-ink);
}
.faq-topic[open] summary::after { content: '\2212'; }
.faq-topic summary:hover h3 { color: var(--orange-ink); }
.faq-answer { padding: 0 0 12px; }
.faq-answer p { margin: 0 0 12px; }

/* What's new: FAQ rows, plus the date each store got the release and the
   notes as bullets. */
.release-stores { border-collapse: collapse; margin: 0 0 12px; min-width: min(100%, 18rem); }
.release-stores th, .release-stores td { padding: 6px 0; border-bottom: 1px dashed var(--rule); text-align: left; }
.release-stores th { font-weight: 700; padding-right: 24px; }
.release-stores td { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.faq-answer ul { margin: 0 0 12px; padding-left: 20px; }
.faq-answer li { margin: 0 0 6px; }

/* ---------- Homepage ---------- */

/* Hero: centred, a fan of three phones on the app's concentric chalk arcs. */
.hero { position: relative; overflow: hidden; text-align: center; padding-top: 48px; }
.hero-text { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.75rem, 9vw, 4.75rem); margin: 16px 0; }
.hero .lede { margin: 0 auto 20px; }
.hero .store-badges { justify-content: center; }
.hero-arcs {
  position: absolute; left: 50%; bottom: -40%; width: min(820px, 130vw); aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; border: 2px solid var(--rule); pointer-events: none;
}
.hero-arcs::before, .hero-arcs::after { content: ''; position: absolute; border-radius: 50%; border: 2px solid var(--rule); }
.hero-arcs::before { inset: 14%; }
.hero-arcs::after  { inset: 28%; }
.hero-fan { position: relative; height: clamp(250px, 40vw, 420px); margin-top: 32px; }
.hero-fan .phone { position: absolute; left: 50%; top: 12%; width: clamp(104px, 17vw, 190px); }
.hero-fan .phone-centre { top: 0; width: clamp(120px, 19vw, 215px); transform: translateX(-50%); z-index: 2; }
.hero-fan .phone-left  { transform: translateX(-135%) rotate(-5deg); }
.hero-fan .phone-right { transform: translateX(35%) rotate(5deg); }
@media (min-width: 720px) {
  .hero-fan .phone-left  { transform: translateX(-135%) rotate(-7deg); }
  .hero-fan .phone-right { transform: translateX(35%) rotate(7deg); }
}
/* A TV score bug over the centre phone (motif 1). Decorative. */
.score-bug {
  position: absolute; z-index: 3; top: 6%; left: calc(50% + clamp(20px, 6vw, 70px));
  display: flex; box-shadow: 0 8px 20px rgb(25 20 16 / 0.2);
}
.score-bug .tag { border-radius: 0; display: flex; align-items: center; }
/* On phones, measured from the centre it runs off the right edge at 375px. */
@media (max-width: 719px) { .score-bug { left: auto; right: var(--gutter); } }
.score-bug-time {
  background: var(--ink); color: var(--canvas); padding: 4px 10px; line-height: 1.1;
  font-family: Anton, Impact, sans-serif; font-size: clamp(18px, 2.4vw, 24px); font-variant-numeric: tabular-nums;
}

/* The problem: a scoreboard band. */
.band-problem { padding: 56px 0; }
.problem { display: grid; gap: 24px; }
@media (min-width: 720px) { .problem { grid-template-columns: 180px 1fr; gap: 40px; align-items: start; } }
.game-clock { justify-self: start; background: var(--dark-surface); border: 1px solid var(--dark-rule); padding: 12px 16px; }
.game-clock-head {
  display: flex; justify-content: space-between; gap: 32px; margin-bottom: 4px;
  font-family: Saira, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dark-kicker);
}
.game-clock-time {
  font-family: Anton, Impact, sans-serif; font-size: 48px; line-height: 1;
  color: var(--dark-ink); font-variant-numeric: tabular-nums;
}
.problem-statement {
  font-family: Anton, Impact, sans-serif; text-transform: uppercase; line-height: 1.02;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem); color: var(--dark-ink); margin: 0 0 16px; max-width: 18em;
}
.problem-statement em { font-style: normal; color: var(--orange); } /* 5.8:1 on --dark */
.problem-text p:not(.problem-statement) { max-width: var(--measure); margin: 0 0 12px; }

/* How it works: the app's Plan-tab timeline. */
.story { padding: 64px 0; }
.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 4px 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.section-head h2 { margin: 0; font-size: clamp(2rem, 5vw, 2.75rem); }
.section-head .kicker { margin: 0; color: var(--muted); }
.story-grid { display: grid; gap: 48px; }
.story-steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid; grid-template-columns: 76px 14px 1fr; gap: 12px;
  padding: 20px 0 28px; border-bottom: 1px solid var(--rule);
}
.step-time { display: flex; flex-direction: column; }
/* Phones: the time rail would squeeze the text, so it moves onto one line
   above the tag and the text gets the full width beside the node. */
@media (max-width: 719px) {
  .step { grid-template-columns: 14px 1fr; row-gap: 4px; }
  .step-node { grid-column: 1; grid-row: 1; margin-top: 2px; }
  .step-time { grid-column: 2; grid-row: 1; flex-direction: row; align-items: baseline; gap: 8px; }
  .step-body { grid-column: 2; grid-row: 2; }
}
.step-time .kicker { font-size: 10px; color: var(--muted); margin: 0 0 2px; }
.step-clock { font-family: Anton, Impact, sans-serif; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.step-node {
  width: 14px; height: 14px; margin-top: 6px; border-radius: 50%;
  border: 2px solid var(--muted); background: var(--canvas);
}
.step-body h2 { font-size: clamp(1.4rem, 3.4vw, 1.75rem); margin: 10px 0 8px; }
.step-body p { margin: 0 0 16px; color: var(--muted); max-width: var(--measure); }
.step-shot { width: min(260px, 100%); }
/* States mirror the Plan tab. Never opacity: it drops text below AA. */
.step[data-state="done"] .step-tag  { background: var(--rule); color: var(--ink); }
.step[data-state="done"] .step-node { background: var(--muted); }
.step[data-state="done"] h2         { color: var(--muted); }
.step[data-state="open"]            { background: var(--tint); margin-inline: -12px; padding-inline: 12px; }
.step[data-state="open"] .step-tag  { background: var(--orange-cta); color: #fff; }
.step[data-state="open"] .step-node { background: var(--orange); border-color: var(--orange); }
.step[data-state="next"] .step-tag  { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.step[data-state="next"] .step-node { border-color: var(--ink); }
.step[data-state="upcoming"] .step-tag { box-shadow: inset 0 0 0 1.5px var(--muted); color: var(--muted); }
.story-phone { display: none; }
@media (min-width: 720px) {
  .js .story { --phone-w: clamp(200px, 24vw, 260px); }
  .js .story-grid { grid-template-columns: 1fr var(--phone-w); }
  .js .story-phone { display: block; }
  /* The heading sticks under the site header and the descriptions scroll up
     beneath it; site.js swaps the phone as each one goes under. */
  .js .story { --story-head-h: 72px; }
  .js .story .section-head {
    position: sticky; top: var(--header-h); z-index: 5;
    min-height: var(--story-head-h); padding-top: 16px; background: var(--canvas);
    /* The open step's tint is 12px wider than the column; paint canvas over it
       at both sides without moving the rule. */
    box-shadow: -12px 0 0 var(--canvas), 12px 0 0 var(--canvas);
  }
  /* The phone is pinned inside the steps column, so the column must outlast it:
     the last step is as tall as the phone (840x1818 screenshot, 2.164:1) plus
     its offset. Step 4 then scrolls right up under the heading while the phone
     is still pinned, and the two leave together. */
  .js .step:last-child { min-height: calc(var(--phone-w) * 2.164 + 24px); }
  .js .story-phone .phone { position: sticky; top: calc(var(--header-h) + var(--story-head-h) + 24px); transition: opacity 0.15s; }
  .js .story-phone .phone.is-fading { opacity: 0; }
  .js .step-shot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story-phone .phone { transition: none; }
}

/* Built for youth basketball: a stat sheet (motif 2). */
.sheet-section { padding: 0 0 64px; }
.stat-sheet { width: 100%; border-collapse: collapse; }
.stat-sheet thead th {
  text-align: left; padding: 10px 0; border-bottom: 2px solid var(--ink);
  font-family: Saira, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.stat-sheet td { padding: 14px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.sheet-label { font-weight: 700; }
.sheet-note { display: block; color: var(--muted); font-size: 15px; }
@media (min-width: 720px) {
  .sheet-note { display: inline; }
  .sheet-note::before { content: '· '; }
}
.sheet-value { text-align: right; padding-left: 12px; white-space: nowrap; }
.sheet-number { font-family: Anton, Impact, sans-serif; font-size: 22px; }

/* Full time band. */
.band-fulltime { padding: 48px 0; }
.fulltime { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.band-fulltime .kicker { color: var(--dark-kicker); }
.fulltime-line {
  margin: 0; font-family: Anton, Impact, sans-serif; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1; color: var(--dark-ink);
}
.band-fulltime .store-badges { margin: 0; }

/* Both badges show at the same visible HEIGHT, 48px, and keep their own widths
   (Apple's badge is 2.99:1, Google's 3.36:1; neither may be stretched or
   cropped). 48px clears Apple's 40px onscreen minimum.
   The Apple SVG is the badge edge to edge, so it is simply 48px tall. The
   Google PNG carries transparent clear space — the badge is 168px of the
   image's 250px height (measured: opaque bbox 41,41 → 605,209) — so the image
   is 48 * 250 / 168 = 71.43px tall. That built-in padding (≈12px a side) also
   separates the two, so the row needs no gap of its own. */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.badge-app-store { height: 48px; width: auto; }
.badge-google-play { height: 71.43px; width: auto; }

/* A live store's badge is a plain link to its listing. */
.badge-link { display: inline-flex; border-radius: 8px; outline-offset: 2px; }

/* The two halves of the privacy page cover different things — the app and this
   website. The website half is given its own surface, top rule and padding so
   the boundary is obvious without reading a word of it. */
/* --surface2 is only 1.03:1 against --canvas, so the tint alone cannot carry
   the boundary. The heavy top rule and the outlined panel edge do the work;
   --orange is 2.66:1 on canvas, so the rule uses the darker CTA orange
   (3.79:1). */
.policy-site {
  background: var(--surface2);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--orange-cta);
  border-radius: 12px;
  padding: 8px 24px 24px;
  margin-top: 64px;
}
.policy > h2:first-child { margin-top: 32px; }