/* ==========================================================================
   SmartStat styles. One file, in the same order as the sections in index.php.

   1. Colours, fonts, sizes     5. What you get      10. Pricing
   2. Base elements             6. Demo screen       11. Reviews, team, FAQ
   3. Shared parts (buttons…)   7. Statistics        12. Contact form
   4. Header and hero           8. How it works      13. Footer
                                9. Stadiums          14. Motion preferences

   To change a colour everywhere, change it once in section 1.
   ========================================================================== */

/* ---------- 1. Colours, fonts, sizes ------------------------------------ */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
/* Arial resized to the same width as Roboto, so the text does not jump when
   Roboto arrives. Bold Roboto is a little narrower than bold Arial. */
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial");
  font-weight: 400 600;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 700 900;
  size-adjust: 94.5%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  /* Brand palette (taken from the logo) */
  --night: #0a1420;       /* page background: dark blue-black            */
  --night-2: #0f1c2c;     /* panels one step lighter                      */
  --line: #1d3145;        /* quiet borders                                */
  --line-2: #2c475f;      /* pitch markings, stronger borders             */
  --chalk: #f1f5ee;       /* main text, the "Smart" in the logo           */
  --mist: #93a6b8;        /* secondary text                               */
  --turf: #2ee06f;        /* neon grass green: data, links, the "Stat"    */
  --ball: #ff9f1c;        /* warm accent: the ball, main buttons only     */
  --error: #ff8a7a;       /* form errors only                             */

  /* One family for everything. Headings and numbers use --font-display,
     text uses --font-body; to try another font, change these two lines and
     the @font-face above. */
  --font-display: "Roboto", "Roboto Fallback", Arial, sans-serif;
  --font-body: "Roboto", "Roboto Fallback", Arial, sans-serif;

  --wrap: 75rem;                         /* widest the content gets */
  --gutter: clamp(1rem, 4vw, 2.5rem);    /* space at the screen edges */
  --section: clamp(4rem, 9vw, 7.5rem);   /* space between sections */
  --radius: 1.25rem;
}

/* ---------- 2. Base elements --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;   /* anchors stop below the sticky header */
}

body {
  margin: 0;
  background: var(--night);
  color: var(--chalk);
  font: 400 1.0625rem/1.6 var(--font-body);
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1.1rem + 4.4vw, 4.25rem); font-weight: 800; }
h2 { font-size: clamp(1.625rem, 1.1rem + 2.3vw, 2.75rem); max-width: 26ch; }
h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
h4 { font-size: 0.9375rem; font-weight: 600; color: var(--mist); }

a { color: var(--turf); text-underline-offset: 0.2em; }
a:hover { color: var(--chalk); }

:focus-visible {
  outline: 2px solid var(--ball);
  outline-offset: 3px;
  border-radius: 4px;
}

svg { display: block; }
img { max-width: 100%; height: auto; }
small { font-size: 0.85em; font-weight: 400; color: var(--mist); }

/* ---------- 3. Shared parts ---------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section) 0;
  /* Sections below the screen are not laid out or painted during page load;
     50rem is only the height the browser assumes for them meanwhile. main.js
     adds "all-sections" to <html> at the visitor's first touch, scroll or key
     press, so menu links always land in exactly the right place.
     (Without JavaScript, assets/css/no-js.css switches this off.) */
  content-visibility: auto;
  contain-intrinsic-size: auto 50rem;
}
.all-sections .section { content-visibility: visible; }
/* Space under a section heading: large before content, small before an intro line */
.section h2 { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section h2:has(+ .section-text) { margin-bottom: 1rem; }
.section-text { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 3rem); color: var(--mist); }
.fineprint { font-size: 0.875rem; color: var(--mist); }

/* Text for screen readers only */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; }

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  background: var(--chalk);
  color: var(--night);
  border-radius: 0.5rem;
}
.skip:focus { top: 1rem; }

/* Buttons. Orange ("ball") is the one main action; "line" is the quiet one. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 99rem;
  font: 600 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-ball { background: var(--ball); color: var(--night); }
.btn-ball:hover { background: #ffb347; color: var(--night); }
.btn-line { border-color: var(--line-2); color: var(--chalk); }
.btn-line:hover { border-color: var(--chalk); }

/* Team names with their mark: circle = Greens, diamond = Whites */
.team { display: inline-flex; align-items: center; gap: 0.5rem; }
.team::before { content: ""; width: 0.7rem; height: 0.7rem; flex: none; }
.team-a::before { background: var(--turf); border-radius: 50%; }
.team-b::before { background: var(--chalk); transform: rotate(45deg) scale(0.85); }

/* Boxes that hold a 3D scene. The poster shows first; the canvas fades in
   over it when assets/js/scenes.js has drawn its first frame. */
.scene { position: relative; color: var(--line-2); }
.scene-poster, .scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transition: opacity 0.6s;
}
.scene-canvas { opacity: 0; }
.scene.is-live .scene-canvas { opacity: 1; }
.scene.is-live .scene-poster { opacity: 0; }

/* ---------- 4. Header and hero ------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(10 20 32 / 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--chalk);
  text-decoration: none;
}
.brand-name { font: 800 1.25rem/1 var(--font-display); letter-spacing: -0.01em; }
.brand-name span { color: var(--turf); }
.brand-word { flex: none; }

.nav-desktop ul { display: flex; gap: 1.5rem; }
.nav-desktop a {
  color: var(--chalk);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-desktop a:hover { color: var(--turf); }

.lang ul { display: flex; }
.lang a {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--mist);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.lang a:hover { color: var(--chalk); }
.lang a[aria-current] { color: var(--turf); }
.lang a[aria-current] span:first-child { border-bottom: 2px solid var(--turf); }

.nav-mobile { display: none; }
.nav-mobile summary {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  list-style: none;
  cursor: pointer;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after {
  display: block;
  width: 1.4rem; height: 2px;
  background: var(--chalk);
  border-radius: 2px;
  transition: transform 0.2s;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; }
.burger::after { top: 7px; }
.nav-mobile[open] .burger { background: transparent; }
.nav-mobile[open] .burger::before { transform: translateY(7px) rotate(45deg); }
.nav-mobile[open] .burger::after { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding: 0.5rem var(--gutter) 1.25rem;
  background: var(--night);
  border-bottom: 1px solid var(--line);
}
.nav-mobile nav a {
  display: block;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--chalk);
  text-decoration: none;
}
.nav-mobile nav li:last-child a { border: 0; color: var(--ball); font-weight: 600; }

@media (max-width: 68rem) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
}
@media (max-width: 40rem) {
  .header-cta { display: none; }
  .header-row { gap: 0.25rem; }
}
@media (max-width: 26rem) {       /* small phones: everything in the bar a little tighter */
  .brand { gap: 0.4rem; }
  .brand-word { width: 6.5rem; }
  .lang a { min-width: 2.25rem; }
}
@media (max-width: 21rem) {
  .lang a { min-width: 2rem; }
  .brand-word { width: 5.75rem; }
}

/* Hero: text on the left, the tracked pitch on the right */
.hero {
  padding-top: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  /* faint mowing stripes, like a pitch seen from the camera */
  background: repeating-linear-gradient(90deg, transparent 0 7rem, rgb(46 224 111 / 0.022) 7rem 14rem);
}
.hero-grid {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
}
.hero-copy h1 { max-width: 18ch; }
.lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--mist);
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.scene-pitch { aspect-ratio: 16 / 9; color: var(--line-2); }
.scene-pitch .scene-poster {
  overflow: visible;
  transform: perspective(60rem) rotateX(56deg) rotateZ(-10deg) scale(0.86);
}
.dots-a { fill: var(--turf); }
.dots-b { fill: var(--chalk); }
.dot-ball { fill: var(--ball); }
.dot-ring { fill: none; stroke: var(--ball); stroke-width: 1.5; opacity: 0.5; }

@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .scene-pitch { aspect-ratio: 4 / 3; margin-right: calc(-1 * var(--gutter)); }
}

/* Sample match strip under the hero */
.ticker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2.5rem;
  align-items: center;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding-block: 1.25rem;
  border-block: 1px solid var(--line);
}
.ticker-cap { font-size: 0.875rem; color: var(--mist); }
.ticker-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  font-weight: 600;
}
.ticker-score b, .score b {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ticker-score b { font-size: 1.875rem; }
.ticker-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.ticker-stats dt { font-size: 0.875rem; color: var(--mist); }
.ticker-stats dd {
  font: 700 1.3125rem/1.3 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 48rem) {
  .ticker-stats { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}
@media (min-width: 75rem) {
  .ticker { grid-template-columns: auto auto 1fr; }
}

/* ---------- 5. What you get ---------------------------------------------- */

/* Four panels drawn like a pitch from above: outline, halfway lines and the
   centre circle. */
.quad {
  position: relative;
  display: grid;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius);
}
.quad li { padding: clamp(1.5rem, 4vw, 3rem); }
.quad li + li { border-top: 1.5px solid var(--line-2); }
.quad-icon { color: var(--turf); margin-bottom: 1.25rem; }
.quad p { margin-top: 0.5rem; max-width: 26rem; color: var(--mist); }

@media (min-width: 48rem) {
  .quad { grid-template-columns: 1fr 1fr; }
  .quad li:nth-child(2) { border-top: 0; }
  .quad li:nth-child(even) { border-left: 1.5px solid var(--line-2); }
  .quad::after {            /* centre circle */
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 5.5rem; height: 5.5rem;
    margin: -2.75rem 0 0 -2.75rem;
    border: 1.5px solid var(--line-2);
    border-radius: 50%;
    background: radial-gradient(circle, var(--line-2) 0 3px, var(--night) 3.5px);
    pointer-events: none;
  }
}

/* ---------- 6. Demo screen ----------------------------------------------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.section-head h2 { margin-bottom: 0; }
.tag {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: 99rem;
  font-size: 0.875rem;
  color: var(--mist);
}

/* Panels sit on a 1px grid of lines, like cells of a scoreboard */
.screen {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); background: var(--night-2); }
.panel > h3, .heat-head h3 { font-size: 0.9375rem; font-weight: 600; color: var(--mist); }
.panel > h3 { margin-bottom: 1.25rem; }

.score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem clamp(1rem, 4vw, 2.5rem);
  font-weight: 600;
}
.score b { font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 800; line-height: 1; }

.compare { display: grid; gap: 1.1rem; }
.compare li {
  display: grid;
  grid-template-columns: 3.5rem 1fr 3.5rem;
  align-items: baseline;
  row-gap: 0.4rem;
}
.compare-a, .compare-b { font: 700 1.1875rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.compare-b { text-align: right; }
.compare-label { text-align: center; font-size: 0.9375rem; color: var(--mist); }
.compare-bar { grid-column: 1 / -1; }
.fill-a { fill: var(--turf); }
.fill-b { fill: var(--chalk); }

.shotmap { width: 100%; height: auto; color: var(--line-2); overflow: visible; }
.shot-a, .shot-b, .shot-key { fill: var(--night-2); stroke-width: 2; }
.shot-a { stroke: var(--turf); }
.shot-b { stroke: var(--chalk); }
.shot-key { stroke: var(--mist); }
.shot-a.is-goal { fill: var(--turf); }
.shot-b.is-goal { fill: var(--chalk); }
.shot-key.is-goal { fill: var(--mist); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1rem; font-size: 0.875rem; color: var(--mist); }
.legend li { display: inline-flex; align-items: center; gap: 0.45rem; }

.player-head { display: flex; align-items: center; gap: 1rem; }
.jersey {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem; height: 3.5rem;
  border: 2px solid var(--turf);
  border-radius: 50%;
  font: 700 1.125rem/1 var(--font-display);
}
.player-name { font-weight: 700; line-height: 1.3; }
.player-name span, .player-rating span { display: block; font-size: 0.875rem; font-weight: 400; color: var(--mist); }
.player-rating { margin-left: auto; text-align: right; }
.player-rating b { font: 800 2.5rem/1 var(--font-display); }
.player-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1.5rem;
  margin-top: 1.25rem;
}
.player-stats div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.55rem;
  border-top: 1px solid var(--line);
}
.player-stats dt { font-size: 0.875rem; color: var(--mist); }
.player-stats dd { font: 700 1.0625rem/1.3 var(--font-display); white-space: nowrap; }
.player-stats small { font-family: var(--font-body); }
.radar { width: 100%; max-width: 24rem; height: auto; margin: 1rem auto 0; overflow: visible; }
.radar-ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.radar-shape { fill: rgb(46 224 111 / 0.16); stroke: var(--turf); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--turf); stroke: var(--night-2); stroke-width: 2; }
.radar-label { fill: var(--mist); font: 400 12px var(--font-body); }

.heat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.heat-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--line-2);
  border-radius: 99rem;
  background: none;
  color: var(--chalk);
  font: 500 0.875rem/1.2 var(--font-body);
  cursor: pointer;
}
.chip:hover { border-color: var(--chalk); }
.chip:disabled { opacity: 0.6; cursor: default; }
.heat-spots.is-off { display: none; }
.chip[aria-pressed="true"] { border-color: var(--turf); background: var(--turf); color: var(--night); font-weight: 600; }
.scene-heat { aspect-ratio: 16 / 10; margin-top: 1rem; }
.scene-heat .scene-poster { padding: 6% 4%; }
.heat-scale { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--mist); }
.heat-scale i { flex: 1; max-width: 12rem; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #14402c, var(--turf), #d9ffe6); }
.panel-heat h4 { margin: 1.75rem 0 0.75rem; }
.thirds-bar rect { fill: var(--turf); }
.thirds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.6rem; }
.thirds dt { font-size: 0.875rem; color: var(--mist); }
.thirds dd { font: 700 1.375rem/1.3 var(--font-display); }

@media (min-width: 62rem) {
  .screen { grid-template-columns: 5fr 7fr; }
  .panel-score { grid-column: 1 / -1; }
}

/* ---------- 7. Statistics ------------------------------------------------- */

.sheet { columns: 3 17rem; column-gap: clamp(2rem, 4vw, 3.5rem); }
.sheet-group { break-inside: avoid; padding-bottom: 2.25rem; }
.sheet-group h3 {
  padding-bottom: 0.6rem;
  font: 700 1.1875rem/1.3 var(--font-display);
  color: var(--turf);
}
.sheet-group li { padding-block: 0.6rem; border-top: 1px solid var(--line); line-height: 1.4; }
.sheet-group b { display: block; font-weight: 600; }
.sheet-group span { font-size: 0.9375rem; color: var(--mist); }

/* ---------- 8. How it works ------------------------------------------------ */

/* The steps are joined by the dotted trail from the logo: the dots grow from
   step to step and the trail ends at the orange ball. */
.steps { display: grid; counter-reset: step; }
.steps li {
  --dot: 4px;
  position: relative;
  padding: 0 0 2.25rem 2.75rem;
  counter-increment: step;
}
.steps li:nth-child(2) { --dot: 6px; }
.steps li:nth-child(3) { --dot: 8px; }
.steps li:nth-child(4) { --dot: 10px; }
.steps li::before {
  content: "";
  position: absolute;
  left: calc(0.5rem - var(--dot) / 2); top: 0.4rem; bottom: 0;
  width: var(--dot);
  background: radial-gradient(circle closest-side, var(--turf) 96%, transparent) 50% 0 / var(--dot) calc(var(--dot) * 2.6) space;
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::before { bottom: auto; height: 4.5rem; }
.steps li:last-child::after {
  content: "";
  position: absolute;
  left: calc(0.5rem - 9px); top: 5.6rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ball);
  box-shadow: 0 0 0 5px var(--night), 0 0 0 7px rgb(255 159 28 / 0.45);
}
.steps li:last-child { min-height: 7.5rem; }
.steps h3::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.35rem;
  font: 800 2.25rem/1 var(--font-display);
  color: var(--line-2);
}
.steps p { margin-top: 0.4rem; max-width: 22rem; color: var(--mist); }

@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps li, .steps li:last-child { padding: 3rem 1.75rem 0 0; min-height: 0; }
  .steps li::before, .steps li:last-child::before {
    left: 0; right: 0; top: calc(0.75rem - var(--dot) / 2); bottom: auto;
    width: auto; height: var(--dot);
    background-position: 0 50%;
    background-size: calc(var(--dot) * 2.6) var(--dot);
  }
  .steps li:last-child::before { right: 3.5rem; }
  .steps li:last-child::after { left: auto; right: 1.75rem; top: calc(0.75rem - 9px); }
}

/* ---------- 9. Stadiums ---------------------------------------------------- */

.stadiums { display: grid; gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.map {
  width: 100%; height: auto;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.map pattern circle { fill: var(--line-2); }
.pin-ring { fill: none; stroke: var(--turf); stroke-width: 1.5; opacity: 0.45; }
.pin-dot { fill: var(--turf); }
.pin-num { fill: var(--night); font: 700 11px var(--font-display); }

.stadium-list { counter-reset: stadium; }
.stadium-list li {
  position: relative;
  padding: 1.1rem 0 1.1rem 3.25rem;
  border-top: 1px solid var(--line);
  counter-increment: stadium;
}
.stadium-list li::before {
  content: counter(stadium);
  position: absolute;
  left: 0; top: 1.15rem;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--turf);
  color: var(--night);
  font: 700 0.8125rem/1 var(--font-display);
}
.stadium-list p { color: var(--mist); }
.stadium-list a { display: inline-block; padding-block: 0.6rem 0.35rem; font-weight: 600; }
.stadium-list .stadium-next::before {
  content: "+";
  background: none;
  border: 1.5px dashed var(--line-2);
  color: var(--mist);
  font-size: 1rem;
}
@media (min-width: 56rem) {
  .stadiums { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---------- 10. Pricing ---------------------------------------------------- */

.plans { display: grid; gap: 1.25rem; align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.plan-main { border: 1.5px solid var(--turf); background: var(--night-2); }
.plan-flag {
  position: absolute;
  right: 1.25rem; top: -0.8rem;
  padding: 0.15rem 0.75rem;
  border-radius: 99rem;
  background: var(--turf);
  color: var(--night);
  font-size: 0.8125rem;
  font-weight: 700;
}
.plan h3 { font: 800 1.5rem/1.2 var(--font-display); }
.plan-for { margin-top: 0.3rem; color: var(--mist); }
.plan-price { margin-top: 1.5rem; color: var(--mist); }
.plan-price b { font: 800 3rem/1 var(--font-display); color: var(--chalk); }
.plan-price .plan-price-text { font-size: 1.625rem; line-height: 1.85; }
.ticks { display: grid; gap: 0.6rem; margin-block: 1.5rem 2rem; }
.ticks li { position: relative; padding-left: 1.4rem; line-height: 1.4; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--turf);
}
.plan .btn { margin-top: auto; }
.plans + .fineprint { margin-top: 1.25rem; }
@media (min-width: 56rem) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 11. Reviews, team, FAQ ----------------------------------------- */

.reviews { display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.reviews figure { padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
.reviews blockquote { font-size: 1.125rem; line-height: 1.5; }
.reviews figcaption { margin-top: 1.25rem; font-size: 0.9375rem; }
.reviews figcaption span { display: block; color: var(--mist); }
@media (min-width: 56rem) {
  .reviews { grid-template-columns: repeat(3, 1fr); }
}

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 2rem 1.5rem; }
.avatar {
  display: grid;
  place-items: center;
  width: 6rem; height: 6rem;
  margin-bottom: 1rem;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  background: var(--night-2);
  object-fit: cover;
  font: 600 1.375rem/1 var(--font-display);
  color: var(--turf);
}
.people p { margin-top: 0.2rem; font-size: 0.9375rem; color: var(--mist); }

.faq-grid { display: grid; gap: 0 clamp(2rem, 5vw, 4rem); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 1.1rem 2.75rem 1.1rem 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem; top: 50%;
  width: 0.75rem; height: 0.75rem;
  margin-top: -0.375rem;
  border-radius: 50%;
  border: 2px solid var(--turf);
  transition: background 0.15s;
}
.faq details[open] summary::after { background: var(--turf); }
.faq details p { max-width: 60ch; padding-bottom: 1.25rem; color: var(--mist); }
@media (min-width: 56rem) {
  .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}

/* ---------- 12. Contact form ----------------------------------------------- */

.section-contact {
  margin-top: var(--section);
  padding-block: var(--section);
  background: var(--night-2);
  border-top: 1px solid var(--line);
}
.contact-grid { display: grid; gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-copy .section-text { margin-bottom: 0; }
.contact-direct { display: grid; gap: 0.25rem; justify-items: start; margin-top: 2rem; }
.contact-direct span { font-size: 0.875rem; color: var(--mist); }
.contact-direct a { padding-block: 0.3rem; font: 700 1.25rem/1.4 var(--font-display); color: var(--chalk); text-decoration: none; }
.contact-direct a:hover { color: var(--turf); }
.scene-logo { display: none; width: 14rem; aspect-ratio: 1; margin-top: 2rem; }
.scene-logo .scene-poster { padding: 12% 16%; }

.form { display: grid; grid-template-columns: 1fr; gap: 1.1rem 1.25rem; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-size: 0.9375rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line-2);
  border-radius: 0.75rem;
  background: var(--night);
  color: var(--chalk);
  font: inherit;
}
.field select {
  appearance: none;
  padding-right: 2.5rem;
  /* the arrow, drawn with two gradients so no image file is needed */
  background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%);
  background-position: right 1.25rem center, right 0.9rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.field textarea { resize: vertical; }
.field ::placeholder { color: #7f93a6; opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--turf);
  outline-offset: 1px;
  border-color: var(--turf);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { font-size: 0.875rem; color: var(--error); }
.field-error[hidden] { display: none; }
.field-trap { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.form-foot .fineprint { flex: 1 1 14rem; }
.form-status { padding: 0.8rem 1rem; border-radius: 0.75rem; border: 1.5px solid var(--line-2); font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-ok { border-color: var(--turf); }
.form-status.is-error { border-color: var(--error); color: var(--error); }

@media (min-width: 36rem) {
  .form { grid-template-columns: 1fr 1fr; }
  .field-wide, .form-foot, .form-status { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .scene-logo { display: block; }
}

/* ---------- 13. Footer ------------------------------------------------------ */

.site-footer { padding-block: 3rem 2rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--mist); }
.footer-row { display: grid; gap: 2rem; }
.site-footer .brand { margin-bottom: 0.6rem; }
.footer-links { display: grid; gap: 0.15rem; align-content: start; }
.footer-links a { display: inline-block; padding-block: 0.4rem; color: var(--chalk); text-decoration: none; }
.footer-links a:hover { color: var(--turf); }
.copyright { margin-top: 2.5rem; font-size: 0.875rem; }
@media (min-width: 48rem) {
  .footer-row { grid-template-columns: 2fr 1fr 1fr; }
}

/* Simple page for "not found" (404.html) */
.lost { min-height: 100vh; display: grid; place-content: center; justify-items: start; gap: 1.25rem; padding: var(--gutter); }

/* ---------- 14. Motion preferences ------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}