/* RaceDev house style (from the /media/ page): Barlow + Barlow Condensed, night/neon palette, condensed italic
   uppercase display type, kicker labels with a neon bar, square buttons. Pages load the fonts with:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;1,800;1,900&family=Barlow:wght@400;500;600&display=swap">
   then this file, then their own page styles. */
html, body { margin: 0; }
html { background: #0e1517; overscroll-behavior-y: none; }
:root {
  --night: #0e1517; --bg: #121a1c; --raise: #172225; --line: #24343a; --fg: #f2f7f5; --muted: #9db2ae;
  --neon: #62f59a; --neon-ink: #06170d; --cyan: #2ec4d6; --edge: #bef5fc;
  --display: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", -apple-system, "Segoe UI", sans-serif;
  --gut-l: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; border-radius: 3px; }
.inner { max-width: 1200px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.band { padding-block: clamp(64px, 9vw, 112px); }
.band + .band { border-top: 1px solid var(--line); }
.dark { background: var(--night); }
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 700 13px/1 var(--display); letter-spacing: .18em;
  text-transform: uppercase; color: var(--neon); }
.kicker::before { content: ""; flex: none; width: 28px; height: 4px; background: var(--neon); }
.nav .back::before { content: none; }
/* the wordmark's letters sit 14% of its height below the image centre (5px at 148px wide): line the nav label up with them */
.nav > .kicker { transform: translateY(5px); white-space: nowrap; }
@media (max-width: 419px) { .nav > .kicker { white-space: normal; max-width: 108px; } } /* two lines, kept tight to the right edge */
.display { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: .92;
  text-wrap: balance; margin: 0; }
h2.display { font-size: clamp(40px, 6vw, 72px); }
/* the design system's display steps */
.display-hero { font-size: clamp(44px, 6.2vw, 82px); }
.display-cta { font-size: clamp(56px, 9vw, 120px); }
h3 { margin: 0; font: italic 800 clamp(24px, 2.6vw, 30px)/1.05 var(--display); text-transform: uppercase; }
.muted { color: var(--muted); }
.head { display: grid; gap: 18px; max-width: 760px; }
.head p { font-size: 19px; color: #d3dfdc; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.nav .brand { display: inline-flex; align-items: center; gap: 12px; }
.nav .brand img:last-child { width: 148px; height: auto; }
.mark { width: 40px; height: 40px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 4px; text-decoration: none;
  font: 700 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.btn-neon { background: var(--neon); color: var(--neon-ink); }
.btn-ghost { border: 1px solid rgba(242,247,245,.4); color: var(--fg); }
.btn svg { width: 16px; height: 16px; }
footer { padding-block: 28px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); background: var(--night); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; color: var(--fg); font-size: 15px; }
.foot-links a:hover { color: var(--neon); }
.foot-links .icon svg { width: 22px; height: 22px; display: block; }
/* the copyright line, as on the home page: small, tracked uppercase, faint */
.foot .legal { color: rgba(255, 255, 255, .42); font: 600 11px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; }