:root {
  /* ---- BetaClimate palette (matches index.html / styles.css) ---- */
  --bc-bg-dark: #06120f;
  --bc-bg-darker: #03100d;
  --bc-bg-light: #f2f0e8;
  --bc-teal: #1f4e45;
  --bc-teal-bright: #3fa88a;
  --bc-green-accent: #abfee5;
  --bc-text-light: #eaf2ee;
  --bc-text-muted: #b9ded5;
  --bc-text-dark: #0b1a15;
  --bc-text-dark-muted: #516159;

  --bg: var(--bc-bg-dark);
  --ink: var(--bc-text-light);
  --ink2: var(--bc-text-muted);
  --dim: #8fac9f;
  --dim2: #6b8377;
  --line: #1f4e45;
  --line2: #275b50;
  --surface: #0b1f19;
  --surface2: #0e2a22;
  --surface3: #123328;
  --dark: #03100d;
  --dark2: #020b09;
  --dark-line: #1f4e45;
  --dark-txt2: #9aa3aa;

  /* ======================================================================
     ACCENT — "Sodium"
     Named for sodium-vapour lamps: the amber light industrial yards, depots
     and roadways actually run on, and the colour airborne dust turns when
     it's caught in a headlight beam. That's literally the thing this truck
     removes from the air, so the accent points at the product instead of
     borrowing a generic tech cyan.
     It also sits with the renders rather than against them — the trucks
     carry bronze/brass trim on silver, which a cool cyan fights and a warm
     amber completes.

     Two-tone by necessity: warm hues are brilliant on near-black but fail
     contrast on white. So --signal drives dark surfaces and --signal-deep
     (same hue, dropped lightness) drives light ones. Every pairing below is
     verified AA:
       signal on #0E0E0F .......... 8.70
       signal-bright on #0E0E0F .. 10.42
       signal-deep on #FFFFFF ..... 5.53
       signal-deep on #F5F5F7 ..... 5.08
       signal-ink on signal fill .. 7.90
     ====================================================================== */
  --signal: var(--bc-green-accent); /* core accent — dark surfaces */
  --signal-bright: #c8ffef; /* hover / glow on dark */
  --signal-deep: var(
    --bc-teal-bright
  ); /* text + icons on LIGHT surfaces (AA) */
  --signal-ink: var(--bc-text-dark); /* text placed on a solid signal fill */
  --signal-bg: rgba(63, 168, 138, 0.12);
  --signal-line: rgba(63, 168, 138, 0.4);
  --signal-glow: rgba(171, 254, 229, 0.35);

  /* Alert sits clear of the accent's hue so warnings never read as accents */
  --alert: #e06a4a;
  --alert-deep: #a3341c;
  --alert-bg: #fbede9;
  --alert-line: rgba(163, 52, 28, 0.28);

  /* Legacy aliases — existing rules reference --blue-*; map them onto the
     accent so the whole page recolours from the tokens above. New work
     should use the --signal-* names. */
  --blue: var(--signal);
  --blue-hover: var(--signal-bright);
  --blue-bg: var(--signal-bg);
  --blue-line: var(--signal-line);
  --blue-glow: var(--signal-glow);
  --amber: var(--signal-deep);
  --amber-bg: #fdf4e3;
  --amber-line: var(--signal-line);
  --rust: var(--alert-deep);
  --rust-bg: var(--alert-bg);
  --disp: "Sora", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  /* Utility/data face. Air filtration is instrumentation — flow rates, MERV
     grades, chamber counts. Mono numerals give readouts the authority of a
     spec sheet and keep labels from reading as generic marketing chrome. */
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Spacing scale (8px base) — use these instead of arbitrary values ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s;
  --t-med: 0.32s;
  --t-slow: 0.6s;
  --sh: 0 1px 3px rgba(17, 17, 17, 0.025), 0 14px 38px rgba(17, 17, 17, 0.05);
  --sh-hover:
    0 2px 8px rgba(17, 17, 17, 0.035), 0 22px 52px rgba(17, 17, 17, 0.08);
  --radius: 20px;
  --lens-radius: 60px; /* <<< TWEAK THIS to resize the x-ray reveal circle */

  /* ---- Reveal-visual per-layer size/position calibration ----
     The backlit render (assets/truck_reveal_backlit.png) is treated as the
     correctly-sized reference and is left untouched. If the solid or x-ray
     renders show the truck at a different scale or position, tune ONLY the
     four values below until they visually line up with the backlit shot.
     scale: 1 = unchanged, >1 = bigger, <1 = smaller.
     x/y:   nudge in pixels to recenter after scaling. */
  --solid-scale: 1;
  --solid-x: 0px;
  --solid-y: 0px;
  --xray-scale: 1;
  --xray-x: 0px;
  --xray-y: 0px;

  /* ---- Card crop/move morph timing ----
     --card-morph-ms is set from JS (see CARD_MORPH_MS near initRevealScroll)
     so there is a single tunable source of truth. Safe fallback below in case
     JS hasn't run yet. */
  --card-morph-ms: 900ms;
  --content-shift-ms: 600ms;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------------------
   Light-surface accent scoping.
   The bright sodium reads beautifully on near-black but only hits ~2.2:1
   on white. Inside light regions the accent therefore resolves to
   --signal-deep (same hue, dropped lightness, 5.5:1 on white).
   NOTE: the --blue-* aliases are redeclared here rather than relying on
   --signal alone, because a custom property that references another is
   substituted at its DECLARATION scope — descendants inherit the already-
   resolved value, so overriding --signal here would not reach them.
   ---------------------------------------------------------------------- */
.reveal-sticky.built,
.faq-section,
.closing-cta,
.chat-bubble {
  --signal: var(--signal-deep);
  --signal-bright: var(--signal-deep);
  --blue: var(--signal-deep);
  --blue-hover: var(--signal-deep);
}
/* The "built" configurator phase turns its own background white via JS
   (see main.js mixColor(DARK2, WHITE, bgToWhite)). Everything painted
   inside it — the build card, "Already handled", the coverage panel,
   zone/concern/chamber pickers — needs to go back to light-surface /
   dark-ink colors for that phase, or it reads as dark boxes floating on
   a white page. This mirrors the light-mode palette the rest of the
   dark theme replaced. */
.reveal-sticky.built {
  --surface: #ffffff;
  --surface2: #f7f8f9;
  --surface3: #f0f2f3;
  --line: #e7e7e7;
  --line2: #d6d8db;
  --ink: #111111;
  --ink2: #3a3f45;
  --dim: #6b7280;
  --dim2: #98a2ae;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: y proximity;
}
.hero,
.reveal-section {
  scroll-snap-align: start;
}
html::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
body {
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--ink);
}
h1,
h2,
h3,
h4 {
  font-family: var(--disp);
  letter-spacing: -0.01em;
  color: var(--ink);
}
button {
  font-family: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 2px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px var(--blue-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* ---------- HEADER ---------- */
header {
  background: rgba(10, 11, 12, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  transition:
    background 0.5s ease,
    border-color 0.5s ease;
}
header.on-light {
  background: rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
}
.hin {
  max-width: 1440px;
  margin: 0 auto;
  padding: 15px 32px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  position: relative;
}
.brand {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18.5px;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color 0.5s ease;
}
header.on-light .brand {
  color: var(--ink);
}
.brand .mark {
  width: 20px;
  height: 20px;
  color: currentColor;
  flex-shrink: 0;
}
nav.hnav {
  display: flex;
  align-items: center;
  gap: 5px;
}
nav.hnav a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  transition: 0.3s;
}
nav.hnav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
nav.hnav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
header.on-light nav.hnav a {
  color: var(--dim);
}
header.on-light nav.hnav a:hover {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.06);
}
header.on-light nav.hnav a.active {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.08);
}
.hstatus {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hstatus .pill {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #e7eaec;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: 0.5s;
}
header.on-light .hstatus .pill {
  background: rgba(17, 17, 17, 0.05);
  color: var(--ink2);
  border: 1px solid rgba(17, 17, 17, 0.1);
}
.saved-wrap {
  position: relative;
}
.saved-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #e7eaec;
  display: grid;
  place-items: center;
  transition: 0.3s;
}
header.on-light .saved-btn {
  border-color: rgba(17, 17, 17, 0.1);
  background: rgba(17, 17, 17, 0.04);
  color: var(--ink2);
}
.saved-btn:hover {
  border-color: var(--blue-line);
  color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-bg);
}
.saved-btn svg {
  width: 17px;
  height: 17px;
}
.saved-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--bc-text-dark);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.saved-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-hover);
  padding: 8px;
  z-index: 250;
}
.saved-panel.open {
  display: block;
}
.saved-panel h4 {
  font-size: 12.5px;
  padding: 8px 8px 6px;
  color: var(--ink2);
}
.saved-empty {
  font-size: 12.5px;
  color: var(--dim2);
  padding: 14px 10px;
  text-align: center;
}
.saved-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 9px;
  transition: 0.15s;
}
.saved-item:hover {
  background: var(--surface3);
}
.saved-item .si-label {
  flex: 1;
  min-width: 0;
}
.saved-item b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-item span {
  font-size: 10.5px;
  color: var(--dim2);
}
.saved-item button {
  background: none;
  border: none;
  color: var(--dim2);
  padding: 5px;
  border-radius: 6px;
  display: flex;
}
.saved-item button:hover {
  background: var(--rust-bg);
  color: var(--rust);
}
.saved-item .si-load {
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 5px 7px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hin {
    padding: 13px 18px;
    gap: 12px;
  }
  nav.hnav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
  .hstatus {
    margin-left: 0;
  }
}

/* ---------- HERO (dark, cinematic video) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark2);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-video-wrap video,
.hero-video-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at 30% 45%,
      rgba(14, 14, 15, 0.12) 0%,
      rgba(14, 14, 15, 0.5) 55%,
      rgba(14, 14, 15, 0.8) 100%
    ),
    linear-gradient(
      180deg,
      rgba(14, 14, 15, 0.5) 0%,
      rgba(14, 14, 15, 0.05) 26%,
      rgba(14, 14, 15, 0.18) 60%,
      rgba(14, 14, 15, 0.9) 100%
    );
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--s9) var(--s6) var(--s7);
  width: 100%;
}
.hero-inner h1 {
  font-size: clamp(33px, 4.4vw, 54px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s5);
  max-width: 16ch;
  color: rgba(255, 255, 255, 0.96);
}
.hero-inner h1 .accent {
  color: var(--blue);
  font-weight: 600;
}
.hero-inner p {
  font-size: 15px;
  font-weight: 400;
  color: #a6aeb5;
  max-width: 38ch;
  margin-bottom: var(--s6);
  line-height: 1.6;
}
.hero-inner .cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 22px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  transition: 0.2s;
}
.hero-inner .cta:hover {
  background: var(--blue);
  color: var(--signal-ink);
  box-shadow: 0 0 24px var(--blue-glow);
}
.hero-inner .cta svg {
  width: 15px;
  height: 15px;
  transition: 0.2s;
}
.hero-inner .cta:hover svg {
  transform: translateY(3px);
}

/* Spec strip — reads as a readout off the chassis, not a marketing stat bar.
   Each column carries a value, what it measures, and the detail behind it. */
.feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--s8);
}
.feature-col {
  padding: var(--s5) var(--s5);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  position: relative;
}
.feature-col + .feature-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.feature-col b {
  font-family: var(--mono);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.feature-col .fc-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #e4e8eb;
  margin-top: var(--s2);
}
.feature-col .fc-detail {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #7e888f;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-col:nth-child(3)::before {
    display: none;
  }
}
@media (max-width: 600px) {
  .feature-row {
    grid-template-columns: 1fr;
  }
  .feature-col + .feature-col::before {
    left: 18%;
    right: 18%;
    top: 0;
    bottom: auto;
    height: 1px;
    width: auto;
  }
}

/* ---------- XRAY REVEAL SCROLL SECTION ---------- */
.reveal-section {
  background: var(--dark2);
  position: relative;
}

/* total pinned scroll distance across all stages (list -> ... -> built + steps) */
.reveal-scroll {
  position: relative;
  height: 520vh;
}
.reveal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: 84px;
}
/* once the configurator card is showing, top-align instead of vertically
   centering — centering left a large, uneven gap under the (now shorter)
   card + coverage panel, whereas top-aligning keeps the gap under them
   matching the gap above them */
.reveal-sticky.built.card-shown {
  justify-content: flex-start;
}
/* while the card crops/moves, both columns shift from centered toward the
   header instead of staying centered — closes the gap above the content.
   Driven by JS (padding-top), synced to the same duration as the card crop. */
.reveal-sticky.content-shift {
  transition: padding-top var(--content-shift-ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-head {
  position: absolute;
  top: 84px;
  left: 0;
  right: 0;
  z-index: 6;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s6);
  width: 100%;
  pointer-events: none;
}
/* heading scrim removed — see-through text on the image, no shadow box behind it */
.reveal-head .eyebrow {
  margin-bottom: var(--s2);
}
.reveal-head h2 {
  color: #fff;
  font-size: clamp(20px, 2.5vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  white-space: nowrap;
}
.reveal-head p {
  color: #b7bec3;
  font-size: clamp(12px, 1.05vw, 13.5px);
  margin-top: var(--s2);
  white-space: nowrap;
  transition: opacity 0.4s ease;
}

.reveal-in {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  width: 100%;
}
/* once handed off to the live build, top-align the columns so steps read top-down */

/* left cell holds the backlit window AND the configurator overlaid on it.
   After the bg turns white the backlit image STAYS; the configurator card sits
   on top — transparent in intro (backlit shows through), opaque once a zone is
   picked (chassis fills the same-size window). "What your build handles" is
   part of build-live and flows below. */
.reveal-left {
  position: relative;
  min-width: 0;
}
.reveal-left .reveal-visual {
  transition: opacity 0.5s ease;
}
/* build-live ALWAYS overlays the visual absolutely (same box, same position) so
   the transition never changes layout height — no reflow, no upward jump. */
.build-live {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
}
.build-live > * {
  flex-shrink: 0;
}
/* once the card is shown it can grow taller than the image and scroll internally.
   padding-bottom is deferred to .card-morphed specifically (not bare .card-shown)
   — added immediately, it was extra height nobody needed yet during the brief
   pre-crop window, contributing to a small residual position shift right as
   the card first appears (same root cause as the live-panel height fix above:
   space reserved for content before that content is actually relevant). */
.reveal-sticky.built.card-shown .build-live {
  pointer-events: auto;
  opacity: 1;
  bottom: auto;
  height: auto;
  min-height: 100%;
  max-height: 80vh;
  overflow: hidden auto;
  scrollbar-width: none;
  padding-bottom: var(--s5);
}
.reveal-sticky.built.card-morphed .build-live {
  padding-bottom: var(--s5);
}
.reveal-sticky.built.card-shown .build-live::-webkit-scrollbar {
  width: 0;
  display: none;
}
/* backlit stays as the backdrop until the card is shown, then hides */
.reveal-sticky.built .reveal-visual {
  opacity: 1;
}
.reveal-sticky.built.card-shown .reveal-visual {
  opacity: 0;
}
.reveal-sticky.built .build-live {
  z-index: 1;
}

/* Same sizing/treatment as the "Your build" stage card below, so both truck
   shots read at the same scale as you scroll from one section to the other.
   overflow:hidden on the inner wrapper clips the images; the outer keeps the
   ring/border uncut. */
.reveal-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1024/768;
  border-radius: var(--radius);
}
.reveal-visual-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius);
  /* Edges match the section's own background (#0E0E0F) so the box blends
     into the page with no visible seam; only the center deepens toward
     near-black. Previously this went light-grey at center -> dark at edge,
     which is exactly backwards from what's needed once the truck fades to
     transparent here (the "lights off" moment) — it showed a grey wash
     instead of a clean, on-brand dark fade. */
  background: radial-gradient(
    ellipse 70% 88% at 50% 45%,
    #050506 0%,
    #0a0b0c 55%,
    #0e0e0f 100%
  );
}
/* Extra safety net: true-black cover that fades in exactly as the solid/
   x-ray layers fade out (see the lightsOff ramp in the scroll driver), so
   the very last step of the fade lands on true #000 rather than the
   container's own near-black gradient tone. */
.reveal-blackout {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 72% 88% at 50% 45%,
    #000 0%,
    #050506 42%,
    rgba(14, 14, 15, 0.85) 78%,
    rgba(14, 14, 15, 0) 100%
  );
}
.reveal-visual.lens-on:hover {
  cursor: none;
}
.reveal-base,
.reveal-xray,
.reveal-backlit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.reveal-base {
  transform: translate(var(--solid-x), var(--solid-y)) scale(var(--solid-scale));
}
.reveal-xray {
  transform: translate(var(--xray-x), var(--xray-y)) scale(var(--xray-scale));
}
.reveal-xray {
  clip-path: circle(var(--lens-radius) at -9999px -9999px);
  transition: clip-path 0s linear;
}
.reveal-backlit {
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.reveal-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #eaf3f2;
  background: rgba(10, 13, 14, 0.68);
  border: 1px solid rgba(24, 184, 232, 0.3);
  backdrop-filter: blur(6px);
  padding: 9px 15px;
  border-radius: 22px;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 4;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 0 0 rgba(24, 184, 232, 0.25);
  animation: tagPulse 2.6s ease-in-out infinite;
}
.reveal-tag svg {
  width: 14px;
  height: 14px;
  color: var(--blue);
  flex-shrink: 0;
}
@keyframes tagPulse {
  0%,
  100% {
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.3),
      0 0 0 0 rgba(24, 184, 232, 0.22);
  }
  50% {
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.3),
      0 0 0 6px rgba(24, 184, 232, 0);
  }
}
.reveal-visual.active .reveal-tag,
.reveal-visual:not(.lens-on) .reveal-tag {
  opacity: 0;
}
.lens-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--lens-radius) * 2);
  height: calc(var(--lens-radius) * 2);
  border-radius: 50%;
  border: 2px solid var(--blue);
  box-shadow:
    0 0 0 4px rgba(24, 184, 232, 0.14),
    0 10px 26px rgba(0, 0, 0, 0.5),
    inset 0 0 26px rgba(24, 184, 232, 0.2);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}
.reveal-visual.active.lens-on .lens-ring {
  opacity: 0.5;
}

/* Border-draw overlay: one rounded-rect split into two mirrored halves.
   pathLength="1" normalizes each half so the hide-at-rest math is exact
   (dashoffset=1 => invisible). Q corners give the fillet. */
.reveal-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 5px rgba(150, 225, 255, 0.75))
    drop-shadow(0 0 11px rgba(24, 184, 232, 0.45));
  opacity: 0;
  transition: opacity 0.12s linear;
}
.reveal-border-svg.on {
  opacity: 1;
}
#borderHalfL,
#borderHalfR {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* the configurator card is a solid white window the same size as the backlit image */
/* the configurator card sits in exactly the same box as the backlit image */
.build-live .truck-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  border-radius: var(--radius);
}
/* The card body matches the CONFIGURATOR artwork's own canvas ratio, read
   from its viewBox once assets/truck_svg_chambers.svg loads (see
   loadTruckConfig()) — not a hardcoded number. Swap in artwork with a
   different canvas size and this adapts on its own instead of cropping it.
   Falls back to the current file's own ratio (1843/853) until that fetch
   resolves, which happens well before this box is ever measured. */
.build-live .chassis-wrap {
  padding: 0;
  aspect-ratio: var(--truck-ratio, 1002.88/359.24);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

/* ---- Card crop + move morph ----
   #truckCard's height is set to an explicit px value by JS right when the
   card first appears (full size, matching the backlit box), then animated
   down to a shorter px value. buildCardBody is absolutely positioned +
   centered UNCONDITIONALLY (not just once cropping starts) so the truck
   sits centred in the card from the very first frame — no "top-aligned,
   then jumps to centre" glitch when .tc-cropping first gets added. The
   crop then eats in symmetrically from the top and bottom while the truck
   artwork itself never scales or shifts independently of the frame — even
   after later re-renders of buildCardBody's contents (e.g. picking a zone
   rebuilds its innerHTML, which would otherwise fall back to normal static
   flow and let the truck jump back to its full, uncropped position). */
#truckCard {
  position: relative;
  overflow: hidden;
  transition: height var(--card-morph-ms) cubic-bezier(0.4, 0, 0.2, 1);
}
#buildCardBody {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* "0 of 2 chambers" pill: hidden until the crop/move finishes */
#visualCapArea {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.reveal-sticky.card-morphed #visualCapArea {
  opacity: 1;
}

/* "What your build handles" panel: fades/slides in WHILE the card is
   cropping/moving (overlapping with the animation, not after it).
   Collapsed to height:0 while hidden — NOT just opacity:0 — because
   .build-live switches from a rigid inset:0 box to height:auto the moment
   .card-shown is added (see that rule below), and at that exact instant
   this panel's own real (but invisible) height used to get counted in the
   flex layout, inflating .build-live/.reveal-side's height, which then
   shifted the whole centred column upward via .reveal-sticky's own
   justify-content:center — read as "the card jumps up" right as it
   appears, before the crop/shrink animation even starts. */
.live-panel {
  opacity: 0;
  transform: translateY(14px);
  height: 0;
  margin-top: 0;
  padding: 0;
  border-width: 0;
  overflow: hidden;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.reveal-sticky.card-morphing .live-panel,
.reveal-sticky.card-morphed .live-panel {
  opacity: 1;
  transform: translateY(0);
  height: auto;
  margin-top: var(--s3);
  padding: var(--s4) var(--s5);
  border-width: 1px;
}

/* right column: 3 stages stacked, only one visible at a time */
.reveal-side {
  position: relative;
  min-height: 520px;
}
.reveal-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.reveal-list {
  display: flex;
  flex-direction: column;
}
.reveal-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.reveal-item:last-child {
  border-bottom: none;
}
.reveal-item .ri-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #c7cdd2;
  display: grid;
  place-items: center;
}
.reveal-item .ri-icon svg {
  width: 19px;
  height: 19px;
}
.reveal-item b {
  display: block;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 1px;
}
.reveal-item span {
  color: #9aa3aa;
  font-size: 12px;
  line-height: 1.4;
}

.reveal-ready {
  text-align: left;
}
.reveal-ready .eyebrow {
  margin-bottom: 14px;
}
.reveal-ready h2 {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 44px);
  margin-bottom: 12px;
}
.reveal-ready p {
  color: #9aa3aa;
  font-size: 14.5px;
  max-width: 38ch;
  line-height: 1.6;
}

.reveal-features {
  gap: 14px;
}
.rf-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 18px;
}
.rf-card .fi {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(24, 184, 232, 0.14);
  color: var(--blue);
  display: grid;
  place-items: center;
}
.rf-card .fi svg {
  width: 19px;
  height: 19px;
}
.rf-card b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.rf-card span {
  font-size: 12px;
  color: #9aa3aa;
  line-height: 1.45;
}

/* "How it works" title stage (replaces the feature stack, inverts to ink as bg whitens) */
.reveal-howto {
  text-align: left;
}
.reveal-howto .eyebrow {
  margin-bottom: 12px;
}
.reveal-howto h2 {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 40px);
  margin-bottom: 10px;
}
.reveal-howto p {
  color: #9aa3aa;
  font-size: 15px;
  max-width: 34ch;
  line-height: 1.6;
}

/* the real steps: appear as the section becomes "built", scroll internally
   (their scrollbar hidden) while the section stays pinned */
.reveal-steps {
  justify-content: flex-start;
}
.steps-scroll {
  width: 100%;
  max-height: 80vh;
  overflow: hidden auto;
  padding-right: 6px;
  padding-bottom: var(--s5);
  display: flex;
  flex-direction: column;
  gap: 30px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 40px),
    transparent
  );
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.steps-scroll::-webkit-scrollbar {
  width: 0;
  display: none;
}

@media (max-width: 980px) {
  .reveal-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .reveal-head {
    position: static;
    padding: 0 18px;
    margin-bottom: 20px;
    pointer-events: auto;
  }
  .reveal-head::before {
    display: none;
  }
  .reveal-head h2 {
    font-size: 22px;
    white-space: normal;
  }
  .reveal-head p {
    display: none;
  }
  .reveal-side {
    min-height: 400px;
  }
}
@media (max-width: 760px) {
  .reveal-head,
  .reveal-in {
    padding: 0 18px;
  }
}

/* ---------- INTRO ---------- */
.intro-block {
  max-width: 640px;
  margin: 60px auto 6px;
  padding: 0 32px;
  text-align: center;
}
.intro-block h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 10px 0 8px;
}
.intro-block p {
  color: var(--dim);
  font-size: 14.5px;
}
@media (max-width: 760px) {
  .intro-block {
    padding: 0 18px;
  }
}

/* ---------- BUILD LAYOUT ---------- */
.build-wrap {
  max-width: 1440px;
  margin: 24px auto 0;
  padding: 0 32px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 32px;
  align-items: start;
}
.visual-col {
  position: sticky;
  top: 88px;
  min-width: 0;
}
.steps-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
@media (max-width: 980px) {
  .build-wrap {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 18px 30px;
  }
  .visual-col {
    position: static;
    order: -1;
  }
}

/* ---------- BUILD CARD ---------- */
.truck-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh);
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 1024/768;
}
.tc-overlay {
  position: absolute;
  top: 16px;
  left: 20px;
  right: 20px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.tc-overlay .tc-title {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.6),
    0 0 1px rgba(0, 0, 0, 0.4);
}
.tc-overlay .tc-cap {
  pointer-events: auto;
}
/* once .reveal-sticky.built flips the card's own surface to white
   (see the --surface override above), the white title text needs to
   become dark or it disappears against the white card background */
.reveal-sticky.built .tc-overlay .tc-title {
  color: var(--bc-text-dark);
  text-shadow: none;
}
.tc-overlay .cap {
  font-size: 11.5px;
  color: #fff;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  padding: 5px 11px;
  border-radius: 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.tc-overlay .edit-link {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.tc-overlay .edit-link svg {
  width: 13px;
  height: 13px;
}
.tc-overlay .edit-link:hover {
  color: var(--blue-hover);
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1024/768;
  overflow: hidden;
  background: radial-gradient(
    ellipse 65% 85% at 50% 42%,
    #232427 0%,
    #17181a 55%,
    #0b0c0d 100%
  );
}
.stage img,
.stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.stage-fade {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.stage-fade.on {
  opacity: 1;
}
.stage-caption {
  position: absolute;
  left: 20px;
  bottom: 14px;
  font-size: 12px;
  color: #e8e6e1;
  background: rgba(6, 9, 9, 0.5);
  backdrop-filter: blur(4px);
  padding: 5px 11px;
  border-radius: 20px;
  font-weight: 500;
  z-index: 3;
}

/* ---- rotating-video letterbox cover ----------------------------------
   The truck_rotate.mp4 file has black bars baked into the footage itself
   (top + bottom). These two rectangles just paint over them in the card's
   off-white, matching .stage's own background. They're independent of
   everything else — only shown while the rotating video is on screen
   (toggled via .show, see setVideoLetterboxVisible in the JS).

   To tweak: change the height percentages below.
   To remove entirely (e.g. swapping in a video without black bars): delete
   these 3 rules, and delete the two <div class="video-letterbox ...">
   elements inside buildFinalMarkup()'s stageHTML.
   ------------------------------------------------------------------- */
.video-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  background: #f5f5f7;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.video-letterbox.show {
  opacity: 1;
}
.video-letterbox-top {
  top: 0;
  height: 31.5%;
}
.video-letterbox-bottom {
  bottom: 0;
  height: 31.5%;
}
/* stageFloat animation removed — images in the gallery/stage now stay put */
.stage-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 22px 16px;
  background: linear-gradient(
    180deg,
    rgba(11, 12, 13, 0) 0%,
    rgba(11, 12, 13, 0.55) 45%,
    rgba(11, 12, 13, 0.88) 100%
  );
}
.stage-overlay-text {
  color: #dce1e4;
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 48ch;
}

/* chassis / configurator */
.chassis-wrap {
  padding: 40px 22px 4px;
}
.chat-bubble {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: #fff8ec;
  border: 1px solid var(--signal-line);
  color: var(--signal-deep);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  padding: 11px 13px;
  border-radius: 12px;
  max-width: 230px;
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.16);
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition:
    opacity 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
  pointer-events: none;
}
.chat-bubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.bank-card.has-note {
  z-index: 20;
}
.chat-bubble svg:first-child {
  flex-shrink: 0;
}
.chat-bubble button {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--signal-deep);
  opacity: 0.6;
  font-size: 15px;
  line-height: 1;
  padding: 2px;
}

/* The line drawing behaves exactly like the backlit image: same box, same size,
   opaque white background so nothing underneath shows through. */
.truck-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: var(--truck-ratio, 1002.88/359.24);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Inner wrapper. Its aspect-ratio is bound to --truck-ratio, which JS sets
   from the loaded artwork's OWN viewBox (see loadTruckConfig). Because this
   box therefore always matches the SVG's canvas exactly, preserveAspectRatio
   ="xMidYMid meet" fills it with zero letterboxing — so whatever you do in
   Illustrator (move the truck on the canvas, recolour, reshape a chamber,
   change opacity, re-export with a different crop) is reproduced faithfully
   and nothing here needs hand-tuning. The card's own size is fixed elsewhere
   (see .truck-card / the morph engine) and is NOT affected by the artwork. */
.truck-inner {
  position: relative;
  width: 100%;
  aspect-ratio: var(--truck-ratio, 1002.88/359.24);
}
.truck-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Each bay sits precisely at its real cargo-zone centroid (computed from the
   same zone geometry drawn into the SVG below), as a small overlay for the
   icon + interactive states (empty/hover/drag/remove). The colored SHAPE
   itself is drawn into the loaded config SVG (see paintChambers) so it exactly
   matches the truck's real angled panel — these overlays never draw their
   own background/shape, only the icon + interaction chrome. */

/* build CTA — a hovering button layered over the card (bottom-right), so its
   appearance never changes the card's own content flow/height. */
.build-fab {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 8;
  background: var(--bc-text-dark);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow:
    0 14px 34px rgba(17, 17, 17, 0.18),
    0 2px 10px rgba(17, 17, 17, 0.08);
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.build-fab.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  animation: breathe 2.8s ease-in-out infinite;
}
.build-fab:hover {
  background: var(--blue);
  color: var(--signal-ink);
  box-shadow: 0 0 22px var(--blue-glow);
  animation: none;
}
@keyframes breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.12);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(17, 17, 17, 0);
  }
}

/* loading (dark "screen" within the white card) */
/* --- X-ray scan reveal (shown inside "Your build" card while building) ---
   Both truck images live INSIDE the same inline SVG at identical x/y/width/
   height and share its viewBox, so they're guaranteed pixel-aligned with the
   mask geometry at any size — no hard-coded offsets, scales with the card. */
.scan-wrap {
  position: absolute;
  inset: 0;
  background: var(--dark2);
  overflow: hidden;
}
.scan-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}
.transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: var(--dark2);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--intro-overlay-fade-ms, 550ms) ease;
}
.transition-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.transition-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.transition-overlay video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.loading-wrap {
  padding: 64px 30px;
  text-align: center;
  background: var(--dark2);
}
.spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(24, 184, 232, 0.18);
  border-top-color: var(--blue);
  margin: 0 auto 22px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading-wrap .lw-title {
  color: #f2f4f5;
  font-family: var(--disp);
  font-size: 16.5px;
  font-weight: 600;
  margin-bottom: 10px;
}
.loading-wrap .lw-msg {
  color: #9aa3aa;
  font-size: 13.5px;
  max-width: 44ch;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0;
  animation: fadein 0.6s ease 0.4s forwards;
}
@keyframes fadein {
  to {
    opacity: 1;
  }
}

/* gallery */
.view-gallery {
  display: flex;
  gap: 8px;
  padding: 14px 22px 20px;
  overflow-x: auto;
}
.view-thumb {
  flex: 0 0 auto;
  width: 82px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface2);
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}
.view-thumb:hover {
  border-color: var(--blue-line);
  transform: translateY(-1px);
}
.view-thumb.on {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-bg);
}
.view-thumb img {
  width: 100%;
  height: 46px;
  object-fit: cover;
  display: block;
}
.view-thumb .vt-label {
  font-size: 9.5px;
  text-align: center;
  padding: 4px 2px;
  color: var(--ink2);
  font-weight: 500;
}
.view-thumb .vt-play {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: rgba(6, 9, 9, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.view-thumb .vt-play svg {
  width: 8px;
  height: 8px;
  color: #fff;
}

/* final-phase action row */
.action-row {
  display: flex;
  gap: 10px;
  padding: 0 22px 22px;
  flex-wrap: wrap;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink2);
  transition: 0.2s;
  text-decoration: none;
}
.action-btn svg {
  width: 15px;
  height: 15px;
}
.action-btn:hover {
  border-color: var(--blue-line);
  color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

/* ---------- HANDLES PANEL (8-icon board) ---------- */
.live-panel {
  background: var(--surface);
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh);
}
.live-panel h3 {
  font-size: 15.5px;
  letter-spacing: -0.015em;
  margin-bottom: var(--s1);
}
.handles-lede {
  font-size: 13px;
  color: var(--dim);
  margin-bottom: var(--s3);
}
/* Colored circular badges per particle — matches the reference: a soft white
   disc holding a tinted icon, muted when not yet covered. A faint decorative
   wave+dot backdrop sits behind the whole board (handlesBgSVG()). */
.icon-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 10px 14px;
  margin-bottom: 0;
  overflow: hidden;
}
.ib-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ib-tile {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.ib-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 3px 10px rgba(20, 20, 25, 0.05);
  display: grid;
  place-items: center;
  color: var(--dim2);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.ib-badge svg {
  width: 19px;
  height: 19px;
}
.ib-tile.on .ib-badge {
  color: var(--tint, var(--signal-deep));
  border-color: color-mix(
    in srgb,
    var(--tint, var(--signal-deep)) 32%,
    var(--line)
  );
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--tint, var(--signal-deep)) 22%, transparent);
}
.ib-tile:not(.on) .ib-badge {
  opacity: 0.55;
}
.ib-um {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.03em;
  color: var(--dim2);
  text-transform: none;
}
.ib-tile b {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim2);
}
.ib-tile.on b {
  color: var(--ink);
}
@media (max-width: 420px) {
  .icon-board {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   FINAL-PHASE LAYOUT  (after "Build My Truck")
   Left  : off-white card (images/video) + floating overlay bits,
           with Save/Email buttons OUTSIDE below the card.
   Right : "What your build handles" panel (was the steps column).
   Bottom: a "Compare with T5" scroll hint -> reveals comparison.
   Loading: both the left handles panel AND the right steps hide.
   ============================================================ */
/* --- visibility switches driven by phase classes on .reveal-sticky ---
   phase-loading   : only the true 'loading' (scan) phase
   phase-final     : only the true, fully-revealed 'final' phase
   phase-final-look: 'transition' OR 'final' — i.e. the finished-truck
                     styling (off-white card, full-bleed stage, gallery
                     strip) should already be correct, even while it's
                     still sitting behind the intro-video overlay, so
                     nothing visibly shifts once the overlay fades away */
.reveal-sticky.phase-loading .build-live .live-panel,
.reveal-sticky.phase-final-look .build-live .live-panel {
  opacity: 0;
  pointer-events: none;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.reveal-sticky.phase-loading #stageSteps {
  opacity: 0 !important;
  pointer-events: none !important;
}
.reveal-sticky.phase-final-look #stageSteps {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- Loading-phase assembly readout (right column) ---- */
#stageLoading {
  opacity: 0;
  pointer-events: none;
  justify-content: flex-start;
  transition: opacity 0.45s ease;
}
.reveal-sticky.phase-loading #stageLoading {
  opacity: 1;
}
.assembly-panel {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6);
  box-shadow: var(--sh);
}
.asm-head h3 {
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-top: var(--s3);
}
.asm-list {
  margin-top: var(--s5);
  display: flex;
  flex-direction: column;
}
.asm-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
  opacity: 0;
  transform: translateY(6px);
  animation: asmIn 0.5s var(--ease-out) forwards;
}
.asm-row:first-child {
  border-top: none;
}
.asm-row .asm-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--blue);
}
.asm-row.done .asm-tick {
  border-color: var(--blue);
  background: var(--blue-bg);
}
.asm-row.done {
  color: var(--ink);
}
.asm-row b {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.asm-row .asm-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim2);
}
@keyframes asmIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#stageFinalHandles {
  opacity: 0;
  pointer-events: none;
  justify-content: flex-start;
}
.reveal-sticky.built.phase-final #stageFinalHandles {
  opacity: 1;
  pointer-events: auto;
}

/* Save this build / Email my build — now live in the RIGHT column (there's
   no room left below the now full-size card on the left). Kept to true
   'final' only (not 'transition') — no point showing it while the intro
   video still covers the card. */
/* Final right column reads as one composed stack: coverage panel, then the
   two actions as equal-weight siblings, then the compare hint behind a rule. */
/* Content here is budgeted to the truck-card's own height (fs-full has a
   max-height, chip rows wrap, chamber list is a max of 3 pinned nodes) so
   this column never needs its own scrollbar — it just fits. */
#stageFinalHandles {
  gap: var(--s3);
  overflow: visible;
  min-height: 0;
}
.final-actions {
  display: none;
  gap: var(--s3);
  margin-top: 0;
  width: 100%;
}
.reveal-sticky.phase-final .final-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.final-actions .action-btn {
  width: 100%;
  justify-content: center;
}

/* card + everything inside it goes off-white so the truck renders (which sit
   on the same #F5F5F7) blend seamlessly — no dark/white bands inside.
   Applied from 'transition' onward so it's already settled by the time the
   intro-video overlay dissolves away.
   Also: .truck-card's base ratio is now the fixed 1024/768 that matches the
   backlit hero (see .truck-card above) — the gallery here uses a different,
   wider set of photographic assets, so it gets its own explicit ratio too. */
.reveal-sticky.phase-final-look .truck-card {
  background: #f5f5f7;
  border-color: #e9e9ec;
  aspect-ratio: 1900/560;
}
.reveal-sticky.phase-final-look .stage {
  background: #f5f5f7;
}
.reveal-sticky.phase-final-look .stage img,
.reveal-sticky.phase-final-look .stage video {
  object-fit: contain;
}
/* overlay bits (Your build / Edit / caption / thumbnails) simply hover over
   the off-white card, in place, functioning as usual */
.reveal-sticky.phase-final .tc-overlay .tc-title {
  color: var(--bc-text-dark);
  text-shadow: none;
}
.reveal-sticky.phase-final-look #buildCardBody {
  position: absolute;
  inset: 0;
}
.reveal-sticky.phase-final-look .stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.reveal-sticky.phase-final-look .view-gallery {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 7px 8px;
  gap: 7px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.1);
  z-index: 6;
}
.reveal-sticky.phase-final-look .view-thumb {
  width: 66px;
  background: rgba(255, 255, 255, 0.8);
}
.reveal-sticky.phase-final-look .view-thumb .vt-label {
  color: var(--bc-text-dark-muted);
}
.reveal-sticky.phase-final-look .view-thumb img {
  height: 38px;
}

/* "Compare with T5" — sits at the bottom of the right column now (pushed
   down via margin-top:auto inside #stageFinalHandles's flex column) */
.compare-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  font-family: var(--disp);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink2);
  padding: var(--s4) var(--s3) 0;
  transition: 0.2s;
  margin-top: auto;
  width: 100%;
}
.compare-hint svg {
  width: 16px;
  height: 16px;
  animation: hintBob 1.8s ease-in-out infinite;
}
.compare-hint:hover {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.05);
}
@keyframes hintBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}
.reveal-sticky.built.phase-final .compare-hint {
  display: inline-flex;
}

.care-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.care-row .h-tile {
  background: var(--surface2);
  padding: 15px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.care-row .h-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface3);
  color: var(--dim);
}
.care-row b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}
.care-row span {
  font-size: 10.5px;
  color: var(--dim);
  line-height: 1.35;
}
.flags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.flag {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
}
.flag svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.flag.f-warn {
  background: var(--amber-bg);
  color: #6b4400;
}
.placeholder-panel {
  text-align: center;
  padding: 14px 4px;
  color: var(--dim2);
  font-size: 13px;
  line-height: 1.6;
}
.placeholder-panel svg {
  width: 26px;
  height: 26px;
  color: var(--line2);
  margin-bottom: 8px;
}

.compare-nudge {
  margin-top: 16px;
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--blue-bg);
  border: 1px solid var(--blue-line);
  font-size: 13px;
  color: var(--signal-deep);
  line-height: 1.5;
  display: none;
  font-weight: 500;
}
.compare-nudge.show {
  display: block;
}
.compare-nudge a {
  font-weight: 700;
  color: var(--signal-deep);
}

/* ---------- STEPS ---------- */
.step {
  scroll-margin-top: 90px;
}
.already-covered {
  display: flex;
  gap: var(--s3);
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
}
.already-covered .ac-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--bc-text-dark);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.already-covered b {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.ac-chips {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
  margin-left: auto;
}
.ac-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 7px;
  white-space: nowrap;
}
.step-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 4px;
}
.step-num {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 800;
  color: var(--signal-deep);
  line-height: 1;
  flex-shrink: 0;
}
.step-head h2 {
  font-size: 18.5px;
  letter-spacing: -0.02em;
}
.step-sub {
  color: var(--dim);
  font-size: 13px;
  margin: 4px 0 16px;
}
.step-byline {
  color: var(--dim);
  font-size: 11px;
  margin: -10px 0 12px;
  opacity: 0.7;
}
.step.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Step 1 is ONE card: a photo on top (with its pollutant tags overlaid in
   the corner), and the picker living directly below it inside the same
   border. The up/down arrows sit next to the neighbour they'd bring in —
   top arrow beside the row above, bottom arrow beside the row below —
   rather than stacked on the active row itself. */
.zone-picker {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh);
}
.zp-art {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--surface3);
  overflow: hidden;
}
.zp-art .zone-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.zp-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zpFade 0.25s var(--ease-out);
}
@keyframes zpFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* pollutant tags overlaid on the photo itself, top-right corner */
.zp-tags-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 70%;
}
.zp-tags-overlay .zp-tag {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  box-shadow: var(--sh);
  color: var(--bc-text-dark);
}

.zp-hint {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  margin-bottom: 6px;
}
/* hidden via visibility (not removed from the DOM) once a zone is confirmed
   — this keeps the main box's height fixed so selecting/arrowing never
   shifts anything else on the page, only the text inside changes */
.zp-hint--hidden {
  visibility: hidden;
}
.zp-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink2);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 9px;
}

/* the wheel — lives directly beneath the photo, inside the same card */
.zone-list {
  position: relative;
  border-top: 1px solid var(--line);
  padding: var(--s3);
}
.zone-wheel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zw-row {
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 9px 12px;
  display: block;
  width: 100%;
  transition:
    opacity var(--t-fast) ease,
    border-color var(--t-fast) ease,
    background var(--t-fast) ease;
}
.zw-row .zn {
  font-size: 13px;
  font-weight: 600;
}
/* neighbour rows — name only, single line, plain and faded ("peeking").
   Uses one of the page's own accent colours (AA-safe on light surfaces)
   instead of grey, so it reads clearly against the white background. */
.zw-row.ghost {
  opacity: 1;
  color: var(--signal-deep);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.zw-row.ghost:hover {
  color: var(--ink);
}
.zw-empty {
  border: none;
  background: none;
  pointer-events: none;
}
/* each neighbour row sits beside its own arrow — clicking the arrow brings
   that specific row in, so the control sits right next to what it does */
.zw-row-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.zw-row-wrap .zw-row {
  flex: 1;
  min-width: 0;
}
/* active centre: light grey always — no colour state change on selection.
   This is the one and only place name+description show. */
.zw-main-wrap {
  position: relative;
  z-index: 2;
  margin: 2px 0;
}
.zw-row.main {
  border-color: var(--line);
  background: var(--surface2);
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.zw-row.main .zp-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.zw-row.main .zp-ico svg {
  width: 19px;
  height: 19px;
}
.zw-row.main .zw-detail {
  min-width: 0;
}
.zw-row.main .zn {
  font-size: 14px;
  color: var(--ink);
}
.zw-row.main .zd {
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 1px;
}
.zw-arrow {
  width: 30px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 7px;
  color: var(--dim);
  cursor: pointer;
  transition: 0.15s;
  flex-shrink: 0;
}
.zw-arrow svg {
  width: 15px;
  height: 15px;
}
.zw-arrow:hover:not(:disabled) {
  color: var(--signal-deep);
  border-color: var(--signal-line);
  background: var(--signal-bg);
}
.zw-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.advisory {
  margin-top: 14px;
  border-radius: 13px;
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.55;
  display: none;
  border: 1px solid var(--blue-line);
  background: var(--blue-bg);
  color: var(--signal-deep);
}
.advisory.show {
  display: block;
}

.concern-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.chip {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: var(--s2) var(--s3);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  transition:
    border-color var(--t-fast) ease,
    color var(--t-fast) ease;
}
.chip svg {
  width: 16px;
  height: 16px;
  color: var(--dim2);
  flex-shrink: 0;
}
.chip:hover {
  border-color: var(--blue-line);
  color: var(--ink);
}
.chip.on {
  border-color: var(--blue);
  background: var(--blue-bg);
  color: var(--signal-deep);
}
.chip.on svg {
  color: var(--blue);
}

.bank-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-items: stretch;
}
@media (max-width: 1100px) {
  .bank-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bank-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition:
    border-color var(--t-fast) ease,
    box-shadow var(--t-fast) ease;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bank-card:hover {
  border-color: var(--line2);
  box-shadow: var(--sh-hover);
}
/* Step 3 chambers carry a real texture in their own contaminant colour as the
   card backdrop (generated pattern shows through if the asset is missing). A
   white wash keeps the text fully legible over it. */
.bc-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.bc-media .bc-pattern-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--chamber);
  opacity: 0.14;
}
.bc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.82) 46%,
    rgba(255, 255, 255, 0.95) 100%
  );
}
.bank-card:hover .bc-media img {
  opacity: 1;
}
.bc-body {
  position: relative;
  z-index: 1;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1;
}
.bank-card.recommended {
  border-color: var(--chamber);
}
.bank-card.recommended::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--chamber);
  z-index: 2;
}
.bank-card.blocked .bc-media::after {
  background: linear-gradient(
    180deg,
    rgba(247, 248, 249, 0.72),
    rgba(247, 248, 249, 0.94)
  );
}
.bank-card.blocked {
  opacity: 0.9;
}
/* filtered = not a match for the concerns picked in step 2 — reversible, so it
   reads as "narrowed out" rather than "unavailable" */
.bank-card.filtered {
  cursor: not-allowed;
}
.bank-card.filtered .bc-media {
  filter: grayscale(1);
}
.bank-card.filtered .bc-media::after {
  background: linear-gradient(
    180deg,
    rgba(247, 248, 249, 0.8),
    rgba(247, 248, 249, 0.94)
  );
}
.bank-card.filtered:hover {
  border-color: var(--line);
  box-shadow: none;
}
.bank-card.filtered .bc-icon,
.bank-card.filtered .bc-name,
.bank-card.filtered .bc-blurb {
  opacity: 0.55;
}
.bank-card.placed .bc-body {
  opacity: 0.62;
}
.bank-card.placed .bc-add {
  opacity: 1;
}
.bc-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(17, 17, 17, 0.06);
  color: var(--bc-text-dark);
}
.bc-icon svg {
  width: 20px;
  height: 20px;
}
.bc-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bc-text-dark);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bc-badge {
  background: var(--signal-bg);
  color: var(--signal-deep);
  border: 1px solid var(--signal-line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.bc-blurb {
  font-size: 12.5px;
  color: var(--bc-text-dark-muted);
  line-height: 1.5;
}
.bc-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--s2);
}
.bc-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--chamber);
  color: var(--chamber);
  background: color-mix(in srgb, var(--chamber) 8%, #fff);
}
.bc-tag svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.bc-tag.alert {
  border-color: var(--alert-line);
  color: var(--alert-deep);
  background: var(--alert-bg);
}
.bc-add:active {
  cursor: grabbing;
}

/* ---------- COMPARISON (dark finale) ---------- */
.compare-section {
  background: var(--dark);
  color: #f2f0ec;
  padding: var(--s8) 0 var(--s9);
  margin-top: 0;
  scroll-margin-top: 64px;
}
.compare-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s6);
}
@media (max-width: 760px) {
  .compare-inner {
    padding: 0 18px;
  }
}
.compare-section .eyebrow {
  color: var(--blue);
}
.compare-section h2 {
  color: #fff;
  font-size: clamp(22px, 2.8vw, 30px);
  margin: 8px 0 8px;
}
.compare-section > .compare-inner > p.lede {
  color: var(--dark-txt2);
  max-width: 56ch;
  margin-bottom: 32px;
  font-size: 14px;
}

.compare-cards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 28px;
}
@media (max-width: 860px) {
  .compare-cards {
    grid-template-columns: 1fr;
  }
}
.ccard {
  background: #1f1f20;
  border: 1px solid var(--dark-line);
  border-radius: 18px;
  padding: 22px 24px 30px;
  transition: border-color 0.25s ease;
}
.ccard.mine {
  border-color: rgba(224, 163, 60, 0.42);
}
/* labels are plain text — no fill, no box — and kept muted so they read as
   quiet section markers rather than bright chips */
.ccard .cc-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-txt2);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 8px;
}
.ccard.mine .cc-tag {
  color: #c89a54;
}
/* belt-and-braces: explicit id-scoped rule so these two labels can never
   pick up a filled/boxed treatment from elsewhere — text only, muted */
.compare-section .ccard .cc-tag {
  display: inline-block;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.ccard h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 3px;
}
.ccard .cc-sub {
  font-size: 12.5px;
  color: var(--dark-txt2);
  margin-bottom: 16px;
}
/* VS medallion — sits on the seam between the two cards, a quiet divider
   rather than a competing graphic. Hidden on narrow layouts where the cards
   stack (no seam to sit on). */
.compare-vs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1f1f20;
  border: 1px solid var(--dark-line);
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--dark-txt2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
@media (max-width: 860px) {
  .compare-vs {
    display: none;
  }
}

.skeleton-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1900/560;
  border-radius: 12px;
  overflow: visible;
  background: #cbcbcc;
}
.skeleton-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0.85) saturate(0.9);
}
.skel-pin {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--signal-bg);
  transform: translate(-50%, -50%);
}
.skel-leader {
  position: absolute;
  width: 1px;
  background: var(--signal-line);
  transform: translateX(-50%);
}
.skel-tag {
  position: absolute;
  transform: translate(-50%, 0);
  background: #1f1f20;
  border: 1px solid var(--dark-line);
  color: #ede7da;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.skel-tag.dim {
  color: var(--dark-txt2);
  font-weight: 500;
}
.skel-bracket {
  position: absolute;
  height: 1px;
  background: rgba(224, 163, 60, 0.3);
}

.ccard-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.cci {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 20px;
  background: #141415;
  color: var(--dark-txt2);
  border: 1px solid var(--dark-line);
}
.cci.on {
  background: var(--signal-bg);
  color: var(--blue);
  border-color: var(--blue-line);
}
.cci svg {
  width: 12px;
  height: 12px;
}

/* ---- Spec comparison — quiet by default, loud only where it differs ----
   A small dot per value (filled = present/better, hollow = absent) gives an
   at-a-glance read alongside the typographic value, still restrained —
   no bars, no HUD ticks, just one consistent mark. */
.spec-grid {
  margin-bottom: var(--s6);
  border-top: 1px solid var(--dark-line);
}
.spec-hrow,
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s3);
  border-bottom: 1px solid #232324;
}
.spec-hrow span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-txt2);
}
.spec-hrow span:not(:first-child),
.spec-row .sc-val {
  text-align: center;
  justify-self: center;
}
.spec-hrow span.sh-mine {
  color: var(--blue);
}
.spec-row {
  position: relative;
}
.spec-row.differs {
  background: linear-gradient(90deg, var(--signal-bg), transparent 60%);
}
.spec-row.differs::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--blue);
}
.spec-row .sc-label {
  font-size: 14px;
  color: #e9e7e2;
  font-weight: 500;
}
.spec-row .sc-val {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--dark-txt2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spec-row .sc-val .sc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}
.spec-row.differs .sc-val.mine {
  color: var(--blue);
  font-weight: 600;
}
.spec-row.differs .sc-val.mine .sc-dot {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--signal-bg);
}
.spec-row .sc-note {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  color: #5f686e;
  margin-top: 2px;
  font-weight: 400;
}
@media (max-width: 720px) {
  .spec-hrow,
  .spec-row {
    gap: var(--s2);
    padding: var(--s3) var(--s2);
  }
  .spec-row .sc-label,
  .spec-row .sc-val {
    font-size: 12.5px;
  }
}

.closing-note {
  background: #1f1f20;
  border: 1px solid var(--dark-line);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #e3e0da;
  margin-bottom: 26px;
}
.compare-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.compare-cta a.primary {
  background: var(--blue);
  color: var(--signal-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.2s;
}
.compare-cta a.primary:hover {
  background: var(--blue-hover);
  box-shadow: 0 0 20px var(--blue-glow);
}
.compare-cta a.secondary {
  color: var(--dark-txt2);
  font-size: 13.5px;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.compare-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: var(--dark-txt2);
  font-size: 14px;
  border: 1px dashed var(--dark-line);
  border-radius: 14px;
}

/* ---------- FAQ ---------- */
.faq-section {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--s10) var(--s6);
}
@media (max-width: 760px) {
  .faq-section {
    padding: 48px 18px;
  }
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--s5) var(--s2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  font-family: var(--disp);
  font-size: 16px;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  transition: color var(--t-fast) ease;
}
.faq-q:hover {
  color: var(--blue);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast) ease;
}
.faq-q svg {
  width: 18px;
  height: 18px;
  color: var(--dim2);
  flex-shrink: 0;
  transition: transform 0.25s;
}
.faq-item.open .faq-q svg {
  transform: rotate(45deg);
  color: var(--blue);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-a {
  max-height: 200px;
}
.faq-a p {
  font-size: 13.5px;
  color: var(--dim);
  line-height: 1.65;
  padding: 0 4px 20px;
}

/* ---------- CLOSING CTA ---------- */
.closing-cta {
  background: var(--surface2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s10) var(--s6);
  text-align: center;
}
.closing-cta h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.025em;
  margin-bottom: var(--s3);
}
.closing-cta p {
  color: var(--dim);
  font-size: 14.5px;
  margin-bottom: var(--s6);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.closing-cta a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bc-text-dark);
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  padding: 14px 24px;
  border-radius: 11px;
  text-decoration: none;
  transition: 0.2s;
}
.closing-cta a:hover {
  background: var(--blue);
  color: var(--signal-ink);
  box-shadow: 0 0 22px var(--blue-glow);
}

/* ---------- FOOTER ---------- */
footer {
  background: var(--bg);
}
.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 32px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr;
    padding: 40px 18px 20px;
    gap: 28px;
  }
}
.footer-brand {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 10px;
}
.footer-inner p {
  font-size: 13px;
  color: var(--dim);
  max-width: 34ch;
  line-height: 1.6;
}
.footer-col h5 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  font-size: 13.5px;
  color: var(--ink2);
  text-decoration: none;
  margin-bottom: 9px;
}
.footer-col a:hover {
  color: var(--blue);
}
.footer-bottom {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 32px 40px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--dim2);
}
@media (max-width: 760px) {
  .footer-bottom {
    padding: 18px 18px 36px;
  }
}

/* ======================================================================
   COMPONENT SYSTEM
   Written last on purpose: it governs everything above it. The page had
   grown five near-identical button treatments and eight boxed-text
   treatments that differed by accident, not intent. This collapses them
   into four families with one rule each about when to use them.

   The governing distinction, which is what was actually missing:
     .btn     — you can click it and something happens
     .chip    — you can click it and it toggles a choice
     .tag     — you cannot click it; it labels or classifies
     .note    — you cannot click it; it's a block of explanatory text
     .bubble  — floats above other content, anchored to something
   Anything that reads as "a small rounded thing with text in it" is one
   of these five and nothing else.
   ====================================================================== */

/* ---- Step 2: expanding concern cards --------------------------------
   Each option opens downward across the full width of the step to show a
   particle field for that contaminant, then collapses when the cursor
   leaves. Grid-template-rows 0fr -> 1fr animates height without needing a
   hardcoded pixel max-height. */
/* Step 2: selectable concern cards. A real photo of the condition fills the
   card's media area (generated particle field shows through if the asset is
   missing), with a circular icon badge overlaid. Multi-select — selected
   cards get an amber ring, raised shadow and a corner check. */
.concern-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.concern-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--t-fast) ease,
    box-shadow var(--t-fast) ease,
    transform var(--t-fast) ease;
}
.concern-card:hover,
.concern-card:focus-visible {
  border-color: var(--line2);
  box-shadow: var(--sh-hover);
  transform: translateY(-2px);
  outline: none;
}
.concern-card.on {
  border-color: var(--signal-deep);
  box-shadow:
    0 0 0 1.5px var(--signal-deep),
    var(--sh-hover);
}
.cc-media {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--surface2);
  overflow: hidden;
}
.cc-media .cc-vis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bc-text-dark);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.14);
  backdrop-filter: blur(4px);
}
.cc-badge svg {
  width: 18px;
  height: 18px;
}
.cc-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--signal-deep);
  color: #fff;
  display: grid;
  place-items: center;
  transform: scale(0.5);
  opacity: 0;
  transition:
    transform var(--t-fast) var(--ease-out),
    opacity var(--t-fast) ease;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.2);
}
.cc-check svg {
  width: 14px;
  height: 14px;
}
.concern-card.on .cc-check {
  transform: scale(1);
  opacity: 1;
}
.cc-body {
  padding: var(--s3) var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cc-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.concern-card.on .cc-title {
  color: var(--signal-deep);
}
/* cap reached (3 picked): unpicked cards read as unavailable and don't respond */
.concern-card.at-cap {
  opacity: 0.42;
  filter: saturate(0.6);
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.cc-desc {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.45;
}
.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--dim);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 8px;
}
.cc-tag svg {
  width: 11px;
  height: 11px;
  color: var(--dim2);
}
@media (max-width: 1100px) {
  .concern-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Build-section instrumentation ---------------------------------
   Registration ticks at the card corners + a faint measurement grid read
   as a machine viewport. Deliberately drawn with borders/gradients only
   (no assets, no glow) so it stays quiet at 100% and never competes with
   the truck itself. */
.reveal-sticky.built .reveal-in::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    #000 30%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    #000 30%,
    transparent 100%
  );
}
.reveal-in {
  position: relative;
}
.reveal-in > * {
  position: relative;
  z-index: 1;
}
.truck-card::before,
.truck-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 7;
  border-color: var(--line2);
  border-style: solid;
  opacity: 0.9;
}
.truck-card::before {
  top: 10px;
  left: 10px;
  border-width: 1px 0 0 1px;
  border-radius: 3px 0 0 0;
}
.truck-card::after {
  bottom: 10px;
  right: 10px;
  border-width: 0 1px 1px 0;
  border-radius: 0 0 3px 0;
}
.reveal-sticky.phase-final-look .truck-card::before,
.reveal-sticky.phase-final-look .truck-card::after {
  border-color: rgba(17, 17, 17, 0.14);
}

.cfg-missing {
  padding: var(--s6);
  text-align: center;
  font-size: 13px;
  color: var(--dim);
  font-family: var(--mono);
}
.truck-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Empty bays read as targets: the socket ellipse and its plus lift toward
   the accent on hover. Nothing here assumes a shape — it styles whatever
   the artwork authored. */
#plus_sign > *,
#truck > ellipse {
  transition: opacity var(--t-fast) ease;
}
#plus_sign > *:hover {
  opacity: 0.65;
}
#chambers > * {
  transition: opacity var(--t-med) ease;
}
.bc-icon-layer {
  pointer-events: none;
}
#truckInner.bay-dragover #plus_sign > * {
  opacity: 0.45;
}

/* ---------- FINAL-VIEW INSTRUMENTATION (items 1,2,4,5,6,7) ----------- */
/* 4. "Spin it" hint over the rotating video — same bubble language as the
      "hover to see inside" prompt so the two read as one system. */
/* stage-hint bubble removed — the rotating cue now lives inside the caption pill itself */

/* 1+2. A "just-configured" readout strip across the top of the final card.
   This is the bit that makes the page feel like it BUILT something: it
   states the spec that was assembled, in the mono/instrument register. */
/* build-stamp removed from the card — its info now lives in the final summary panel (right column) */

/* 5. Reward buttons — this is the conversion moment, so these get more
      presence than a standard outline button while staying in-language:
      the accent fill is reserved for exactly this pair. */
.final-actions .action-btn {
  position: relative;
  overflow: hidden;
  padding: 13px 16px;
  font-size: 13px;
}
.final-actions .action-btn.reward {
  background: var(--bc-text-dark);
  border-color: var(--ink);
  color: #fff;
}
.final-actions .action-btn.reward:hover {
  background: #000;
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.2);
}
.final-actions .action-btn.reward svg {
  color: var(--signal);
}
.final-actions .action-btn.reward.is-saved {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}
.final-actions .action-btn.reward.is-saved svg {
  color: var(--signal-ink);
}

/* 6. "+1" token that flies to the header bookmark, cart-style */
.fly-one {
  position: fixed;
  z-index: 999;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--signal-deep);
  background: #fff8ec;
  border: 1px solid var(--signal-line);
  border-radius: 999px;
  padding: 3px 9px;
  pointer-events: none;
  transition:
    transform 0.72s cubic-bezier(0.5, -0.2, 0.7, 1),
    opacity 0.72s ease;
}
.saved-btn.bump {
  animation: bump 0.42s var(--ease-out);
}
@keyframes bump {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.22);
  }
}

/* 7. Inline email panel — opens under the actions, replaces itself with a
      confirmation on send. No modal: keeps the built truck on screen. */
.email-panel {
  display: none;
  margin-top: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s5);
  box-shadow: var(--sh);
}
.email-panel.show {
  display: block;
  animation: panelIn 0.34s var(--ease-out);
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.email-panel label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 6px;
}
.email-panel input,
.email-panel textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  transition: border-color var(--t-fast) ease;
}
.email-panel input:focus,
.email-panel textarea:focus {
  outline: none;
  border-color: var(--signal-line);
  box-shadow: 0 0 0 3px var(--signal-bg);
}
.email-panel textarea {
  resize: vertical;
  min-height: 74px;
  line-height: 1.55;
}
.email-panel .ep-row {
  margin-bottom: var(--s4);
}
.email-panel .ep-send {
  display: flex;
  gap: var(--s3);
  align-items: center;
}
.email-panel .ep-err {
  font-size: 11.5px;
  color: var(--alert-deep);
  margin-top: 6px;
  display: none;
}
.email-panel .ep-err.show {
  display: block;
}
.email-sent {
  text-align: left;
}
.email-sent .es-tick {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--signal-bg);
  border: 1px solid var(--signal-line);
  color: var(--signal-deep);
  display: grid;
  place-items: center;
  margin-bottom: var(--s3);
}
.email-sent b {
  display: block;
  font-family: var(--disp);
  font-size: 15.5px;
  letter-spacing: -0.015em;
  margin-bottom: var(--s2);
}
.email-sent span {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.6;
}

/* ---------- Final-summary panel (right column, final phase only) ------
   Two states living in the same mount: .fs-strip (slim, shown only while
   the email panel is open) and .fs-full (the actual reveal card). Toggled
   by #stageFinalHandles.email-open — see the email-panel rules below for
   why this keeps the column's total height constant. */
.final-summary {
  display: block;
}
.fs-full {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5) var(--s5);
  box-shadow: var(--sh);
  max-height: 640px;
  opacity: 1;
  transition:
    max-height 0.3s var(--ease-io),
    opacity 0.22s ease,
    padding 0.3s var(--ease-io),
    margin 0.42s var(--ease-io),
    border-width 0.42s ease;
}
.fs-head h3 {
  font-size: 16.5px;
  letter-spacing: -0.015em;
  margin: var(--s2) 0 var(--s1);
}
.fs-head p {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.5;
}
.fs-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.fs-row b {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.fs-row span {
  font-size: 12px;
  color: var(--dim);
}
.fs-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--surface2);
  color: var(--signal-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fs-ico.sm {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
.fs-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-top: var(--s4);
  margin-bottom: var(--s2);
}
.fs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink2);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
}
/* chambers "pinned to the stack" — a connector line runs through a node per
   chamber, echoing where it sits in the build rather than a flat list */
.fs-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-left: 20px;
}
.fs-stack::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: var(--line2);
}
.fs-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink);
}
.fs-node-dot {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim2);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line2);
}
.fs-node.built .fs-node-dot {
  background: #7c8b99;
  box-shadow: 0 0 0 1px #7c8b99;
}
.fs-node-name {
  flex: 1;
}
.fs-node em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim2);
}

/* Collapsed strip — badge + one-line summary, visible only mid-email-send */
.fs-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.3s var(--ease-io),
    opacity 0.22s ease,
    padding 0.3s var(--ease-io),
    margin 0.3s var(--ease-io);
}
.fs-strip-txt {
  font-size: 12px;
  color: var(--ink2);
}
.fs-strip-txt b {
  color: var(--ink);
  font-weight: 600;
}
#stageFinalHandles.email-open .fs-full {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-width: 0;
  pointer-events: none;
}
#stageFinalHandles.email-open .fs-strip {
  max-height: 60px;
  opacity: 1;
  margin-bottom: var(--s3);
  pointer-events: auto;
}

/* ---------- 1. BUTTONS -------------------------------------------------
   Geometry is shared so every button in the product looks related:
   10px radius, 600 weight, 8px icon gap, same focus ring. Only FILL
   changes between intents. Rule: exactly one --accent per view (the
   commit action); everything else is solid, outline or ghost.        */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color var(--t-fast) ease,
    box-shadow var(--t-fast) ease;
}
.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--signal-bg),
    0 0 0 4px var(--signal-line);
}

.btn--solid {
  background: var(--bc-text-dark);
  color: #fff;
  border-color: var(--ink);
}
.btn--solid:hover {
  background: #000;
  border-color: #000;
}

.btn--accent {
  background: var(--signal);
  color: var(--signal-ink);
  border-color: var(--signal);
}
.btn--accent:hover {
  background: var(--signal-bright);
  border-color: var(--signal-bright);
  box-shadow: 0 0 22px var(--signal-glow);
}

.btn--outline {
  background: var(--surface);
  color: var(--ink2);
  border-color: var(--line);
}
.btn--outline:hover {
  border-color: var(--line2);
  color: var(--ink);
  box-shadow: var(--sh-hover);
}

.btn--ghost {
  background: none;
  color: var(--dim);
  padding-left: var(--s2);
  padding-right: var(--s2);
}
.btn--ghost:hover {
  color: var(--ink);
}

.btn--sm {
  font-size: 12.5px;
  padding: 9px 14px;
  border-radius: 9px;
}
.btn--block {
  width: 100%;
}
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  background: var(--surface3);
  border-color: var(--line);
  color: var(--dim2);
  cursor: not-allowed;
  box-shadow: none;
}

/* On dark surfaces solid inverts, so the primary action stays the
   highest-contrast object in view rather than disappearing into the ink. */
.on-dark .btn--solid,
.compare-section .btn--solid,
.hero .btn--solid {
  background: #fff;
  color: var(--bc-text-dark);
  border-color: #fff;
}
.on-dark .btn--solid:hover,
.compare-section .btn--solid:hover,
.hero .btn--solid:hover {
  background: #f0f0f0;
  border-color: #f0f0f0;
}
.on-dark .btn--outline,
.compare-section .btn--outline {
  background: transparent;
  color: #e9e7e2;
  border-color: var(--dark-line);
}
.on-dark .btn--outline:hover,
.compare-section .btn--outline:hover {
  border-color: var(--dark-txt2);
  color: #fff;
  box-shadow: none;
}
.compare-section .btn--ghost {
  color: var(--dark-txt2);
}
.compare-section .btn--ghost:hover {
  color: #fff;
}

/* --- legacy button classes re-expressed in the system (markup unchanged) --- */
.cta,
.closing-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 10px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--bc-text-dark);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--t-fast) ease,
    box-shadow var(--t-fast) ease;
}
.cta svg,
.closing-cta a svg {
  width: 15px;
  height: 15px;
}
.cta:hover {
  background: #f0f0f0;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
}
.closing-cta a {
  background: var(--bc-text-dark);
  color: #fff;
  border-color: var(--ink);
}
.closing-cta a:hover {
  background: #000;
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.22);
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink2);
  text-decoration: none;
  transition:
    border-color var(--t-fast) ease,
    color var(--t-fast) ease,
    box-shadow var(--t-fast) ease;
}
.action-btn:hover {
  border-color: var(--line2);
  color: var(--ink);
  box-shadow: var(--sh-hover);
}

.bc-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--chamber, var(--ink));
  background: var(--chamber, var(--ink));
  color: #fff;
  text-align: center;
  transition:
    filter var(--t-fast) ease,
    box-shadow var(--t-fast) ease;
  cursor: pointer;
  margin-top: var(--s3);
}
.bc-add svg {
  width: 14px;
  height: 14px;
}
.bc-add:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px
    color-mix(in srgb, var(--chamber, #111) 35%, transparent);
}
.bc-add.added {
  background: color-mix(in srgb, var(--chamber) 16%, #fff);
  color: var(--chamber);
  border-color: var(--chamber);
}
.bc-add.locked,
.bc-add:disabled {
  background: var(--surface3);
  border-color: var(--line);
  color: var(--dim2);
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}
.bank-card.filtered .bc-add {
  background: var(--surface3);
  border-color: var(--line);
  color: var(--dim2);
}

.build-fab {
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.compare-cta a.primary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--signal);
  color: var(--signal-ink);
  border: 1px solid var(--signal);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition:
    background var(--t-fast) ease,
    box-shadow var(--t-fast) ease;
}
.compare-cta a.primary:hover {
  background: var(--signal-bright);
  box-shadow: 0 0 22px var(--signal-glow);
}
.compare-cta a.secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--dark-txt2);
  font-size: 13.5px;
  text-decoration: none;
  padding: 13px 6px;
  transition: color var(--t-fast) ease;
}
.compare-cta a.secondary:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 2. TAGS (read-only) ---------------------------------------
   Never clickable. Squarer than buttons (6px) so the two are never
   confused at a glance — that shape difference is the whole point.   */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--dim);
  white-space: nowrap;
}
.tag svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.tag--spec {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag--signal {
  background: var(--signal-bg);
  border-color: var(--signal-line);
  color: var(--signal-deep);
}
.tag--alert {
  background: var(--alert-bg);
  border-color: var(--alert-line);
  color: var(--alert-deep);
}
.tag--done {
  background: var(--surface3);
  border-color: var(--line);
  color: var(--dim2);
}

/* --- legacy tags re-expressed --- */
.ac-chip {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  white-space: nowrap;
}
/* ---------- 3. NOTES (read-only blocks) ------------------------------- */
.note {
  border-radius: 12px;
  padding: var(--s3) var(--s4);
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--dim);
}
.note--signal {
  border-color: var(--signal-line);
  background: var(--signal-bg);
  color: var(--signal-deep);
}
.note--alert {
  border-color: var(--alert-line);
  background: var(--alert-bg);
  color: var(--alert-deep);
}

/* --- legacy notes re-expressed --- */
.advisory {
  margin-top: var(--s4);
  border-radius: 12px;
  padding: var(--s3) var(--s4);
  font-size: 13px;
  line-height: 1.6;
  display: none;
  border: 1px solid var(--signal-line);
  background: var(--signal-bg);
  color: var(--signal-deep);
}
.advisory.show {
  display: block;
}
.blocked-note {
  border-radius: 12px;
  padding: var(--s3) var(--s4);
  font-size: 12.5px;
  line-height: 1.6;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--dim);
}
.closing-note {
  border-radius: 12px;
  padding: var(--s4) var(--s5);
  font-size: 13.5px;
  line-height: 1.65;
  border: 1px solid var(--dark-line);
  background: #1f1f20;
  color: #e3e0da;
  margin-bottom: var(--s6);
}

/* ---------- 4. BUBBLES (float above content) --------------------------
   Pill geometry (999px) — deliberately the roundest family, because a
   bubble is the only one that floats free of the layout.              */
.bubble {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 15px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bubble--dark {
  background: rgba(10, 13, 14, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #edebe6;
}
.bubble--signal {
  background: var(--signal-bg);
  border: 1px solid var(--signal-line);
  color: var(--signal-deep);
}

/* --- legacy bubbles re-expressed --- */
.stage-caption {
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(10, 13, 14, 0.55);
  color: #edebe6;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.stage-caption svg {
  width: 13px;
  height: 13px;
  color: #ffffff;
  flex-shrink: 0;
}
/* belt-and-braces: id-level rule so the rotate icon/text can never lose to a
   lower-specificity amber default, whatever order the stylesheet loads in */
#stageCaption {
  color: #ffffff;
}
#stageCaption svg {
  color: #ffffff;
  stroke: #ffffff;
}
.chat-bubble {
  border-radius: 12px;
}

/* ============================================================
   SHARED SITE HEADER + FOOTER (copied/adapted from index.html /
   styles.css so this page matches the main BetaClimate site)
   ============================================================ */
header.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px;
  z-index: 300;
  background: rgba(6, 18, 15, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition:
    background 0.5s ease,
    border-color 0.5s ease;
}
header.site-nav.on-light {
  background: rgba(242, 240, 232, 0.55);
  border-bottom: 1px solid rgba(11, 26, 21, 0.08);
}
header.site-nav .logo img {
  height: 42px;
  width: auto;
  display: block;
}
header.site-nav .nav-links {
  display: flex;
  gap: 36px;
}
header.site-nav .nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
  transition:
    opacity 0.25s,
    color 0.5s ease;
  font-family: var(--body);
}
header.site-nav .nav-links a:hover,
header.site-nav .nav-links a.active {
  opacity: 1;
  color: var(--bc-green-accent);
}
header.site-nav.on-light .nav-links a {
  color: var(--bc-text-dark);
}
header.site-nav.on-light .nav-links a:hover,
header.site-nav.on-light .nav-links a.active {
  color: var(--bc-teal-bright);
}
header.site-nav .hstatus {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 18px;
}
header.site-nav .hstatus .pill {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #e7eaec;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: 0.5s;
}
header.site-nav.on-light .hstatus .pill {
  background: rgba(11, 26, 21, 0.05);
  color: var(--bc-text-dark);
  border: 1px solid rgba(11, 26, 21, 0.1);
}

.site-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 310;
}
.site-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.site-nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.site-nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav-dropdown {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 90px 24px 28px;
  background: rgba(3, 16, 13, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 299;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.site-nav-dropdown.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.site-nav-dropdown a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--body);
}
.site-nav-dropdown a:last-child {
  border-bottom: none;
}

@media (max-width: 860px) {
  nav.site-nav .nav-links {
    display: none;
  }
  .site-nav-toggle {
    display: flex;
  }
}

.site-footer {
  padding: 100px 48px 40px;
  background: var(--bc-bg-darker);
  font-family: var(--body);
}
.site-footer .footer-cta {
  text-align: center;
  margin-bottom: 90px;
}
.site-footer h2 {
  font-family: var(--disp);
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  max-width: 640px;
  margin: 0 auto 40px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--bc-text-light);
}
.site-btn {
  display: inline-block;
  background: var(--bc-green-accent);
  color: var(--bc-text-dark);
  padding: 16px 38px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.site-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(171, 254, 229, 0.25);
}
.site-footer .footer-main {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
}
.site-footer .footer-brand p {
  color: var(--bc-text-muted);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 320px;
  margin: 22px 0 26px;
}
.site-footer .footer-brand .logo img {
  height: 42px;
}
.site-footer .footer-socials {
  display: flex;
  gap: 12px;
}
.site-footer .footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-text-light);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.site-footer .footer-socials a:hover {
  background: rgba(171, 254, 229, 0.1);
  border-color: rgba(171, 254, 229, 0.4);
  color: var(--bc-green-accent);
  transform: translateY(-2px);
}
.site-footer .footer-socials svg {
  width: 18px;
  height: 18px;
}
.site-footer .footer-col h5 {
  font-family: var(--disp);
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.site-footer .footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.site-footer .footer-col a {
  color: var(--bc-text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}
.site-footer .footer-col a:hover {
  color: var(--bc-text-light);
}
.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 1280px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 20px;
}
.site-footer .footer-bottom p {
  color: var(--bc-text-muted);
  font-size: 13.5px;
}
.site-footer .footer-legal {
  display: flex;
  gap: 28px;
}
.site-footer .footer-legal a {
  color: var(--bc-text-muted);
  text-decoration: none;
  font-size: 13.5px;
}
.site-footer .footer-legal a:hover {
  color: var(--bc-text-light);
}
@media (max-width: 960px) {
  .site-footer .footer-main {
    grid-template-columns: 1fr 1fr;
    row-gap: 44px;
  }
  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .site-footer .footer-main {
    grid-template-columns: 1fr;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* push page content below the fixed site-nav, since the old <header>
   is gone from this page */
#top.hero {
  margin-top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}