.seo-header,.seo-footer{display:flex;align-items:center;justify-content:space-between;padding:18px max(24px,calc((100% - 1180px)/2));background:#071b33;color:#fff}.seo-header nav,.seo-footer{display:flex;gap:24px}.seo-header a,.seo-footer a{color:inherit}.seo-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:22px;font-weight:700}.seo-brand span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#2563eb}.seo-page{max-width:1180px;margin:auto;padding:40px 24px 72px}.seo-hero{padding:40px;border:1px solid #244667;border-radius:24px;background:linear-gradient(130deg,#183d7c,#08213a 65%,#16436d);color:#fff}.seo-hero h1,.seo-article h1,.seo-match-summary h1{font-family:var(--font-display);font-size:clamp(32px,5vw,58px);line-height:1.05;margin:8px 0 16px}.seo-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:#8eb8ff}.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:28px}.seo-fixture,.seo-news-card{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.seo-fixture h2,.seo-news-card h2{font-size:20px;margin:8px 0}.seo-fixture strong{display:block;font-size:32px;font-variant-numeric:tabular-nums}.seo-fixture time{display:block;margin:8px 0;color:var(--ink-soft);overflow-wrap:anywhere}.seo-fixture nav,.seo-related,.seo-match-summary nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}.seo-fixture a,.seo-news-card a,.seo-related a,.seo-match-summary a{color:#2f6ff2}.seo-crumbs,.seo-tabs{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 24px}.seo-tabs{margin-top:24px}.seo-tabs a{padding:10px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}.seo-article{max-width:820px;margin:auto}.seo-standfirst{font-size:20px;line-height:1.55;color:var(--ink-soft)}.seo-byline{color:var(--ink-soft)}.seo-article-hero img{display:block;width:100%;height:auto;border-radius:20px}.seo-article-body{font-size:18px;line-height:1.75}.seo-article-body img{max-width:100%;height:auto}.seo-match-summary{max-width:1120px;margin:32px auto;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}.seo-match-summary .seo-score{font-size:48px;font-weight:700}.seo-match-summary dl{display:flex;gap:24px;flex-wrap:wrap}.seo-match-summary dl div{min-width:160px}.seo-match-summary dt{color:var(--ink-soft);font-size:13px}.seo-match-summary dd{margin:4px 0}.seo-footer{font-size:14px}@media(max-width:640px){.seo-header{padding:14px 18px}.seo-page{padding:24px 16px 56px}.seo-hero{padding:28px 22px}.seo-footer{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:no-preference){.seo-hero{animation:seo-in .45s ease-out both}.seo-fixture,.seo-news-card{animation:seo-in .4s ease-out both}@keyframes seo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
@supports(content-visibility:auto){.seo-fixture,.seo-news-card{content-visibility:auto;contain-intrinsic-size:240px}}


/* --- server-rendered page chrome ------------------------------
   These pages share the application's stylesheets, so most of their
   appearance comes from shell.css, cards.css and sections.css. Only the
   handful of elements unique to them are defined here. */
.seo-page { padding-block: var(--s-7) var(--s-9); }

.seo-crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--t-meta);
  color: var(--ink-soft);
}
.seo-crumbs a { color: var(--electric); }
.seo-crumbs span[aria-hidden] { color: var(--ink-faint); }

/* Navy in both themes, carrying the newsroom masthead's own beam/aurora
   motion so a policy page reads as part of the product, not a plain doc. */
.seo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: var(--s-7);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(127, 165, 248, .18);
  border-radius: var(--r-xl);
  color: var(--white);
  background:
    linear-gradient(125deg, rgba(37, 99, 235, .55) 0 24%, transparent 50%),
    linear-gradient(140deg, var(--deep-navy), var(--midnight) 72%);
  box-shadow: 0 24px 60px rgba(3, 16, 32, .24);
}
.seo-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -55% -25%;
  pointer-events: none;
  background: conic-gradient(from 100deg at 50% 50%, transparent 0 42%,
              rgba(82, 151, 255, .14) 47%, transparent 53% 100%);
  animation: seoHeroSweep 18s linear infinite;
}
.seo-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(120deg, transparent 0 24px,
              rgba(255, 255, 255, .03) 25px 26px);
}
.seo-hero > * { position: relative; z-index: 1; }
@keyframes seoHeroSweep { to { transform: rotate(1turn); } }
.seo-hero .seo-eyebrow {
  margin: 0 0 var(--s-2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a9c2ff;
}
.seo-hero h1 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(3, 16, 32, .34);
}
/* on-dark, not on-shell: the hero is navy in light mode too, so shell ink
   would be dark text on a dark ground. */
.seo-hero p { margin: 0; max-width: 68ch; color: var(--on-dark-mid); }

@media (prefers-reduced-motion: reduce) { .seo-hero::before { animation: none; } }
[data-motion="off"] .seo-hero::before { animation: none; }

.seo-footer-nav { display: flex; gap: var(--s-5); margin-bottom: var(--s-2); }

/* ============================================================
   MATCH PAGE
   The answer first, at the size of the question. Everything
   below it is depth, and none of it competes with the score.
   ============================================================ */
.mp {
  /* The light sheet the rest of the site reads on. Without it the block sat
     on the dark shell while using the light-surface ink colours, which made
     everything outside a white card invisible. */
  background: var(--surface-sunk);
  padding-block: var(--s-6) var(--s-9);
  color: var(--ink);
}

.mp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--surface-line);
}
/* The h1 names the match for a crawler and a screen reader. The two team
   names below it are the same fact set larger, for a reader glancing. */
.mp-head h1 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink-soft);
}
.mp-teams { display: grid; gap: var(--s-2); min-width: 0; }
.mp-team {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-snug);
}
.mp-score {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}
.mp-score .mp-dash { color: var(--ink-faint); }
.mp-kickoff { margin: 0; text-align: end; }
.mp-kickoff time {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mp-kickoff .mp-zone { font-size: var(--t-meta); color: var(--ink-soft); }

.mp-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  font-size: var(--t-meta);
  color: var(--ink-soft);
}
/* State is carried by a label, never by colour alone. */
.mp-state {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--surface-line-strong);
  font-weight: 600;
  color: var(--ink);
}
.mp-state--live { border-color: var(--live); color: var(--live); }
.mp-state--finished { color: var(--ink-soft); }
.mp-clock { font-variant-numeric: tabular-nums; font-weight: 600; }

.mp-updated { margin: 0 0 var(--s-5); font-size: var(--t-micro); color: var(--ink-faint); }

.mp-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.mp-jump a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--s-4);
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink);
}
.mp-jump a:hover { border-color: var(--electric); color: var(--electric); }

.mp-block {
  padding: var(--s-6);
  margin-bottom: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.mp-block h2 { margin: 0 0 var(--s-4); font-size: var(--t-h3); }
.mp-block h3 { margin: 0 0 var(--s-2); font-size: var(--t-body); }

.mp-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.mp-timeline li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--t-meta);
}
.mp-ev-min { font-weight: 700; color: var(--electric); font-variant-numeric: tabular-nums; }
.mp-ev-score { font-weight: 700; font-variant-numeric: tabular-nums; }

.mp-stats, .mp-standings { width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
.mp-stats td, .mp-stats th, .mp-standings td, .mp-standings th {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--surface-line);
  text-align: center;
}
.mp-stats th[scope="row"] { color: var(--ink-soft); font-weight: 500; }
.mp-stats td, .mp-standings td { font-variant-numeric: tabular-nums; }
.mp-standings th[scope="row"] { text-align: start; font-weight: 600; }
.mp-standings .is-here { background: var(--blue-050); }

.mp-lineups, .mp-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-5);
}
.mp-lineups ul { margin: 0; padding-inline-start: var(--s-5); font-size: var(--t-meta); }
.mp-form-pips { display: flex; gap: 4px; margin: 0; }

.mp-prob { margin: 0 0 var(--s-3); padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.mp-prob li { display: flex; justify-content: space-between; font-size: var(--t-meta); }
.mp-prob li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-block p { margin: 0; font-size: var(--t-meta); color: var(--ink-soft); }

.mp-related { margin-top: var(--s-7); }
.mp-related h2 { font-size: var(--t-h3); margin: 0 0 var(--s-3); }
.mp-related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.mp-related a { color: var(--electric); font-weight: 600; }

@media (max-width: 620px) {
  .mp-head { grid-template-columns: 1fr; padding: var(--s-5); }
  .mp-kickoff { text-align: start; }
  .mp-timeline li { grid-template-columns: 42px minmax(0, 1fr); }
  .mp-ev-score { grid-column: 2; }
}

/* ---- trust and policy pages --------------------------------- */
.trust-body { max-width: 72ch; }
.trust-body section { margin-bottom: var(--s-7); }
.trust-body h2 { font-size: var(--t-h3); margin: 0 0 var(--s-3); }
.trust-body p { margin: 0 0 var(--s-3); line-height: var(--lh-body); color: var(--ink-mid); }
.trust-body a { color: var(--electric); font-weight: 600; }
.trust-body ul { margin: 0; padding-inline-start: var(--s-5); color: var(--ink-mid); }
.trust-body li { margin-bottom: var(--s-2); line-height: var(--lh-body); }

.trust-facts {
  display: grid;
  gap: var(--s-3);
  margin: 0 0 var(--s-7);
  padding: var(--s-5);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.trust-facts > div {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
  gap: var(--s-4);
}
.trust-facts dt { color: var(--ink-faint); font-size: var(--t-meta); }
.trust-facts dd { margin: 0; color: var(--ink); }

/* An unfinished ownership statement says so, rather than going unnoticed. */
.trust-gap {
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  border-inline-start: 3px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  color: var(--ink);
}

/* A match page is about one match.
   The scoreboard sections stay in the document because main.js hydrates into
   them, but they are not shown here: a reader who asked for one fixture
   should not have to scroll a full board to reach it. */
main[data-page="match"] > #spotlight,
main[data-page="match"] > .sheet,
main[data-page="match"] > #intro { display: none; }
main[data-page="match"] > .mp { display: block; }