/* ============================================================================
   iptv-premierleague.se — "Blå timmen"
   ----------------------------------------------------------------------------
   Design language rebuilt from the Leverage 2.1 "home-10" layout with the
   white-blue theme, in plain CSS. The template ships Bootstrap, jQuery and
   thirteen vendor scripts; none of that is here. What is kept is the look: a
   saturated #1e50bc header and hero, a ladder of five distinct band surfaces
   (#f5f5f5 · #0f2960 · #f5f5f5 · #111117 · #eeeeee), one blue 45° gradient as
   the single accent, prose beside a sticky widget rail, near-square 2px
   geometry, and a lifted #16161c footer with its own copyright strip below it.

   NO JAVASCRIPT DRIVES ANYTHING IN THIS FILE. The mobile menu and the FAQ are
   <details>. If a layout problem here looks like it needs a script, it needs a
   different layout instead.

   Contrast: every foreground/background pair used for text clears WCAG AA.
   --royal (#1e50bc) is 6,58:1 on paper, so it works as both a link colour and a
   button fill on light. On the dark bands it is 2,51:1 and fails silently —
   those use --royal-lift (5,54:1 on navy, 7,48:1 on pitch, 7,16:1 on slate).
   THE HERO IS A THIRD CASE: its background IS --royal, so both accent tokens
   fail against it (2,85:1 and 2,88:1). There the headline is solid white, the
   lede is --on-royal-2 (5,00:1) and the buttons are ghost with a white border —
   which is exactly what theme-white-blue.css does. See references/design.md.
   ========================================================================== */

/* ── Font: self-hosted Archivo ──────────────────────────────────────────────
   Archivo rather than the template's Poppins: Poppins is already used by two
   sibling projects, so it was the obvious choice and therefore the wrong one.
   Archivo is a grotesque — narrower, flatter terminals, tabular figures that
   suit a page full of kickoff times.

   ONE VARIABLE FILE PER SUBSET, covering the whole 400–900 axis in 68 KB. Do
   not split this into static weights: it would be six files for less range.

   Self-hosted rather than linked from fonts.googleapis.com on purpose.
   /vilka-vi-ar/ and llms.txt both state that the chat widget is the only thing
   this site loads from anywhere else, and a webfont CDN would make those
   sentences false. `font-display: swap` so text paints immediately. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* The blue. --royal is the header and hero surface AND the accent on light.
     --royal-lift is its dark-surface counterpart and is not optional. */
  --royal: #1e50bc;       /* 6,58:1 on paper · 6,81:1 with --white on it */
  --royal-2: #1a8fe3;     /* gradient partner, never used alone */
  --royal-lift: #5aa9ee;  /* 5,54:1 on navy · 7,48:1 on pitch · 7,16:1 on slate */
  --royal-wash: #e8eefb;  /* tinted well on light */

  /* Dark bands. home-10's section 2 and section 4, plus the footer. */
  --navy: #0f2960;
  --pitch: #111117;
  --slate: #16161c;
  --ink-line: rgba(255, 255, 255, .14);
  --ink-line-bright: rgba(255, 255, 255, .32);

  /* Light bands. */
  --paper: #f5f5f5;
  --paper-2: #eeeeee;
  --white: #f9f9f9;
  --line: rgba(0, 0, 0, .14);
  --line-strong: rgba(0, 0, 0, .26);

  /* Type */
  --text: #2f323a;        /* 11,4:1 on paper · 10,7:1 on --paper-2 */
  --text-2: #5f5f5f;      /* 5,86:1 on paper */
  --text-inv: #f5f5f5;    /* 12,8:1 on navy · 17,3:1 on pitch · 16,5:1 on slate */
  --text-inv-2: #a4a4a4;  /* 5,59:1 on navy · 7,55:1 on pitch · 7,23:1 on slate */
  /* THE HERO ONLY. --text-inv-2 is 2,88:1 on --royal and fails. */
  --on-royal-2: #ccd8f0;  /* 5,00:1 on --royal */

  --grad: linear-gradient(45deg, var(--royal-2) 15%, var(--royal) 65%);

  --ok: #007a4d;
  --warn: #b3261e;

  --wrap: 1180px;
  --radius: 2px;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 1rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--royal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--royal-2); }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.02em; }
h1 { font-weight: 900; font-size: clamp(2.1rem, 6.2vw, 4rem); letter-spacing: -.035em; }
h2 { font-weight: 700; font-size: clamp(1.45rem, 3.3vw, 2.25rem); }
h3 { font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
code { font-family: var(--mono); font-size: .92em; background: var(--paper-2); padding: .1em .35em; border-radius: var(--radius); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

.container { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--royal); color: var(--white);
  padding: .8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* Utility ------------------------------------------------------------------ */
.kicker {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--royal); margin-bottom: .7rem;
}
.navy .kicker, .pitch .kicker, .enlist .kicker { color: var(--royal-lift); }
.hero .kicker { color: var(--on-royal-2); }
.lede { font-size: 1.12rem; color: var(--text-2); max-width: 62ch; }
.navy .lede, .pitch .lede { color: var(--text-inv-2); }
.r { text-align: right; }
.nowrap { white-space: nowrap; }

/* The template's `.effect-static-text`: headline filled with the gradient.
   `color` stays set underneath so the text is still legible if
   background-clip is unsupported. Not used on the hero — see below. */
.grad-text {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--royal);
}
.navy .grad-text, .pitch .grad-text { color: var(--royal-lift); }
@supports (-webkit-text-fill-color: transparent) {
  .grad-text { -webkit-text-fill-color: transparent; }
}
/* theme-white-blue.css overrides the gradient clip to solid white inside the
   hero, because the hero background is the gradient's own dark stop. Same
   override here, and it is a contrast requirement as well as a fidelity one:
   --royal-lift on --royal is 2,85:1. */
.hero .grad-text {
  background-image: none;
  color: #ffffff;
}
@supports (-webkit-text-fill-color: transparent) {
  .hero .grad-text { -webkit-text-fill-color: #ffffff; }
}

/* ── Ticker ───────────────────────────────────────────────────────────────── */
.ticker {
  background: var(--pitch); color: var(--text-inv-2);
  font-size: .78rem; border-bottom: 1px solid var(--ink-line);
}
.ticker .container { display: flex; gap: 1.6rem; padding: .5rem 0; overflow-x: auto; scrollbar-width: none; }
.ticker .container::-webkit-scrollbar { display: none; }
.ticker span { white-space: nowrap; }
.ticker b { color: var(--text-inv); font-weight: 700; }
.ticker .hl { color: var(--royal-lift); font-weight: 700; margin-left: auto; padding-left: 1.6rem; }

/* ── Masthead ─────────────────────────────────────────────────────────────────
   home-10 puts the header on the accent colour rather than on near-black. It
   is the single loudest difference from home-9 and it is why this site reads
   blue before it reads anything else. */
.masthead { background: var(--royal); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.masthead .nav { display: flex; align-items: center; gap: 1.3rem; min-height: 70px; }
/* .98rem: "Premier League IPTV" is three words and the longest wordmark in the
   portfolio, and the masthead has a seven-item nav and a button to fit beside
   it. See the 1080px breakpoint below. */
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: #ffffff; text-decoration: none;
  font-weight: 900; font-size: .98rem; letter-spacing: -.03em;
  flex-shrink: 0; line-height: 1.1;
}
.brand:hover { color: #ffffff; }
.brand .mark { color: #ffffff; flex-shrink: 0; }
.brand b { color: var(--on-royal-2); font-weight: 900; }

.desktop-nav { display: none; margin-left: auto; }
.desktop-nav ul { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
/* nowrap is load-bearing: without it a wrapped nav label produces no horizontal
   overflow and still looks broken, which `npm run audit` would happily pass.
   With it, the same condition becomes overflow — which the audit does catch. */
.desktop-nav li { margin: 0; white-space: nowrap; }
/* .65rem of vertical padding, not .5 — with the inherited 1.7 line-height on a
   .86rem label that lands the link box at ~45px, over the tap-target minimum
   `npm run audit` measures. The masthead is 70px tall, so it fits. */
.desktop-nav a {
  color: #ffffff; text-decoration: none;
  font-size: .86rem; font-weight: 400;
  padding: .65rem 0; display: block; position: relative;
}
.desktop-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: .3rem;
  height: 2px; background: #ffffff; transition: right .18s ease;
}
.desktop-nav a:hover { color: #ffffff; }
.desktop-nav a:hover::after { right: 0; }
.masthead :focus-visible { outline-color: #ffffff; }

/* Mobile menu — <details>, no script. */
.mobile-nav { margin-left: auto; }
.mobile-nav summary {
  list-style: none; cursor: pointer;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-line-bright); border-radius: var(--radius);
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.bars, .bars::before, .bars::after {
  display: block; width: 20px; height: 2px; background: #ffffff; content: '';
}
.bars { position: relative; }
.bars::before { position: absolute; top: -6px; }
.bars::after { position: absolute; top: 6px; }
.mobile-nav[open] summary { border-color: #ffffff; }
.mobile-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--slate); border-bottom: 3px solid var(--royal-2);
  padding: 1rem 0 1.6rem;
  max-height: calc(100vh - 70px); overflow-y: auto;
}
.mobile-panel ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.mobile-panel li { margin: 0; border-bottom: 1px solid var(--ink-line); }
.mobile-panel a {
  display: block; padding: .85rem 1.2rem;
  color: var(--text-inv); text-decoration: none; font-size: .96rem;
}
.mobile-panel a:hover { color: var(--royal-lift); background: var(--pitch); }
.mobile-panel .btn { margin: 0 1.2rem; display: block; text-align: center; }
.mobile-panel :focus-visible { outline-color: var(--royal-lift); }

/* 1080, not 1000: three words in the wordmark. `scripts/audit-nav.js`
   straddles this number — move one and you must move the other. */
@media (min-width: 1081px) {
  .desktop-nav { display: block; }
  .mobile-nav { display: none; }
}
@media (max-width: 1080px) {
  .masthead .nav > .btn-sm { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .65rem 1.55rem;
  background: var(--royal); color: var(--white);
  border: 0; border-radius: var(--radius);
  font: 600 .93rem/1.3 var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background-image .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover, .btn:focus { background-image: var(--grad); color: var(--white); }
.btn-sm { min-height: 44px; padding: .45rem 1rem; font-size: .84rem; }
.btn-ghost {
  background: transparent; color: var(--royal);
  box-shadow: inset 0 0 0 1px var(--royal);
}
.btn-ghost:hover, .btn-ghost:focus { background: var(--royal); background-image: var(--grad); color: var(--white); box-shadow: none; }

/* theme-white-blue.css: on the header and the hero the primary button is
   stripped back to a 1px white outline. Reproduced verbatim — and it is also
   what makes the button legible, since --royal on --royal is nothing at all. */
.masthead .btn, .hero .btn {
  background: transparent; color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
}
.masthead .btn:hover, .masthead .btn:focus,
.hero .btn:hover, .hero .btn:focus {
  background-image: var(--grad); box-shadow: none; color: #ffffff;
}
.hero :focus-visible { outline-color: #ffffff; }

.navy .btn-ghost, .pitch .btn-ghost, .enlist .btn-ghost {
  color: var(--text-inv); box-shadow: inset 0 0 0 1px var(--ink-line-bright);
}
.navy .btn-ghost:hover, .navy .btn-ghost:focus,
.pitch .btn-ghost:hover, .pitch .btn-ghost:focus,
.enlist .btn-ghost:hover, .enlist .btn-ghost:focus { box-shadow: none; color: var(--white); }

/* The template's `.dark-button`: a 2px gradient frame around the label. This is
   the design's signature gesture — one per band, never more. The template draws
   it with two pseudo-elements; one is enough. */
.btn-frame {
  background: var(--paper); color: var(--text);
  position: relative; z-index: 0; border-radius: 0;
}
.btn-frame::before {
  content: ''; position: absolute; inset: -2px; z-index: -1;
  background-image: var(--grad);
}
.mute .btn-frame { background: var(--paper-2); }
.btn-frame:hover, .btn-frame:focus { background-image: var(--grad); color: var(--white); }

/* ── Section rhythm — five surfaces, not two ──────────────────────────────────
   home-9 alternates binary. home-10 runs a ladder: paper · navy · paper ·
   pitch · mute · paper. Two adjacent bands never share a background, and navy
   and pitch never touch. */
.section { padding: clamp(3.2rem, 7vw, 5.8rem) 0; }
.section.mute { background: var(--paper-2); }
.section.navy { background: var(--navy); color: var(--text-inv); }
.section.pitch { background: var(--pitch); color: var(--text-inv); }
.section.navy h1, .section.navy h2, .section.navy h3,
.section.pitch h1, .section.pitch h2, .section.pitch h3 { color: var(--text-inv); }
.section.navy a, .section.pitch a { color: var(--royal-lift); }
.section.navy a:hover, .section.pitch a:hover { color: var(--white); }
.section.navy :focus-visible, .section.pitch :focus-visible { outline-color: var(--royal-lift); }
.section-head { max-width: 62ch; margin-bottom: 2.4rem; }
.section-head p { color: var(--text-2); margin: 0; }
.navy .section-head p, .pitch .section-head p { color: var(--text-inv-2); }
.section-head.mid { margin-inline: auto; text-align: center; }

/* ── Hero ─────────────────────────────────────────────────────────────────────
   #1e50bc, the only place on the site that carries the accent as a surface.
   The template puts a full-bleed photograph here; this is two gradients
   instead — nothing to download, nothing to lay out, no CLS. */
.hero {
  background: var(--royal); color: #ffffff;
  padding: clamp(3.6rem, 10vw, 7.2rem) 0 clamp(3.2rem, 8vw, 5.4rem);
  position: relative; overflow: hidden;
}
/* Navy vignette rising from the bottom edge — the band below is navy or paper,
   and this is what keeps the seam from reading as a hard stripe. */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 41, 96, .55) 0%, transparent 52%);
  pointer-events: none;
}
/* Lighter sweep from the top right — where the template's photograph is
   brightest. */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 78% at 84% 4%, rgba(26, 143, 227, .42), transparent 64%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { margin-bottom: .5rem; max-width: 15ch; color: #ffffff; }
.hero .lede { color: var(--on-royal-2); margin: 1.1rem 0 0; font-size: clamp(1rem, 2.1vw, 1.2rem); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-note { margin: 1.3rem 0 0; font-size: .84rem; color: var(--on-royal-2); }
.hero-grid { display: grid; gap: 2.6rem; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.12fr .88fr; align-items: center; }
}
.hero.tall { padding-block: clamp(4.4rem, 12vw, 8.4rem) clamp(4rem, 10vw, 6.6rem); }

.hero-card {
  background: rgba(9, 26, 66, .58); border: 1px solid rgba(255, 255, 255, .22);
  border-top: 3px solid #ffffff;
  padding: 1.5rem 1.6rem;
}
.hero-card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0; color: #ffffff; }
.hero-card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; }
.hero-card dt { color: var(--on-royal-2); font-size: .88rem; padding: .48rem 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.hero-card dd { margin: 0; text-align: right; font-weight: 700; font-size: .93rem; color: #ffffff; padding: .48rem 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.hero-card dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* ── Figures strip ────────────────────────────────────────────────────────── */
.figures { background: var(--navy); color: var(--text-inv); padding: 2.4rem 0; }
.figures .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
@media (min-width: 800px) { .figures .container { grid-template-columns: repeat(4, 1fr); } }
.figures .cell { border-left: 2px solid var(--royal-lift); padding-left: 1rem; }
.figures .num { display: block; font: 900 clamp(1.5rem, 3.6vw, 2.1rem)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.figures .lbl { display: block; font-size: .8rem; color: var(--text-inv-2); margin-top: .35rem; }

/* ── Split — home-10's `#content`: prose beside a sticky widget rail ──────────
   The signature layout of this template. The rail is emitted AFTER the prose,
   so the phone stack reads prose → widgets, which is the right order for
   supporting material. (The article TOC does the opposite, for the opposite
   reason — see article() in scripts/shell.js.) */
.split { display: grid; gap: 2.6rem; }
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .rail { position: sticky; top: 96px; }
}
.split-main { min-width: 0; }
.split-main > h3 { margin-top: 1.9rem; }
.split-main p, .split-main li { max-width: 68ch; }
.rail { display: grid; gap: 1.2rem; }
.widget {
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--royal);
  padding: 1.4rem 1.4rem 1.5rem;
}
.widget h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-2);
  margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.widget dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; }
.widget dt { font-size: .88rem; color: var(--text-2); padding: .42rem 0; border-bottom: 1px solid var(--line); }
.widget dd { margin: 0; text-align: right; font-weight: 700; font-size: .9rem; padding: .42rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.widget dl > :nth-last-child(-n+2) { border-bottom: 0; }
.widget ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.widget li { margin: 0; border-bottom: 1px solid var(--line); }
.widget li:last-child { border-bottom: 0; }
.widget li a { display: block; padding: .55rem 0; text-decoration: none; }
.widget li a:hover { text-decoration: underline; }
.widget .btn { width: 100%; margin-top: 1.1rem; }
.widget p { font-size: .92rem; color: var(--text-2); margin: 0; }
.mute .widget { background: var(--white); }
.navy .widget, .pitch .widget { background: var(--slate); border-color: var(--ink-line); border-top-color: var(--royal-lift); }
.navy .widget h2, .pitch .widget h2 { color: var(--text-inv-2); border-bottom-color: var(--ink-line); }
.navy .widget dt, .pitch .widget dt { color: var(--text-inv-2); border-bottom-color: var(--ink-line); }
.navy .widget dd, .pitch .widget dd { color: var(--text-inv); border-bottom-color: var(--ink-line); }
.navy .widget li, .pitch .widget li { border-bottom-color: var(--ink-line); }
.navy .widget p, .pitch .widget p { color: var(--text-inv-2); }

/* ── Spotlight — home-10's `#video` band, without the video ──────────────── */
.spotlight { max-width: 880px; margin-inline: auto; text-align: center; }
.spotlight figure { margin: 2rem 0 1.8rem; }
.spotlight img { width: 100%; border: 1px solid var(--ink-line); }
.spotlight p { max-width: 68ch; margin-inline: auto; }
.spotlight .btn { margin-top: .6rem; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.4rem; }
@media (min-width: 700px) { .grid.g2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grid.g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .grid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.g4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--royal);
  padding: 1.6rem 1.5rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { margin: 0; color: var(--text-2); font-size: .95rem; }
.card p + p { margin-top: .7rem; }
.card .num-mark {
  display: block; font: 900 1.5rem/1 var(--sans);
  margin-bottom: .8rem; color: var(--royal); font-variant-numeric: tabular-nums;
}
.navy .card, .pitch .card { background: var(--slate); border-color: var(--ink-line); border-top-color: var(--royal-lift); }
.navy .card p, .pitch .card p { color: var(--text-inv-2); }
.navy .card .num-mark, .pitch .card .num-mark { color: var(--royal-lift); }

/* Linked card */
.entry {
  display: block; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--royal);
  padding: 1.3rem 1.4rem;
}
.entry h3 { margin-bottom: .35rem; color: var(--text); }
.entry p { margin: 0; color: var(--text-2); font-size: .92rem; }
.entry:hover { border-color: var(--royal); background: var(--royal-wash); color: inherit; }
.entry:hover h3 { color: var(--royal); }
.navy .entry, .pitch .entry { background: var(--slate); border-color: var(--ink-line); border-left-color: var(--royal-lift); }
.navy .entry h3, .pitch .entry h3 { color: var(--text-inv); }
.navy .entry p, .pitch .entry p { color: var(--text-inv-2); }
.navy .entry:hover, .pitch .entry:hover { background: #000000; }
.navy .entry:hover h3, .pitch .entry:hover h3 { color: var(--royal-lift); }

/* ── Showcase — the template's news grid, without the carousel ─────────────
   A carousel hides content behind a control, which is an SEO problem as well
   as a JavaScript one. Dropped rather than reimplemented. */
.showcase { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .showcase { grid-template-columns: repeat(3, 1fr); } }
.show-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line);
}
.show-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.show-card .cap { padding: 1.25rem 1.35rem 1.4rem; border-top: 3px solid var(--royal); flex: 1; }
.show-card h3 { margin-bottom: .4rem; color: var(--text); font-size: 1.05rem; }
.show-card p { margin: 0; color: var(--text-2); font-size: .92rem; }
.show-card .stamp {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--royal); margin-bottom: .5rem;
}
.show-card:hover { border-color: var(--royal); }
.show-card:hover h3 { color: var(--royal); }
.navy .show-card, .pitch .show-card { background: var(--slate); border-color: var(--ink-line); }
.navy .show-card .cap, .pitch .show-card .cap { border-top-color: var(--royal-lift); }
.navy .show-card h3, .pitch .show-card h3 { color: var(--text-inv); }
.navy .show-card p, .pitch .show-card p { color: var(--text-inv-2); }
.navy .show-card .stamp, .pitch .show-card .stamp { color: var(--royal-lift); }
.navy .show-card:hover h3, .pitch .show-card:hover h3 { color: var(--royal-lift); }

/* ── Platforms — the template's client-logo strip, as text tiles ─────────────
   NO THIRD-PARTY LOGOS. They are trademarks and this site holds none of them.
   The template's eight greyed-out client marks become eight device categories,
   which is both legally clean and more useful than a row of logos. */
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 620px) { .platforms { grid-template-columns: repeat(4, 1fr); } }
.platforms a, .platforms span {
  background: var(--white); padding: 1.15rem .9rem; text-align: center;
  text-decoration: none; color: var(--text);
  font-size: .86rem; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: center; min-height: 66px;
}
.platforms a:hover { background: var(--royal-wash); color: var(--royal); }
.mute .platforms a, .mute .platforms span { background: var(--white); }
.navy .platforms, .pitch .platforms { background: var(--ink-line); border-color: var(--ink-line); }
.navy .platforms a, .navy .platforms span,
.pitch .platforms a, .pitch .platforms span { background: var(--slate); color: var(--text-inv); }
.navy .platforms a:hover, .pitch .platforms a:hover { background: #000000; color: var(--royal-lift); }

/* ── Clock — this site's own piece of furniture ───────────────────────────────
   The recurring kickoff slots, printed as ENGLISH TIME · +1 · SWEDISH TIME.

   The sibling site that shares this toolchain has a component that fuses two
   times into one column, because on that site they are the same number. THIS
   ONE SPLITS THEM AND PUTS THE +1 BETWEEN, because on this site they are not.
   It is the argument of the whole domain as an object.

   If it is ever changed so the two numbers collapse into one, or so the Swedish
   time appears without the English time it came from, the point of it is gone.

   The times are a pattern, not a schedule — see references/football.md. Every
   caller must print the caveat underneath, and `npm run verify` fails the build
   if one does not. */
.clock {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin: 0 0 1.2rem;
}
@media (min-width: 560px) { .clock { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .clock { grid-template-columns: repeat(4, 1fr); } }
.clock .slot { background: var(--white); padding: 1.15rem 1.2rem; border-top: 3px solid transparent; }
.clock .slot.key { border-top-color: var(--royal); background: var(--royal-wash); }
.clock .day {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-2);
}
.clock .times {
  display: flex; align-items: baseline; gap: .45rem;
  margin: .5rem 0 .35rem; font-variant-numeric: tabular-nums;
}
.clock .uk { font: 400 1.15rem/1 var(--sans); color: var(--text-2); letter-spacing: -.02em; }
.clock .plus { font: 700 .7rem/1 var(--sans); color: var(--royal); letter-spacing: .04em; }
.clock .se { font: 900 1.6rem/1 var(--sans); letter-spacing: -.04em; }
.clock .slot.key .se, .clock .slot.key .plus { color: var(--royal); }
.clock .what { display: block; font-size: .85rem; color: var(--text-2); }
.navy .clock, .pitch .clock { background: var(--ink-line); border-color: var(--ink-line); }
.navy .clock .slot, .pitch .clock .slot { background: var(--slate); }
.navy .clock .slot.key, .pitch .clock .slot.key { background: #000000; border-top-color: var(--royal-lift); }
.navy .clock .day, .navy .clock .what, .navy .clock .uk,
.pitch .clock .day, .pitch .clock .what, .pitch .clock .uk { color: var(--text-inv-2); }
.navy .clock .se, .pitch .clock .se { color: var(--text-inv); }
.navy .clock .plus, .pitch .clock .plus,
.navy .clock .slot.key .se, .pitch .clock .slot.key .se { color: var(--royal-lift); }
.clock-note {
  font-size: .84rem; color: var(--text-2); margin: 0 0 1.8rem;
  border-left: 3px solid var(--royal); padding-left: .9rem;
}
.navy .clock-note, .pitch .clock-note { color: var(--text-inv-2); border-left-color: var(--royal-lift); }

/* ── Ledger — "what we can say / what we cannot" ─────────────────────────── */
.ledger { display: grid; gap: 1.4rem; margin: 0 0 1.6rem; }
@media (min-width: 800px) { .ledger { grid-template-columns: repeat(2, 1fr); } }
.ledger > div { background: var(--white); border: 1px solid var(--line); padding: 1.5rem 1.5rem 1.3rem; }
.ledger > div:first-child { border-top: 3px solid var(--ok); }
.ledger > div:last-child { border-top: 3px solid var(--warn); }
.ledger h3 { margin-bottom: .9rem; }
.ledger ul { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.ledger li { padding-left: 1.2rem; position: relative; margin-bottom: .6rem; color: var(--text-2); }
.ledger li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; }
.ledger > div:first-child li::before { background: var(--ok); }
.ledger > div:last-child li::before { background: var(--warn); }
.navy .ledger > div, .pitch .ledger > div { background: var(--slate); border-color: var(--ink-line); }
.navy .ledger li, .pitch .ledger li { color: var(--text-inv-2); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.scroller { overflow-x: auto; margin: 0 0 1.6rem; }
table.data { border-collapse: collapse; width: 100%; font-size: .93rem; background: var(--white); }
table.data th, table.data td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--line); }
table.data th {
  background: var(--navy); color: var(--text-inv);
  font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
table.data tbody tr:nth-child(even) { background: var(--paper-2); }
table.data td.r, table.data th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data caption { caption-side: bottom; text-align: left; font-size: .82rem; color: var(--text-2); padding-top: .6rem; }
.navy table.data, .pitch table.data { background: var(--slate); color: var(--text-inv); }
.navy table.data th, .pitch table.data th { background: #000000; }
.navy table.data td, .pitch table.data td { border-bottom-color: var(--ink-line); }
.navy table.data tbody tr:nth-child(even), .pitch table.data tbody tr:nth-child(even) { background: rgba(255, 255, 255, .04); }
.navy table.data caption, .pitch table.data caption { color: var(--text-inv-2); }

/* ── Price ladder ─────────────────────────────────────────────────────────── */
.ladder { display: grid; gap: 1.2rem; margin: 0 0 1.6rem; }
@media (min-width: 640px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ladder { grid-template-columns: repeat(5, 1fr); } }
.tier {
  background: var(--white); border: 1px solid var(--line);
  padding: 1.5rem 1.25rem 1.4rem; display: flex; flex-direction: column;
  position: relative;
}
.tier h3 { font-size: 1.02rem; margin-bottom: .7rem; }
.tier .price { font: 900 2.15rem/1 var(--sans); letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.tier .price span { font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.tier .per { font-size: .82rem; color: var(--text-2); margin: .35rem 0 1rem; }
.tier ul { list-style: none; padding: 0; margin: 0 0 1.3rem; font-size: .88rem; }
.tier li { padding-left: 1.1rem; position: relative; margin-bottom: .45rem; color: var(--text-2); }
.tier li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--royal); }
.tier .btn { margin-top: auto; width: 100%; }
.tier-pick { border-color: var(--royal); border-top: 3px solid var(--royal); }
.tier-trial { background: var(--paper-2); }
.tier-label {
  position: absolute; top: 0; right: 0;
  background: var(--royal); background-image: var(--grad); color: var(--white);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .25rem .6rem;
}
.tier-label-plain { background: var(--navy); background-image: none; }
.navy .tier, .pitch .tier { background: var(--slate); border-color: var(--ink-line); }
.navy .tier .price, .pitch .tier .price { color: var(--text-inv); }
.navy .tier li, .navy .tier .per, .pitch .tier li, .pitch .tier .per { color: var(--text-inv-2); }
.navy .tier li::before, .pitch .tier li::before { background: var(--royal-lift); }

/* ── Answer / callouts ────────────────────────────────────────────────────── */
.answer {
  background: var(--royal-wash); border-left: 3px solid var(--royal);
  padding: 1.2rem 1.35rem; margin: 0 0 1.8rem;
}
.answer p:last-child { margin-bottom: 0; }
.navy .answer, .pitch .answer { background: var(--slate); border-left-color: var(--royal-lift); }

.inline-cta {
  background: var(--navy); color: var(--text-inv);
  border-left: 3px solid var(--royal-lift);
  padding: 1.1rem 1.35rem; margin: 1.8rem 0; font-size: .95rem;
}
.inline-cta a { color: var(--royal-lift); }
.inline-cta a:hover { color: var(--white); }
.inline-cta :focus-visible { outline-color: var(--royal-lift); }
.inline-cta p:last-child { margin-bottom: 0; }

.note {
  border: 1px solid var(--line); border-left: 3px solid var(--text-2);
  background: var(--paper-2); padding: 1rem 1.2rem; margin: 1.6rem 0; font-size: .93rem;
}
.note p:last-child { margin-bottom: 0; }
.note.warn { border-left-color: var(--warn); }
.mute .note { background: var(--white); }
.navy .note, .pitch .note { background: var(--slate); border-color: var(--ink-line); border-left-color: var(--text-inv-2); }
.navy .note.warn, .pitch .note.warn { border-left-color: var(--warn); }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.enlist { background: var(--pitch); color: var(--text-inv); padding: clamp(2.8rem, 6.5vw, 4.4rem) 0; position: relative; overflow: hidden; }
.enlist::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(78deg, rgba(30, 80, 188, .5) 0%, transparent 62%);
  pointer-events: none;
}
.enlist .container { display: grid; gap: 1.6rem; align-items: center; position: relative; z-index: 1; }
@media (min-width: 800px) { .enlist .container { grid-template-columns: 1fr auto; } }
.enlist h2 { margin-bottom: .5rem; color: var(--text-inv); }
.enlist p { margin: 0; color: var(--text-inv-2); max-width: 58ch; }
.enlist :focus-visible { outline-color: var(--royal-lift); }

/* ── Tag links ────────────────────────────────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1.6rem; }
.tag-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .35rem .95rem; font-size: .85rem; text-decoration: none;
  background: var(--white); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.tag-link:hover { border-color: var(--royal); color: var(--royal); background: var(--royal-wash); }
.navy .tag-link, .pitch .tag-link { background: var(--slate); border-color: var(--ink-line); color: var(--text-inv); }
.navy .tag-link:hover, .pitch .tag-link:hover { border-color: var(--royal-lift); color: var(--royal-lift); background: #000000; }

/* ── Breadcrumb trail ─────────────────────────────────────────────────────── */
.trail {
  padding: 1rem 0 0; font-size: .82rem; color: var(--text-2);
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.trail a { color: var(--text-2); text-decoration: none; }
.trail a:hover { color: var(--royal); text-decoration: underline; }
.trail span[aria-hidden] { color: var(--line-strong); }
.trail [aria-current] { color: var(--text); font-weight: 600; }

/* ── Article ──────────────────────────────────────────────────────────────── */
.article { padding: 1.6rem 0 clamp(3rem, 7vw, 5rem); }
.article-head { max-width: 26ch; margin-bottom: 2.2rem; }
/* Smaller than the hero h1 on purpose. The reference template sets its display
   size at 6rem, and the hero keeps that scale — but an article title is a
   sentence rather than a slogan, and at the hero size a long one runs to four
   lines before the reader reaches a word of content. */
.article-head h1 { max-width: none; font-size: clamp(1.95rem, 4.9vw, 3.3rem); }
.article-head .meta { font-size: .82rem; color: var(--text-2); }
@media (min-width: 900px) { .article-head { max-width: 62ch; } }

.wrap { display: grid; gap: 2.6rem; }
@media (min-width: 980px) {
  .wrap { grid-template-columns: minmax(0, 1fr) 268px; }
  /* The TOC is emitted BEFORE .col-main in the DOM so the phone stack reads
     h1 → meta → contents → body. Explicit placement puts it back on the right
     at desktop widths. Do not "fix" the source order. */
  .toc { grid-column: 2; grid-row: 1; position: sticky; top: 96px; align-self: start; }
  .col-main { grid-column: 1; grid-row: 1; }
}
.col-main { min-width: 0; }
.col-main > h2 { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.col-main > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.col-main > h3 { margin-top: 1.9rem; }
.col-main p, .col-main li { max-width: 68ch; }
.col-main figure { margin: 0 0 1.8rem; }
.col-main figure img { width: 100%; border: 1px solid var(--line); }

.toc { font-size: .88rem; }
.toc h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-2);
  margin-bottom: .8rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.toc ul { list-style: none; padding: 0; margin: 0 0 1.8rem; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: .1rem; }
.toc a {
  display: block; padding: .4rem 0 .4rem 1.9rem; position: relative;
  color: var(--text-2); text-decoration: none;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; font-variant-numeric: tabular-nums;
  font-size: .76rem; color: var(--royal); font-weight: 700;
}
.toc a:hover { color: var(--royal); }
.toc .related { border-top: 1px solid var(--line); padding-top: 1rem; }
.toc .related a { padding-left: 0; display: block; padding-block: .35rem; }
.toc .related a::before { content: none; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.queries { margin: 0 0 1.8rem; border-top: 1px solid var(--line); }
.queries details { border-bottom: 1px solid var(--line); }
.queries summary {
  cursor: pointer; list-style: none;
  padding: 1rem 2.2rem 1rem 0; position: relative;
  font-weight: 600; font-size: .98rem;
}
.queries summary::-webkit-details-marker { display: none; }
.queries summary::after {
  content: ''; position: absolute; right: .55rem; top: 1.42rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--royal); border-bottom: 2px solid var(--royal);
  transform: rotate(45deg); transition: transform .18s ease;
}
.queries details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.queries summary:hover { color: var(--royal); }
.queries details > div { padding: 0 0 1.1rem; color: var(--text-2); }
.queries details > div p:last-child { margin-bottom: 0; }
.navy .queries, .pitch .queries { border-top-color: var(--ink-line); }
.navy .queries details, .pitch .queries details { border-bottom-color: var(--ink-line); }
.navy .queries summary::after, .pitch .queries summary::after { border-color: var(--royal-lift); }
.navy .queries summary:hover, .pitch .queries summary:hover { color: var(--royal-lift); }
.navy .queries details > div, .pitch .queries details > div { color: var(--text-inv-2); }

/* ── Related block ────────────────────────────────────────────────────────── */
.related-block { background: var(--paper-2); padding: clamp(2.6rem, 6vw, 4rem) 0; }

/* ── Steps ────────────────────────────────────────────────────────────────── */
ol.steps { list-style: none; padding: 0; counter-reset: step; margin: 0 0 1.8rem; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 1.4rem 3.1rem; margin: 0;
  border-left: 1px solid var(--line); margin-left: 1.05rem;
}
ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps > li::before {
  content: counter(step); position: absolute; left: -1.05rem; top: 0;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--royal); background-image: var(--grad); color: var(--white);
  font: 900 .88rem/1 var(--sans); font-variant-numeric: tabular-nums;
}
ol.steps > li strong { display: block; margin-bottom: .25rem; font-size: 1.02rem; }
.navy ol.steps > li, .pitch ol.steps > li { border-left-color: var(--ink-line); }

/* ── Footer ───────────────────────────────────────────────────────────────────
   #16161c, and home-10 splits the copyright line into its own strip beneath
   the columns rather than folding it in. That split is one of the clearest
   tells between this layout and home-9. */
footer { background: var(--slate); color: var(--text-inv-2); padding: clamp(2.8rem, 6vw, 4rem) 0 0; }
footer .cols { display: grid; gap: 2rem; padding-bottom: 2.6rem; }
@media (min-width: 640px) { footer .cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { footer .cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.6rem; } }
/* Styled small, but still <h2>: these are top-level sections of the document.
   The size is presentation; the level is structure. Do not demote them to h4/h5
   to match their appearance — `npm run audit-a11y` fails on the heading skip. */
footer h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-inv); margin-bottom: 1rem;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: .55rem; }
footer a { color: var(--text-inv-2); text-decoration: none; font-size: .92rem; }
footer a:hover { color: var(--royal-lift); text-decoration: underline; }
footer :focus-visible { outline-color: var(--royal-lift); }
.foot-blurb { font-size: .92rem; max-width: 42ch; margin: 1rem 0 0; }

/* home-10's separate `#copyright` band. Darker than the footer above it. */
.copyright { background: #000000; color: var(--text-inv-2); padding: 1.3rem 0; font-size: .8rem; }
.copyright a { color: var(--text-inv-2); font-size: inherit; text-decoration: underline; }
.copyright a:hover { color: var(--royal-lift); }
.copyright :focus-visible { outline-color: var(--royal-lift); }
.copyright p { margin: 0; }
.copyright p + p { margin-top: .5rem; }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.oops { padding: clamp(3.5rem, 9vw, 6rem) 0; text-align: center; }
.oops .code { font: 900 clamp(4rem, 16vw, 8rem)/1 var(--sans); letter-spacing: -.05em; margin: 0 0 .4rem; color: var(--royal); font-variant-numeric: tabular-nums; }
.oops .tags { justify-content: center; }

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .masthead, .ticker, .enlist, .toc, .rail, footer, .copyright, .skip, .inline-cta { display: none; }
  body { background: #fff; color: #000; }
  .wrap, .split { display: block; }
  a::after { content: ' (' attr(href) ')'; font-size: .8em; }
}