/* =========================================================
   LIVE JSON BACKGROUND (image injected via CSS variables)
   ========================================================= */

body.lane-live{
  --lv-bg-img: none;
  --lv-bg-position: center center;
  --lv-bg-overlay: 0.55;
}

/* Make ambient layers sit behind everything */
body.lane-live .live-ambient{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Bottom layer: the injected background image */
body.lane-live .live-ambient::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: var(--lv-bg-img);
  background-position: var(--lv-bg-position);
  background-size: cover;
  background-repeat: no-repeat;

  transform: scale(1.02); /* kills edge gaps on some browsers */
}

/* Overlay darkness from JSON */
body.lane-live .live-ambient::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(5,5,9, var(--lv-bg-overlay));
}

/* Keep your existing layers above the image + overlay */
body.lane-live .live-ambient > *{
  position: absolute;
  inset: 0;
  z-index: 2;
}



/* =========================================================
   LIVE — GLOBAL WRAP
   ========================================================= */

.lv-wrap{
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
}

/* =========================================================
   LIVE HERO (stable, step-based, editable tweaks)
   Base values come from breakpoints
   You only edit the *-tweak vars
   ========================================================= */

/* Hero background off */
body.lane-live .lv-hero{
  background: transparent;
}

body.lane-live .lv-hero::before,
body.lane-live .lv-hero::after{
  content: none;
}

/* Hero baseline layout */
body.lane-live .lv-hero{
  min-height: clamp(520px, 78vh, calc(100vh - 84px));
  display: grid;
  align-items: center;
  padding: 120px 0 14px;
}

/* Typography */
body.lane-live .lv-hero h1{
  font-size: clamp(44px, 6vw, 74px);
  line-height: 1.02;
  margin: 0 0 12px;
}

body.lane-live .lv-hero .lv-sub{
  max-width: 74ch;
  opacity: 0.88;
  line-height: 1.7;
  margin: 0;
}

/* =========================================================
   TUNING VARS
   Base = breakpoint driven (do not touch)
   Tweak = you edit live
   ========================================================= */

body.lane-live{
  /* base (do not touch) */
  --lv-hero-x-base: 0px;
  --lv-hero-y-base: 0px;
  --lv-cta-x-base: 0px;
  --lv-cta-y-base: 0px;
  --lv-chips-x-base: 0px;
  --lv-chips-y-base: 0px;

  /* tweak (ONLY touch these) */
  --lv-hero-x-tweak:50px;
  --lv-hero-y-tweak: 0px;
  --lv-cta-x-tweak: 240px;
  --lv-cta-y-tweak: -10px;
  --lv-chips-x-tweak: 0px;
  --lv-chips-y-tweak: 0px;
}

/* Desktop steps */
@media (min-width: 900px){
  body.lane-live{
    --lv-hero-x-base: 84px;
    --lv-hero-y-base: 64px;

    --lv-cta-x-base: 160px;
    --lv-cta-y-base: -6px;

    --lv-chips-x-base: 0px;
    --lv-chips-y-base: -6px;
  }
}

@media (min-width: 1200px){
  body.lane-live{
    --lv-hero-x-base: 120px;
    --lv-hero-y-base: 88px;

    --lv-cta-x-base: 220px;
    --lv-cta-y-base: -6px;

    --lv-chips-x-base: 0px;
    --lv-chips-y-base: -6px;
  }
}

/* =========================================================
   APPLY TRANSFORMS (single source of truth, hero-scoped)
   ========================================================= */

/* Whole hero content shift */
@media (min-width: 900px){
  body.lane-live .lv-hero .lv-wrap{
    transform: translate(
      calc(var(--lv-hero-x-base) + var(--lv-hero-x-tweak)),
      calc(var(--lv-hero-y-base) + var(--lv-hero-y-tweak))
    );
    will-change: transform;
  }
}

/* Actions */
body.lane-live .lv-hero .lv-actions{
  margin-top: 18px;
}

body.lane-live .lv-hero .lv-actions-primary{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Move ONLY the CTA pills */
@media (min-width: 900px){
  body.lane-live .lv-hero .lv-actions-primary{
    transform: translate(
      calc(var(--lv-cta-x-base) + var(--lv-cta-x-tweak)),
      calc(var(--lv-cta-y-base) + var(--lv-cta-y-tweak))
    );
    will-change: transform;
  }
}

/* Chips */
body.lane-live .lv-hero .lv-chips{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Move ONLY the chips */
@media (min-width: 900px){
  body.lane-live .lv-hero .lv-chips{
    transform: translate(
      calc(var(--lv-chips-x-base) + var(--lv-chips-x-tweak)),
      calc(var(--lv-chips-y-base) + var(--lv-chips-y-tweak))
    );
    will-change: transform;
  }
}

/* Buttons and chips styling */
body.lane-live .lv-hero .lv-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);

  text-decoration: none;
  color: inherit;
  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.lane-live .lv-hero .lv-btn{
  position: relative;

  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    background-color .5s cubic-bezier(.16,1,.3,1),
    border-color .5s cubic-bezier(.16,1,.3,1),
    box-shadow .6s cubic-bezier(.16,1,.3,1);
}

body.lane-live .lv-hero .lv-btn:hover{
  border-color: rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.11);
}

body.lane-live .lv-hero .lv-chip{
  padding: 10px 12px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);

  font-size: 13px;
  opacity: 0.92;
}

/* =========================================================
   LIVE — "WHAT WE HANDLE" tighten spacing
   ========================================================= */


.lv-handle{
  padding: 28px 0; /* was 46px 0 */
}

@media (max-width: 899px){
  .lv-handle{
    padding-top: 20px;
  }
}



/* =========================================================
   LIVE — SECTION BASE (GENERIC)
   ========================================================= */

.section{
  padding: 64px 0;
}

.wrap{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}

.section__head{
  margin-bottom: 24px;
}

.section__head h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
}

.section__head p{
  margin: 0;
  max-width: 70ch;
  opacity: 0.75;
  line-height: 1.5;
}

/* =========================================================
   LIVE — "WHAT WE HANDLE"
   ========================================================= */

   /* LIVE: What we handle must beat .section padding */
body.lane-live section.lv-handle.section{
  padding: 28px 0;
}

/* iPads: tighten hero height so the next section starts sooner */
@media (min-width: 768px) and (max-width: 1024px){
  body.lane-live .lv-hero{
    min-height: clamp(520px, 66vh, calc(100vh - 84px));
    padding-bottom: 6px; /* was 14px */
  }
}
.lv-section-head{
  margin-bottom: 20px;
}

.lv-section-head h2{
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.lv-section-sub{
  max-width: 70ch;
  opacity: 0.74;
  line-height: 1.7;
  margin: 0;
}

.lv-handle-grid{
  margin-top: 22px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lv-handle-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lv-handle-card h3{
  margin: 0 0 10px;
  font-weight: 800;
}

.lv-handle-card ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
  opacity: 0.78;
}

@media (max-width: 980px){
  .lv-handle-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .lv-handle-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LIVE — "SPACES"
   ========================================================= */

.lv-spaces{
  padding: 46px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* cap the whole grid so it doesnt stretch forever */
.lv-spaces-grid{
  margin-top: 22px;
  width: min(1040px, 100%);
  margin-left: auto;
  margin-right: auto;

  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* keep cards readable, not foggy */
.lv-space{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lv-space h3{
  margin: 0 0 8px;
  font-weight: 800;
}

.lv-space p{
  margin: 0;
  opacity: 0.76;
  line-height: 1.7;
}

/* panel should match grid width too */
.lv-space-panel{
  margin-top: 18px;
  width: min(820px, 100%); /* was 1040px */
  margin-left: auto;
  margin-right: auto;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lv-space-panel-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lv-space-panel-sub{
  margin: 0;
  opacity: 0.74;
  line-height: 1.7;
  max-width: 78ch;
}

@media (max-width: 980px){
  .lv-spaces-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .lv-spaces-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LIVE — "HOW IT RUNS"
   ========================================================= */

.lv-run{
  padding: 46px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* center the section header too */
.lv-run .lv-section-head{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.lv-run-steps{
  margin-top: 22px;
  display: grid;
  gap: 12px;

  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.lv-step{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;

  width: 100%;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lv-step-k{
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.75;
}

.lv-step-body{
  min-width: 0;
}

.lv-step-body h3{
  margin: 0 0 6px;
  font-weight: 820;
}

.lv-step-body p{
  margin: 0;
  opacity: 0.76;
  line-height: 1.7;
  max-width: 72ch;
}

/* center the note */
.lv-run-note{
  margin-top: 14px;
  opacity: 0.66;
  line-height: 1.7;
  font-size: 13px;

  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   LIVE — "IN THE ROOM" (TV / VIDEO WINDOW)
   ========================================================= */

/* In the room — text alignment polish */
#inroom .section__head,
#inroom .note{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;

  padding-left: 40px; /* subtle right shift */
}

.video{
  position: relative;

  width: 100%;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;

  aspect-ratio: 16 / 9;
  max-height: 420px;

  overflow: hidden;
  border-radius: 12px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 42px rgba(0,0,0,0.45);
}

/* Desktop: show the whole video, keep it honest */
.video__el{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Mobile: fill the frame so it doesn't look tiny or awkward */
@media (max-width: 720px){
  .video__el{
    object-fit: cover;
    object-position: center 30%;
  }
}

/* =========================================================
   LIVE — FOOTPRINT GRID + CARD STYLE (GENERIC)
   ========================================================= */

.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.grid .card{
  grid-column: span 6;
}

@media (max-width: 900px){
  .grid .card{ grid-column: 1 / -1; }
}

.card{
  border-radius: 14px;
  padding: 18px 18px 16px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card h3{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}



.card ul{
  margin: 0;
  padding-left: 18px;
  opacity: 0.85;
}

.card li{
  margin: 8px 0;
  line-height: 1.45;
}



/* =========================================================
   LIVE — TUNING VARS (keep all tweak knobs in ONE place)
   ========================================================= */

body.lane-live{
  --lv-plug-x: 0px;              /* Plug section nudge (desktop only) */
  --lv-approach-title-x: 0px;    /* Approach title nudge (all sizes) */
}

@media (min-width: 900px){
  body.lane-live{
    --lv-plug-x: 168px;          /* tweak */
    --lv-approach-title-x: 0px;  /* tweak */
  }
}

/* =========================================================
   LIVE — PLUG IN (LEFT RAIL + ROUTING STACK)
   ========================================================= */

.lv-plug{
  padding: 72px 0;
}

/* Tuning knob */
body.lane-live{
  --lv-plug-rail-y: 270px; /* tweak this */
}

/* Move ONLY the left rail content, not the stack */
@media (min-width: 900px){
  body.lane-live .lv-plug-rail .lv-section-head,
  body.lane-live .lv-plug-rail .lv-plug-note{
    transform: translateY(var(--lv-plug-rail-y));
    will-change: transform;
  }
}

/* Two column layout */
.lv-plug-layout{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
  align-items: start;
}

/* Nudge the whole Plug In section to the right (desktop only) */
@media (min-width: 900px){
  body.lane-live .lv-plug-layout{
    transform: translateX(var(--lv-plug-x));
    will-change: transform;
  }
}

/* Left rail stays calm, can be sticky on wide screens */
.lv-plug-rail{
  position: sticky;
  top: 92px; /* below nav */
}

.lv-plug-rail .lv-section-head{
  margin-bottom: 14px;
}

.lv-plug-note{
  margin-top: 14px;
  opacity: 0.74;
  max-width: 40ch;
  line-height: 1.6;
}

/* Right stack feels like signal flow */
.lv-plug-stack{
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 18px;
  max-width: 420px; /* tighten the routing stack */
}

/* Vertical connector */
.lv-plug-stack::before{
  content:"";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(255,255,255,0.12);
}

/* Cards become steps */
.lv-plug-card{
  position: relative;
  border-radius: 16px;
  padding: 16px 14px 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Node marker */
.lv-plug-card::before{
  content:"";
  position: absolute;
  left: -18px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.10);
}

.lv-plug-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.lv-plug-card ul{
  margin: 0;
  padding-left: 18px;
  opacity: 0.86;
}

.lv-plug-card li{
  margin: 8px 0;
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 1180px){
  .lv-plug-layout{
    grid-template-columns: 1fr;
    transform: none;
  }

  .lv-plug-rail{
    position: relative;
    top: auto;
  }

  body.lane-live .lv-plug-rail .lv-section-head,
  body.lane-live .lv-plug-rail .lv-plug-note{
    transform: none;
  }

  .lv-plug-stack{
    max-width: 720px;
    padding-left: 0;
  }

  .lv-plug-stack::before{
    left: 6px;
  }

  .lv-plug-card::before{
    left: -18px;
  }
}

/* =========================================================
   LIVE — SCOPE (SPLIT RAIL, NOT CARDS)
   ========================================================= */

.lv-scope{
  padding: 72px 0;
}

.lv-scope-split{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lv-scope-col{
  padding: 18px 18px 16px;
  position: relative;
  min-width: 0;
}

.lv-scope-col + .lv-scope-col{
  border-left: 1px solid rgba(255,255,255,0.10);
}

.lv-scope-kicker{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

.lv-scope-col h3{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.lv-scope-col ul{
  margin: 0;
  padding-left: 18px;
  opacity: 0.86;
}

.lv-scope-col li{
  margin: 8px 0;
  line-height: 1.45;
  max-width: 56ch;
}

.lv-scope-col.is-fit::before,
.lv-scope-col.is-no::before{
  content:"";
  position:absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  opacity: 0.9;
}

.lv-scope-col.is-fit::before{ background: rgba(25,245,255,0.75); }
.lv-scope-col.is-no::before{ background: rgba(255,0,0,0.70); }

.lv-scope-note{
  margin-top: 14px;
  opacity: 0.75;
  max-width: 85ch;
  line-height: 1.5;
}

@media (max-width: 900px){
  .lv-scope-split{
    grid-template-columns: 1fr;
  }
  .lv-scope-col + .lv-scope-col{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
}

/* =========================================================
   LIVE — APPROACH (CENTERED, NEUTRAL)
   ========================================================= */

.lv-approach{
  padding: 76px 0;
  position: relative;
  background: transparent;
}

.lv-approach::before{
  content: none;
}

/* keep the whole header centered */
body.lane-live #approach .lv-section-head{
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* but keep the title pinned above the left edge of the subtext */
body.lane-live #approach .lv-section-head h2{
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
  transform: translateX(var(--lv-approach-title-x));
  will-change: transform;
}

.lv-approach-body{
  position: relative;
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;

  border-radius: 18px;
  padding: 18px;

  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 55px rgba(0,0,0,0.42);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lv-approach-body p{
  margin: 0 0 12px;
  line-height: 1.65;
  opacity: 0.86;
}

.lv-approach-body p:last-of-type{
  margin-bottom: 0;
}

.lv-approach-sign{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
}

.lv-approach-sign::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  box-shadow: none;
}

@media (max-width: 720px){
  .lv-approach{
    padding: 60px 0;
  }
  .lv-approach-body{
    padding: 16px;
  }
}

/* =========================================================
   LIVE — CTA (FINAL CARD)
   ========================================================= */

.lv-cta{
  padding: 88px 0;
  position: relative;
  background: transparent;
  isolation: isolate;
}

.lv-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;

  pointer-events:none;
}

.lv-cta-inner{
  position: relative;
  z-index: 1;

  max-width: 86ch;
  margin-left: auto;
  margin-right: auto;

  padding: 26px 34px 28px;
  border-radius: 18px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  text-align: center;
}

.lv-cta-inner::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
}

.lv-cta h2{
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
}

.lv-cta-text{
  margin: 0 0 10px;
  line-height: 1.6;
  opacity: 0.9;
}

.lv-cta-sub{
  margin: 0 0 18px;
  opacity: 0.7;
}

.lv-cta-actions{
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.lv-cta-link{
  display: inline-flex;
  align-items: center;

  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.35);

  opacity: 0.85;
  transition: opacity .2s ease, border-color .2s ease;
}

.lv-cta-link:hover{
  opacity: 1;
  border-color: rgba(255,255,255,0.75);
}

.lv-cta-pills{
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lv-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  text-decoration: none;
  color: inherit;

  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);

  opacity: 0.85;
  transition: opacity .2s ease, border-color .2s ease, background .2s ease;
}

.lv-pill:hover{
  opacity: 1;
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10);
}

@media (max-width: 720px){
  .lv-cta{
    padding: 64px 0;
  }
  .lv-cta-inner{
    padding: 18px 18px 20px;
  }
}

/* =========================
   LIVE HERO BOOT (NO LAYOUT SHIFT)
   Animates ONLY .lv-boot wrappers so we never overwrite transforms used for layout.
   ========================= */

body.lane-live .lv-hero .lv-boot {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 320ms cubic-bezier(.2,.8,.2,1), transform 320ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.is-ready .lv-hero .lv-boot {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.lane-live .lv-hero .lv-boot-1 { transition-delay: 0ms; }
body.lane-live .lv-hero .lv-boot-2 { transition-delay: 90ms; }
body.lane-live .lv-hero .lv-boot-3 { transition-delay: 170ms; }
body.lane-live .lv-hero .lv-boot-4 { transition-delay: 240ms; }

/* Chip stagger stays on chips */
body.lane-live .lv-hero .lv-chip {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 260ms cubic-bezier(.2,.8,.2,1), transform 260ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.is-ready .lv-hero .lv-chip {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.lane-live.is-ready .lv-hero .lv-chip:nth-child(1){ transition-delay: 260ms; }
body.lane-live.is-ready .lv-hero .lv-chip:nth-child(2){ transition-delay: 300ms; }
body.lane-live.is-ready .lv-hero .lv-chip:nth-child(3){ transition-delay: 340ms; }
body.lane-live.is-ready .lv-hero .lv-chip:nth-child(4){ transition-delay: 380ms; }
body.lane-live.is-ready .lv-hero .lv-chip:nth-child(5){ transition-delay: 420ms; }
body.lane-live.is-ready .lv-hero .lv-chip:nth-child(6){ transition-delay: 460ms; }
body.lane-live.is-ready .lv-hero .lv-chip:nth-child(7){ transition-delay: 500ms; }
body.lane-live.is-ready .lv-hero .lv-chip:nth-child(8){ transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  body.lane-live .lv-hero .lv-boot,
  body.lane-live .lv-hero .lv-chip {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
  
/* =========================
   LIVE HANDLE REVEAL
   Works with your exact markup
   No layout shift
   ========================= */

body.lane-live .lv-handle .lv-section-head,
body.lane-live .lv-handle .lv-handle-card {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1), transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* section head comes in first */
body.lane-live .lv-handle.is-in .lv-section-head,
body.lane-live .lv-handle.is-inview .lv-section-head{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* cards stagger after head */
body.lane-live .lv-handle .lv-handle-card {
  transition-delay: calc(120ms + (var(--i, 0) * 90ms));
}

body.lane-live .lv-handle.is-in .lv-handle-card,
body.lane-live .lv-handle.is-inview .lv-handle-card{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  body.lane-live .lv-handle .lv-section-head,
  body.lane-live .lv-handle .lv-handle-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================
   LIVE — SPACES REVEAL (FAIL-OPEN)
   Only hides when JS has armed reveals.
   ========================================= */

/* default: visible */
.lv-spaces {
  opacity: 1;
  transform: none;
}

/* JS armed: now we can animate safely */
body.lane-live.reveals-armed .lv-spaces {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1),
              transform 420ms cubic-bezier(.2,.8,.2,1);
}

body.lane-live.reveals-armed .lv-spaces.is-in,
body.lane-live.reveals-armed .lv-spaces.is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* CARDS */
.lv-spaces .lv-space-card {
  opacity: 1;
  transform: none;
}

body.lane-live.reveals-armed .lv-spaces .lv-space-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1),
              transform 360ms cubic-bezier(.2,.8,.2,1);
}

body.lane-live.reveals-armed .lv-spaces.is-in .lv-space-card,
body.lane-live.reveals-armed .lv-spaces.is-inview .lv-space-card{
  opacity: 1;
  transform: translateY(0);
}

body.lane-live.reveals-armed .lv-spaces.is-in .lv-space-card:nth-child(1),
body.lane-live.reveals-armed .lv-spaces.is-inview .lv-space-card:nth-child(1){ transition-delay: 120ms; }
body.lane-live.reveals-armed .lv-spaces.is-in .lv-space-card:nth-child(2),
body.lane-live.reveals-armed .lv-spaces.is-inview .lv-space-card:nth-child(2){ transition-delay: 180ms; }
body.lane-live.reveals-armed .lv-spaces.is-in .lv-space-card:nth-child(3),
body.lane-live.reveals-armed .lv-spaces.is-inview .lv-space-card:nth-child(3){ transition-delay: 240ms; }
body.lane-live.reveals-armed .lv-spaces.is-in .lv-space-card:nth-child(4),
body.lane-live.reveals-armed .lv-spaces.is-inview .lv-space-card:nth-child(4){ transition-delay: 300ms; }

/* FINAL STATEMENT */
.lv-spaces .lv-space-footer {
  opacity: 1;
}

body.lane-live.reveals-armed .lv-spaces .lv-space-footer {
  opacity: 0;
  transition: opacity 360ms ease;
}

body.lane-live.reveals-armed .lv-spaces.is-in .lv-space-footer,
body.lane-live.reveals-armed .lv-spaces.is-inview .lv-space-footer{
  opacity: 1;
  transition-delay: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  body.lane-live.reveals-armed .lv-spaces,
  body.lane-live.reveals-armed .lv-spaces .lv-space-card,
  body.lane-live.reveals-armed .lv-spaces .lv-space-footer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================
   LIVE: RUN REVEAL (MATCHES YOUR HTML)
   Section: #run.lv-run.lv-section-reveal
   Steps:   .lv-step inside .lv-run-steps
   Note:    .lv-run-note
   Requires: body.lane-live.reveals-armed and section gets .is-in
   ========================= */

/* Fail open by default */
body.lane-live #run.lv-run { opacity: 1; transform: none; }
body.lane-live #run .lv-section-head,
body.lane-live #run .lv-step,
body.lane-live #run .lv-run-note { opacity: 1; transform: none; }

/* Header */
body.lane-live.reveals-armed #run .lv-section-head{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1),
              transform 360ms cubic-bezier(.2,.8,.2,1);
}

body.lane-live.reveals-armed #run.is-in .lv-section-head,
body.lane-live.reveals-armed #run.is-inview .lv-section-head{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0ms;
}

/* Steps */
body.lane-live.reveals-armed #run .lv-step{
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1),
              transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed #run.is-in .lv-step,
body.lane-live.reveals-armed #run.is-inview .lv-step{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger */
body.lane-live.reveals-armed #run.is-in .lv-step:nth-child(1),
body.lane-live.reveals-armed #run.is-inview .lv-step:nth-child(1){ transition-delay: 220ms; }
body.lane-live.reveals-armed #run.is-in .lv-step:nth-child(2),
body.lane-live.reveals-armed #run.is-inview .lv-step:nth-child(2){ transition-delay: 380ms; }
body.lane-live.reveals-armed #run.is-in .lv-step:nth-child(3),
body.lane-live.reveals-armed #run.is-inview .lv-step:nth-child(3){ transition-delay: 540ms; }
body.lane-live.reveals-armed #run.is-in .lv-step:nth-child(4),
body.lane-live.reveals-armed #run.is-inview .lv-step:nth-child(4){ transition-delay: 700ms; }
body.lane-live.reveals-armed #run.is-in .lv-step:nth-child(5),
body.lane-live.reveals-armed #run.is-inview .lv-step:nth-child(5){ transition-delay: 860ms; }
body.lane-live.reveals-armed #run.is-in .lv-step:nth-child(6),
body.lane-live.reveals-armed #run.is-inview .lv-step:nth-child(6){ transition-delay: 1020ms; }

/* Note */
body.lane-live.reveals-armed #run .lv-run-note{
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1),
              transform 360ms cubic-bezier(.2,.8,.2,1);
}

body.lane-live.reveals-armed #run.is-in .lv-run-note,
body.lane-live.reveals-armed #run.is-inview .lv-run-note{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 620ms;
}

@media (prefers-reduced-motion: reduce){
  body.lane-live.reveals-armed #run .lv-section-head,
  body.lane-live.reveals-armed #run .lv-step,
  body.lane-live.reveals-armed #run .lv-run-note{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================
   LIVE: INROOM REVEAL (MATCHES YOUR HTML)
   Section: #inroom.section.lv-section-reveal
   Head:    .section__head
   Video:   .video
   Note:    .note
   Requires: body.lane-live.reveals-armed + #inroom.is-in
   ========================= */

/* Fail open by default */
body.lane-live #inroom{ opacity: 1; transform: none; }
body.lane-live #inroom .section__head,
body.lane-live #inroom .video,
body.lane-live #inroom .note{ opacity: 1; transform: none; }

/* Only animate once IO is armed */
body.lane-live.reveals-armed #inroom{
  opacity: 0;
  transform: translate3d(0, 12px, 0);
 transition: opacity 620ms cubic-bezier(.2,.8,.2,1),
            transform 620ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed #inroom.is-in,
body.lane-live.reveals-armed #inroom.is-inview{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Head */
body.lane-live.reveals-armed #inroom .section__head{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1),
              transform 360ms cubic-bezier(.2,.8,.2,1);
}

body.lane-live.reveals-armed #inroom.is-in .section__head,
body.lane-live.reveals-armed #inroom.is-inview .section__head{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0ms;
}

/* Video panel */
body.lane-live.reveals-armed #inroom .video{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1),
              transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed #inroom.is-in .video,
body.lane-live.reveals-armed #inroom.is-inview .video{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 140ms;
}

/* Note */
body.lane-live.reveals-armed #inroom .note{
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 320ms ease,
              transform 320ms ease;
}

body.lane-live.reveals-armed #inroom.is-in .note,
body.lane-live.reveals-armed #inroom.is-inview .note{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 280ms;
}

@media (prefers-reduced-motion: reduce){
  body.lane-live.reveals-armed #inroom,
  body.lane-live.reveals-armed #inroom .section__head,
  body.lane-live.reveals-armed #inroom .video,
  body.lane-live.reveals-armed #inroom .note{
    opacity: 1;
    transform: none;
    transition: none;
  }
}




/* =========================
   LIVE: FOOTPRINT REVEAL (SINGLE SOURCE)
   Section: #footprint.section.lv-section-reveal
   Head:    .section__head
   Cards:   .grid .card
   Bullets: .card li
   Requires: body.lane-live.reveals-armed + #footprint.is-in (or .is-inview)
   ========================= */

/* fail open */
body.lane-live #footprint .section__head,
body.lane-live #footprint .grid .card,
body.lane-live #footprint .grid .card li{
  opacity: 1;
  transform: none;
}

/* header */
body.lane-live.reveals-armed #footprint .section__head{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1),
              transform 360ms cubic-bezier(.2,.8,.2,1);
}

body.lane-live.reveals-armed #footprint.is-in .section__head,
body.lane-live.reveals-armed #footprint.is-inview .section__head{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* cards */
body.lane-live.reveals-armed #footprint .grid .card{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1),
              transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed #footprint.is-in .grid .card,
body.lane-live.reveals-armed #footprint.is-inview .grid .card{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* stagger cards (works on desktop and mobile) */
body.lane-live.reveals-armed #footprint.is-in .grid .card:nth-child(1),
body.lane-live.reveals-armed #footprint.is-inview .grid .card:nth-child(1){ transition-delay: 140ms; }

body.lane-live.reveals-armed #footprint.is-in .grid .card:nth-child(2),
body.lane-live.reveals-armed #footprint.is-inview .grid .card:nth-child(2){ transition-delay: 220ms; }

body.lane-live.reveals-armed #footprint.is-in .grid .card:nth-child(3),
body.lane-live.reveals-armed #footprint.is-inview .grid .card:nth-child(3){ transition-delay: 300ms; }

body.lane-live.reveals-armed #footprint.is-in .grid .card:nth-child(4),
body.lane-live.reveals-armed #footprint.is-inview .grid .card:nth-child(4){ transition-delay: 380ms; }

/* bullets */
body.lane-live.reveals-armed #footprint .grid .card li{
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 280ms ease, transform 280ms ease;
}

body.lane-live.reveals-armed #footprint.is-in .grid .card li,
body.lane-live.reveals-armed #footprint.is-inview .grid .card li{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  body.lane-live.reveals-armed #footprint .section__head,
  body.lane-live.reveals-armed #footprint .grid .card,
  body.lane-live.reveals-armed #footprint .grid .card li{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================
   LIVE: PLUG IN REVEAL
   Section: #plugin
   Anim: left rail -> right stack cards top to bottom
   Requires: body.lane-live.reveals-armed and #plugin gets .is-in
   ========================= */

/* fail open */
body.lane-live #plugin,
body.lane-live #plugin .lv-plug-rail,
body.lane-live #plugin .lv-plug-card{
  opacity: 1;
  transform: none;
}

/* left rail first */
body.lane-live.reveals-armed #plugin .lv-plug-rail{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1),
              transform 360ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed #plugin.is-in .lv-plug-rail,
body.lane-live.reveals-armed #plugin.is-inview .lv-plug-rail{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: 0ms;
}

/* right stack cards */
body.lane-live.reveals-armed #plugin .lv-plug-card{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 520ms cubic-bezier(.16, 1, .3, 1),
    transform 520ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: 50% 60%;
}

body.lane-live.reveals-armed #plugin.is-in .lv-plug-card,
body.lane-live.reveals-armed #plugin.is-inview .lv-plug-card{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: calc(360ms + (var(--i, 0) * 85ms));
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  body.lane-live.reveals-armed #plugin,
  body.lane-live.reveals-armed #plugin .lv-plug-rail,
  body.lane-live.reveals-armed #plugin .lv-plug-card{
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =========================================================
  LIVE — SCOPE ANIMATION
  header: bottom-up (normal)
  cards: left to right
  
========================================================= */

/* Scope header pieces (target only inside lv-scope) */
.lv-scope.lv-section-reveal .lv-section-head{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.lv-scope.lv-section-reveal.is-inview .lv-section-head{
  opacity: 1;
  transform: translateY(0);
}

/* Optional stagger within the header if you want it */
.lv-scope.lv-section-reveal .lv-section-head > *{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

.lv-scope.lv-section-reveal.is-inview .lv-section-head > *{
  opacity: 1;
  transform: translateY(0);
}

.lv-scope.lv-section-reveal.is-inview .lv-section-head > *:nth-child(1){ transition-delay: .06s; }
.lv-scope.lv-section-reveal.is-inview .lv-section-head > *:nth-child(2){ transition-delay: .14s; }

/* Cards container */
.lv-scope.lv-section-reveal .lv-scope-split{
  opacity: 1; /* keep container stable */
}

/* Columns (cards) left to right */
.lv-scope.lv-section-reveal .lv-scope-col{
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.lv-scope.lv-section-reveal .lv-scope-col.is-fit{
  transform: translateX(-18px);
}

.lv-scope.lv-section-reveal .lv-scope-col.is-no{
  transform: translateX(18px);
}

.lv-scope.lv-section-reveal.is-inview .lv-scope-col{
  opacity: 1;
  transform: translateX(0);
}

.lv-scope.lv-section-reveal.is-inview .lv-scope-col.is-fit{
  transition-delay: .18s;
}

.lv-scope.lv-section-reveal.is-inview .lv-scope-col.is-no{
  transition-delay: .34s;
}

/* Note fades in last (bottom up) */
.lv-scope.lv-section-reveal .lv-scope-note{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: .44s;
  will-change: opacity, transform;
}

.lv-scope.lv-section-reveal.is-inview .lv-scope-note{
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion  */
@media (prefers-reduced-motion: reduce){
  .lv-scope.lv-section-reveal .lv-section-head,
  .lv-scope.lv-section-reveal .lv-section-head > *,
  .lv-scope.lv-section-reveal .lv-scope-col,
  .lv-scope.lv-section-reveal .lv-scope-note{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
  LIVE — APPROACH ANIMATION (REWRITE, HARDENED)
  Goal: never get "stuck hidden", never rely on only one class,
  and never depend on perfect markup order.
  Triggers on either .is-in OR .is-inview.
  Fail-open by default, but animates when body.reveals-armed is set.
========================================================= */

/* --------
   FAIL OPEN (default visible)
   -------- */
.lv-approach .lv-section-head,
.lv-approach .lv-approach-body,
.lv-approach .lv-approach-body > p,
.lv-approach .lv-approach-sign{
  opacity: 1;
  transform: none;
}

/* --------
   ARMED (only hide when IO system is armed)
   -------- */
body.lane-live.reveals-armed .lv-approach.lv-section-reveal .lv-section-head{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 520ms cubic-bezier(.2,.8,.2,1),
              transform 520ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed .lv-approach.lv-section-reveal .lv-approach-body{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 620ms cubic-bezier(.2,.8,.2,1),
              transform 620ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed .lv-approach.lv-section-reveal .lv-approach-body > p{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 520ms cubic-bezier(.2,.8,.2,1),
              transform 520ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed .lv-approach.lv-section-reveal .lv-approach-sign{
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 520ms cubic-bezier(.2,.8,.2,1),
              transform 520ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* --------
   REVEALED (accept either class so it can’t miss)
   -------- */
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-section-head,
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-section-head{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0ms;
}

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body,
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 110ms;
}

/* Paragraph stagger (covers up to 8, harmless if fewer) */
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p,
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p:nth-of-type(1),
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p:nth-of-type(1){ transition-delay: 220ms; }

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p:nth-of-type(2),
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p:nth-of-type(2){ transition-delay: 300ms; }

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p:nth-of-type(3),
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p:nth-of-type(3){ transition-delay: 380ms; }

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p:nth-of-type(4),
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p:nth-of-type(4){ transition-delay: 460ms; }

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p:nth-of-type(5),
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p:nth-of-type(5){ transition-delay: 540ms; }

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p:nth-of-type(6),
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p:nth-of-type(6){ transition-delay: 620ms; }

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p:nth-of-type(7),
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p:nth-of-type(7){ transition-delay: 700ms; }

body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-body > p:nth-of-type(8),
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-body > p:nth-of-type(8){ transition-delay: 780ms; }

/* Signature last */
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-in .lv-approach-sign,
body.lane-live.reveals-armed .lv-approach.lv-section-reveal.is-inview .lv-approach-sign{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 520ms;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body.lane-live.reveals-armed .lv-approach.lv-section-reveal .lv-section-head,
  body.lane-live.reveals-armed .lv-approach.lv-section-reveal .lv-approach-body,
  body.lane-live.reveals-armed .lv-approach.lv-section-reveal .lv-approach-body > p,
  body.lane-live.reveals-armed .lv-approach.lv-section-reveal .lv-approach-sign{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================
   LIVE: CTA REVEAL (Working together)
   Fail open. Only hides when reveals are armed.
   Animates the inner card and its children.
   ========================================= */

/* default: visible */
.lv-cta,
.lv-cta .lv-cta-inner,
.lv-cta .lv-cta-inner > *{
  opacity: 1;
  transform: none;
}

/* armed: hide inner card + children */
body.lane-live.reveals-armed .lv-cta{
  opacity: 1; /* keep section itself stable */
  transform: none;
}

body.lane-live.reveals-armed .lv-cta .lv-cta-inner{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 520ms cubic-bezier(.16,1,.3,1),
              transform 520ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

/* reveal: accept either class so it cannot get stuck */
body.lane-live.reveals-armed .lv-cta.is-in .lv-cta-inner,
body.lane-live.reveals-armed .lv-cta.is-inview .lv-cta-inner{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* child stagger for polish */
body.lane-live.reveals-armed .lv-cta .lv-cta-inner > *{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 420ms cubic-bezier(.16,1,.3,1),
              transform 420ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

body.lane-live.reveals-armed .lv-cta.is-in .lv-cta-inner > *,
body.lane-live.reveals-armed .lv-cta.is-inview .lv-cta-inner > *{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.lane-live.reveals-armed .lv-cta.is-inview .lv-cta-inner > *:nth-child(1){ transition-delay: 120ms; }
body.lane-live.reveals-armed .lv-cta.is-inview .lv-cta-inner > *:nth-child(2){ transition-delay: 200ms; }
body.lane-live.reveals-armed .lv-cta.is-inview .lv-cta-inner > *:nth-child(3){ transition-delay: 280ms; }
body.lane-live.reveals-armed .lv-cta.is-inview .lv-cta-inner > *:nth-child(4){ transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce){
  body.lane-live.reveals-armed .lv-cta .lv-cta-inner,
  body.lane-live.reveals-armed .lv-cta .lv-cta-inner > *{
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =========================================================
   LIVE JSON BACKGROUND + WATER RIPPLE LAYER
   (film-free, motion-driven ripple only)
   ========================================================= */

/* Water canvas layer */
body.lane-live .live-ambient .lv-water{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* Lower base visibility so idle state is invisible */
  opacity: 0.30;

  /* Kill color wash, keep clarity */
  filter: contrast(1.03);

  z-index: 3; /* above bg image + overlays */
  pointer-events: none;
}

body.lane-live .live-ambient .lv-water{
  opacity: 0.25;
  filter: contrast(1.02);
  mix-blend-mode: screen;
}