/* PaddleScramble — same palette as the app: pine, butter, chalk, ink. */
:root {
  --pine: #0E5A43;
  --butter: #FFD23F;
  --chalk: #FBF7EE;
  --ink: #1c1c1e;
  --muted: #6b6b6b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font: 18px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
header.site {
  background: var(--pine);
  color: #fff;
  padding: 14px 20px;
}
header.site .bar {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  /* Three nav links (Videos, Live scores, Support) no longer fit beside the wordmark on
     phones. When they don't fit, the whole nav drops to its own row instead of running
     into the wordmark; the wordmark never shrinks, each link stays whole. */
  flex-wrap: wrap; row-gap: 6px;
}
header.site .name { flex-shrink: 0; }
header.site img { width: 40px; height: 40px; border-radius: 9px; }
header.site .name { font-size: 20px; font-weight: 800; }
header.site .name span { color: var(--butter); }
header.site nav { margin-left: auto; display: flex; gap: 18px; }
header.site nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; opacity: .92; }
header.site nav a:hover { opacity: 1; text-decoration: underline; }

/* Under ~430px the two links no longer fit beside the wordmark: "Live scores" broke across two
   lines while "Support" stayed on the first, so the bar grew and looked broken. Keep each link
   whole and buy the room back from the wordmark and the gaps. */
@media (max-width: 429px) {
  header.site { padding: 12px 14px; }
  header.site .bar { gap: 9px; }
  header.site .name { font-size: 17px; }
  header.site nav { gap: 12px; }
  header.site nav a { font-size: 14px; white-space: nowrap; }
}
/* The narrowest phones still in use (iPhone SE 1st gen, 320px) were pushing the whole page
   sideways by 46px before this - the nav, not the content. Shrink once more and let the
   wordmark give up space first, since it is decoration next to two working links. */
@media (max-width: 374px) {
  header.site { padding: 11px 10px; }
  header.site .bar { gap: 7px; }
  header.site img { width: 32px; height: 32px; }
  header.site .name { font-size: 15px; }
  header.site nav { gap: 10px; }
  header.site nav a { font-size: 13px; }
}

.fine { font-size: 14px; color: var(--muted); margin: 14px 2px 0; line-height: 1.5; }

main { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }

.hero { text-align: center; padding: 40px 0 16px; }
.hero img.icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 30px rgba(14,90,67,.18); }
.hero h1 { font-size: clamp(30px, 5.5vw, 46px); line-height: 1.15; margin: 18px 0 10px; }
.hero p.sub { font-size: clamp(17px, 2.6vw, 21px); color: var(--muted); max-width: 620px; margin: 0 auto 24px; }
.store-badge img { height: 56px; }
/* Mid-page download badge at the end of "How a session works" (2026-09-22). Before it, a phone
   visitor scrolled ~4,600px between the hero badge and the closing one with no way to download.
   Apple asks for one App Store badge per layout, so it hides wherever it would share the screen
   with the hero badge. Measured: from 808px wide (where .shots fits four across and the page
   shortens) the two badges sit as little as 983px apart once the release-day hero ships and the
   Dec 2 switch hides the offer lines (1,044px before it; re-measured 2026-09-24), so the cutoff is
   980px; below 808px they are never less than 1,464px apart, a height no phone or small iPad reaches. */
.get-app { text-align: center; margin-top: 28px; }
@media (min-width: 808px) and (min-height: 980px), (min-height: 1460px) { .get-app { display: none; } }
.hero .free { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* B2: the free-season line under the hero's free line. Claim and price share one style so
   the price is as easy to read as the word "free". Hidden from Dec 2 by the page's switch. */
.hero .season-line { font-size: 14px; line-height: 1.45; color: var(--pine); max-width: 440px;
  margin: 6px auto 0; text-wrap: balance; }
.hero .season-line b { font-weight: 700; white-space: nowrap; }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 44px 0; }
.shots figure { margin: 0; text-align: center; }
.shots img { width: 100%; max-width: 240px; height: auto; border-radius: 18px; box-shadow: 0 8px 24px rgba(28,28,30,.12); }
.shots figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; font-weight: 600; }

section.block { margin: 52px 0; }
section.block h2 { font-size: 27px; margin: 0 0 6px; }
section.block p.lead { color: var(--muted); margin-top: 0; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 20px; }
.card {
  background: #fff; border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 4px 16px rgba(28,28,30,.06);
}
.card .k { display: inline-block; background: var(--pine); color: #fff; font-weight: 800;
  width: 30px; height: 30px; border-radius: 15px; text-align: center; line-height: 30px; margin-bottom: 10px; }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 0; font-size: 15.5px; color: var(--muted); }
.card a { color: var(--pine); }
.card.gold { background: rgba(255, 210, 63, .18); border: 1.5px solid rgba(255, 210, 63, .8); }

ul.formats { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
ul.formats li { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 16px rgba(28,28,30,.06); }
ul.formats b { color: var(--pine); }
ul.formats span { color: var(--muted); font-size: 15.5px; }

.cta {
  background: var(--pine); color: #fff; border-radius: 20px;
  padding: 34px 24px; text-align: center; margin-top: 56px;
}
.cta h2 { margin: 0 0 8px; }
.cta p { margin: 0 0 20px; opacity: .92; }
.cta a.live { color: var(--butter); font-weight: 700; }

footer.site { border-top: 1px solid #e6e1d5; padding: 26px 20px 40px; text-align: center; font-size: 14.5px; color: var(--muted); }
footer.site a { color: var(--pine); font-weight: 600; text-decoration: none; margin: 0 10px; }
footer.site a:hover { text-decoration: underline; }
/* Apple asks for this credit wherever its App Store badge is used, once, with the legal notices. */
footer.site p.credit { font-size: 12px; line-height: 1.45; max-width: 560px; margin: 12px auto 0; }

/* article pages (privacy / support) */
article.doc { max-width: 720px; margin: 0 auto; }
article.doc h1 { font-size: 32px; margin: 26px 0 4px; }
article.doc p.updated { color: var(--muted); font-size: 15px; margin-top: 0; }
article.doc h2 { font-size: 21px; margin: 30px 0 8px; color: var(--pine); }
article.doc p, article.doc li { font-size: 17px; }
article.doc a { color: var(--pine); font-weight: 600; }