/* ============================================================================
 * Sendvo landing — motion-first redesign (October 2026).
 * Loaded only by Landing Page.html, after colors_and_type.css (brand tokens).
 * Classes are prefixed `lx-`. Motion grammar:
 *   · Paper physics — things drop, settle with a small overshoot, then rest.
 *   · Scroll-scrubbed scenes are driven by project/landing-motion.js, which
 *     writes transforms and custom properties; CSS here owns resting looks.
 *   · Every loop pauses under html.lx-paused and disappears under
 *     prefers-reduced-motion (see the end of this file).
 * ========================================================================== */

@property --lx-write {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 108%;
}

:root {
  --lx-nav-h: 98px;
  --lx-out: cubic-bezier(.16, 1, .3, 1);
  --lx-inout: cubic-bezier(.65, 0, .35, 1);
  --lx-spring: cubic-bezier(.34, 1.36, .5, 1);
  --lx-drop: cubic-bezier(.3, 1.3, .5, 1);
  --lx-card-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 12px 20px -8px rgba(60, 40, 20, .2), 0 36px 64px -26px rgba(60, 40, 20, .38);
  --lx-soft-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 36px -22px rgba(60, 40, 20, .45);
  --lx-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .33 0 0 0 0 .25 0 0 0 0 .16 0 0 0 .11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.lx { position: relative; }
.lx-wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

/* Landing sections own their own reveal; neutralize the shared rise for the
 * pinned sections (a transform on a sticky ancestor reads as a jump). */
.lx-journey.sv-reveal,
.lx-finale.sv-reveal,
.lx-marquee.sv-reveal {
  opacity: 1;
  transform: none;
  content-visibility: visible;
}
/* Tall pinned sections reveal their intro copy instead of the whole track
 * (10% of a 470vh track is a long way to scroll in the dark). */
.lx-journey-intro,
.lx-journey-sticky {
  opacity: 0;
  transform: translate3d(0, var(--sv-rise), 0);
  transition: opacity var(--sv-dur-reveal) var(--sv-ease), transform var(--sv-dur-reveal) var(--sv-ease);
}
.lx-journey.is-in .lx-journey-intro { opacity: 1; transform: none; }
.lx-journey.is-in .lx-journey-sticky { opacity: 1; transform: none; transition-delay: 120ms; }

/* ─── Type & shared atoms ──────────────────────────────────────────────── */

.lx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--sv-volt);
  font: 700 13px/1 var(--sv-font-display);
  letter-spacing: .22em;
}
.lx-eyebrow span { font: 800 16px/1 var(--sv-font-display); letter-spacing: 0; }
.lx-h2 {
  margin: 0 0 6px;
  font: 800 clamp(40px, 5vw, 68px)/.95 var(--sv-font-display);
  letter-spacing: -.035em;
  color: var(--sv-pitch);
  text-wrap: balance;
}
.lx-script {
  position: relative;
  display: inline-block;
  font: 700 clamp(30px, 3.4vw, 44px)/1.1 var(--sv-font-script);
  color: var(--sv-volt);
  margin-bottom: 22px;
}
.lx-script--marked svg {
  position: absolute;
  left: 2%;
  bottom: -10px;
  width: 92%;
  height: 16px;
  overflow: visible;
}
.lx-script-inline { font: 700 1.04em/1 var(--sv-font-script); color: var(--sv-volt); letter-spacing: 0; white-space: nowrap; }
.lx-lede { margin: 0 0 28px; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--sv-stone); }

.lx-btn {
  --mx: 0px;
  --my: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 12px;
  font: 700 16px/1 var(--sv-font-body);
  text-decoration: none;
  white-space: nowrap;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .45s var(--lx-out), background-color .2s var(--sv-ease), box-shadow .3s var(--sv-ease), color .2s;
}
.lx-btn-label { position: relative; z-index: 1; }
.lx-btn-chev { position: relative; z-index: 1; font: 800 15px/1 var(--sv-font-display); transition: transform .35s var(--lx-out); }
.lx-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .22) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .8s var(--lx-out);
  pointer-events: none;
}
.lx-btn--dark {
  background: var(--sv-pitch);
  color: var(--sv-paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 12px 26px -14px rgba(27, 26, 23, .7);
}
.lx-btn--volt {
  background: var(--sv-volt);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 14px 30px -14px rgba(236, 80, 34, .75);
}
.lx-btn--ghost {
  background: rgba(252, 249, 243, .6);
  color: var(--sv-pitch);
  box-shadow: inset 0 0 0 1.5px #D6CBB6;
}
.lx-btn--ghost::after { display: none; }
.lx-btn-down { position: relative; z-index: 1; width: 16px; height: 16px; animation: lx-bob 2.2s var(--lx-inout) 2.4s infinite; }
@media (hover: hover) {
  .lx-btn--dark:hover { background: #2B2925; box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 18px 34px -16px rgba(27, 26, 23, .75); }
  .lx-btn--volt:hover { background: #F05A2D; }
  .lx-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--sv-pitch); background: var(--sv-paper-card); }
  .lx-btn:hover::after { transform: translateX(130%); }
  .lx-btn:hover .lx-btn-chev { transform: translateX(4px); }
}
.lx-btn:active { transform: translate3d(var(--mx), calc(var(--my) + 1px), 0) scale(.985); }
.lx-btn:focus-visible { outline: 2px solid var(--sv-volt); outline-offset: 3px; }
@keyframes lx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.lx-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--sv-paper-card);
  color: var(--sv-pitch);
  box-shadow: inset 0 0 0 1px var(--sv-ash), 0 4px 10px -6px rgba(60, 40, 20, .4);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s var(--lx-out);
}
.lx-icon-btn svg { width: 14px; height: 14px; }
.lx-icon-btn:hover { box-shadow: inset 0 0 0 1px var(--sv-pitch), 0 4px 10px -6px rgba(60, 40, 20, .4); }
.lx-icon-btn:focus-visible { outline: 2px solid var(--sv-volt); outline-offset: 2px; }

/* Stamp atom (perforated edge via mask). */
.lx-stamp { position: relative; display: block; }
.lx-stamp-paper {
  position: absolute;
  inset: 0;
  background: #FBF8F2;
  filter: drop-shadow(0 4px 9px rgba(60, 40, 20, .2));
  -webkit-mask: radial-gradient(circle 4px, #000 96%, #0000) 0 0 / 12px 12px, linear-gradient(#000 0 0) 50% / calc(100% - 12px) calc(100% - 12px) no-repeat;
  mask: radial-gradient(circle 4px, #000 96%, #0000) 0 0 / 12px 12px, linear-gradient(#000 0 0) 50% / calc(100% - 12px) calc(100% - 12px) no-repeat;
}
.lx-stamp-ink {
  position: absolute;
  inset: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #EC5022;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
}
.lx-stamp-usa { position: absolute; top: 5px; left: 6px; font: 700 8px/1 var(--sv-font-display); color: #fff; letter-spacing: 1.3px; }
.lx-stamp-n { position: absolute; bottom: 5px; right: 7px; font: 700 12px/1 var(--sv-font-display); color: #fff; }

.lx-imb { display: block; width: 100%; height: 2.4cqw; min-height: 7px; opacity: .78; }

/* ─── Hero ─────────────────────────────────────────────────────────────── */

.lx-hero {
  --hero-out: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: calc(100svh - var(--lx-nav-h));
  padding: 18px 0 84px;
}
.lx-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lx-hero-route { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.lx-hero-route-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lx-dash-draw 2.6s var(--lx-inout) .5s both;
}
.lx-hero-glow {
  position: absolute;
  right: -10%;
  top: 6%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 80, 34, .09), rgba(236, 80, 34, 0));
}
.lx-hero-inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
.lx-hero-copy {
  transform: translate3d(0, calc(var(--hero-out) * -60px), 0);
  opacity: calc(1 - var(--hero-out) * .7);
}
.lx-hero .sv-hero-h1 {
  margin: 0;
  font: 800 clamp(54px, 7.2vw, 112px)/.88 var(--sv-font-display);
  letter-spacing: -.045em;
  color: var(--sv-pitch);
  animation: lx-rise .9s var(--lx-out) both;
}
.lx-hero-script { position: relative; display: inline-block; margin: .04em 0 30px; font-size: clamp(50px, 6.1vw, 94px); }
.lx-hero-script-text {
  display: block;
  padding: 0 .14em .08em 0;
  font: 700 1em/1.02 var(--sv-font-script);
  color: var(--sv-volt);
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(100deg, #000 0, #000 var(--lx-write), transparent calc(var(--lx-write) + 7%));
  mask-image: linear-gradient(100deg, #000 0, #000 var(--lx-write), transparent calc(var(--lx-write) + 7%));
  animation: lx-write 1.25s cubic-bezier(.5, .1, .4, 1) .22s both;
}
.lx-hero-marker {
  position: absolute;
  left: 4%;
  bottom: -.14em;
  width: 78%;
  height: .2em;
  overflow: visible;
}
.lx-hero-marker path,
.lx-letter-marker path,
.lx-mark-draw path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.lx-hero-marker path { animation: lx-dash-draw .55s var(--sv-ease-draw) 1.3s both; }
.lx-hero .sv-hero-lede {
  max-width: 540px;
  margin: 0 0 30px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--sv-stone);
  animation: lx-rise .9s var(--lx-out) .08s both;
}
.lx-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
  animation: lx-rise .9s var(--lx-out) .14s both;
}
.lx-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sv-stone);
  font: 600 14px/1.3 var(--sv-font-body);
}
.lx-hero-proof li { display: inline-flex; align-items: center; gap: 7px; }
.lx-hero-proof svg { width: 16px; height: 16px; flex: none; }
.lx-hero-in { animation: lx-in .8s var(--lx-out) var(--d, 0ms) both; }

@keyframes lx-rise { from { transform: translate3d(0, 18px, 0); } to { transform: none; } }
@keyframes lx-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@keyframes lx-write { from { --lx-write: -8%; } to { --lx-write: 108%; } }
@keyframes lx-dash-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Deck */
.lx-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1500px;
  transform: translate3d(0, calc(var(--hero-out) * 50px), 0) scale(calc(1 - var(--hero-out) * .06));
}
.lx-deck-float { width: min(100%, 640px); padding: 9% 7% 3%; box-sizing: border-box; animation: lx-float 6.5s ease-in-out 2.2s infinite alternate; }
.lx-deck-tilt {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 30%;
  position: relative;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.lx-deck { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.lx-card {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: var(--lx-card-shadow);
  transform: var(--t);
  transition: transform .95s var(--lx-spring) var(--tdelay, 0ms), box-shadow .6s var(--sv-ease);
  animation: lx-card-drop 1s var(--lx-drop) var(--d, 0ms) backwards;
  will-change: transform;
}
.lx-card[data-slot="0"] { box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 18px 26px -10px rgba(60, 40, 20, .26), 0 52px 80px -30px rgba(60, 40, 20, .45); }
.lx-card-shade,
.lx-card-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.lx-card-shade { background: #3B2A18; opacity: 0; transition: opacity .7s var(--sv-ease); }
.lx-card[data-slot="1"] .lx-card-shade { opacity: .05; }
.lx-card[data-slot="2"] .lx-card-shade { opacity: .1; }
.lx-card[data-slot="3"] .lx-card-shade { opacity: .15; }
.lx-card-sheen {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 46%),
    linear-gradient(125deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%);
  mix-blend-mode: soft-light;
  opacity: .45;
  transition: opacity .5s var(--sv-ease);
}
.lx-deck-tilt.is-hover .lx-card[data-slot="0"] .lx-card-sheen { opacity: 1; }
.lx-deck-hit {
  position: absolute;
  inset: -6%;
  z-index: 60;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}
.lx-deck-hit:focus-visible { outline: 2px dashed var(--sv-volt); outline-offset: 4px; }
@keyframes lx-card-drop {
  0% { transform: translate3d(-4%, -95vh, 0) rotate(-26deg) scale(1.04); }
  100% { transform: var(--t); }
}
@keyframes lx-float {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(0, -12px, 0) rotate(.7deg); }
}

.lx-deck-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  animation: lx-in .8s var(--lx-out) 1.7s both;
}
.lx-deck-note { font: 600 19px/1 var(--sv-font-hand); color: var(--sv-stone); }
.lx-deck-dots { display: inline-flex; gap: 6px; }
.lx-deck-dots i { width: 6px; height: 6px; border-radius: 99px; background: #D3C8B3; transition: width .45s var(--lx-out), background .3s; }
.lx-deck-dots i.is-on { width: 18px; background: var(--sv-volt); }

/* Faces — container-query units let every face scale with its card. */
.lx-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px;
  container-type: inline-size;
  color: #1B1A17;
}
/* No grain image on the hero deck faces: a url() background makes a falling
 * card the page's LCP element, which then lands ~1s late on slow phones.
 * Paper depth comes from the layered shadows instead. */
.lx-face-kicker { font: 700 2.1cqw/1 var(--sv-font-display); letter-spacing: .17em; }

.lx-face--brand {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 5.8% 6.2% 4%;
  background: #F0EADD;
  box-shadow: inset 0 0 0 1px rgba(196, 184, 164, .75);
}
.lx-face--brand .lx-face-kicker { margin-bottom: 2cqw; padding-right: 14cqw; color: var(--sv-volt); }
.lx-face--brand .lx-stamp { width: 10cqw !important; height: 12.4cqw !important; top: 3cqw !important; right: 3.4cqw !important; }
.lx-brand-quote { max-width: 76%; margin-bottom: auto; font: 600 6.4cqw/1.12 var(--sv-font-hand); }
.lx-brand-noise { position: relative; white-space: nowrap; }
.lx-brand-noise svg { position: absolute; left: 0; bottom: -.7cqw; width: 100%; height: 2.2cqw; overflow: visible; }
.lx-brand-noise path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lx-hero-noise path { stroke-dashoffset: 1; animation: lx-dash-draw .5s var(--sv-ease-draw) 1.9s both; }
.lx-brand-route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.2cqw;
  margin: 2.6cqw 0 2.2cqw;
  padding: 1.9cqw 0 1.7cqw;
  border-top: 1px solid rgba(35, 33, 29, .18);
  border-bottom: 1px solid rgba(35, 33, 29, .18);
}
.lx-brand-route span { display: block; margin-bottom: 1cqw; font: 700 1.5cqw/1 var(--sv-font-display); letter-spacing: .18em; color: #777066; }
.lx-brand-route b { display: block; font: 700 2.2cqw/1 var(--sv-font-display); letter-spacing: .08em; color: #23211D; white-space: nowrap; }
.lx-brand-route svg { width: 100%; height: 5cqw; overflow: visible; }
.lx-brand-to { text-align: right; }
.lx-brand-foot { display: flex; align-items: center; gap: 2.2cqw; }
.lx-brand-foot svg { width: 10.5cqw !important; height: 10.5cqw !important; }
.lx-brand-foot p { margin: 0; font: 500 2.8cqw/1.3 var(--sv-font-hand); color: #3B3A36; }
.lx-face--brand .lx-imb { margin-top: 1.8cqw; }
.lx-hero-stamp { animation: lx-stamp-land .42s var(--lx-drop) 1.45s both; }
.lx-hero-postmark { animation: lx-strike .34s var(--sv-ease) 1.7s both; }
@keyframes lx-stamp-land {
  0% { opacity: 0; transform: translate3d(0, -18px, 0) rotate(-14deg) scale(1.5); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: rotate(4deg); }
}
@keyframes lx-strike {
  0% { opacity: 0; transform: scale(1.5) rotate(-10deg); }
  100% { opacity: .85; transform: none; }
}

.lx-face--listing {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  background: #EC5022;
  color: #F7F2EA;
}
.lx-listing-copy { display: flex; flex-direction: column; padding: 7cqw 0 6cqw 7cqw; }
.lx-face--listing .lx-face-kicker {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 1.3cqw 2cqw;
  background: #1B1A17;
  color: #F7F2EA;
}
.lx-listing-title { margin-bottom: 1.6cqw; font: 800 8.2cqw/.92 var(--sv-font-display); letter-spacing: -.04em; }
.lx-listing-meta { margin-bottom: 4cqw; font: 600 2.7cqw/1.2 var(--sv-font-body); opacity: .9; }
.lx-listing-cta { align-self: flex-start; padding: 1.4cqw 2.4cqw; border: 1.5px solid rgba(247, 242, 234, .7); border-radius: 99px; font: 600 2.6cqw/1 var(--sv-font-body); }
.lx-listing-art { width: 100%; height: 100%; align-self: end; }

.lx-face--tuneup {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr auto;
  background: #EDE3D0;
}
.lx-tuneup-copy { padding: 6.5cqw 0 0 7cqw; }
.lx-face--tuneup .lx-face-kicker { color: var(--sv-volt); margin-bottom: 1.4cqw; }
.lx-tuneup-price { font: 800 19cqw/.85 var(--sv-font-display); letter-spacing: -.06em; }
.lx-tuneup-price sup { font-size: .42em; vertical-align: .9em; letter-spacing: 0; }
.lx-tuneup-script { margin: -1cqw 0 1.8cqw; font: 700 6.6cqw/1 var(--sv-font-script); color: var(--sv-volt); }
.lx-tuneup-meta { font: 500 2.7cqw/1.3 var(--sv-font-body); color: #57544D; }
.lx-tuneup-art { width: 70%; justify-self: center; align-self: center; margin-top: 4cqw; }
.lx-tuneup-foot {
  grid-column: 1 / -1;
  padding: 2.2cqw 7cqw;
  background: #1B1A17;
  color: #F7F2EA;
  font: 700 2cqw/1 var(--sv-font-display);
  letter-spacing: .2em;
}

.lx-face--cafe {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  box-sizing: border-box;
  padding: 5%;
  background: #1B1A17;
  color: #F7F2EA;
}
.lx-cafe-coupon { height: 100%; box-sizing: border-box; padding: 5cqw; border: 2px dashed rgba(247, 242, 234, .35); border-radius: 4px; display: flex; flex-direction: column; justify-content: center; }
.lx-cafe-script { font: 700 11cqw/1 var(--sv-font-script); color: #EC5022; }
.lx-cafe-name { margin: 1.4cqw 0 3cqw; font: 800 3.6cqw/1 var(--sv-font-display); letter-spacing: .14em; }
.lx-cafe-offer { font: 500 3.6cqw/1.25 var(--sv-font-hand); color: rgba(247, 242, 234, .85); }
.lx-cafe-art { width: 72%; justify-self: center; }

.lx-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1.5px #CFC4AE;
}
.lx-scroll-cue-line { width: 2px; height: 9px; border-radius: 2px; background: var(--sv-volt); animation: lx-scroll-cue 2s var(--lx-inout) 2.5s infinite; }
@keyframes lx-scroll-cue { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }

/* ─── Marquee tapes ────────────────────────────────────────────────────── */

.lx-marquee {
  position: relative;
  z-index: 2;
  padding: 26px 0 42px;
  overflow: hidden;
}
.lx-tape {
  position: relative;
  width: 112%;
  margin-left: -6%;
  overflow: hidden;
  padding: 15px 0;
  background: var(--sv-pitch);
  color: var(--sv-paper);
  transform: rotate(-1.6deg);
  box-shadow: 0 18px 40px -26px rgba(27, 26, 23, .7);
}
.lx-tape--b {
  margin-top: -6px;
  background: var(--sv-volt);
  color: #fff;
  transform: rotate(1.2deg);
}
.lx-tape-row {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: lx-tape-left var(--tape-dur, 34s) linear infinite paused;
}
.lx-tape--b .lx-tape-row { animation-name: lx-tape-right; }
.lx-marquee.is-running .lx-tape-row { animation-play-state: running; }
@keyframes lx-tape-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes lx-tape-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.lx-tape-list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.lx-tape-list li { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font: 800 clamp(18px, 1.8vw, 24px)/1 var(--sv-font-display); letter-spacing: -.01em; white-space: nowrap; text-transform: uppercase; }
.lx-tape-mark { color: var(--sv-volt); font-weight: 800; }
.lx-tape--b .lx-tape-mark { color: var(--sv-pitch); }

/* ─── Journey (pinned scrollytelling) ──────────────────────────────────── */

.lx-journey { position: relative; padding-top: 70px; background: linear-gradient(var(--sv-paper), var(--sv-paper-band) 22%); }
.lx-journey-intro { max-width: 1320px; margin: 0 auto; padding: 0 40px 10px; text-align: left; }
.lx-journey-track { position: relative; height: 470vh; }
.lx-journey-sticky {
  position: sticky;
  top: var(--lx-nav-h);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 56px;
  align-items: center;
  height: calc(100svh - var(--lx-nav-h));
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 40px 40px;
}
.lx-journey-copy { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-template-rows: auto auto; gap: 26px 28px; }
.lx-roller {
  grid-column: 1 / -1;
  height: 1em;
  overflow: hidden;
  font: 800 clamp(96px, 11vw, 168px)/1 var(--sv-font-display);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px #CDBFA6;
}
.lx-roller-reel { --n: 0; display: flex; flex-direction: column; transform: translate3d(0, calc(var(--n) * -1em), 0); }
.lx-roller-reel span { display: block; height: 1em; }
.lx-rail { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 26px; }
.lx-rail-line { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: #DCD1BC; border-radius: 2px; overflow: hidden; }
.lx-rail-fill { --fill: 0; position: absolute; inset: 0; background: var(--sv-volt); transform-origin: top; transform: scaleY(var(--fill)); }
.lx-rail-step { position: relative; display: flex; align-items: center; gap: 0; height: 14px; color: transparent; font-size: 0; }
.lx-rail-step i {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--sv-paper-band);
  box-shadow: inset 0 0 0 2px #CDBFA6;
  transition: box-shadow .4s var(--lx-out), background .4s, transform .5s var(--lx-spring);
}
.lx-rail-step.is-on i { background: var(--sv-volt); box-shadow: inset 0 0 0 2px var(--sv-volt), 0 0 0 4px rgba(236, 80, 34, .15); transform: scale(1.1); }
.lx-chapters { position: relative; min-height: 290px; }
.lx-chapter { position: absolute; inset: 0 0 auto 0; will-change: transform, opacity; }
.lx-chapter:not(.is-active) { pointer-events: none; }
.lx-chapter-kicker { margin-bottom: 14px; color: var(--sv-volt); font: 700 13px/1 var(--sv-font-display); letter-spacing: .2em; text-transform: uppercase; }
.lx-chapter-title { margin: 0 0 16px; font: 800 clamp(32px, 3.4vw, 50px)/1 var(--sv-font-display); letter-spacing: -.035em; text-wrap: balance; }
.lx-chapter-body { max-width: 460px; margin: 0; font-size: 18px; line-height: 1.6; color: var(--sv-stone); }

.lx-stage-wrap { position: relative; }
.lx-stage {
  position: relative;
  width: 100%;
  max-height: calc(100svh - var(--lx-nav-h) - 64px);
  aspect-ratio: 600 / 540;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  background: var(--sv-paper-card);
  box-shadow: inset 0 0 0 1px var(--sv-ash), 0 40px 80px -40px rgba(60, 40, 20, .45), 0 1px 0 rgba(255, 255, 255, .7) inset;
  perspective: 1400px;
  container-type: inline-size;
}
.lx-stage-chip {
  position: absolute;
  top: 3.2cqw;
  right: 3.2cqw;
  z-index: 30;
  padding: 1.1cqw 2cqw;
  border-radius: 99px;
  background: rgba(252, 249, 243, .92);
  box-shadow: inset 0 0 0 1px var(--sv-ash);
  font: 700 1.7cqw/1 var(--sv-font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-muted);
}
.lx-scene { position: absolute; inset: 0; will-change: opacity, transform; }

/* Scene A — map */
.lx-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.lx-house { fill: #DDD3C0; transition: fill .35s var(--sv-ease), transform .5s var(--lx-spring); transform-box: fill-box; transform-origin: center; }
.lx-house.is-on { fill: var(--sv-volt); transform: scale(1.12); }
.lx-poly { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 2px 3px rgba(236, 80, 34, .3)); }
.lx-vertex { fill: #fff; stroke: var(--sv-volt); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .4s var(--lx-spring); }
.lx-vertex.is-on { transform: scale(1); }
.lx-area-label { font: 700 22px var(--sv-font-hand); fill: #1B1A17; opacity: 0; transition: opacity .5s var(--sv-ease); paint-order: stroke; stroke: rgba(252, 249, 243, .85); stroke-width: 5px; }
.lx-area-label.is-on { opacity: 1; }
.lx-pen { transition: opacity .25s; }
.lx-map-panel {
  position: absolute;
  left: 3.2cqw;
  top: 3.2cqw;
  z-index: 3;
  width: 38cqw;
  box-sizing: border-box;
  padding: 2.8cqw 3cqw;
  border-radius: 2.4cqw;
  background: rgba(252, 249, 243, .95);
  box-shadow: inset 0 0 0 1px var(--sv-ash), 0 2cqw 4cqw -2.6cqw rgba(60, 40, 20, .5);
}
.lx-map-tabs { display: flex; gap: 2.6cqw; padding-bottom: 1.8cqw; margin-bottom: 2cqw; border-bottom: 1px solid var(--sv-ash); font: 600 2.1cqw/1 var(--sv-font-body); color: var(--sv-muted); }
.lx-map-tabs b { color: var(--sv-volt); font-weight: 700; }
.lx-map-count { font: 800 8.4cqw/1 var(--sv-font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lx-map-count-label { margin-top: .6cqw; font: 500 2.3cqw/1 var(--sv-font-body); color: var(--sv-stone); }
.lx-map-create {
  position: absolute;
  right: 3.2cqw;
  bottom: 3.2cqw;
  z-index: 3;
  display: grid;
  padding: 2.1cqw 3.4cqw;
  border-radius: 1.8cqw;
  background: var(--sv-volt);
  color: #fff;
  font: 700 2.4cqw/1 var(--sv-font-body);
  box-shadow: 0 2cqw 4cqw -2cqw rgba(236, 80, 34, .8);
  transition: transform .3s var(--lx-spring), background .3s;
}
.lx-map-create > span { grid-area: 1 / 1; display: inline-flex; gap: 1.2cqw; align-items: center; justify-content: center; transition: opacity .25s, transform .35s var(--lx-out); }
.lx-map-create .lx-btn-chev { font-size: 2.3cqw; }
.lx-map-create-b { opacity: 0; transform: translateY(60%); }
.lx-map-create.is-pressed { transform: scale(.96); background: var(--sv-pitch); }
.lx-map-create.is-pressed .lx-map-create-a { opacity: 0; transform: translateY(-60%); }
.lx-map-create.is-pressed .lx-map-create-b { opacity: 1; transform: none; }

/* Scene B — designer */
.lx-designer-grid {
  position: absolute;
  inset: 0;
  background-color: #F4EEE3;
  background-image: radial-gradient(circle, #D9CFBD 1px, transparent 1.4px);
  background-size: 3.2cqw 3.2cqw;
}
.lx-tools {
  position: absolute;
  left: 3.2cqw;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  padding: 1.2cqw;
  border-radius: 99px;
  background: var(--sv-paper-card);
  box-shadow: inset 0 0 0 1px var(--sv-ash), 0 2cqw 4cqw -2.4cqw rgba(60, 40, 20, .45);
  transform: translateY(-50%);
}
.lx-tools span { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; color: #8A867C; transition: background .3s, color .3s, transform .4s var(--lx-spring); }
.lx-tools svg { width: 3.4cqw; height: 3.4cqw; }
.lx-tools span.is-on { background: var(--sv-volt); color: #fff; transform: scale(1.06); }
.lx-designer-label { position: absolute; left: 50%; bottom: 3.6cqw; transform: translateX(-38%); font: 700 1.8cqw/1 var(--sv-font-display); letter-spacing: .16em; color: var(--sv-muted); text-transform: uppercase; }

/* Postcard actor */
.lx-actor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 70%;
  aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  /* transform only: will-change:opacity flattens preserve-3d in Chromium and
     the address side would never show when the card flips. */
  will-change: transform;
  visibility: hidden;
}
.lx-actor-front,
.lx-actor-back {
  position: absolute;
  inset: 0;
  border-radius: 1.2cqw;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--lx-card-shadow);
}
.lx-actor-back { transform: rotateY(180deg); background: #FCF9F3; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; box-sizing: border-box; padding: 4% 4% 3%; container-type: inline-size; }
.lx-dcard {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #FCF9F3;
  container-type: inline-size;
}
.lx-dcard::after { content: ''; position: absolute; inset: 0; background-image: var(--lx-grain); mix-blend-mode: multiply; pointer-events: none; }
.lx-dcard-art { position: absolute; left: 0; top: 0; bottom: 0; width: 41%; background: #EC5022; display: flex; align-items: flex-end; }
.lx-dcard-art svg { width: 100%; height: 100%; }
.lx-dcard-greet { position: absolute; left: 45%; top: 9%; display: flex; align-items: center; font: 600 5.4cqw/1 var(--sv-font-hand); color: #1B1A17; opacity: 0; transform-origin: left center; }
.lx-merge { position: relative; display: inline-grid; justify-items: start; perspective: 300px; }
.lx-merge > span { grid-area: 1 / 1; backface-visibility: hidden; transform-origin: 50% 50% -1.6cqw; }
.lx-merge-token { padding: .3cqw 1.2cqw; border-radius: .8cqw; background: rgba(236, 80, 34, .12); color: var(--sv-volt); font: 600 2.6cqw/1.5 var(--sv-font-mono); align-self: center; }
.lx-merge-name { transform: rotateX(90deg); color: var(--sv-volt); }
.lx-dcard-kicker { position: absolute; left: 45%; top: 25%; font: 700 2cqw/1 var(--sv-font-display); letter-spacing: .18em; color: var(--sv-volt); }
.lx-dcard-title { position: absolute; left: 45%; top: 31%; display: flex; align-items: center; height: 10cqw; font: 800 7.4cqw/1 var(--sv-font-display); letter-spacing: -.045em; white-space: nowrap; }
.lx-caret { display: inline-block; width: .5cqw; height: 7cqw; margin-left: .5cqw; background: var(--sv-volt); opacity: 0; }
.lx-caret.is-on { animation: lx-caret .9s steps(1) infinite; }
@keyframes lx-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.lx-dcard-meta { position: absolute; left: 45%; top: 51%; font: 600 2.6cqw/1.2 var(--sv-font-body); color: #57544D; opacity: 0; }
.lx-qr { position: absolute; left: 73%; top: 65%; width: 20%; height: auto; aspect-ratio: 1; shape-rendering: crispEdges; }
.lx-qr-mod { fill: #1B1A17; opacity: 0; transition: opacity .18s; }
.lx-qr-mod.is-on { opacity: 1; }
.lx-dcard-blank {
  position: absolute;
  inset: 4cqw;
  display: grid;
  place-items: center;
  border: 2px dashed #D3C7B1;
  border-radius: 1.2cqw;
  color: #A39C8E;
  font: 600 3cqw/1 var(--sv-font-hand);
  transition: opacity .35s;
}
.lx-dcard-blank.is-hidden { opacity: 0; }
.lx-select { position: absolute; z-index: 4; box-sizing: border-box; border: 1.5px solid var(--sv-volt); border-radius: .4cqw; opacity: 0; pointer-events: none; }
.lx-select i { position: absolute; width: 1.6cqw; height: 1.6cqw; background: #fff; border: 1.5px solid var(--sv-volt); border-radius: 50%; }
.lx-select i:nth-child(1) { left: -0.9cqw; top: -0.9cqw; }
.lx-select i:nth-child(2) { right: -0.9cqw; top: -0.9cqw; }
.lx-select i:nth-child(3) { left: -0.9cqw; bottom: -0.9cqw; }
.lx-select i:nth-child(4) { right: -0.9cqw; bottom: -0.9cqw; }

.lx-approved {
  position: absolute;
  left: 66%;
  top: 72%;
  z-index: 8;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 1.7cqw 3cqw 1.4cqw;
  border: .9cqw double var(--sv-volt);
  border-radius: 1.6cqw;
  color: var(--sv-volt);
  background: rgba(252, 249, 243, .9);
  box-shadow: 0 0 0 1.2cqw rgba(252, 249, 243, .55);
  transform: translate(-50%, -50%) rotate(-12deg);
  filter: url(#sv-ink);
}
.lx-approved.is-on { display: flex; }
.lx-approved span { font: 800 6.8cqw/.9 var(--sv-font-display); letter-spacing: .03em; }
.lx-approved small { margin-top: .8cqw; font: 700 1.6cqw/1 var(--sv-font-display); letter-spacing: .32em; }

.lx-back-copy { display: flex; flex-direction: column; justify-content: center; gap: 2cqw; padding-right: 3cqw; border-right: 1px solid #DDD3C0; }
.lx-back-hi { font: 700 6cqw/1 var(--sv-font-script); color: var(--sv-volt); }
.lx-back-sig { font: 500 3.6cqw/1.2 var(--sv-font-hand); color: #57544D; }
.lx-back-addr { position: relative; padding-left: 4cqw; }
.lx-back-addr .lx-stamp { width: 9cqw !important; height: 11cqw !important; }
.lx-back-postmark { position: absolute; top: 2cqw; right: 6cqw; opacity: 0; transform: scale(1.5) rotate(-12deg); transition: opacity .25s, transform .3s var(--lx-drop); }
.lx-back-postmark svg { width: 12cqw !important; height: 12cqw !important; }
.lx-back-postmark.is-on { opacity: .9; transform: none; }
.lx-back-lines { position: absolute; left: 4cqw; right: 0; bottom: 4cqw; display: flex; flex-direction: column; gap: 1.2cqw; font: 600 3.2cqw/1.1 var(--sv-font-display); letter-spacing: .02em; text-transform: uppercase; color: #1B1A17; }
.lx-back-lines b { font-weight: 800; }
.lx-back-imb { grid-column: 1 / -1; height: 4cqw; margin-top: 2cqw; }

/* Scene C — proof + quote */
.lx-crop { position: absolute; left: 7%; top: 21%; width: 52%; height: 48%; }
.lx-crop i { position: absolute; width: 4cqw; height: 4cqw; border: 0 solid #1B1A17; }
.lx-crop i:nth-child(1) { left: -2.6cqw; top: -2.6cqw; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.lx-crop i:nth-child(2) { right: -2.6cqw; top: -2.6cqw; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.lx-crop i:nth-child(3) { left: -2.6cqw; bottom: -2.6cqw; border-right-width: 1.5px; border-top-width: 1.5px; }
.lx-crop i:nth-child(4) { right: -2.6cqw; bottom: -2.6cqw; border-left-width: 1.5px; border-top-width: 1.5px; }
.lx-crop-label { position: absolute; left: 0; top: -6.5cqw; font: 700 1.7cqw/1 var(--sv-font-display); letter-spacing: .18em; color: var(--sv-muted); }
.lx-receipt {
  --print: 0;
  position: absolute;
  right: 4cqw;
  top: 13%;
  width: 34%;
  height: 80%;
  overflow: hidden;
  clip-path: inset(0 0 calc((1 - var(--print)) * 100%) 0);
}
.lx-receipt-paper {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 3.4cqw 3cqw 5cqw;
  background: #fff;
  box-shadow: 0 2cqw 4cqw -2cqw rgba(60, 40, 20, .35), inset 0 0 0 1px #EEE7DA;
  transform: translate3d(0, calc((1 - var(--print)) * -30%), 0);
  font-family: var(--sv-font-mono);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 2cqw) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 3cqw 2cqw repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 2cqw) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 3cqw 2cqw repeat-x;
}
.lx-receipt-head { padding-bottom: 2.2cqw; margin-bottom: 1.6cqw; border-bottom: 1.5px dashed #CFC4AE; font: 800 2cqw/1 var(--sv-font-display); letter-spacing: .2em; }
.lx-quote-line { display: flex; flex-direction: column; gap: .5cqw; padding: 1.25cqw 0; border-bottom: 1px dotted #E2D9C8; opacity: 0; transform: translateY(1cqw); transition: opacity .3s, transform .4s var(--lx-out); }
.lx-quote-line.is-on { opacity: 1; transform: none; }
.lx-quote-line span { font: 500 1.6cqw/1 var(--sv-font-body); color: var(--sv-muted); text-transform: uppercase; letter-spacing: .12em; }
.lx-quote-line b { font: 700 2.2cqw/1.1 var(--sv-font-body); color: #1B1A17; }
.lx-quote-total { margin-top: 2cqw; opacity: 0; transition: opacity .35s; }
.lx-quote-total.is-on { opacity: 1; }
.lx-quote-total span { display: block; font: 700 1.6cqw/1 var(--sv-font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--sv-volt); }
.lx-quote-total b { display: block; margin: 1cqw 0 1.2cqw; font: 800 3.6cqw/1 var(--sv-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-quote-total b span { display: inline; font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; }
.lx-quote-total small { display: block; font: 500 1.45cqw/1.35 var(--sv-font-body); color: var(--sv-stone); }

/* Scene D — route + delivery */
.lx-ship-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lx-mailbox-flag { transform-box: fill-box; transform-origin: 0% 100%; transform: rotate(90deg); transition: transform .5s var(--lx-spring); }
.lx-scene--ship.is-delivered .lx-mailbox-flag { transform: rotate(0deg); }
.lx-track {
  position: absolute;
  left: 3.2cqw;
  top: 3.2cqw;
  width: 40cqw;
  box-sizing: border-box;
  padding: 2.6cqw 3cqw;
  border-radius: 2.4cqw;
  background: rgba(252, 249, 243, .96);
  box-shadow: inset 0 0 0 1px var(--sv-ash), 0 2cqw 4cqw -2.6cqw rgba(60, 40, 20, .5);
}
.lx-track-head { display: flex; flex-direction: column; gap: .8cqw; padding-bottom: 1.8cqw; margin-bottom: 1.2cqw; border-bottom: 1px solid var(--sv-ash); }
.lx-track-head span { font: 700 1.6cqw/1 var(--sv-font-display); letter-spacing: .18em; color: var(--sv-muted); }
.lx-track-head b { font: 800 3cqw/1 var(--sv-font-display); letter-spacing: -.02em; }
.lx-track-row { position: relative; display: flex; align-items: center; gap: 2cqw; padding: 1.15cqw 0; font: 600 2.3cqw/1 var(--sv-font-body); color: #A39C8E; transition: color .3s; }
.lx-track-row i { position: relative; width: 3cqw; height: 3cqw; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #D3C8B3; transition: background .3s, box-shadow .3s, transform .4s var(--lx-spring); }
.lx-track-row i::after { content: ''; position: absolute; left: 32%; top: 22%; width: 26%; height: 44%; border: solid #fff; border-width: 0 .45cqw .45cqw 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--lx-spring) .05s; }
.lx-track-row.is-on { color: #1B1A17; }
.lx-track-row.is-on i { background: var(--sv-volt); box-shadow: inset 0 0 0 1.5px var(--sv-volt); transform: scale(1.08); }
.lx-track-row.is-on i::after { transform: rotate(45deg) scale(1); }
.lx-track-row + .lx-track-row::before { content: ''; position: absolute; left: 1.4cqw; top: -1.1cqw; height: 2.2cqw; width: 1.5px; background: #E2D9C8; }
.lx-delivered-toast {
  position: absolute;
  left: 84%;
  top: 49%;
  padding: 1.6cqw 2.6cqw;
  border-radius: 99px;
  background: #1B1A17;
  color: #fff;
  font: 700 2.4cqw/1 var(--sv-font-body);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 20%) scale(.8);
  transition: opacity .3s, transform .5s var(--lx-spring);
}
.lx-delivered-toast span { color: var(--sv-volt); }
.lx-scene--ship.is-delivered .lx-delivered-toast { opacity: 1; transform: translate(-50%, 0) scale(1); }
.lx-confetti { position: absolute; left: 81%; top: 63%; }
.lx-confetti i { position: absolute; width: 1.4cqw; height: .8cqw; background: var(--sv-volt); opacity: 0; }
.lx-confetti i:nth-child(3n) { background: #1B1A17; }
.lx-confetti i:nth-child(3n+1) { background: #F2B544; }
.lx-scene--ship.is-delivered .lx-confetti i { animation: lx-confetti .9s var(--lx-out) both; }
.lx-confetti i:nth-child(1) { --x: -9cqw; --y: -10cqw; --r: 140deg; }
.lx-confetti i:nth-child(2) { --x: -4cqw; --y: -14cqw; --r: -90deg; }
.lx-confetti i:nth-child(3) { --x: 2cqw; --y: -15cqw; --r: 200deg; }
.lx-confetti i:nth-child(4) { --x: 7cqw; --y: -11cqw; --r: -160deg; }
.lx-confetti i:nth-child(5) { --x: 10cqw; --y: -6cqw; --r: 90deg; }
.lx-confetti i:nth-child(6) { --x: -11cqw; --y: -4cqw; --r: -40deg; }
.lx-confetti i:nth-child(7) { --x: 4cqw; --y: -8cqw; --r: 300deg; }
.lx-confetti i:nth-child(8) { --x: -6cqw; --y: -7cqw; --r: 60deg; }
.lx-confetti i:nth-child(9) { --x: 12cqw; --y: -13cqw; --r: -250deg; }
@keyframes lx-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}

/* ─── Tracking + split-flap board ──────────────────────────────────────── */

.lx-tracking { padding: 120px 0 110px; background: var(--sv-paper-band); }
.lx-tracking-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.lx-points { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.lx-points li { display: flex; gap: 14px; align-items: flex-start; }
.lx-points svg { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.lx-points b { display: block; margin-bottom: 3px; font: 700 16px/1.25 var(--sv-font-body); }
.lx-points span { font-size: 15px; line-height: 1.5; color: var(--sv-stone); }

.lx-board {
  padding: 30px 30px 26px;
  border-radius: 20px;
  background: #1D1C19;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%);
  box-shadow: 0 50px 90px -46px rgba(27, 26, 23, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #F7F2EA;
}
.lx-board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.lx-board-title { font: 700 12px/1 var(--sv-font-display); letter-spacing: .24em; color: rgba(247, 242, 234, .7); }
.lx-board-live { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--sv-font-body); color: rgba(247, 242, 234, .7); }
.lx-board-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--sv-volt); animation: lx-blink 1.6s ease-in-out infinite; }
@keyframes lx-blink { 50% { opacity: .25; } }
.lx-board-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 26px; }
.lx-board-stat { padding: 14px 14px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.lx-board-stat dt { margin-bottom: 12px; font: 600 12px/1 var(--sv-font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(247, 242, 234, .7); }
.lx-board-stat dd { margin: 0; }
.lx-board-stat .lx-flaps { --fs: clamp(15px, 1.42vw, 21px); }
.lx-board-stat:last-child .lx-flap b { color: var(--sv-volt); }
.lx-board-table { font-size: 0; }
.lx-board-thead,
.lx-board-row { display: grid; grid-template-columns: 1fr .82fr 1.9fr 1.55fr; gap: 12px; align-items: center; }
.lx-board-thead { padding: 0 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 8px; }
.lx-board-thead span { font: 700 11px/1 var(--sv-font-display); letter-spacing: .2em; color: rgba(247, 242, 234, .5); }
.lx-board-row { padding: 6px 0; }
.lx-board-row .lx-flaps { --fs: clamp(11px, .95vw, 14px); }
.lx-board-row.is-delivered .lx-flaps--status .lx-flap b { color: var(--sv-volt); }

.lx-flaps { --fs: 16px; display: inline-flex; gap: calc(var(--fs) * .12); font-size: var(--fs); }
.lx-flap {
  --flap-ms: 64ms;
  position: relative;
  display: inline-block;
  width: .8em;
  height: 1.3em;
  border-radius: .12em;
  background: #2A2824;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
  perspective: 6em;
}
.lx-flap--punct { width: .34em; background: transparent; box-shadow: none; }
.lx-flap::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(0, 0, 0, .55); z-index: 3; }
.lx-flap--punct::after { display: none; }
.lx-flap > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: inherit; border-radius: inherit; }
.lx-flap--punct > span { background: transparent; }
.lx-flap b {
  position: absolute;
  left: 0;
  right: 0;
  height: 2.6em;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 1em/1 var(--sv-font-display);
  color: #F7F2EA;
  font-variant-numeric: tabular-nums;
}
.lx-flap-top, .lx-flap-leaf--top { top: 0; transform-origin: 50% 100%; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.lx-flap-bot, .lx-flap-leaf--bot { bottom: 0; transform-origin: 50% 0%; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.lx-flap-top b, .lx-flap-leaf--top b { top: 0; }
.lx-flap-bot b, .lx-flap-leaf--bot b { bottom: 0; }
.lx-flap-leaf { visibility: hidden; z-index: 2; backface-visibility: hidden; }
.lx-flap.is-flipping .lx-flap-leaf { visibility: visible; }
.lx-flap.is-flipping .lx-flap-leaf--top { animation: lx-flap-top calc(var(--flap-ms) * .55) ease-in both; background: #2F2D29; }
.lx-flap.is-flipping .lx-flap-leaf--bot { animation: lx-flap-bot calc(var(--flap-ms) * .55) ease-out calc(var(--flap-ms) * .45) both; }
@keyframes lx-flap-top { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes lx-flap-bot { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* ─── Compare + race ───────────────────────────────────────────────────── */

.lx-compare { padding: 120px 0; background: var(--sv-paper); }
.lx-compare-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; margin-bottom: 70px; }
.lx-race {
  padding: 28px 30px 30px;
  border-radius: 20px;
  background: var(--sv-paper-card);
  box-shadow: inset 0 0 0 1px var(--sv-ash), 0 34px 70px -42px rgba(60, 40, 20, .55);
}
.lx-race-head { display: flex; justify-content: space-between; margin-bottom: 22px; font: 700 12px/1 var(--sv-font-display); letter-spacing: .22em; color: var(--sv-muted); }
.lx-lane + .lx-lane { margin-top: 22px; }
.lx-lane-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.lx-lane-label b { font: 700 16px/1.2 var(--sv-font-body); }
.lx-lane-label span { font: 600 14px/1.2 var(--sv-font-body); color: var(--sv-stone); }
.lx-lane--sendvo .lx-lane-label span { color: var(--sv-volt); }
.lx-lane-track { position: relative; height: 40px; border-radius: 12px; background: #F1EADD; box-shadow: inset 0 0 0 1px #E6DCCB; }
.lx-lane-track::after { content: ''; position: absolute; right: 12px; top: 8px; bottom: 8px; width: 4px; background: repeating-linear-gradient(#1B1A17 0 4px, #fff 4px 8px); border-radius: 1px; opacity: .55; }
.lx-lane-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(87, 84, 77, .1), rgba(87, 84, 77, .16)); transition: width var(--ms) cubic-bezier(.25, .1, .25, 1); }
.lx-lane--sendvo .lx-lane-fill { background: linear-gradient(90deg, rgba(236, 80, 34, .12), rgba(236, 80, 34, .3)); transition-timing-function: cubic-bezier(.7, 0, .2, 1); }
.lx-lane-token {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 40px;
  height: 27px;
  margin-top: -13.5px;
  border-radius: 3px;
  background: #F0EADD;
  box-shadow: inset 0 0 0 1px rgba(196, 184, 164, .9), 0 6px 10px -5px rgba(60, 40, 20, .45);
  transition: left var(--ms) cubic-bezier(.25, .1, .25, 1);
}
.lx-lane-token i { position: absolute; top: 4px; right: 4px; width: 8px; height: 10px; background: #8A867C; }
.lx-lane--sendvo .lx-lane-token { transition-timing-function: cubic-bezier(.7, 0, .2, 1); }
.lx-lane--sendvo .lx-lane-token i { background: var(--sv-volt); }
.lx-race.is-run .lx-lane-fill { width: var(--to); }
.lx-race.is-run .lx-lane-token { left: calc(var(--to) - 52px); left: max(6px, calc(var(--to) - 54px)); }
.lx-lane-note { position: absolute; left: calc(var(--to) + 10px); top: 50%; transform: translateY(-50%); font: 600 17px/1 var(--sv-font-hand); color: var(--sv-stone); white-space: nowrap; opacity: 0; transition: opacity .4s calc(var(--ms) - 200ms); }
.lx-lane--sendvo .lx-lane-note { display: none; }
.lx-race.is-run .lx-lane-note { opacity: 1; }
.lx-lane-flag {
  position: absolute;
  right: 26px;
  top: 50%;
  padding: 5px 9px 4px;
  border: 2px solid var(--sv-volt);
  border-radius: 4px;
  color: var(--sv-volt);
  font: 800 12px/1 var(--sv-font-display);
  letter-spacing: .18em;
  opacity: 0;
  transform: translateY(-50%) rotate(-8deg) scale(1.8);
}
.lx-race.is-run .lx-lane-flag { animation: lx-flag-stamp .34s var(--lx-drop) calc(var(--ms) + 40ms) both; }
@keyframes lx-flag-stamp {
  from { opacity: 0; transform: translateY(-50%) rotate(-14deg) scale(1.9); }
  to { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); }
}

.lx-compare-table.sv-compare-table { padding: 34px 32px 30px; border-radius: 20px; background: #FBF7EF; box-shadow: inset 0 0 0 1px var(--sv-ash), 0 30px 60px -40px rgba(60, 40, 20, .5); }
.lx-compare-rows > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--sv-ease), transform .6s var(--lx-out); }
.lx-compare.is-in .lx-compare-rows > * { opacity: 1; transform: none; }
.lx-compare.is-in .lx-compare-rows > *:nth-child(2) { transition-delay: 60ms; }
.lx-compare.is-in .lx-compare-rows > *:nth-child(3) { transition-delay: 120ms; }
.lx-compare.is-in .lx-compare-rows > *:nth-child(4) { transition-delay: 180ms; }
.lx-compare.is-in .lx-compare-rows > *:nth-child(5) { transition-delay: 240ms; }
.lx-compare.is-in .lx-compare-rows > *:nth-child(6) { transition-delay: 300ms; }
.lx-compare.is-in .lx-compare-rows > *:nth-child(7) { transition-delay: 360ms; }
.lx-compare.is-in .lx-compare-rows > *:nth-child(8) { transition-delay: 420ms; }
.lx-mark-draw path { transition: stroke-dashoffset .7s var(--sv-ease-draw) .5s; }
.is-in .lx-mark-draw path { stroke-dashoffset: 0; }

/* ─── Integrations (dark) ──────────────────────────────────────────────── */

.lx-integrations {
  position: relative;
  padding: 120px 0 100px;
  background: #1B1A17;
  color: #F7F2EA;
  overflow: hidden;
}
.lx-integrations::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 80, 34, .16), rgba(236, 80, 34, 0));
  pointer-events: none;
}
.lx-integrations::after { content: ''; position: absolute; inset: 0; background-image: var(--lx-grain); mix-blend-mode: screen; opacity: .25; pointer-events: none; }
.lx-integrations .lx-wrap { position: relative; z-index: 1; }
.lx-integrations-head { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.lx-integrations .lx-h2 { color: #F7F2EA; }
.lx-integrations .lx-lede { margin: 18px auto 0; color: rgba(247, 242, 234, .72); }
.lx-eyebrow--dark { color: var(--sv-volt); }
.lx-integrations-foot { margin: 26px 0 0; text-align: center; font: 600 15px/1 var(--sv-font-body); color: rgba(247, 242, 234, .6); }

.lx-hubs { position: relative; max-width: 1080px; margin: 0 auto; }
.lx-hub { position: relative; width: 100%; }
.lx-hub--narrow { display: none; }
.lx-hub-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lx-wire { fill: none; stroke: rgba(247, 242, 234, .14); stroke-width: 1.5; stroke-dasharray: 3 6; }
.lx-wire-pulse { fill: none; stroke: var(--sv-volt); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 120 2000; stroke-dashoffset: 120; opacity: 0; filter: drop-shadow(0 0 6px rgba(236, 80, 34, .9)); }
.lx-chip {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  width: 184px;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 14px;
  background: #24221F;
  box-shadow: inset 0 0 0 1px rgba(247, 242, 234, .1), 0 12px 24px -16px rgba(0, 0, 0, .8);
  transform: translate(-50%, -50%);
  transition: box-shadow .3s;
}
.lx-chip i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: rgba(247, 242, 234, .25); transition: background .3s, box-shadow .3s; }
.lx-chip b { font: 700 14px/1.2 var(--sv-font-body); color: #F7F2EA; }
.lx-chip span { font: 500 13px/1.3 var(--sv-font-body); color: rgba(247, 242, 234, .6); }
.lx-chip.is-fire { animation: lx-chip-fire 1.1s var(--lx-out); }
.lx-chip.is-fire i { background: var(--sv-volt); box-shadow: 0 0 0 4px rgba(236, 80, 34, .2); }
@keyframes lx-chip-fire {
  0% { box-shadow: inset 0 0 0 1px rgba(236, 80, 34, .9), 0 0 0 0 rgba(236, 80, 34, .4); transform: translate(-50%, -50%) scale(1.04); }
  100% { box-shadow: inset 0 0 0 1px rgba(247, 242, 234, .1), 0 0 0 14px rgba(236, 80, 34, 0); transform: translate(-50%, -50%); }
}
.lx-hub-core {
  position: absolute;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 30px;
  background: #F7F2EA;
  box-shadow: 0 0 0 8px rgba(247, 242, 234, .05), 0 30px 60px -20px rgba(0, 0, 0, .7);
  transform: translate(-50%, -50%);
}
.lx-hub-core svg { width: 56%; height: 56%; }
.lx-hub-core svg polyline:first-child { stroke: #1B1A17; }
.lx-hub-ring { position: absolute; inset: -10px; border-radius: 36px; border: 1.5px solid var(--sv-volt); opacity: 0; }
.lx-hub-core.is-ping { animation: lx-core-ping .5s var(--lx-spring); }
.lx-hub-core.is-ping .lx-hub-ring { animation: lx-ring 1s var(--lx-out) both; }
.lx-hub-core.is-ping .lx-hub-ring + .lx-hub-ring { animation-delay: .12s; }
@keyframes lx-core-ping { 40% { transform: translate(-50%, -50%) scale(1.07); } }
@keyframes lx-ring { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.6); } }
.lx-hub-out { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); }
.lx-hub-out::before { content: ''; width: 64px; height: 44px; border-radius: 8px 8px 4px 4px; background: #2A2824; box-shadow: inset 0 0 0 1.5px rgba(247, 242, 234, .18); }
.lx-hub-card { position: absolute; left: 50%; top: 0; width: 46px; height: 31px; border-radius: 3px; background: #F0EADD; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .6); opacity: 0; }
.lx-hub-card::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 10px; background: var(--sv-volt); }
.lx-hub-out-label { margin-top: 12px; font: 600 20px/1 var(--sv-font-hand); color: rgba(247, 242, 234, .75); white-space: nowrap; }

/* ─── Plans ────────────────────────────────────────────────────────────── */

.lx-plans.sv-plan-comparison-section { padding: 120px 0 110px; background: var(--sv-paper-band); }
.lx-plans .lx-wrap { max-width: 1320px; }
.lx-plans-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.lx-plans-head .lx-eyebrow { justify-content: center; }
.lx-plans-head .lx-lede { margin: 18px auto 0; }
.lx-plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; }
.lx-plan-card { display: flex; flex-direction: column; padding: 32px 28px; border: 1px solid var(--sv-paper-edge); border-radius: var(--sv-radius-lg); background: var(--sv-paper-card); box-shadow: 0 18px 40px -28px rgba(27, 26, 23, .35); }
.lx-plan-card--lead { border-color: var(--sv-pitch); box-shadow: 0 24px 48px -26px rgba(27, 26, 23, .45); }
.lx-plan-name { margin: 0 0 16px; font: 700 var(--sv-text-link)/1 var(--sv-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sv-pitch); }
.lx-plan-price { font: 800 var(--sv-text-display)/1 var(--sv-font-display); letter-spacing: -.03em; color: var(--sv-pitch); }
.lx-plan-price small { margin-left: 4px; font: 600 var(--sv-text-body-lg)/1 var(--sv-font-body); letter-spacing: 0; color: var(--sv-stone); }
.lx-plan-note { margin: 12px 0 24px; font-size: var(--sv-text-body-md); line-height: 1.5; color: var(--sv-stone); }
.lx-plan-points { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--sv-ash); list-style: none; }
.lx-plan-points li { position: relative; padding-left: 24px; font-size: var(--sv-text-body-md); line-height: 1.45; color: var(--sv-pitch); }
.lx-plan-points li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 12px; height: 7px; border-left: 2px solid var(--sv-volt); border-bottom: 2px solid var(--sv-volt); transform: rotate(-45deg); }
.lx-plan-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.lx-plan-more-chev { width: 16px; height: 16px; transition: transform .45s var(--lx-out); }
.lx-plan-more [aria-expanded="true"] .lx-plan-more-chev { transform: rotate(180deg); }
.lx-plan-table { margin-top: 48px; }
.lx-plan-table[hidden] { display: none; }
/* Volt focus rings fall under 3:1 on the paper band; use pitch here. */
.lx-plans .lx-btn:focus-visible { outline-color: var(--sv-pitch); }

/* ─── Finale: envelope ─────────────────────────────────────────────────── */

.lx-finale { position: relative; background: var(--sv-paper); }
.lx-finale-track { position: relative; height: 230vh; }
.lx-finale-sticky {
  position: sticky;
  top: var(--lx-nav-h);
  height: calc(100svh - var(--lx-nav-h));
  overflow: hidden;
}
.lx-env {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(640px, 84vw);
  aspect-ratio: 1.6;
  transform: translate3d(-50%, 30vh, 0);
  perspective: 1600px;
  will-change: transform;
}
.lx-env-back { position: absolute; inset: 0; z-index: 1; border-radius: 10px; background: #DCCDB1; box-shadow: 0 50px 90px -40px rgba(60, 40, 20, .6); }
.lx-env-front {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 10px;
  background: #EADFC9;
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -1px 0 rgba(60, 40, 20, .1);
}
.lx-env-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(60, 40, 20, .12) 50%, transparent calc(50% + 1px)) left bottom / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), rgba(60, 40, 20, .12) 50%, transparent calc(50% + 1px)) right bottom / 50% 100% no-repeat,
    var(--lx-grain);
}
.lx-env-address { position: absolute; left: 8%; bottom: 13%; display: flex; flex-direction: column; gap: 6px; }
.lx-env-address span { font: 700 11px/1 var(--sv-font-display); letter-spacing: .2em; color: #8A7B60; }
.lx-env-address b { font: 600 clamp(20px, 2.6vw, 30px)/1 var(--sv-font-hand); color: #3B3A36; }
.lx-env-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  height: 56%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.lx-env-flap::before,
.lx-env-flap::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
}
.lx-env-flap::before { background: #E3D6BD; filter: drop-shadow(0 8px 10px rgba(60, 40, 20, .2)); }
/* Inner face: the face flip and the flap's open rotation cancel out, so the
   triangle is drawn apex-up here to point away from the envelope once open. */
.lx-env-flap::after { background: #D2C2A3; transform: rotateX(180deg); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.lx-env-flap.is-open { z-index: 1; }
.lx-env-flap.is-open::after { filter: drop-shadow(0 -4px 8px rgba(60, 40, 20, .12)); }
.lx-env-seal {
  position: absolute;
  left: 50%;
  top: 86%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2683D, #C83E15);
  box-shadow: 0 4px 10px -3px rgba(120, 40, 10, .6), inset 0 -2px 4px rgba(0, 0, 0, .2);
}
.lx-env-seal svg { width: 52%; height: 52%; }
.lx-letter {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 92%;
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 48px) clamp(22px, 3vw, 32px);
  border-radius: 6px;
  background: #FCF9F3;
  box-shadow: 0 30px 60px -30px rgba(60, 40, 20, .5), inset 0 0 0 1px rgba(196, 184, 164, .45);
  transform: translate3d(-50%, 0, 0);
  will-change: transform, clip-path;
}
.lx-letter::after { content: ''; position: absolute; inset: 0; background-image: var(--lx-grain); mix-blend-mode: multiply; opacity: .7; border-radius: inherit; pointer-events: none; }
.lx-letter-title { margin: 0; font: 800 clamp(32px, 4.2vw, 56px)/.95 var(--sv-font-display); letter-spacing: -.04em; }
.lx-letter-script { position: relative; display: inline-block; margin: 4px 0 20px; font: 700 clamp(28px, 3.6vw, 46px)/1.1 var(--sv-font-script); color: var(--sv-volt); }
.lx-letter-marker { position: absolute; left: 8%; bottom: -8px; width: 70%; height: 14px; overflow: visible; }
.lx-env.is-out .lx-letter-marker path { transition: stroke-dashoffset .6s var(--sv-ease-draw) .25s; stroke-dashoffset: 0; }
.lx-letter-body { position: relative; z-index: 1; max-width: 520px; margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--sv-stone); }
.lx-inline-link { text-decoration: underline; text-decoration-color: rgba(236, 80, 34, .5); text-underline-offset: 3px; }
.lx-letter-ctas { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.lx-letter-login { font-size: 15px; color: var(--sv-stone); }
.lx-letter-sig { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed #DCD1BC; }
.lx-letter-sig span { font: 500 19px/1.25 var(--sv-font-hand); color: #57544D; }

/* ─── Footer ───────────────────────────────────────────────────────────── */

.lx-footer { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 40px 40px 26px; box-sizing: border-box; }
.lx-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; padding-top: 28px; border-top: 1px solid #D8CDB7; }
.lx-footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sv-pitch); }
.lx-footer-nav,
.lx-footer-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; font: 600 15px/1.2 var(--sv-font-body); }
.lx-footer-meta { margin-left: auto; }
.lx-footer-giant {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 40px 0 0;
  overflow: hidden;
  font: 600 clamp(88px, 22vw, 330px)/.82 var(--sv-font-display);
  letter-spacing: -.07em;
  color: var(--sv-pitch);
  user-select: none;
}
.lx-footer-giant span { display: inline-block; padding-bottom: .04em; transform: translateY(105%); transition: transform 1.1s var(--lx-out) calc(var(--i) * 55ms); }
.lx-footer-giant .lx-footer-dot { color: var(--sv-volt); }
.lx-footer.is-in .lx-footer-giant span { transform: none; }
.lx-footer-legal { margin-top: 18px; text-align: center; font: 500 13px/1.4 var(--sv-font-body); color: var(--sv-muted); }

/* ─── Global motion toggle ─────────────────────────────────────────────── */

.lx-motion-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 99px;
  background: rgba(252, 249, 243, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--sv-ash), 0 10px 24px -14px rgba(60, 40, 20, .5);
  color: var(--sv-stone);
  font: 600 13px/1 var(--sv-font-body);
  cursor: pointer;
  animation: lx-in .6s var(--lx-out) both;
}
.lx-motion-toggle svg { width: 12px; height: 12px; }
.lx-motion-toggle:hover { color: var(--sv-pitch); }
.lx-motion-toggle:focus-visible { outline: 2px solid var(--sv-volt); outline-offset: 2px; }
html.lx-paused *,
html.lx-paused *::before,
html.lx-paused *::after { animation-play-state: paused !important; }

/* ─── Sticky nav refinement ────────────────────────────────────────────── */

html.lx-scrolled .sv-nav-row.sv-nav-enter { box-shadow: 0 1px 0 var(--sv-ash), 0 12px 30px -24px rgba(60, 40, 20, .5); }
.sv-nav-row.sv-nav-enter { transition: box-shadow .3s var(--sv-ease); }

/* ─── Tablet ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .lx-hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .lx-hero-copy { max-width: 720px; }
  .lx-deck-float { width: min(100%, 520px); }
  .lx-journey-sticky { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; }
  .lx-roller { font-size: 90px; }
  .lx-tracking-grid,
  .lx-compare-top { grid-template-columns: 1fr; gap: 40px; }
}

/* ─── Journey stacks at ≤980px (the landing's named editorial exception):
 * two columns leave the chapter copy a sliver at tablet widths. ─────────── */

@media (max-width: 980px) {
  .lx-plan-cards { gap: 16px; }
  .lx-plan-card { padding: 28px 20px; }
  .lx-journey-sticky {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 22px;
    padding: 20px 32px 24px;
  }
  .lx-stage-wrap { order: -1; }
  .lx-stage { max-height: 54svh; width: auto; }
  .lx-journey-copy { grid-template-columns: 1fr; gap: 16px; max-width: 640px; }
  .lx-roller { display: none; }
  .lx-rail { flex-direction: row; gap: 8px; }
  .lx-rail-line { left: 7px; right: 7px; top: 6px; bottom: auto; width: auto; height: 2px; }
  .lx-rail-fill { transform-origin: left; transform: scaleX(var(--fill)); }
  .lx-rail-step { flex: 1; }
  .lx-rail-step:last-child { flex: none; }
  .lx-chapters { min-height: 210px; }
  .lx-chapter-title { font-size: clamp(26px, 4.4vw, 38px); }
}

/* ─── Mobile (single 720px breakpoint) ─────────────────────────────────── */

@media (max-width: 720px) {
  :root { --lx-nav-h: 72px; }
  .lx-wrap { padding: 0 20px; }
  .lx-h2 { font-size: clamp(34px, 9.6vw, 44px); }
  .lx-script { font-size: clamp(26px, 7.4vw, 32px); }
  .lx-lede { font-size: 16px; }

  .lx-hero { min-height: 0; padding: 30px 0 64px; }
  .lx-hero-inner { padding: 0 20px; gap: 6px; }
  .lx-hero .sv-hero-h1 { font-size: clamp(46px, 13.6vw, 62px); }
  .lx-hero-script { margin-bottom: 24px; font-size: clamp(40px, 11.6vw, 54px); }
  .lx-hero .sv-hero-lede { font-size: 17px; margin-bottom: 24px; }
  .lx-hero-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .lx-hero-ctas .lx-btn { padding: 0 14px; font-size: 15px; }
  .lx-hero-proof { gap: 8px 16px; font-size: 13px; }
  .lx-deck-float { width: 100%; padding: 12% 9% 2%; }
  .lx-deck-note { font-size: 17px; }
  .lx-scroll-cue { display: none; }

  .lx-marquee { padding: 6px 0 26px; }
  .lx-tape { padding: 11px 0; }
  .lx-tape-list li { gap: 16px; padding-right: 16px; font-size: 16px; }

  .lx-journey { padding-top: 46px; }
  .lx-journey-intro { padding: 0 20px 6px; }
  .lx-journey-track { height: 430vh; }
  .lx-journey-sticky { gap: 14px; padding: 12px 16px 16px; }
  .lx-stage { max-height: 52svh; border-radius: 16px; }
  .lx-chapters { min-height: 190px; }
  .lx-chapter-kicker { margin-bottom: 8px; font-size: 12px; }
  .lx-chapter-title { margin-bottom: 8px; font-size: 26px; }
  .lx-chapter-body { font-size: 15px; line-height: 1.5; }

  .lx-tracking { padding: 80px 0 72px; }
  .lx-board { padding: 20px 16px 18px; border-radius: 16px; }
  .lx-board-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lx-board-stat .lx-flaps { --fs: 19px; }
  .lx-board-thead,
  .lx-board-row { grid-template-columns: 1fr .9fr 1.5fr; gap: 8px; }
  /* Street names don't fit beside status at 320px; phones show piece, ZIP, status. */
  .lx-board-thead span:nth-child(3),
  .lx-board-row [data-col="street"] { display: none; }
  .lx-board-row .lx-flaps { --fs: 11px; }

  .lx-compare { padding: 80px 0; }
  .lx-compare-top { margin-bottom: 40px; }
  .lx-race { padding: 20px 16px 22px; }
  .lx-lane-label { flex-direction: column; gap: 3px; }
  .lx-lane-note { font-size: 15px; }

  .lx-integrations { padding: 80px 0 72px; }
  .lx-hub--wide { display: none; }
  .lx-hub--narrow { display: block; }
  .lx-chip { width: 154px; padding: 9px 11px; column-gap: 8px; }
  .lx-chip b { font-size: 13px; }
  .lx-chip span { font-size: 12px; }
  .lx-hub-core { width: 88px; height: 88px; border-radius: 24px; }

  .lx-plans.sv-plan-comparison-section { padding: 80px 0 70px; }
  .lx-plan-cards { grid-template-columns: 1fr; gap: 16px; }
  .lx-plan-card { padding: 24px; }
  .lx-plan-more .lx-btn { width: 100%; }

  .lx-finale-track { height: 210vh; }
  .lx-env { width: 92vw; }
  .lx-letter { width: 94%; padding: 22px 18px 18px; }
  .lx-letter-body { font-size: 15px; margin-bottom: 16px; }
  .lx-letter-sig { display: none; }
  .lx-letter-ctas .lx-btn { width: 100%; }

  .lx-footer { padding: 24px 20px 20px; }
  .lx-footer-meta { margin-left: 0; }
  .lx-motion-toggle { left: 10px; bottom: 10px; width: 34px; height: 34px; padding: 0; justify-content: center; opacity: .85; }
  .lx-motion-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 360px) {
  .lx-hero-ctas { grid-template-columns: 1fr; }
  .lx-hero-proof li:last-child { display: none; }
}

/* ─── Reduced motion: calm, complete end states ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lx *,
  .lx *::before,
  .lx *::after {
    animation: none !important;
    transition: none !important;
  }
  .lx-hero-script-text { -webkit-mask-image: none; mask-image: none; }
  .lx-hero-route-draw,
  .lx-hero-marker path,
  .lx-hero-noise path,
  .lx-letter-marker path,
  .lx-mark-draw path { stroke-dashoffset: 0 !important; }
  .lx-hero-copy,
  .lx-hero-stage,
  .lx-journey-intro,
  .lx-journey-sticky { transform: none !important; opacity: 1 !important; }
  .lx-compare-rows > * { opacity: 1 !important; transform: none !important; }
  .lx-footer-giant span { transform: none !important; }
  .lx-race .lx-lane-fill { width: var(--to); }
  .lx-race .lx-lane-token { left: max(6px, calc(var(--to) - 54px)); }
  .lx-race .lx-lane-note,
  .lx-race .lx-lane-flag { opacity: 1; transform: translateY(-50%) rotate(-8deg); }
  .lx-motion-toggle { display: none; }
}