/* =========================================================================
   Mango - Coming Soon teaser (superduper.xyz-inspired)

   Composition (z-index stack):
     0  Base dark surface
     1  Drifting gradient blobs (the "smoky aurora" backdrop)
     2  Film-grain noise
     3  Cursor spotlight glow
     5  Page chrome - header / centre cluster / accordion / footer
     100 Custom cursor (pointer SVG / xray dot)

   Cursor CSS variables, set on .LP root from JSX:
     --mx, --my = current cursor coords in px

   Light mode (mobile / touch / narrow viewport):
     - Custom cursor + xray dot hidden
     - Pixel-explosion canvas swapped for static DOM type (handled in JS)
     - Scramble animation on accordion off (handled in JS)
     - Spotlight scaled down; blobs + grain stay (cheap GPU work)
   ========================================================================= */

.LP {
  --mx: 50vw;
  --my: 50vh;
  --spot-radius: 320px;

  /* Motion tokens - the two expo curves superduper uses everywhere,
     plus a 3-step duration scale. Using these consistently is most
     of what makes their motion feel "of a piece" rather than a grab
     bag of one-off timings.
       --ease-out : settle-into-place, no overshoot (UI reveals)
       --ease-soft: gentle in-out (size/opacity tweens) */
  --ease-out: cubic-bezier(0.246, -0.005, 0, 0.995);
  --ease-soft: cubic-bezier(0.409, 0.001, 0.094, 0.983);
  --dur-1: 220ms;   /* hovers, small state flips */
  --dur-2: 380ms;   /* reveals, expands */
  --dur-3: 720ms;   /* large/elegant moves */

  /* Page edge inset - the even boundary every corner element sits on
     (logo, footer, accordion, left content). */
  --edge: clamp(20px, 3vw, 36px);

  position: relative;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(20, 184, 166, 0.07) 0%, transparent 60%),
    radial-gradient(80% 80% at 100% 100%, rgba(20, 184, 166, 0.06) 0%, transparent 60%),
    #03090c;
  color: #e6fcfa;
  font-family: var(--mk-font-body);

}
.LP.LP--light { cursor: auto; }

/* ── Layer 1: WebGL flow-noise shader (desktop background) ────── */
.LP-shader {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
}
/* The promo video source for the 'video' style. Kept full-screen and
   on-screen (so the browser keeps decoding frames) but sat at z-index
   0 BEHIND the opaque shader canvas, and near-invisible - it's never
   seen directly, only sampled into the shader as a texture. */
.LP-shader-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.001;
}

/* ── Video style: left-third hero layout ───────────────────────
   The video lives in the right third (composited inside the shader).
   The hero content (logo is already top-left) sits in the LEFT THIRD;
   the middle third is left clear for future content. So we left-align
   the content and reserve the right ~62% with padding. */
.LP--video .LP-heroSec {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.LP--video .LP-content {
  align-items: flex-start;
  text-align: left;
  /* CLEAN VERTICAL RHYTHM: ONE small gap B between strap, divider,
     subheading and buttons; the cluster centres, so the leftover
     breathing room splits equally above and below. */
  --heroB: 14px; /* FIXED: the cluster is a solid block */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
  /* Match the page edge inset so the strapline, subtitle, button and
     logo all share one left line. Reserve the right ~half for the
     video. */
  /* EXACTLY the header's edge inset - logo, strapline, subtitle and
     pills share one left line. (max-width/auto-margins unset: the 1420
     container centring was pushing the whole cluster off the edge.) */
  max-width: none;
  margin: 0;
  padding-left: clamp(20px, 2.5vw, 48px);
  padding-right: clamp(320px, 46vw, 900px);
}
.LP--video .LP-strapline-anchor {
  margin: 0;
  max-width: 100%;
}
.LP--video .LP-subtitle {
  font-family: var(--mk-font-display);
  font-weight: 400;
  text-align: left;
}
.LP--video .LP-subtitle-br { display: inline; }
.LP--video .LP-actions { margin-top: var(--heroB, 24px); }
.LP--video .LP-cta,
.LP--video .LP-waitform {
  margin: 0;
}

/* ── Layer 1: drifting gradient blobs (mobile fallback) ───────── */
.LP-blobs {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/* Parallax layer: shifts opposite to the cursor (--cx, --cy are
   set on the LP root as cursor offset from viewport centre in CSS
   px). The whole blob field "leans away" from the cursor, with a
   long ease-out so motion lags slightly and feels weighty rather
   than glued to the pointer. The blobs' own slow drift animations
   compose on top because each blob has its own transform. */
.LP-blobs-parallax {
  position: absolute;
  inset: 0;
  transform: translate3d(
    calc(var(--cx, 0px) * -0.1),
    calc(var(--cy, 0px) * -0.1),
    0
  );
  transition: transform 900ms var(--ease-soft);
  will-change: transform;
}
.LP-blob {
  position: absolute;
  width: 65vmax;
  height: 65vmax;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.42;
  mix-blend-mode: screen;
  will-change: transform;
}
.LP-blob--a {
  background: radial-gradient(circle, rgba(20, 184, 166, 0.55) 0%, rgba(20, 184, 166, 0) 65%);
  top: -25%;
  left: -20%;
  animation: lp-blob-a 26s ease-in-out infinite alternate;
}
.LP-blob--b {
  background: radial-gradient(circle, rgba(94, 234, 212, 0.45) 0%, rgba(94, 234, 212, 0) 65%);
  top: 5%;
  right: -25%;
  animation: lp-blob-b 32s ease-in-out infinite alternate;
}
.LP-blob--c {
  background: radial-gradient(circle, rgba(13, 148, 136, 0.5) 0%, rgba(13, 148, 136, 0) 65%);
  bottom: -30%;
  left: 10%;
  animation: lp-blob-c 38s ease-in-out infinite alternate;
}
.LP-blob--d {
  background: radial-gradient(circle, rgba(45, 212, 191, 0.4) 0%, rgba(45, 212, 191, 0) 65%);
  bottom: -10%;
  right: -5%;
  animation: lp-blob-d 30s ease-in-out infinite alternate;
}
@keyframes lp-blob-a {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(35vw, 25vh) scale(1.15) rotate(60deg); }
  100% { transform: translate(15vw, 50vh) scale(0.9)  rotate(-30deg); }
}
@keyframes lp-blob-b {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-30vw, 30vh) scale(0.85) rotate(-45deg); }
  100% { transform: translate(-15vw, 60vh) scale(1.1)  rotate(30deg); }
}
@keyframes lp-blob-c {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(40vw, -25vh) scale(1.2)  rotate(45deg); }
  100% { transform: translate(20vw, -50vh) scale(0.95) rotate(-20deg); }
}
@keyframes lp-blob-d {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-25vw, -30vh) scale(1.1)  rotate(-60deg); }
  100% { transform: translate(-40vw, -10vh) scale(0.9)  rotate(40deg); }
}

/* (The static dark cursor-void was removed - the WebGL shader now
   reacts to the pointer directly: the silk swirls toward it and a
   speed-driven teal bloom blooms at the cursor.) */

/* ── Layer 3: film grain ───────────────────────────────────────
   Tiled greyscale noise bitmap (generated by scripts/gen-landing-
   noise.mjs - ±70 around mid-grey for soft filmic grain), blended
   with mix-blend-mode: overlay. This is the superduper "refined"
   finish: the high-frequency texture dithers the smooth gradient so
   it reads as a continuous filmic fog rather than banded colour.
   Kept understated (opacity ~0.4) so it's felt, not seen as noise.
   Sits above the backdrop + cursor-void (z2) but below the
   strapline canvas (z4) and chrome (z5), so text stays crisp. */
.LP-grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("/landing-noise.png");
  background-size: 256px 256px;
  background-repeat: repeat;
}

/* ── Header: wordmark top-left ────────────────────────────────── */
.LP-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: var(--edge);
}
.LP-headerLogo {
  width: clamp(132px, 13vw, 180px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Layer 5: centre cluster ──────────────────────────────────── */
.LP-content {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 40px;
  animation: lp-fade-in 800ms var(--ease-out) both;
}
/* IMPORTANT: opacity-only - no transform. Any non-`none` transform
   on this element (including translateY(0)) would change the
   containing block for the position:fixed strapline canvas inside,
   so the canvas would be anchored to .LP-content (which sits ~100
   CSS px below the viewport top after the header) instead of the
   viewport - that's what was causing the explosion epicentre to
   appear well below the cursor. The fill-mode is `both` so the
   final opacity:1 state sticks. */
@keyframes lp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Strapline (desktop canvas).
   The CANVAS is a full-viewport overlay (LP-strapline-canvas) so
   particles can fly anywhere on the page. The ANCHOR (LP-strapline-
   anchor) is an in-flow placeholder that reserves vertical space in
   the centre stack and tells the canvas where to centre the text.
   Height is sized for the 4-line block where "EASIER" is ~2× taller
   than the other lines - total ≈ 5× a base line. */
.LP-strapline-anchor {
  position: relative;
  width: 100%;
  max-width: 720px;
  /* Scales with the monitor: the 460px cap was why 2K straplines
     stayed 1080p-sized (the four lines must fit this box). */
  height: clamp(280px, 44vh, 720px);
  margin: 0 auto;
  pointer-events: none;
}
.LP-strapline-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* Above the grain (3) but below page chrome (5), so flying pixels
     look like background motion against the form / header / accordion
     rather than overpainting them. */
  z-index: 4;
  pointer-events: none;
  /* The headline is drawn in one flat bright teal; difference blends
     it against the silk (result = |teal - silk|), a true lightness
     INVERSE - the text reads as a reverse gradient of the background. */
  mix-blend-mode: difference;
}
.LP-strapline-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Strapline (mobile / light mode) - plain DOM type stacked.
   Four lines with per-line font sizes chosen so each line ends up
   visually similar width. The last line ("EASIER") is much larger
   than the others - same block-stack feel as the canvas version. */
.LP-strapline-static {
  margin: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: rgba(255, 255, 255, 0.78);
}
/* Width-justified "square" block: every line is scaled to land at
   roughly the same WIDTH (font ∝ 1/line-length), so MANGO MAKES IT
   (longest) gets the smallest font and EASIER (shortest) the largest.
   nowrap keeps each phrase on one line; colour inherits the parent's
   soft white. */
.LP-strapline-static span { white-space: nowrap; }
/* Vintage pixel-grain overlay: the same film-grain noise tile, clipped
   to the glyphs via background-clip:text and softened by a translucent
   white veil on top - so the letters read as near-white with a subtle
   dithered/grainy texture (not a hard grid). `image-rendering: pixelated`
   keeps the grain crisp rather than blurred. `color` is the fallback for
   any browser without background-clip:text (solid fill, just no grain). */
.LP-strapline-static-l1,
.LP-strapline-static-l2,
.LP-strapline-static-l3,
.LP-strapline-static-l4 {
  color: rgba(255, 255, 255, 0.6);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    url("/landing-noise.png");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 80px 80px;
  image-rendering: pixelated;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.LP-strapline-static-l1 { font-size: clamp(1.6rem, 10.6vw, 3.3rem); } /* FOOD SERVICE   */
.LP-strapline-static-l2 { font-size: clamp(1.5rem, 10vw, 3.1rem); }   /* IS HARD GRAFT  */
.LP-strapline-static-l3 { font-size: clamp(1.35rem, 8.6vw, 2.7rem); } /* MANGO MAKES IT */
.LP-strapline-static-l4 { font-size: clamp(3.3rem, 22vw, 6.6rem); }   /* EASIER         */


.LP-subtitle {
  margin: 0;
  font-size: 28px; /* fixed with the block */
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.9);
  max-width: 1000px;
  text-wrap: balance;
}
/* Subtext line break - only on mobile (shown in the media query). */
.LP-subtitle-br { display: none; }

/* ── Waitlist: CTA pill + the multi-field form it opens ───────── */
.LP .LP-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 35px; /* matches the header pills */
  padding: 0 20px;
  border: 0 !important;
  border-radius: 999px;
  background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
  color: #fff !important;
  font: inherit;
  font-size: 14px; /* matches the header pills exactly */
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    filter var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .LP .LP-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.06); /* the fill is a gradient, so hover brightens it slightly */
  }
}
.LP .LP-cta:active { transform: translateY(0); }
.LP .LP-cta:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
  filter: none;
}
.LP .LP-cta svg { flex: none; }

/* ── Hero actions: brochure · demo · waitlist ─────────────────────
   One row that wraps. The two links use the .LP-cta pill geometry with
   their own fills, so hover, active and the mobile full-width rule all
   come for free. When the waitlist form opens the links unmount and the
   form takes the whole row. */
.LP-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.LP--video .LP-actions { justify-content: flex-start; }
.LP-actions .LP-waitform { width: 100%; }
.LP .LP-cta { text-decoration: none; }

/* Book a demo: solid white, teal type. */
.LP .LP-cta--clay {
  background: var(--mk-clay) !important;
  color: #241108 !important; /* clay pills carry near-black ink, site wide */
}
@media (hover: hover) {
  .LP .LP-cta--clay:hover { filter: none; background: var(--mk-clay-light) !important; }
}

/* Explore: the header's dark pill, restated for the hero. */
.LP .LP-cta--dark {
  background: var(--mk-dark) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
@media (hover: hover) {
  .LP .LP-cta--dark:hover { filter: none; background: var(--mk-dark-press) !important; }
}

/* Brochure: quiet glass pill so the three buttons read as a hierarchy
   rather than three competing fills. */
.LP .LP-cta--ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}
@media (hover: hover) {
  .LP .LP-cta--ghost:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    filter: none;
  }
}

/* The form. Fields rise in on a stagger when it opens. */
.LP-waitform {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.LP-waitform-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.LP-waitform-grid > *,
.LP-waitform-error,
.LP-waitform-actions {
  animation: lp-field-rise 520ms var(--ease-out) both;
}
.LP-waitform-grid > *:nth-child(1) { animation-delay: 60ms; }
.LP-waitform-grid > *:nth-child(2) { animation-delay: 120ms; }
.LP-waitform-grid > *:nth-child(3) { animation-delay: 180ms; }
.LP-waitform-grid > *:nth-child(4) { animation-delay: 240ms; }
.LP-waitform-grid > *:nth-child(5) { animation-delay: 300ms; }
.LP-waitform-grid > *:nth-child(6) { animation-delay: 360ms; }
.LP-waitform-grid > *:nth-child(7) { animation-delay: 420ms; }
.LP-waitform-actions { animation-delay: 480ms; }
@keyframes lp-field-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* First/Last name pair - side-by-side to match the apply form's grouping.
   flex:1 splits the row evenly; the fields keep their content-box height so
   they line up with the full-width fields below. */
.LP-waitform-row {
  display: flex;
  gap: 10px;
}
/* Now that .LP-field is border-box, flex:1 splits the row evenly and each half
   lines up with the full-width fields above/below - on every viewport. */
.LP .LP-waitform-row > .LP-field {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Glassy pill fields. */
.LP .LP-field {
  width: 100%;
  /* border-box so width:100% includes the 18px padding - keeps every field the
     same width AND stops them overflowing their container. (content-box +
     width:100% + padding overflowed by 38px; harmless full-width but it pushed
     the side-by-side First/Last row off-screen on mobile.) forms.css already
     forces border-box on type=text/email; this makes the untyped + tel fields
     match instead of fighting it. */
  box-sizing: border-box;
  height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  font: inherit;
  font-size: 0.95rem;
  /* Beat the global input[type="email"] rule in forms.css, which centres
     text - without this only the e-mail field reads centred. */
  text-align: left !important;
  outline: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out);
}
.LP .LP-field::placeholder { color: rgba(var(--mk-ondark-rgb), 0.56); }
.LP .LP-field:focus {
  border-color: rgba(94, 234, 212, 0.5) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.LP .LP-field:-webkit-autofill,
.LP .LP-field:-webkit-autofill:hover,
.LP .LP-field:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(8, 30, 32, 0.7) inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #fff;
}

/* Validation: red border on a missing/invalid field (cleared on edit). The
   order-volume container sets its own !important border, so the higher-
   specificity rule below is needed to give the tile the same red treatment. */
.LP .LP-field--error {
  border-color: #f87171 !important;
}
.LP .LP-field--vol.LP-field--error {
  border-color: #f87171 !important;
}

/* Order-volume group - a label + selectable teal pills. */
.LP .LP-field--vol {
  height: auto !important;
  /* 18px horizontal padding matches the text fields so this glass container
     lines up with them; the pills sit inside it (no longer floating). */
  padding: 12px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.LP-field-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--mk-ondark-rgb), 0.55);
}
.LP-vol-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
/* Narrow phones - drop the four order-volume chips to a 2×2 grid (each still
   spans its cell). ≥430px they stay four-across, equal width, responsive. */
@media (max-width: 430px) {
  .LP .LP-vol-pills {
    grid-template-columns: 1fr 1fr;
  }
}
.LP .LP-vol-pill {
  padding: 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px;
  /* Match the glass fill of the text fields above. */
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(var(--mk-ondark-rgb), 0.8) !important;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
.LP .LP-vol-pill.is-active {
  background: linear-gradient(180deg, #14b8a6, #0d9488) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.LP-turnstile {
  margin-top: 10px;
}

.LP-waitform-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
}
.LP .LP-waitform-back {
  border: 0 !important;
  background: transparent !important;
  color: rgba(var(--mk-ondark-rgb), 0.6) !important;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.LP .LP-waitform-back:hover { color: #fff !important; }
.LP-waitform-error {
  color: #fecaca;
  font-size: 0.85rem;
}

/* Honeypot - off-screen, zero-size, non-interactive. Kept in the DOM
   (not display:none) so naive bots still find and fill it. */
.LP-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* When the waitlist form is open, the hero fades + lifts away so the
   form takes the stage. The hero elements go position:absolute so
   they leave the flow (the form re-centres), then fade out in place;
   the strapline canvas is a separate top-level layer faded here too. */
.LP--form-open .LP-strapline-canvas {
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-out);
}
.LP--form-open .LP-strapline-anchor,
.LP--form-open .LP-strapline-static,
.LP--form-open .LP-subtitle {
  position: absolute;
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition:
    opacity 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}

.LP-success {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.4);
  color: #d2fbf3;
  font-size: 0.98rem;
  animation: lp-fade-in 400ms var(--ease-out) both;
}
.LP-success-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.22);
}

/* ── Layer 5: accordion (bottom-right) ────────────────────────── */
.LP-accordion {
  position: fixed;
  right: var(--edge);
  bottom: var(--edge);
  width: clamp(300px, 30vw, 420px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* High-specificity (.LP scope + !important on background) so the
   global button:hover styles in App.css can't bleed a light grey
   onto these tiles - that's what was washing out the white title. */
.LP .LP-acc-item {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  /* Background stays CONSTANT through rest / hover / open - that's
     superduper's restraint. Hover/open only paint a soft teal ring
     (box-shadow follows the rounded corners; outline wouldn't on
     older engines). The background !important still wins over the
     global App.css button:hover grey. */
  background: rgba(8, 30, 32, 0.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(94, 234, 212, 0);
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .LP .LP-acc-item:hover {
    border-color: rgba(94, 234, 212, 0.4);
    box-shadow: 0 0 0 1.5px rgba(94, 234, 212, 0.4);
  }
}
.LP .LP-acc-item.is-open {
  border-color: rgba(94, 234, 212, 0.5);
  box-shadow: 0 0 0 1.5px rgba(94, 234, 212, 0.32);
}
.LP .LP-acc-trigger,
.LP .LP-acc-trigger:hover,
.LP .LP-acc-trigger:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 62px;
  padding: 0 14px 0 22px;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: left;
  outline: none;
}
.LP-scramble {
  /* Tabular numerals + tiny letter-spacing so glyph swaps during the
     scramble decode don't shove trailing characters around. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}
/* Circle-dot badge at the row end morphs to a chevron on hover
   (and points up when the tile is open). superduper's move. */
.LP-acc-dot {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-1) var(--ease-out);
}
.LP-acc-dot-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fe9d6;
  transition:
    opacity var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.LP-acc-dot-chev {
  position: absolute;
  width: 9px;
  height: 9px;
  border-right: 2px solid #6fe9d6;
  border-bottom: 2px solid #6fe9d6;
  border-radius: 1px;
  opacity: 0;
  transform: translateY(-2px) rotate(45deg) scale(0.5); /* hidden down chevron */
  transition:
    opacity var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .LP .LP-acc-item:hover .LP-acc-dot {
    background: rgba(94, 234, 212, 0.2);
  }
  .LP .LP-acc-item:hover .LP-acc-dot-dot {
    opacity: 0;
    transform: scale(0.4);
  }
  .LP .LP-acc-item:hover .LP-acc-dot-chev {
    opacity: 1;
    transform: translateY(2px) rotate(225deg) scale(1); /* points UP */
  }
}
/* Open: chevron points DOWN (click to close). */
.LP .LP-acc-item.is-open .LP-acc-dot {
  background: rgba(94, 234, 212, 0.2);
}
.LP .LP-acc-item.is-open .LP-acc-dot-dot {
  opacity: 0;
  transform: scale(0.4);
}
.LP .LP-acc-item.is-open .LP-acc-dot-chev {
  opacity: 1;
  transform: translateY(-2px) rotate(45deg) scale(1);
}
.LP-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-out);
}
.LP-acc-item.is-open .LP-acc-body {
  grid-template-rows: 1fr;
}
.LP-acc-body-inner { overflow: hidden; }
.LP-acc-body-inner > * {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(var(--mk-ondark-rgb), 0.82);
  /* Content fades + slides in as the tile opens (the row-height grid
     transition handles the reveal; this rides on top with a small
     delay so the copy settles in after the box has started opening). */
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.LP-acc-item.is-open .LP-acc-body-inner > * {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 90ms;
}
.LP-acc-link {
  color: #5eead4;
  text-decoration: none;
  border-bottom: 1px solid rgba(94, 234, 212, 0.4);
}
.LP-acc-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}
/* Contact tile: copy + a white pill CTA with the send icon. */
.LP-acc-contact p {
  margin: 0 0 12px;
  padding: 0;
}
.LP .LP-acc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0 !important;
  border-radius: 999px;
  background: #fff !important;
  color: #0a2926 !important;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.LP .LP-acc-cta svg { flex: none; }
@media (hover: hover) {
  .LP .LP-acc-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  }
}

/* ── Layer 5: footer ──────────────────────────────────────────── */
.LP-footer {
  position: relative;
  z-index: 5;
  /* Content-width + left-aligned so the footer box doesn't stretch
     full width and sit invisibly over the bottom-right accordion tile
     (which was blocking its hover/click). */
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: var(--edge);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}
.LP-footer-sep {
  color: rgba(255, 255, 255, 0.3);
}
.LP .LP-footer-link {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}
.LP .LP-footer-link:hover {
  color: #5eead4;
}

/* ── Mobile background: portrait promo video ──────────────────── */
.LP-mobile-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  /* Brand teal gradient sits BEHIND the video and shows while it's
     still streaming in (the video is preload="metadata", so it no
     longer blocks first paint). Echoes the desktop silk palette so the
     load state is on-brand rather than a black box. */
  background:
    radial-gradient(80% 85% at 100% 0%, rgba(22, 138, 128, 0.5) 0%, transparent 58%),
    radial-gradient(85% 85% at 0% 100%, rgba(13, 73, 73, 0.55) 0%, transparent 60%),
    linear-gradient(165deg, #0c3f3d 0%, #072826 52%, #03090c 100%);
}
.LP-mobile-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the screen, crop overflow */
  object-position: center;
  display: block;
}
/* Soft scrim: darker at the top (logo) and bottom (footer/accordion),
   lighter through the middle so the video stays vivid behind the
   strapline (text shadows carry legibility there). */
.LP-mobile-bg-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 9, 12, 0.5) 0%,
    rgba(3, 9, 12, 0.16) 24%,
    rgba(3, 9, 12, 0.16) 66%,
    rgba(3, 9, 12, 0.56) 100%
  );
}

/* ── Mobile / coarse-pointer ───────────────────────────────────
   Layout adjustments. The JS .LP--light root class swaps the
   pixel-explosion canvas for static DOM text and short-circuits
   the cursor / scramble logic - heavy stuff is gated there. CSS
   here handles layout + cursor visibility. */
@media (max-width: 720px), (hover: none), (pointer: coarse) {
  /* Top-anchored stack (default flex-start): logo at the top, footer
     pinned to the page bottom - never vertically centred (that was
     clipping the accordion and dropping the logo down the page). */
  .LP { cursor: auto; }
  /* White UI now sits over the black-and-white promo video - drop a
     shadow behind every text element so it stays legible on bright
     frames (the strapline + logo use filter:drop-shadow because their
     fill is a clipped texture / image, not a solid colour). */
  .LP-strapline-static { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.62)); }
  .LP-subtitle { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.78); }
  .LP-footer { text-shadow: 0 1px 9px rgba(0, 0, 0, 0.82); }
  /* Logo anchored to the top with breathing room, centred. */
  .LP-header {
    justify-content: center;
    padding: 22px var(--edge) 0;
  }
  .LP-headerLogo {
    width: clamp(150px, 40vw, 200px);
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.7));
  }
  /* Cluster at natural height, top-aligned (no flex-grow) so the
     button-to-accordion gap stays tight. Extra top padding gives the
     logo-to-strapline a little more air. */
  .LP-content {
    flex: none;
    justify-content: flex-start;
    gap: 16px;
    padding: 28px 22px 16px;
  }
  /* More air above the divider (strapline to line) and below it (line to
     subtext). The flex gap (16px) is added on top of these margins. */
  /* Break the subtext onto two lines on mobile. */
  .LP-subtitle-br { display: inline; }
  /* Waitlist form full-width on phones; CTA + submit full-width.
     border-box here (desktop fields are content-box - see .LP-field)
     so width:100% absorbs the field padding and the controls keep the
     22px side margin. */
  .LP-waitform { max-width: 100%; }
  .LP .LP-field,
  .LP .LP-cta {
    box-sizing: border-box;
    width: 100%;
  }
  /* A touch more light-teal to dark-teal range on the CTA so the pill
     reads with a subtle vertical gradient on mobile. The white and ghost
     variants keep their own fills - this rule sits after them in the file,
     so it has to exclude them explicitly. */
  .LP .LP-cta:not(.LP-cta--clay):not(.LP-cta--dark):not(.LP-cta--ghost) {
    background: linear-gradient(180deg, var(--mk-teal-bright) 0%, #0d9488 100%) !important;
  }
  /* Same reasoning as the form controls below: the glass pill sits over a
     bright, moving video on phones, so it needs a darker frost to stay
     legible rather than the desktop's light wash. */
  .LP .LP-cta--ghost {
    background: rgba(6, 38, 36, 0.62) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
  }
  /* When the form is open, clear the accordion off-screen so the fields
     own the view and don't compete with it over the video. */
  .LP--form-open .LP-accordion { display: none; }
  /* Frost the form controls more (darker, less transparent) so they stay
     legible over the bright/changing video rather than letting it wash
     through - the desktop fields keep their lighter glass over the silk. */
  .LP .LP-field,
  .LP .LP-vol-pill {
    background: rgba(6, 20, 22, 0.46) !important;
  }
  .LP .LP-field:focus {
    background: rgba(8, 26, 28, 0.58) !important;
  }
  /* Centre the order-volume label + selector pills on mobile. */
  .LP-field-label { text-align: center; }
  .LP-vol-pills { justify-content: center; }
  /* Accordion in-flow, sharing the same 22px side bounds as the
     form fields. */
  .LP-accordion {
    position: static;
    width: auto;
    max-width: none;
    margin: 18px 22px 0;
  }
  /* Footer pinned to the bottom of the page, centred. */
  .LP-footer {
    align-self: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 18px var(--edge);
  }
  /* Open waitlist form is taller - let the page scroll so every field
     (and the logo at the top) stays reachable. */
  .LP--form-open { overflow-y: auto; }
}

/* ── Reduced-motion fallback ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .LP { cursor: auto; }
  .LP-blobs-parallax { transform: none; transition: none; }
  .LP-blob,
  .LP-content,
  .LP-success {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Marketing home v2: dark-teal gradient nav, LIGHT scrolling sections,
   dark-teal gradient footer. The hero above stays the original dark
   silk composition; the page brightens the moment you scroll. The nav,
   cards, CTA band and footer MIRROR public/site/site.css so moving
   between the home and the static pages never jumps.
   ═══════════════════════════════════════════════════════════════════ */

/* Serif-italic accent word inside section headlines (Instrument Serif). */
.LP-accent {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0f766e;
}

/* ── Hero wrapper + scroll cue ─────────────────────────────────── */
.LP-heroSec {
  position: relative;
  height: calc(100dvh - 64px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.LP-scrollcue {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center; /* the animated line centres over the word */
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--mk-ondark-rgb), 0.56);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-soft);
}
.LP-scrollcue-line {
  width: 1px;
  height: 26px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  animation: lp-cue 1.8s var(--ease-soft) infinite;
}
@keyframes lp-cue {
  0% { transform: scaleY(0.3); transform-origin: top; opacity: 0.3; }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.2; }
}
.LP--heropassed .LP-scrollcue,
.LP--form-open .LP-scrollcue { opacity: 0; }

/* The strapline canvas draws at FIXED viewport coords - fade it away as
   the hero scrolls off so the type never "sticks" over the sections. */
/* (The old binary heropassed fade is retired - the static home fades the
   strapline PROPORTIONALLY with scroll via --strap-fade, set per frame.) */

/* ── Below the fold: LIGHT body over the fixed dark backdrop ───── */
.LP-body {
  position: relative;
  z-index: 5;
  background: #f6f8f8;
  color: #0c2b28;
  border-top: 1px solid rgba(45, 212, 191, 0.25);
}
/* Faint teal grid texture, matching the static pages. */
.LP-body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 38% at 10% 0%, rgba(20, 184, 166, 0.06) 0%, transparent 65%),
    radial-gradient(45% 34% at 96% 18%, rgba(20, 184, 166, 0.05) 0%, transparent 65%),
    radial-gradient(50% 30% at 30% 78%, rgba(20, 184, 166, 0.04) 0%, transparent 65%);
}
.LP-body > * { position: relative; z-index: 1; }

.LP-sec { padding: clamp(56px, 8vw, 108px) var(--edge); }
.LP-sec--alt { background: rgba(15, 118, 110, 0.045); }
.LP-sec-inner { max-width: 1420px; margin: 0 auto; }
.LP-sec-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0f766e;
}
.LP-sec-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
}
.LP-sec-h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: #0c2b28;
}
.LP-sec-muted { color: rgba(12, 43, 40, 0.42); }
.LP-sec-lede {
  margin: 0;
  max-width: 700px;
  font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.65;
  color: #44605c;
}
.LP-sec-points { margin-top: 28px; display: grid; gap: 9px; max-width: 700px; }
.LP-sec-points p { margin: 0; color: #44605c; font-size: 15.5px; line-height: 1.6; }
.LP-sec-points strong { color: #0c2b28; font-weight: 700; }

.LP-sec-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.LP-sec-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(12, 43, 40, 0.07);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 10px 30px -18px rgba(12, 43, 40, 0.28);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-soft),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-soft);
}
.LP-sec-card:hover {
  border-color: rgba(20, 184, 166, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(12, 43, 40, 0.35);
}
.LP-sec-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #0c2b28; }
.LP-sec-card p { margin: 0; font-size: 14px; line-height: 1.55; color: #44605c; }
.LP-sec-more { margin-top: 30px; }

/* Ghost pill on the light body */
.LP-body .LP-cta--ghost {
  background: transparent !important;
  color: var(--mk-dark) !important;
  border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(15, 118, 110, 0.35);
}
.LP-body .LP-cta--ghost:hover {
  background: rgba(20, 184, 166, 0.08) !important;
  box-shadow: inset 0 0 0 1.5px rgba(15, 118, 110, 0.55);
}

.LP-sec-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
.LP-sec-split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.LP-sec-split--flip > div { order: 2; }
.LP-sec-split--flip > .LP-sec-shot { order: 1; }
.LP-sec-shot { display: block; }
.LP-sec-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(12, 43, 40, 0.1);
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(12, 43, 40, 0.38);
  transition: transform var(--dur-2) var(--ease-out);
}
.LP-sec-shot:hover img { transform: translateY(-3px); }
.LP-sec-logos { display: flex; align-items: center; gap: 26px; margin: 24px 0 4px; flex-wrap: wrap; }
.LP-sec-logos img { height: 26px; width: auto; }

/* CTA band - the dark-teal gradient moment, mirroring MK-ctaband. */
.LP-sec--cta { padding: 0 var(--edge); margin: clamp(44px, 6vw, 92px) 0; }
.LP-sec--cta .LP-sec-inner {
  padding: clamp(38px, 5vw, 68px);
  border-radius: 24px;
  background:
    radial-gradient(120% 180% at 12% 0%, rgba(45, 212, 191, 0.22) 0%, transparent 55%),
    linear-gradient(120deg, #06302c 0%, #0a4540 55%, #0e574f 100%);
  text-align: center;
  box-shadow: 0 30px 70px -35px rgba(6, 48, 44, 0.7);
}
.LP-sec--cta .LP-sec-h2 { color: #ffffff; }
.LP-sec--cta .LP-accent { color: #7ef0dd; }
.LP-sec--cta .LP-sec-lede { margin: 0 auto; color: rgba(var(--mk-ondark-rgb), 0.75); }
.LP-sec--cta .LP-cta--ghost {
  background: transparent !important;
  color: #e6fcfa !important;
  box-shadow: inset 0 0 0 1.5px rgba(var(--mk-ondark-rgb), 0.35);
}
.LP-sec--cta .LP-cta--ghost:hover {
  background: rgba(var(--mk-ondark-rgb), 0.08) !important;
  box-shadow: inset 0 0 0 1.5px rgba(var(--mk-ondark-rgb), 0.6);
}
.LP-sec-ctarow {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Scroll-in reveals (matching the static pages) ─────────────── */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-out);
}
.rv.rv-in { opacity: 1; transform: none; }
.LP-sec-grid .rv:nth-child(3n + 2) { transition-delay: 70ms; }
.LP-sec-grid .rv:nth-child(3n + 3) { transition-delay: 140ms; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}




/* ═══════════════════════════════════════════════════════════════
   Shell integration + cursor scoping (v4)
   The header/footer come from public/site/shell.css (shared with the
   static pages, loaded app-wide by index.html). The weighted pointer and
   the invert dot are CONTENT cursors: over the chrome (header + footer)
   the custom cursor retires - cursorMode "chrome" from the mouseover
   handler - and the shell's own cursor values (auto / pointer) apply.
   ═══════════════════════════════════════════════════════════════ */

/* Hero content hugs the header's edge line - full-width chrome now
   (the old 1420 container centring pushed the strapline off the edge). */
.LP--video .LP-content { width: 100%; }

/* Sticky shell header paints above the fixed hero canvases; the footer
   sits in the page flow above them. */
.LP .MK-header { z-index: 60; }
.LP .MK-footer { position: relative; z-index: 5; }

/* Section stacking on small screens (the split rows). */
@media (max-width: 900px) {
  .LP-sec-split, .LP-sec-split--flip { grid-template-columns: 1fr; }
  .LP-sec-split--flip > div { order: 1; }
  .LP-sec-split--flip > .LP-sec-shot { order: 2; }
}

/* ═══════════════════════════════════════════════════════════════════
   Static-home additions (public/home.html + /site/home.js)
   The markup ships BOTH render paths (desktop canvas hero + mobile
   video hero); home.js decides once per load and these gates show the
   right one. The strapline fade is JS-driven via --strap-fade so it
   tracks scroll continuously instead of stepping.
   ═══════════════════════════════════════════════════════════════════ */
.LP:not(.LP--light) .LP-mobile-bg { display: none; }
.LP:not(.LP--light) .LP-strapline-static { display: none; }
.LP--light .LP-shader,
.LP--light .LP-shader-video,
.LP--light .LP-strapline-canvas,
.LP--light .LP-strapline-anchor { display: none; }

.LP-strapline-canvas {
  opacity: var(--strap-fade, 1);
  will-change: transform, opacity;
}
.LP--form-open .LP-strapline-canvas { opacity: 0 !important; }

/* Hero pills step aside when the form opens (the React version unmounted
   them; the static markup hides them). */
.LP--form-open .LP-actions > .LP-cta--ghost,
.LP--form-open .LP-wl-open { display: none; }

/* Feature-card icons (deck lucide set). */
.LP-cardicon {
  display: inline-flex;
  color: #0f766e;
  margin-bottom: 12px;
}
.LP-cardicon svg { display: block; }

/* Static page: the hidden attribute must beat class display values
   (.LP-waitform is display:flex, .LP-success inline-flex). */
.LP [hidden] { display: none !important; }

/* Entry choreography: the hero engines FADE in rather than popping.
   The root ships --strap-fade:0 inline; home.js's first loop frame sets
   the real value, and the short linear transition doubles as a gentle
   smoother for the scroll fade (too short to feel laggy). The shader
   canvas stays transparent (dark base gradient behind it) until its
   first WebGL frame lands, then fades up. */
.LP-strapline-canvas { transition: opacity 180ms linear; }
.LP-shader { opacity: 0; transition: opacity 350ms ease; }
.LP--shader-live .LP-shader { opacity: 1; }

/* Warm arrivals (returning within the session): the entrance is
   theatre for the FIRST visit only. On repeats the hero content is
   fully visible in the first frame and the canvases bloom quickly,
   so navigating back to the home feels instant. */
.LP--warm .LP-content { animation-duration: 0s; }
.LP--warm .LP-shader { transition-duration: 140ms; }
.LP--warm .LP-strapline-canvas { transition-duration: 80ms; }

/* Scroll cue: always on top, bright white, a touch larger. */
.LP-scrollcue { z-index: 40; font-size: 12.5px; gap: 7px; color: #ffffff; }
.LP-scrollcue-line {
  width: 1.5px;
  height: 32px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

/* The custom weighted pointer now runs over the chrome too (the invert
   dot stays content-only), so the chrome must not ALSO show the system
   cursor. Desktop hero mode only; static pages keep system cursors. */
.LP--video .MK-header, .LP--video .MK-header *,
.LP--video .MK-footer, .LP--video .MK-footer *,


/* Display headings in Bricolage Grotesque (body stays Inter). */
.LP-sec-h2 { font-family: var(--mk-font-display); }

/* ── Palette weave: teal var(--mk-teal) / deep var(--mk-dark) / plum ink var(--mk-ink-body) ── */
.LP-body { color: var(--mk-ink-body); }
.LP-sec-h2 { color: var(--mk-dark); }
.LP-accent { color: var(--mk-teal); }
.LP-sec-kicker { color: var(--mk-teal); }
.LP-cardicon { color: var(--mk-teal); }
.LP-sec-card h3 { color: var(--mk-dark); }
.LP-sec-card p { color: var(--mk-ink-body); }
.LP-sec-lede { color: var(--mk-ink-body); }
.LP-sec--cta { background: var(--mk-dark); }

/* Palette buttons on the hero: Book a Demo = deep teal, Brochure =
   pure white outline ghost, Join Mango stays the white pill. */
.LP .LP-cta:not(.LP-cta--clay):not(.LP-cta--dark):not(.LP-cta--ghost) {
  background: var(--mk-dark) !important;
  color: #ffffff !important;
}
.LP .LP-cta:not(.LP-cta--clay):not(.LP-cta--dark):not(.LP-cta--ghost):hover {
  background: #1f4a47 !important;
}
.LP .LP-cta--ghost {
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85) !important;
}
.LP .LP-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}