:root {
  --bg: #ffffff;
  --fg: #222222;
  --accent: #E60012;
  --surface: #F4F4F4;
  --surface-dark: #141414;
  --black: #000000;
  --muted: #7F7F7F;
  --border: #D6D6D6;

  --r: 0px;
  --u: 8px;
  --font-display: "Oswald", "DIN Neuzeit Grotesk", "DecimaPro", sans-serif;
  --font-body: "Plus Jakarta Sans", "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", "DecimaMonoPro", "akkurat-mono", monospace;

  --hair: 1px solid var(--border);
  --hair-soft: 1px solid #EEEEEE;
  --hair-focus: 2px solid var(--accent);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--u) * 10);
  overflow-x: hidden;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Accessibility Skip Link */
.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: var(--fg);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: var(--r);
  font-weight: 550;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: top 0.15s ease-out;
}
.skip:focus-visible {
  top: 16px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Common Layout Utilities */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: calc(var(--u) * 3);
}
@media (min-width: 768px) {
  .wrap {
    padding-inline: calc(var(--u) * 4);
  }
}

.mono-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.rule {
  border: 0;
  border-top: var(--hair);
  margin: 0;
}

/* Typography Hierarchy */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 600;
}

h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r);
  background: var(--accent);
}
.kicker--dark {
  color: var(--fg);
}

.lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 65ch;
}

.caption {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Buttons and Controls */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--r);
  border: var(--hair);
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  user-select: none;
  white-space: nowrap;
}
.btn:hover {
  background: var(--bg);
  border-color: color-mix(in srgb, var(--fg) 25%, var(--border));
}
.btn:active {
  transform: scale(0.99);
}
.btn:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--fg));
  border-color: color-mix(in srgb, var(--accent) 88%, var(--fg));
  color: var(--bg);
}

.btn--dark {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn--dark:hover {
  background: color-mix(in srgb, var(--fg) 85%, var(--accent));
  border-color: color-mix(in srgb, var(--fg) 85%, var(--accent));
  color: var(--bg);
}

.btn--sm {
  font-size: 12px;
  padding: 8px 14px;
  min-height: 34px;
}

.btn--wide {
  width: 100%;
  white-space: normal;
  text-align: center;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.35;
}

/* Header & Telemetry Top Bar */
.topbar {
  background: var(--surface);
  border-bottom: var(--hair);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 6px;
}
.topbar__in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--fg);
}
.topbar__pulse {
  width: 6px;
  height: 6px;
  border-radius: var(--r);
  background: var(--accent);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--hair);
}
.nav__in {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  height: 64px;
}
.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--fg);
}
.nav__toyota-brand {
  height: 38px;
  width: auto;
  aspect-ratio: 922.7 / 538.88;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .nav__toyota-brand {
    height: 32px;
  }
}
.mark:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 4px;
  border-radius: var(--r);
}
.mark__badge {
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mark__badge span {
  color: var(--accent);
}
.mark__title {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.mark__sub {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  margin-left: auto;
}
.nav__links a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 510;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 6px 2px;
  position: relative;
  transition: color 0.15s;
}
.nav__links a:hover {
  color: var(--fg);
}
.nav__links a.is-active {
  color: var(--fg);
  font-weight: 600;
}
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}
.nav__links a:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 4px;
  border-radius: var(--r);
}

.nav__burger {
  display: none;
  background: transparent;
  border: var(--hair);
  border-radius: var(--r);
  padding: 8px;
  cursor: pointer;
  color: var(--fg);
  margin-left: auto;
}

@media (max-width: 900px) {
  .nav__burger {
    display: flex;
  }
  .nav__links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: var(--hair);
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--u) * 2) calc(var(--u) * 3);
    gap: 12px;
  }
  .nav__links.is-open {
    display: flex;
  }
  .nav__links a.is-active::after {
    display: none;
  }
}

/* Hero Section */
.hero {
  position: relative;
  background: var(--surface);
  border-bottom: var(--hair);
  padding-top: calc(var(--u) * 6);
  padding-bottom: calc(var(--u) * 8);
  overflow: hidden;
}
.hero__grid {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
}
.hero__head {
  order: 1;
}
.hero__stage {
  order: 2;
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.hero__body {
  order: 3;
}
@media (max-width: 600px) {
  .hero {
    padding-top: 24px;
    padding-bottom: 30px;
  }
  .hero__grid {
    gap: 16px;
  }
  .hero__stage {
    margin: 0 0 10px 0;
  }
  .hero__stage img {
    max-height: 290px;
    margin: 0 auto;
  }
  .hero__actions .tgr-btn-slanted {
    width: 100%;
    box-sizing: border-box;
  }
}
@media (min-width: 992px) {
  .hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-areas:
      "head stage"
      "body stage";
    gap: 0 calc(var(--u) * 6);
    align-items: center;
  }
  .hero__head {
    grid-area: head;
    align-self: end;
  }
  .hero__body {
    grid-area: body;
    align-self: start;
    margin-top: 18px;
  }
  .hero__stage {
    grid-area: stage;
  }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hero__chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r);
  background: var(--bg);
  border: var(--hair);
  color: var(--fg);
}
.hero__chip--accent {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border);
  border: var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 36px;
}
.hero__meta-cell {
  background: var(--bg);
  padding: 14px 16px;
}
.hero__meta-k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 4px;
}
.hero__meta-v {
  font-size: 17px;
  font-weight: 650;
  color: var(--fg);
}

.hero__stage > div {
  position: relative;
  width: 100%;
  aspect-ratio: 1059 / 637;
}

.hero__stage picture {
  display: block;
  width: 100%;
}

.hero__stage img {
  width: 100%;
  height: auto;
  aspect-ratio: 1059 / 637;
  object-fit: contain;
  display: block;
}
.hero__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border: var(--hair);
  border-radius: var(--r);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Telemetry Strip */
.telemetry {
  background: var(--bg);
  border-bottom: var(--hair);
  padding-block: calc(var(--u) * 3);
}
.telemetry__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--u) * 2);
}
@media (min-width: 768px) {
  .telemetry__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tele-item {
  padding: 12px 16px;
  border-left: 2px solid var(--border);
}
.tele-item:first-child {
  border-left-color: var(--accent);
}
.tele-item__v {
  font-size: 24px;
  font-weight: 650;
  line-height: 1.1;
  color: var(--fg);
}
.tele-item__v span {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.tele-item__k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-top: 4px;
}

/* Sections Global */
section {
  padding-block: calc(var(--u) * 8);
}
@media (min-width: 768px) {
  section {
    padding-block: calc(var(--u) * 11);
  }
}

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: calc(var(--u) * 5);
}
@media (min-width: 768px) {
  .sec-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

/* Configurator & Lineup */
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: var(--hair);
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: calc(var(--u) * 4);
}
.tab {
  appearance: none;
  background: transparent;
  border: var(--hair);
  border-radius: var(--r);
  color: var(--muted);
  padding: 10px 18px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.tab small {
  font-size: 11px;
  font-weight: 450;
  color: var(--muted);
}
.tab:hover {
  color: var(--fg);
  background: var(--surface);
}
.tab[aria-selected="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.tab[aria-selected="true"] small {
  color: color-mix(in srgb, var(--bg) 75%, transparent);
}
.tab:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 3px;
}

.cfg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 4);
}
@media (min-width: 992px) {
  .cfg-grid {
    grid-template-columns: 1.3fr 1fr;
  }
}

.cfg-viewport {
  position: relative;
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cfg-viewport img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s ease-out;
}
.cfg-viewport.is-swapping img {
  opacity: 0.4;
}
.cfg-controls {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cfg-views {
  display: flex;
  gap: 4px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  padding: 4px;
  border-radius: var(--r);
  border: var(--hair);
}
.cfg-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--r);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.cfg-btn:hover {
  color: var(--fg);
}
.cfg-btn.is-active {
  background: var(--fg);
  color: var(--bg);
}
.cfg-btn:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 2px;
}

.cfg-badge {
  background: var(--bg);
  border: var(--hair);
  border-radius: var(--r);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}
.cfg-badge--hev {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.card {
  background: var(--bg);
  border: var(--hair);
  border-radius: var(--r);
  padding: calc(var(--u) * 3);
  box-shadow: var(--shadow-sm);
}

.price-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r);
  padding: calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 3);
}
.price-card__main {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.price-card__est {
  text-align: right;
}
.price-card__val {
  font-size: 20px;
  font-weight: 650;
  color: var(--accent);
}
.price-card__sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.spec-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 10px;
  border-bottom: var(--hair-soft);
  font-size: 13px;
}
.spec-list li:last-child {
  border-bottom: 0;
}
.spec-list .k {
  color: var(--muted);
}
.spec-list .v {
  font-weight: 600;
  color: var(--fg);
}

.kit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.kit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.45;
}
.kit-list svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

/* Calculator Component */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 4);
}
@media (min-width: 992px) {
  .calc-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

.field {
  margin-bottom: calc(var(--u) * 3);
}
.field__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.field__val {
  font-size: 15px;
  font-weight: 650;
  color: var(--fg);
}

/* Range Inputs */
input[type=range] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r);
  background: linear-gradient(to right, var(--fg) 0%, var(--fg) var(--val-pct, 0%), var(--border) var(--val-pct, 0%), var(--border) 100%);
  outline: none;
  cursor: pointer;
  margin-block: 8px;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--r);
  background: var(--bg);
  border: 2px solid var(--fg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, border-color 0.15s;
}
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--r);
  background: var(--bg);
  border: 2px solid var(--fg);
  box-shadow: var(--shadow-sm);
}
input[type=range]:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 4px;
  border-radius: var(--r);
}

.pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pill {
  appearance: none;
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r);
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 550;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.pill:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--fg) 20%, var(--border));
}
.pill.is-active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.pill:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 2px;
}

.out-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: var(--hair);
  border-radius: var(--r);
  overflow: hidden;
}
.out-cell {
  background: var(--surface);
  padding: calc(var(--u) * 3);
}
.out-cell--hero {
  grid-column: 1 / -1;
  background: var(--bg);
  border-bottom: 2px solid var(--accent);
}
.out-cell__k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.out-cell__v {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fg);
}
.out-cell__v--accent {
  color: var(--accent);
}
.out-cell__note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* Feature Grid / Safety */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 3);
}
@media (min-width: 600px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.feat-card {
  background: var(--bg);
  border: var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, border-color 0.15s;
}
.feat-card:hover {
  border-color: rgba(230, 0, 18, 0.55);
}
.feat-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-dark);
  border-bottom: 1px solid var(--border);
}
.feat-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-out;
}
.feat-card:hover .feat-card__thumb img {
  transform: scale(1.04);
}
.feat-card__body {
  padding: calc(var(--u) * 2.5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.feat-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}
.feat-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--bg);
  border: var(--hair);
  border-radius: var(--r);
  padding: 16px 20px;
  margin-top: calc(var(--u) * 4);
}
.stars {
  display: flex;
  gap: 4px;
  color: var(--fg);
}

/* Colours Section */
.swatches {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  margin-bottom: calc(var(--u) * 3);
  align-items: center;
}
.swatch {
  appearance: none;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.swatch:hover {
  transform: scale(1.08);
}
.swatch[aria-pressed="true"],
.swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.swatch:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 3px;
}
.swatch__chip {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  display: block;
}

/* Gallery Mosaic */
.mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .mosaic {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .mosaic {
    grid-template-columns: repeat(4, 1fr);
  }
}
.shot {
  appearance: none;
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  padding: 0;
  display: block;
  text-align: left;
}
.shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease-out;
}
.shot:hover img {
  transform: scale(1.03);
}
.shot:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 3px;
}
.shot__cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Booking Form */
.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--u) * 4);
  width: 100%;
}
.book-grid .card,
.book-grid .summary {
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 992px) {
  .book-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
}
.form-grid > * {
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 600px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fg-full {
    grid-column: 1 / -1;
  }
}

.inp, select.inp {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: 44px;
  background: var(--bg);
  border: var(--hair);
  border-radius: var(--r);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inp:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 1px var(--fg);
}
.inp[aria-invalid="true"] {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
}

.lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg);
  margin-bottom: 6px;
}

.err {
  display: none;
  font-size: 12px;
  color: var(--fg);
  font-weight: 550;
  margin-top: 4px;
}
.err.is-on {
  display: block;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.45;
}
.check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: var(--r);
  margin-top: 2px;
  accent-color: var(--fg);
  cursor: pointer;
}

.formnote {
  display: none;
  padding: 12px 16px;
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 550;
  color: var(--fg);
  margin-bottom: 16px;
}
.formnote.is-on {
  display: block;
}

.done {
  display: none;
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r);
  padding: calc(var(--u) * 5);
  text-align: center;
}
.done.is-on {
  display: block;
}

.spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r);
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Lightbox Dialog */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(14px);
  padding: 24px;
  align-items: center;
  justify-content: center;
}
.lightbox.is-open {
  display: flex;
}
.lightbox__frame {
  max-width: 1080px;
  max-height: 90vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox__frame img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--r);
  border: var(--hair);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}
.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
}
.lightbox__close, .lightbox__nav {
  appearance: none;
  background: var(--bg);
  border: var(--hair);
  border-radius: var(--r);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg);
  transition: all 0.15s;
}
.lightbox__close:hover, .lightbox__nav:hover {
  background: var(--surface);
}
.lightbox__close:focus-visible, .lightbox__nav:focus-visible {
  outline: var(--hair-focus);
  outline-offset: 3px;
}

/* Footer */
.foot {
  background: var(--surface);
  border-top: var(--hair);
  padding-block: calc(var(--u) * 8);
  margin-top: auto;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 4);
}
@media (min-width: 768px) {
  .foot-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.foot-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.foot-links a {
  text-decoration: none;
  font-size: 13px;
  color: var(--muted);
  transition: color 0.15s;
}
.foot-links a:hover {
  color: var(--fg);
}
.disclaimer {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  border-top: var(--hair);
  padding-top: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 5);
}

/* --- TOYOTA GAZOO RACING DESIGN SYSTEM OVERRIDES --- */
* { border-radius: 0px !important; box-shadow: none !important; }

/* TGR Tri-Color Livery Slash */
.tgr-slash {
  display: inline-flex;
  height: 6px;
  width: 64px;
  transform: skewX(-20deg);
  margin-bottom: 16px;
}
.tgr-slash__b1 { flex: 1; background: #000000; }
.tgr-slash__b2 { flex: 1; background: #FFFFFF; border: 1px solid #D6D6D6; }
.tgr-slash__b3 { flex: 1.5; background: #E60012; }

/* Typography polish */
h1, h2, h3, .section-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  font-weight: 800 !important;
}

/* Category Badge standard */
.badge, [class*="badge"], .tag {
  border-radius: 0px !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-weight: 700 !important;
  background: var(--accent) !important;
  color: #FFFFFF !important;
}

/* TGR Button standard */
.btn-primary, button[type="submit"], .btn--primary {
  background: var(--surface-dark) !important;
  color: #FFFFFF !important;
  border-radius: 0px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.6px !important;
  transition: background 160ms ease, color 160ms ease !important;
}
.btn-primary:hover, button[type="submit"]:hover, .btn--primary:hover {
  background: var(--accent) !important;
  color: #FFFFFF !important;
}

/* Table telemetry standard */
table {
  border-collapse: collapse !important;
  border: 1px solid var(--border) !important;
  border-radius: 0px !important;
}
th {
  background: var(--surface-dark) !important;
  color: #FFFFFF !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-bottom: 2px solid var(--accent) !important;
}
td {
  border-bottom: 1px solid #EEEEEE !important;
  font-family: var(--font-mono) !important;
}
tr:nth-child(even) td {
  background: #F8F8F8 !important;
}


/* ==========================================================================
   TOYOTA GAZOO RACING - SIGNATURE VISUAL PATTERNS
   ========================================================================== */

/* 1. Slanted Eyebrow Header */
.tgr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.tgr-eyebrow--light {
  color: #111111;
}
.tgr-slash-mark {
  color: #E60012;
  font-weight: 900;
  font-size: 1.2em;
}

/* 2. Stacked Manifesto Headline */
.manifesto-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #111111;
  margin: 0 0 24px 0;
}
.manifesto-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: #444444;
  margin-bottom: 20px;
}
.manifesto-body strong {
  color: #111111;
}

/* 3. Slanted Parallelogram CTA Button (DETAIL >) */
.tgr-btn-slanted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #000000;
  padding: 12px 28px;
  transform: skewX(-14deg);
  text-decoration: none;
  border: 1px solid var(--accent, #E60012) !important;
  border-radius: 0px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.tgr-btn-slanted:hover {
  background: var(--accent, #E60012);
  border-color: var(--accent, #E60012) !important;
  color: #FFFFFF;
}
.tgr-btn-slanted:hover .tgr-chevron {
  color: #FFFFFF;
}
.tgr-btn-slanted__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: skewX(14deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: inherit;
}
.tgr-chevron {
  color: #E60012;
  font-weight: 900;
  font-style: normal;
  transition: color 180ms ease;
}

/* 4. Lineup Cards on Pitch Black Stage */
.stage-black {
  background: #000000;
  color: #FFFFFF;
  padding: 80px 0;
}
.tgr-lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.tgr-lineup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
}
.tgr-lineup-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: 24px;
}
.lineup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.lineup-badge__bar {
  color: #E60012;
  font-weight: 900;
  font-size: 16px;
}
.tgr-model-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 12px 0;
}
.tgr-model-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: #AAAAAA;
  max-width: 280px;
  margin: 0 0 24px 0;
  flex-grow: 1;
}

/* 5. Floating Right-Edge Anchor Tab (< GO UP) */
.tgr-floating-up {
  position: fixed;
  right: 0;
  bottom: 80px;
  background: #E60012;
  color: #FFFFFF;
  padding: 12px 10px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-decoration: none;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 180ms ease;
}
.tgr-floating-up:hover {
  background: #111111;
}

/* 6. Flat News Cards on Black with 50% Overlapping Slanted Badge */
.tgr-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 36px;
}
.tgr-news-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  text-decoration: none;
}
.tgr-thumb-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: visible;
  margin-bottom: 22px;
}
.tgr-thumb-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tgr-badge-overlapping {
  position: absolute;
  bottom: -12px;
  left: 0;
  background: #E60012;
  color: #FFFFFF;
  padding: 4px 14px;
  transform: skewX(-15deg);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.tgr-badge-overlapping span {
  display: inline-block;
  transform: skewX(15deg);
}
.tgr-news-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
  color: #FFFFFF;
  margin: 0 0 10px 0;
}
.tgr-news-excerpt {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: #A0A0A0;
  margin: 0 0 16px 0;
  flex-grow: 1;
}
.tgr-news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #222222;
}
.tgr-news-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #7F7F7F;
}
.tgr-news-more {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 7. WRC Round Selector Strip */
.tgr-round-strip {
  display: flex;
  overflow-x: auto;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid #EEEEEE;
  border-bottom: 1px solid #EEEEEE;
  margin: 30px 0;
  scrollbar-width: none;
}
.tgr-round-strip::-webkit-scrollbar { display: none; }
.tgr-round-tab {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  color: #666666;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 8px;
  position: relative;
  cursor: pointer;
}
.tgr-round-tab--active {
  color: #E60012;
}
.tgr-round-tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 3px;
  background: #E60012;
}

/* 8. Stage Action Buttons */
.tgr-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.tgr-btn-stage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000000;
  color: #FFFFFF;
  padding: 16px 20px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border: 1px solid #222222;
  transition: background 180ms ease, border-color 180ms ease;
}
.tgr-btn-stage:hover {
  background: #141414;
  border-color: #E60012;
}
.tgr-btn-stage .tgr-chevron {
  font-size: 16px;
}

.tgr-initial { color: #E60012 !important; }

/* ==========================================================================
   STAGGERED SECTION-TO-SECTION SCROLL REVEALS & LINEUP CAROUSEL
   ========================================================================== */

.tgr-reveal-section {
  position: relative;
}
.tgr-reveal-eyebrow,
.tgr-reveal-title,
.tgr-reveal-body {
  opacity: 1 !important;
  transform: none !important;
}

/* Lineup Carousel & Card Track */
.tgr-carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.tgr-carousel-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 24px 8px;
  scrollbar-width: none;
}
.tgr-carousel-track::-webkit-scrollbar {
  display: none;
}

/* Card Styling */
.tgr-lineup-card {
  flex: 0 0 calc(33.333% - 22px);
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #0D0D0D;
  border: 1px solid #222222;
  padding: 28px 24px 32px 24px;
  scroll-snap-align: center;
  border-radius: 0px !important;
  opacity: 0.82;
  transform: scale(0.98);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease, box-shadow 240ms ease;
  will-change: transform, opacity;
}
.tgr-lineup-card.is-semi-active,
.tgr-lineup-card:hover {
  opacity: 0.93;
  transform: scale(0.99);
  border-color: rgba(230, 0, 18, 0.55);
  box-shadow: 0 4px 20px rgba(230, 0, 18, 0.12);
}
.tgr-lineup-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: #E60012;
  box-shadow: 0 8px 30px rgba(230, 0, 18, 0.15);
}
.tgr-lineup-card__thumb-box {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  background: radial-gradient(circle at center, #222222 0%, #0c0c0c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tgr-lineup-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px 8px;
  display: block;
  transition: transform 400ms ease;
}
.tgr-lineup-card:hover .tgr-lineup-card__thumb {
  transform: scale(1.04);
}

/* Bullet Points */
.tgr-specs-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 28px 0;
  text-align: left;
  width: 100%;
}
.tgr-specs-header {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  margin-bottom: 12px;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 6px;
}
.tgr-specs-list li:not(.tgr-specs-header) {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  color: #E2E2E2;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tgr-bullet {
  color: #E60012;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Carousel Controls & Dots */
.tgr-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.tgr-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #141414;
  color: #FFFFFF;
  border: 1px solid #333333;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  border-radius: 0px !important;
  transition: background 180ms ease, border-color 180ms ease;
}
.tgr-carousel-btn:hover {
  background: #E60012;
  border-color: #E60012;
}
.tgr-carousel-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tgr-carousel-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #141414;
  color: #888888;
  border: 1px solid #282828;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0px !important;
  transition: all 180ms ease;
}
.tgr-carousel-dot span {
  width: 6px;
  height: 6px;
  background: #555555;
  display: inline-block;
  transform: skewX(-14deg);
}
.tgr-carousel-dot.is-semi-active,
.tgr-carousel-dot:hover {
  background: #1C1C1C;
  color: #DDDDDD;
  border-color: rgba(230, 0, 18, 0.55);
}
.tgr-carousel-dot.is-active {
  background: #222222;
  color: #FFFFFF;
  border-color: #E60012;
}
.tgr-carousel-dot.is-active span {
  background: #E60012;
}

/* Mobile & Tablet Specific (< 1024px) */
@media (max-width: 1024px) {
  .tgr-carousel-track {
    gap: 16px;
    padding: 16px 20px;
  }
  .tgr-lineup-card {
    flex: 0 0 85vw;
    min-width: 85vw;
    max-width: 85vw;
    scroll-snap-align: center;
  }
  /* Peek hint on last child right margin */
  .tgr-lineup-card:last-child {
    margin-right: 15vw;
  }
}


@media (min-width: 900px) {
  .colour-grid {
    grid-template-columns: 1.15fr 1fr !important;
    gap: 48px !important;
  }
}



/* ==========================================================================
   V4 ADDITIONS - SA identity, anti-scam shield, delta ledger, sticky summary
   Built on the TGR token layer above. Zero radius, zero blur, red accent only.
   ========================================================================== */

/* --- SA identity mark (replaces the UMW/TGR masthead) --- */
.sa-mark__badge {
  background: var(--surface-dark);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.sa-mark__badge b { color: var(--accent); font-weight: 800; }

/* --- Section 2: anti-scam shield ---
   TGR structural sharpness, but on light surface. A trust section delivered on
   a black racing stage reads as swagger, which is the opposite of the job. */
.shield {
  background: var(--surface);
  border-top: var(--hair);
  border-bottom: var(--hair);
}
.shield-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: var(--hair);
  margin-top: calc(var(--u) * 4);
}
@media (min-width: 700px) { .shield-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .shield-grid { grid-template-columns: repeat(5, 1fr); } }
.shield-cell {
  background: var(--bg);
  padding: calc(var(--u) * 3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid var(--accent);
}
.shield-cell__k {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.3;
}
.shield-cell__v { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* --- Ledger rows: the Section 5 delta stack --- */
.ledger {
  border: var(--hair);
  background: var(--bg);
  margin-top: calc(var(--u) * 3);
}
.ledger__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px calc(var(--u) * 2.5);
  border-bottom: var(--hair-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
}
.ledger__row span:first-child { color: var(--muted); letter-spacing: 0.4px; }
.ledger__row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger__row--plus b { color: var(--fg); }
.ledger__row--minus b { color: var(--fg); }
.ledger__row--total {
  border-bottom: 0;
  border-top: 2px solid var(--accent);
  background: var(--surface);
  padding-block: 18px;
}
.ledger__row--total span:first-child {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg);
  font-size: 13px;
}
.ledger__row--total b { font-size: 26px; color: var(--accent); }

.verdict {
  margin-top: calc(var(--u) * 3);
  padding: calc(var(--u) * 2.5);
  background: var(--surface-dark);
  color: #FFFFFF;
  border-left: 4px solid var(--accent);
  font-size: 14px;
  line-height: 1.65;
}
.verdict b { color: #FFFFFF; }

.scope-note {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}

/* --- Section 7: colour swapper --- */
.colour-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 4);
  align-items: start;
}
.colour-stage {
  background: transparent;
  border: none;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}
.colour-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  transition: opacity 180ms ease-out;
}
.colour-stage.is-swapping img { opacity: 0.35; }
.colour-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 10px;
}

/* --- Section 8: sticky summary panel --- */
.summary {
  background: var(--surface-dark);
  color: #FFFFFF;
  border: 1px solid #222222;
  border-top: 3px solid var(--accent);
}
@media (min-width: 992px) { .summary { position: sticky; top: 84px; } }
.summary__head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 16px calc(var(--u) * 2.5);
  border-bottom: 1px solid #222222;
  color: #FFFFFF;
}
.summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px calc(var(--u) * 2.5);
  border-bottom: 1px solid #1E1E1E;
  font-size: 13px;
}
.summary__row span { color: #8A8A8A; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.4px; }
.summary__row b { color: #FFFFFF; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.summary__row--key { background: #0D0D0D; padding-block: 16px; }
.summary__row--key b { color: var(--accent); font-size: 22px; }
.summary__foot {
  padding: 14px calc(var(--u) * 2.5);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8A8A8A;
}

/* --- TSS accordion (Section 6) --- */
.acc { border: var(--hair); margin-top: calc(var(--u) * 3); background: var(--bg); }
.acc__btn {
  width: 100%;
  appearance: none;
  background: var(--surface);
  border: 0;
  border-bottom: var(--hair);
  padding: 16px calc(var(--u) * 2.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--fg);
  text-align: left;
}
.acc__btn:hover { background: var(--bg); }
.acc__btn:focus-visible { outline: var(--hair-focus); outline-offset: -2px; }
.acc__btn i { color: var(--accent); font-style: normal; font-weight: 900; font-size: 16px; }
.acc__panel { padding: calc(var(--u) * 3); }
.acc__panel[hidden] { display: none; }
.tss-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 2); }
@media (min-width: 700px) { .tss-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tss-grid { grid-template-columns: repeat(3, 1fr); } }
.tss-item { border-left: 2px solid var(--border); padding: 4px 0 4px 14px; }
.tss-item:nth-child(3n+1) { border-left-color: var(--accent); }
.tss-item h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tss-item p { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* --- Buyer Approval Stories (Gazoo Racing styling) --- */
.buyer-stories__heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
@media (min-width: 768px) {
  .buyer-stories__heading { font-size: 26px; }
}
.buyer-stories__sub {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 68ch;
}
.stories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 2.5);
}
@media (min-width: 900px) {
  .stories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.story-card {
  background: var(--bg);
  border: var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: calc(var(--u) * 3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.story-card:hover {
  border-color: var(--fg);
  border-left-color: var(--accent);
}
.story-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.story-card__tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.story-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.story-card__body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg);
  font-style: italic;
}

/* --- Reviews --- */
.quote-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 4); }
@media (min-width: 900px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }
.quote {
  background: var(--bg);
  border: var(--hair);
  border-top: 3px solid var(--accent);
  padding: calc(var(--u) * 3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quote p { font-size: 14px; line-height: 1.65; color: var(--fg); font-style: italic; }
.quote cite {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}

/* --- Showroom block --- */
.showroom-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: var(--hair); }
@media (min-width: 800px) { .showroom-grid { grid-template-columns: repeat(3, 1fr); } }
.showroom-cell { background: var(--bg); padding: calc(var(--u) * 3); }
.showroom-cell h4 { margin-bottom: 8px; color: var(--muted); }
.showroom-cell p { font-size: 14px; line-height: 1.6; color: var(--fg); }

/* --- Mobile sticky CTA bar --- */
.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: var(--surface-dark);
  border-top: 2px solid var(--accent);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-bar.is-visible {
  transform: translateY(0);
}
.cta-bar__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cta-bar__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8A8A8A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cta-bar__v {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}
.cta-bar .tgr-btn-slanted {
  padding: 9px 16px;
  transform: skewX(-10deg);
  flex-shrink: 0;
}
.cta-bar .tgr-btn-slanted__inner {
  transform: skewX(10deg);
  font-size: 12px;
  letter-spacing: 0.8px;
  gap: 6px;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .cta-bar .tgr-btn-slanted__inner {
    font-size: 11px;
    letter-spacing: 0.4px;
  }
}
/* Hide sticky dock whenever form or footer is in DOM viewport or scrolled into */
#check-eligibility:focus-within ~ .cta-bar,
body:has(#check-eligibility:hover) .cta-bar {
  transform: translateY(100%) !important;
}

@media (max-width: 991px) {
  #check-eligibility {
    padding-bottom: 120px !important;
  }
}
@media (min-width: 992px) { .cta-bar { display: none !important; } }
@media (max-width: 991px) { 
  body { padding-bottom: 96px; } 
  .tgr-floating-up { display: none !important; } 
}

/* --- Radio cards for the variant picker in the form --- */
.radio-stack { display: flex; flex-direction: column; gap: 10px; }
.radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: var(--hair);
  background: var(--bg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.radio-card:hover { border-color: rgba(230, 0, 18, 0.55); }
.radio-card input { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.radio-card__t { font-size: 14px; font-weight: 600; color: var(--fg); }
.radio-card__s { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.radio-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }

/* --- Struck-through before-rebate figure --- */
.strike {
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  color: var(--muted);
}

/* --- Lead Magnet Section --- */
.lead-magnet-section {
  padding: calc(var(--u) * 6) 0;
}
.lead-magnet-card {
  background: var(--bg);
  border: var(--hair);
  border-radius: var(--r);
  border-left: 4px solid var(--accent);
  padding: clamp(20px, 3.5vw, 36px);
  box-shadow: var(--shadow-sm);
}
.lead-magnet-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 12px;
}
.lead-magnet-card__title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.25;
  color: var(--fg);
}
.lead-magnet-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
  margin-bottom: 20px;
  max-width: 72ch;
}
.lead-magnet-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lead-magnet-bullets li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lead-magnet-bridge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.5;
  flex-wrap: wrap;
}
.lead-magnet-bridge__icon {
  flex-shrink: 0;
}
.lead-magnet-bridge__text {
  flex: 1 1 280px;
}
.lead-magnet-bridge__action {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .lead-magnet-card {
    padding: calc(var(--u) * 2.5);
  }
  .lead-magnet-bullets li {
    font-size: 13.5px;
  }
  .lead-magnet-bridge {
    font-size: 13px;
    padding: 14px 16px;
  }
  .lead-magnet-bridge__action {
    width: 100%;
  }
  .lead-magnet-bridge__action .tgr-btn-slanted {
    width: 100%;
  }
}

/* --- Guide Layout (3D PDF Publication Mockup) --- */
.guide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 992px) {
  .guide-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
  }
}
.guide-mockup-wrapper {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.guide-mockup-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.12));
}

/* --- Telemetry Dock (Gazoo Racing 2) --- */
.telemetry-dock {
  background: var(--surface, #F4F4F4);
  border: 1px solid var(--border, #D6D6D6);
  border-radius: 0px;
  margin-top: 48px;
}
.telemetry-dock__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .telemetry-dock__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .telemetry-dock__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.telemetry-dock__cell {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border, #D6D6D6);
  position: relative;
}
@media (min-width: 600px) {
  .telemetry-dock__cell:nth-child(odd) {
    border-right: 1px solid var(--border, #D6D6D6);
  }
}
@media (min-width: 992px) {
  .telemetry-dock__cell {
    border-bottom: none !important;
    border-right: 1px solid var(--border, #D6D6D6) !important;
  }
  .telemetry-dock__cell:last-child {
    border-right: none !important;
  }
}
.telemetry-dock__icon {
  width: 28px;
  height: 28px;
  color: var(--accent, #E60012);
  margin-bottom: 12px;
  display: block;
}
.telemetry-dock__k {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 4px;
}
.telemetry-dock__v {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.2;
}
.telemetry-dock__d {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
}

/* --- Split-Studio Shield Layout --- */
.shield-studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 36px;
}
@media (min-width: 992px) {
  .shield-studio-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
    align-items: stretch;
  }
}
.shield-advisor-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  padding: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.shield-pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .shield-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.shield-pillar-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

/* --- Mobile Swipe Carousel for Variant Cards --- */
.variant-swipe-hint {
  display: none;
}

@media (max-width: 899px) {
  .variant-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    margin-bottom: -18px;
    padding: 0 2px;
  }
  .variant-swipe-hint__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(230, 0, 18, 0.08);
    border: 1px solid rgba(230, 0, 18, 0.28);
    border-left: 3px solid var(--accent);
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--fg);
  }
  .variant-swipe-hint__icon {
    color: var(--accent);
    animation: tgrSwipeNudge 1.6s ease-in-out infinite;
  }
  @keyframes tgrSwipeNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
  }
  .variant-swipe-dots {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }
  .variant-dot {
    display: block;
    width: 8px;
    height: 8px;
    background: var(--border);
    border-radius: 0px;
    transition: all 200ms ease;
    cursor: pointer;
  }
  .variant-dot.active {
    width: 22px;
    background: var(--accent);
  }

  .lineup-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding-bottom: 24px !important;
    padding-inline: 16px !important;
    margin-inline: -16px !important;
    scrollbar-width: none;
  }
  .lineup-grid::-webkit-scrollbar {
    display: none;
  }
  .lineup-grid > .card {
    flex: 0 0 85vw !important;
    max-width: 85vw !important;
    scroll-snap-align: center !important;
  }
}

.lineup-grid > .card {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.lineup-grid > .card:hover {
  border-color: rgba(230, 0, 18, 0.45) !important;
  box-shadow: 0 6px 24px rgba(230, 0, 18, 0.09) !important;
  transform: translateY(-3px);
}


/* --- Form and Turnstile Responsive Layout Fixes --- */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
}

.form-main {
  min-width: 0;
  width: 100%;
}

#eligForm {
  padding: 24px 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

@media (min-width: 640px) {
  #eligForm {
    padding: calc(var(--u) * 4) !important;
  }
}

.turnstile-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.turnstile-wrapper .cf-turnstile {
  max-width: 100% !important;
  display: flex;
  justify-content: center;
}

.turnstile-wrapper .cf-turnstile iframe {
  max-width: 100% !important;
}

.field-variant-option {
  display: flex;
  align-items: flex-start !important;
  gap: 12px;
  padding: 12px 16px;
  border: var(--hair);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 150ms ease, background 150ms ease;
}

.field-variant-option:hover {
  border-color: rgba(230, 0, 18, 0.45);
}

.field-variant-option input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.field-variant-option span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  body.has-scroll-reveals .tgr-reveal-eyebrow,
  body.has-scroll-reveals .tgr-reveal-title,
  body.has-scroll-reveals .tgr-reveal-body { opacity: 1 !important; transform: none !important; }
}