/**
 * THE BUNDLED FONTS (owner decision 2026-09-20).
 *
 * Four families, shipped inside the product and served from this NUC — and from the published
 * copy of the site, because modules/site_export.js copies everything under public/website.
 * NOTHING IS FETCHED FROM A FONT CDN, ever, and that is the point:
 *
 *   - the NUC serves the centre’s own site on its own LAN, and it has to look right on the
 *     day the internet is down;
 *   - a Belgian business’s website that pulls a font from Google hands every visitor’s IP
 *     address to Google, which is a question nobody needs to be asked;
 *   - and a bundled file cannot change under the centre’s feet.
 *
 * Each family is ONE VARIABLE FILE per subset covering every weight the site uses, latin and
 * latin-ext only (these are Belgian centres: French and Dutch accents matter, Cyrillic does
 * not). 312 KB for all four, and a browser downloads only the subsets it actually needs.
 *
 * font-display: swap — text is readable in the fallback immediately and reflows when the font
 * lands, rather than a centre’s page sitting blank behind a font it may never get.
 *
 * All four are SIL Open Font Licence; see fonts/OFL.txt, which ships beside them as required.
 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/inter-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; } /* — Inter */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/inter-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 800; font-display: swap; src: url(fonts/archivo-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; } /* — Archivo */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/archivo-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: 'Oswald'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/oswald-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; } /* — Oswald */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/oswald-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: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/space-grotesk-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; } /* — Space Grotesk */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/space-grotesk-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; }

/* Speed In Motion PRO — website module (the MAIN customer site).
   Evolved from the approved sitev2 design (your-centre.be rebuild). The brand colour is a
   variable set at runtime from Admin → Website; --orange stays as an alias so nothing breaks. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0a0a0c; --panel: #131316; --panel2: #1a1a1f;
  --border: rgba(255, 255, 255, 0.09);
  --text: #f2f0ec; --muted: #9a958c;
  --brand: #ff6b1a; --orange: var(--brand);
  /* EVERY TINT IS MIXED FROM --brand, never written out (owner-reported 2026-09-20: "when i
     change the color everything stays the standaard orange"). site.js stamps --brand from
     Admin → Website; anything spelled #ff6b1a stays behind for ever, which is what these
     had done. The literal on each line is the fallback a browser without color-mix keeps. */
  --brand-soft: rgba(255, 107, 26, 0.14);
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-edge: rgba(255, 107, 26, 0.55);
  --brand-edge: color-mix(in srgb, var(--brand) 55%, transparent);
  --brand-glow: rgba(255, 107, 26, 0.75);
  --brand-glow: color-mix(in srgb, var(--brand) 75%, transparent);
  --green: #38b24a; --red: #e5352b;
  /* TWO NAMES PAGES ASKED FOR AND NOBODY DEFINED (2026-10-07: a white website still showed dark boxes). event,
     account, group and the slot separator read --panel-2 and --border-strong; undefined, they fell back to
     their hard-coded dark values on every theme. Both follow the theme now. */
  --panel-2: var(--panel2);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-strong: color-mix(in srgb, var(--text) 20%, transparent);

  /* THE TYPE (owner spec 2026-09-20: "also the fonts H1 H2 etc all the headers and texts").
     Admin → Website picks a family for the headings and one for the running text; site.js
     stamps these two. Both are SYSTEM stacks — see modules/site_fonts.js for why nothing is
     fetched from a font CDN. Left alone, a site looks exactly as it always has. */
  --font-body: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
  --font-head: var(--font-body);

  /* …and how big, as a multiplier of the size each thing was designed at. Every heading below
     keeps its clamp() and is multiplied by one of these, so a centre can make its headlines
     bigger without breaking a phone — which a fixed px size here would have done. */
  --h1: 1; --h2: 1; --h3: 1; --body: 1;
}

/* Light theme (owner spec 2026-09-02): Admin → Website picks dark or light; site.js stamps
   .site-light on <html>. Photo sections (hero, band) keep their dark veils, so THEIR text
   tokens stay light — everything else flips through the variables above. */
html.site-light {
  --bg: #f4f3f0; --panel: #ffffff; --panel2: #eae8e3;
  --border: rgba(22, 20, 16, 0.13);
  --text: #1b1a18; --muted: #6c665c;
  --brand-soft: rgba(255, 107, 26, 0.12);
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
}
html.site-light .nav { background: var(--nav-bg, rgba(247, 246, 243, 0.92)); }
html.site-light .hero, html.site-light .band, html.site-light .ehero {
  --text: #f2f0ec; --muted: #bfbab1; --border: rgba(255, 255, 255, 0.14); color: var(--text);
}
/* the translucent tier tints stay, but their bright text needs darker ink on white */
html.site-light .tierchip.platinum { color: #0b7e82; }
html.site-light .tierchip.gold { color: #8a6210; }
html.site-light .tierchip.silver { color: #5a6270; }
html.site-light .tierchip.bronze { color: #8a4f1d; }
/* A SECTION ON ITS OWN COLOUR (the white theme, owner 2026-10-07): a dark section on a white site gets the dark site's
   ink, a light section on a dark site the white site's (site.js marks the side; a text colour chosen in the builder
   wins and never gets these). The cards inside stand on their own background and keep the theme's colours. */
html { --theme-text: var(--text); --theme-muted: var(--muted); --theme-border: var(--border); }
html.site-light .sec-on-dark { --text: #f2f0ec; --muted: #bfbab1; --border: rgba(255, 255, 255, 0.14); color: var(--text); }
html:not(.site-light) .sec-on-light { --text: #1b1a18; --muted: #6c665c; --border: rgba(22, 20, 16, 0.13); color: var(--text); }
html.site-light .sec-on-dark :is(.feat, .pak, .evrow, .panel, .stat, .promo, .card, .fl-tab, .fl-sheet-card, .lrow, .stmt,
  .ccorner, .tbp-card, .tbp-f, .tbp-sum, .ev-card, .paycard, .slot, input, select, textarea),
html:not(.site-light) .sec-on-light :is(.feat, .pak, .evrow, .panel, .stat, .promo, .card, .fl-tab, .fl-sheet-card, .lrow, .stmt,
  .ccorner, .tbp-card, .tbp-f, .tbp-sum, .ev-card, .paycard, .slot, input, select, textarea) {
  --text: var(--theme-text); --muted: var(--theme-muted); --border: var(--theme-border); color: var(--text);
}
html.site-light .tierchip.team { color: #1c7c37; }
html.site-light .testpay { color: #8a6210; }

html { scroll-behavior: smooth; }
/* ONE SCROLLBAR FOR THE WHOLE SITE (owner 2026-10-02: "can we also make the scroll bar for the complete website more
   integrated? like you did with the car cards scrol bar"). The page's own bar sits on the page colour with a thin thumb
   in the text colour; every other scroll area gets the cars-and-tracks cards' look. :where() keeps both at no weight at
   all, so a scroll area with its own rule (the cards, the statement list, the telemetry strips) keeps its own. The
   ::-webkit- lines are for Safari, which does not read scrollbar-color; Chrome and Firefox read the two above them. */
:where(html) { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) var(--bg); }
:where(html *) { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 16%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 18%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-edge); }
html::-webkit-scrollbar-track { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: calc(16px * var(--body)); min-height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* nav */
.nav {
  display: flex; align-items: center; gap: 26px; padding: 14px 28px;
  /* the bar floats over the page, so it is the page colour with some air in it. site.js sets
     --nav-bg from the chosen background; the literal is what a centre that chose none keeps. */
  background: rgba(10, 10, 12, 0.92);
  background: var(--nav-bg, rgba(10, 10, 12, 0.92)); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30;
}
.nav .logo img { height: 40px; display: block; }
.nav nav { display: flex; gap: 20px; flex: 1; flex-wrap: wrap; }
.nav nav a { color: var(--muted); font-size: 14.5px; font-weight: 600; }
.nav nav a:hover, .nav nav a.active { color: var(--text); }
.nav .lang { display: flex; gap: 8px; font-size: 12.5px; color: var(--muted); }
.nav .lang a { color: var(--muted); text-transform: uppercase; }
.nav .lang a.on { color: var(--text); font-weight: 800; }
.me-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; }
/* The burger (owner 2026-09-02): hidden on desktop, folds the menu on phones. */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 36px; padding: 8px; background: none; border: 1px solid var(--border);
  border-radius: 8px; }
.nav-burger span { display: block; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease; }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Per-section responsive visibility (owner 2026-09-02) — set per section in the site editor. */
@media (max-width: 760px) { .sec-hide-mobile { display: none !important; } }
@media (min-width: 761px) { .sec-hide-desktop { display: none !important; } }

/* Phones: logo left, burger right; the links fold OUT below the bar (owner 2026-09-02 — the
   old always-open second row ate a third of a phone screen). */
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; }
  .nav-burger { display: flex; order: 3; }
  .nav nav { display: none; order: 5; width: 100%; flex: none; flex-direction: column; gap: 2px; font-size: 16px; }
  .nav.open nav { display: flex; }
  .nav nav a { padding: 10px 4px; border-bottom: 1px solid var(--border); }
  .nav .lang { order: 4; }
  .nav .cta { order: 2; margin-left: auto; padding: 10px 18px; font-size: 14px; }
  .nav .logo img { height: 34px; }
}
.cta {
  display: inline-block; background: var(--brand); color: #1a0d02; border: 0; border-radius: 10px;
  padding: 12px 24px; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; text-align: center;
}
.cta.big { padding: 16px 34px; font-size: 17px; }
.cta.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); font-weight: 600; }
.cta:disabled { opacity: 0.5; cursor: default; }

/* hero */
.hero { position: relative; min-height: 74vh; display: flex; align-items: center; overflow: hidden; }
.hero .bgimg, .band .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,12,0.93) 30%, rgba(10,10,12,0.55) 65%, rgba(10,10,12,0.35)); }
.hero .inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 60px 24px; width: 100%; }
.kicker { color: var(--brand); font-weight: 800; letter-spacing: 0.28em; font-size: 12px; text-transform: uppercase; }
.hero h1 { font-family: var(--font-head); font-size: calc(clamp(34px, 5.6vw, 62px) * var(--h1)); line-height: 1.06; margin: 14px 0 18px; font-weight: 800; }
.hero h1 em, .section h2 em { font-style: italic; color: var(--brand); }
.hero p { color: var(--muted); font-size: clamp(15px, 2vw, 19px); max-width: 520px; margin-bottom: 28px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* sections */
.section { max-width: 1140px; margin: 0 auto; padding: 64px 24px; width: 100%; }
.section h2 { font-family: var(--font-head); font-size: calc(clamp(26px, 3.6vw, 40px) * var(--h2)); font-weight: 800; margin: 8px 0 10px; }
.section .lead { color: var(--muted); max-width: 620px; margin-bottom: 30px; }

/* feature trio */
.trio { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.feat { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.feat .n { color: var(--brand); font-weight: 900; font-style: italic; font-size: 26px; }
.feat b { display: block; font-size: 18px; margin: 8px 0 8px; }
.feat p { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* packages (formulas, live from the NUC) */
.paks { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .paks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .paks { grid-template-columns: repeat(3, 1fr); } }
.pak { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
/* a membership card that sells (2026-09-29): the whole card is the way in, and says so at its foot */
a.pak-link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, transform .15s; }
a.pak-link:hover { border-color: var(--brand-edge); transform: translateY(-2px); }
.pak .pak-go { margin-top: auto; padding-top: 6px; color: var(--brand); font-weight: 800; font-size: 14px; }
.pak.featured, .pak.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-soft), 0 18px 44px rgba(0,0,0,0.25); }
.pak .top { display: flex; align-items: baseline; gap: 10px; }
.pak .top b { font-size: 20px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em;
  /* a name breaks between its WORDS, never letter by letter (owner-reported 2026-09-25, a phone:
     "JU / ST / DR / IV / E"). The body's overflow-wrap: anywhere let a narrow card squeeze the
     name down to one letter beside the minutes pill; break-word still rescues a word too long
     for the card, but never counts towards how narrow the name may get. */
  flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.pak .dur { flex: none; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.pak .price { font-size: 34px; font-weight: 900; }
.pak .price small { font-size: 13px; color: var(--muted); font-weight: 600; }
.pak .desc { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.pak ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.pak ul li::before { content: '— '; color: var(--brand); font-weight: 800; }
.pak .cta { margin-top: auto; }
.pak .tag { position: absolute; top: -11px; left: 22px; background: var(--brand); color: #1a0d02; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; border-radius: 99px; padding: 3px 12px; }

/* events + generic list rows */
.evlist { display: flex; flex-direction: column; gap: 10px; }
.evrow { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 15px 18px; }
.evrow .date { text-align: center; min-width: 58px; }
.evrow .date b { display: block; font-size: 20px; font-weight: 900; }
.evrow .date small { color: var(--brand); font-weight: 700; text-transform: uppercase; font-size: 11px; }
.evrow .grow { flex: 1; min-width: 0; }
/* THE DIRECT CHILD ONLY. Unscoped, this also caught a <b> inside the row's own <small> and turned
   an emphasis into a block — which broke "drove 60 min, only 45 came off" into three lines the
   first time a history row used one (2026-09-22, docs/CSS_RULES.md rule 13). */
.evrow .grow > b { display: block; font-size: 15.5px; }
.evrow .grow small b { color: var(--text); font-weight: 700; }

.evrow .grow small { color: var(--muted); }
.evrow .open { font-size: 11.5px; font-weight: 800; color: var(--green); border: 1px solid rgba(56,178,74,0.5); border-radius: 99px; padding: 4px 12px; white-space: nowrap; }
.evrow .tagx { font-size: 11.5px; font-weight: 800; border: 1px solid var(--border); border-radius: 99px; padding: 4px 12px; color: var(--muted); white-space: nowrap; }
/* The event's own picture on its row (owner spec 2026-09-17). 50px tall on purpose: exactly as
   tall as the date block beside it, so a row with a picture and a row without stay the same
   height and the list does not step up and down. Cropped, never stretched. */
.evrow .evimg { width: 80px; height: 50px; flex: 0 0 80px; border-radius: 10px; background: var(--panel2) no-repeat center / cover; }
@media (max-width: 720px) { .evrow .evimg { width: 60px; height: 38px; flex-basis: 60px; } }

/* photo band */
.band { position: relative; min-height: 320px; overflow: hidden; border-radius: 20px; display: flex; align-items: flex-end; }
.band .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,10,12,0.9)); }
.band .inner { position: relative; z-index: 2; padding: 26px; }

/* forms / booking flow */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 26px; }
.split { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .split { grid-template-columns: 1.4fr 1fr; } }
label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; font-family: inherit; }
.bk-step { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; margin: 22px 0 12px; }
.bk-step:first-of-type { margin-top: 0; }
.bk-step .n { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #1a0d02; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: 14px; font-variant-numeric: tabular-nums; }
.slot.sel { background: var(--brand); border-color: var(--brand); color: #1a0d02; font-weight: 800; }
.slot.busy { opacity: 0.3; text-decoration: line-through; pointer-events: none; }
/* a drivers count under the formula's minimum (owner spec 2026-10-08): greyed out, not crossed out — it is not full */
.slot.under { opacity: 0.3; cursor: not-allowed; }
/* nothing left on the day shown — a line and the way to the next day that has room (2026-09-24) */
.bk-none { flex-basis: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.err { color: var(--red); font-size: 13.5px; margin-top: 10px; }
.okmsg { color: var(--green); font-size: 13.5px; margin-top: 10px; }

/* price breakdown */
.sumrow { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.sumrow.total { border-bottom: 0; font-size: 17px; font-weight: 800; padding-top: 12px; }
.sumrow .neg { color: var(--green); }

/* account page */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; }
.stat b { display: block; font-size: 24px; font-weight: 900; font-style: italic; }
.stat small { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; }
.stat.tier b { color: var(--brand); }
/* an on/off switch — the membership's "renew automatically" (2026-09-24) */
.sk-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.sk-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.sk-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--panel2); border: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.sk-switch span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.sk-switch input:checked + span { background: var(--brand); border-color: var(--brand); }
.sk-switch input:checked + span::before { transform: translateX(20px); background: #fff; }
.sk-switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ar-box { display: flex; gap: 12px; align-items: flex-start; background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.ar-box .ar-main { flex: 1 1 14rem; min-width: 0; }
.ar-box .ar-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ar-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; border-radius: 6px; padding: 2px 8px; margin-right: 6px; }
.ar-tag.on { background: rgba(63,196,90,.16); color: var(--green); }
.ar-tag.off { background: var(--panel2); color: var(--muted); border: 1px solid var(--border); }
.subbar { height: 10px; border-radius: 99px; background: var(--panel2); overflow: hidden; margin: 8px 0; }
.subbar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }

/* ── THE STATEMENT ON THE CARD (owner spec 2026-09-28: "make it look overviewable and clear … make the
   history scrollable so it doesnt take up a whole page") ─────────────────────────────────────────────
   This period's minutes — or since the last credit package — newest first, a day heading over each
   day, in a box that scrolls. In the site's own style (2026-09-29): the orange spaced labels of .kicker,
   drawn plus/minus icons centred in their circle, and a thin scrollbar in the card's colours. */
.stmt { margin: 14px 0 6px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--panel); }
.stmt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border); }
.stmt-head b { color: var(--brand); font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.stmt-head span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.stmt-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 16%, transparent) transparent; }
.stmt-list::-webkit-scrollbar { width: 6px; }
.stmt-list::-webkit-scrollbar-track { background: transparent; }
.stmt-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 16%, transparent); border-radius: 99px; }
.stmt-list::-webkit-scrollbar-thumb:hover { background: var(--brand-edge); }
.stmt-day { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 10px 16px 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.st-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 16px 10px; }
.st-row + .st-row { border-top: 1px solid var(--border); }
.st-ico { flex: 0 0 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--border); color: var(--muted); }
.st-ico svg { display: block; width: 12px; height: 12px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.st-in .st-ico { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent); }
.st-out .st-ico { color: var(--brand); border-color: var(--brand-edge); background: var(--brand-soft); }
.st-main { flex: 1 1 auto; min-width: 0; }
.st-main > b { display: block; font-size: 14.5px; }
.st-main small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.st-main small b { color: var(--text); font-weight: 700; }
.st-amt { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-amt b { display: block; font-size: 15px; font-weight: 800; }
.st-in .st-amt b { color: var(--green); }
.st-amt small { color: var(--muted); font-size: 12px; }
/* what was driven, what came off, what the promotion made free — at a glance */
.st-split { display: flex; height: 6px; max-width: 240px; border-radius: 99px; overflow: hidden; margin: 6px 0 3px; background: var(--panel2); }
.st-split i { background: var(--brand); }
.st-split em { background: repeating-linear-gradient(135deg, var(--green) 0 4px, color-mix(in srgb, var(--green) 40%, transparent) 4px 8px); }
.st-main small.st-free { color: var(--green); font-weight: 700; }
.bk-chip { font-size: 11px; font-weight: 800; border-radius: 99px; padding: 3px 10px; border: 1px solid rgba(56,178,74,0.5); color: var(--green); }

/* tier badges (M17) — same palette as the showroom/TV boards */
.tierchip { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.tierchip.platinum { background: rgba(108,229,232,.14); color: #6ce5e8; border: 1px solid rgba(108,229,232,.55); }
.tierchip.gold { background: rgba(234,164,45,.15); color: #eaa42d; border: 1px solid rgba(234,164,45,.6); }
.tierchip.silver { background: rgba(192,199,209,.12); color: #c0c7d1; border: 1px solid rgba(192,199,209,.5); }
.tierchip.bronze { background: rgba(205,127,50,.13); color: #cd7f32; border: 1px solid rgba(205,127,50,.55); }
/* race-day teams rank between drivers with a TEAM tag instead of a tier */
.tierchip.team { background: rgba(63,196,90,.14); color: #3fc45a; border: 1px solid rgba(63,196,90,.55); }

/* leaderboard */
table.lb { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.lb th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.lb td { padding: 10px; border-bottom: 1px solid var(--border); }
table.lb td.num, table.lb th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lb tr:first-child td { color: var(--brand); font-weight: 800; }
/* the car under the driver's name — only on a phone, where the car column goes */
table.lb .lb-carsub { display: none; color: var(--muted); font-size: 12px; font-weight: 500; margin-top: 2px; }

/* ── Cars & tracks (owner spec 2026-08-07) — the kiosk showroom's library in the site theme.
   Everything is fl- prefixed: site.css already owns .hero/.card/.view-style names and a
   collision there silently reshapes the page. */
.fl-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.fl-tab { background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 700; }
.fl-tab.on { background: var(--brand); border-color: var(--brand); color: #1a0d02; }
.fl-tab small { font-weight: 600; opacity: 0.7; margin-left: 6px; }
.fl-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.fl-bar input { margin: 0; width: 240px; }
.fl-count { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.fl-chip { background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; }
.fl-chip.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.fl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 760px) { .fl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .fl-grid { grid-template-columns: repeat(4, 1fr); } }
/* the cards are <button>s (keyboard + screen readers), so their inner spans have to be told to
   be blocks — an inline box ignores aspect-ratio, and the artwork then pushes the name and the
   lap time out of the card */
.fl-card { display: flex; flex-direction: column; align-items: stretch; width: 100%;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; text-align: left; padding: 0; color: var(--text);
  transition: transform 0.15s, border-color 0.15s; }
.fl-card:hover { transform: translateY(-3px); border-color: var(--brand); }
.fl-art { display: block; flex: none; aspect-ratio: 1.5; background: var(--panel2); position: relative; overflow: hidden; }
.fl-art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* track outline drawn as a mask so it takes --brand from the theme, cleaned first by
   /shared/outline-clean.js (mod tracks bake solid blocks into outline.png) */
.fl-ol { position: absolute; top: 8%; left: 6%; width: 60%; height: 64%; background: var(--brand);
  -webkit-mask: left top / contain no-repeat; mask: left top / contain no-repeat;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.9)); }
.fl-body { display: block; padding: 12px 14px 14px; }
.fl-body b { display: block; font-size: 14.5px; line-height: 1.25; }
.fl-body small { color: var(--muted); font-size: 12px; }
.fl-badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; color: var(--muted); margin-top: 7px; }
.fl-badge.cls { border-color: var(--brand); color: var(--brand); }
.fl-rec { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.fl-rec b { display: inline; color: var(--text); font-variant-numeric: tabular-nums; }
.fl-empty { color: var(--muted); padding: 30px 0; }

.fl-sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex;
  align-items: center; justify-content: center; padding: 24px; z-index: 60; }
.fl-sheet-card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  max-width: 820px; width: 100%; max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain;
  /* a thin scrollbar in the card's own colours, kept clear of its rounded corners (owner 2026-10-02: "change the
     scrollbarrs of the cars and tracks popups … so they blend in more") — the same look as the statement list */
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 16%, transparent) transparent; }
.fl-sheet-card::-webkit-scrollbar { width: 6px; }
.fl-sheet-card::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }
.fl-sheet-card::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 16%, transparent); border-radius: 99px; }
.fl-sheet-card::-webkit-scrollbar-thumb:hover { background: var(--brand-edge); }
.fl-sheet-art { aspect-ratio: 2.6; background: var(--panel2) center / cover no-repeat; position: relative; }
.fl-sheet-in { padding: 22px 26px 26px; }
.fl-sheet-in h3 { font-size: calc(28px * var(--h3)); font-weight: 800; margin: 6px 0 2px; }
.fl-close { position: absolute; top: 12px; right: 14px; background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border); color: var(--text); border-radius: 50%; width: 34px; height: 34px; font-size: 15px;
  /* the ✕ sits in the middle of its circle — see the rule at the end of shared/theme.css */
  display: grid; place-items: center; padding: 0; line-height: 1; }
/* the circuit's other layouts, at the bottom of the main layout's card */
.fl-layouts { margin: 4px 0 18px; }
.fl-layouts h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); margin-bottom: 9px; font-weight: 800; }
.lrow { display: flex; align-items: center; gap: 14px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 15px; margin-bottom: 8px; }
.lrow .ol2 { width: 46px; height: 34px; background: var(--brand); flex: none; opacity: 0.9;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.lrow .grow { flex: 1; min-width: 0; }
.lrow .grow b { display: block; font-size: 14px; }
.lrow .grow small { color: var(--muted); font-size: 12px; }
.lrow .rec { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; white-space: nowrap; }
.lrow .rec small { display: block; font-weight: 600; color: var(--muted); font-size: 11px; text-align: right; }
.lrow .none { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.fl-liveries { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 16%, transparent) transparent; }
.fl-liveries::-webkit-scrollbar { height: 6px; }
.fl-liveries::-webkit-scrollbar-track { background: transparent; }
.fl-liveries::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 16%, transparent); border-radius: 99px; }
.fl-liveries::-webkit-scrollbar-thumb:hover { background: var(--brand-edge); }
.fl-liveries img { height: 54px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); flex: none; }

/* voucher preview (design photo + positioned serial code) */
.vprev { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.vprev img { display: block; width: 100%; }
.vprev .vcode { position: absolute; transform: translate(-50%, -50%); font-family: Consolas, monospace; font-weight: 700; letter-spacing: 0.18em; text-shadow: 0 2px 8px rgba(0,0,0,0.7); white-space: nowrap; }

/* footer */
.foot { border-top: 1px solid var(--border); margin-top: auto; }
.foot .inner { max-width: 1140px; margin: 0 auto; padding: 36px 24px; display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .foot .inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 10px; }
.foot a, .foot p { display: block; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.foot .cr { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
.foot .cr .pw a { color: var(--muted); text-decoration: underline; }
.foot .cr .pw a:hover { color: var(--brand); }
/* footer identity (owner spec 2026-09-02): the centre's name + socials, filled by site.js */
.foot-name { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 10px; }
/**
 * The size and the colour are the centre's (owner 2026-09-22: "for the social media pictograms i
 * want a color selector and a size slider, also make the line that little bit fatter"). Both are
 * custom properties with the shipped look as their default, so a centre that has never opened the
 * control sees exactly what it saw before — and the ring is 2px now, which is the fatter line.
 */
.foot-social { display: flex; gap: 10px; margin-top: 12px; }
.foot-social a { display: inline-flex; width: var(--soc-size, 34px); height: var(--soc-size, 34px);
  margin: 0; align-items: center; justify-content: center; border: 2px solid currentColor;
  border-radius: 50%; color: var(--soc-color, var(--muted)); transition: color .12s; }
.foot-social a:hover { color: var(--soc-hover, var(--brand)); }
.foot-social svg { width: var(--soc-glyph, 16px); height: var(--soc-glyph, 16px); fill: currentColor; display: block; }
/* the records strip (owner 2026-09-02): best lap per track as small sideways cards —
   auto-scrolls when it overflows, pauses under the mouse */
.bl-strip { overflow: hidden; }
.bl-track { display: flex; gap: 10px; width: max-content; }
.bl-strip.rolling .bl-track { animation: bl-roll linear infinite; }
.bl-strip.rolling:hover .bl-track { animation-play-state: paused; }
@keyframes bl-roll { to { transform: translateX(-50%); } }
.bl-card { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 150px;
  padding: 12px 10px; background: var(--panel2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); text-align: center; }
.bl-card img, .bl-card .bl-noimg { height: 48px; max-width: 120px; object-fit: contain; display: block;
  font-size: 26px; line-height: 48px; }
.bl-card b { font-size: 12.5px; line-height: 1.25; }
.bl-card small { font-size: 11px; color: var(--muted); }
.bl-card .bl-time { font-family: Consolas, monospace; font-weight: 700; font-size: 14px; color: var(--brand); }

/* the floating WhatsApp button (Admin → Branding) — WhatsApp's own green in both themes */
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 54px; height: 54px;
  border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.wa-fab svg { width: 28px; height: 28px; fill: #fff; display: block; }
.wa-fab:hover { filter: brightness(1.07); }

/* the published copy: an edit is on its way to the centre and comes back with the next publish */
.edsaving { position: fixed; left: 50%; transform: translateX(-50%); bottom: 74px; z-index: 90;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
  padding: 9px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
body.editing [data-sk] { outline: 1.5px dashed var(--brand-edge); outline-offset: 3px; min-height: 1em; }
body.editing [data-sk]:hover, body.editing [data-sk]:focus { outline-style: solid; background: var(--brand-soft); }
body.editing [data-ski], body.editing [data-skbg] { outline: 2px dashed rgba(56,178,74,0.7); outline-offset: -2px; cursor: pointer; }

/* event pages (owner spec 2026-08-07) — one layout for challenge / race day / league */
.ehero { position: relative; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden;
  border-radius: 0 0 22px 22px; }
.ehero .bgimg { position: absolute; inset: 0; background: center / cover no-repeat; }
.ehero .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,0.35) 20%, rgba(10,10,12,0.95)); }
.ehero .inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 30px 24px; width: 100%; }
.ehero h1 { font-family: var(--font-head); font-size: calc(clamp(30px, 5vw, 52px) * var(--h1)); font-weight: 800; line-height: 1.05; margin: 8px 0 10px; }
.ehero h1 em { font-style: italic; color: var(--brand); }
.efacts { display: flex; flex-wrap: wrap; gap: 10px; }
.efact { background: rgba(0,0,0,0.5); border: 1px solid var(--border); border-radius: 99px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 600; backdrop-filter: blur(6px); }
.efact.open { border-color: rgba(56,178,74,0.55); color: var(--green); }
/* the entry panel's price (the .pak .price rule is scoped to package cards) */
.panel > .price { font-size: 34px; font-weight: 900; margin: 4px 0 6px; }
.panel > .price small { font-size: 13px; color: var(--muted); font-weight: 600; }

/* section editor rails (edit mode only — approved mockup 2026-08-07) */
body.editing [data-section] { position: relative; outline: 1.5px dashed var(--brand-soft); outline-offset: -1px; }
body.editing [data-section]:hover { outline-color: var(--brand-glow); }

/* TEST MODE ribbon (no Stripe keys yet) */
.testpay { display: inline-block; background: rgba(217,165,59,0.15); border: 1px dashed rgba(217,165,59,0.6);
  color: #d9a53b; font-size: 12px; border-radius: 8px; padding: 6px 10px; margin-top: 10px; }

/* Multi-centre: centre tag before a name on an All-centres board, + the slot-row divider */
.ctag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; background: rgba(225,58,63,0.14); color: var(--red, #e13a3f); border: 1px solid rgba(225,58,63,0.45); }
.slot-sep { display: inline-block; width: 1px; height: 26px; background: var(--border-strong, #333); margin: 0 8px; vertical-align: middle; }


/* ── a phone is 375 px wide, and nothing may be wider ──────────────────────
   Reported live 2026-09-04: the Track picker on "My laps" was sized by its longest circuit
   name and ran off the screen — and because a document wider than the phone drags the fixed
   layer with it, the WhatsApp button hung off the right edge too. These are the guards, so a
   long name, a wide table or a big picture can never do it again. */
select, input, textarea, button { max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
/* A long unbroken word (an email, a URL, a mod's folder name) wraps instead of widening.

   BREAK-WORD, NOT ANYWHERE (owner-reported twice on 2026-09-25, from a phone: formula names and then
   "My bookings" read letter by letter — "JU / ST / DR", "202 / 6- / 09-"). `anywhere` also tells the
   browser a text box may be as narrow as ONE LETTER, so any text sitting in a row beside a button, a
   chip or a price was squeezed down to that. `break-word` still breaks a word that does not fit,
   but never lets a box be sized narrower than its longest word. The rows below then wrap on a phone,
   so the text keeps a readable width and whatever sits beside it moves underneath. */
body, .panel, td, th, p, h1, h2, h3 { overflow-wrap: break-word; }
/* an address or a link on its own line may still break anywhere: it is one word, and a phone is narrow */
a[href^="mailto:"], .ovrow .val small, .evrow .grow small, .lrow .grow small { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* A ROW NEVER SQUEEZES ITS TEXT: the text keeps at least 11rem (or the whole row), and the chips,
     prices and buttons beside it wrap onto the next line when there is no room left for them */
  .evrow, .lrow, .paycard, .cfact, .ar-box { flex-wrap: wrap; }
  /* the renewal's buttons: a row underneath the text, not a column squeezing it (2026-09-28) */
  .ar-box .ar-acts { flex: 1 1 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
  /* the statement on a phone: a little narrower, a little taller */
  .st-row { gap: 10px; padding: 9px 12px 10px; }
  .stmt-head { padding: 11px 12px 9px; }
  .stmt-day { padding: 10px 12px 4px; }
  .stmt-list { max-height: 340px; }
  .evrow > .grow, .lrow > .grow, .paycard > div, .cfact > div, .ar-box > div { flex: 1 1 11rem; min-width: 0; }
  .evrow { row-gap: 10px; }
}
/* every heading follows the heading family, including ones with a size of their own */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); }
@media (max-width: 620px) {
  /* A table that cannot fit scrolls inside itself rather than stretching the page. "My laps"
     already sits in its own scroller: there each lap stays ONE swipeable line instead of a car
     name breaking over four (owner's phone, 2026-09-04). */
  table.lb { display: block; overflow-x: auto; }
  /* A BOARD ON A PHONE (owner spec 2026-09-25: "make sure this doesnt happen anywhere on the site
     anymore on mobile"): the car moves under the driver's name, so neither is squeezed into a
     column a few letters wide — "victor SILVER" and "BMW M4 GT3" read on one line each */
  table.lb .lb-car { display: none; }
  table.lb .lb-carsub { display: block; }
  /* two fields side by side are one under the other on a phone */
  .two-col { grid-template-columns: 1fr !important; }
  #me-laps { white-space: nowrap; }
  #me-laps td, #me-laps th { padding-left: 8px; padding-right: 8px; }
  .section { padding-left: 16px; padding-right: 16px; }
}

/* The live-race tab while a race is actually running (owner spec 2026-09-16). */
.nav nav a.nav-livenow { color: #e5352b; font-weight: 800; animation: navblink 1.2s ease-in-out infinite; }
/* …blinking, while the race is on (owner spec 2026-09-23); a folded phone menu says so on its button */
@keyframes navblink { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
.nav-burger.nav-livenow { position: relative; }
.nav-burger.nav-livenow::after { content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px;
  border-radius: 50%; background: #e5352b; animation: navpulse 1.2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .nav nav a.nav-livenow, .nav nav a.nav-livenow .nav-dot, .nav-burger.nav-livenow::after { animation: none; }
}
.nav nav a.nav-livenow .nav-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #e5352b; margin-right: 7px; animation: navpulse 1.2s infinite; }
@keyframes navpulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* ── THE BOOKING FLOW: one step at a time (owner spec 2026-09-17: "the left card only shows 1
   step at a time and like nicely shifts to the next step with a nice animation so the overvieuw
   stays in sight when doing the steps. but in overview you can shange any step again with a
   change button"). The overview is the fixed point: it never moves, it always says what has been
   chosen, and every line on it is a way back. ───────────────────────────────────────────────── */
.bkwrap { position: relative; }
.bkstep { display: none; }
.bkstep.on { display: block; animation: bkin .3s cubic-bezier(.22, .61, .36, 1) both; }
.bkstep.on.back { animation-name: bkinback; }
@keyframes bkin { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes bkinback { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
/* somebody who asked their machine for less movement gets less movement */
@media (prefers-reduced-motion: reduce) { .bkstep.on, .bkstep.on.back { animation: none; } }
.bkhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bkdots { display: flex; gap: 6px; margin-left: auto; }
.bkdot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: background .2s; }
.bkdot.done { background: var(--green); }
.bkdot.on { background: var(--brand); transform: scale(1.25); }
.bknav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.bknav .grow { flex: 1; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-ghost:hover { border-color: var(--brand); }
/* the formulas on the booking page: one card across on a phone, two beside each other from 700px */
.bk-paks { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .bk-paks { grid-template-columns: 1fr 1fr; } }
/* the last step IS the overview (owner spec 2026-09-25: "make the check and book look like your
   booking card with the book now underneath and then delete the your booking card") — on a wide
   screen the side card steps aside there, and the step takes the page */
@media (min-width: 900px) { .split.bk-final { grid-template-columns: minmax(0, 760px); } }
.bk-final .bkover { display: none; }
/* the overview's own rows: what was chosen, and the way back to it */
.ovrow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ovrow:last-of-type { border-bottom: 0; }
.ovrow .lbl { width: 78px; flex: none; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.ovrow .val { flex: 1; font-size: 14px; font-weight: 700; }
.ovrow .val small { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.ovrow .val.todo { font-weight: 500; color: var(--muted); }
.ovchange { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; flex: none; }
.ovchange:hover { border-color: var(--brand); color: var(--text); }
/* how they pay: one card per way, and the ones they cannot use say why */
.paywith { display: grid; gap: 10px; }
.paycard { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--panel2); }
.paycard.sel { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.paycard.off { opacity: .5; cursor: not-allowed; }
.paycard b { font-size: 15px; }
.paycard small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* ON A PHONE: a step is the whole screen and the overview comes at the end (owner spec) */
@media (max-width: 899px) {
  .bkwrap { min-height: 62vh; display: flex; flex-direction: column; }
  .bkstep.on { flex: 1; display: flex; flex-direction: column; }
  .bkstep.on .bknav { margin-top: auto; padding-top: 18px; }
  .bkover { display: none; }
}

/* ── HOW A SECTION LOOKS (owner spec 2026-09-19, the site editor) ─────────────────────────────
   A background is a layer BEHIND the section's own content, so every dynamic section keeps its
   markup and its behaviour and simply gains a picture or a video behind it. The fade is a MASK
   rather than a gradient painted over the top: it works on any page colour, in light and dark
   alike, and it fades the picture itself instead of covering it. */
.secbg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; border-radius: inherit; }
.secbg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.secbg-img { background-size: cover; background-repeat: no-repeat; }
.secbg-veil { position: absolute; inset: 0; background: #000; }
.sec-hasbg { position: relative; }
.sec-hasbg > *:not(.secbg) { position: relative; z-index: 1; }
.sec-bgfade .secbg {
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
}
.sec-text-light, .sec-text-light h1, .sec-text-light h2, .sec-text-light h3, .sec-text-light p { color: #fff; }
.sec-text-dark, .sec-text-dark h1, .sec-text-dark h2, .sec-text-dark h3, .sec-text-dark p { color: #14141a; }
.secbtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.sec-align-center .secbtns { justify-content: center; }
.sec-align-right .secbtns { justify-content: flex-end; }
/* a section's own buttons look like the page's own (.cta big) — they had no look of their own and showed as bare text */
.secbtns .btn {
  display: inline-block; background: var(--brand); color: #1a0d02; border: 0; border-radius: 10px;
  padding: 16px 34px; font-size: 17px; font-weight: 800; letter-spacing: 0.01em; text-align: center; text-decoration: none;
}
.secbtns .btn.ghost { background: transparent; border: 1px solid currentColor; color: inherit; font-weight: 600; }
/* what the page brought, once the centre has set their own in its place */
.ed-replaced { display: none !important; }
@media (max-width: 760px) {
  /* a background framed for a wide screen is re-framed for a tall one */
  .secbg-media { object-position: center center !important; }
}

/* ── THE BUILDER (owner spec 2026-09-19: "a settingsbar on the left and right … like the real
   elementor website builder"). The page keeps its own layout and simply becomes narrower: the
   panels are fixed and body padding makes room for them, so nothing being edited ever sits
   underneath one. Everything here is prefixed ed- and exists only while editing. */
body.editing { padding: 52px 312px 0 288px; }
/* PREVIEW MODE (owner spec 2026-09-20): the panels go, the bar stays, the page is the real
   thing a customer would see — only narrower by the height of the bar. */
body.ed-preview { padding: 52px 0 0 0; }
body.ed-preview .ed-panel { display: none; }
/* The bar is a flex row, so everything on it has to say it will not stretch or be squeezed —
   without this the mode select grew to fill the row and pushed Desktop/Tablet/Phone into three
   wrapped columns (seen the first time it was drawn).
   EVERY select on the bar, not just the first: the language picker was added on 2026-09-21 without
   this rule and did exactly the same thing, covering Save, Exit and the change count (owner-
   reported the same day: "the language selector on top of the website builder blocks all other
   buttons on top"). A rule that only names one element is a trap for the next one. */
#ed-mode, #ed-lang { flex: 0 0 auto; width: auto; background: #17171d;
  border: 1px solid #2e2e36; border-radius: 9px; color: var(--brand); font: inherit;
  font-weight: 700; padding: 6px 10px; cursor: pointer; }
/* …and a picker a single-language site does not need really does disappear */
#ed-lang[hidden] { display: none; }
.ed-top > * { flex-shrink: 0; }
.ed-top .ed-sp { flex: 1 1 auto; min-width: 0; }
.ed-vp button, #ed-save, #ed-exit, #ed-count { white-space: nowrap; }
#ed-shell { position: fixed; inset: 0; z-index: 80; pointer-events: none;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
#ed-shell > * { pointer-events: auto; }
.ed-top { position: fixed; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center;
  gap: 14px; padding: 0 16px; background: #101014; border-bottom: 1px solid #26262c; color: #f2f1ef; }
.ed-brand { color: var(--brand); letter-spacing: .02em; }
.ed-sp { flex: 1; }
.ed-muted { color: #9a958c; font-size: 12.5px; }
.ed-vp { display: flex; gap: 6px; }
.ed-vp button { background: none; border: 1px solid #2e2e36; border-radius: 8px; color: #9a958c;
  padding: 5px 11px; font-size: 13px; cursor: pointer; }
.ed-vp button.on { color: #f2f1ef; border-color: var(--brand); }
.ed-top button { cursor: pointer; }
#ed-save, #ed-exit { background: #1b1b21; border: 1px solid #2e2e36; border-radius: 9px; color: #f2f1ef;
  padding: 7px 14px; font-weight: 600; }
#ed-save.ed-primary { background: var(--brand); border-color: transparent; }
#ed-save.dirty::after { content: " \2022"; }
.ed-panel { position: fixed; top: 52px; bottom: 0; width: 288px; background: #101014; color: #f2f1ef;
  border-right: 1px solid #26262c; display: flex; flex-direction: column; }
.ed-panel.ed-right { right: 0; left: auto; width: 312px; border-right: 0; border-left: 1px solid #26262c; }
.ed-panel.ed-left { left: 0; }
.ed-panel-h { padding: 12px 16px; font-weight: 800; border-bottom: 1px solid #26262c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-panel-sub { padding: 14px 16px 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #6d6a65; }
.ed-scroll { overflow: auto; flex: 1; padding-bottom: 24px; }
.ed-pad { padding: 10px 16px; margin: 0; }
.ed-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 10px; cursor: pointer;
  border-left: 3px solid transparent; }
.ed-item:hover { background: #17171c; }
.ed-item.on { background: #17171c; border-left-color: var(--brand); }
.ed-grab { color: #45424a; cursor: grab; }
.ed-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-tag { font-size: 10.5px; color: #6d6a65; border: 1px solid #2e2e36; border-radius: 999px; padding: 1px 7px; }
.ed-icons { display: flex; gap: 2px; }
.ed-icons button, .ed-btnrow button { background: none; border: 0; color: #9a958c; cursor: pointer;
  font-size: 13px; padding: 3px 5px; border-radius: 6px; }
.ed-icons button:hover, .ed-btnrow button:hover { background: #22222a; color: #f2f1ef; }
.ed-btnrow button:disabled { opacity: .3; cursor: default; background: none; }
/* a section's place in the bar is its place on the page: no arrows, the width they would take */
.ed-btnrow .ed-mfix { width: 50px; text-align: center; color: #55524c; font-size: 13px; cursor: help; }
.ed-icons button.off { color: #e0b355; }
.ed-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: calc(100% - 24px); margin: 8px 12px; padding: 9px 12px; background: #17171c;
  border: 1px solid #2e2e36; border-radius: 9px; color: #f2f1ef; cursor: pointer; text-align: left; }
.ed-row.ed-primary { background: var(--brand); border-color: transparent; justify-content: center; font-weight: 700; }
.ed-row.ed-danger, .ed-btnrow button.ed-danger { color: #ff7a70; }
.ed-add { justify-content: center; }
.ed-field { display: block; padding: 6px 16px 10px; }
.ed-field > span { display: block; font-size: 12.5px; color: #9a958c; margin-bottom: 5px; }
.ed-field input:not([type="range"]):not([type="checkbox"]), .ed-field select {
  width: 100%; box-sizing: border-box; background: #0b0b0e; color: #f2f1ef; border: 1px solid #2e2e36;
  border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.ed-field input[type="range"] { width: calc(100% - 52px); vertical-align: middle; accent-color: var(--brand); }
.ed-field output { display: inline-block; width: 46px; text-align: right; font-size: 12px; color: #9a958c; }
.ed-field em { display: block; margin-top: 4px; font-style: normal; }
.ed-check { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 13.5px; }
.ed-btnrow { display: flex; align-items: center; gap: 6px; padding: 4px 12px; }
.ed-btnrow input, .ed-btnrow select { flex: 1; min-width: 0; background: #0b0b0e; color: #f2f1ef;
  border: 1px solid #2e2e36; border-radius: 8px; padding: 6px 8px; font-size: 13px; }
/* PADDING, four sides and a link (owner 2026-09-22) — the control Elementor and Wix both use.
   Each box takes its share of the row rather than a width of its own, so the four sides stay
   even at any panel width; the link sits at the end where it does in both of those builders. */
.ed-pad { padding: 4px 12px 10px; }
.ed-pad-row { display: flex; align-items: flex-start; gap: 6px; }
.ed-pad-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ed-pad-cell input { width: 100%; box-sizing: border-box; text-align: center; background: #17171c;
  border: 1px solid #2e2e36; border-radius: 7px; color: #f2f1ef; padding: 6px 2px; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.ed-pad-cell input:focus { outline: none; border-color: var(--brand); }
.ed-pad-cell span { font-size: 11px; color: #9a958c; letter-spacing: .02em; }
.ed-pad-link { flex: 0 0 auto; margin-top: 1px; background: #17171c; border: 1px solid #2e2e36;
  border-radius: 7px; color: #6f6a62; padding: 6px 8px; font-size: 13px; line-height: 1.2; cursor: pointer; }
.ed-pad-link.on { border-color: var(--brand); color: var(--brand); }
.ed-pad .ed-muted { display: block; margin-top: 7px; font-size: 11.5px; font-style: normal; }

.ed-blocks { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 10px; }
.ed-blocks button { background: #17171c; border: 1px solid #2e2e36; border-radius: 999px; color: #9a958c;
  padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.ed-blocks button:hover { color: #f2f1ef; }
body.editing .ed-sec { outline: 1px dashed transparent; outline-offset: -2px; transition: outline-color .12s; }
body.editing .ed-sec:hover { outline-color: #3a3a44; }
body.editing .ed-sec.ed-on { outline: 2px solid var(--brand); outline-offset: -2px; }
/**
 * WHERE THE SECTION ACTUALLY ENDS (owner 2026-09-22: "when selecting a section i want the outer
 * edge of that section also shown in a different color striped line").
 *
 * The brand outline sits on the section's CONTENT box — inside its padding — so the moment the
 * padding controls next to it are used, there is no way to see what is being moved. The striped
 * band marks the OUTER edge, in a second colour on purpose: one line is the content, the other
 * is the whole section, and the space between them is the padding being set.
 *
 * Drawn as a ::before rather than a second outline, because an element has only one outline and
 * the inner one must stay. It is pointer-transparent, so it never eats a click meant for the
 * page, and it lives under body.editing, so the published page never carries a pixel of it.
 */
body.editing .ed-sec.ed-on { position: relative; }
body.editing .ed-sec.ed-on::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  padding: 2px;                        /* the band's own thickness */
  background: repeating-linear-gradient(135deg,
    var(--ed-edge, #f2b705) 0 7px, transparent 7px 14px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;   /* the band only, never the middle */
}

/* A PICTURE THE CENTRE CAN CHANGE (owner-reported 2026-09-21). Only in edit mode, and only a
   hint: the photographs are the page, and boxing them permanently would be worse than the
   problem. The camera says what the click does without any text on top of the picture. */
body.editing .ed-pic { cursor: pointer; position: relative; outline: 1px dashed transparent; transition: outline-color .12s; }
body.editing .ed-pic:hover { outline-color: var(--brand); }
body.editing .ed-pic::after { content: "📷"; position: absolute; right: 10px; top: 10px; z-index: 3;
  font-size: 15px; line-height: 1; padding: 6px 7px; border-radius: 8px; background: rgba(0,0,0,.62);
  opacity: 0; transition: opacity .12s; pointer-events: none; }
body.editing .ed-pic:hover::after { opacity: 1; }
/* THE PREVIEW IS THE REAL SITE AT A REAL WIDTH — an iframe, because media queries answer to the
   frame's own width and nothing else can tell the truth about a phone (owner-reported
   2026-09-19: the old preview showed a layout no phone ever sees). It sits between the panels,
   so both keep working while it is open. */
.ed-stage { position: fixed; top: 52px; left: 288px; right: 312px; bottom: 0; z-index: 75;
  background: #08080a; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px; }
.ed-frame { height: min(92%, 900px); max-width: 100%; border: 1px solid #2e2e36; border-radius: 16px;
  overflow: hidden; background: #0a0a0c; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.ed-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1100px) {
  body.editing { padding: 52px 0 0 0; }
  .ed-panel { top: auto; bottom: 0; width: 50%; height: 44vh; border-top: 1px solid #26262c; }
  .ed-panel.ed-left { left: 0; }
  .ed-panel.ed-right { right: 0; }
  .ed-stage { left: 0; right: 0; bottom: 44vh; }
}

/* ── THE COACH (owner spec 2026-09-19/20) ─────────────────────────────────────
   On the driver's own profile. The three states live in public/website/coach.js; when a centre
   has the coach switched off the section is never rendered at all, so there is nothing here for
   that case — not even something to hide. */
.coach-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.coach-chip { background: var(--brand-soft); color: var(--brand); font-weight: 800; border-radius: 99px; padding: 5px 14px; font-size: 13px; }
.chead { font-size: 17px; margin: 22px 0 10px; }

/* the two laps, and the gap between them */
.cvs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 16px 0 8px; }
.cvs .clap { background: var(--panel2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.cvs .clap small { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; }
.cvs .clap b { display: block; font-size: 26px; font-weight: 900; font-style: italic; }
.cvs .clap.you b { color: var(--brand); }
.cvs .clap .csub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.cvs .cgap { text-align: center; font-weight: 900; font-size: 20px; color: var(--red); }
.cvs .cgap small { display: block; color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 700px) { .cvs { grid-template-columns: 1fr; } }

.csects { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 2px; }
.csect { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; font-size: 13.5px; }
.csect b { font-variant-numeric: tabular-nums; }
.csect.up b { color: #ff8d86; }
.csect.down b { color: var(--green); }

/* which session, which lap */
.cpick { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 2px; }
.cpick label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.cpick select { background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit; max-width: 320px; }

/* where the time goes: bars beside the circuit */
.cwrap { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
@media (min-width: 860px) { .cwrap { grid-template-columns: 1.15fr 1fr; } }
.cwt { display: grid; grid-template-columns: 138px 1fr 62px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.cwt:last-child { border-bottom: 0; }
.cwt .cnum { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #1a0d02; font-size: 12px; font-weight: 900; align-items: center; justify-content: center; margin-right: 8px; vertical-align: -4px; font-style: normal; }
.cwtbar { height: 12px; border-radius: 99px; background: var(--panel2); overflow: hidden; display: block; }
.cwtbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--red)); }
.cwt.win .cwtbar i { background: var(--green); }
.cwtl { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.cwt.win .cwtl { color: var(--green); }

/* the circuit — every point comes from the reference lap's own recorded line */
.cmap { background: var(--panel2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.cmap svg { width: 100%; height: auto; display: block; }
.cm-track { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; }
.cm-seg { fill: none; stroke: var(--brand); stroke-width: 5.5; stroke-linecap: round; filter: drop-shadow(0 0 7px var(--brand-glow)); }
.cm-num { fill: var(--brand); }
.cm-n { fill: #1a0d02; font-size: 10.5px; font-weight: 900; font-family: inherit; }
.cm-dot { fill: rgba(255, 255, 255, 0.4); }
.cm-dot.win { fill: var(--green); }
.cm-here { fill: var(--red); stroke: #fff; stroke-width: 1.3; }
.cm-sf { fill: #fff; }
.cm-win { color: var(--green); }
.cmap-cap { text-align: center; color: var(--muted); font-size: 12px; margin-top: 6px; }

/* a corner */
.ccorner { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 18px 22px; margin-top: 12px; }
.ccorner > summary { display: flex; align-items: baseline; gap: 12px; font-size: 17px; cursor: pointer; list-style: none; }
.ccorner > summary::-webkit-details-marker { display: none; }
.ccorner > summary::before { content: "\25B8"; color: var(--brand); display: inline-block; transition: transform 0.15s; }
.ccorner[open] > summary::before { transform: rotate(90deg); }
.ccorner .closs { margin-left: auto; background: rgba(229, 53, 43, 0.14); color: #ff8d86; border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 800; }
.ccorner.win .closs { background: rgba(56, 178, 74, 0.14); color: var(--green); }
.ccorner.win h4 { font-size: 16px; margin-bottom: 10px; }
.cbody { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
@media (min-width: 860px) { .cbody { grid-template-columns: 1fr 260px; align-items: start; } }
.cfacts { display: grid; gap: 8px; }
.cfact { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.cfact .ci { font-size: 17px; }

/* the speed trace through one corner */
.ctrace { margin-top: 14px; background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.ctrace svg { width: 100%; height: auto; display: block; }
.ctrace .ax { stroke: rgba(255, 255, 255, 0.14); }
.ctrace .axl { fill: var(--muted); font-size: 11px; font-family: inherit; }
.ctrace .tr { fill: none; stroke-width: 2.5; }
.ctrace .tr.me { stroke: var(--brand); }
.ctrace .tr.ref { stroke: var(--muted); }
.ctrace .bl { stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.ctrace .bl.me { stroke: var(--red); }
.ctrace .bl.ref { stroke: var(--muted); }
.ctrace .bd.me { fill: var(--red); }
.ctrace .bd.ref { fill: var(--muted); }
.clegend { display: flex; gap: 18px; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.clegend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: 3px; margin-right: 6px; }
.clegend i.me { background: var(--brand); }
.clegend i.ref { background: var(--muted); }
.clegend .win { margin-left: auto; }

.coach-cta { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* the locked preview — the advertisement, and ONLY ever in per-driver mode */
.coach-locked { position: relative; overflow: hidden; }
.coach-locked .blurred { filter: blur(7px); opacity: 0.55; pointer-events: none; user-select: none; }
.coach-locked .cbars { display: grid; gap: 10px; margin-top: 14px; }
.coach-locked .cbar { height: 12px; border-radius: 99px; background: var(--panel2); overflow: hidden; }
.coach-locked .cbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--red)); }
.coach-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; }
.coach-lock .padlock { font-size: 34px; }
.coach-lock h3 { font-size: calc(22px * var(--h3)); font-weight: 800; }
.coach-lock p { color: var(--muted); max-width: 460px; font-size: 14.5px; }
.buyrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* Whatever the buy button has to say back — empty until it has something. */
.cbuynote:empty { display: none; }
.cbuynote { font-size: 13px; margin-top: 4px; }

/* OUR MEMBERSHIPS (owner spec 2026-09-20). One card per plan, filled from the live list, so a
   price changed in Admin is the price on the website. It borrows the package card’s shape — a
   customer should not have to learn two ways of reading a price. */
.plangrid { display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plangrid .pak { display: flex; flex-direction: column; gap: 6px; }
.plangrid .pak h3 { font-size: calc(18px * var(--h3)); font-weight: 800; }
.plangrid .pak .price { font-size: 25px; font-weight: 900; font-style: italic; color: var(--brand); }
.plangrid .pak .price small { font-size: 13px; font-weight: 600; font-style: normal; color: var(--muted); }
.plangrid .pak p { color: var(--muted); font-size: 14px; }
.plangrid .pak ul { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.plangrid .pak li { font-size: 14px; padding-left: 18px; position: relative; }
.plangrid .pak li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 800; }

/* A STAFF MEMBER’S OWN MONTH (owner spec 2026-09-21). The same shape as the planner the centre
   sees, and the same colours, so "the blue one" means the same thing to both of them. */
.shcal-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
/* a fixed box with a symbol in it centres the symbol — the house rule (2026-09-20) */
.shc-nav { background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 15px;
  display: grid; place-items: center; padding: 0; line-height: 1; }
.shcal { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: auto; gap: 4px; }
.shc-head { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 4px; }
.shc-day { min-height: 54px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; }
.shc-day.out { opacity: .35; }
.shc-day.today { border-color: var(--brand); }
.shc-n { font-size: 11px; font-weight: 700; color: var(--muted); }
.shc-pill { font-size: 10px; font-weight: 800; color: #fff; border-radius: 999px;
  padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .shcal { grid-template-columns: repeat(7, 1fr); } .shc-day { min-height: 40px; } }
/* the availability calendar on My shifts (2026-09-27): tap a day */
.sha-day { min-height: 40px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; }
.sha-day:disabled { opacity: .3; cursor: default; }
.sha-day.out { opacity: .4; }
.sha-day.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.sha-day.available { background: rgba(56, 178, 74, .28); border-color: var(--green, #38b24a); }
.sha-day.unavailable { background: rgba(229, 53, 43, .24); border-color: var(--red, #e5352b); }
.sha-day.week { border-style: dashed; background-color: transparent; }
.sha-day.available.week { color: var(--green, #38b24a); }
.sha-day.unavailable.week { color: var(--red, #e5352b); }
.sha-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.sha-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sha-key { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--border); }
.sha-key.available { background: rgba(56, 178, 74, .28); border-color: var(--green, #38b24a); }
.sha-key.unavailable { background: rgba(229, 53, 43, .24); border-color: var(--red, #e5352b); }
.sha-key.week { border-style: dashed; background: transparent; }

/* PROMOTIONS (owner spec 2026-09-21). A card per offer, with the centre’s own picture when
   there is one. The list is live, so a card cannot outlive the offer it is advertising. */
.promogrid { display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.promo { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column; }
.promopic { display: block; height: 140px; background-size: cover; background-position: center; }
.promobody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.promotag { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--brand); border: 1px solid var(--brand-edge); border-radius: 999px; padding: 3px 11px; }
.promo h3 { font-size: 19px; font-weight: 800; }
.promo p { color: var(--muted); font-size: 14px; }
.promo small { color: var(--muted); font-size: 12.5px; opacity: .8; }

/* A RICH EVENT DESCRIPTION (owner spec 2026-09-21). The tags modules/rich_text.js allows, and
   nothing else — so this is the whole of what an operator can make a description look like. */
.richtext { line-height: 1.6; }
.richtext p { margin: 0 0 10px; }
.richtext ul, .richtext ol { margin: 0 0 10px 20px; }
.richtext li { margin-bottom: 3px; }
.richtext b, .richtext strong { font-weight: 800; color: var(--text); }
.richtext u { text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* A FORMULA'S OWN PICTURE (owner 2026-09-22: "formulas also show pictures on the website they
   should also be changeable or deleted"). It crops to fill, so whatever shape a centre uploads
   still lines up with the cards beside it. A formula without one draws the card exactly as it
   always did — no gap, no placeholder.
   INSIDE THE CARD, BETWEEN THE NAME AND THE PRICE (owner 2026-10-02: "those pictures sit outside the
   formula card and over text. make it sit in the card cleanly between the formula name and price and
   make the edges fade slightly … pictures for formulas we dont show on mobile"). It used to pull itself
   out to the card's edges with negative margins — fine at the top of a 24 px card, but on the booking
   page it came after the price in an 18 px card, so it climbed over the price and past the border. Now
   it keeps to the card's own padding, and the four edges fade into the card (two masks, kept where
   both are solid). */
.pak-pic { height: 150px; margin: 2px 0 4px; border-radius: 12px;
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect; }

@media (max-width: 760px) { .pak-pic { display: none; } }

/* THE HOUSE RULES AND THE SAFETY BRIEFING (owner spec 2026-09-25) — the popup behind the link in
   every "I accept …" line (site.js skShowTerms). The text is the centre's own, line breaks kept. */
.sk-terms { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.62); }
.sk-terms-card { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; }
.sk-terms-card h3 { font-size: 19px; margin-bottom: 12px; }
.sk-terms-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 18px; }
[data-sk-terms] { color: var(--brand); text-decoration: underline; }

/* SIGNED IN on an event's sign-up (2026-09-28): who you are instead of fields to type */
.ev-me { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--panel2); margin-bottom: 12px; font-size: 14px; }
.ev-me a { color: var(--brand); }

/* ═══ THE TEAMBUILDING PLANNER (2026-09-29, teambuilding_planner.js) — the site's own colours and type throughout ═══ */
.tbp { scroll-margin-top: 90px; }
.section.tbp { max-width: 1280px; }
.tbp-head .kicker { margin-bottom: 6px; }
.tbp .tbp-h1 { font-family: var(--font-head); font-size: calc(clamp(32px, 5vw, 60px) * var(--h1, 1)); line-height: 1.03; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 14px; }
.tbp .tbp-h1 em { color: var(--brand); font-style: normal; }
.tbp-sub { color: var(--muted); max-width: 760px; font-size: calc(16px * var(--body, 1)); line-height: 1.6; margin: 0 0 34px; }
.tbp-steps { display: flex; align-items: flex-start; margin: 0 0 38px; }
.tbp-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 90px; cursor: default; background: none; border: 0; color: var(--muted); font: inherit; padding: 0; }
.tbp-step.done { cursor: pointer; color: var(--text); }
.tbp-step .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--panel2); border: 1px solid var(--border); color: var(--muted); }
.tbp-step.done .dot, .tbp-step.on .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.tbp-step.on .dot { box-shadow: 0 0 0 6px var(--brand-soft); }
.tbp-step.on { color: var(--brand); font-weight: 700; }
.tbp-step small { font-size: 13.5px; white-space: nowrap; }
.tbp-line { flex: 1; height: 3px; background: var(--border); margin: 19px 10px 0; border-radius: 3px; }
.tbp-line.done { background: var(--brand); }
.tbp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 38px; align-items: start; }
.tbp-title { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.tbp-title .n { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.tbp-title h3 { font-family: var(--font-head); text-transform: uppercase; font-size: calc(clamp(22px, 2.6vw, 32px) * var(--h3, 1)); letter-spacing: .02em; margin: 0; }
.tbp-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; margin-bottom: 18px; }
.tbp-card h4 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.tbp .note { color: var(--muted); font-size: 14px; }
.tbp-max { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tbp-count { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.tbp-count b { font-family: var(--font-head); font-size: 54px; color: var(--brand); line-height: 1; }
.tbp-count b small { font-family: var(--font-body); font-size: 16px; color: var(--muted); font-weight: 500; margin-left: 8px; }
.tbp-pm { display: grid; place-items: center; padding: 0; width: 48px; height: 48px; border-radius: 10px; background: var(--brand); color: #fff; border: 0; font-size: 24px; font-weight: 700; cursor: pointer; }
.tbp-pm:disabled { opacity: .35; cursor: default; }
.tbp-range { width: 100%; margin: 18px 0 4px; accent-color: var(--brand); }
.tbp-split { background: var(--panel2); border: 1px solid var(--border); border-radius: 16px; padding: 18px 24px; }
.tbp-split .r { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--muted); }
.tbp-split .r b { color: var(--brand); }
.tbp-split .r b.plain { color: var(--text); }
.tbp-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.tbp-f { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; cursor: pointer; text-align: left; font: inherit; color: var(--text); display: flex; flex-direction: column; }
.tbp-f:hover { border-color: var(--brand-edge); }
.tbp-f.sel { border: 2px solid var(--brand); padding: 23px; }
.tbp-f .badge { align-self: flex-start; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; margin-bottom: 10px; }
.tbp-f h5 { font-family: var(--font-head); text-transform: uppercase; font-size: 26px; margin: 0 0 10px; padding-right: 36px; }
.tbp-f p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.tbp-f ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tbp-f li { display: flex; gap: 10px; font-size: 14.5px; }
.tbp-f li::before { content: ""; width: 14px; height: 14px; flex: none; margin-top: 3px; border-radius: 50%; border: 2px solid var(--brand); box-sizing: border-box; }
.tbp-f .check { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.tbp-f .price { margin-top: 16px; font-weight: 700; }
.tbp-f .selected { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); color: var(--brand); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.tbp-dlabel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.tbp-durs { display: flex; gap: 10px; margin: 12px 0 16px; }
.tbp-dur { position: relative; flex: 1; background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 12px; font-family: var(--font-head); font-size: 22px; color: var(--brand); cursor: pointer; text-align: left; }
.tbp-dur.sel { border: 2px solid var(--brand); padding: 15px 11px; }
.tbp-dur .pop { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-family: var(--font-body); font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.tbp-advice { background: var(--panel2); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.tbp-advice button { margin-top: 12px; background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 10px 18px; border-radius: 6px; font-weight: 700; cursor: pointer; font: inherit; }
.tbp-advice button.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.tbp-dt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.tbp-dt .tbp-card { margin: 0; }
.tbp-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tbp-cal-head b { font-family: var(--font-head); text-transform: uppercase; font-size: 20px; }
.tbp-nav { display: grid; place-items: center; padding: 0; width: 44px; height: 44px; border-radius: 8px; border: 0; background: var(--brand); color: #fff; font-size: 18px; cursor: pointer; }
.tbp-nav:disabled { background: var(--brand-soft); color: var(--brand); cursor: default; }
.tbp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tbp-cal .wd { text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 0; }
.tbp-day { aspect-ratio: 1; border-radius: 8px; border: 1px solid transparent; background: var(--panel2); color: var(--text); font-weight: 700; cursor: pointer; font-size: 15px; padding: 0; }
.tbp-day:disabled { opacity: .3; cursor: default; }
.tbp-day.today { background: var(--brand-soft); }
.tbp-day.sel { border-color: var(--brand); color: var(--brand); }
.tbp-slots-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tbp-slots-head h4 { margin: 0; }
.tbp-live { color: var(--green); font-size: 13px; }
.tbp-live::before { content: "\25CF"; margin-right: 4px; }
.tbp-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-height: 348px; overflow-y: auto; padding-right: 4px; }
.tbp-slot { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 13px 4px; font-family: var(--font-head); font-size: 19px; color: var(--text); cursor: pointer; line-height: 1.1; }
.tbp-slot small { display: block; font-family: var(--font-body); font-size: 11px; color: var(--muted); }
.tbp-slot:disabled { opacity: .4; cursor: default; text-decoration: line-through; }
.tbp-slot.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.tbp-card .sec { font-size: 13.5px; color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.tbp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.tbp-2 label, .tbp-notes { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.tbp-2 label input, .tbp-2 label select, .tbp-notes textarea { margin-top: 7px; width: 100%; text-transform: none; letter-spacing: 0; font-family: inherit; box-sizing: border-box; }
.tbp-notes { margin-top: 14px; }
.tbp-2 .full { grid-column: 1 / -1; }
.tbp .req::after { content: " *"; color: var(--brand); }
.tbp-xhead { margin-top: 10px; }
/* an extra: its name, what it is and its price on the left, its on/off switch on the right (owner 2026-09-29) */
.tbp-x { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.tbp-xhead + .tbp-x { border-top: 0; }
.tbp-x .grow { flex: 1; min-width: 0; font-size: 15px; }
.tbp-x .grow b { display: block; font-weight: 700; }
.tbp-x small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.tbp-x .p { display: block; color: var(--brand); font-weight: 700; font-size: 13.5px; margin-top: 4px; }
.tbp-terms { border-top: 0; margin: 4px 0 0; }
.tbp-sw { position: relative; display: inline-block; width: 50px; height: 28px; flex: none; margin: 0; cursor: pointer; }
.tbp-sw input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.tbp-sw span { position: absolute; inset: 0; border-radius: 99px; background: var(--panel2); border: 1px solid var(--border); transition: background .15s, border-color .15s; }
.tbp-sw span::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.tbp-sw input:checked + span { background: var(--brand-soft); border-color: var(--brand); }
.tbp-sw input:checked + span::before { transform: translateX(22px); background: var(--brand); }
.tbp-sw input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.tbp-rev { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 15px; }
.tbp-card .sec + .tbp-rev { border-top: 0; }
.tbp-rev span { color: var(--muted); }
.tbp-rev b { text-align: right; }
.tbp-rev a { color: var(--brand); font-size: 13px; margin-left: 10px; cursor: pointer; font-weight: 600; }
.tbp-reqnote { margin: 4px 0 8px; }
.tbp-sum { position: sticky; top: 100px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.tbp-sum h4 { font-family: var(--font-head); text-transform: uppercase; font-size: 20px; margin: 0 0 18px; }
.tbp-sum .r { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--muted); font-size: 15px; }
.tbp-sum .r b { color: var(--text); text-align: right; }
.tbp-sum .x { font-size: 13.5px; }
.tbp-sum hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.tbp-sum .tot { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; }
.tbp-sum .tot b { color: var(--brand); font-size: 22px; }
.tbp-sum .pp { display: flex; justify-content: space-between; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.tbp-navrow { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.tbp-prev { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 15px 26px; border-radius: 4px; font-family: var(--font-head); font-size: 18px; text-transform: uppercase; cursor: pointer; }
.tbp-next { background: var(--brand); border: 0; color: #fff; padding: 16px 38px; border-radius: 4px; font-family: var(--font-head); font-size: 18px; text-transform: uppercase; cursor: pointer; }
.tbp-next:disabled { opacity: .6; cursor: default; }
.tbp-err { color: var(--red, #ff6b60); margin-top: 12px; }
.tbp-done { text-align: center; padding: 40px 20px; }
.tbp-done b { display: block; font-size: 40px; color: var(--brand); margin-bottom: 10px; }
.tbp-done p { font-size: 16px; }
@media (max-width: 1000px) {
  .tbp-layout { grid-template-columns: 1fr; }
  .tbp-sum { position: static; }
  .tbp-fgrid, .tbp-dt, .tbp-2 { grid-template-columns: 1fr; }
  .tbp-step small { display: none; }
  .tbp-step { min-width: 0; }
  .tbp-navrow { flex-wrap: wrap; }
}

/* NO FLASH OF THE STANDARD PAGE (owner 2026-09-30): each page's <head> puts sk-wait on <html>; site.js takes it off once
   the centre's own look is on (skReveal) — 2.5 s at the very most. The page's background stays; only its content waits. */
html.sk-wait body { opacity: 0; }
body { transition: opacity .18s ease-out; }

/* ── THE COOKIE BANNER (owner spec 2026-10-06/07, approved mockup) — only the site's own variables, so dark, light, the
   brand colour and the fonts follow. Refuse is as clear as Accept (a real outline in the text colour — the law asks for
   that), and no switch starts on (site.js skCookieBanner). On a phone it is a sheet along the bottom. */
.ck { position: fixed; z-index: 900; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(780px, calc(100% - 32px));
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); padding: 20px 22px; font-family: var(--font-body); }
.ck-top { display: flex; gap: 18px; align-items: flex-start; }
.ck-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 20px; }
.ck h3 { font-family: var(--font-head); font-size: 17px; font-weight: 800; margin: 0 0 4px; }
.ck p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.ck p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ck-btns { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.ck-btns .cta { padding: 11px 20px; font-size: 14px; min-width: 132px; cursor: pointer; }
.ck-btns .cta.ghost { border: 1.5px solid rgba(242, 240, 236, 0.4); border: 1.5px solid color-mix(in srgb, var(--text) 40%, transparent); color: var(--text); }
.ck-link { background: none; border: 0; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
  margin-right: auto; padding: 8px 2px; text-decoration: underline; text-underline-offset: 3px; font-family: inherit; }
.ck-link:hover { color: var(--text); }
.ck-opts { display: grid; gap: 8px; margin-top: 16px; }
.ck-opt { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--border); }
.ck-opt b { display: block; font-size: 14px; margin-bottom: 2px; }
.ck-opt span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ck-opt .grow { flex: 1; }
.ck-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; background: var(--border);
  border: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.ck-sw::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s; }
.ck-sw.on { background: var(--brand-soft); border-color: var(--brand-edge); }
.ck-sw.on::before { transform: translateX(18px); background: var(--brand); }
.ck-sw:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ck-always { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: none; }
@media (max-width: 640px) {
  .ck { bottom: 0; width: 100%; border-radius: 18px 18px 0 0; padding: 18px 16px 20px; }
  .ck-top { gap: 12px; }
  .ck-ico { width: 34px; height: 34px; font-size: 17px; }
  .ck-btns { flex-direction: column-reverse; align-items: stretch; }
  .ck-btns .cta { width: 100%; }
  .ck-link { margin: 4px auto 0; }
  .ck-open .wa-fab { display: none; }   /* the WhatsApp button would sit under the sheet — back once the choice is made */
}

/* ONE <h1> A PAGE (2026-10-07, site.js skEnsureH1): a custom page's first heading becomes its h1 and looks exactly as it
   did; a page without one gets an h1 only Google and screen readers see. */
.section h1.sk-h1 { font-family: var(--font-head); font-size: calc(clamp(26px, 3.6vw, 40px) * var(--h2)); font-weight: 800; margin: 8px 0 10px; line-height: inherit; }
.sk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── WEBSITE POPUPS (owner spec 2026-10-08, approved mockups — site.js skPopups) ── in the site's colours unless the popup
   has its own (--pp-bg / --pp-text / --pp-btn); six layouts: centred card, picture beside, corner card, bar, video, whole screen */
.pp-back { position: fixed; inset: 0; z-index: 900; background: rgba(6, 6, 8, 0.58); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 18px; animation: ppFade .25s ease-out; }
.pp-back.clear { background: transparent; backdrop-filter: none; }
@keyframes ppFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ppUp { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
.pp { position: relative; background: var(--pp-bg, var(--panel)); color: var(--pp-text, var(--text)); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); overflow: hidden; animation: ppUp .3s ease-out;
  max-height: calc(100vh - 36px); overflow-y: auto; }
.pp .cta { background: var(--pp-btn, var(--brand)); }
.pp-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pp-pic { background: var(--panel2) center / cover no-repeat; }
.pp-body { padding: 24px 26px 22px; }
.pp-kick { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.pp h3 { font-family: var(--font-head); font-size: 26px; line-height: 1.15; margin: 0 0 10px; color: inherit; }
.pp .pp-txt { color: var(--pp-text, var(--muted)); opacity: .92; font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.pp .pp-txt p { margin: 0 0 8px; }
.pp-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pp-no { background: none; border: 0; color: inherit; opacity: .7; font-size: 14px; text-decoration: underline; cursor: pointer; }
.pp-code { display: inline-flex; gap: 10px; align-items: center; border: 1px dashed var(--brand); border-radius: 10px; padding: 7px 8px 7px 12px;
  margin: 0 0 16px; letter-spacing: .08em; }
.pp-code button { background: transparent; border: 1px solid var(--border); color: inherit; border-radius: 8px; padding: 4px 10px; font-size: 12px;
  letter-spacing: 0; cursor: pointer; }
.pp.l-center { width: min(440px, 100%); }
.pp.l-center .pp-pic { height: 210px; }
.pp.l-split { width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1fr; }
.pp.l-split .pp-pic { min-height: 340px; }
.pp.l-split .pp-body { align-self: center; padding: 30px; }
.pp.l-video { width: min(620px, 100%); }
.pp-vid { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pp-vid video, .pp-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.pp-sound { position: absolute; left: 12px; bottom: 12px; background: rgba(0, 0, 0, .6); color: #fff; border: 0; border-radius: 99px;
  font-size: 12px; padding: 5px 10px; z-index: 1; cursor: pointer; }
.pp.l-full { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; border: 0; display: flex; align-items: center;
  background: #0a0a0c center / cover no-repeat; color: #fff; }
.pp.l-full::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 10, 12, .92) 25%, rgba(10, 10, 12, .35)); }
.pp.l-full .pp-body { position: relative; max-width: 620px; padding: 40px 8vw; }
.pp.l-full h3 { font-size: clamp(34px, 6vw, 56px); }
.pp.l-full .pp-txt { color: #d9d6cf; font-size: 17px; }
.pp-back.full { padding: 0; }
.pp.pp-s.l-center { width: min(360px, 100%); } .pp.pp-l.l-center { width: min(540px, 100%); }
.pp.pp-s.l-split { width: min(620px, 100%); } .pp.pp-l.l-split { width: min(900px, 100%); }
.pp.pp-s.l-video { width: min(480px, 100%); } .pp.pp-l.l-video { width: min(800px, 100%); }
.pp-corner { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: min(340px, calc(100% - 36px)); }
.pp-corner .pp.pp-l { } .pp-corner:has(.pp-l) { width: min(420px, calc(100% - 36px)); } .pp-corner:has(.pp-s) { width: min(280px, calc(100% - 36px)); }
.pp.l-corner { display: grid; grid-template-columns: 96px 1fr; border-radius: 16px; }
.pp.l-corner:not(:has(.pp-pic)) { grid-template-columns: 1fr; }
.pp.l-corner .pp-pic { min-height: 100%; }
.pp.l-corner .pp-body { padding: 14px 40px 14px 14px; }
.pp.l-corner h3 { font-size: 17px; margin-bottom: 4px; }
.pp.l-corner .pp-txt { font-size: 13px; margin-bottom: 10px; }
.pp.l-corner .pp-x { width: 26px; height: 26px; font-size: 16px; top: 6px; right: 6px; background: transparent; color: inherit; opacity: .7; display: grid; place-items: center; }
.pp.l-corner .cta { padding: 8px 14px; font-size: 13px; }
html.pp-corner-open .wa-fab { display: none; }
html.pp-bar-open .wa-fab { transform: translateY(-64px); }
.pp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 899; }
.pp.l-bar { border-radius: 0; border-width: 1px 0 0; display: flex; align-items: center; gap: 16px; padding: 12px 56px 12px 22px;
  justify-content: center; flex-wrap: wrap; background: var(--pp-bg, var(--brand)); color: var(--pp-text, #1a0d02); max-height: none; overflow: visible; }
.pp.l-bar .pp-bar-words b { font-size: 15px; }
.pp.l-bar .pp-bar-words span { font-size: 14px; }
.pp.l-bar .cta { background: var(--pp-btn, #1a0d02); color: #fff; padding: 8px 16px; font-size: 13px; }
.pp.l-bar .pp-x { background: transparent; color: inherit; top: 50%; transform: translateY(-50%); }
@media (max-width: 680px) { .pp.l-split { grid-template-columns: 1fr; } .pp.l-split .pp-pic { min-height: 180px; } }