/* PadelRanks website, 8/10 2026. One dark theme on purpose (the app's own
   black + lime). Faces are self-hosted (OFL, licences next to the files).
   The page has no inline style or script: the server's CSP is style-src 'self'. */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/assets/fonts/big-shoulders-display-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: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/assets/fonts/big-shoulders-display-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  /* colour */
  --bg: #070707;
  --surface: #111111;
  --surface-2: #161616;
  --line: #222222;
  --line-2: #333333;
  --text: #ffffff;
  --text-2: #c2c2c2;
  --text-3: #8e8e8e;
  --lime: #c5f947;
  --lime-hover: #d6ff73;
  --lime-ink: #0b0d05;
  --lime-glow: rgba(197, 249, 71, 0.11);
  /* type */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: 1.1875rem;
  --step-2: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --step-3: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --step-4: clamp(2.5rem, 1.75rem + 3.2vw, 4.25rem);
  --step-5: clamp(2.75rem, 1.6rem + 5vw, 3.75rem);
  /* space */
  --gutter: 16px;
  --maxw: 1200px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --section: clamp(72px, 6vw + 40px, 128px);
  --radius: 18px;
  --radius-s: 12px;
  --header-h: 60px;
  --sticky-h: 109px;   /* split 9/10: below 768 px the header is two rows (brand + languages, then the menu) */
}
@media (min-width: 768px) { :root { --gutter: 28px; --sticky-h: var(--header-h); } }
@media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 68px; --step-5: clamp(3.5rem, 1rem + 4vw, 4.5rem); } }

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.002em;
  line-height: 1;
  text-wrap: balance;
}
h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: calc(var(--sticky-h) + 12px); }
::selection { background: var(--lime); color: var(--lime-ink); }

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

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--lime); color: var(--lime-ink); font-weight: 600;
  padding: 10px 16px; border-radius: 10px; text-decoration: none;
}
.skip:focus { top: 10px; }

.ico { flex: none; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 50px; padding: 12px 22px; border-radius: var(--radius-s);
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; text-align: center;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-lime { background: var(--lime); color: var(--lime-ink); }
.btn-lime:hover { background: var(--lime-hover); }
/* stacked full width on a small phone; from 420 px side by side when they fit (else the second
   wraps under the first), filling the line below 768 px, content width from 768 px (fixer 8/10:
   as a 2-column max-content grid the English labels overflowed at 420-470 px) */
.stores { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.stores > .btn { flex: 1 1 100%; }
@media (min-width: 420px) { .stores > .btn { flex: 1 1 auto; } }
@media (min-width: 768px) { .stores > .btn { flex: 0 1 auto; } }

/* ── header ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 7, 7, 0.88);
  border-bottom: 1px solid var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: rgba(7, 7, 7, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}
.bar { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 46px; height: auto; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.625rem; line-height: 1; letter-spacing: 0.005em; }
/* split 9/10 (owner: "Ja gør det" to "Spillere · Klubber · Spørgsmål · DA/EN/DE"): the menu to the
   three pages, the current one marked like the current language. From 768 px one row (brand, menu,
   languages); below that a second row of three equal cells, so the longest label (Spørgsmål,
   Questions) has a third of the width and wraps inside its cell rather than being cut. */
.menu ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.menu a {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 8px; border-radius: 10px;
  color: var(--text-2); text-decoration: none; text-align: center; font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
}
.menu a:hover { color: var(--text); background: var(--surface-2); }
.menu a[aria-current="page"] { background: var(--surface-2); color: var(--lime); }
@media (max-width: 767.98px) {
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand langs" "menu menu"; gap: 0 var(--s-3); min-height: 0; }
  .bar > .brand { grid-area: brand; min-height: 56px; margin-right: 0; justify-self: start; }
  .bar > .langs { grid-area: langs; }
  .bar > .menu { grid-area: menu; padding-bottom: var(--s-2); }
}
@media (min-width: 768px) {
  .menu ul { display: flex; }
  .menu a { padding: 8px 14px; }
}
.langs ul { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 12px; }
.langs a {
  display: block; min-width: 40px; padding: 6px 8px; border-radius: 9px; text-align: center;
  color: var(--text-3); text-decoration: none; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.4;
}
.langs a:hover { color: var(--text); }
.langs a[aria-current="page"] { background: var(--surface-2); color: var(--lime); }
.langs:not(.langs-foot) .name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* 320-359 px (small Androids, iPhone SE 1st gen): the wordmark ran under the DA button */
@media (max-width: 359.98px) {
  .bar { column-gap: var(--s-3); }
  .brand { gap: 8px; }
  .brand .mark { width: 38px; }
  .wordmark { font-size: 1.375rem; }
  .langs a { min-width: 34px; padding-inline: 5px; }
}

/* ── hero ── */
.hero { padding-block: clamp(28px, 3vw, 44px) var(--section); overflow-x: clip; }
.hero-grid { display: grid; gap: clamp(40px, 5vw, 56px); align-items: center; }
.hero-copy { display: grid; gap: var(--s-5); justify-items: start; }
.eyebrow {
  color: var(--lime); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3;
}
/* 1.02: at 0.95 the g of "Platzierung" sat on the M of "Matches" (review 8/10) */
.hero h1 { font-size: var(--step-5); max-width: 18ch; line-height: 1.02; }
@media (min-width: 1024px) {
  .hero h1 { max-width: 15ch; }
  /* a long headline (the English and German ones) makes five lines; a size smaller keeps the store buttons in view */
  .hero h1.long { font-size: clamp(3.25rem, 0.9rem + 3.6vw, 4.125rem); }
}
.lead { color: var(--text-2); font-size: var(--step-2); line-height: 1.55; max-width: 44ch; }
.hero-stores { margin-top: var(--s-2); width: 100%; }
.note { color: var(--text-3); font-size: var(--step--1); margin-top: calc(-1 * var(--s-2)); }

/* the stage: the club screen with two phones in front of it */
.stage { position: relative; aspect-ratio: 100 / 112; width: 100%; max-width: 640px; margin-inline: auto; isolation: isolate; }
.stage::before {
  content: ""; position: absolute; z-index: -1; left: 6%; right: -6%; top: -12%; bottom: 18%;
  background: radial-gradient(closest-side, var(--lime-glow), rgba(197, 249, 71, 0));
}
/* each picture is a link to its full size (8/10 later): the link is what sits on the stage */
.stage > a { position: absolute; display: block; border-radius: 10px; }
.stage img { width: 100%; }
.st-tv { left: 0; top: 0; width: 100%; }
.st-tv img { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55)); }
.st-ph img { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.7)); }
.st-ph { border-radius: 14%/7%; }
.st-ph1 { left: 2%; bottom: 0; width: 36%; z-index: 3; }
.st-ph2 { left: 33%; bottom: 3.5%; width: 31%; z-index: 2; }
/* Below 1024 px the hero is one column. The stage moves up between the lead and the
   store buttons, so the app is on the first screen of a phone (review 8/10: at 375x812
   it started at y≈870, below the fold). hero-copy lets its children join the grid. */
@media (max-width: 1023.98px) {
  .hero-grid { gap: var(--s-5); }
  .hero-copy { display: contents; }
  .hero-grid > .stage, .hero-copy > * { min-width: 0; }
  .eyebrow { order: 1; }
  .hero h1 { order: 2; }
  .lead { order: 3; }
  .hero-grid > .stage { order: 4; margin-block: var(--s-2) var(--s-3); }
  .hero-stores { order: 5; margin-top: 0; }
  .note { order: 6; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .stage { aspect-ratio: 100 / 90; max-width: none; }
  .st-tv { left: 9%; width: 91%; }
  .st-ph1 { left: 0; width: 29%; }
  .st-ph2 { left: 24.5%; width: 25%; bottom: 4%; }
}

/* ── sections ── */
.section { padding-block: var(--section); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--s-4); margin-bottom: clamp(36px, 4vw, 56px); max-width: 760px; }
.section-head h2 { font-size: var(--step-4); }
/* split 9/10: the players and questions pages open with their section; its heading is the h1 */
.section.ptop { border-top: 0; padding-top: clamp(32px, 4vw, 64px); }
.section-head h1 { font-size: var(--step-5); line-height: 1.02; }
.intro { color: var(--text-2); font-size: var(--step-2); line-height: 1.55; max-width: 60ch; }
.shots-note { color: var(--text-3); font-size: var(--step--1); }
h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.frow-text p, .feat p, .also-list p, .steps p, .qa-list dd { color: var(--text-2); max-width: 65ch; }

/* a picture that opens its full-size file in a new tab (no JavaScript) */
.zoom { display: block; cursor: zoom-in; text-decoration: none; color: inherit; }
.zoom:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* players (8/10 later, owner: "de er lidt svære at læse"): one row per feature with a large
   phone, the text beside it, rows alternating sides from 768 px; on a phone the picture
   stacks under its text at 74 % of the screen. A chip states the main thing the picture shows. */
.players { overflow-x: clip; }   /* the glow behind a phone may reach past the gutter; never a sideways scroll */
.frows { display: grid; gap: clamp(64px, 8vw, 112px); }
.frow { display: grid; gap: var(--s-6); align-items: center; }
.frow-text { display: grid; gap: var(--s-3); justify-items: start; }
.frow-text h2 { font-family: var(--font-body); font-size: var(--step-3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.frow-shot { position: relative; isolation: isolate; justify-self: center; width: min(74vw, 300px); }
.frow-shot::before {
  content: ""; position: absolute; z-index: -1; inset: 6% 0 12%;
  background: radial-gradient(closest-side, rgba(197, 249, 71, 0.09), rgba(197, 249, 71, 0));
}
.phone-link { border-radius: 14%/7%; }
.frow .phone { width: 100%; filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.6)); }
.chip {
  display: grid; gap: 6px; margin-top: var(--s-2); padding: 14px 18px 15px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--lime); border-radius: 14px;
}
.chip-big {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1.02; letter-spacing: 0.005em; color: var(--text); text-wrap: balance;
}
.chip-em { color: var(--lime); }
.chip-small { color: var(--text-2); font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
@media (min-width: 768px) {
  .frow { grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(40px, 6vw, 96px); }
  .frow.flip { grid-template-columns: 280px minmax(0, 1fr); }
  .frow.flip .frow-shot { order: -1; }
  .frow-shot { width: 280px; }
}
@media (min-width: 1024px) {
  .frows { max-width: 1060px; }
  .frow { grid-template-columns: minmax(0, 1fr) 300px; }
  .frow.flip { grid-template-columns: 300px minmax(0, 1fr); }
  .frow-shot { width: 300px; }
}
@media (min-width: 1200px) {
  .frow { grid-template-columns: minmax(0, 1fr) 340px; }
  .frow.flip { grid-template-columns: 340px minmax(0, 1fr); }
  .frow-shot { width: 340px; }
}
/* 15/10: a feature without a phone picture (Training): the row's text in a panel with the lime
   edge the chips have, one column at every width */
.frow.frow-solo {
  grid-template-columns: minmax(0, 1fr); padding: var(--s-6) var(--s-5);
  background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--lime); border-radius: var(--radius);
}
@media (min-width: 768px) { .frow.frow-solo { padding: var(--s-6) var(--s-7); } }

.also { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: var(--s-5); }
.also-title { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--text-3); }
.also-list { display: grid; gap: var(--s-5); }
.also-list li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line-2); }
.also-list h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
@media (min-width: 768px) { .also-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-6); } }

/* centres (8/10 later): five rows, the text first and a readable crop of the club screen or
   the web portal under it, framed as a panel with a caption; a tap opens the whole screen.
   The crop is cut wider from 1024 px and tighter below (picture/source), so the text in it
   stays about 9-11 css px on a 375 px phone. */
.crow { display: grid; gap: var(--s-5); }
.crow + .crow { margin-top: clamp(64px, 8vw, 112px); }
.crow-copy { display: grid; gap: var(--s-6); max-width: 760px; }
.feat { display: grid; gap: var(--s-2); }
.feat h3 { font-size: var(--step-3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 1024px) {
  .crow-copy { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
  .crow-copy .feat:only-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-7); align-items: baseline; }
}
.crop {
  position: relative; isolation: isolate; margin: 0; width: 100%; justify-self: center;
  background: #000; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden;
}
.crop img { width: 100%; }
.crop-link:focus-visible { outline-offset: -4px; border-radius: 14px; }
.crop figcaption {
  padding: 10px 14px 11px; border-top: 1px solid var(--line); background: var(--surface);
  color: var(--text-3); font-size: 0.8125rem; line-height: 1.4;
}
@media (min-width: 768px) {
  .crop-create { max-width: 486px; }
  .crop-americano, .crop-knockout { max-width: 642px; }
  .crop-screen { max-width: 402px; }
  .crop-ladder { max-width: 562px; }
}
@media (min-width: 1024px) {
  .crop { max-width: 1100px; }
  .crop-americano { max-width: none; }
  .crop-ladder { max-width: 840px; }
  .crop-knockout { max-width: 960px; }
  .crop-create, .crop-screen { max-width: 1082px; }   /* 974 px of the 1x capture at 1.11x, + border */
}

/* "Bruges af" (owner 8/10: three clubs that said yes by phone): a calm row of light tiles,
   so every logo keeps its own colours; the name and country in small text under it */
.logos { display: grid; gap: var(--s-4); margin-bottom: clamp(48px, 6vw, 80px); }
.logos-title { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--text-3); }
.logo-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); max-width: 760px; }
.logo-list li { display: grid; gap: 2px; justify-items: center; align-content: start; text-align: center; }
.logo-tile {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 96px; margin-bottom: var(--s-2);
  padding: 10px; border-radius: 14px; background: #ecece7;
}
.logo-tile img { width: auto; height: auto; max-width: min(100%, 172px); max-height: 76px; }
.logo-text { color: #111; font-weight: 700; font-size: 0.9375rem; line-height: 1.2; text-wrap: balance; }
.logo-name { color: var(--text-2); font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.logo-country { color: var(--text-3); font-size: 0.8125rem; line-height: 1.3; }
@media (max-width: 479.98px) {
  .logo-tile { height: 80px; padding: 8px; }
  .logo-tile img { max-height: 62px; }
  .logo-text { font-size: 0.8125rem; }
  .logo-name { font-size: 0.8125rem; }
}
@media (min-width: 768px) { .logo-list { gap: var(--s-5); } .logo-tile { height: 112px; padding: 14px 18px; } }

/* "Alt det, klubben får" (8/10): one panel, the titles alone with a lime tick (owner: "kun
   til overteksten … så siden er lidt mere enkel"); one column on phones, two from 768 px,
   three from 1024 px. Split 9/10: on the clubs page, under the section's own heading; each
   title links to the item further down that explains it. */
.club-all {
  display: grid; gap: var(--s-4);
  /* every entry ends in --s-3 of its own, so the bottom padding is that much less */
  padding: var(--s-5) var(--s-5) calc(var(--s-5) - var(--s-3)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.club-list { display: grid; }
.club-list li { position: relative; display: grid; align-content: start; padding: var(--s-3) 0 var(--s-3) 30px; border-top: 1px solid var(--line-2); }
.club-list li::before {
  content: ""; position: absolute; left: 2px; top: calc(var(--s-3) + 5px); width: 13px; height: 7px;
  border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg);
}
/* pretty, not balance: balance left "Padelmates-" alone on a line in German */
.club-list h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
/* split fix 9/10 (review): the titles are links, so they look like links at rest too (a quiet lime
   underline; a phone has no hover to reveal it) */
.club-list a { text-decoration: underline; text-decoration-color: rgba(197, 249, 71, 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.club-list a:hover { color: var(--lime); text-decoration-color: var(--lime); }
@media (min-width: 768px) {
  .club-all { padding: var(--s-6) var(--s-6) calc(var(--s-6) - var(--s-3)); }
  .club-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
}
@media (min-width: 1024px) {
  .club-all { padding: var(--s-7) var(--s-7) calc(var(--s-7) - var(--s-3)); }
  .club-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); }
}

/* get started: two real sequences, so they are numbered */
.start-grid { display: grid; gap: var(--s-7); }
.track { display: grid; gap: var(--s-5); align-content: start; }
.track > h3 { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.steps { counter-reset: step; display: grid; gap: 0; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); row-gap: 4px;
  padding-block: var(--s-4); border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step); grid-row: 1 / span 2;
  font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 0.9; color: var(--lime);
}
.steps h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.track-note { color: var(--text-3); font-size: var(--step--1); max-width: 60ch; }
@media (min-width: 1024px) { .start-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); } }

/* free */
.free { background: var(--surface); border-block: 1px solid var(--line); padding-block: clamp(56px, 6vw, 88px); }
.free-inner { display: grid; gap: var(--s-6); align-items: center; }
.free h2 { font-size: var(--step-4); }
.free p { color: var(--text-2); font-size: var(--step-2); margin-top: var(--s-4); max-width: 46ch; }
@media (min-width: 900px) { .free-inner { grid-template-columns: minmax(0, 1fr) auto; } }

/* FAQ */
.qa-list { display: grid; gap: 0 var(--s-7); }
.qa { display: grid; gap: var(--s-2); align-content: start; padding-block: var(--s-5); border-top: 1px solid var(--line); }
.qa dt { font-size: var(--step-1); font-weight: 600; line-height: 1.35; }
@media (min-width: 768px) { .qa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-7) var(--s-6); }
.foot { display: grid; gap: var(--s-6); }
.foot-brand { display: grid; gap: var(--s-3); justify-items: start; }
.madeby { color: var(--text-3); font-weight: 600; font-size: 0.9375rem; line-height: 1; white-space: nowrap; }
.madeby-small { font-size: 0.5625rem; letter-spacing: 0.16em; margin-right: 2px; }
.foot-links { display: grid; gap: var(--s-3); color: var(--text-2); font-size: 0.9375rem; }
.foot-links a:hover, .rights a:hover { color: var(--lime); }
.foot-lang { display: grid; gap: var(--s-2); justify-items: start; }
.foot-lang-label { color: var(--text-3); font-size: var(--step--1); }
.langs-foot .code { display: none; }
.langs-foot a { letter-spacing: 0; font-weight: 500; font-size: 0.875rem; padding: 6px 12px; }
.rights { color: var(--text-3); font-size: var(--step--1); }
/* 768-1023: two columns (mark + language over each other, links beside them); with three
   columns the footer mark had 140 px for its 165 px (fixer 8/10) */
@media (min-width: 768px) {
  .foot { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-7); align-items: start; }
  .rights { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .foot { grid-template-columns: minmax(max-content, 1fr) auto auto; }
}

/* 404 */
.nf { min-height: 100vh; display: grid; align-content: center; gap: var(--s-6); padding-block: var(--s-8); }
.nf h1 { font-size: var(--step-5); color: var(--lime); }
.nf-list { display: grid; gap: var(--s-5); }
.nf-item { display: grid; gap: var(--s-2); }
.nf-item h2 { font-size: var(--step-3); }
.nf-item a { color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── v2 (8/10 2026; owner: "Lav det hele, nej mit telefonnummer må ikke stå der") ── */

/* PadelRanks in 10 seconds: four points beside the silent 17.6 s loop (two columns from
   1024 px; the loop under the points below that). The video's own background is the page's
   #070707, so it needs no frame. Under prefers-reduced-motion the poster replaces it. */
.tensec-grid { display: grid; gap: var(--s-7); align-items: center; }
.tensec-copy { display: grid; gap: var(--s-6); }
.tensec-copy h2 { font-size: var(--step-4); }
.tensec-list { display: grid; gap: var(--s-3); }
.tensec-list li {
  display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: var(--radius-s);
}
.tensec-list h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.tensec-list p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; }
.loop { margin: 0; width: 100%; max-width: 560px; justify-self: center; }
.loop video, .loop img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.loop .loop-still { display: none; }
@media (prefers-reduced-motion: reduce) { .loop video { display: none; } .loop .loop-still { display: block; } }
@media (min-width: 768px) { .tensec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1024px) {
  .tensec-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 5vw, 80px); }
  .loop { max-width: none; }
}
/* fixer 8/10: beside the loop the text column is only ~370-540 px wide below 1280, so the four
   points stack there (two columns of ~178 px wrapped German titles onto 6-7 lines) */
@media (min-width: 1024px) and (max-width: 1279.98px) { .tensec-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }
/* fixer 8/10 (WCAG 2.2.2): the pause button under the loop; /assets/loop-toggle.<hash>.js shows it
   and swaps icon and label. Not over the video, which fills its corners. */
.loop .loop-toggle {
  display: flex; align-items: center; gap: 8px; width: max-content; margin: var(--s-3) 0 0 auto;
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; cursor: pointer;
}
.loop .loop-toggle:hover { color: var(--text); border-color: var(--lime); }
.loop .loop-toggle .ico { width: 16px; height: 16px; color: var(--lime); }
.loop .loop-toggle .ico-play, .loop .loop-toggle[data-paused] .ico-pause { display: none; }
.loop .loop-toggle[data-paused] .ico-play { display: block; }
.loop .loop-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .loop .loop-toggle { display: none; } }

/* "Alt om PadelRanks for centre og klubber": a lime link with an arrow */
.more-link { color: var(--lime); font-weight: 600; text-decoration: none; line-height: 1.35; }
.more-link:hover { text-decoration: underline; }
/* inline, so a wrapped label keeps the arrow right after its last word */
.more-link .ico { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -0.2em; }

/* the club-night timeline (heading the owner said yes to): one column on a phone, two from
   768 px, three from 1024 px (six columns of 40-60 words would be too narrow) */
.night-list { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.night-list li {
  display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.night-time { color: var(--lime); font: 800 var(--step-3)/1 var(--font-display); letter-spacing: 0.01em; }
.night-list h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.night-list p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; }
@media (min-width: 768px) { .night-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1024px) { .night-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the centre call to action: mail (mailto only) or the request in the app */
.cta-centres {
  display: grid; gap: var(--s-6); padding: var(--s-6) var(--s-5);
  background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--lime); border-radius: var(--radius);
}
.cta-main, .cta-alt { display: grid; gap: var(--s-3); justify-items: start; align-content: start; }
.cta-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.02; letter-spacing: 0.002em; text-wrap: balance; }
.cta-main p, .cta-alt p { color: var(--text-2); max-width: 56ch; }
.cta-alt h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.cta-note { color: var(--text-3); font-size: var(--step--1); }
/* the address is one long word: it may break inside the button on a small phone */
.cta-mail { max-width: 100%; margin-top: var(--s-2); overflow-wrap: anywhere; }
@media (max-width: 419.98px) { .cta-centres { padding: var(--s-5) var(--s-4); } .cta-mail { width: 100%; } }
@media (min-width: 1024px) {
  .cta-centres { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-7); padding: var(--s-7); }
  .cta-alt { padding-left: var(--s-7); border-left: 1px solid var(--line-2); }
}

/* ── the centre pages (/for-klubber/, /en/for-clubs/, /de/fuer-clubs/) ── */
.hero.chero { padding-block: clamp(40px, 5vw, 80px) var(--section); }
.chero-copy, .chero-main, .chero-side { display: grid; gap: var(--s-5); justify-items: start; align-content: end; }
.hero.chero h1 { max-width: 20ch; }
.chero .lead { max-width: 60ch; }
/* from 1024 px: the headline left, the lead, buttons and note right, on one baseline */
@media (min-width: 1024px) {
  .chero-copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 5vw, 80px); align-items: end; }
  .hero.chero h1 { max-width: none; }
  .chero .lead { font-size: var(--step-1); }
}
.chero .note { margin-top: 0; }
/* the home hero re-orders its children below 1024 px (.eyebrow 1, h1 2, .lead 3 ...); the
   centre hero keeps the source order */
.hero.chero .chero-copy * { order: 0; }
.chero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.chero-ctas > .btn { flex: 1 1 100%; }
@media (min-width: 420px) { .chero-ctas > .btn { flex: 0 1 auto; } }
.btn-ghost { border: 1px solid var(--line-2); background: var(--surface); color: var(--text); }
.btn-ghost:hover { border-color: var(--lime); }
.btn-ghost .ico { color: var(--lime); }
.steps h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.cstart { display: grid; gap: var(--s-6); max-width: 760px; }

/* table of contents: wrapping pills (long German labels wrap inside their pill). Clubs fold 9/10: not on the
   pages while FEATURE_TOC in tools/build_site.py is False (the closed groups' summaries are the contents) */
.toc { margin-bottom: clamp(24px, 3vw, 40px); }
.toc ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.toc li { max-width: 100%; }
.toc a {
  display: block; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
  overflow-wrap: anywhere; transition: border-color 150ms ease, color 150ms ease;
}
.toc a:hover { border-color: var(--lime); color: var(--text); }

/* feature groups (clubs fold 9/10: the page was 31-33 phone screens): each group is a native
   <details>, closed by default; the summary is the group heading (the old look: --step-3, 600), its
   intro, a lime count ("11 funktioner") and a round chevron that turns when open. The whole summary
   is the tap target (at least 44 px), with the lime focus ring. The items inside are unchanged (two
   columns from 768 px); from 1024 px the heading keeps its old 4fr column and the items open under
   the 9fr column beside it, where they were. */
.fold > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: var(--s-4); row-gap: var(--s-2); align-items: center;
  min-height: 44px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline-offset: 4px; border-radius: 12px; }
.fold > summary > :first-child { grid-column: 1; }
.fold-text { grid-column: 1; display: grid; gap: var(--s-1); }
.fold-intro { color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; max-width: 46ch; }
.fold-count { color: var(--lime); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; }
.fold-chev {
  grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--lime);
  transition: transform 200ms ease, border-color 150ms ease;
}
.fold > summary:hover .fold-chev { border-color: var(--lime); }
.fold[open] > summary .fold-chev { transform: rotate(180deg); }
.fgroups { border-bottom: 1px solid var(--line); }
.fgroup { border-top: 1px solid var(--line); }
.fgroup > summary { padding-block: var(--s-4); }
.fgroup > summary h3 { font-size: var(--step-3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.fgroup > .flist { padding-bottom: var(--s-6); }
/* the timeline folded the same way: the summary is the section's own heading and example */
.fold-night > summary h2 { font-size: var(--step-4); }
.fold-night > summary .fold-text { gap: var(--s-4); margin-top: var(--s-2); }
.fold-night > .night-list { margin-top: clamp(28px, 3vw, 44px); }
.flist { display: grid; }
.flist li { display: grid; gap: var(--s-1); align-content: start; padding-block: var(--s-4); border-top: 1px solid var(--line-2); }
.flist h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.flist p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; max-width: 62ch; }
.flist .tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.tag {
  display: inline-block; max-width: 100%; padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text-2); font-size: 0.8125rem; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .flist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .fgroup > summary { padding-block: var(--s-5); }
  .fold-intro { font-size: 1rem; line-height: 1.6; }
}
@media (min-width: 1024px) {
  .fgroup > summary { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr) 44px; column-gap: var(--s-7); }
  .fgroup > summary .fold-text { grid-column: 2; grid-row: 1; }
  .fgroup > summary .fold-chev { grid-column: 3; grid-row: 1; }
  /* the items under the 9fr column: (width - chevron - two gaps) x 4/13 + one gap */
  .fgroup > .flist { margin-left: calc((100% - 44px - 2 * var(--s-7)) * 4 / 13 + var(--s-7)); }
}

/* "Find dig selv" (player search), 8/10 2026. To be appended to site.css by
   whoever owns site.css; uses only the site's own tokens. Names wrap, never
   cut: no nowrap, no ellipsis, no line clamp anywhere in here. */
.fp[hidden], .fp [hidden] { display: none; }
.fp-box { max-width: 760px; display: grid; gap: var(--s-4); }
.fp-form { display: grid; gap: var(--s-3); }
.fp-field { display: grid; gap: var(--s-2); }
.fp-label { color: var(--text-2); font-size: var(--step--1); font-weight: 600; }
.fp-input, .fp-select {
  width: 100%; min-height: 54px; padding: 12px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  font: 500 var(--step-1)/1.3 var(--font-body);
}
.fp-input::placeholder { color: var(--text-3); }
.fp-input:focus, .fp-select:focus { outline: 2px solid var(--lime); outline-offset: 2px; border-color: var(--lime); }
.fp-status { min-height: 1.5em; color: var(--text-2); font-size: var(--step-0); }
/* One rank column for all rows (subgrid), so the names line up; without subgrid each row sizes its own. */
.fp-results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); row-gap: var(--s-2); }
.fp-row {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); row-gap: 2px; align-items: baseline;
  padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
}
@supports (grid-template-columns: subgrid) { .fp-row { grid-template-columns: subgrid; } }
.fp-rank { grid-row: 1 / span 2; align-self: center; min-width: 4.5ch; color: var(--lime); font: 700 var(--step-2)/1 var(--font-display); }
.fp-name { font-weight: 600; font-size: var(--step-1); line-height: 1.3; overflow-wrap: anywhere; }
.fp-meta { grid-column: 2; color: var(--text-2); font-size: var(--step--1); line-height: 1.45; overflow-wrap: anywhere; }
.fp-note { color: var(--text-3); font-size: var(--step--1); line-height: 1.5; }
.fp-cta { display: grid; gap: var(--s-3); }
@media (min-width: 560px) {
  .fp-form.has-country { grid-template-columns: 1fr minmax(180px, 34%); align-items: end; }
  .fp-cta { grid-template-columns: repeat(2, max-content); }
}

/* ── split 9/10 (owner: "kan vi på hjemmesiden afkorte den eller lave kategorier?", "Ja gør det") ── */

/* the front page: the logo row, then three big cards to the other pages. The whole card is the link
   (the link's ::after covers it), the title an h2 with a lime arrow; one column on a phone, three
   from 768 px. Each card carries the old one-page site's in-page ids (#spillere, #centre, #faq ...).
   Split fix 9/10 (review): no lime left bar, so the cards do not look like the four non-clickable
   "10 sekunder" points just above them (those keep theirs); the arrow and the lime hover mark them. */
.doorway .logos { margin-bottom: clamp(32px, 4vw, 56px); }
.pcards { display: grid; gap: var(--s-3); }
.pcard {
  position: relative; display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-5); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); transition: border-color 150ms ease, background-color 150ms ease;
}
.pcard:hover { border-color: var(--lime); background: var(--surface-2); }
.pcard h2 { font-size: clamp(2.125rem, 1.75rem + 1.6vw, 3rem); line-height: 1; }
.pcard h2 a { text-decoration: none; color: inherit; }
.pcard h2 a::after { content: ""; position: absolute; inset: -1px; border-radius: var(--radius); }
.pcard h2 a:focus-visible { outline: none; }
.pcard h2 a:focus-visible::after { outline: 2px solid var(--lime); outline-offset: 3px; }
.pcard h2 .ico { display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.22em; vertical-align: -0.02em; color: var(--lime); }
.pcard p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.45; max-width: 40ch; }
/* split fix 9/10 (review): an old link to a card's heading id (/#find-dig-selv, /#klubaften, /#kom-i-gang)
   lands with the CARD's top edge where every other target lands (the header + 12 px), not the heading's:
   + the card's 1 px border and its top padding */
.pcard h2[id] { scroll-margin-top: calc(var(--sticky-h) + 12px + 1px + var(--s-5)); }
@media (min-width: 768px) {
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .pcard { padding: var(--s-6) var(--s-5); }
  .pcard h2[id] { scroll-margin-top: calc(var(--sticky-h) + 12px + 1px + var(--s-6)); }
}
@media (min-width: 1024px) { .pcard { padding: var(--s-6); } }

/* the clubs page: "Sådan ser det ud" holds the five crops, each under one title only, so the rows sit
   closer together than on the old front page, where each had its text */
.shots .crow { gap: var(--s-4); }
.shots .crow + .crow { margin-top: clamp(48px, 6vw, 80px); }

/* the questions page: the link to the centres' own questions on the clubs page */
.faq-more { margin-top: var(--s-6); font-size: var(--step-1); }

/* the club-screen guide (17/10 2026, TV-GUIDE·S): /for-klubber/storskaerm/, /en/for-clubs/club-screen/,
   /de/fuer-clubs/club-bildschirm/ (build_site.py screen_page), and its one link on the clubs page (the club-screen
   group) and on the questions page (the big-screen step). Only new classes; nothing above changes. */
.guide-link { font-size: 1rem; }
.steps li > .guide-link { grid-column: 2; margin-top: var(--s-2); }
.fgroup > .guide-link { margin-top: calc(-1 * var(--s-4)); padding-bottom: var(--s-6); }
@media (min-width: 1024px) {
  .fgroup > .guide-link { margin-left: calc((100% - 44px - 2 * var(--s-7)) * 4 / 13 + var(--s-7)); }
}
.gwrap { display: grid; gap: var(--s-5); justify-items: start; }
.gwrap > * { max-width: 760px; }
.gwrap > .gtable, .gwrap > .gdevs, .gwrap > .glist { width: 100%; max-width: 900px; }
.gwrap > .section-head { margin-bottom: 0; }
.guide .eyebrow { order: 0; }   /* the hero's one-column order (below 1024 px) is for the front page's hero only */
.gback a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--text-2); font-weight: 600; text-decoration: none;
}
.gback a:hover { color: var(--lime); }
.gback .ico { width: 18px; height: 18px; }
.gnote {
  padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--lime);
  border-radius: var(--radius-s); color: var(--text-2); font-size: 0.9375rem; line-height: 1.55;
}
.gnote a, .gtip a, .glist a, .gdev-body a, .gtable a { color: var(--lime); }
.section.gsec { padding-block: clamp(40px, 4vw, 64px); }
.gh2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.gsec strong, .gnote strong { color: var(--text); font-weight: 600; }
.gtip { color: var(--text-2); max-width: 65ch; }
.gsteps { width: 100%; }
.gsteps li { grid-template-columns: 32px minmax(0, 1fr); padding-block: var(--s-3); }
.gsteps li::before { grid-row: 1; font-size: 1.625rem; line-height: 1.05; }
.gsteps p { color: var(--text-2); max-width: 65ch; }
.gstores { display: grid; gap: var(--s-3); }
.gstores p { color: var(--text-2); }
.gtable { border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.gtable th, .gtable td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-top: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.gtable thead th {
  padding-top: 0; border-top: 0; color: var(--text-3);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase;
}
.gtable tbody th { color: var(--text); font-weight: 600; }
.gtable td { color: var(--text-2); }
@media (max-width: 639px) {
  /* one block per device below 640 px; the "Use" cell says so itself (data-label) */
  .gtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .gtable, .gtable tbody, .gtable tr, .gtable th, .gtable td { display: block; }
  .gtable tr { padding-block: var(--s-3); border-top: 1px solid var(--line-2); }
  .gtable th, .gtable td { padding: 0; border: 0; }
  .gtable td { margin-top: 2px; }
  .gtable td[data-label]::before { content: attr(data-label) ": "; color: var(--text-3); }
}
.gdevs { border-bottom: 1px solid var(--line); }
.gdev { border-top: 1px solid var(--line); }
.gdev > summary { padding-block: var(--s-4); }
.gdev > summary h3 { font-size: var(--step-3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.gdev-body { display: grid; gap: var(--s-4); max-width: 760px; padding-bottom: var(--s-6); }
.gdev-body > p { color: var(--text-2); max-width: 65ch; }
.glist { display: grid; }
.glist li { padding-block: var(--s-3); border-top: 1px solid var(--line-2); color: var(--text-2); max-width: 75ch; }

/* ── 18/10 2026: the hidden page for US clubs (/us/, noindex): the 72 s film at the top, tap to play.
   The player is capped by the screen height so the whole of it (controls included) fits on a laptop. ── */
.hero.us-hero { padding-block: clamp(20px, 2.5vw, 36px) var(--section); }
.us-top { display: grid; gap: var(--s-5); justify-items: start; }
.us-head { display: grid; gap: var(--s-4); width: 100%; }
.us-headmain, .us-headside { display: grid; gap: var(--s-3); align-content: end; }
@media (min-width: 1024px) {
  .us-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 5vw, 80px); align-items: end; }
}
.hero.us-hero h1 { font-size: var(--step-4); max-width: 20ch; }
.us-head .lead { max-width: 60ch; }
.us-free { color: var(--lime); font-weight: 600; font-size: var(--step-0); }
.us-film { margin: 0; display: grid; gap: var(--s-3); width: min(100%, 1100px, max(560px, calc((100svh - 330px) * 16 / 9))); }
.us-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--line-2); border-radius: var(--radius); }
.us-film figcaption { color: var(--text-3); font-size: var(--step--1); }
.us-stores { width: min(100%, 560px); }
.us-what { width: 100%; max-width: 72ch; border-top: 1px solid var(--line-2); padding-top: var(--s-4); }
.us-what summary { cursor: pointer; color: var(--lime); font-weight: 600; }
.us-what ul { list-style: disc; padding-left: 1.25em; margin-top: var(--s-3); display: grid; gap: 6px; color: var(--text-2); }
.us-contact { margin-top: var(--s-5); color: var(--text-2); }
.us-contact a { color: var(--lime); }