/* DriftBuddy marketing site — shared by every page.
   A live broadcast of a venue night: condensed headlines, a signal-red bar, LIVE bugs and tickers carry
   the brand; motorsport timing carries the data — every station state wears a sector colour:
   green playing, yellow ending, purple booked, red time up. One dark look, on purpose. */
/* Stand-ins for the headline face while it loads, scaled to its width (Big Shoulders Display 900 sets
   "RUN THE ARENA. OWN THE NIGHT." 1200 px wide at 100 px; Impact 1249, Arial Narrow 1400), so a headline
   wraps the same before and after the font arrives: no layout shift (Lighthouse CLS). */
@font-face { font-family: "BSD fb impact"; src: local("Impact"); size-adjust: 96%; }
@font-face { font-family: "BSD fb narrow"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Narrow"); font-weight: 700 900; size-adjust: 86%; }
:root {
  --bk: #0a0a0b; --bk1: #0f0f12; --bk2: #151519; --bk3: #1d1d22; --bk4: #26262c;
  --line: #2a2a31; --edge: rgba(255,255,255,.08); --hi: rgba(255,255,255,.06);
  --bone: #f3efe7; --steel: #a9aeb7; --mute: #747982;
  --sig: #fc1801;                                   /* the logo's red */
  --logo-w: #ffffff;
  --grn: #22d36a; --yel: #ffd400; --pur: #b04cff;
  --f-head: "Big Shoulders Display", "BSD fb impact", "BSD fb narrow", Impact, sans-serif;
  --f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --g: clamp(16px, 4vw, 56px);
  --g: round(clamp(16px, 4vw, 56px), 1px);   /* whole pixels, so the logo and text never sit between pixels */
  --max: 1320px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bk); }
body { margin: 0; background: var(--bk); color: var(--bone); font: 400 17px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--sig); color: #fff; }
:focus-visible { outline: 2px solid var(--yel); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--g); }
/* wide screens (San 2026-10-03: at 2000px the hero sat in a narrow centred column with a black band beside it and the
   headline broke onto four lines): the page grows with the window, so the copy keeps its two-line headline */
@media (min-width: 1600px) { :root { --max: 1560px; } }
@media (min-width: 2200px) { :root { --max: 1760px; } }
h1, h2, h3 { font-family: var(--f-head); font-weight: 900; line-height: .88; text-transform: uppercase; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(52px, 8.4vw, 132px); }
h3 { font-size: clamp(30px, 3vw, 44px); line-height: .95; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--sig); }
p { margin: 0; }
.lead { color: var(--steel); font-size: clamp(17px, 1.4vw, 20px); max-width: 52ch; }
.data { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
section { position: relative; }
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; margin-bottom: -.04em; }
.word > span { display: inline-block; }

/* Surfaces: a lifted plate with a lit top edge, so panels read off the black instead of melting into it */
.surface { background: linear-gradient(180deg, var(--bk3), var(--bk2)); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--edge), 0 40px 80px -40px rgba(0,0,0,.9); }

/* Broadcast viewfinder: four corner marks around a panel, like a camera frame on air */
.frame { position: relative; }
.frame::after { content: ""; position: absolute; inset: -10px; pointer-events: none; z-index: 3; --k: var(--fc, var(--sig));
  background:
    linear-gradient(var(--k), var(--k)) left top / 26px 2px no-repeat, linear-gradient(var(--k), var(--k)) left top / 2px 26px no-repeat,
    linear-gradient(var(--k), var(--k)) right top / 26px 2px no-repeat, linear-gradient(var(--k), var(--k)) right top / 2px 26px no-repeat,
    linear-gradient(var(--k), var(--k)) left bottom / 26px 2px no-repeat, linear-gradient(var(--k), var(--k)) left bottom / 2px 26px no-repeat,
    linear-gradient(var(--k), var(--k)) right bottom / 26px 2px no-repeat, linear-gradient(var(--k), var(--k)) right bottom / 2px 26px no-repeat; }

/* Studio floor: a faint grid with coloured stage light behind a section */
.studio { background-color: var(--bk1);
  background-image: radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--sig) 10%, transparent), transparent 70%), radial-gradient(50% 40% at 0% 100%, color-mix(in srgb, var(--pur) 8%, transparent), transparent 70%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px; }
.studio::before, .studio::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }
.studio::before { top: 0; } .studio::after { bottom: 0; }

/* Broadcast tag: a red skewed plate with an unskewed label */
.tag { display: inline-flex; align-items: center; gap: 12px; font: 800 13px/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.tag b { position: relative; isolation: isolate; display: inline-block; padding: 7px 13px; color: #fff; letter-spacing: .16em; }
.tag b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tb, var(--sig)); transform: skewX(-12deg); }
.tag b > span { display: inline-block; }
.tag.live b > span::before { content: "●"; margin-right: 8px; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: .2; } }

/* Buttons: skewed plates with a chevron */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 32px; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 800 14px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: #fff; transition: color .25s; }
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; transform: skewX(-12deg); }
.btn::before { z-index: -2; background: var(--sig); }
.btn::after { z-index: -1; background: var(--bone); transform: skewX(-12deg) scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.btn:hover::after { transform: skewX(-12deg) scaleX(1); }
.btn > span { display: inline-flex; align-items: center; gap: 12px; }
.btn > span::after { content: "›"; font: 700 22px/0 var(--f-text); transition: transform .25s; }
.btn:hover { color: var(--bk); }
.btn:hover > span::after { transform: translateX(4px); }
.btn.alt { color: var(--bone); }
.btn.alt::before { background: color-mix(in srgb, var(--bk) 35%, transparent); box-shadow: inset 0 0 0 2px var(--bone); }
.btn.sm { height: 44px; padding: 0 20px; font-size: 12px; }
.btn.sm > span::after { font-size: 18px; }
.mini { position: relative; isolation: isolate; display: inline-grid; place-items: center; height: 34px; padding: 0 15px; border: 0; background: none; cursor: pointer; font: 800 11px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.mini::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bk3); box-shadow: inset 0 0 0 1px var(--line); transform: skewX(-12deg); }
.mini > span { display: inline-block; }
.mini.pri { color: var(--bk); } .mini.pri::before { background: var(--ic, var(--sig)); box-shadow: none; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; font: 700 11px/1 var(--f-data); letter-spacing: .06em; background: color-mix(in oklab, var(--c, var(--sig)) 18%, transparent); color: var(--c, var(--sig)); white-space: nowrap; }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); background: linear-gradient(180deg, color-mix(in srgb, var(--bk) 78%, transparent), color-mix(in srgb, var(--bk) 0%, transparent)); transition: background .3s, box-shadow .3s; }
.nav.solid { background: color-mix(in srgb, var(--bk) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
/* The brand mark, inline so its bars can move: red bars, white strokes */
.mk { display: block; overflow: visible; }
.mk .r { fill: var(--sig); } .mk .w { fill: var(--logo-w); }
.mk.mono .r, .mk.mono .w { fill: currentColor; }
.mk polygon, .mk path { transform-box: fill-box; }
.logo { display: flex; align-items: flex-start; gap: 14px; height: 38px; text-decoration: none; }
.logo .nav-mk { width: 79px; height: 38px; flex: none; }
.logo .mk .r { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.logo:hover .mk .r1 { transform: translateX(10%); } .logo:hover .mk .r2 { transform: translateX(7%); transition-delay: .04s; } .logo:hover .mk .r3 { transform: translateX(5%); transition-delay: .08s; }
/* Wordmark over its tagline: "ARENA MANAGEMENT" spread letter by letter to the wordmark's exact width */
.lt { display: grid; width: max-content; row-gap: 6px; padding-top: 2px; }
.lt .wm { display: block; width: 183px; height: 19px; }
.lt .tl { display: flex; justify-content: space-between; height: 9px; font: 600 9px/9px var(--f-text); font-stretch: 125%; text-transform: uppercase; color: #c3c7cf; transition: color .3s; }
.lt .tl i { font-style: normal; } .lt .tl .sp { width: 4px; }
.logo:hover .tl { color: var(--bone); }
.lt.lg { row-gap: 9px; padding-top: 0; } .lt.lg .wm { width: 251px; height: 26px; } .lt.lg .tl { height: 12px; font-size: 12px; line-height: 12px; } .lt.lg .tl .sp { width: 6px; }
.lt.xl { row-gap: 14px; } .lt.xl .wm { width: 386px; height: 40px; } .lt.xl .tl { height: 18px; font-size: 18px; line-height: 18px; } .lt.xl .tl .sp { width: 10px; }
.mk.enter ~ .lt .tl { animation: tagIn .8s cubic-bezier(.7,0,.2,1) both .5s; }
.mk.enter ~ .lt .wm { animation: tagIn .6s cubic-bezier(.7,0,.2,1) both .3s; }
@keyframes tagIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* On load the mark builds itself: bars race in from the left, the strokes wipe on */
.mk.enter .r { animation: barIn .7s cubic-bezier(.2,.8,.2,1) both; }
.mk.enter .r1 { animation-delay: .1s; } .mk.enter .r2 { animation-delay: .2s; } .mk.enter .r3 { animation-delay: .3s; }
.mk.enter .w { animation: wipeIn .6s cubic-bezier(.7,0,.2,1) both .05s; }
@keyframes barIn { from { transform: translateX(-140%); opacity: 0; } }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.nav nav { display: flex; gap: 30px; margin-left: auto; }
.nav nav a { position: relative; text-decoration: none; font: 700 13px/14px var(--f-text); letter-spacing: .15em; text-transform: uppercase; color: #cfd2d8; transition: color .2s; padding-block: 8px; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--bone); }
.nav nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sig); transform: skewX(-12deg); }
.nav-signin { display: none; white-space: nowrap; text-decoration: none; font: 700 13px/14px var(--f-text); letter-spacing: .15em; text-transform: uppercase; color: #cfd2d8; padding-block: 8px; }
@media (max-width: 980px) { .nav nav { display: none; } .nav-signin { display: inline-block; margin-left: auto; } }
@media (max-width: 420px) { .nav .wrap { gap: 12px; } .nav-signin { font-size: 12px; letter-spacing: .1em; } }
@media (max-width: 520px) { .nav .btn { display: none; } .tag { flex-wrap: wrap; row-gap: 8px; } }

/* ── Sections ────────────────────────────────────────────────────────── */
.sec { padding-block: clamp(96px, 12vw, 170px); }
.head { display: grid; gap: 22px; }
.head .lead { margin-top: 4px; }
.split-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px 60px; align-items: end; }
@media (max-width: 900px) { .split-head { grid-template-columns: minmax(0, 1fr); } }

/* Inner page hero (features, legal) */
.phero { position: relative; overflow: hidden; isolation: isolate; padding-block: 170px 90px; }
.phero .bg { position: absolute; inset: 0; z-index: -2; }
.phero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bk) 25%, color-mix(in srgb, var(--bk) 60%, transparent) 60%, color-mix(in srgb, var(--bk) 25%, transparent)), linear-gradient(0deg, var(--bk), transparent 50%); }
.phero h1 { font-size: clamp(60px, 9vw, 150px); margin-top: 24px; }
.phero .lead { margin-top: 24px; color: #cdd0d6; }
.phero.plain { padding-block: 160px 56px; }
.phero.plain::before { display: none; }
.phero.plain h1 { font-size: clamp(54px, 7vw, 110px); }

/* Legal pages */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-block: 40px 140px; }
.legal .toc { position: sticky; top: 100px; align-self: start; display: grid; gap: 2px; font: 600 14px/1.3 var(--f-text); }
.legal .toc a { display: block; padding: 9px 12px; text-decoration: none; color: var(--steel); box-shadow: inset 2px 0 0 var(--line); }
.legal .toc a:hover { color: var(--bone); box-shadow: inset 2px 0 0 var(--sig); }
.legal article { max-width: 72ch; min-width: 0; }
.legal article h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1; margin: 56px 0 16px; scroll-margin-top: 100px; }
.legal article h2:first-of-type { margin-top: 0; }
.legal article h2 b { color: var(--sig); font-family: var(--f-data); font-size: .5em; vertical-align: middle; margin-right: 12px; }
.legal article p, .legal article li { color: #c9ccd2; }
.legal article p + p { margin-top: 14px; }
.legal article ul { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.legal article li::marker { color: var(--sig); }
.legal article strong { color: var(--bone); }
.legal .tbd { color: var(--yel); font-family: var(--f-data); font-size: .92em; }
.draft { display: flex; gap: 14px; align-items: start; padding: 16px 18px; margin-bottom: 40px; background: color-mix(in srgb, var(--yel) 8%, transparent); box-shadow: inset 3px 0 0 var(--yel); color: var(--steel); font-size: 15px; }
.draft b { color: var(--yel); }
.updated { margin-top: 18px; font: 500 13px/1 var(--f-data); color: var(--mute); }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal .toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Footer ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); background: var(--bk1); color: var(--mute); font-size: 15px; overflow: hidden; }
.flock { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.flock .mk { height: 52px; width: auto; aspect-ratio: 1471 / 720; flex: none; }
@media (max-width: 380px) { .flock .mk { height: 40px; } .flock .lt.lg .wm { width: 212px; height: 22px; } }
.giant { padding-block: 10px 0; }
.giant img { display: block; width: 100%; height: auto; opacity: .92; -webkit-mask-image: linear-gradient(180deg, #000 35%, rgba(0,0,0,.18) 100%); mask-image: linear-gradient(180deg, #000 35%, rgba(0,0,0,.18) 100%); }
/* Big faint mark behind a plain page header */
.ghost { position: absolute; z-index: -1; right: -4%; top: 50%; width: min(62vw, 820px); height: auto; transform: translateY(-46%); opacity: .07; pointer-events: none; }
.phero.plain { isolation: isolate; overflow: hidden; }
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 64px 40px; }
.foot p { margin-top: 18px; max-width: 34ch; }
.foot h6 { margin: 0 0 16px; font: 800 11px/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { text-decoration: none; transition: color .2s; } .foot a:hover { color: var(--bone); }
.foot .tbd { color: var(--yel); font-family: var(--f-data); font-size: 13px; }
.base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px 30px; font-size: 13px; background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--g)) 1px no-repeat; }
footer .logo b { color: var(--bone); }
.base .sectors { display: inline-flex; gap: 6px; } .base .sectors i { width: 18px; height: 6px; transform: skewX(-12deg); background: var(--c); }
.foot .sel { color: var(--bone); user-select: all; -webkit-user-select: all; font-size: 13px; }
/* Made with love: the heart beats like a pulse on the timing screen */
.love { display: inline-flex; align-items: center; gap: 7px; color: var(--steel); }
.love a { color: var(--bone); font-weight: 700; text-decoration: none; padding-bottom: 2px; background: linear-gradient(var(--sig), var(--sig)) left bottom / 0 2px no-repeat; transition: background-size .4s cubic-bezier(.2,.8,.2,1); }
.love a:hover, .love a:focus-visible { background-size: 100% 2px; }
.love .heart { display: inline-block; animation: beat 1.3s ease-in-out infinite; }
.love .sectors { margin-left: 10px; }
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.28); } 22% { transform: scale(.94); } 30% { transform: scale(1.16); } }
@media (max-width: 860px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot > div:first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}