/* ==========================================================================
   Light Bee 2 — launch page styles
   Namespaced .lb2- throughout; no dependency on the compiled Tailwind build.
   Brand: Rev Monkey black / volt green #32cd32 / Bebas Neue + Nunito Sans.
   Mobile-first: the majority of this audience is on a phone.
   ========================================================================== */

.lb2 {
  --lb2-ink: #0a0a0b;
  --lb2-carbon: #131315;
  --lb2-panel: #1a1a1d;
  --lb2-line: rgba(242, 240, 235, 0.14);
  --lb2-volt: #32cd32;
  --lb2-volt-2: #0db10b;
  --lb2-bone: #f2f0eb;
  --lb2-ash: #98988f;
  --lb2-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --lb2-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --lb2-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --lb2-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --lb2-max: 80rem;
  background: var(--lb2-ink);
  color: var(--lb2-bone);
  font-family: var(--lb2-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
}

.lb2 *,
.lb2 *::before,
.lb2 *::after { box-sizing: border-box; }

.lb2 img, .lb2 video { max-width: 100%; height: auto; display: block; }

/* Keep macOS rubber-band overscroll dark while this page is mounted */
body:has(.lb2) { background: #0a0a0b; }

.lb2 :focus-visible {
  outline: 2px solid var(--lb2-volt);
  outline-offset: 3px;
}

/* ---- shared layout ---- */
.lb2-wrap {
  max-width: var(--lb2-max);
  margin-inline: auto;
  padding-inline: var(--lb2-gutter);
}

.lb2-section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }

.lb2-eyebrow {
  font-family: var(--lb2-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lb2-volt);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.lb2-eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--lb2-volt);
  display: inline-block;
}

.lb2-h2 {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  color: var(--lb2-bone);
}
.lb2-h2 em {
  font-style: normal;
  color: var(--lb2-volt);
}

.lb2-lede {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--lb2-bone);
  margin: 0;
}
.lb2-lede + .lb2-lede { margin-top: 1rem; }
.lb2-lede a { color: var(--lb2-volt); }
.lb2-muted { color: var(--lb2-ash); }

.lb2 a { color: inherit; }

/* ---- buttons ---- */
.lb2-btn {
  display: inline-block;
  font-family: var(--lb2-display);
  font-size: 1.375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 2.2rem 0.65rem;
  background: var(--lb2-volt);
  color: #000;
  border: 1px solid var(--lb2-volt);
  transition: transform 0.18s ease, background-color 0.18s ease;
  cursor: pointer;
}
.lb2-btn:hover { background: var(--lb2-volt-2); border-color: var(--lb2-volt-2); transform: translateY(-2px); }
.lb2-btn--ghost {
  background: transparent;
  color: var(--lb2-bone);
  border-color: var(--lb2-line);
}
.lb2-btn--ghost:hover { background: rgba(242, 240, 235, 0.08); border-color: var(--lb2-bone); transform: translateY(-2px); }
.lb2-btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* ---- scroll progress ---- */
.lb2-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 90;
  pointer-events: none;
}
.lb2-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--lb2-volt);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.lb2-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: clip;
}
.lb2-hero__media,
.lb2-hero__media video,
.lb2-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.lb2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 10, 11, 0.96) 0%, rgba(10, 10, 11, 0.45) 38%, rgba(10, 10, 11, 0.35) 100%);
}
.lb2-hero__inner {
  width: 100%;
  /* generous top clearance so the fixed site header never clips the badge */
  padding-block: clamp(8rem, 16vh, 11rem) clamp(2.5rem, 6vh, 4rem);
}
.lb2-hero__badge { width: clamp(6.5rem, 9vw, 8.5rem); margin-bottom: 1.25rem; }
.lb2-hero__title {
  font-family: var(--lb2-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.85;
  margin: 0;
  color: var(--lb2-bone);
  /* scales from one line on a 375px phone up to huge desktop */
  font-size: clamp(3rem, 13vw, 11rem);
  display: flex;
  align-items: flex-start;
  gap: 0.06em;
  flex-wrap: wrap;
}
.lb2-hero__two {
  color: transparent;
  -webkit-text-stroke: 3px var(--lb2-volt);
  font-size: 1.28em;
  line-height: 0.72;
  transform: translateY(0.04em);
}
.lb2-hero__sub {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  font-weight: 600;
}
.lb2-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lb2-line);
  border: 1px solid var(--lb2-line);
  margin-top: clamp(2rem, 5vh, 3.25rem);
}
.lb2-hero__stat {
  background: rgba(10, 10, 11, 0.82);
  padding: 1rem 1.25rem 0.9rem;
}
.lb2-hero__stat b {
  display: block;
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--lb2-bone);
}
.lb2-hero__stat b small {
  font-size: 0.5em;
  color: var(--lb2-volt);
  margin-left: 0.1em;
}
.lb2-hero__stat span {
  font-family: var(--lb2-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lb2-ash);
}
.lb2-hero__wordmark {
  position: absolute;
  right: var(--lb2-gutter);
  top: clamp(7.5rem, 15vh, 10rem);
  width: clamp(6rem, 16vw, 15rem);
  opacity: 0.9;
  z-index: 1;
}
.lb2-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  font-family: var(--lb2-mono);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lb2-ash);
}
.lb2-scrollcue::after {
  content: "";
  display: block;
  width: 1px;
  height: 2rem;
  margin: 0.5rem auto 0;
  background: linear-gradient(to bottom, var(--lb2-volt), transparent);
}

@media (min-width: 48em) {
  .lb2-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   MACHINE — alternating pillars
   ========================================================================== */
.lb2-pillar {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.lb2-pillar + .lb2-pillar { border-top: 1px solid var(--lb2-line); }
.lb2-pillar__media {
  position: relative;
  overflow: clip;
  aspect-ratio: 16 / 10;
}
.lb2-pillar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);          /* headroom for parallax drift */
}
.lb2-pillar__kicker {
  font-family: var(--lb2-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lb2-volt);
  display: block;
  margin-bottom: 0.75rem;
}
.lb2-pillar h3 {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.lb2-pillar p { margin: 0 0 1rem; max-width: 34rem; }
.lb2-pillar ul {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-family: var(--lb2-mono);
  font-size: 0.8125rem;
  color: var(--lb2-bone);
}
.lb2-pillar ul li {
  padding: 0.55rem 0;
  border-top: 1px dashed var(--lb2-line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.lb2-pillar ul li span:last-child { color: var(--lb2-ash); text-align: right; }
@media (min-width: 56em) {
  .lb2-pillar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb2-pillar:nth-child(even) .lb2-pillar__media { order: 2; }
}

/* ==========================================================================
   RIDING MODES
   ========================================================================== */
.lb2-modes { background: var(--lb2-carbon); border-block: 1px solid var(--lb2-line); }
.lb2-modes__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb2-modes__tabs::-webkit-scrollbar { display: none; }
.lb2-modes__tab {
  flex: 0 0 auto;
  font-family: var(--lb2-display);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lb2-ash);
  background: transparent;
  border: 1px solid var(--lb2-line);
  padding: 0.65rem 1.2rem 0.5rem;
  min-height: 2.75rem;                 /* comfortable tap target */
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.lb2-modes__tab:hover { color: var(--lb2-bone); border-color: var(--lb2-bone); }
.lb2-modes__tab[aria-selected="true"] {
  color: #000;
  background: var(--lb2-volt);
  border-color: var(--lb2-volt);
}
.lb2-modes__blurb {
  font-family: var(--lb2-mono);
  font-size: 0.875rem;
  color: var(--lb2-bone);
  min-height: 2.5em;
  max-width: 44rem;
  margin: 1.25rem 0 0;
}
.lb2-modes__blurb span { display: none; }
.lb2-modes__blurb span.is-active { display: block; }
.lb2-modes__tablewrap {
  overflow-x: auto;
  margin-top: 1.5rem;
  border: 1px solid var(--lb2-line);
  -webkit-overflow-scrolling: touch;
}
.lb2-modes__table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-family: var(--lb2-mono);
  font-size: 0.8125rem;
}
.lb2-modes__table th,
.lb2-modes__table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--lb2-line);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lb2-modes__table thead th {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lb2-ash);
  border-bottom: 1px solid var(--lb2-line);
}
.lb2-modes__table tbody th {
  color: var(--lb2-ash);
  font-weight: 400;
}
.lb2-modes__table td { color: var(--lb2-bone); }
.lb2-modes__table .is-active { background: rgba(50, 205, 50, 0.1); }
.lb2-modes__table thead th.is-active { color: var(--lb2-volt); }
.lb2-modes__note {
  font-family: var(--lb2-mono);
  font-size: 0.6875rem;
  color: var(--lb2-ash);
  margin-top: 1.25rem;
  max-width: 52rem;
}

/* ==========================================================================
   COLOURS — one viewport, scroll-scrubbed with clickable swatches
   ========================================================================== */
.lb2-colours {
  height: 100svh;
  min-height: 34rem;
  display: flex;
  align-items: stretch;
  background: var(--lb2-ink);
  overflow: clip;
}
.lb2-colours__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* clear the fixed site header, keep everything inside one screen */
  padding-top: clamp(6rem, 12vh, 8rem);
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
}
.lb2-colours__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.lb2-colours__head .lb2-h2 { margin-bottom: 0; font-size: clamp(2.25rem, 6vw, 4.5rem); }
.lb2-colours__name {
  font-family: var(--lb2-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lb2-volt);
  margin: 0 0 0.4rem;
  text-align: right;
  flex: 0 0 auto;
}
.lb2-colours__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-block: clamp(0.5rem, 2vh, 1.5rem);
}
.lb2-colours__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateX(2%);
}
.lb2-colours__stage img.is-active { opacity: 1; transform: none; }
.lb2-colours__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.lb2-swatch {
  font-family: var(--lb2-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lb2-ash);
  background: transparent;
  border: 1px solid var(--lb2-line);
  padding: 0.7rem 1rem 0.65rem;
  min-height: 2.75rem;                 /* tap target */
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.lb2-swatch i {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.lb2-swatch:hover { color: var(--lb2-bone); border-color: var(--lb2-bone); }
.lb2-swatch[aria-pressed="true"] {
  color: #000;
  background: var(--lb2-volt);
  border-color: var(--lb2-volt);
}
.lb2-swatch[aria-pressed="true"] i { border-color: rgba(0, 0, 0, 0.4); }

@media (max-width: 40em) {
  .lb2-colours__head { flex-direction: column; align-items: flex-start; }
  .lb2-colours__name { text-align: left; margin: 0; }
  .lb2-swatch { font-size: 0.65rem; padding-inline: 0.7rem; }
}

/* ==========================================================================
   FULL-BLEED BREAK
   ========================================================================== */
.lb2-break {
  position: relative;
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
}
.lb2-break img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  z-index: -2;
}
.lb2-break::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.9), rgba(10, 10, 11, 0.05) 55%);
}
.lb2-break__inner { padding-block: clamp(2.5rem, 6vh, 4rem); }
.lb2-break h3 {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 6.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
  max-width: 20ch;
}
.lb2-break p { font-family: var(--lb2-mono); font-size: 0.8125rem; color: var(--lb2-ash); margin: 0.9rem 0 0; }

/* ==========================================================================
   SPEC DATA PLATE
   ========================================================================== */
.lb2-specs { background: var(--lb2-carbon); border-block: 1px solid var(--lb2-line); }
.lb2-specs__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.lb2-specs__group {
  background: var(--lb2-panel);
  border: 1px solid var(--lb2-line);
  padding: 1.5rem 1.5rem 0.75rem;
}
.lb2-specs__group h3 {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lb2-volt);
  margin: 0 0 0.9rem;
}
.lb2-specs__group dl { margin: 0; font-family: var(--lb2-mono); font-size: 0.8125rem; }
.lb2-specs__group .lb2-row {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.55rem 0;
  border-top: 1px dashed var(--lb2-line);
}
.lb2-specs__group dt { color: var(--lb2-ash); }
.lb2-specs__group dd { margin: 0; text-align: right; color: var(--lb2-bone); }
.lb2-specs__note {
  font-family: var(--lb2-mono);
  font-size: 0.6875rem;
  color: var(--lb2-ash);
  margin-top: 1.75rem;
  max-width: 56rem;
}
@media (min-width: 48em) {
  .lb2-specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72em) {
  .lb2-specs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   X VS 2
   ========================================================================== */
.lb2-versus__table {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--lb2-line);
  background: var(--lb2-carbon);
}
.lb2-versus__headrow,
.lb2-versus__row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.8rem 1rem;
}
.lb2-versus__headrow {
  font-family: var(--lb2-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lb2-ash);
  border-bottom: 1px solid var(--lb2-line);
  padding-block: 0.6rem;
}
.lb2-versus__headrow span:last-child { color: var(--lb2-volt); }
.lb2-versus__row + .lb2-versus__row { border-top: 1px dashed var(--lb2-line); }
.lb2-versus__label {
  font-family: var(--lb2-mono);
  font-size: 0.78125rem;
  color: var(--lb2-ash);
}
.lb2-versus__x {
  font-family: var(--lb2-mono);
  font-size: 0.875rem;
  color: var(--lb2-ash);
}
.lb2-versus__two {
  font-family: var(--lb2-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lb2-bone);
}
.lb2-versus__two b { font-weight: 400; color: var(--lb2-volt); }
.lb2-versus__note {
  font-family: var(--lb2-mono);
  font-size: 0.6875rem;
  color: var(--lb2-ash);
  margin-top: 1.25rem;
  max-width: 52rem;
}
.lb2-versus__note a { color: var(--lb2-volt); }

/* ==========================================================================
   TECH GRID
   ========================================================================== */
.lb2-tech__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lb2-line);
  border: 1px solid var(--lb2-line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.lb2-tech__cell {
  background: var(--lb2-ink);
  padding: 1.4rem 1.4rem 1.2rem;
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.lb2-tech__cell b {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lb2-bone);
}
.lb2-tech__cell span {
  font-family: var(--lb2-mono);
  font-size: 0.71875rem;
  color: var(--lb2-ash);
  letter-spacing: 0.06em;
}
@media (min-width: 56em) {
  .lb2-tech__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.lb2-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lb2-gallery__grid a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: clip;
  cursor: pointer;
}
.lb2-gallery__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.lb2-gallery__grid a:hover img { transform: scale(1.05); }
@media (min-width: 56em) {
  .lb2-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   WHY REV MONKEY
   ========================================================================== */
.lb2-why { background: var(--lb2-carbon); border-block: 1px solid var(--lb2-line); }
.lb2-why__grid {
  display: grid;
  gap: 1px;
  background: var(--lb2-line);
  border: 1px solid var(--lb2-line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.lb2-why__card { background: var(--lb2-carbon); padding: 1.6rem 1.5rem; }
.lb2-why__card b {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 0.5rem;
}
.lb2-why__card p { margin: 0; font-size: 0.9375rem; color: var(--lb2-ash); }
.lb2-why__card a { color: var(--lb2-volt); font-weight: 700; text-decoration: none; }
.lb2-why__card a:hover { text-decoration: underline; }
@media (min-width: 48em) {
  .lb2-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72em) {
  .lb2-why__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.lb2-faq__list { max-width: 52rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.lb2-faq__list details { border-top: 1px solid var(--lb2-line); }
.lb2-faq__list details:last-child { border-bottom: 1px solid var(--lb2-line); }
.lb2-faq__list summary {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1.1rem 2.5rem 1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.lb2-faq__list summary::-webkit-details-marker { display: none; }
.lb2-faq__list summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lb2-volt);
  font-family: var(--lb2-mono);
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}
.lb2-faq__list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lb2-faq__list summary:hover { color: var(--lb2-volt); }
.lb2-faq__body { padding: 0 0 1.4rem; max-width: 44rem; color: var(--lb2-ash); }
.lb2-faq__body a { color: var(--lb2-volt); }

/* ==========================================================================
   SECURE / REGISTER
   ========================================================================== */
.lb2-register {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(50, 205, 50, 0.14), transparent 60%),
    var(--lb2-ink);
  border-top: 1px solid var(--lb2-line);
}
.lb2-register__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
.lb2-register__points {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  font-family: var(--lb2-mono);
  font-size: 0.8125rem;
  color: var(--lb2-bone);
}
.lb2-register__points li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-top: 1px dashed var(--lb2-line);
  position: relative;
}
.lb2-register__points li::before {
  content: "+";
  position: absolute;
  left: 0.25rem;
  color: var(--lb2-volt);
}
.lb2-register__form { background: var(--lb2-panel); border: 1px solid var(--lb2-line); padding: clamp(1.5rem, 3vw, 2.5rem); }
.lb2-register__formtitle {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.lb2-register__assurance {
  font-family: var(--lb2-mono);
  font-size: 0.71875rem;
  color: var(--lb2-ash);
  letter-spacing: 0.04em;
  margin-top: 1.25rem;
}
.lb2-register__contact { margin-top: 2rem; }
.lb2-register__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--lb2-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lb2-bone);
  margin-right: 2rem;
}
.lb2-register__contact a:hover { color: var(--lb2-volt); }
@media (min-width: 60em) {
  .lb2-register__grid { grid-template-columns: 5fr 6fr; align-items: start; }
}

/* CF7 fields inside the register panel */
.lb2-register__form .wpcf7-form p { margin: 0 0 1rem; }
.lb2-register__form .wpcf7-form label {
  font-family: var(--lb2-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lb2-ash);
  display: block;
}
.lb2-register__form .wpcf7-form input[type="text"],
.lb2-register__form .wpcf7-form input[type="email"],
.lb2-register__form .wpcf7-form input[type="tel"],
.lb2-register__form .wpcf7-form textarea {
  width: 100%;
  margin-top: 0.4rem;
  background: var(--lb2-ink);
  border: 1px solid var(--lb2-line);
  color: var(--lb2-bone);
  font-family: var(--lb2-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
}
.lb2-register__form .wpcf7-form input:focus,
.lb2-register__form .wpcf7-form textarea:focus {
  outline: 2px solid var(--lb2-volt);
  outline-offset: 0;
  border-color: var(--lb2-volt);
}
.lb2-register__form .wpcf7-form input[type="submit"] {
  font-family: var(--lb2-display);
  font-size: 1.375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--lb2-volt);
  color: #000;
  border: 0;
  padding: 0.8rem 2.2rem 0.65rem;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.lb2-register__form .wpcf7-form input[type="submit"]:hover {
  background: var(--lb2-volt-2);
  transform: translateY(-2px);
}

/* room above the fixed bottom bar on phones */
.lb2-register { padding-bottom: clamp(7rem, 12vh, 9rem); }

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */
.lb2-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  gap: 1px;
  background: var(--lb2-line);
  border-top: 1px solid var(--lb2-line);
  transform: translateY(0);
  transition: transform 0.3s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.lb2-stickybar.is-hidden { transform: translateY(110%); }
.lb2-stickybar a {
  flex: 1;
  text-align: center;
  font-family: var(--lb2-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1rem 0.75rem;
  background: var(--lb2-volt);
  color: #000;
}
.lb2-stickybar a.lb2-stickybar__call { background: var(--lb2-ink); color: var(--lb2-bone); flex: 0 0 34%; }
@media (min-width: 60em) {
  .lb2-stickybar { display: none; }
  .lb2-register { padding-bottom: clamp(4rem, 9vw, 8rem); }
}

/* ==========================================================================
   MOTION SETUP — elements start hidden only when JS+GSAP will run
   ========================================================================== */
.lb2-anim [data-lb2-reveal] { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  .lb2 *, .lb2 *::before, .lb2 *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .lb2-anim [data-lb2-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   RIDE TECH — connected panel
   ========================================================================== */
.lb2-connected {
  border: 1px solid var(--lb2-line);
  background: var(--lb2-carbon);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.lb2-connected__intro h3 {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.lb2-connected__intro p { margin: 0; max-width: 30rem; }
.lb2-connected__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lb2-line);
  border: 1px solid var(--lb2-line);
}
.lb2-connected__list li {
  background: var(--lb2-ink);
  padding: 1rem 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lb2-connected__list b {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lb2-bone);
}
.lb2-connected__list span {
  font-family: var(--lb2-mono);
  font-size: 0.6875rem;
  color: var(--lb2-ash);
}
@media (min-width: 56em) {
  .lb2-connected { grid-template-columns: 2fr 3fr; align-items: center; }
  .lb2-connected__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   BATTERY & RANGE
   ========================================================================== */
.lb2-range { background: var(--lb2-carbon); border-block: 1px solid var(--lb2-line); }
.lb2-range__bars { margin-top: clamp(2rem, 4vw, 3rem); max-width: 56rem; }
.lb2-range__bar + .lb2-range__bar { margin-top: 1.4rem; }
.lb2-range__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--lb2-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lb2-ash);
  margin-bottom: 0.45rem;
}
.lb2-range__meta b {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  color: var(--lb2-bone);
}
.lb2-range__track {
  height: 0.6rem;
  background: var(--lb2-panel);
  border: 1px solid var(--lb2-line);
  overflow: hidden;
}
.lb2-range__track span {
  display: block;
  height: 100%;
  width: var(--lb2-bar, 0%);
  background: var(--lb2-volt);
}
.lb2-range__track--x span { background: var(--lb2-ash); }
.lb2-range__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lb2-line);
  border: 1px solid var(--lb2-line);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 56rem;
}
.lb2-range__facts div { background: var(--lb2-carbon); padding: 1.1rem 1.25rem 1rem; }
.lb2-range__facts b {
  display: block;
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--lb2-bone);
}
.lb2-range__facts b small { font-size: 0.55em; color: var(--lb2-volt); }
.lb2-range__facts span {
  font-family: var(--lb2-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lb2-ash);
}
@media (min-width: 48em) {
  .lb2-range__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Secure section, single column */
.lb2-register__single { max-width: 44rem; }

/* ==========================================================================
   CLOSER — full-bleed deposit call to action
   ========================================================================== */
.lb2-closer {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  border-top: 1px solid var(--lb2-line);
  padding-block: clamp(4rem, 8vh, 6rem) clamp(7rem, 12vh, 9rem);
}
.lb2-closer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;      /* keep the riders visible right of the copy */
  z-index: -2;
}
.lb2-closer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(10, 10, 11, 0.94) 0%, rgba(10, 10, 11, 0.72) 45%, rgba(10, 10, 11, 0.25) 100%),
    linear-gradient(to top, rgba(10, 10, 11, 0.85), transparent 40%);
}
.lb2-closer__content { max-width: 40rem; }
.lb2-closer .lb2-register__points { max-width: 30rem; }
.lb2-btn--big {
  font-size: 1.6rem;
  padding: 0.95rem 2.6rem 0.8rem;
}
@media (min-width: 60em) {
  .lb2-closer { padding-bottom: clamp(4rem, 8vh, 6rem); }
}

/* ==========================================================================
   SECTION TEXTURES — quiet, machined surfaces (CSS only)
   ========================================================================== */

/* data plate: brushed diagonal hairlines */
.lb2-specs {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(242, 240, 235, 0.016) 14px 15px),
    linear-gradient(var(--lb2-carbon), var(--lb2-carbon));
}

/* modes: fine engineering dot grid */
.lb2-modes {
  background-image:
    radial-gradient(rgba(242, 240, 235, 0.05) 1px, transparent 1.5px),
    linear-gradient(var(--lb2-carbon), var(--lb2-carbon));
  background-size: 26px 26px, auto;
}

/* battery: horizontal scanlines, like a charge readout */
.lb2-range {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 9px, rgba(50, 205, 50, 0.02) 9px 10px),
    linear-gradient(var(--lb2-carbon), var(--lb2-carbon));
}

/* why us: faint blueprint grid */
.lb2-why {
  background-image:
    linear-gradient(rgba(242, 240, 235, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 240, 235, 0.02) 1px, transparent 1px),
    linear-gradient(var(--lb2-carbon), var(--lb2-carbon));
  background-size: 44px 44px, 44px 44px, auto;
}

/* ==========================================================================
   MOBILE PASS — header clearance, full-width CTAs, colours in one pane
   ========================================================================== */
@media (max-width: 47.99em) {
  /* all CTA buttons full width and stacked */
  .lb2-btn-row { flex-direction: column; align-items: stretch; }
  .lb2-btn { width: 100%; text-align: center; }

  /* hero: comfortable gap below the (now single-line) fixed header */
  .lb2-hero__inner { padding-top: 9rem; }
  .lb2-hero__wordmark { top: 7.25rem; width: 6.5rem; }
  .lb2-hero__stat span { white-space: nowrap; }

  /* colours: heading, stage and all four swatches inside one visible pane,
     leaving room for the sticky CTA bar at the bottom */
  .lb2-colours__inner { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .lb2-colours__head .lb2-h2 { font-size: 2rem; }
  .lb2-colours__stage { margin-block: 0.5rem; }
  .lb2-colours__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .lb2-swatch { justify-content: center; padding-inline: 0.5rem; }
}

/* hero price line */
.lb2-hero__price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 0;
}
.lb2-hero__price b {
  font-family: var(--lb2-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1;
  color: var(--lb2-volt);
}
.lb2-hero__price span {
  font-family: var(--lb2-mono);
  font-size: 0.71875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lb2-bone);
}

/* road-legal variant tag under the hero title */
.lb2-hero__variant {
  display: inline-block;
  font-family: var(--lb2-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
  background: var(--lb2-volt);
  padding: 0.4rem 0.8rem 0.3rem;
  margin: 1rem 0 0;
}

/* ==========================================================================
   ROAD KIT — one-screen annotated road-legal diagram (L3e page)
   ========================================================================== */
.lb2-roadkit {
  background: var(--lb2-carbon);
  border-block: 1px solid var(--lb2-line);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 12vh, 8rem) clamp(2rem, 5vh, 3rem);
}
.lb2-roadkit__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: center;
  width: 100%;
}
.lb2-roadkit__copy .lb2-h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); margin-bottom: 1rem; }
.lb2-roadkit__stage {
  position: relative;
  aspect-ratio: 3192 / 2188;
  width: 100%;
}
.lb2-roadkit__stage img { width: 100%; height: 100%; object-fit: contain; }
.lb2-roadkit__dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--lb2-volt);
  background: rgba(10, 10, 11, 0.75);
  color: var(--lb2-volt);
  font-family: var(--lb2-mono);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.lb2-roadkit__dot i { font-style: normal; }
.lb2-roadkit__dot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(50, 205, 50, 0.5);
  animation: lb2pulse 2.2s ease-out infinite;
}
@keyframes lb2pulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.lb2-roadkit__dot:hover,
.lb2-roadkit__dot.is-active {
  background: var(--lb2-volt);
  color: #000;
}
.lb2-roadkit__legend {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1rem;
}
.lb2-roadkit__legend li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.6rem 0.35rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lb2-roadkit__legend li.is-active {
  background: #1b1c1f;
  border-color: var(--lb2-line);
}
.lb2-roadkit__legend b {
  font-family: var(--lb2-mono);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--lb2-volt);
  border: 1px solid var(--lb2-volt);
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb2-roadkit__legend span {
  font-family: var(--lb2-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lb2-bone);
  white-space: nowrap;
}
.lb2-roadkit__note {
  font-family: var(--lb2-mono);
  font-size: 0.6875rem;
  color: var(--lb2-ash);
  margin: 1.5rem 0 0;
  max-width: 30rem;
}
@media (min-width: 56em) {
  .lb2-roadkit__grid { grid-template-columns: 5fr 7fr; }
  .lb2-roadkit__legend { grid-template-columns: 1fr; max-width: 20rem; gap: 0.3rem; }
}
@media (max-width: 55.99em) {
  .lb2-roadkit { padding-top: 4.75rem; padding-bottom: 1.25rem; }
  .lb2-roadkit__copy .lb2-h2 { margin-bottom: 0.75rem; }
  .lb2-roadkit__copy .lb2-lede { font-size: 1rem; }
  .lb2-roadkit__legend { margin-top: 1rem; }
  .lb2-roadkit__note { margin-top: 1rem; }
  /* image between copy and legend on mobile: stage first after heading */
  .lb2-roadkit__grid { grid-template-areas: "copy" "stage"; }
  .lb2-roadkit__copy { grid-area: copy; }
  .lb2-roadkit__stage { grid-area: stage; }
  .lb2-roadkit__legend span { font-size: 1.05rem; }
}