main .wrap,
.racebox-footer .wrap {
  width: min(1320px, calc(100% - clamp(36px, 8vw, 112px)));
}

.racebox-story {
  background: linear-gradient(160deg, var(--ink) 10%, #111112 49%, #1c1c1d 100%);
}

.racebox-hero-layout {
  --hero-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  --hero-column-gap: clamp(24px, 3.2vw, 52px);
  display: grid;
  grid-template-columns: var(--hero-columns);
  grid-template-areas: "intro visual" "details details" "actions actions";
  reading-flow: grid-rows;
  align-items: start;
  gap: clamp(15px, 1.7vw, 25px) var(--hero-column-gap);
  padding-block: clamp(34px, 4.2vw, 66px) clamp(25px, 2.7vw, 42px);
}

.racebox-proof .kicker { color: #ffab86; }
.racebox-hero .kicker { color: var(--muted); font-size: 13px; }

.racebox-hero h1 {
  font: 400 clamp(42px, 4.65vw, 72px)/.98 var(--display);
  letter-spacing: -.018em;
}

.racebox-hero h1 > span { display: block; }
.racebox-hero h1 em { color: #e23a2e; font-style: normal; }

.racebox-hook {
  max-width: 33ch;
  margin-top: clamp(14px, 1.5vw, 21px);
  font-size: clamp(20px, 1.82vw, 29px);
  font-weight: 640;
  line-height: 1.23;
}

.racebox-brand-wordmark { color: var(--white); }
.racebox-brand-wordmark > span { color: var(--teal); }

.racebox-intro { grid-area: intro; align-self: center; }

.racebox-measured {
  max-width: 48ch;
  margin-top: clamp(16px, 1.8vw, 26px);
  color: #e3e9f1;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
}
.racebox-measured strong { color: var(--white); font-weight: 660; }

.racebox-hero-details {
  grid-area: details;
  display: grid;
  grid-template-columns: var(--hero-columns);
  gap: 14px var(--hero-column-gap);
  padding-top: clamp(14px, 1.5vw, 22px);
  border-top: 1px solid var(--rule);
  color: #d4d4d6;
  font-size: 14px;
}
.racebox-record { max-width: 57ch; }

.racebox-hero-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 16px;
}

.racebox-hero-actions .racebox-setup-link {
  padding-inline: 6px;
  background: transparent;
  color: #d4d4d6;
  text-underline-offset: .25em;
}

.racebox-setup-link:hover { text-decoration: underline; }

.racebox-hero-visual {
  grid-area: visual;
  position: relative;
  isolation: isolate;
  width: min(100%, 730px);
  margin: 0 auto;
}

.racebox-hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9% -5% -6% -9%;
  background:
    radial-gradient(ellipse 27% 24% at 72% 74%, #29292a, transparent),
    radial-gradient(ellipse 48% 48% at 48% 48%, #222223, transparent);
  pointer-events: none;
}

.racebox-hero-device { width: 89%; margin-left: 3%; }

.racebox-hero-laptop {
  position: relative;
  padding: clamp(5px, .75vw, 10px);
  border: 1px solid #6a6a6c;
  border-radius: clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px) 4px 4px;
  background: #0b0b0c;
  box-shadow: 0 14px 32px #000a;
}

.racebox-hero-laptop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -3%;
  width: 106%;
  height: clamp(4px, .65vw, 9px);
  border-radius: 0 0 45% 45% / 0 0 100% 100%;
  background: linear-gradient(#9e9e9e, #424243 78%);
}

.racebox-hero-laptop img { display: block; width: 100%; height: auto; border-radius: 5px; }

.racebox-hero-receiver {
  position: relative;
  width: clamp(124px, 16.5vw, 238px);
  margin: 0 1% 0 auto;
}

.racebox-receiver-cutout {
  position: relative;
  display: block;
  aspect-ratio: 1007 / 718;
}

.racebox-receiver-cutout img {
  /* Match the visible silhouette of the supplied transparent PNG. */
  position: absolute;
  inset: -25.35% auto auto -23.54%;
  width: 143.79%;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 8px 10px #000c);
}

.racebox-engine-branch {
  max-width: 55ch;
}

.racebox-engine-branch h2 {
  display: inline;
  margin-right: .2em;
  color: var(--white);
  font-size: inherit;
  font-weight: 580;
  letter-spacing: normal;
}

.racebox-engine-branch p { display: inline; }
.racebox-engine-branch .text-link { margin-top: 3px; font-size: inherit; }

.racebox-start .store-row { margin-top: 9px; }
.racebox-start-plans { margin-top: 8px; color: #214f9e; font-size: 14px; }

.racebox-proof-image figcaption { margin-top: 10px; color: #cbd7e5; font-size: 13px; }

.racebox-setup,
.racebox-finish,
.racebox-faq { padding-block: clamp(36px, 5.3vw, 76px); }

.racebox-proof { padding-bottom: clamp(34px, 4.5vw, 68px); }

.racebox-proof > .wrap {
  padding-top: clamp(18px, 2.3vw, 32px);
  border-top: 1px solid var(--rule);
}

.racebox-proof-heading,
.racebox-faq > .wrap {
  max-width: 850px;
}

.racebox-proof-heading {
  margin-inline: auto;
  text-align: center;
}

.racebox-proof-heading h2,
.racebox-setup-heading h2,
.racebox-finish h2 {
  font-size: clamp(26px, 2.6vw, 37px);
  letter-spacing: -.038em;
  text-wrap: pretty;
}

.racebox-proof-heading p:not(.kicker),
.racebox-setup-heading p:not(.kicker) {
  max-width: 65ch;
  margin-top: 13px;
}

.racebox-proof-heading p:not(.kicker) { margin-inline: auto; }
.racebox-proof p:not(.kicker) { color: #d5dfeb; }
.racebox-gallery { margin: clamp(20px, 3vw, 38px) auto 0; max-width: 1120px; }
.racebox-tabs[hidden], .racebox-panel[hidden] { display: none; }

.racebox-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.racebox-tabs button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #5a5a5c;
  border-radius: 5px;
  background: transparent;
  color: #cbd7e5;
  cursor: pointer;
  font: 530 15px/1.25 var(--body);
}

.racebox-tabs button:hover { color: #fff; }
.racebox-tabs button[aria-selected="true"] { border-color: #e23a2e; color: #fff; background: #30201f; }
.racebox-tabs button:focus-visible,
.racebox-panel:focus-visible { outline: 2px solid #ffb586; outline-offset: 3px; }

.racebox-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(16px, 4vw, 50px);
  padding-block: clamp(20px, 3vw, 42px) 20px;
}

.racebox-panel h3 {
  margin-bottom: 8px;
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 590;
}

.racebox-example-lead {
  max-width: 62ch;
  margin-bottom: 15px;
  font-size: clamp(15px, 1.3vw, 17px);
}
.racebox-example-lead strong { color: #ffab86; font-weight: 650; }

.racebox-panel-copy {
  max-width: 65ch;
}
.racebox-panel-copy .text-link { display: inline-block; margin-top: 10px; }

.racebox-gallery-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  border: 1px solid #606061;
  border-radius: 7px;
  background: var(--ink);
}

.racebox-proof-link {
  display: block;
  max-width: 1120px;
  margin: 4px auto 0;
  font-size: 14px;
}

@media (max-width: 760px) {
  .racebox-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #racebox-panel-phases .racebox-gallery-video { aspect-ratio: 4 / 5; }
  .racebox-panel-copy { display: contents; }
  .racebox-panel-copy h3, .racebox-panel-copy .racebox-example-lead { margin-bottom: 0; }
  .racebox-proof-image { order: 1; }
  .racebox-panel-copy > :not(h3, .racebox-example-lead) { order: 2; }
}

.racebox-setup { background: #edf0ed; color: #182433; color-scheme: light; }
.racebox-setup .kicker { color: #894231; }
.racebox-setup p:not(.kicker) { color: #384657; }
.racebox-setup .text-link { color: #214f9e; }
.racebox-setup :focus-visible { outline-color: #214f9e; }
.racebox-setup > .wrap { max-width: 1140px; }
.racebox-setup-layout {
  display: grid;
  gap: clamp(26px, 4vw, 54px);
  margin-top: clamp(25px, 3vw, 44px);
}

@media (min-width: 901px) {
  .racebox-setup-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: start;
  }
  .racebox-gear-gps { grid-area: 1 / 1; }
  .racebox-gear-ecu { grid-area: 2 / 1; }
  .racebox-start { grid-area: 1 / 2 / 3; }
}

.racebox-gear-ecu {
  padding-top: clamp(17px, 2vw, 27px);
  border-top: 1px solid #b8c0c6;
}

.racebox-start {
  padding: clamp(20px, 3vw, 38px);
  background: linear-gradient(152deg, #262627, #171718 70%);
  color: #f6f7f8;
  color-scheme: dark;
}
.racebox-setup .racebox-start p { color: #d9dce0; }
.racebox-setup .racebox-start .text-link { color: #aac5ff; }
.racebox-setup .racebox-start :focus-visible { outline-color: #aac5ff; }

.racebox-gear-item p { max-width: 71ch; margin-top: 7px; }
.racebox-gear-variants { margin-top: 16px; }
.racebox-gear-variants h4 { font-size: 15px; font-weight: 620; }
.racebox-gear-variants .text-link { margin-top: 7px; font-size: 14px; }
.racebox-start h3,
.racebox-gear-item h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 610;
  letter-spacing: -.024em;
}

.racebox-model-descriptions { margin-block: 12px 8px; }

.racebox-model-descriptions > div {
  display: grid;
  grid-template-columns: minmax(105px, .4fr) minmax(0, 1fr);
  gap: 3px 12px;
  padding-block: 8px;
  border-bottom: 1px solid #c4ccd1;
  font-size: 14px;
}

.racebox-model-descriptions dt { font-weight: 650; }
.racebox-model-descriptions dd { margin: 0; color: #384657; }

.racebox-steps { margin: 13px 0 0; padding: 0; list-style: none; counter-reset: racebox-step; }
.racebox-steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding-block: 13px;
  counter-increment: racebox-step;
}
.racebox-steps li + li { border-top: 1px solid #ffffff25; }

.racebox-steps li::before {
  content: counter(racebox-step, decimal-leading-zero);
  padding-top: 3px;
  color: #ffab86;
  font: 580 25px/1 var(--body);
  font-variant-numeric: tabular-nums;
}

.racebox-steps strong { font-size: 16px; font-weight: 620; }
.racebox-steps p { margin-top: 3px; font-size: 15px; }

.racebox-finish {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--graphite);
}

.racebox-finish > .wrap { max-width: 1140px; }
.racebox-finish-copy { max-width: 510px; }

.racebox-finish-photo {
  position: absolute;
  inset: 0 0 0 43%;
  z-index: -1;
  pointer-events: none;
}

.racebox-finish-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--graphite) 2%, transparent 58%);
}

.racebox-finish-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 68%;
}

.racebox-finish p:not(.kicker) { margin-top: 5px; color: #d5dfeb; max-width: 47ch; }
.racebox-access {
  display: grid;
  gap: 25px;
  margin-top: 22px;
}
.racebox-access h3 { font-size: clamp(17px, 1.55vw, 21px); font-weight: 610; }

.racebox-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(16px, 3vw, 38px);
  margin: 13px 0 0;
}
.racebox-prices dt { color: var(--muted); font-size: 13px; }
.racebox-prices dd { margin: 1px 0 0; font-size: 20px; font-weight: 650; }
.racebox-prices small { color: var(--muted); font-size: 12px; font-weight: 400; }

.racebox-access .actions, .racebox-access .store-row { margin-top: 12px; }

@media (max-width: 960px) {
  .racebox-finish { padding-bottom: 0; }
  .racebox-finish-photo {
    position: relative;
    inset: auto;
    width: calc(100% + clamp(36px, 8vw, 112px));
    margin: 18px 0 0 calc(clamp(36px, 8vw, 112px) / -2);
  }
  .racebox-finish-photo::after {
    background: linear-gradient(var(--graphite), transparent 43%);
  }
  .racebox-finish-photo img { height: auto; aspect-ratio: 2.5; }
}

@media (max-width: 360px) {
  .racebox-prices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .racebox-prices dd { font-size: 18px; }
  .racebox-prices small { display: block; font-size: 11px; }
  .racebox-access .actions .button { padding-inline: 10px; font-size: 13px; }
}

.racebox-faq {
  border-top: 1px solid var(--rule);
  --ink: #f6f7f8;
  --ink-2: #d5dfeb;
  --ink-3: #bfccdb;
  --line: #454546;
  --blue: #aac5ff;
  --disp: var(--display);
}

.racebox-footer { padding-block: 14px; border-top: 1px solid var(--rule); }
.racebox-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(12px, 3vw, 30px); }
.racebox-footer a { font-size: 14px; }
main [id^="racebox-"] { scroll-margin-top: 76px; }

@media (max-width: 800px) {
  .racebox-hero-layout {
    --hero-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "actions" "visual" "details";
    row-gap: 20px;
  }
  .racebox-hero-visual { width: min(100%, 550px); }
  .racebox-hero-device { width: 92%; margin-left: 2%; }
}

@media (max-width: 530px) {
  .racebox-hero-layout { padding-block: 28px; }
  .racebox-hero h1 { font-size: clamp(35px, 10.4vw, 47px); }
  .racebox-hero-actions .primary { padding-inline: 12px; }
  .racebox-proof-heading { text-align: left; }
  .racebox-proof-heading p:not(.kicker) { margin-inline: 0; }
  .racebox-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .racebox-tabs button { padding-inline: 6px; }
  .racebox-start { margin-inline: -18px; padding-inline: 18px; }
  .racebox-steps li { gap: 9px; }
  main [id^="racebox-"] { scroll-margin-top: 66px; }
  .racebox-tabs button { font-size: 13px; }
  .racebox-finish-photo img { aspect-ratio: 1.65; }
}

.racebox-gear-variants ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-block: 14px 17px;
}

.racebox-gear-variants li {
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.3;
}

.racebox-gear-variants li > img,
.racebox-adapter-photo {
  display: block;
  height: clamp(87px, 11vw, 138px);
  margin-bottom: 8px;
}

.racebox-adapter-photo {
  overflow: hidden;
  display: grid;
  place-items: center;
  mix-blend-mode: multiply;
}

.racebox-gear-variants .racebox-adapter-photo img {
  width: auto;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.racebox-adapter-photo--cx img { transform: scale(1.2); }
.racebox-adapter-photo--ucs img {
  clip-path: polygon(9% 61%, 10% 54%, 18.5% 49%, 18.5% 42%, 20% 37%, 31% 26%, 43% 17%, 53% 10%, 55% 9.3%, 60% 9.6%, 65% 11%, 74% 15%, 85% 22%, 92% 30%, 94% 36%, 94% 45%, 91% 51%, 82% 61%, 68% 72%, 64% 79%, 59% 82%, 55% 88%, 48% 92%, 44% 91.5%, 32% 83%, 22% 75%, 12% 67%);
  transform: scale(1.14);
}
.racebox-adapter-photo--nextgen img { transform: scale(1.95); }

@media (max-width: 530px) {
  .racebox-gear-variants ul { gap: 6px; }
  .racebox-gear-variants li { padding-inline: 2px; }
  .racebox-hero-layout { padding-top: 24px; }
  .racebox-hook { margin-top: 13px; }
  .racebox-hero .kicker { margin-bottom: 7px; }
}