/* ══════════════════════════════════════════════════════════════════════
   Soccer Challenge: lifted from the app's Color.Reef (AppColors.swift)
   and its type system (Archivo, Barlow Condensed, JetBrains Mono).
   "Broadcast graphics": small uppercase scoreboard captions, mono numerals
   for anything that counts, one green accent. The career timeline from
   the game screen is the signature element. Shared by the landing page
   and both legal pages; follows the system light / dark setting.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --sc-bg:       #f5f8f4;  /* Reef.background */
  --sc-card:     #ffffff;  /* Reef.card       */
  --sc-surface:  #ffffff;  /* Reef.surface    */
  --sc-skeleton: #e8efe9;  /* Reef.skeleton   */
  --sc-ink:      #0e2318;  /* Reef.ink        */
  --sc-ink2:     #4a6455;  /* Reef.ink2       */
  --sc-ink3:     #8aa294;  /* Reef.ink3       */
  --sc-line:     #e3ece5;  /* Reef.line       */
  --sc-primary:  #14a85e;  /* Reef.primary (constant) */
  --sc-primary-strong: #0b7c44;
  --sc-on-primary: #06140c;
  --sc-warning:  #e8b33d;
  --sc-danger:   #e4573d;
  --sc-danger-line: #f2c9c0;
  --sc-primary-text: #0b7c44; /* green that passes contrast on the page */
  --sc-header:   rgba(245, 248, 244, 0.86);

  --sc-display: "Archivo", system-ui, sans-serif;
  --sc-label:   "Barlow Condensed", "Archivo", system-ui, sans-serif;
  --sc-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Remap the site-wide tokens so the shared header, footer and FAQ follow the app */
  --bg: var(--sc-bg);
  --bg-elevated: var(--sc-card);
  --text: var(--sc-ink);
  --text-muted: var(--sc-ink2);
  --text-faint: var(--sc-ink3);
  --border: var(--sc-line);
  --border-hover: var(--sc-ink3);
  --accent: var(--sc-primary);
  --font-sans: var(--sc-display);
  --font-heading: var(--sc-display);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sc-bg:       #0c1410;
    --sc-card:     #16221b;
    --sc-surface:  #0e1712;
    --sc-skeleton: #1b291f;
    --sc-ink:      #edf5ef;
    --sc-ink2:     #a5c0b0;
    --sc-ink3:     #6e8a7a;
    --sc-line:     #25332b;
    --sc-danger-line: #3a2320;
    --sc-primary-text: #14a85e;
    --sc-header:   rgba(12, 20, 16, 0.86);
  }
}

body { background: var(--sc-bg); color: var(--sc-ink); font-family: var(--sc-display); }

.site-header { background: var(--sc-header); border-color: var(--sc-line); }
.site-header .logo, .site-footer .logo {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--sc-ink);
}
.nav-link { color: var(--sc-ink2); }
.nav-link:hover { color: var(--sc-ink); background: var(--sc-skeleton); }
.nav-link-cta { color: var(--sc-ink); border-color: var(--sc-line); }
.nav-link-cta:hover { color: var(--sc-ink); background: var(--sc-skeleton); }

.site-footer { background: var(--sc-surface); border-color: var(--sc-line); }
.footer-col a:hover { color: var(--sc-ink); }

/* ── Shared pieces ── */
.sc-label {
  display: block;
  margin: 0 0 12px;
  font-family: var(--sc-label);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-primary-text);
}
.sc-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sc-label);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink);
}
.sc-wordmark img { width: 32px; height: 32px; border-radius: 8px; }

.sc-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 14px;
  background: var(--sc-primary);
  color: var(--sc-on-primary);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
}
.sc-button small { display: block; font-family: var(--sc-label); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.sc-button span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.sc-button svg { width: 22px; height: 22px; flex-shrink: 0; }
.sc-button.is-ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px var(--sc-line); }
.sc-button[aria-disabled="true"] { cursor: default; }
.sc-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Hero ── */
.sc-hero {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 28px 72px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.sc-hero h1 {
  margin: 8px 0 20px;
  font-weight: 800;
  font-size: clamp(44px, 6.6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.sc-hero h1 em { font-style: normal; color: var(--sc-primary); }
.sc-lead { max-width: 560px; margin: 0 0 28px; color: var(--sc-ink2); font-size: 18px; line-height: 1.65; }
.sc-meta { margin: 16px 0 0; font-family: var(--sc-mono); color: var(--sc-ink3); font-size: 13px; }

/* The career clue, drawn as the game draws it */
.sc-clue {
  margin: 0 0 28px;
  max-width: 460px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--sc-card);
  border: 1px solid var(--sc-line);
}
.sc-clue ol { list-style: none; margin: 0; padding: 0; }
.sc-clue li {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 20px;
  min-height: 44px;
}
.sc-clue li::before {
  content: "";
  position: absolute;
  left: 124px;
  top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--sc-ink3);
}
.sc-clue li + li::after {
  content: "";
  position: absolute;
  left: 124px;
  bottom: 50%;
  height: 100%;
  width: 1px;
  margin-bottom: 7px;
  background: var(--sc-line);
}
.sc-clue li:first-child::before { background: var(--sc-primary); }
.sc-clue time { font-family: var(--sc-mono); font-size: 15px; color: var(--sc-ink2); }
.sc-clue li:first-child time { color: var(--sc-primary-text); }
.sc-clue b { padding-left: 4px; font-size: 21px; font-weight: 700; }
.sc-clue .is-hidden::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sc-ink3); }
.sc-clue .is-hidden time { letter-spacing: 0.2em; color: var(--sc-ink3); }
.sc-clue .is-hidden b {
  display: block;
  margin-left: 4px;
  height: 18px;
  border-radius: 6px;
  background: repeating-linear-gradient(-45deg, var(--sc-skeleton) 0 6px, transparent 6px 11px), var(--sc-skeleton);
  opacity: 0.9;
}
.sc-clue .sc-more { margin: 4px 0 16px 136px; color: var(--sc-ink3); font-size: 14px; }
.sc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--sc-line);
  font-weight: 600;
  font-size: 15px;
}
.sc-option i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--sc-skeleton);
  font-family: var(--sc-mono);
  font-style: normal;
  font-size: 13px;
  color: var(--sc-ink2);
}
.sc-option.is-wrong { border-color: var(--sc-danger-line); color: var(--sc-ink3); text-decoration: line-through; text-decoration-color: var(--sc-danger); }
.sc-option.is-wrong i { color: var(--sc-danger); }

.sc-phone {
  justify-self: center;
  width: min(100%, 340px);
  border-radius: 44px;
  padding: 10px;
  /* A device bezel: dark in both appearances. */
  background: #0c1410;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px rgba(14, 35, 24, 0.25);
}
.sc-phone img { display: block; width: 100%; height: auto; border-radius: 34px; }

/* ── Sections ── */
.sc-section { max-width: 1160px; margin: 0 auto; padding: 72px 28px; }
.sc-section h2, .sc-download h2 {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(32px, 4.8vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.sc-section > p { max-width: 640px; margin: 0; color: var(--sc-ink2); font-size: 17px; line-height: 1.7; }

/* Five modes, as scoreboard rows */
.sc-modes { margin-top: 36px; display: grid; gap: 10px; }
.sc-mode {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--sc-card);
  border: 1px solid var(--sc-line);
  border-left: 4px solid var(--sc-primary);
}
.sc-mode.is-clock { border-left-color: var(--sc-warning); }
.sc-mode h3 { margin: 0; font-size: 20px; font-weight: 700; }
.sc-mode p { margin: 0; color: var(--sc-ink2); font-size: 15.5px; line-height: 1.6; }
.sc-mode .sc-stat { font-family: var(--sc-mono); font-weight: 700; font-size: 15px; color: var(--sc-ink); white-space: nowrap; }

/* Scoring board */
.sc-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.sc-score { margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; }
.sc-score div { padding: 18px; border-radius: 14px; background: var(--sc-card); border: 1px solid var(--sc-line); }
.sc-score dt { font-family: var(--sc-label); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink3); }
.sc-score dd { margin: 6px 0 0; font-family: var(--sc-mono); font-weight: 800; font-size: 28px; }
.sc-split ul { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sc-split li { padding-left: 22px; position: relative; color: var(--sc-ink2); line-height: 1.6; }
.sc-split li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-primary); }
.sc-split li strong { color: var(--sc-ink); }

/* Fair play band: always dark, like a stadium at night */
.sc-band {
  margin: 24px auto 0;
  max-width: 1104px;
  padding: 48px;
  border-radius: 28px;
  background: #0c1410;
  color: #edf5ef;
}
.sc-band .sc-label { color: #14a85e; }
.sc-band h2 { margin: 0 0 14px; font-weight: 800; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.08; letter-spacing: -0.02em; }
.sc-band p { max-width: 720px; margin: 0 0 18px; color: #a5c0b0; font-size: 17px; line-height: 1.7; }
.sc-band a { color: #14a85e; font-weight: 800; }

.sc-download { padding: 96px 28px 110px; text-align: center; }
.sc-download > img { border-radius: 24px; box-shadow: 0 10px 30px rgba(14, 35, 24, 0.18); }
.sc-download p { max-width: 560px; margin: 0 auto 26px; color: var(--sc-ink2); font-size: 17px; }
.sc-download .sc-buttons { justify-content: center; }

/* ── Legal pages ── */
.legal { max-width: 790px; margin: 0 auto; padding: 72px 24px 120px; }
.legal h1 { margin: 18px 0 8px; font-weight: 800; font-size: clamp(36px, 7vw, 50px); line-height: 1.05; letter-spacing: -0.025em; }
.legal .updated { font-family: var(--sc-mono); color: var(--sc-ink3); font-size: 13px; margin: 0 0 40px; }
.legal h2 { font-weight: 700; font-size: 21px; margin: 42px 0 12px; }
.legal p, .legal li { color: var(--sc-ink2); font-size: 15.5px; line-height: 1.75; }
.legal strong { color: var(--sc-ink); }
.legal ul { padding-left: 22px; }
.legal li { margin: 7px 0; }
.legal a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--sc-line); color: var(--sc-ink2); }
.legal th { color: var(--sc-ink); font-weight: 700; }
.sc-notice {
  margin: 28px 0;
  padding: 22px;
  border-radius: 16px;
  background: var(--sc-card);
  border: 1px solid var(--sc-line);
  border-left: 4px solid var(--sc-primary);
}
.sc-notice p { margin: 0; }

@media (max-width: 900px) {
  .sc-hero, .sc-split { grid-template-columns: 1fr; }
  .sc-hero { gap: 44px; }
  .sc-mode { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 620px) {
  .nav { padding: 0 16px; }
  .sc-hero { padding: 28px 16px 48px; }
  .sc-section { padding: 56px 16px; }
  .sc-band { margin-inline: 16px; padding: 32px 22px; }
  .sc-clue { padding: 18px 16px; }
  .sc-clue li { grid-template-columns: 92px 1fr; gap: 16px; }
  .sc-clue li::before, .sc-clue li + li::after { left: 100px; }
  .sc-clue .sc-more { margin-left: 108px; }
  .sc-clue b { font-size: 18px; }
  .sc-options { grid-template-columns: 1fr; }
  .sc-score dd { font-size: 22px; }
  .sc-score div { padding: 14px 12px; }
  .legal { padding: 48px 16px 96px; }
  .legal table { font-size: 13.5px; }
  .legal th, .legal td { padding: 8px 6px; }
}

/* The page is already stadium-dark, so lift the band onto the card color. */
@media (prefers-color-scheme: dark) {
  .sc-band { background: #16221b; box-shadow: inset 0 0 0 1px #25332b; }
}