.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; }

/* Wraps: nine policy links in one row ran off the right edge of a phone. */
.seo-footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) 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);
}

/* The match scoreboard: a navy board, each side's crest and name either side
   of the score (or the kick-off time), the state beneath it, then when and
   where. The same board on a phone, just tighter. */
.mp-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: var(--s-5);
  padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px) clamp(18px, 2.5vw, 28px);
  border-radius: var(--r-xl);
  color: var(--white);
  background:
    linear-gradient(125deg, rgba(37, 99, 235, .5) 0 22%, transparent 50%),
    linear-gradient(140deg, var(--deep-navy), var(--midnight) 72%);
  box-shadow: 0 24px 60px rgba(3, 16, 32, .24);
}
.mp-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(120deg, transparent 0 24px,
              rgba(255, 255, 255, .03) 25px 26px);
}
/* The h1 names the match for a crawler and a screen reader; on the board it
   is the small line above, with the competition. */
.mp-head h1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin: 0 0 clamp(14px, 2.5vw, 24px);
  font-size: var(--t-meta);
  font-weight: 600;
  text-align: center;
  color: var(--on-dark-mid, #cdddf3);
}
.mp-league {
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  color: #a9c2ff;
}
.mp-league::before { content: "\00B7"; margin-inline-end: 10px; color: rgba(255, 255, 255, .4); }
.mp-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 3vw, 40px);
}
.mp-side {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  text-align: center;
}
.mp-crest {
  width: clamp(52px, 8vw, 84px);
  height: clamp(52px, 8vw, 84px);
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(3, 16, 32, .45));
}
.mp-crest--initials {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--white);
}
.mp-team {
  font-family: var(--font-display);
  font-size: clamp(1rem, .8rem + 1.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  overflow-wrap: anywhere;
}
.mp-centre { display: grid; justify-items: center; gap: 10px; }
.mp-score {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--white);
  text-shadow: 0 12px 34px rgba(3, 16, 32, .45);
}
.mp-score .mp-dash { color: rgba(255, 255, 255, .35); }
.mp-kickoff { margin: 0; text-align: center; }
.mp-kickoff time {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.mp-kickoff .mp-zone { font-size: var(--t-micro); color: var(--on-dark-mid, #cdddf3); }
.mp-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
}
/* State is carried by a label, never by colour alone. */
.mp-state {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}
.mp-state--live {
  border-color: var(--live);
  background: color-mix(in srgb, var(--live) 18%, transparent);
  color: #ffd3d3;
}
.mp-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #ffd3d3;
}
.mp-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: clamp(14px, 2.5vw, 22px) 0 0;
  padding-top: clamp(12px, 2vw, 18px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--t-meta);
  text-align: center;
  color: var(--on-dark-mid, #cdddf3);
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .mp-state--live::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 6px;
    border-radius: 50%;
    background: var(--live);
    vertical-align: 1px;
    animation: railPulse 2s ease-in-out infinite;
  }
}
@keyframes railPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}

.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 { border-radius: var(--r-lg); }
  .mp-board { gap: 8px; }
  .mp-league { flex-basis: 100%; }
  .mp-league::before { content: none; }
  .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); }

/* Rich trust pages: a lede, four at-a-glance cards, then numbered process steps. */
.trust-lede { font-size: 1.2rem; line-height: 1.6; color: var(--ink); margin: 0 0 var(--s-6); }
.trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
  margin: 0 0 var(--s-7);
}
.trust-card {
  padding: var(--s-5);
  border: 1px solid var(--surface-line);
  border-top: 3px solid var(--electric);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.trust-body .trust-card h2 { font-size: 1rem; margin: 0 0 var(--s-2); color: var(--ink); }
.trust-body .trust-card p { margin: 0; font-size: var(--t-meta); }
.trust-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s-4); }
.trust-body .trust-steps li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding-inline-start: 3rem;
  color: var(--ink-mid);
  line-height: var(--lh-body);
}
.trust-steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--electric);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-meta);
}
.trust-steps strong { display: block; color: var(--ink); }
/* Rich trust pages (About, Privacy) fill the page: lede and cards span the width, sections sit as
   two columns of panels on desktop and stack on narrow screens. */
.trust-body.trust-rich {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.trust-body.trust-rich > .trust-lede,
.trust-body.trust-rich > .trust-cards,
.trust-body.trust-rich > section:last-child { grid-column: 1 / -1; }
.trust-body.trust-rich > .trust-cards { margin: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.trust-body.trust-rich > .trust-lede { margin: 0; max-width: 80ch; }
.trust-body.trust-rich > section {
  margin: 0;
  padding: var(--s-6);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
@media (max-width: 860px) {
  .trust-body.trust-rich { grid-template-columns: 1fr; }
}

/* Rich trust page hero runs edge to edge; its text stays aligned with the page. */
.sheet:has(.trust-rich) { overflow-x: clip; }
.seo-page:has(.trust-rich) .seo-hero {
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(48px, 8vw, 104px);
  padding-inline: calc(50vw - 50% + clamp(0px, 1vw, 8px));
  border-radius: 0;
  border-inline: 0;
}
.seo-page:has(.trust-rich) .seo-hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.seo-page:has(.trust-rich) .seo-hero p { font-size: 1.15rem; }

/* Rich trust page motion: the hero and first rows rise in on load; panels reveal as
   they scroll into view where the browser supports it; cards lift on hover. */
@keyframes trustRise { from { opacity: 0; transform: translateY(18px); } }
@keyframes trustPop { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .seo-page:has(.trust-rich) .seo-hero > * {
    animation: trustRise .7s var(--ease-out, ease-out) both;
  }
  :root:not([data-motion="off"]) .seo-page:has(.trust-rich) .seo-hero > :nth-child(2) { animation-delay: .08s; }
  :root:not([data-motion="off"]) .seo-page:has(.trust-rich) .seo-hero > :nth-child(3) { animation-delay: .16s; }
  :root:not([data-motion="off"]) .trust-lede { animation: trustRise .7s .2s var(--ease-out, ease-out) both; }
  :root:not([data-motion="off"]) .trust-card { animation: trustRise .6s var(--ease-out, ease-out) both; }
  :root:not([data-motion="off"]) .trust-card:nth-child(1) { animation-delay: .28s; }
  :root:not([data-motion="off"]) .trust-card:nth-child(2) { animation-delay: .36s; }
  :root:not([data-motion="off"]) .trust-card:nth-child(3) { animation-delay: .44s; }
  :root:not([data-motion="off"]) .trust-card:nth-child(4) { animation-delay: .52s; }
  :root:not([data-motion="off"]) .trust-card {
    transition: transform .25s var(--ease-out, ease-out), box-shadow .25s var(--ease-out, ease-out);
  }
  :root:not([data-motion="off"]) .trust-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(3, 16, 32, .14);
  }
  @supports (animation-timeline: view()) {
    :root:not([data-motion="off"]) .trust-body.trust-rich > section,
    :root:not([data-motion="off"]) .trust-steps li::before {
      animation: trustRise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    :root:not([data-motion="off"]) .trust-steps li::before { animation-name: trustPop; }
  }
}

/* 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; }

/* Competition pages: the record sections reuse the match page blocks. */
.seo-page .mp-block { margin-top: var(--s-5); }
.mp-block p + p, .mp-block p + table { margin-top: var(--s-2); }
.mp-block ul { margin: 0; padding-inline-start: 1.2em; font-size: var(--t-meta); line-height: 1.7; }
.seo-page .mp-standings { display: block; overflow-x: auto; }
.cp-all { margin: var(--s-7) 0 var(--s-4); font-size: var(--t-h3); }