/* custom.css — per-site design layer.
 *
 * Ships with the Basecamp project bar. Everything else is intentionally empty:
 * this is where a site adds bespoke design without forking the template.
 * `sites update-template` PRESERVES this file, so template updates never
 * clobber a site's custom look.
 */

/* ── Basecamp project bar ──────────────────────────────────────────────
   Shows signed-in Basecamp users their subscribed cards and a quick
   "Talk" button for feedback. Hidden until /_api/portal/me returns ok. */

body.zk-has-open-bar:not(.zk-open-bar-minimized) {
  --zk-bc-bar-h: 2.4rem;
}

.zk-open-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  color: var(--color-text);
  font: inherit;
  box-sizing: border-box;
}

.zk-open-bar.is-minimized {
  position: fixed;
  top: 0.55rem;
  left: 0.55rem;
  right: auto;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  z-index: 70;
}

.zk-open-bar.is-minimized .zk-open-bar-inner,
.zk-open-bar.is-minimized .zk-open-panel {
  display: none !important;
}

.zk-open-bar-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 0.3rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.35rem;
  box-sizing: border-box;
}

.zk-open-bar-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.28rem 0.55rem 0.28rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  line-height: 1.15;
  min-height: 1.7rem;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.zk-open-bar-toggle:hover {
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  transform: translateY(-1px);
}

.zk-open-bar-toggle.has-items {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-surface);
}

.zk-open-bar-toggle.has-items:hover {
  filter: brightness(1.05);
}

.zk-open-bar.is-open .zk-open-bar-toggle {
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.zk-open-bar-pulse {
  display: none;
  position: absolute;
  left: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-text) 35%, transparent);
  animation: zk-open-ping 1.6s ease-out infinite;
}

.zk-open-bar-toggle.has-items .zk-open-bar-pulse {
  display: block;
}

.zk-open-bar-toggle.has-items .zk-open-bar-label {
  padding-left: 0.55rem;
}

@keyframes zk-open-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-text) 35%, transparent); }
  70% { box-shadow: 0 0 0 0.55rem color-mix(in srgb, var(--color-text) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-text) 0%, transparent); }
}

.zk-open-bar-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: inherit;
  line-height: 1.15;
}

.zk-open-bar-count {
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.zk-open-bar-toggle.has-items .zk-open-bar-count {
  background: var(--color-surface);
  color: var(--color-text);
}

.zk-open-bar-count.is-zero {
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.zk-open-bar-chevron {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.75;
  transition: transform 0.18s ease, opacity 0.15s ease;
}

.zk-open-bar.is-open .zk-open-bar-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.zk-open-bar-who {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zk-open-bar-ask,
.zk-open-bar-bc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  height: 1.7rem;
  min-height: 1.7rem;
  padding: 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.zk-open-bar-ask {
  color: var(--color-surface);
  background: var(--color-text);
  border-color: var(--color-text);
}

.zk-open-bar-ask:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.zk-open-bar-ask svg {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0.95;
}

.zk-open-bar-bc {
  color: var(--color-text) !important;
  text-decoration: none !important;
  background: transparent;
  border-color: color-mix(in srgb, var(--color-text) 18%, transparent);
}

.zk-open-bar-bc:hover {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  border-color: var(--color-text);
}

.zk-open-bar-min {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: 0.1rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  cursor: pointer;
  line-height: 0;
  order: -1;
}

.zk-open-bar-min:hover {
  color: var(--color-text);
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.zk-open-bar-chip {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--color-surface);
  background: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-surface) 25%, transparent);
  padding: 0.35rem 0.45rem;
  min-height: 2rem;
  min-width: 2rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
  line-height: 0;
  border-radius: 0;
}

.zk-open-bar.is-minimized .zk-open-bar-chip {
  display: inline-flex;
}

.zk-open-bar-chip:hover {
  border-color: var(--color-surface);
}

.zk-open-bar-chip-icon {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--color-surface);
  display: block;
  opacity: 0.95;
}

.zk-open-bar-chip .zk-open-bar-count {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  font-size: 0.65rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.zk-open-bar-drop {
  position: relative;
  flex-shrink: 0;
  z-index: 62;
}

.zk-open-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: auto;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
  z-index: 63;
}

@media (min-width: 480px) {
  .zk-open-panel {
    min-width: 16rem;
  }
}

.zk-open-panel-inner {
  max-width: none;
  margin: 0;
  padding: 0.7rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zk-open-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  background: color-mix(in srgb, var(--color-text) 2%, transparent);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 160ms ease, background 160ms ease;
  box-sizing: border-box;
}

.zk-open-item:hover {
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.zk-open-item-col {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.3;
  opacity: 0.7;
}

.zk-open-item-title {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-text);
}

.zk-open-item-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--color-secondary);
  line-height: 1.35;
  margin-top: 0.1rem;
}

.zk-open-empty {
  margin: 0;
  padding: 0.65rem 0.15rem 0.35rem;
  color: var(--color-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Push the site header below the expanded bar */
body.zk-has-open-bar:not(.zk-open-bar-minimized) > header {
  top: var(--zk-bc-bar-h, 2.4rem);
}

body.zk-has-open-bar.zk-open-bar-minimized > header {
  top: 0;
}

@media (max-width: 640px) {
  body.zk-has-open-bar:not(.zk-open-bar-minimized) {
    --zk-bc-bar-h: 2.35rem;
  }
  .zk-open-bar-inner {
    padding: 0.28rem 0.85rem;
    gap: 0.5rem;
  }
  .zk-open-bar-who {
    display: none;
  }
  .zk-open-panel {
    left: 0;
    width: min(20rem, calc(100vw - 1.25rem));
    max-width: calc(100vw - 1.25rem);
  }
  .zk-open-panel-inner {
    padding: 0.65rem 0.65rem 0.75rem;
  }
  .zk-open-bar.is-minimized {
    top: auto;
    bottom: 0.85rem;
    left: 0.85rem;
    right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Apex Racing Lounge — brand design layer (ar-*)
   Source: Figma "Apex Racing Lounge", Page 2 (desktop 1440 / mobile 393).
   Markup: pb_hooks/zk_render.js (headerHtml, footerHtml, homeBody).
   Desktop values are the design's px; ≤1100px and ≤767px scale them down.
   ══════════════════════════════════════════════════════════════════════ */

/* Brand fonts, self-hosted (Latin subset, SIL OFL — assets/fonts/OFL.txt).
   Served from our own domain instead of Google Fonts so no third-party
   stylesheet blocks the first paint; the two hero faces are preloaded in
   layout.html. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The design is dark-only: pin the kit's theme tokens to the brand. */
:root,
:root[data-theme] {
  --color-primary: #0650e7;
  --color-dark: #0a0d18;
  --color-secondary: rgba(255, 255, 255, 0.6);
  --color-surface: #03040a;
  --color-text: #ffffff;
  --zk-hover: rgba(255, 255, 255, 0.06);
  --zk-border-soft: rgba(255, 255, 255, 0.07);
  --zk-border: rgba(255, 255, 255, 0.11);
  --zk-border-strong: rgba(255, 255, 255, 0.18);
  --ar-bg: #03040a;
  --ar-panel: #0a0d18;
  --ar-panel-alt: #0c0f1a;
  --ar-blue: #0650e7;
  --ar-cyan: #00c3ff;
  --ar-line: rgba(6, 80, 231, 0.22);
  --ar-grad: linear-gradient(105deg, #0650e7 0%, #00c3ff 100%);
  --ar-nav-h: 109px;
  --ar-gutter: 75px;
  --ar-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ar-body: "Barlow", system-ui, sans-serif;
  color-scheme: dark;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--ar-nav-h); }
body {
  background: var(--ar-bg);
  color: #fff;
  font-family: var(--ar-body);
  overflow-x: hidden;
}

.ar-wrap {
  width: min(1290px, 100% - 2 * var(--ar-gutter));
  margin-inline: auto;
}

.ar-accent { color: var(--ar-cyan); }

/* ── Header ─────────────────────────────────────────────────────────── */
.ar-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--ar-nav-h);
  background: rgba(3, 4, 10, 0.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(6, 80, 231, 0.18);
}
body.zk-has-open-bar:not(.zk-open-bar-minimized) > .ar-nav { top: var(--zk-bc-bar-h, 2.4rem); }
.ar-nav-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: 0 var(--ar-gutter);
}
/* Figma slot: 304x81 at x=0. The artwork sits in the right 76% of the
   1500x400 canvas, so it lands on the 75px content gutter. */
.ar-nav-logo { display: block; flex-shrink: 0; line-height: 0; }
.ar-nav-logo object,
.ar-nav-logo img { display: block; width: 304px; height: 81px; pointer-events: none; }
.ar-nav-logo object img { width: 304px; height: auto; padding-left: 73px; }
/* The page is color-scheme: dark; an embedded document with a different
   scheme gets an opaque (white) backdrop. Matching the SVG's default
   scheme keeps it transparent. */
.ar-nav-logo object { color-scheme: normal; }
.ar-nav-links { display: flex; gap: 28px; margin-left: auto; }
.ar-nav-links:empty { display: none; }
.ar-nav-links a {
  font: 400 16px/24px var(--ar-display);
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.ar-nav-links a:hover,
.ar-nav-links a.navlink-active { color: #fff; }
.ar-nav-right { display: flex; align-items: center; }
.ar-nav-social { display: block; line-height: 0; }
.ar-nav-social + .ar-nav-social { margin-left: 21px; }
.ar-nav-social img { display: block; }
.ar-nav-cta { margin-left: 39px; }
#app { padding-top: var(--ar-nav-h); }
#app > .ar-home { margin-top: calc(-1 * var(--ar-nav-h)); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.ar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 14px 40px;
  border: 0;
  background: none;
  isolation: isolate;
  color: #fff;
  font: 400 16px/24px var(--ar-display);
  letter-spacing: 2.24px;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 77px rgba(6, 80, 231, 0.29), 0 0 47px rgba(0, 192, 254, 0.7);
}
/* Gradient on a layer so hover can fade it to 77% like the design */
.ar-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ar-grad);
  transition: opacity 0.3s cubic-bezier(0, 0, 0.58, 1);
}
.ar-btn:hover::before { opacity: 0.77; }
.ar-btn img { display: block; flex-shrink: 0; }
.ar-btn:focus-visible { outline: 2px solid var(--ar-cyan); outline-offset: 3px; }
.ar-btn--soft { box-shadow: 0 0 77px rgba(6, 80, 231, 0.29), 0 0 47px -44px rgba(0, 192, 254, 0.7); }
.ar-btn--sm,
.ar-btn--outline {
  height: 42px;
  gap: 8px;
  padding: 12px 20px;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1.2px;
}
.ar-btn--sm { box-shadow: 0 0 20px rgba(6, 81, 231, 0.4); }
.ar-btn--outline {
  background: transparent;
  border: 1px solid rgba(6, 80, 231, 0.35);
  box-shadow: none;
  transition: background-color 0.3s cubic-bezier(0, 0, 0.58, 1), border-color 0.3s cubic-bezier(0, 0, 0.58, 1);
}
.ar-btn--outline::before { display: none; }
.ar-btn--outline span { transition: color 0.3s cubic-bezier(0, 0, 0.58, 1); }
.ar-btn--outline:hover { background-color: rgba(6, 80, 231, 0.2); border-color: rgba(6, 80, 231, 0.25); }
.ar-btn--outline:hover span { color: rgba(255, 255, 255, 0.7); }

/* ── Shared type ────────────────────────────────────────────────────── */
/* Zero-specificity reset so single-class margins below always win */
:where(.ar-home) :where(p, h1, h2, h3, ul, dl, dd) { margin: 0; }
.ar-eyebrow {
  font: 400 14px/16.5px var(--ar-display);
  letter-spacing: 2.75px;
  text-transform: uppercase;
  color: var(--ar-cyan);
}
.ar-eyebrow--tight { line-height: 16px; letter-spacing: 1.2px; }
.ar-eyebrow--card { letter-spacing: 2.2px; }
.ar-eyebrow--xs { font-size: 11px; }
.ar-h2, .ar-h3, .ar-h4, .ar-hero-title, .ar-league-title {
  font-family: var(--ar-display);
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}
.ar-h2 { font-size: 96px; line-height: 90px; letter-spacing: -2.72px; }
.ar-h3 { font-size: 72px; line-height: 70px; letter-spacing: -1.12px; }
.ar-h4 { font-size: 48px; line-height: 45px; letter-spacing: -0.57px; }
.ar-home [data-editable] { outline-offset: 2px; }
body.zk-editing .ar-home span[data-editable]:empty { display: inline-block; min-width: 2ch; }

/* Cards */
.ar-card {
  position: relative;
  overflow: hidden;
  background: var(--ar-panel);
  border: 1px solid var(--ar-line);
}
.ar-card--alt { background: var(--ar-panel-alt); border-color: rgba(6, 80, 231, 0.2); }
.ar-card > * { position: relative; }
/* 3px brand rule across the top */
.ar-grad-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0650e7, #00c3ff);
  z-index: 2;
}
/* 4px brand rule down the left */
.ar-accent-left::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, #0650e7, #00c3ff);
  z-index: 2;
}
/* Blue wash falling from the top edge */
.ar-blue-top { background-image: linear-gradient(180deg, rgba(6, 80, 231, 0.9) 0%, rgba(3, 4, 10, 0.3) 50%, rgba(3, 4, 10, 0) 100%); }
/* Hairline glow on the top edge */
.ar-glow-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 195, 255, 0) 0%, rgba(0, 195, 255, 0.4) 50%, rgba(0, 195, 255, 0) 100%);
  z-index: 2;
}
.ar-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0650e7, #00c3ff);
  color: #fff;
  font: 400 11px/16.5px var(--ar-display);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 4px 12px;
}
.ar-dots { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ar-dots li {
  position: relative;
  padding-left: 18px;
  font: 400 14px/21px var(--ar-body);
  color: rgba(255, 255, 255, 0.7);
}
.ar-dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ar-cyan);
}
.ar-dots--dim li { color: rgba(255, 255, 255, 0.6); }
.ar-dots--dim li::before { background: rgba(6, 80, 231, 0.7); }
.ar-muted-label {
  font: 400 14px/16.5px var(--ar-display);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.ar-hero {
  position: relative;
  min-height: 1107px;
  overflow: hidden;
  padding: 398px 0 96px;
}
.ar-hero-bg {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 1080px;
  object-fit: cover;
}
.ar-hero-video {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1080px;
  overflow: hidden;
  pointer-events: none;
}
.ar-hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 1920px);
  height: max(100%, 1080px);
  transform: translate(-50%, -50%);
  border: 0;
}
.ar-hero-tint {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1080px;
  background:
    linear-gradient(180deg, rgba(3, 45, 129, 0) 10%, #000 100%),
    linear-gradient(213deg, #0650e7 14%, rgba(3, 45, 129, 0) 75%);
}
.ar-hero-in { position: relative; }
.ar-hero-eyebrow {
  font: italic 400 33.97px/50.96px var(--ar-display);
  letter-spacing: 2.72px;
  text-transform: uppercase;
  color: var(--ar-cyan);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.ar-hero-title {
  margin-top: 12px;
  font-size: 150px;
  line-height: 131.6px;
  letter-spacing: -3.74px;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.ar-hero-intro {
  margin-top: 32px;
  max-width: 683px;
  font: 400 18px/28.05px var(--ar-body);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.ar-hero-intro p + p { margin-top: 12px; }
.ar-hero-cta { margin-top: 32px; }

/* ── Own the Apex band ──────────────────────────────────────────────── */
.ar-apex { position: relative; min-height: 348px; padding: 37px 0 29px; overflow: hidden; }
.ar-apex-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.ar-apex-in {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.ar-apex-copy { max-width: 1006px; }
.ar-apex-title { padding-top: 16px; letter-spacing: -1.9px; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.ar-apex-body { margin-top: 20px; font: 400 16px/26px var(--ar-body); text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.ar-apex-body p + p { margin-top: 26px; }
.ar-apex-cta { flex-shrink: 0; margin-bottom: 0; }

/* ── Bento grid ─────────────────────────────────────────────────────── */
.ar-bento { padding-top: 59px; }
.ar-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ar-sim { grid-column: span 2; min-height: 560px; display: flex; align-items: flex-end; }
.ar-sim-img { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.ar-sim-shade {
  position: absolute !important;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(6, 80, 231, 0.9) 0%, rgba(3, 4, 10, 0) 62%),
    linear-gradient(270deg, rgba(3, 4, 10, 0.96) 0%, rgba(3, 4, 10, 0.7) 51%, rgba(3, 4, 10, 0) 90%);
}
.ar-sim::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0650e7, #00c3ff);
  z-index: 2;
}
.ar-sim-in { padding: 48px; max-width: 857px; }
.ar-sim-in > *, .ar-lounge-in > * { text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.ar-sim-title { margin-top: 16px; }
.ar-sim-body { margin-top: 20px; max-width: 533px; font: 400 16px/24.38px var(--ar-body); }
.ar-sim-body p + p { margin-top: 12px; line-height: 22.75px; }

.ar-hw { padding: 32px; }
.ar-hw::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 3px;
  background: linear-gradient(90deg, #0650e7, rgba(6, 80, 231, 0));
}
.ar-hw-intro { margin-top: 8px; font: 400 14px/17.88px var(--ar-body); }
.ar-hw-list { margin-top: 24px; gap: 12px; }
.ar-hw-list li {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font: 400 14px/17.88px var(--ar-display);
  color: #fff;
}
.ar-hw-list li:last-child { border-bottom: 0; }
.ar-hw-iracing {
  margin-top: 11px;
  padding-top: 21px;
  border-top: 1px solid var(--ar-line);
}
.ar-hw-iracing img { display: block; }
.ar-hw-body { margin-top: 18px; font: 400 14px/16.5px var(--ar-body); }
.ar-hw-note { margin-top: 26px; font: 400 14px/16.5px var(--ar-body); color: var(--ar-cyan); }
.ar-hw-note strong { font-weight: 700; }

.ar-intro {
  display: flex;
  flex-direction: column;
  min-height: 512px;
  padding: 32px;
  border-color: rgba(0, 195, 255, 0.5);
  background: linear-gradient(150deg,
    rgba(6, 80, 231, 0.22) 0%, rgba(4, 111, 237, 0.15) 30%, rgba(3, 140, 244, 0.12) 45%,
    rgba(0, 195, 255, 0.08) 60%, rgba(1, 131, 173, 0.11) 62%, rgba(2, 96, 128, 0.14) 65%,
    rgba(2, 59, 80, 0.21) 70%, rgba(2, 39, 55, 0.28) 75%, rgba(3, 26, 39, 0.34) 80%,
    rgba(3, 12, 20, 0.47) 90%, rgba(3, 4, 10, 0.6) 100%);
}
.ar-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0650e7, #00c3ff);
}
.ar-intro-price {
  margin-top: 16px;
  font: 400 110px/110px var(--ar-display);
  letter-spacing: -3.3px;
}
.ar-intro-label {
  margin-top: 4px;
  font: 400 20px/28px var(--ar-display);
  text-transform: uppercase;
}
.ar-intro-list { margin-top: 32px; }
.ar-intro-note { margin-top: 24px; font: 400 14px/18px var(--ar-body); }
.ar-intro-cta { margin-top: auto; width: 100%; box-shadow: 0 0 77px rgba(6, 80, 231, 0.29), 0 0 47px rgba(0, 192, 254, 0.7); }
.ar-intro-note + .ar-intro-cta { margin-top: 20px; }

.ar-cars { min-height: 512px; display: flex; flex-direction: column; justify-content: flex-end; }
.ar-cars-img { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-cars-shade {
  position: absolute !important;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(6, 80, 231, 0.9) 0%, rgba(3, 4, 10, 0.3) 50%, rgba(3, 4, 10, 0) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.21) 0%, rgba(5, 5, 5, 0) 25%);
}
.ar-cars-badge { position: absolute !important; top: 16px; right: 19px; }
.ar-cars-in { padding: 28px; }
.ar-cars-in > * { text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.ar-cars-title { font: 400 24px/24px var(--ar-display); text-transform: uppercase; }
.ar-cars-sub { margin-top: 8px; font: 400 13px/19.5px var(--ar-body); }

.ar-who { padding: 32px; }
.ar-who::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120%;
  height: 3px;
  background: linear-gradient(90deg, rgba(6, 80, 231, 0), #0650e7);
}
.ar-who .ar-h4 { margin-top: 20px; }
.ar-who-body { margin-top: 20px; font: 400 14px/22.75px var(--ar-body); }
.ar-who-body p + p { margin-top: 12px; line-height: 21.12px; }

.ar-lounge {
  position: relative;
  margin-top: 52px;
  min-height: 367px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ar-panel);
}
.ar-lounge-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.38; }
.ar-lounge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(98deg, rgba(3, 4, 10, 0.97) 0%, rgba(3, 4, 10, 0.55) 55%, rgba(3, 4, 10, 0) 100%);
}
.ar-lounge-in { position: relative; z-index: 2; padding: 50px 0 40px 40px; }
.ar-lounge-title { margin-top: 16px; letter-spacing: -1.04px; }
.ar-lounge-body { margin-top: 16px; max-width: 627px; font: 400 16px/24.38px var(--ar-body); }

/* ── Choosing your car and track ────────────────────────────────────── */
.ar-ct { padding: 80px 0; }
.ar-ct-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ar-ct-title { margin-top: 12px; letter-spacing: 0; }
.ar-ct-logo { width: 399px; height: auto; margin-right: 44px; flex-shrink: 1; min-width: 0; }
.ar-ct-intro {
  position: relative;
  margin-top: 40px;
  padding: 32px;
  border: 1px solid var(--ar-line);
  background:
    linear-gradient(180deg, rgba(6, 80, 231, 0.9) 0%, rgba(3, 4, 10, 0.3) 50%, rgba(3, 4, 10, 0) 100%),
    linear-gradient(103deg, rgba(6, 80, 231, 0.1) 0%, rgba(4, 113, 238, 0.07) 50%, rgba(0, 195, 255, 0.04) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.ar-ct-intro > * { margin-inline: 105px; }
.ar-ct-body { max-width: 666px; margin-right: 0; font: 400 18px/29.25px var(--ar-body); }
.ar-stats {
  flex-shrink: 0;
  margin-left: 0;
  width: 166px;
  min-height: 226px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 195, 255, 0.05);
  border: 1px solid var(--ar-cyan);
}
.ar-stat + .ar-stat { margin-top: 16px; }
.ar-stat-v { font: 400 64px/64px var(--ar-display); }
.ar-stat + .ar-stat .ar-stat-v { font-size: 48px; line-height: 48px; }
.ar-stat-l {
  margin-top: 8px;
  font: 400 12px/16px var(--ar-display);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.ar-ct-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ar-ct-card { padding: 32px; min-height: 337px; }
.ar-ct-h { margin-top: 24px; font: 400 24px/32px var(--ar-display); text-transform: uppercase; }
/* max-width reproduces the design's row breaks (3/3/3 cars, 3/3/2/2 tracks) */
.ar-chips { list-style: none; padding: 0; margin-top: 20px; max-width: 470px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ar-chips li {
  padding: 9px 16px;
  background: rgba(6, 80, 231, 0.06);
  border: 1px solid rgba(6, 80, 231, 0.25);
  font: 600 12px/18px var(--ar-display);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: rgba(240, 242, 248, 0.7);
}
.ar-fulllist {
  margin-top: 16px;
  min-height: 90px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background-image: linear-gradient(180deg, rgba(6, 80, 231, 0.9) 0%, rgba(3, 4, 10, 0.3) 50%, rgba(3, 4, 10, 0) 100%);
}
.ar-fulllist-copy p:last-child { margin-top: 4px; font: 400 14px/20px var(--ar-body); }
.ar-fulllist-btns { display: flex; gap: 12px; margin-right: auto; margin-left: 168px; }
.ar-fulllist-logo { display: block; margin-right: 1px; }

/* ── Pricing ────────────────────────────────────────────────────────── */
.ar-pricing {
  position: relative;
  overflow: hidden;
  padding-top: 97px;
  background: linear-gradient(180deg, #03040a 0%, #050714 50%, #03040a 100%);
}
.ar-pricing-glow {
  position: absolute;
  left: calc(50% + 139px);
  top: 818px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, 0.07) 0%, rgba(0, 195, 255, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
}
.ar-pricing-img {
  position: absolute;
  top: 86px;
  right: 0;
  width: 760px;
  height: 345px;
  object-fit: cover;
  opacity: 0.5;
}
.ar-pricing-in { position: relative; }
.ar-pricing-title { margin-top: 16px; padding-bottom: 12px; }
.ar-lede { font: 400 16px/26px var(--ar-body); }
.ar-pricing-body { margin-top: 20px; max-width: 593px; }
.ar-pricing-label { margin-top: 56px; }
.ar-eyebrow--xs.ar-pricing-label { margin-top: 12px; }
.ar-grid3 { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ar-price { min-height: 282px; padding: 32px; }
.ar-price-v { margin-top: 20px; font: 400 80px/80px var(--ar-display); letter-spacing: -2.4px; }
.ar-price-len {
  margin-top: 8px;
  font: 400 20px/28px var(--ar-display);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ar-price-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font: 400 14px/18px var(--ar-body);
  color: rgba(255, 255, 255, 0.4);
}
.ar-price--pop {
  border-color: rgba(0, 195, 255, 0.5);
  background: linear-gradient(134deg, rgba(6, 80, 231, 0.2) 0%, rgba(5, 107, 237, 0.13) 50%, rgba(3, 134, 242, 0.09) 75%, rgba(0, 195, 255, 0.06) 100%);
}
.ar-price--pop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0650e7, #00c3ff);
}
.ar-price-badge {
  position: absolute !important;
  top: 20px;
  right: 22px;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1.8px;
  padding: 5px 12px;
}
.ar-pkg { min-height: 209px; padding: 33px 32px 32px; }
.ar-pkg-v { font: 400 52px/52px var(--ar-display); letter-spacing: -1.56px; }
.ar-pkg-len {
  margin-top: 4px;
  font: 400 18px/28px var(--ar-display);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ar-pkg-rate { margin-top: 4px; font: 400 14px/19.5px var(--ar-display); color: var(--ar-cyan); }
.ar-pkg-note { margin-top: 16px; font: 400 14px/19.5px var(--ar-body); color: rgba(255, 255, 255, 0.4); }
.ar-member {
  margin-top: 13px;
  min-height: 100px;
  padding: 24px;
  background-image: linear-gradient(180deg, rgba(6, 80, 231, 0.9) 0%, rgba(3, 4, 10, 0.3) 50%, rgba(3, 4, 10, 0) 100%);
}
.ar-member-list { margin-top: 12px; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.ar-member-list li { padding-left: 14px; color: rgba(255, 255, 255, 0.55); }
.ar-member-list li::before { top: 7.5px; }
.ar-pricing-cta { margin-top: 16px; }

.ar-ghost {
  position: relative;
  height: 243px;
  margin-top: 0;
  pointer-events: none;
}
.ar-ghost span {
  position: absolute;
  left: 0;
  right: 0;
  /* Barlow Condensed's caps sit low in a 180px line box; lift them clear
     of the section's bottom edge (the section clips its overflow). */
  bottom: 22px;
  text-align: center;
  font: 600 245px/180px var(--ar-display);
  letter-spacing: 3.25px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #52545c;
  opacity: 0.22;
  pointer-events: auto;
}
/* Streaks video: light on pure black, so screen-blend drops the black
   and only the streaks show over the section background. */
.ar-streaks {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(-50%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ── Events ─────────────────────────────────────────────────────────── */
/* The design lists 96px bottom padding, but its content overruns it: 29px shows. */
.ar-events { padding: 66px 0 29px; }
.ar-events .ar-wrap { width: min(1295px, 100% - 2 * var(--ar-gutter)); }
.ar-party-title { margin-top: 16px; padding-bottom: 12px; }
.ar-party-body { margin-top: 24px; max-width: 1213px; font: 400 16px/26px var(--ar-body); }
.ar-party-body p + p { margin-top: 8px; line-height: 24.38px; }
.ar-grid2 { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ar-party { min-height: 495px; padding: 32px; display: flex; flex-direction: column; }
.ar-party .ar-muted-label { margin-bottom: 12px; }
.ar-party-v { font: 400 67.95px/67.95px var(--ar-display); letter-spacing: -2.04px; padding-bottom: 12px; }
.ar-party-name { font: 400 20px/32px var(--ar-display); text-transform: uppercase; padding-bottom: 24px; }
.ar-party-list { padding-bottom: 32px; }
.ar-party--full .ar-party-list { padding-bottom: 16px; }
.ar-party-note { font: 400 13px/19.5px var(--ar-body); color: rgba(255, 255, 255, 0.4); padding-bottom: 24px; }
.ar-party-cta { margin-top: auto; width: 100%; }
.ar-party .ar-btn--outline { letter-spacing: 1.2px; }
.ar-party--full {
  border-color: rgba(0, 195, 255, 0.5);
  background: linear-gradient(138deg,
    rgba(6, 80, 231, 0.22) 0%, rgba(4, 111, 237, 0.15) 30%, rgba(3, 140, 244, 0.12) 45%,
    rgba(0, 195, 255, 0.08) 60%, rgba(1, 119, 157, 0.12) 62%, rgba(2, 83, 111, 0.17) 65%,
    rgba(2, 48, 67, 0.26) 70%, rgba(3, 31, 45, 0.35) 75%, rgba(3, 21, 32, 0.44) 80%,
    rgba(3, 10, 18, 0.62) 90%, rgba(3, 4, 10, 0.8) 100%);
}
.ar-party--full::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0650e7, #00c3ff);
}
.ar-party-badge {
  align-self: flex-start;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 2px;
  padding: 5px 12px;
}
.ar-party--full .ar-party-cta { height: 41px; padding-block: 12px; }

.ar-corp-label { margin-top: 64px; }
.ar-corp {
  margin-top: 16px;
  padding: 40px 40px 40px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.ar-corp-copy { max-width: 578px; }
.ar-corp-body { font: 400 16px/24.38px var(--ar-body); }
.ar-corp-v { margin-top: 24px; font: 400 54.36px/54.36px var(--ar-display); letter-spacing: -1.63px; }
.ar-corp-len { margin-top: 4px; font: 400 20px/28px var(--ar-display); text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.ar-corp-note { margin-top: 24px; margin-bottom: 32px; font: 400 14px/22.75px var(--ar-body); }
.ar-dots--ruled li { padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }

.ar-league {
  margin-top: 40px;
  min-height: 279px;
  padding: 40px 54px 40px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ar-league-copy { max-width: 600px; }
.ar-league-soon { display: flex; align-items: center; gap: 8px; }
.ar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ar-cyan); opacity: 0.94; flex-shrink: 0; }
.ar-league-title { margin-top: 17px; font-size: 44px; line-height: 44px; letter-spacing: -0.88px; }
.ar-league-body { margin-top: 12px; max-width: 576px; font: 400 16px/22.75px var(--ar-body); }
.ar-league-follow { margin-top: 12px; font: 400 16px/21px var(--ar-body); color: var(--ar-cyan); }
.ar-socialbtns { display: flex; gap: 13px; flex-shrink: 0; }
.ar-socialbtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 12px 18px 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font: 400 16px/19.5px var(--ar-display);
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: #fff;
  transition: border-color 0.6s cubic-bezier(0, 0, 0.58, 1);
}
.ar-socialbtn span { transition: color 0.6s cubic-bezier(0, 0, 0.58, 1); }
.ar-socialbtn:hover { border-color: rgba(255, 255, 255, 0.2); }
.ar-socialbtn:hover span { color: rgba(255, 255, 255, 0.4); }
.ar-socialbtn img { display: block; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.ar-faq { padding: 96px 0 61px; }
.ar-faq-grid {
  display: grid;
  grid-template-columns: 389px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  width: min(1295px, 100% - 2 * var(--ar-gutter));
  position: relative;
  left: 19px;
}
.ar-faq-title { margin-top: 20px; letter-spacing: -1.44px; }
.ar-faq-intro { display: none; margin-top: 16px; font: 400 16px/24px var(--ar-body); }
.ar-faq-list { display: flex; flex-direction: column; gap: 8px; }
.ar-faq-item {
  background: var(--ar-panel);
  border: 2px solid var(--ar-line);
  transition: background-color 0.6s cubic-bezier(0, 0, 0.58, 1);
}
.ar-faq-item:hover { background-color: #171b2d; }
.ar-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 24px 28px;
  font: 400 18px/22.5px var(--ar-display);
  letter-spacing: 1.08px;
  text-transform: uppercase;
}
.ar-faq-q::-webkit-details-marker { display: none; }
.ar-faq-q::marker { content: ""; }
.ar-faq-icon { flex-shrink: 0; margin-right: 10px; transition: transform 0.6s cubic-bezier(0, 0, 0.58, 1); }
/* Design hover grows the "+" from 11px to 16px */
.ar-faq-q:hover .ar-faq-icon { transform: scale(1.45); }
.ar-faq-item[open] .ar-faq-icon { transform: rotate(45deg); }
.ar-faq-item[open] .ar-faq-q:hover .ar-faq-icon { transform: rotate(45deg) scale(1.45); }
.ar-faq-q:focus-visible { outline: 2px solid var(--ar-cyan); outline-offset: -2px; }
.ar-faq-a {
  padding: 0 28px 24px;
  font: 400 16px/26px var(--ar-body);
  color: rgba(255, 255, 255, 0.75);
}
.ar-faq-a > :first-child { margin-top: 0; }
.ar-faq-a > :last-child { margin-bottom: 0; }

/* ── Contact ────────────────────────────────────────────────────────── */
.ar-contact { position: relative; overflow: hidden; padding: 97px 0 91px; }
.ar-contact-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 752px;
  background: linear-gradient(180deg, rgba(3, 4, 10, 0) 0%, rgba(3, 4, 10, 0.3) 50%, rgba(6, 80, 231, 0.9) 100%);
  pointer-events: none;
}
.ar-contact-glow {
  position: absolute;
  left: calc(50% + 39px);
  top: 883px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 80, 231, 0.1) 0%, rgba(6, 80, 231, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
}
.ar-contact-in { position: relative; }
.ar-book { display: grid; grid-template-columns: 506px minmax(0, 1fr); gap: 47px; align-items: start; }
.ar-book-img { width: 506px; height: 303px; object-fit: cover; opacity: 0.5; margin-top: 3px; }
.ar-book-title { margin-top: 16px; letter-spacing: -2.04px; }
.ar-book-body { margin-top: 20px; max-width: 672px; padding-left: 5px; font: 400 16px/26px var(--ar-body); }
.ar-book-body p + p { margin-top: 8px; line-height: 24.38px; }
.ar-stay {
  margin-top: 48px;
  min-height: 131px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 43px;
}
.ar-stay-copy { max-width: 954px; }
.ar-stay-copy p:last-child { margin-top: 8px; max-width: 808px; font: 400 16px/24.38px var(--ar-body); }
.ar-stay .ar-socialbtns { margin-right: 21px; }
.ar-contact-grid { margin-top: 40px; display: grid; grid-template-columns: 521px minmax(0, 1fr); gap: 32px; align-items: start; }
.ar-contact-side { display: flex; flex-direction: column; gap: 12px; }
.ar-addr { padding: 28px 28px 27px 44px; min-height: 276px; }
.ar-addr.ar-accent-left::after { width: 3px; }
.ar-addr-1 { margin-top: 12px; font: 400 20px/28px var(--ar-display); }
.ar-addr-2 { font: 400 16px/24px var(--ar-display); color: rgba(255, 255, 255, 0.5); }
.ar-addr-label {
  margin-top: 20px;
  font: 400 14px/16.5px var(--ar-display);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
}
.ar-addr-phone { display: block; margin-top: 12px; font: 400 20px/28px var(--ar-display); }
.ar-addr-email { display: block; margin-top: 8px; font: 400 14px/19.5px var(--ar-body); color: rgba(255, 255, 255, 0.4); }
.ar-addr a:hover { color: #fff; }
.ar-addr-serving { margin-top: 9px; max-width: 393px; font: 400 14px/18px var(--ar-body); color: rgba(255, 255, 255, 0.3); }
.ar-hours { padding: 28px; }
.ar-hours-list { margin-top: 20px; }
.ar-hours-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ar-hours-list > div:last-child { border-bottom: 0; }
.ar-hours-list dt {
  font: 400 14px/19.5px var(--ar-display);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ar-hours-list dd { font: 400 14px/19.5px var(--ar-display); letter-spacing: 1.04px; }
.ar-form-card { min-height: 670px; padding: 48px 40px 40px; }

/* Contact form (contactFormHtml) */
.ar-form { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.ar-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ar-label {
  display: block;
  margin-bottom: 8px;
  font: 400 14px/16.5px var(--ar-display);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
.ar-input {
  display: block;
  width: 100%;
  min-height: 49px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  color: #fff;
  font: 400 14px/16.8px var(--ar-body);
  transition: border-color 0.15s ease, background 0.15s ease;
}
textarea.ar-input { height: 217px; line-height: 21px; resize: vertical; }
.ar-input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.ar-input:hover { border-color: rgba(255, 255, 255, 0.2); }
.ar-input:focus { outline: none; border-color: var(--ar-cyan); background: rgba(255, 255, 255, 0.05); }
.ar-input:user-invalid { border-color: #f87171; }
.ar-form-submit { align-self: flex-start; }
.ar-form .zk-spinner { margin-left: 4px; }
.ar-thanks { margin-top: 32px; padding: 40px 32px; text-align: center; border: 1px solid var(--ar-line); background: rgba(255, 255, 255, 0.03); }
.ar-thanks-icon { width: 48px; height: 48px; color: var(--ar-cyan); margin: 0 auto; }
.ar-thanks h3 { margin-top: 12px; font: 400 32px/36px var(--ar-display); text-transform: uppercase; }
.ar-thanks p { margin-top: 8px; color: rgba(255, 255, 255, 0.6); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.ar-footer { background: var(--ar-bg); color: #fff; }
.ar-footer-line { height: 3px; background: linear-gradient(90deg, #0650e7 0%, #00c3ff 50%, #0650e7 100%); }
.ar-footer-in { padding: 56px 0 40px; }
.ar-footer-top { display: flex; justify-content: space-between; gap: 48px; }
.ar-footer-logo img { display: block; width: 444px; height: auto; max-width: 100%; }
.ar-footer-tag {
  margin: 40px 0 0 46px;
  font: 400 64px/64px var(--ar-display);
  letter-spacing: 3.25px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #0650e7 0%, #00c3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ar-footer-contact { width: 396px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ar-footer-h { margin: 0 0 8px; font: 400 14px/16.5px var(--ar-display); letter-spacing: 2.75px; text-transform: uppercase; }
.ar-footer-contact a,
.ar-footer-contact p { margin: 0; font: 400 14px/19.5px var(--ar-body); color: #fff; }
.ar-footer-contact a:hover { color: var(--ar-cyan); }
.ar-footer-social { display: flex; align-items: center; gap: 21px; margin-top: 7px; }
.ar-footer-social img { display: block; }
.ar-footer-bottom {
  margin-top: 19px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: flex-end;
}
.ar-footer-bottom p { margin: 0; font: 400 12px/18px var(--ar-body); color: rgba(255, 255, 255, 0.35); }
.ar-footer-bottom a:hover { color: #fff; }

/* ── Scroll reveal ─────────────────────────────────────────────────────
   From the prototype: each section clips and its content slides up from
   below (dy) or in from the right (dx), ease-out. html.ar-js is set in
   <head> only when JavaScript runs and motion is allowed; custom.js adds
   .ar-in when the section enters the viewport and .ar-done when finished. */
html.ar-js [data-ar-scope]:not(.ar-done) { overflow: hidden; }
html.ar-js [data-ar-scope]:not(.ar-in) [data-ar-rv] {
  transform: translate(var(--ar-dx, 0px), var(--ar-dy, 0px));
}
html.ar-js [data-ar-scope].ar-in [data-ar-rv] {
  transform: none;
  transition: transform var(--ar-dur, 0.8s) cubic-bezier(0, 0, 0.58, 1) var(--ar-delay, 0s);
}
/* Hero: same motion (699px up, 0.6s after 0.8s) but as a CSS animation, so
   it starts at first paint instead of after the scripts load. */
html.ar-js .ar-hero-in { animation: ar-hero-in 0.6s cubic-bezier(0, 0, 0.58, 1) 0.8s both; }
@keyframes ar-hero-in {
  from { transform: translateY(699px); }
  to { transform: none; }
}

/* ── ≤1100px: tablet ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root, :root[data-theme] { --ar-gutter: 40px; }
  .ar-hero-title { font-size: 112px; line-height: 100px; letter-spacing: -2.8px; }
  .ar-h2 { font-size: 76px; line-height: 72px; letter-spacing: -2px; }
  .ar-h3 { font-size: 60px; line-height: 58px; }
  .ar-apex-in { flex-direction: column; align-items: flex-start; }
  .ar-bento-grid { grid-template-columns: 1fr 1fr; }
  .ar-sim { grid-column: span 2; }
  .ar-who { grid-column: span 2; }
  .ar-ct-intro > * { margin-inline: 0; }
  .ar-ct-logo { width: 300px; margin-right: 0; }
  .ar-fulllist { flex-wrap: wrap; }
  .ar-fulllist-btns { margin-left: 0; }
  .ar-pricing-img { width: 52%; }
  .ar-price-v { font-size: 64px; line-height: 64px; }
  .ar-corp { grid-template-columns: 1fr; }
  .ar-league, .ar-stay { flex-direction: column; align-items: flex-start; }
  .ar-stay .ar-socialbtns { margin-right: 0; }
  .ar-faq-grid { grid-template-columns: 1fr; gap: 32px; left: 0; }
  .ar-book { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ar-book-img { width: 100%; height: auto; aspect-ratio: 506 / 303; }
  .ar-contact-grid { grid-template-columns: 1fr; }
  .ar-footer-top { flex-direction: column; }
}

/* ── ≤767px: mobile (design frame 393) ──────────────────────────────── */
@media (max-width: 767px) {
  :root, :root[data-theme] { --ar-gutter: 16px; --ar-nav-h: 86px; }
  .ar-nav-in { padding-inline: 0 16px; }
  /* Scale the slot so the artwork still starts on the 16px gutter */
  .ar-nav-logo { margin-left: calc(16px - 0.24 * 225px); }
  .ar-nav-logo object, .ar-nav-logo img { width: 225px; height: 60px; }
  .ar-nav-logo object img { width: 225px; padding-left: 54px; }
  .ar-nav-social, .ar-nav-links { display: none; }
  .ar-nav-cta { margin-left: 0; }

  .ar-btn { padding-inline: 40px; }
  .ar-h2, .ar-h3 { font-size: 48px; line-height: 43.2px; letter-spacing: -1.34px; }
  .ar-h4 { font-size: 28px; line-height: 25.2px; letter-spacing: -0.34px; }

  .ar-hero { min-height: 0; padding: 269px 0 48px; }
  .ar-hero-bg, .ar-hero-tint, .ar-hero-video { height: 100%; }
  .ar-hero-eyebrow { font-size: 26.53px; line-height: 39.8px; letter-spacing: 2.12px; }
  .ar-hero-title { margin-top: 14px; font-size: 70px; line-height: 66px; letter-spacing: -1.5px; }
  .ar-hero-intro { margin-top: 33px; font-size: 18px; line-height: 29.25px; color: rgba(255, 255, 255, 0.75); }
  .ar-hero-cta { width: 100%; }

  .ar-apex { padding: 48px 0; }
  .ar-apex-title { padding-top: 0; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; }
  .ar-apex-body { margin-top: 32px; font-size: 16px; line-height: 27.52px; }
  .ar-apex-body p + p { margin-top: 16px; }
  .ar-apex-cta { margin-top: 0; }

  .ar-bento { padding-top: 40px; }
  .ar-bento-grid { grid-template-columns: 1fr; gap: 22px; }
  .ar-sim, .ar-who { grid-column: auto; }
  .ar-sim { min-height: 562px; }
  /* Mobile: the whole photo across the top of the card (driver on the left,
     screens on the right), fading into the blue, instead of a centre crop */
  .ar-sim-img {
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 1327 / 863;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .ar-sim-shade { background: linear-gradient(0deg, rgba(6, 80, 231, 0.9) 0%, rgba(3, 4, 10, 0) 62%); }
  .ar-sim-in { padding: 64px 20px 20px; }
  .ar-sim .ar-h3 { font-size: 28px; line-height: 25.2px; letter-spacing: -0.42px; }
  .ar-sim .ar-h3 br { display: none; }
  .ar-sim-body { font-size: 16px; line-height: 26.4px; }
  .ar-sim-body p + p { margin-top: 26px; line-height: 26.4px; }
  .ar-hw, .ar-intro, .ar-who { padding: 20px; }
  .ar-intro { order: 2; min-height: 0; }
  .ar-cars { order: 3; min-height: 240px; }
  .ar-who { order: 4; }
  .ar-hw { order: 5; }
  .ar-hw-intro { margin-top: 16px; font-size: 16px; line-height: 26.4px; }
  .ar-hw-list { margin-top: 20px; }
  .ar-hw-list li { font-size: 12px; line-height: 18px; padding-left: 17px; }
  .ar-hw-body, .ar-hw-note { font-size: 16px; line-height: 26.4px; }
  .ar-hw-note { margin-top: 12px; }
  .ar-intro-price { font-size: 64px; line-height: 64px; letter-spacing: -1.92px; }
  .ar-intro-label { font-size: 17px; line-height: 25.5px; }
  .ar-intro-list { margin-top: 20px; gap: 8px; }
  .ar-intro-list li, .ar-intro-note { font-size: 16px; line-height: 24px; }
  .ar-intro-list li::before { top: 9px; width: 5px; height: 5px; }
  .ar-cars-in { padding: 20px; }
  .ar-cars-title { font-size: 20px; line-height: 28px; }
  .ar-cars-sub { margin-top: 4px; font-size: 16px; line-height: 24px; }
  .ar-cars-badge { font-size: 9px; line-height: 13.5px; letter-spacing: 0.9px; padding: 4px 10px; }
  .ar-who-body, .ar-who-body p + p { font-size: 16px; line-height: 27.2px; }
  .ar-lounge { margin: 22px var(--ar-gutter) 0; min-height: 384px; border: 1px solid var(--ar-line); }
  /* Keep the red car in frame on the narrow card */
  .ar-lounge-bg { object-position: 68% 50%; }
  .ar-lounge-in { padding: 60px 20px 40px; width: 100%; }
  .ar-lounge .ar-h3 { margin-top: 12px; font-size: 28px; line-height: 25.2px; letter-spacing: -0.42px; }
  .ar-lounge-body { font-size: 16px; line-height: 27.2px; }

  .ar-ct { padding: 40px 0; }
  .ar-ct-head { flex-direction: column; align-items: flex-start; }
  .ar-ct-logo { display: none; }
  .ar-ct-title { letter-spacing: 0; }
  .ar-ct-intro { flex-direction: column; align-items: stretch; padding: 20px; gap: 24px; }
  .ar-ct-body { font-size: 16px; line-height: 27.52px; }
  .ar-stats { width: 100%; min-height: 0; flex-direction: row; justify-content: flex-start; gap: 32px; padding: 20px 24px; }
  .ar-stat + .ar-stat { margin-top: 0; }
  .ar-stat-v { font-size: 36px; line-height: 36px; }
  .ar-stat + .ar-stat .ar-stat-v { font-size: 30px; line-height: 30px; }
  .ar-stat-l { font-size: 10px; line-height: 15px; letter-spacing: 1px; }
  .ar-ct-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .ar-ct-card { min-height: 0; padding: 20px; }
  .ar-ct-h { margin-top: 12px; font-size: 20px; line-height: 28px; }
  .ar-fulllist { flex-direction: column; align-items: flex-start; padding: 20px; }
  .ar-fulllist-copy p:last-child { font-size: 16px; line-height: 24px; }
  .ar-fulllist-btns { flex-direction: column; align-items: flex-start; }
  .ar-fulllist-logo { display: none; }

  .ar-pricing { padding-top: 40px; }
  .ar-pricing-img { display: none; }
  .ar-pricing-body { font-size: 16px; line-height: 27.52px; }
  .ar-pricing-label { margin-top: 32px; font-size: 11px; letter-spacing: 2.3px; }
  .ar-eyebrow--xs.ar-pricing-label { margin-top: 24px; font-size: 10px; }
  .ar-grid3 { grid-template-columns: 1fr; margin-top: 12px; }
  .ar-price { min-height: 0; padding: 20px; }
  .ar-price .ar-muted-label { font-size: 11px; letter-spacing: 1.9px; }
  .ar-price-v { margin-top: 16px; font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  .ar-price-len { font-size: 17px; line-height: 25.5px; }
  .ar-price-note { margin-top: 20px; padding-top: 16px; font-size: 16px; line-height: 24px; }
  .ar-price-badge { top: 17px; right: 16px; font-size: 8px; line-height: 12px; letter-spacing: 0.8px; padding: 3px 8px; }
  .ar-pkg { min-height: 0; padding: 20px; }
  .ar-pkg-v { font-size: 36px; line-height: 36px; letter-spacing: -1.08px; }
  .ar-pkg-len { font-size: 15px; line-height: 22.5px; }
  .ar-pkg-rate { font-size: 12px; line-height: 18px; }
  .ar-pkg-note { margin-top: 12px; font-size: 16px; line-height: 24px; }
  .ar-member { margin-top: 20px; padding: 16px; }
  .ar-member-list { flex-direction: column; gap: 8px; }
  .ar-member-list li { font-size: 16px; line-height: 24px; }
  .ar-member-list li::before { top: 9px; }
  .ar-pricing-cta { margin-top: 28px; }
  .ar-ghost { display: none; }

  .ar-events { padding: 40px 0; }
  .ar-party-body { margin-top: 20px; }
  .ar-party-body p, .ar-party-body p + p { font-size: 16px; line-height: 27.2px; }
  .ar-grid2 { grid-template-columns: 1fr; gap: 12px; }
  .ar-party { min-height: 0; padding: 20px; }
  .ar-party .ar-muted-label { font-size: 11px; letter-spacing: 1.9px; }
  .ar-party-v { font-size: 44px; line-height: 44px; letter-spacing: -1.32px; }
  .ar-party-name { font-size: 17px; line-height: 25.5px; padding-bottom: 20px; }
  .ar-party-list li, .ar-party-note { font-size: 16px; line-height: 24px; }
  .ar-party-list li::before { top: 9px; }
  .ar-party-list { padding-bottom: 24px; }
  .ar-party-badge { font-size: 10px; letter-spacing: 1px; padding: 4px 10px; }
  .ar-corp-label { margin-top: 40px; }
  .ar-corp { padding: 20px 20px 20px 36px; gap: 24px; }
  .ar-corp-body { font-size: 16px; line-height: 27.2px; }
  .ar-corp-v { margin-top: 20px; font-size: 36px; line-height: 36px; letter-spacing: -1.08px; }
  .ar-corp-len { font-size: 17px; line-height: 25.5px; }
  .ar-corp-note { margin-top: 20px; margin-bottom: 24px; font-size: 16px; line-height: 26.4px; }
  .ar-corp-list li { font-size: 16px; line-height: 24px; }
  .ar-corp-list li::before { top: 9px; }
  .ar-league { margin-top: 16px; padding: 20px; min-height: 0; }
  .ar-league.ar-accent-left::after { display: none; }
  .ar-league-title { margin-top: 12px; font-size: 30px; line-height: 30px; letter-spacing: 0; }
  .ar-league-body { font-size: 16px; line-height: 27.2px; }
  .ar-league-follow { margin-top: 8px; font-size: 16px; line-height: 24px; }
  .ar-socialbtns { flex-wrap: wrap; gap: 12px; }

  .ar-faq { padding: 40px 0 0; }
  .ar-faq-title { margin-top: 12px; letter-spacing: 0; }
  .ar-faq-intro { display: block; }
  .ar-faq-q { min-height: 56px; padding: 16px; gap: 16px; font-size: 15px; line-height: 18.75px; letter-spacing: 0.375px; }
  .ar-faq-icon { margin-right: 0; }
  .ar-faq-a { padding: 0 16px 16px; }

  .ar-contact { padding: 64px 0 48px; }
  .ar-book { grid-template-columns: 1fr; gap: 0; }
  /* Mobile design: the photo sits behind the eyebrow and heading */
  .ar-book-img {
    display: block;
    width: calc(100% + 2 * var(--ar-gutter));
    max-width: none;
    height: 220px;
    margin: -64px calc(-1 * var(--ar-gutter)) -150px;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  }
  .ar-book-copy { position: relative; }
  .ar-book-copy { display: flex; flex-direction: column; }
  .ar-book-title { margin-top: 12px; letter-spacing: -1.2px; }
  .ar-book-body { padding-left: 0; }
  .ar-book-body p + p { margin-top: 12px; line-height: 26px; }
  .ar-stay { display: none; }
  .ar-stay-copy p:last-child { font-size: 16px; line-height: 26px; }
  .ar-contact-grid { margin-top: 40px; gap: 16px; }
  .ar-addr { padding: 20px 20px 20px 36px; min-height: 0; }
  .ar-addr-1 { margin-top: 16px; font-size: 18px; }
  .ar-addr-email { font-size: 16px; line-height: 24px; }
  .ar-addr-serving { font-size: 16px; line-height: 24px; }
  .ar-hours { padding: 20px; }
  .ar-hours-list dt, .ar-hours-list dd { font-size: 13px; letter-spacing: 0; }
  .ar-hours-list > div { padding: 8px 0; }
  .ar-form-card { min-height: 0; padding: 20px; }
  .ar-form { margin-top: 24px; }
  .ar-form-row { grid-template-columns: 1fr; }
  .ar-label { font-size: 10px; line-height: 15px; letter-spacing: 2px; }
  .ar-input { font-size: 16px; line-height: 19.2px; }
  textarea.ar-input { height: 128px; line-height: 24px; }
  .ar-contact-fade { height: 50%; }

  .ar-footer-in { padding: 40px 0 32px; }
  .ar-footer-top { gap: 42px; }
  .ar-footer-logo img { width: 280px; }
  .ar-footer-tag { margin: 20px 0 0 36px; font-size: 49.98px; line-height: 50px; letter-spacing: 2.54px; }
  .ar-footer-contact { width: auto; gap: 8px; }
  .ar-footer-contact a, .ar-footer-contact p { font-size: 16px; line-height: 24px; }
  .ar-footer-bottom { justify-content: center; text-align: center; }
  .ar-footer-bottom p { font-size: 16px; line-height: 24px; }
}