/* =============================================================
   LabelPal — LANDING v2 ("crisp white")  [plugin asset]
   Implements design-concepts/landing-v2/, approved 2026-08-22.
   Sits on brand-tokens.css and uses nothing but its variables.

   Loaded only by [labelpal_landing] (see includes/landing.php), never
   site-wide. Deliberate departures from the static site's landing.css:
     - no Georgia/Bricolage display face; the system stack (--lp-sans)
       carries every heading, at weight 700 with tight tracking
     - page ground is white, not --lp-ground; --lp-ground becomes the
       ALTERNATING band (features, how-it-works) instead
     - one primary CTA, "Start designing", repeated down the page

   RESPONSIVE MODEL
   The two artboards are 390 and 1440. Every fluid value below is the
   straight line between those two measurements, frozen at each end:
       clamp(<390 value>, <intercept> + <slope>vw, <1440 value>)
   so both artboards render exactly as drawn and the space between
   them interpolates. Nothing is left to chance at 768.
   ============================================================= */

/* This layer deliberately claims NO .lp-* class. brand-tokens' component
   rules are all scoped to .lp-page and resolve against the --v-* voice
   slots, which the single-voice storefront does not set; borrowing one
   would silently render with an unset colour. Everything below is drawn
   from the raw --lp-* tokens instead. */
.lv-page {
  /* --- fluid scale, 390 -> 1440 ------------------------------ */
  --lv-gutter:       clamp(20px, 12.571px + 1.9048vw, 40px);

  --lv-t-eyebrow:    clamp(13px, 12.257px + 0.1905vw, 15px);
  --lv-t-h1:         clamp(42px, 31.771px + 2.5714vw, 66px);   /* was max 80px - 2026-09-24 */
  --lv-t-hero-sub:   clamp(17px, 15.514px + 0.3810vw, 21px);
  --lv-t-h2:         clamp(30px, 24.800px + 1.3333vw, 44px);
  --lv-t-h2-sm:      clamp(26px, 22.286px + 0.9524vw, 36px);
  --lv-t-h2-final:   clamp(34px, 27.314px + 1.7143vw, 52px);
  --lv-t-lede:       clamp(16px, 14.886px + 0.2857vw, 19px);
  --lv-t-feat:       clamp(18px, 17.257px + 0.1905vw, 20px);
  --lv-t-card:       clamp(15px, 14.257px + 0.1905vw, 17px);
  --lv-t-body:       clamp(15px, 14.629px + 0.0952vw, 16px);
  --lv-t-stat:       clamp(26px, 23.771px + 0.5714vw, 32px);
  --lv-t-cta:        clamp(16px, 15.629px + 0.0952vw, 17px);
  --lv-t-micro:      clamp(13px, 12.629px + 0.0952vw, 14px);

  --lv-cta-h:        clamp(50px, 49.257px + 0.1905vw, 52px);
  /* REMOVED 2026-09-26: --lv-banner-h. The stage used to be HEIGHT-led,
     min(560px, 100svh - 516px), so that the carousel stayed above the fold
     (2026-09-24) - and on a 1920x1080 laptop with browser chrome (an 826px
     viewport) that gave the designer clip 551x310, too small to follow the
     cursor (Ray, 2026-09-26). The stage is now WIDTH-led at 16:9 (see TOP at
     the end of this file) and stays above the fold by LAYOUT instead: from
     1100px the whole video sits beside the headline in two columns. */
  --lv-runway:       520px;   /* how far the mouse-user scroll-grow runs, in scrolled px */
  --lv-r-banner:     clamp(18px, 15.771px + 0.5714vw, 24px);
  --lv-r-card:       clamp(14px, 12.514px + 0.3810vw, 18px);

  --lv-pad-sec:      clamp(48px, 33.143px + 3.8095vw, 88px);
  --lv-pad-products: clamp(56px, 41.143px + 3.8095vw, 96px);
  --lv-pad-proof:    clamp(44px, 33.600px + 2.6667vw, 72px);
  --lv-pad-final:    clamp(64px, 49.143px + 3.8095vw, 104px);


  margin: 0;
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: var(--lp-t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.lv-page *, .lv-page *::before, .lv-page *::after { box-sizing: border-box; }

.lv-page :focus-visible {
  outline: 2px solid var(--lp-brand-deep);
  outline-offset: 3px;
  border-radius: var(--lp-radius-sm);
}

.lv-wrap { max-width: var(--lp-measure); margin-inline: auto; }

/* Sections that carry the gutter padding AND the measure on one element
   need the padding added on top of 1140 — otherwise the content box
   lands at 1060 and every grid inside is 80px narrower than the
   artboard. Must stay after .lv-wrap: same specificity, source order
   decides. */
.lv-features,
.lv-products,
.lv-how {
  max-width: calc(var(--lp-measure) + 2 * var(--lv-gutter));
  margin-inline: auto;
}

.lv-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- The one CTA --------------------------------------------- */
.lv-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--lv-cta-h);
  padding-inline: clamp(30px, 29.257px + 0.1905vw, 32px);
  background: var(--lp-brand-deep); color: var(--lp-surface);
  border-radius: var(--lp-radius-pill);
  font-size: var(--lv-t-cta); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background var(--lp-dur-fast) var(--lp-ease-out),
              transform var(--lp-dur-fast) var(--lp-ease-out);
}
.lv-cta:hover { background: color-mix(in srgb, var(--lp-brand-deep) 88%, black); color: var(--lp-surface); }
.lv-cta:active { transform: translateY(1px); }

.lv-cta-quiet {
  font-size: var(--lv-t-cta); font-weight: 500;
  color: var(--lp-brand-deep); text-decoration: none;
}
.lv-cta-quiet:hover { text-decoration: underline; }

/* =============================================================
   HERO
   ============================================================= */
.lv-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: clamp(12px, 10.514px + 0.3810vw, 16px);   /* was 18-24px - 2026-09-24 */
  /* CHANGED 2026-09-24 - was 104px/72px at desktop, 176px of pure air above
     the carousel. */
  padding: clamp(36px, 27.086px + 2.2857vw, 60px) var(--lv-gutter)
           clamp(24px, 18.057px + 1.5238vw, 40px);
}
.lv-hero__eyebrow {
  margin: 0;
  font-size: var(--lv-t-eyebrow); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lp-brand-deep);
}
.lv-hero__title {
  margin: 0; max-width: 900px;
  font-size: var(--lv-t-h1); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.06;
}
.lv-hero__sub {
  margin: 0; max-width: clamp(320px, 201.143px + 30.476vw, 640px);
  font-size: var(--lv-t-hero-sub); line-height: 1.55;
  color: var(--lp-ink-2);
}
.lv-hero__actions {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; margin-top: 8px;
}
@media (min-width: 600px) {
  .lv-hero__actions { flex-direction: row; gap: 28px; margin-top: 12px; }
}

/* =============================================================
   HERO SHOWCASE CAROUSEL
   ============================================================= */
.lv-showcase {
  padding: 0 var(--lv-gutter) clamp(56px, 41.143px + 3.8095vw, 96px);
  display: flex; flex-direction: column; align-items: center;
}
.lv-carousel { width: 100%; max-width: 1360px; }
.lv-carousel__stage {
  /* CHANGED 2026-09-26 - WIDTH-led. It was height-led (--lv-banner-h, note at
     the top of the file), which shrank the designer clip to 551x310 on a
     laptop. Still 16:9 on every slide, so nothing is cropped (Ray, 2026-09-24:
     "let's stick to one size for the slides"). The viewport-height budget
     caps the WIDTH rather than the height, so the box can never leave 16:9 -
     a max-height could, and object-fit: cover would then crop the recording. */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: min(100%, calc((100svh - 200px) * 16 / 9));
  margin-inline: auto;
  border-radius: var(--lv-r-banner);
  overflow: hidden;
  background: var(--lp-ground);
  touch-action: pan-y;          /* horizontal swipe is ours, vertical is the page's */
}
/* Full screen (the [data-full] button): the whole stage, so the arrows keep
   working. contain, not cover - a 16:10 screen must letterbox the recording,
   never crop it. The two prefixes are separate rules on purpose: one selector
   list with an unknown pseudo-class is thrown away whole. */
.lv-carousel__stage:fullscreen {
  width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
  border-radius: 0; background: #000;
}
.lv-carousel__stage:fullscreen .lv-slide { object-fit: contain; }
.lv-carousel__stage:-webkit-full-screen {
  width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
  border-radius: 0; background: #000;
}
.lv-carousel__stage:-webkit-full-screen .lv-slide { object-fit: contain; }
/* Both <img> and <video> slides. --lv-fade is set inline from the admin's
   "Fade length" setting, so the timing control drives the real transition
   rather than a second number that has to be kept in step. */
.lv-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--lv-fade, 450ms) ease;
}
video.lv-slide { background: var(--lp-ground); }
.lv-slide[data-active="true"] { opacity: 1; }

.lv-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  border-radius: var(--lp-radius-pill);
  background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
  box-shadow: var(--lp-shadow-lift);
  color: var(--lp-ink);
  transition: background var(--lp-dur-fast) var(--lp-ease-out);
}
.lv-carousel__arrow:hover { background: var(--lp-surface); }
.lv-carousel__arrow--prev { left: clamp(12px, 7.543px + 1.1429vw, 24px); }
.lv-carousel__arrow--next { right: clamp(12px, 7.543px + 1.1429vw, 24px); }

/* Only rendered when auto scroll is on. WCAG 2.2.2: anything that moves by
   itself for more than five seconds needs a way to stop it, and the hover
   and focus pauses do nothing for someone on a touch screen. */
.lv-carousel__pause {
  position: absolute; right: clamp(12px, 7.543px + 1.1429vw, 24px);
  bottom: clamp(12px, 7.543px + 1.1429vw, 24px);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  border-radius: var(--lp-radius-pill);
  background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
  box-shadow: var(--lp-shadow-lift);
  color: var(--lp-ink);
}
.lv-carousel__pause:hover { background: var(--lp-surface); }
.lv-carousel__pause .lv-icon-play { display: none; }
.lv-carousel[data-paused="true"] .lv-carousel__pause .lv-icon-play { display: block; }
.lv-carousel[data-paused="true"] .lv-carousel__pause .lv-icon-pause { display: none; }

/* "Watch full screen" - bottom-left, the pause button's twin (ADDED 2026-09-26). */
.lv-carousel__full {
  position: absolute; left: clamp(12px, 7.543px + 1.1429vw, 24px);
  bottom: clamp(12px, 7.543px + 1.1429vw, 24px);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  border-radius: var(--lp-radius-pill);
  background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
  box-shadow: var(--lp-shadow-lift);
  color: var(--lp-ink);
}
.lv-carousel__full:hover { background: var(--lp-surface); }
.lv-carousel__full[hidden] { display: none; }

.lv-carousel__caption {
  margin: 10px 0 0;
  font-size: var(--lv-t-micro);
  color: var(--lp-ink-3); text-align: center;
}
.lv-carousel__dots { display: flex; align-items: center; justify-content: center; }
/* 44px hit area around an 8px dot — the target is the button, the dot
   is only what you can see of it. */
.lv-dot {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.lv-dot::before {
  content: ""; width: 8px; height: 8px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-rule);
  transition: background var(--lp-dur) var(--lp-ease-out);
}
.lv-dot[aria-current="true"]::before { background: var(--lp-ink); }

/* =============================================================
   FEATURE TRIO  (band)
   ============================================================= */
.lv-band { background: var(--lp-ground); }
.lv-features { padding: var(--lv-pad-sec) var(--lv-gutter); }
.lv-features__grid {
  display: grid; gap: clamp(36px, 34.514px + 0.3810vw, 48px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .lv-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lv-feature { display: flex; flex-direction: column; gap: clamp(10px, 8.514px + 0.3810vw, 14px); }
.lv-feature svg { color: var(--lp-brand-deep); }
.lv-feature h2 { margin: 0; font-size: var(--lv-t-feat); font-weight: 700; letter-spacing: -0.01em; }
.lv-feature p { margin: 0; font-size: var(--lv-t-body); line-height: 1.6; color: var(--lp-ink-2); }

/* =============================================================
   PRODUCTS
   ============================================================= */
.lv-products {
  padding: var(--lv-pad-products) var(--lv-gutter)
           clamp(56px, 44.114px + 3.0476vw, 88px);
  display: flex; flex-direction: column;
  gap: clamp(28px, 22.057px + 1.5238vw, 44px);
}
.lv-products__head { display: flex; flex-direction: column; gap: clamp(8px, 6.514px + 0.3810vw, 12px); }
.lv-products__head h2 { margin: 0; font-size: var(--lv-t-h2); font-weight: 700; letter-spacing: -0.02em; }
.lv-products__head p { margin: 0; font-size: var(--lv-t-lede); line-height: 1.5; color: var(--lp-ink-2); }

.lv-grid {
  display: grid; gap: clamp(16px, 13.029px + 0.7619vw, 24px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The whole card is the link: one focus stop instead of two, and a
   target big enough to hit on a phone. The arrow line stays as drawn. */
.lv-card {
  display: flex; flex-direction: column; gap: clamp(8px, 6.514px + 0.3810vw, 12px);
  text-decoration: none; color: inherit;
}
.lv-card img {
  /* height:auto is load-bearing — the width/height ATTRIBUTES on the img
     are presentational hints, and a used height of 640px would win over
     aspect-ratio and stretch every card into a portrait. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--lv-r-card);
  background: var(--lp-ground);
  display: block;
  transition: transform var(--lp-dur) var(--lp-ease-out),
              box-shadow var(--lp-dur) var(--lp-ease-out);
}
.lv-card:hover img { transform: translateY(-2px); box-shadow: var(--lp-shadow-lift); }
.lv-card__text { display: flex; flex-direction: column; gap: 4px; }
.lv-card h3 { margin: 0; font-size: var(--lv-t-card); font-weight: 600; }
.lv-card p {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--lp-ink-3);
  display: none;                      /* the mobile artboard shows title only */
}
@media (min-width: 640px) { .lv-card p { display: block; } }
.lv-card__go { font-size: var(--lv-t-micro); font-weight: 500; color: var(--lp-brand-deep); }
@media (min-width: 640px) { .lv-card__go { margin-top: 4px; } }
.lv-card:hover .lv-card__go { text-decoration: underline; }

/* Card "from" price — ADDED 2026-09-20. Live from the pricing engine via
   get_price_html(), never hand-typed, so it cannot go stale. Sits between the
   blurb and the go-link, quieter than the title and louder than the blurb. */
.lv-card__price { font-size: var(--lv-t-micro); font-weight: 600; color: var(--lp-brand-deep); margin: 2px 0 0; }

/* =============================================================
   HOW IT WORKS  (band)
   ============================================================= */
.lv-how {
  padding: var(--lv-pad-sec) var(--lv-gutter);
  display: flex; flex-direction: column;
  gap: clamp(32px, 28.286px + 0.9524vw, 44px);
}
.lv-how h2 {
  margin: 0; text-align: center;
  font-size: var(--lv-t-h2-sm); font-weight: 700; letter-spacing: -0.02em;
}
.lv-how__steps { display: flex; flex-direction: column; gap: 28px; }
.lv-step { display: flex; gap: 16px; align-items: flex-start; }
.lv-step__n {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: clamp(40px, 38.514px + 0.3810vw, 44px);
  height: clamp(40px, 38.514px + 0.3810vw, 44px);
  border-radius: var(--lp-radius-pill);
  background: var(--lp-surface-2); color: var(--lp-brand-deep);
  font-size: clamp(16px, 15.257px + 0.1905vw, 18px); font-weight: 700;
}
.lv-step__body { display: flex; flex-direction: column; gap: 4px; }
.lv-step h3 { margin: 0; font-size: clamp(17px, 16.629px + 0.0952vw, 18px); font-weight: 600; }
.lv-step p { margin: 0; font-size: clamp(14px, 13.629px + 0.0952vw, 15px); line-height: 1.6; color: var(--lp-ink-2); }
/* At desktop the three steps go side by side and centre, as drawn. */
@media (min-width: 760px) {
  .lv-how__steps { flex-direction: row; gap: 48px; }
  .lv-step { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .lv-step__body { align-items: center; gap: 12px; }
  .lv-step p { max-width: 280px; }
}

/* =============================================================
   PROOF
   ============================================================= */
.lv-proof {
  padding: var(--lv-pad-proof) var(--lv-gutter);
  border-bottom: 1px solid var(--lp-rule-soft);
}
.lv-proof__row {
  display: flex; flex-direction: column; align-items: center;
  gap: 24px; text-align: center;
}
.lv-stat { display: flex; flex-direction: column; gap: 2px; }
.lv-stat b { font-size: var(--lv-t-stat); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.lv-stat span { font-size: clamp(14px, 13.629px + 0.0952vw, 15px); color: var(--lp-ink-3); }
.lv-proof__rule { display: none; width: 1px; height: 48px; background: var(--lp-rule); }
@media (min-width: 760px) {
  .lv-proof__row { flex-direction: row; justify-content: center; gap: 72px; }
  .lv-stat { gap: 4px; }
  .lv-proof__rule { display: block; }
}

/* =============================================================
   FINAL CTA
   ============================================================= */
.lv-final {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(14px, 11.771px + 0.5714vw, 20px);
  padding: var(--lv-pad-final) var(--lv-gutter);
}
.lv-final h2 { margin: 0; font-size: var(--lv-t-h2-final); font-weight: 700; letter-spacing: -0.02em; }
.lv-final p { margin: 0; font-size: var(--lv-t-lede); line-height: 1.5; color: var(--lp-ink-2); }
.lv-final .lv-cta { margin-top: clamp(6px, 5.257px + 0.1905vw, 8px); }

/* =============================================================
   WORDPRESS INTEGRATION
   The shortcode renders inside twentytwentyfive's post-content. Two of the
   theme's own spacings land ON TOP of the design's rhythm: <main> carries a
   70px top margin and the group wrapping the content carries 70px top AND
   bottom padding — 140px of nothing between the mega menu and the hero, and
   another 70px before the footer. The hero already opens with its own 104px
   at 1440 (56px at 390), straight from the artboard, so both are zeroed.

   Scoped to body.home: this is the front page's arrangement only, and every
   other page on the shop keeps the theme's spacing exactly as it is.
   ============================================================= */
/* !important is not a specificity fight — twentytwentyfive emits these two
   as INLINE styles on the elements (style="margin-top:var(--wp--preset--
   spacing--60)"), and an inline style cannot be beaten any other way short
   of editing the theme's templates, which is out of this feature's remit. */
body.home main.wp-block-group { margin-top: 0 !important; }
body.home main.wp-block-group > .wp-block-group {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =============================================================
   TOP: hero + showcase as ONE block (ADDED 2026-09-26)
   Stacked by default: headline, then a full-width 16:9 stage. From 1100px:
   two columns, text one third and video two thirds, the whole video above
   the fold beside the headline - 1035x582 on a 1920-wide laptop, 3.5x the
   old area. Ray, 2026-09-26, after the to-scale mock-up in
   01-Specification/landing-hero-mockup-2026-09-26.html. Must stay AFTER the
   HERO and CAROUSEL sections: same specificity, source order decides.
   ============================================================= */
@media (min-width: 1100px) {
  .lv-top__pin {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
    column-gap: clamp(32px, 2.5vw, 48px);
    align-items: center;
    max-width: calc(1600px + 2 * var(--lv-gutter));
    margin-inline: auto;
    padding: clamp(24px, 2.5vw, 48px) var(--lv-gutter) clamp(40px, 3.75vw, 72px);
  }
  .lv-top--solo .lv-top__pin { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .lv-top:not(.lv-top--solo) .lv-hero { align-items: flex-start; text-align: left; padding: 0; }
  .lv-top:not(.lv-top--solo) .lv-hero__title { font-size: clamp(44px, 2.3vw + 16px, 60px); max-width: none; }
  .lv-top:not(.lv-top--solo) .lv-hero__sub { max-width: none; }
  .lv-top:not(.lv-top--solo) .lv-hero__actions { align-items: flex-start; justify-content: flex-start; }
  .lv-top:not(.lv-top--solo) .lv-showcase { padding: 0; width: 100%; }
  .lv-top:not(.lv-top--solo) .lv-carousel { max-width: none; }
  /* 180px = the block's own padding plus the caption and dots under the stage. */
  .lv-carousel__stage { max-width: min(100%, calc((100svh - var(--lv-pin-top, 0px) - 180px) * 16 / 9)); }
}

/* THE SCROLL-GROW. Ray, 2026-09-26: "a gentle grow on scroll from 62% to
   100% width, only on mice, off under reduced-motion". Mouse users only - a
   phone has no hover and 70% of visitors are on one - and only where the
   browser drives the animation from the scroll position itself: there is no
   JavaScript scroll handler anywhere, so nothing here can fight the wheel.
   Everyone else gets the two-column layout above and never knows.
   Mechanism: the block is 100svh + --lv-runway tall; its inner box sticks to
   the top of the viewport for that runway while the stage widens from its
   column to the full width and the headline fades; then the page scrolls on.
   Reload halfway down and it is simply already grown - the animation is a
   function of scroll position, with no state to lose. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .lv-top:not(.lv-top--solo) { height: calc(100svh + var(--lv-runway)); }
    .lv-top:not(.lv-top--solo) .lv-top__pin {
      position: sticky; top: var(--lv-pin-top, 0px);
      height: calc(100svh - var(--lv-pin-top, 0px));
    }
    .lv-top:not(.lv-top--solo) .lv-hero {
      grid-column: 1;
      animation: lv-hero-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 var(--lv-runway);
    }
    /* Out of the grid and onto the pinned box, so it can grow past its
       column. Starts at exactly the column's width, ends at the full one. */
    .lv-top:not(.lv-top--solo) .lv-showcase {
      position: absolute; right: var(--lv-gutter); top: 50%;
      transform: translateY(-50%);
      width: calc((100% - 2 * var(--lv-gutter) - clamp(32px, 2.5vw, 48px)) * 2 / 3);
      animation: lv-stage-grow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 var(--lv-runway);
    }
  }
}
@keyframes lv-hero-out {
  0%   { opacity: 1; visibility: visible; }
  45%  { opacity: 0; }
  100% { opacity: 0; visibility: hidden; }   /* gone = not focusable either */
}
@keyframes lv-stage-grow {
  to { width: calc(100% - 2 * var(--lv-gutter)); }
}

/* =============================================================
   REDUCED MOTION
   Per the brief: the crossfade becomes an instant swap. The control
   still ANSWERS — dot, caption and image change together — it just
   does not animate. Same principle as brand-tokens' section (7).
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .lv-slide,
  .lv-dot::before,
  .lv-card img,
  .lv-cta,
  .lv-carousel__arrow,
  .lv-carousel__pause {
    transition-duration: 1ms !important;
    animation: none !important;
  }
  .lv-card:hover img { transform: none; box-shadow: var(--lp-shadow-lift); }
  .lv-cta:active { transform: none; }
}