/* Public landing-page treatment from the approved ZPL graphics guide.
 * Loaded after the legacy inline sheet until the landing page is fully split. */
:root {
  --green: var(--zpl-green);
  --orange: var(--zpl-orange);
  --ink: #15191d;
  --paper: #f7f8f6;
  --line: #e4e9e5;
}
body { font-family: var(--zpl-font-body); }
.topline {
  background: linear-gradient(90deg, var(--zpl-green) 0 42%,
    var(--zpl-red) 42% 61%, var(--zpl-orange) 61% 82%,
    var(--zpl-yellow) 82%);
}
.brand { font-family: var(--zpl-font-body); letter-spacing: .025em; }
.header .brand img { background: #0d4f2c; border-radius: 50%; padding: 4px; box-sizing: border-box; }
.hero h1, .section-head h2, .about h2 {
  font-family: var(--zpl-font-display);
  font-weight: 400;
  letter-spacing: .018em;
  line-height: .98;
}
.hero h1 { font-size: clamp(58px, 8vw, 112px); }
.hero-grid > * { min-width: 0; }
.hero h1, .hero p { max-width: 100%; overflow-wrap: anywhere; }
.fixture-heading { flex-wrap: wrap; }
.fixture-heading > * { min-width: 0; }
.section-head h2 { font-size: clamp(44px, 5vw, 68px); }
.about h2 { font-size: clamp(52px, 6vw, 78px); }
.eyebrow { color: #c8f0d5; }
.btn.orange { color: #111; }
.table-card h3 {
  background: var(--competition-accent, var(--zpl-green));
  color: var(--competition-foreground, #fff);
}
.fixture-heading strong { border-left: 5px solid var(--competition-accent, var(--zpl-green)); padding-left: 10px; }
.footer { background: #101b14; }
@media (max-width: 620px) {
  .hero-grid { width: calc(100vw - 24px); max-width: calc(100vw - 24px); grid-template-columns: minmax(0, 1fr); }
  .hero-grid > div { width: 100%; max-width: 100%; }
  .hero h1 { white-space: normal; word-break: normal; overflow-wrap: break-word; }
  .hero h1 { font-size: clamp(52px, 12vw, 76px); }
  .section-head h2 { font-size: clamp(40px, 10vw, 56px); }
}