/* WTCC site styles, in The Autoground's design, dark only: charcoal pages under a dark photo header,
   Bebas Neue headings, a gold wordmark, slanted orange-to-coral buttons and a charcoal footer. Mobile first. */
@font-face { font-family: 'Bebas Neue'; src: url('bebasneue-light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('bebasneue-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('bebasneue-bold.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
:root {
  --bg: #141414;
  --surface: #1c1c1c;
  --surface-2: #232323;
  --surface-3: #2e2e2e;
  --border: #3d3d3d;
  --text: #ededed;
  --muted: #a8a8a8;
  --faint: #8c8c8c;
  --accent: #e3ae41;
  --accent-ink: #ffffff;
  --gold: #d19e55;
  --select: #e3ae41;
  --grad: linear-gradient(to top right, #ecbe4c, #f13961);
  --charcoal: #0b0b0b;
  --hot: #f2496d;
  --cyan: #4fb3d9;
  --orange: #e8781f;
  --violet: #9d8cf0;
  --ok: #5cc27a;
  --warn: #e7b04b;
  --bad: #ff6b6b;
  --radius: 2px;
  --radius-lg: 2px;
  --shadow: 0 8px 24px rgba(0,0,0,.5);
  --display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --body: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --wrap: 1200px;
  /* Colours the Autoground layout uses for fields, secondary text, the big pale WHEN / WHERE words,
     bracket frames, round steppers and see-through panels. */
  --field: #1c1c1c;
  --text-2: #cfcfcf;
  --ghost: #2e2e2e;
  --bracket: #555555;
  --stepper: #ededed;
  --stepper-bg: #1c1c1c;
  --glass: rgba(20,20,20,.94);
  --hero-wash: rgba(16,16,16,.8);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--body); overflow-x: hidden; }
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; margin: 0 0 .5em; }
h1 { font-size: clamp(2.8rem, 8vw, 4rem); }
h2 { font-size: clamp(2.2rem, 5vw, 3rem); }
h3 { font-size: 1.9rem; }
h4 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 24px; } }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny { font-size: .75rem; }
.center { text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font: 400 1.15rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .7rem; display: inline-block; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #333 url('header-bg.jpg') center / cover; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 76px; }
/* The WTCC wordmark from the club's decal kit (white on transparent), drawn as the link's background.
   The link keeps its text for screen readers and search engines. */
.logo { display: block; flex: none; width: 168px; height: 46px; background: url('wtcc-wordmark.png') left center / contain no-repeat; color: transparent; font-size: 0; overflow: hidden; }
.logo:hover { text-decoration: none; opacity: .9; }
.logo-mark { display: none; }
.nav { display: none; gap: 2px; margin-left: 16px; }
.nav a { color: #fff; font: 400 1.3rem/1 var(--display); letter-spacing: .08em; padding: 10px 9px 7px; border-bottom: 2px solid transparent; }
.nav a:hover { color: #fff; border-color: rgba(255,255,255,.5); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--gold); border-color: var(--gold); text-decoration: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; background: rgba(0,0,0,.6); border: 1px solid #adadad; color: #fff; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { border-color: #fff; }
.icon-btn svg { width: 20px; height: 20px; }
.badge-count { position: absolute; top: -7px; right: -7px; background: #f13961; color: #fff; font: 700 .7rem/1 var(--body); min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }
.header-actions .btn { display: none; }
.menu-toggle { display: grid; }
/* Phones: a smaller wordmark and icons so the logo, mute, bell, garage, cart and menu buttons fit across 360px. */
@media (max-width: 430px) { .site-header .wrap { gap: 10px; } .site-header .logo { width: 124px; } .header-actions { gap: 5px; } .header-actions .icon-btn { width: 38px; height: 38px; } }
@media (max-width: 375px) { .site-header .logo { width: 104px; } }
/* The header is just the logo, icons and menu button at every width; every section lives in the menu drawer. */
/* Menu drawer: slides in from the left and leaves a strip of the page showing behind a dimmed backdrop. */
.menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s; }
.menu-backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 82vw); z-index: 100; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  padding: 0 16px 20px; background: rgb(20,20,20); border-right: 1px solid rgba(255,255,255,.2); transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
.mobile-nav.open { transform: none; visibility: visible; transition: transform .25s ease; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; height: 76px; flex: none; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.2); }
.mobile-nav-head .logo { width: 140px; height: 38px; }
.mobile-nav a { color: #fff; padding: 12px; font: 400 1.35rem/1 var(--display); letter-spacing: .08em; }
.mobile-nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.mobile-nav a[aria-current="page"] { color: var(--gold); }
.mobile-nav .btn { margin-top: 8px; justify-content: center; }
.menu-welcome { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 12px 4px; border-top: 1px solid rgba(255,255,255,.2); color: #fff; font: 400 1.35rem/1 var(--display); letter-spacing: .08em; }
.menu-welcome-pic { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad); }
.menu-welcome-pic img { width: 100%; height: 100%; object-fit: cover; }
.menu-welcome-pic b { font: 700 1.1rem/1 var(--display); letter-spacing: .04em; }
.menu-welcome-pic svg { width: 22px; height: 22px; }
/* Section strip: the pages inside Schedule or Garage, under the header. */
.subnav { background: var(--charcoal); border-bottom: 1px solid rgba(255,255,255,.12); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav a { color: #c8c8c8; padding: 14px 12px 11px; font: 400 1.2rem/1 var(--display); letter-spacing: .08em; white-space: nowrap; border-bottom: 3px solid transparent; }
.subnav a:hover { color: #fff; text-decoration: none; }
.subnav a[aria-current="page"] { color: #fff; border-color: var(--select); }

/* ---------- Buttons ---------- */
/* Primary: the Autoground gradient with a slanted leading edge. The shape is drawn behind the button,
   so the focus outline still shows around it. */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; padding: 13px 22px; font: 400 1rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: transform .08s ease, background .15s ease, border-color .15s ease, filter .15s ease; white-space: nowrap; background: none; color: var(--text); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-hot { color: #fff; padding-left: 34px; padding-right: 26px; border: 0; }
.btn-primary::before, .btn-hot::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grad); clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%); }
.btn-hot::before { background: #f13961; }
.btn-primary:hover, .btn-hot:hover { filter: brightness(1.06) saturate(1.1); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text); }
.btn-dark { background: rgba(0,0,0,.6); color: #fff; border-color: #adadad; }
.btn-dark:hover { background: rgba(0,0,0,.75); }
.btn-sm { padding: 9px 14px; font-size: .82rem; }
.btn-sm.btn-primary, .btn-sm.btn-hot { padding-left: 24px; padding-right: 16px; }
.btn-sm.btn-primary::before, .btn-sm.btn-hot::before { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.btn-lg { padding: 20px 32px; font-size: 1.15rem; }
.btn-lg.btn-primary, .btn-lg.btn-hot { padding-left: 52px; padding-right: 40px; }
.btn-lg.btn-primary::before, .btn-lg.btn-hot::before { clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%); }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
@media (min-width: 900px) { section { padding: 96px 0; } }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.section-head h2 { margin: 0; }
.page-hero { padding: 48px 0 36px; background: linear-gradient(var(--hero-wash), var(--hero-wash)), #cfcfcf url('subheader-bg.jpg') center / cover; }
.page-hero h1 { margin-bottom: .3em; }
.page-hero p { max-width: 680px; color: var(--text-2); font-size: 1.1rem; }
.page-hero .eyebrow { color: var(--muted); }
.page-hero-tight { padding: 36px 0 22px; }
.page-hero-tight h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.wrap-wide { max-width: 1480px; }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 64px; min-height: 78vh; display: flex; align-items: center;
  color: #fff; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.55)), #2b2b2b url('hero-bg.jpg') center / cover; }
.hero::after { content: 'WTCC'; position: absolute; right: -2vw; bottom: -4vw; font: 700 28vw/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); pointer-events: none; }
.hero h1 { max-width: 900px; font-size: clamp(3.4rem, 10vw, 7rem); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .eyebrow { color: var(--gold); }
.hero .lead { font-size: 1.2rem; color: rgba(255,255,255,.85); max-width: 620px; margin-bottom: 28px; }
.hero .btn-ghost, .band .btn-ghost.on-dark { color: #fff; border-color: #c8c8c8; }
.hero .btn-ghost:hover { border-color: #fff; }
.hero a:not(.btn) { color: var(--gold); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.next-event { margin-top: 44px; display: inline-flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; background: rgba(0,0,0,.6); border: 1px solid #adadad; padding: 18px 22px; position: relative; z-index: 1; max-width: 100%; color: #fff; }
.next-event .muted { color: rgba(255,255,255,.7); }
.next-event .eyebrow { color: var(--gold); font-size: 1rem; }
.countdown { display: flex; gap: 14px; }
.countdown div { text-align: center; min-width: 48px; }
.countdown b { display: block; font: 700 2.4rem/1 var(--display); color: var(--gold); }
.countdown span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; position: relative; min-width: 0; }
.card h3 { margin-bottom: .35em; }
.card-link { color: inherit; display: block; transition: border-color .15s, transform .15s; }
.card-link:hover { text-decoration: none; border-color: var(--faint); transform: translateY(-2px); }
.disc-card { overflow: hidden; }
.disc-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--accent)); }
.disc-card .tag { color: var(--c, var(--accent)); }
/* Work in progress: greyed out, not clickable, with a diagonal banner across the corner. */
.disc-card.is-soon { cursor: default; }
.disc-card.is-soon > :not(.soon-ribbon) { filter: grayscale(1); opacity: .45; }
.disc-card.is-soon::before { filter: grayscale(1); opacity: .45; }
.soon-ribbon { position: absolute; top: 34px; right: -58px; width: 240px; transform: rotate(35deg); text-align: center; padding: 6px 0;
  background: var(--text); color: var(--bg); font: 800 .78rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.tag { display: inline-block; font: 700 .7rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 .75rem/1 var(--body); padding: 6px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text); border: 1px solid var(--border); white-space: nowrap; }
.pill-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); }
.demo-tag { display: inline-block; vertical-align: middle; margin-right: 8px; font: 700 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; border: 1px dashed var(--muted); color: var(--muted); }
.status { font: 700 .72rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.status-open { background: rgba(52,211,153,.15); color: var(--ok); }
.status-soon { background: rgba(251,191,36,.12); color: var(--warn); }
.status-full { background: rgba(248,113,113,.14); color: var(--bad); }
.status-paid { background: rgba(52,211,153,.15); color: var(--ok); }
.status-pending { background: rgba(251,191,36,.12); color: var(--warn); }

/* Event cards */
.event-card { display: grid; gap: 14px; }
.event-date { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); text-transform: uppercase; }
.event-date b { font-size: 2.8rem; line-height: 1; color: var(--text); font-weight: 700; }
.event-date span { font-size: 1.1rem; color: var(--muted); font-weight: 600; }
.event-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.event-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.cap-bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.cap-bar i { display: block; height: 100%; background: var(--c, var(--gold)); }
.cap-row { display: grid; grid-template-columns: 90px 1fr 56px; gap: 10px; align-items: center; font-size: .8rem; color: var(--muted); }

/* Steps */
.steps { counter-reset: step; }
.step-card { counter-increment: step; }
.step-card::before { content: counter(step, decimal-leading-zero); display: block; font: 700 3.2rem/1 var(--display); color: var(--surface-3); margin-bottom: 6px; }

/* Festival band */
.band { background: var(--surface-3); }
.band-inner { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .band-inner { grid-template-columns: 1.2fr 1fr; } }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.stat b { display: block; font: 700 2.6rem/1 var(--display); color: var(--hot); }

/* Partners */
.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .partners { grid-template-columns: repeat(6, 1fr); } }
.partner { border: 1px solid var(--border); border-radius: var(--radius); height: 72px; padding: 14px 16px; display: grid; place-items: center; transition: border-color .15s ease; }
.partner img { max-width: 100%; max-height: 44px; object-fit: contain; opacity: .8; transition: opacity .15s ease; }
.partner:hover { border-color: var(--text); }
.partner:hover img { opacity: 1; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .form-grid { grid-template-columns: repeat(2, 1fr); } .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .span-2 { grid-column: span 2; } .span-all { grid-column: 1 / -1; } }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.field label, .label { font-weight: 600; font-size: .9rem; }
.field .req { color: var(--hot); }
.field .hint { font-size: .8rem; color: var(--muted); }
input:not([type]):where(:not([data-autoground] *, .autoground-page > div *)), input[type=text]:where(:not([data-autoground] *, .autoground-page > div *)), input[type=password]:where(:not([data-autoground] *, .autoground-page > div *)), input[type=email]:where(:not([data-autoground] *, .autoground-page > div *)), input[type=tel]:where(:not([data-autoground] *, .autoground-page > div *)), input[type=number]:where(:not([data-autoground] *, .autoground-page > div *)), input[type=date]:where(:not([data-autoground] *, .autoground-page > div *)), input[type=search]:where(:not([data-autoground] *, .autoground-page > div *)), select:where(:not([data-autoground] *, .autoground-page > div *)), textarea:where(:not([data-autoground] *, .autoground-page > div *)) {
  width: 100%; background: var(--field); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 12px 14px; font: inherit; font-size: 16px; }
input:focus:where(:not([data-autoground] *, .autoground-page > div *)), select:focus:where(:not([data-autoground] *, .autoground-page > div *)), textarea:focus:where(:not([data-autoground] *, .autoground-page > div *)) { outline: none; border-color: var(--select); box-shadow: 0 0 0 3px rgba(227,174,65,.25); }
textarea:where(:not([data-autoground] *, .autoground-page > div *)) { min-height: 96px; resize: vertical; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad); }
.field .error { color: var(--bad); font-size: .8rem; display: none; }
.field.invalid .error { display: block; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin: 0 0 20px; min-width: 0; }
legend { font: 700 1.25rem/1 var(--display); text-transform: uppercase; padding: 0 8px; letter-spacing: .03em; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; }
.check:hover { border-color: var(--faint); }
.check input { margin-top: 4px; accent-color: var(--violet); width: 18px; height: 18px; flex: none; }
.check.req-item { border-left: 3px solid var(--hot); }
.check.rec-item { border-left: 3px solid var(--warn); }
.check-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .check-grid { grid-template-columns: repeat(2, 1fr); } }
.choice-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .choice-body { display: block; height: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; transition: border-color .15s, background .15s; }
.choice:hover .choice-body { border-color: var(--faint); }
.choice input:checked + .choice-body { border-color: var(--select); background: rgba(227,174,65,.08); box-shadow: inset 0 0 0 1px var(--select); }
.choice input:disabled + .choice-body { opacity: .4; cursor: not-allowed; }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice b { display: block; }
.choice .price { float: right; font-weight: 700; color: var(--text); }

/* Wizard */
.wizard { display: grid; gap: 24px; }
@media (min-width: 1000px) { .wizard { grid-template-columns: 1fr 320px; align-items: start; } }
.progress { display: flex; gap: 6px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; }
.progress button { flex: 1; min-width: 92px; background: none; border: 0; border-top: 4px solid var(--surface-3); color: var(--faint); text-align: left; padding: 10px 2px 0; font: 600 .8rem/1.2 var(--body); cursor: pointer; }
.progress button b { display: block; font: 800 1.1rem/1 var(--display); text-transform: uppercase; }
.progress button.done { border-color: var(--ok); color: var(--muted); }
.progress button.active { border-color: var(--select); color: var(--text); }
.progress button:disabled { cursor: default; }
.wizard-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; flex-wrap: wrap; }
.summary { position: sticky; top: 84px; }
.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.summary-line:last-child { border: 0; }
.summary-total { display: flex; justify-content: space-between; font: 800 1.6rem/1 var(--display); margin-top: 12px; }
.callout { border-radius: var(--radius); padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); font-size: .92rem; }
.callout-ok { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.07); }
.callout-warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.07); }
.callout-bad { border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.08); }
.callout ul { margin: 6px 0 0; padding-left: 20px; }
.sig-pad { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
/* Teams (js/team.js): logos on the Team tab, entries and entry lists */
.team-logo { border-radius: 10px; object-fit: contain; background: var(--surface-2, rgba(255,255,255,.04)); flex: none; }
.team-logo-blank { display: inline-grid; place-items: center; background: var(--accent); color: #0a0a0c; font: 800 1rem/1 var(--display); letter-spacing: .04em; }
.team-logo-inline { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 4px; }
.team-code { font: 800 1.1rem/1 var(--display); letter-spacing: .1em; color: var(--accent); }
.ratio-display { font: 700 3rem/1 var(--display); color: var(--text); }
.photo-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-preview img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { background: var(--surface-2); font: 700 .75rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
tbody tr:hover { background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { font: 800 1.2rem/1 var(--display); color: var(--muted); }
tr:nth-child(1) .pos { color: #ffd54a; } tr:nth-child(2) .pos { color: var(--muted); } tr:nth-child(3) .pos { color: #e3a26a; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 24px; scrollbar-width: thin; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); padding: 12px 14px 9px; font: 400 1.3rem/1 var(--display); letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--text); border-color: var(--select); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 8px 14px; font: 600 .85rem/1 var(--body); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }

/* Timetable */
.timetable { display: grid; gap: 8px; }
.slot { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c, var(--faint)); border-radius: 8px; padding: 12px 14px; }
.slot time { font: 700 1rem/1.2 var(--display); color: var(--muted); letter-spacing: .03em; }
.slot .slot-title { font-weight: 600; }
@media (max-width: 520px) { .slot { grid-template-columns: 1fr; gap: 4px; } }

/* Product (tickets) */
.product { display: flex; flex-direction: column; gap: 10px; }
.product .price-big { font: 800 2rem/1 var(--display); }
.product .ribbon { position: absolute; top: 14px; right: 14px; }
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { background: var(--stepper-bg); border: 3px solid var(--stepper); color: var(--stepper); width: 34px; height: 34px; border-radius: 50%; font: 400 1.4rem/1 var(--body); cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; }
.qty button:hover { background: var(--stepper); color: var(--stepper-bg); }
.qty button:disabled { opacity: .3; cursor: not-allowed; background: var(--stepper-bg); color: var(--stepper); }
.qty output { min-width: 40px; text-align: center; font: 400 1.25rem/1 var(--body); color: var(--muted); }

/* Cart drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 100; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h3 { margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px 20px; }
.drawer-foot { padding: 16px 20px 20px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.cart-item .ci-name { font-weight: 600; font-size: .95rem; }
.cart-item .ci-detail { font-size: .8rem; color: var(--muted); }
.cart-item .ci-controls { display: flex; align-items: center; gap: 10px; }
.cart-item .qty button { width: 28px; height: 28px; border-width: 2px; font-size: 1.1rem; }
.cart-item .qty output { min-width: 28px; }

/* Rules page */
.doc { display: grid; gap: 32px; }
@media (min-width: 960px) { .doc { grid-template-columns: 240px 1fr; } }
.toc { position: sticky; top: 84px; align-self: start; display: none; }
@media (min-width: 960px) { .toc { display: block; } }
.toc a { display: block; color: var(--muted); padding: 6px 10px; border-left: 2px solid var(--border); font-size: .9rem; }
.toc a:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
.doc article { min-width: 0; }
.doc article section { padding: 0 0 40px; scroll-margin-top: 84px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.flag-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .flag-grid { grid-template-columns: repeat(2, 1fr); } }
.flag { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.flag i { width: 52px; height: 36px; border-radius: 4px; flex: none; border: 1px solid rgba(255,255,255,.2); }

/* FAQ */
details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
summary { cursor: pointer; padding: 16px 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--text); font-size: 1.4rem; line-height: 1; }
details[open] summary::after { content: '–'; }
details > div { padding: 0 18px 18px; color: var(--text-2); }

/* Modal */
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.modal-body { padding: 20px 22px; }

/* Toast */
.toast-host { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--charcoal); color: #fff; padding: 12px 16px; font-weight: 600; box-shadow: var(--shadow); animation: toast-in .2s ease; }
.toast.err { background: var(--bad); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Footer */
.site-footer { padding: 64px 0 32px; background: var(--charcoal); color: #fff; margin-top: 40px; }
.site-footer .muted, .site-footer p { color: rgba(255,255,255,.7); }
.site-footer .logo { margin-bottom: 12px; }
.site-footer input { background: #fff; color: var(--text); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.site-footer h4 { font-size: 1.3rem; color: #fff; letter-spacing: .06em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer ul a { color: #fff; }
.newsletter { display: flex; gap: 8px; margin-top: 12px; }
.newsletter input { flex: 1; min-width: 0; }
.legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,.6); font-size: .85rem; }
.legal a { color: #fff; }

/* Dashboard */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 960px) { .dash { grid-template-columns: 340px 1fr; align-items: start; } }
.dash-side { display: grid; gap: 16px; }
.avatar { width: 64px; height: 64px; background: var(--grad); color: #fff; display: grid; place-items: center; font: 700 2rem/1 var(--display); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); }
.ticket { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); padding: 18px; border-left: 4px solid var(--gold); }
.qr { width: 84px; height: 84px; background: #fff; border-radius: 6px; padding: 6px; }
.license-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.license-track div { padding: 10px 6px; text-align: center; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--faint); }
.license-track div.on { background: rgba(227,174,65,.1); border-color: var(--accent); color: var(--accent); }

/* ---------- Driver portal additions ---------- */
dialog.wide { width: min(900px, calc(100vw - 32px)); }
.modal-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); flex-wrap: wrap; }
.cf-section { margin-bottom: 10px; }
.cf-section > summary { font: 700 1.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.cf-section > summary::after { margin-left: 10px; }
.cf-section .cf-count { margin-left: auto; font: 600 .8rem/1 var(--body); color: var(--muted); text-transform: none; letter-spacing: 0; align-self: center; }
.cf-body { padding: 0 18px 18px; }
.progress-bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--grad); }
.sec-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sec-pills span { font-size: .72rem; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.sec-pills span.ok { border-color: rgba(52,211,153,.5); color: var(--ok); }
/* My Garage car picture, the same size and corner as the Garage tool's card art, with its PI badge. */
.car-art { position: relative; height: 160px; border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: radial-gradient(120% 100% at 50% 20%, rgba(227,174,65,.14), transparent 70%), #0d1117; }
.car-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-pi { position: absolute; top: 10px; right: 10px; display: inline-flex; border-radius: 7px; overflow: hidden; border: 1px solid var(--pi); background: #0a0a0c; font: 800 13px/1 'Barlow Condensed', sans-serif; letter-spacing: .02em; }
.car-pi b { background: var(--pi); color: #0a0a0c; padding: 4px 7px; min-width: 24px; text-align: center; }
.car-pi span { padding: 4px 8px; color: #f2f2f0; }

/* Number picker */
.num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.num { height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 700 .95rem/1 var(--display); cursor: pointer; }
.num:hover { border-color: var(--accent); }
.num.taken { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.num.mine { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.num-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin: 0 4px 0 10px; border: 1px solid var(--border); }
.num-key.taken { background: var(--surface-3); opacity: .5; }
.num-key.mine { background: var(--charcoal); }
.race-number { display: inline-grid; place-items: center; min-width: 64px; height: 52px; padding: 0 10px; background: #fff; color: #1e1e1e; font: 700 2.2rem/1 var(--display); border: 3px solid var(--gold); }
.race-number-sm { min-width: 44px; height: 34px; padding: 0 6px; font-size: 1.4rem; border-width: 2px; }
/* Series numbers inside a garage car card */
.car-numbers { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.car-number { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; min-height: 38px; padding-left: 10px; border-left: 3px solid var(--c, var(--accent)); }
.car-number .tag { color: var(--c, var(--accent)); justify-self: start; }
.car-number:has(> a.btn) { grid-template-columns: 1fr auto auto auto; }

/* Track ready checklist */
.ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ready-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.ready-item .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.ready-item.ok .dot { background: rgba(52,211,153,.18); color: var(--ok); }
.ready-item.pending .dot { background: rgba(251,191,36,.16); color: var(--warn); }
.ready-item.todo .dot { background: rgba(248,113,113,.14); color: var(--bad); }
.ready-item .ri-label { font-weight: 600; }
.ready-item .ri-detail { font-size: .82rem; color: var(--muted); }
@media (max-width: 520px) { .ready-item { grid-template-columns: 28px 1fr; } .ready-item > :last-child { grid-column: 2; justify-self: start; } }
.ready-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; font-weight: 700; margin-bottom: 14px; }
.ready-banner.ok { background: rgba(52,211,153,.12); color: var(--ok); border: 1px solid rgba(52,211,153,.4); }
.ready-banner.todo { background: rgba(251,191,36,.1); color: var(--warn); border: 1px solid rgba(251,191,36,.4); }

/* License */
.status-ok { background: rgba(52,211,153,.15); color: var(--ok); }
.status-bad { background: rgba(248,113,113,.14); color: var(--bad); }
.license-card-canvas { width: 100%; max-width: 520px; border-radius: 16px; box-shadow: var(--shadow); display: block; }
.endorse-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .endorse-grid { grid-template-columns: repeat(3, 1fr); } }

/* Tow rig */
.rig-svg { width: 100%; max-width: 640px; height: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.rig-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.rig-row:last-child { border-bottom: 0; }

/* Demo mode banner */
.demo-banner { background: var(--charcoal); color: #fff; font-size: .9rem; border-bottom: 3px solid var(--select); }
.demo-banner .wrap { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.demo-banner .btn-ghost { color: #fff; border-color: #adadad; }

/* Email confirmation banner */
.verify-banner { background: rgba(251,191,36,.1); border-bottom: 1px solid rgba(251,191,36,.4); color: var(--text); font-size: .9rem; }
.verify-banner .wrap { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }

/* ---------- Driver Studio ---------- */
.studio { display: grid; gap: 24px; }
.studio-stage-col { order: -1; }
@media (min-width: 1000px) {
  .studio { grid-template-columns: minmax(380px, 1fr) minmax(0, 1.25fr); align-items: start; }
  .studio-stage-col { order: 0; position: sticky; top: 84px; }
}
.step-title { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.stage-box { position: relative; aspect-ratio: 4 / 3; max-height: 72vh; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(120% 90% at 50% 30%, #2a2d35 0%, #15161a 55%, #0a0a0c 100%); }
.stage-box canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.stage-box canvas:active { cursor: grabbing; }
.stage-box.picking canvas { cursor: crosshair; }
.stage-box.aligning { max-height: none; }
.stage-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; mix-blend-mode: normal; }
.stage-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(10,10,12,.8); border: 1px solid #555; border-radius: 999px; padding: 8px 16px; font-size: .85rem; color: #ccc; pointer-events: none; white-space: nowrap; }
.stage-status.err { color: var(--bad); border-color: rgba(248,113,113,.4); white-space: normal; text-align: center; max-width: 80%; }
.stage-views { margin-top: 10px; justify-content: center; gap: 6px; }
.stage-views .chip { padding: 6px 10px; font-size: .78rem; }
.stage-pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pin { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--select); color: #1e1e1e; font: 800 .85rem/1 var(--body); box-shadow: 0 0 0 3px rgba(10,10,12,.6); transition: box-shadow .2s; }
.pin.active { box-shadow: 0 0 0 3px rgba(10,10,12,.6), 0 0 0 10px rgba(227,174,65,.35); animation: pin-pulse 1.2s ease-in-out infinite; }
@keyframes pin-pulse { 50% { box-shadow: 0 0 0 3px rgba(10,10,12,.6), 0 0 0 16px rgba(227,174,65,.12); } }
@media (prefers-reduced-motion: reduce) { .pin.active { animation: none; } }
.fit-tools { margin-top: 16px; padding: 16px; }
.dropzone { display: grid; gap: 4px; place-items: center; text-align: center; padding: 28px 16px; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; position: relative; }
.dropzone:hover, .dropzone:focus-within { border-color: var(--accent); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sf-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 14px; }
.sf-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; font-size: .85rem; min-width: 0; }
.sf-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--surface-3); }
.tc-ready { color: var(--accent); font-weight: 700; }
.sf-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.shot-slot { display: grid; gap: 4px; justify-items: center; }
.shot-slot label { display: grid; gap: 6px; width: 100%; cursor: pointer; text-align: center; font-size: .78rem; }
.shot-slot label > img, .shot-icon { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px dashed var(--border); background: var(--surface-2); display: block; }
.shot-slot.filled label > img { border: 1px solid var(--accent); }
.shot-slot label:hover .shot-icon, .shot-slot label:focus-within .shot-icon { border-color: var(--accent); }
.shot-icon { position: relative; }
.shot-icon::after { content: ''; position: absolute; inset: 22% 14%; background: var(--faint); opacity: .5;
  -webkit-mask: var(--car-mask) center / contain no-repeat; mask: var(--car-mask) center / contain no-repeat; transform: var(--car-tf, none); }
.shot-icon[data-icon="left"], .shot-icon[data-icon="right"] { --car-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M4 30c0-6 3-9 10-10l14-8c6-3 12-4 22-4 10 0 16 3 22 9l14 2c6 1 10 4 10 11H4z'/%3E%3Ccircle cx='24' cy='31' r='7'/%3E%3Ccircle cx='76' cy='31' r='7'/%3E%3C/svg%3E"); }
.shot-icon[data-icon="right"] { --car-tf: scaleX(-1); }
.shot-icon[data-icon="front"], .shot-icon[data-icon="rear"] { --car-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M6 34V22l6-4 6-12h24l6 12 6 4v12h-8v-4H14v4z'/%3E%3C/svg%3E"); }
.shot-icon[data-icon$="_left"], .shot-icon[data-icon$="_right"] { --car-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M4 32V22l8-4 12-10h26l12 10 12 3v9H64a7 7 0 0 1-14 0H30a7 7 0 0 1-14 0z'/%3E%3C/svg%3E"); }
.shot-icon[data-icon$="_right"] { --car-tf: scaleX(-1); }
.shot-icon[data-icon="top"] { --car-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80'%3E%3Crect x='6' y='4' width='28' height='72' rx='10'/%3E%3C/svg%3E"); }
.photo-list { display: grid; gap: 8px; }
.photo-row { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.photo-row > img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; }
.photo-row .stack > * + * { margin-top: 6px; }
.mod-row { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 12px 50px; margin-bottom: 10px; }
.mod-row .row { margin-top: 10px; }
.mod-num { position: absolute; left: 12px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font: 800 .8rem/1 var(--body); }
.suit-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .suit-grid { grid-template-columns: 1fr; } }
.headshot-box, .suit-box, .headshot-video { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; object-fit: cover; }
.headshot-video { transform: scaleX(-1); }
.headshot-box img, .suit-box img { width: 100%; height: 100%; object-fit: cover; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
.swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); display: inline-block; }
input[type="color"]:where(:not([data-autoground] *, .autoground-page > div *)) { width: 56px; height: 40px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
input[type="range"]:where(:not([data-autoground] *, .autoground-page > div *)) { accent-color: var(--accent); width: 100%; }

/* ---------- Drivers ---------- */
.driver-card { padding: 0 0 18px; overflow: hidden; }
.driver-card > :not(.driver-card-img) { padding: 0 18px; }
.driver-card h3 { margin-top: 16px; }
.driver-card-img { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--livery, #d19e55) -60%, var(--surface-3) 60%); overflow: hidden; }
.driver-card-img > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.driver-card-num { position: absolute; left: 14px; bottom: 6px; font: 900 3.4rem/1 var(--display); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); font-style: italic; }
.driver-card-tag { position: absolute; right: 12px; top: 12px; }
.driver-card-car { position: absolute; right: 10px; bottom: 10px; width: 42%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); box-shadow: var(--shadow); }

/* ---------- Driver profile (scroll story) ---------- */
.dp { position: relative; --livery: #d19e55; }
.dp-stage { position: sticky; top: 76px; height: 46vh; z-index: 2; background: radial-gradient(120% 90% at 50% 35%, #3a3d44 0%, #1d1e22 60%, #121214 100%); border-bottom: 1px solid var(--border); }
.dp-stage canvas { width: 100%; height: 100%; display: block; }
.dp-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: #aaa; pointer-events: none; }
.dp-content { position: relative; z-index: 1; }
.dp-sec { min-height: 72vh; display: flex; align-items: center; padding: 32px 16px; }
.dp-card { width: 100%; max-width: 560px; margin: 0 auto; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); transition: border-color .3s, transform .3s; }
.dp-sec.active .dp-card { border-color: color-mix(in srgb, var(--livery) 55%, var(--border)); }
.dp-sec.dp-hero { min-height: 90vh; }
.dp-number { font: 900 clamp(5rem, 18vw, 9rem)/.85 var(--display); font-style: italic; color: var(--livery); -webkit-text-stroke: 2px rgba(255,255,255,.15); margin-bottom: 8px; }
.dp-nick { font: 700 1.3rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: -8px; }
.dp-portrait { margin: 20px 0 0; }
.dp-portrait img, .dp-portrait-ph { width: 100%; max-width: 340px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); }
.dp-scroll { margin: 16px 0 0; }
.dp-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.dp-specs > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: grid; gap: 4px; }
.dp-specs b { font: 800 1.4rem/1.1 var(--display); text-transform: uppercase; }
.dp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.dp-gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
.dp-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.dp-gallery button:hover img { transform: scale(1.04); }
.dp-event { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.dp-event:hover { border-color: var(--livery); text-decoration: none; }
.dp-rule { border: 0; border-top: 1px solid var(--border); margin: 24px 0 12px; }
.dp-mod .dp-card h2 { color: var(--text); }
@media (min-width: 960px) {
  .dp { display: grid; grid-template-columns: minmax(400px, 5fr) 7fr; }
  .dp-stage { grid-column: 2; grid-row: 1; height: calc(100vh - 76px); border-bottom: 0; border-left: 1px solid var(--border); }
  .dp-content { grid-column: 1; grid-row: 1; }
  .dp-sec { min-height: 88vh; padding: 48px 32px; }
  .dp-card { background: var(--glass); }
}
.lightbox { max-width: min(1100px, 94vw); padding: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.lightbox::backdrop { background: rgba(0,0,0,.8); }
.lightbox img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: var(--radius); }
.lightbox [data-lb-close] { position: absolute; right: 16px; top: 16px; background: rgba(10,10,12,.7); }
.drivers-promo { display: grid; gap: 16px; align-items: center; background: linear-gradient(120deg, rgba(227,174,65,.08), var(--surface) 55%); }
@media (min-width: 900px) { .drivers-promo { grid-template-columns: 1fr auto; padding: 32px; } }
.dp-card h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); overflow-wrap: anywhere; }
.gen-picks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.gen-pick { position: relative; padding: 0; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.gen-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .55; transition: opacity .15s; }
.gen-pick[aria-pressed="true"] { border-color: var(--accent); }
.gen-pick[aria-pressed="true"] img { opacity: 1; }
.gen-pick span { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--select); color: #1e1e1e; font: 800 .75rem/1 var(--body); }

/* Driver info page */
.fact-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.fact span { display: block; font: 700 .7rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.fact b { font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.info-list { display: grid; grid-template-columns: 1fr; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.info-list dt { font-weight: 700; padding: 14px 16px 0; background: var(--surface); }
.info-list dd { margin: 0; padding: 6px 16px 14px; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--border); }
.info-list dd:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .info-list { grid-template-columns: 200px 1fr; }
  .info-list dt { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .info-list dd { padding: 14px 16px; }
  .info-list dt:nth-last-child(2) { border-bottom: 0; }
}
.when { margin: 0 0 8px; padding-left: 18px; }
.when li { margin-bottom: 2px; }
.entry-card { border-left: 4px solid var(--c, var(--accent)); }
.entry-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.entry-num { font: 900 2.6rem/1 var(--display); color: var(--c, var(--accent)); min-width: 72px; }
.swap { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.swap select { width: auto; flex: 1; min-width: 0; }

/* Entry list */
.entries-tools { margin-bottom: 16px; }
.entries-tools input[type=search] { width: auto; flex: 1 1 220px; min-width: 0; }
.chip b { margin-left: 4px; }
.entry-group { padding: 0 0 32px; }
.entry-group-head { font-size: 1.8rem; border-left: 4px solid var(--c, var(--accent)); padding-left: 12px; margin-bottom: 14px; }
.entry-table .group-row th { background: var(--surface-3); color: var(--text); }
.entry-no { font: 800 1.3rem/1 var(--display); }
.entry-table tr.you td { background: rgba(227,174,65,.07); }
@media (max-width: 640px) { .entry-table .col-class { display: none; } }
.spotter-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.spotter-card { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c, var(--accent)); border-radius: var(--radius); padding: 12px 14px; break-inside: avoid; }
.spotter-card.you { box-shadow: inset 0 0 0 1px var(--accent); }
.spotter-no { font: 900 2.6rem/1 var(--display); min-width: 68px; text-align: center; color: var(--c, var(--accent)); }

/* Print: rules page, entry lists */
@media print {
  .site-header, .site-footer, .subnav, .drawer, .drawer-backdrop, .mobile-nav, .menu-backdrop, .toast-host, .no-print, .toc { display: none !important; }
  :root { --bg: #fff; --surface: #fff; --surface-2: #f3f4f6; --surface-3: #e5e7eb; --border: #d1d5db; --text: #111; --muted: #4b5563; --faint: #6b7280;
    --field: #fff; --text-2: #333; --ghost: #e8e8e8; --bracket: #cbcbcb; --stepper: #262626; --stepper-bg: #fff; --glass: #fff; --hero-wash: rgba(255,255,255,0); color-scheme: light; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .page-hero { background: none; padding: 0 0 12px; }
  section { padding: 12px 0; }
  a { color: inherit; }
  .table-wrap { overflow: visible; }
  th, td { padding: 6px 8px; }
  .entry-group { break-inside: auto; }
  .entry-table tr { break-inside: avoid; }
  .eyebrow, .spotter-no, .spotter-card .tiny { color: #111 !important; }
  .chip[aria-pressed="true"] { background: #111; color: #fff; }
}

/* Tech inspection */
.tech-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 18px; }
.tech-row .entry-num { font-size: 1.8rem; min-width: 64px; }
.insp-list { display: grid; gap: 6px; }
.insp-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: none; }
.seg button { background: var(--surface); border: 0; color: var(--muted); padding: 8px 12px; font: 700 .8rem/1 var(--body); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg [data-mark="pass"][aria-pressed="true"] { background: var(--ok); color: #04130c; }
.seg [data-mark="fail"][aria-pressed="true"] { background: var(--bad); color: #fff; }
.sticker { display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem/1 var(--body); padding: 6px 10px; border-radius: 6px; background: rgba(52,211,153,.15); color: var(--ok); }
.sticker.no { background: rgba(251,191,36,.12); color: var(--warn); }
.sticker.bad { background: rgba(248,113,113,.14); color: var(--bad); }

/* Ticket wallet and gate */
.wallet-ticket { width: 100%; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.wallet-ticket:hover { border-color: var(--faint); }
.qr { width: 96px; height: 96px; border-radius: 6px; flex: none; }
.qr-big .qr { width: min(320px, 80vw); height: auto; margin: 0 auto; }
.ticket-code { font: 700 1rem/1.2 var(--display); letter-spacing: .08em; color: var(--muted); margin-top: 8px; }
.qr-big + .ticket-code { font-size: 1.4rem; color: var(--text); }
.gate-result { border-radius: var(--radius-lg); padding: 20px; border: 2px solid; }
.gate-result.ok { border-color: var(--ok); background: rgba(52,211,153,.08); }
.gate-result.warn { border-color: var(--warn); background: rgba(251,191,36,.08); }
.gate-result.bad { border-color: var(--bad); background: rgba(248,113,113,.1); }
.gate-video { width: 100%; max-height: 320px; border-radius: var(--radius); background: #000; margin-bottom: 12px; object-fit: cover; }
.dq-row td { background: rgba(248,113,113,.06); }

/* Noticeboard and inbox */
.notice-bulletin { border-left: 4px solid var(--orange); }
.notice-alert { border-left: 4px solid var(--hot); }
.inbox-item { padding: 16px 18px; }
.inbox-item.unread { border-left: 4px solid var(--accent); }
/* Profile > Notifications: one row per alert type, with Bell and Email switches */
.alert-prefs-row { display: grid; grid-template-columns: 1fr 56px 56px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.alert-prefs-row > :not(:first-child) { justify-self: center; }
.alert-prefs-head { border-top: 0; padding: 0 0 6px; font: 700 .7rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.alert-prefs-group { margin-top: 14px; padding-bottom: 4px; font: 700 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .15s; pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: .55; }
.inbox-item.unread b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.camp-rules { margin-bottom: 12px; }
.camp-rules ul { margin: 0; padding-left: 20px; }

/* Public car page */
.car-hero-no { font: 700 clamp(4rem, 14vw, 9rem)/.85 var(--display); color: var(--gold); }

/* Social graphics */
.social-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .social-layout { grid-template-columns: 380px minmax(0, 1fr); } }
.social-canvas { width: 100%; max-width: 640px; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); touch-action: none; cursor: grab; background: #0d0e11; }

/* ---------- The Autoground: cart, event tickets and garage ---------- */
.ag-narrow { max-width: 760px; }
/* Cart line items: "2x" in grey, name, price on the right */
.ag-lines { display: grid; gap: 22px; margin-bottom: 26px; }
.ag-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: center; }
.ag-line-qty { font: 400 1.25rem/1 var(--body); color: var(--faint); }
.ag-line-name { font: 700 1.5rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.ag-line-price { font: 700 1.5rem/1 var(--display); text-align: right; min-width: 70px; }
.ag-line .link-btn { grid-column: 2; justify-self: start; color: var(--faint); }
@media (max-width: 560px) { .ag-line { grid-template-columns: 36px minmax(0, 1fr) auto; } .ag-line .qty { grid-column: 2; grid-row: 2; } .ag-line .link-btn { grid-row: 3; } }
.ag-total { display: flex; justify-content: space-between; border-top: 1px solid var(--faint); padding-top: 26px; }
.ag-total h4 { font-size: 1.9rem; margin: 0; }
.ag-block { margin: 0 0 40px; }
.ag-block h4 { margin-bottom: 14px; }

/* Event cover, WHEN / WHERE and bracketed ticket boxes */
.ag-cover { position: relative; min-height: 240px; display: flex; align-items: flex-end; color: #fff; padding: 32px 0; margin-bottom: 40px;
  background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.65)), #2b2b2b url('hero-bg.jpg') center / cover; }
.ag-cover h2 { font-size: clamp(2.8rem, 7vw, 4.6rem); margin: 0; }
.ag-cover .eyebrow { color: var(--gold); }
.ag-when-where { display: grid; gap: 24px; margin-bottom: 28px; }
@media (min-width: 720px) { .ag-when-where { grid-template-columns: 1fr 1fr; } }
.ag-ww { display: flex; gap: 16px; align-items: flex-start; }
.ag-ww b { font: 700 4rem/.8 var(--display); color: var(--ghost); }
.ag-ww div { color: var(--faint); font-size: .9rem; display: grid; gap: 6px; padding-top: 2px; }
/* Ticket picker: one card per ticket type with the stepper on the right; a picked ticket gets a gold edge. */
.ag-ticket-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 12px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; transition: border-color .15s, background .15s; }
.ag-ticket-row.is-picked { border-color: var(--accent); background: linear-gradient(90deg, rgba(227,174,65,.08), transparent 70%), var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.ag-ticket-row.is-closed { opacity: .6; }
/* Ticket cards sit two to a row on wide screens, one per row on narrower ones. */
.ag-ticket-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
@media (max-width: 900px) { .ag-ticket-list { grid-template-columns: 1fr; } }
.ag-ticket { min-width: 0; }
.ag-ticket-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.ag-ticket-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.ag-ticket-head h4 { margin: 0; font-size: 1.35rem; }
.ag-ticket-price { font: 700 1.35rem/1 var(--display); color: var(--accent); white-space: nowrap; }
.ag-ticket p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.ag-qty .qty button, .qty-sm button { width: 32px; height: 32px; border-width: 2px; font-size: 1.2rem; }
.ag-qty .qty output { min-width: 32px; color: var(--text); }
.ag-closed { font: 700 1.2rem/1 var(--display); color: var(--faint); }
.ag-group-title { margin: 40px 0 20px; }
.ag-sticky-cta { position: sticky; bottom: 0; z-index: 5; background: var(--glass); backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding: 12px 0; margin-top: 32px; }
.ag-sticky-cta .wrap { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ag-sticky-cta.is-active { border-top-color: var(--accent); }
.ag-pick-summary { display: flex; align-items: baseline; gap: 12px; margin-right: auto; }
.ag-pick-summary b { font: 700 1.8rem/1 var(--display); }
@media (max-width: 560px) { .ag-sticky-cta [data-add-picked] { display: none; } .ag-sticky-cta [data-checkout-picked] { flex: none; } }

/* ---------- Checkout (cart.html): details on the left, a sticky order summary on the right ---------- */
.co-page { padding: 32px 0 64px; }
.co-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.co-top h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 3.4rem); }
.co-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; font: 400 1rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.co-steps li { display: flex; align-items: center; gap: 8px; }
.co-steps li + li::before { content: ''; width: 24px; height: 1px; background: var(--border); margin-right: 2px; }
.co-steps span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); font: 600 .75rem/1 var(--body); letter-spacing: 0; }
.co-steps .on { color: var(--text); }
.co-steps .on span { background: var(--accent); border-color: var(--accent); color: #141414; }
.co-steps .done span { border-color: var(--accent); color: var(--accent); }
.co { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .co { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; } .co-summary { position: sticky; top: 96px; } .co-mobile-total { display: none !important; } }
.co-main { display: grid; gap: 16px; min-width: 0; }
.co-back { color: var(--muted); font-size: .9rem; justify-self: start; }
.co-mobile-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.co-mobile-total b { font: 700 1.5rem/1 var(--display); }
.co-card, .co-summary { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 22px; }
@media (min-width: 720px) { .co-card { padding: 26px 28px; } }
.co-h { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; margin: 0 0 18px; }
.co-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font: 600 .85rem/1 var(--body); color: var(--accent); flex: none; }
.co-fields { display: grid; gap: 14px; }
@media (min-width: 600px) { .co-fields { grid-template-columns: 1fr 1fr; } .co-wide { grid-column: 1 / -1; } }
.co-card .field label { font-weight: 500; color: var(--text-2); }
.co-signed { display: flex; align-items: center; gap: 14px; }
.co-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font: 700 1.1rem/1 var(--display); letter-spacing: .04em; flex: none; }
.co-terms { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.co-terms b { color: var(--text-2); }
.co-agree { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; padding: 14px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); transition: border-color .15s; }
.co-agree:hover { border-color: var(--faint); }
.co-agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.co-check { width: 22px; height: 22px; border: 2px solid var(--faint); border-radius: 4px; display: grid; place-items: center; flex: none; transition: background .15s, border-color .15s; }
.co-check::after { content: ''; width: 6px; height: 11px; border: solid #141414; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.co-agree input:checked + .co-check { background: var(--accent); border-color: var(--accent); }
.co-agree input:checked + .co-check::after { opacity: 1; }
.co-agree:has(input:checked) { border-color: var(--accent); }
.co-agree input:focus-visible + .co-check { outline: 2px solid var(--select); outline-offset: 2px; }
.co-agree.co-nudge { border-color: var(--bad); animation: co-shake .3s; }
@keyframes co-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.co-summary-head { display: flex; justify-content: space-between; align-items: baseline; }
.co-summary-head .co-h { margin-bottom: 8px; }
.co-lines { display: grid; }
.co-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--surface-3); }
.co-line-name { font: 700 1.15rem/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.co-line-sub { font-size: .8rem; color: var(--faint); margin-top: 2px; }
.co-line-price { font: 700 1.15rem/1.1 var(--display); text-align: right; }
.co-line-ctl { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.qty-sm button { width: 28px; height: 28px; font-size: 1.05rem; }
.qty-sm output { min-width: 30px; font-size: 1rem; color: var(--text); }
.co-remove { background: none; border: 0; padding: 0; color: var(--faint); font: inherit; font-size: .8rem; cursor: pointer; }
.co-remove:hover { color: var(--bad); }
.co-promo { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--surface-3); font-size: .8rem; color: var(--faint); }
.co-sum-row { display: flex; justify-content: space-between; padding: 14px 0 0; font-size: .9rem; color: var(--muted); }
.co-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 20px; }
.co-sum-total span { font: 700 1.4rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.co-sum-total b { font: 700 2.2rem/1 var(--display); }
.co-pay { width: 100%; }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: .8rem; color: var(--faint); }
.co-empty { text-align: center; padding: 56px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; max-width: 560px; margin: 0 auto; }
.co-empty p { max-width: 380px; margin: 0 auto 22px; }

/* ---------- Driver license hard card (My Garage side panel) ----------
   A physical card, so it keeps its own dark finish whatever the page colours. */
.hard-card { --hc-ink: #f3f1ec; --hc-dim: #a7a29a; --hc-gold: #e3ae41; position: relative; margin: 0; min-width: 0; display: grid; grid-template-rows: auto 1fr auto;
  border-radius: 14px; overflow: hidden; color: var(--hc-ink); isolation: isolate;
  background: radial-gradient(120% 80% at 100% 0%, rgba(241,57,97,.22), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(236,190,76,.16), transparent 60%), linear-gradient(160deg, #26262a, #121214 70%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 0 0 1px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.45); }
.hard-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .07;
  background: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 9px); }
.hard-card::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.09) 45%, rgba(236,190,76,.08) 50%, transparent 60%); }
.hc-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; background: var(--grad); color: #1e1e1e; }
.hc-logo { flex: none; width: 66px; height: 20px; background: url('wtcc-wordmark.png') left center / contain no-repeat; filter: brightness(0); }
.hc-title { display: grid; line-height: 1.05; min-width: 0; }
.hc-title span { font: 700 .62rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.hc-title b { font: 400 1.15rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.hc-year { margin-left: auto; font: 400 2.1rem/.8 var(--display); letter-spacing: .02em; }
.hc-body { display: grid; grid-template-columns: 31% 1fr; gap: 14px; padding: 14px 16px 8px; min-height: 0; }
.hc-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--grad); display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.hc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-photo span { font: 400 2.4rem/1 var(--display); color: #fff; }
.hc-info { min-width: 0; }
.hc-name { font: 400 1.75rem/.95 var(--display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.hc-handle { margin-top: 3px; font-weight: 700; font-size: .85rem; color: var(--hc-gold); overflow-wrap: anywhere; }
.hc-loc { font-size: .75rem; color: var(--hc-dim); margin-top: 2px; }
.hc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 10px; }
.hc-field { display: grid; min-width: 0; }
.hc-field span { font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-dim); }
.hc-field b { font-size: .82rem; overflow-wrap: anywhere; }
.hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 16px 12px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); }
.hc-class { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.hc-status, .hc-end { padding: 3px 8px; border-radius: 3px; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hc-status { border: 1px solid currentColor; }
.hc-ok { color: #4ade80; } .hc-pending { color: #fbbf24; } .hc-bad { color: #f87171; } .hc-none { color: var(--hc-dim); }
.hc-end { background: var(--hc-gold); color: #1e1e1e; }
.hc-actions { justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 420px) { .hc-name { font-size: 1.45rem; } .hc-year { font-size: 1.7rem; } }

/* ---------- Event page (laid out like My Garage) ---------- */
@media (min-width: 960px) { .dash-event { grid-template-columns: 340px minmax(0, 1fr); } }
.dash-event > div { min-width: 0; }
/* The license hard card's look, for an event. The date block sits where the driver photo goes.
   Base .hard-card rules are repeated here so the card stands alone before the license card ships. */
.ev-card { --hc-ink: #f3f1ec; --hc-dim: #a7a29a; --hc-gold: #e3ae41; position: relative; margin: 0; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  border-radius: 14px; overflow: hidden; color: var(--hc-ink); isolation: isolate;
  background: radial-gradient(120% 80% at 100% 0%, rgba(241,57,97,.22), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(236,190,76,.16), transparent 60%), linear-gradient(160deg, #26262a, #121214 70%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 0 0 1px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.45); }
.ev-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .07; background: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 9px); }
.ev-card .hc-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; background: var(--grad); color: #1e1e1e; }
.ev-card .hc-logo { flex: none; width: 66px; height: 20px; background: url('wtcc-wordmark.png') left center / contain no-repeat; filter: brightness(0); }
.ev-card .hc-title { display: grid; line-height: 1.05; min-width: 0; }
.ev-card .hc-title span { font: 700 .62rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.ev-card .hc-title b { font: 400 1.15rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ev-card .hc-year { margin-left: auto; font: 400 2.1rem/.8 var(--display); letter-spacing: .02em; }
.ev-card .hc-body { display: grid; grid-template-columns: 31% minmax(0, 1fr); gap: 14px; padding: 14px 16px 8px; }
.ev-card .hc-info { min-width: 0; }
.ev-card .hc-name { font: 400 1.75rem/.95 var(--display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.ev-card .hc-handle { margin-top: 3px; font-weight: 700; font-size: .85rem; color: var(--hc-gold); }
.ev-card .hc-loc { font-size: .75rem; color: var(--hc-dim); margin-top: 2px; }
.ev-card .hc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 10px; }
.ev-card .hc-field { display: grid; min-width: 0; }
.ev-card .hc-field span { font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-dim); }
.ev-card .hc-field b { font-size: .82rem; overflow-wrap: anywhere; }
.ev-card .hc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 16px 12px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); }
.ev-card .hc-class { display: flex; gap: 5px; flex-wrap: wrap; }
.ev-card .hc-status, .ev-card .hc-end { padding: 3px 8px; border-radius: 3px; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ev-card .hc-status { border: 1px solid currentColor; }
.ev-card .hc-ok { color: #4ade80; } .ev-card .hc-pending { color: #fbbf24; } .ev-card .hc-bad { color: #f87171; } .ev-card .hc-none { color: var(--hc-dim); }
.ev-date { aspect-ratio: 4 / 5; align-self: start; border-radius: 6px; background: var(--grad); display: grid; place-content: center; text-align: center; gap: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.14); color: #1e1e1e; }
.ev-date small { font: 700 .8rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.ev-date span { font: 400 2.2rem/1 var(--display); }
.ev-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 24px; }
.ev-tile { display: grid; gap: 4px; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.ev-tile:hover { border-color: var(--accent); }
.ev-tile b { font: 400 1.35rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ev-class { border-top: 3px solid var(--c); }
.ev-subs { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.ev-subs li { display: grid; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--c); background: rgba(255,255,255,.03); }
.ev-tickets { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ev-guide-sec { padding-bottom: 28px; scroll-margin-top: 84px; }
@media (max-width: 420px) { .ev-card .hc-name { font-size: 1.45rem; } .ev-card .hc-year { font-size: 1.7rem; } }

/* ---------- Event page: Roles tab and QR codes ---------- */
.ev-entry-qr { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ev-entry-qr .qr { width: 112px; height: 112px; flex: none; border-radius: 4px; }
.ev-entry-qr .qr-locked { display: grid; place-items: center; border: 2px dashed var(--border); color: var(--faint); font-weight: 700; letter-spacing: .1em; }
.ev-scan { border-left: 4px solid var(--accent); }
.ev-invite { border: 1px solid var(--accent); margin-bottom: 16px; }
.ev-role-pill { border-color: var(--accent); color: var(--text); }
.ev-role-sec { margin: 24px 0; scroll-margin-top: 84px; }
.ev-role-sec h3 { margin-top: 0; }
.ev-desk { display: grid; gap: 6px; max-height: 560px; overflow-y: auto; }
.ev-desk-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: var(--radius); }
.ev-desk-no { font: 400 1.6rem/1 var(--display); min-width: 48px; color: var(--c); }
/* Car show tab (js/event-show.js) */
.show-rules { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.show-rules .fact b { font-size: 1.4rem; }
.show-score { flex: none; width: 64px; height: 64px; display: grid; place-content: center; text-align: center; border: 2px solid #7059d5; border-radius: var(--radius); background: var(--surface); }
.show-score b { font: 800 1.7rem/1 var(--display); }
.show-score span { line-height: 1.2; }
.show-app { display: flex; gap: 16px; align-items: flex-start; }
.show-parts { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 4px; }
.show-parts li { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; font-size: .88rem; padding: 4px 0; border-bottom: 1px solid var(--border); }
.show-parts li b { white-space: nowrap; }
.show-cars, .show-queue { display: grid; gap: 8px; }
.show-car, .show-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid #7059d5; border-radius: var(--radius); }
.show-car-score { font: 800 1.6rem/1 var(--display); min-width: 40px; color: #a594f0; }
.show-why summary { cursor: pointer; margin-top: 4px; color: var(--muted); }
.show-judge { display: flex; gap: 6px; align-items: center; }
.show-judge input { width: 72px; }
.show-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.show-settings { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.show-settings .span-all { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .show-rules, .show-settings { grid-template-columns: 1fr; }
  .show-row .show-judge, .show-row .show-acts { width: 100%; }
}
.ev-tech-items { display: grid; gap: 4px; }
.ev-tech-item { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.ev-tech-item label { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.ev-roster { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ev-roster ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: .88rem; }
.ev-roster li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ev-invite-form { margin-top: 14px; }
.ev-role-help { margin-top: 24px; }
.dash-event .fact b { font-size: 1.3rem; overflow-wrap: anywhere; }

/* Event page Cost split tab (js/event-budget.js) */
.split-curve { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.split-curve .split-now { border-color: var(--accent); }
.split-curve .split-now b { color: var(--accent); }
.split-mine .split-amount { font: 800 2.6rem/1 var(--display); margin: 10px 0 6px; }
.split-lines { display: grid; gap: 8px; margin-bottom: 10px; }
.split-line { display: grid; gap: 8px; grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr) minmax(0, 2fr) auto; align-items: center; }
.split-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 16px; }
@media (max-width: 640px) { .split-line { grid-template-columns: minmax(0, 1fr) 100px; } .split-line [name=note] { grid-column: 1; } }

/* Roles on the license hard card: site role and accepted event roles. */
.hc-roles { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 0 16px 10px; }
.hc-roles > span { width: 100%; font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hc-dim); }
.hc-role { display: inline-grid; padding: 4px 8px; border-radius: 3px; border: 1px solid rgba(227,174,65,.55); background: rgba(227,174,65,.1); font-size: .7rem; line-height: 1.15; color: var(--hc-ink); }
.hc-team { grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; }
.hc-team img { grid-row: span 2; width: 18px; height: 18px; border-radius: 3px; object-fit: contain; }
.hc-role small { font-size: .62rem; font-weight: 400; color: var(--hc-dim); }
.hc-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 5px 3px; font-size: .5rem; letter-spacing: .06em; text-align: right; color: rgba(255,255,255,.85); background: linear-gradient(transparent, rgba(0,0,0,.55)); }

/* Race stewards' incidents (Roles tab) and their decisions on a driver's entry */
.ev-inc-new { margin-bottom: 12px; }
.ev-inc-new summary { cursor: pointer; }
.ev-inc-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.ev-inc-form .ev-inc-wide { grid-column: 1 / -1; }
.ev-inc-list { display: grid; gap: 10px; }
.ev-inc { padding: 14px 16px; }
.ev-inc-open { border-left: 3px solid var(--accent); }
.ev-inc details { margin-top: 10px; }
.ev-inc summary { cursor: pointer; }
.ev-inc-decide { margin-top: 8px; }
.ev-decisions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.ev-decision { margin-top: 10px; }

/* Event schedule: organizers' editor and the official schedule file (js/event-schedule.js) */
.ev-sched-tools { margin-bottom: 14px; }
.ev-sched-file { margin-bottom: 18px; }
.ev-sched-file img { display: block; width: 100%; margin-top: 12px; border-radius: 4px; }
.ev-sched-edit { display: grid; gap: 14px; }
.ev-sched-day { border: 1px solid var(--border); margin: 0; display: grid; gap: 10px; }
.ev-sched-rows { display: grid; gap: 6px; }
.ev-sched-row { display: grid; grid-template-columns: 110px 110px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
@media (max-width: 760px) {
  .ev-sched-row { grid-template-columns: 1fr 1fr auto; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .ev-sched-row > :nth-child(3), .ev-sched-row > :nth-child(4), .ev-sched-row > :nth-child(5) { grid-column: 1 / -1; }
}

/* Motorsport Director's license review (js/license-review.js); rows reuse the car show queue's styles */
.lic-row { border-left-color: var(--accent); align-items: flex-start; }
.lic-decide { display: grid; gap: 6px; min-width: 240px; }
@media (max-width: 640px) { .lic-decide { width: 100%; } }

/* Header My Garage button: the driver's photo with their initials over it, or just the initials. */
.acct-initials { font: 700 1.05rem/1 var(--display); }
[data-garage-link]:has(.acct-pic) { padding: 0; overflow: hidden; }
.acct-pic { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.acct-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.acct-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.acct-pic b { position: relative; z-index: 1; font: 700 1.05rem/1 var(--display); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); letter-spacing: .02em; }

/* Home page: the big "Try the demo" button under the hero buttons, as wide as they are together, with the
   countdown card on its own row below. The glow pulses inside the border so nothing pokes past the buttons' edges. */
.hero-actions { display: flex; flex-direction: column; gap: 12px; width: max-content; max-width: 100%; }
.demo-cta { display: flex; align-items: center; gap: 16px; padding: 12px 28px 12px 14px; color: #fff; background: rgba(0,0,0,.6); border: 2px solid var(--gold); transition: background .15s, transform .15s; animation: demo-cta-glow 2.4s ease-in-out infinite; }
.demo-cta:hover { text-decoration: none; background: rgba(209,158,85,.16); transform: translateY(-1px); }
.demo-cta b { display: block; font: 400 2rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.demo-cta small { display: block; margin-top: 4px; font-size: .9rem; color: #e4e4e4; }
.demo-cta-play { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--grad); display: grid; place-items: center; }
.demo-cta-play::after { content: ''; margin-left: 5px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
@keyframes demo-cta-glow { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(209,158,85,0); } 50% { box-shadow: inset 0 0 22px 0 rgba(209,158,85,.35); } }
@media (prefers-reduced-motion: reduce) { .demo-cta { animation: none; } }
@media (max-width: 560px) { .hero-actions { width: auto; } .demo-cta b { font-size: 1.7rem; } }

/* Demo tour (js/tour.js): the page dims except for one spot, with a pop-up beside it. */
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour[hidden] { display: none; }
.tour-block { position: absolute; inset: 0; }
.tour.tour-dim .tour-block { background: rgba(0,0,0,.8); }
.tour-spot { position: fixed; border: 2px solid var(--gold); box-shadow: 0 0 0 200vmax rgba(0,0,0,.8), 0 0 24px rgba(209,158,85,.6); pointer-events: none; transition: left .25s, top .25s, width .25s, height .25s; }
.tour-pop { position: fixed; width: min(360px, calc(100vw - 32px)); background: var(--surface); color: var(--text); border: 1px solid var(--gold); border-top: 4px solid var(--gold); padding: 18px 20px 14px; box-shadow: var(--shadow); transition: left .25s, top .25s; }
.tour-pop h3 { margin: 4px 0 8px; }
.tour-pop p { margin: 0 0 14px; color: var(--muted); }
.tour-count { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.tour-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-actions [hidden] { display: none; }
.tour-pill { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; background: var(--charcoal); color: #fff; border: 1px solid var(--gold); box-shadow: var(--shadow); font-size: .9rem; max-width: calc(100vw - 32px); }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-pop { transition: none; } }
.need-account { width: min(540px, calc(100vw - 32px)); }
.demo-banner .wrap > span:first-child { flex: 1 1 420px; }
.demo-banner .wrap > span:last-child { flex: none; }