/* ============================================================================
   NEANDER — LANDING PAGE V1  (Figma: "UI: Landing Page 1", node 21:709)
   ----------------------------------------------------------------------------
   A faithful, token-driven port of the Figma design system used across the
   landing page. Everything here is built from REUSABLE, class-based components
   ("build once, reuse everywhere") consuming the Figma-exact token layer below.

   Token naming mirrors the Figma design-system variables 1:1 so the mapping
   from design → code is direct and auditable:
       --text-strong-950, --text-sub-600, --bg-weak-50, --primary-base, …

   Canvas model (from Figma): page = 1600px, content column = 1224px,
   side gutter = 188px  →  1224 + 188·2 = 1600.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS  (Figma design-system variables, Light mode)
   ========================================================================== */
.lp,
.lp-nav {
  /* --- Font ------------------------------------------------------------- */
  --lp-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Inter", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  /* The design sets headings/labels in SF Pro but body copy in Inter
     (style "Paragraph/Medium"), so paragraphs get their own stack. */
  --lp-font-paragraph: "Inter", -apple-system, BlinkMacSystemFont, system-ui,
             "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Color · text ----------------------------------------------------- */
  --text-strong-950: #171717;   /* headings, primary text            */
  --text-sub-600:    #5c5c5c;   /* secondary / body                  */
  --text-soft-400:   #a3a3a3;   /* tertiary / captions  (Figma text/soft-400) */
  --text-disabled-300:#d1d1d1;  /* pending step numbers (text/disabled-300)   */
  --text-white-0:    #ffffff;

  /* --- Color · background ----------------------------------------------- */
  --bg-white-0:   #ffffff;
  --bg-weak-50:   #f7f7f7;      /* subtle chips / wells              */
  --bg-soft-100:  #f0f0f0;
  --bg-strong-950:#171717;      /* dark (primary button base)        */

  /* --- Color · stroke --------------------------------------------------- */
  --stroke-soft-200:  #ebebeb;  /* card / divider hairline (Figma stroke/soft-200) */
  --stroke-sub-300:   #dcdcdc;
  --stroke-white-0:   #ffffff;
  --linear-12:        rgba(0, 0, 0, 0.08);  /* fancy-button edge      */

  /* --- Color · primary (pink accent) ------------------------------------ */
  /* Remapped to the blue "information" family (Figma 21:709 revision) */
  --primary-base:    #335cff;   /* eyebrow dot, active steps, rings  */
  --primary-darker:  #122368;
  --primary-alpha-10:rgba(51, 92, 255, 0.10);
  --primary-alpha-16:rgba(51, 92, 255, 0.16);

  /* --- Color · accent theme (Figma state/information family) ------------- */
  --accent-darker:  #122368;   /* deep blue            (information/dark)    */
  --accent-light:   #c0d5ff;   /* CTA Λ motif          (information/light)   */
  --accent-lighter: #ebf1ff;   /* CTA banner fill      (information/lighter) */
  --blue-darker:    #1f3bad;   /* CTA heading          (theme/blue/darker)   */
  --blue-dark:      #2547d0;   /* CTA button           (theme/blue/dark)     */

  /* --- Color · state accents (Figma state/*) — feature-card icon tints --- */
  --state-highlighted: #335cff;   /* blue   — badge dot, deployments   */
  --state-warning:     #fa7319;   /* orange — code generation          */
  --state-error:       #fb3748;   /* red    — code reviews             */
  --state-information: #335cff;   /* blue   — debugging agents         */
  --state-feature:     #7d52f4;   /* violet — multi-repo orchestration */

  /* --- Type scale (SF Pro) · size / line-height / weight / tracking ------ */
  --h1-size: 56px;  --h1-lh: 64px;  --h1-ls: -0.56px;   /* Landing Title/H1 */
  --h2-size: 48px;  --h2-lh: 56px;  --h2-ls: -0.48px;   /* Landing Title/H2 */
  --h3-size: 40px;  --h3-lh: 48px;  --h3-ls: -0.4px;    /* Landing Title/H3 */
  --title-size: 20px; --title-lh: 28px; --title-ls: -0.2px;  /* card title */
  --large-size: 18px; --large-lh: 24px; --large-ls: -0.27px; /* Bold/Large  */
  --body-size: 16px; --body-lh: 24px; --body-ls: -0.176px;   /* Regular/Med */
  --small-size: 14px; --small-lh: 20px; --small-ls: -0.084px;/* Bold/Small  */
  --label-size: 13px; --label-lh: 18px; --label-ls: -0.078px;

  /* NOTE: the design uses SF Pro weight 510, but browsers don't treat
     -apple-system as a variable font, so font-weight:510 rounds UP to the
     next face (600 semibold) and everything looks too bold. 500 renders true
     SF Pro Medium — visually the same as the design's 510, without the round-up. */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;

  /* --- Spacing (design uses an 8/4 grid; key values seen in Figma) ------- */
  --gutter: 188px;     /* page side gutter @1600            */
  --content-w: 1224px; /* content column                    */
  --radius-pill: 9px;
  --radius-badge: 10px;
  --radius-btn: 12px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;   /* footer card  */
  --radius-3xl: 48px;   /* CTA banner   */

  /* --- Elevation -------------------------------------------------------- */
  --shadow-pill:  0 3px 3px -1.5px rgba(23, 23, 23, 0.06);
  /* Figma "Badge" / "Icon" elevations: two soft drops + a hairline ring. */
  --shadow-badge: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
                  0 1px 1px -0.5px rgba(23, 23, 23, 0.04),
                  0 0 0 1px var(--stroke-soft-200);
  --shadow-icon:  0 3px 3px -1.5px rgba(23, 23, 23, 0.06),
                  0 1px 1px -0.5px rgba(23, 23, 23, 0.06),
                  0 0 0 1px rgba(23, 23, 23, 0.02);
  --shadow-btn:   0 1px 2px 0 rgba(27, 28, 29, 0.24),
                  inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
  --shadow-card:  0 1px 2px 0 rgba(23, 23, 23, 0.04);
  --shadow-float: 0 12px 32px -8px rgba(23, 23, 23, 0.12),
                  0 4px 12px -4px rgba(23, 23, 23, 0.08);
  --shadow-media: 0 32px 64px -24px rgba(23, 23, 23, 0.22),
                  0 8px 24px -12px rgba(23, 23, 23, 0.10);
}

/* ==========================================================================
   2 · PAGE SHELL & LAYOUT PRIMITIVES
   ========================================================================== */
/* Anchor navigation glides instead of jumping. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Scroll reveal: the script tags targets with .lp-reveal (so nothing is
   hidden when JS is off) and flips .is-inview as they enter the viewport.
   Hidden state exists only when the visitor allows motion. */
@media (prefers-reduced-motion: no-preference) {
  .lp-reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
  }
  .lp-reveal.is-inview { opacity: 1; transform: translateY(0); }
}
.lp {
  font-family: var(--lp-font);
  color: var(--text-strong-950);
  background: var(--bg-white-0);
  font-feature-settings: "ss11" on, "liga" on, "calt" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Centered content column. At ≥1600 the residual space = 188px gutters. */
/* --content-w is the CONTENT box (1600 − 2×188), so the 24px small-screen
   gutter has to sit outside it — otherwise the column comes up 48px short. */
.lp-container {
  width: 100%;
  max-width: calc(var(--content-w) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* A full-bleed section: white band, vertical rhythm, centered column. */
.lp-section {
  width: 100%;
  background: var(--bg-white-0);
  padding-block: 96px;   /* default; sections override */
}
.lp-section__inner {
  width: 100%;
  max-width: calc(var(--content-w) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.lp-section--left .lp-section__inner { align-items: flex-start; }

/* ==========================================================================
   3 · TYPOGRAPHY COMPONENTS  (reusable text roles)
   ========================================================================== */
.lp-h1 {
  font-size: var(--h1-size); line-height: var(--h1-lh);
  font-weight: var(--w-medium); letter-spacing: var(--h1-ls);
  color: var(--text-strong-950);
  font-feature-settings: "liga" off, "calt" off;
}
.lp-h2 {
  font-size: var(--h2-size); line-height: var(--h2-lh);
  font-weight: var(--w-medium); letter-spacing: var(--h2-ls);
  color: var(--text-strong-950);
  font-feature-settings: "liga" off, "calt" off;
}
.lp-h3 {
  font-size: var(--h3-size); line-height: var(--h3-lh);
  font-weight: var(--w-medium); letter-spacing: var(--h3-ls);
  color: var(--text-strong-950);
}
.lp-lead {
  font-family: var(--lp-font-paragraph);
  font-size: var(--body-size); line-height: var(--body-lh);
  font-weight: var(--w-regular); letter-spacing: var(--body-ls);
  color: var(--text-sub-600);
}

/* Section header block: eyebrow + heading + optional lead. */
.lp-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 720px; }
.lp-head--left { align-items: flex-start; text-align: left; }
.lp-head--tight { gap: 12px; max-width: none; }   /* Figma "Title" block */
/* Figma nests badge+heading (gap 12) inside the header (gap 16 to the lead). */
.lp-head__title { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lp-head--left .lp-head__title { align-items: flex-start; }
.lp-head__lead { max-width: 528px; }

/* ==========================================================================
   4 · EYEBROW PILL  (Badge [Landing]) — pink dot + label
   ========================================================================== */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px 4px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-white-0);
  box-shadow: var(--shadow-badge);
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-sub-600);
  white-space: nowrap;
}
/* Figma ships the dot as an 8px circle centred in a 16px icon frame, so the
   4px inline margin reproduces that frame's padding without a wrapper. */
.lp-eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 999px; flex: none;
  margin-inline: 4px;
  background: var(--state-highlighted);
}

/* ==========================================================================
   5 · BUTTONS  (Fancy Buttons component)
   ------------------------------------------------------------------------
   .lp-btn                — base
   .lp-btn--primary       — fancy/neutral: dark gradient + gloss + edge
   .lp-btn--pink          — fancy/primary: pink gradient
   .lp-btn--ghost         — light/outline
   ========================================================================== */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.lp-btn:active { transform: translateY(0.5px); }
.lp-btn__icon { width: 16px; height: 16px; flex: none; }

.lp-btn--primary {
  color: var(--text-white-0);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 40%),
    var(--bg-strong-950);
  border: 1px solid var(--linear-12);
  box-shadow: var(--shadow-btn);
}
.lp-btn--primary:hover {
  filter: brightness(1.22);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(23, 23, 23, 0.35), var(--shadow-btn);
}
.lp-btn--primary:active { transform: translateY(0); }

.lp-btn--pink {
  color: var(--text-white-0);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 42%),
    var(--primary-base);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px 0 rgba(120, 20, 70, 0.24),
              inset 0 1px 0 0 rgba(255,255,255,0.24);
}
.lp-btn--pink:hover { filter: brightness(1.06); }

.lp-btn--ghost {
  color: var(--text-strong-950);
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  box-shadow: var(--shadow-card);
}
.lp-btn--ghost:hover { background: var(--bg-weak-50); }

.lp-btn--lg { padding: 12px 18px; font-size: var(--body-size); line-height: 22px; border-radius: 14px; }

/* Plain text link button (nav) */
.lp-linkbtn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-sub-600); padding: 6px 4px;
  transition: color .12s ease;
}
.lp-linkbtn:hover { color: var(--text-strong-950); }
.lp-linkbtn__chev { width: 14px; height: 14px; opacity: .7; }

/* ==========================================================================
   6 · NAVIGATION  (component: Navigation — brand · links · actions)
   ========================================================================== */
/* Anchor targets clear the sticky bar instead of hiding under it. */
.lp-section[id], .lp-hero[id] { scroll-margin-top: 88px; }
.lp-nav {
  position: sticky; top: 0; z-index: 200;
  width: 100%;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  font-family: var(--lp-font);
}
.lp-nav__inner {
  width: 100%;
  padding: 14px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* Brand alone on the left; links and actions group on the RIGHT. */
.lp-nav__right { display: flex; align-items: center; gap: 32px; }
.lp-brand {
  /* One knob drives the whole lockup. The window carries ~19% slack past the
     wordmark, and the Λ glyph sits at 38/132 of the artwork and is 18/132
     wide — expressing those as ratios keeps the collapse geometry exact at
     any size instead of needing three numbers re-derived by hand. */
  --lp-brand-logo-width: 112px;
  --lp-brand-box:        calc(var(--lp-brand-logo-width) * 1.18939);
  --lp-brand-mark-shift: calc(var(--lp-brand-logo-width) * -0.28788);
  --lp-brand-mark-width: calc(var(--lp-brand-logo-width) * 0.13636);
  display: inline-flex; align-items: center; gap: 8px;
  width: var(--lp-brand-box); height: 28px;
}
.lp-brand__mark { width: 26px; height: 26px; }
.lp-brand__word {
  font-size: 17px; font-weight: var(--w-semibold); letter-spacing: -0.2px;
  color: var(--text-strong-950);
}
/* Scroll-linked identity: the visual collapses while the brand hit area and
   surrounding navigation remain stable.
   ONE wordmark glides left inside the clipping window until only the Λ glyph
   remains — a single continuous motion (the Anthropic-navbar treatment).
   The old version cross-faded two copies of the same artwork at different
   offsets, which read as a ghosted two-step blink. The duplicate mark <img>
   is kept in the markup for safety but never shown. */
.lp-brand__identity {
  position: relative; display: block; overflow: hidden;
  width: var(--lp-brand-box); height: 100%; flex: none;
  /* Width (the clip) and the glide share one clock so the letters slide out
     exactly as the window closes over them. */
  transition: width var(--dur-slower) var(--ease-out-expo);
}
/* Soft edges ONLY while the logo is in motion, so letters dissolve through
   the edges instead of hard-cutting. The ramps are percentages, so they
   shrink along with the window and are already tiny by the time it settles;
   the mask is then dropped outright, leaving both resting states — full
   wordmark and bare Λ — perfectly crisp with no ghosted neighbours. */
.lp-nav[data-logo-animating="true"] .lp-brand__identity {
  /* min() keeps the ramp small in absolute terms: ~8px on the wide wordmark
     and ~12% of the narrow mark, so it stays proportionate across the glide.
     Only the RIGHT edge feathers by default — that is the edge the window
     sweeps across the letters. The wordmark is flush against the left edge,
     so a left ramp would sit on the leading N rather than on a letter in
     motion: expanding, the N would park half-faded for the whole transition
     and then snap solid. */
  --lp-brand-ramp: min(8px, 12%);
  -webkit-mask-image: linear-gradient(to right,
      #000 calc(100% - var(--lp-brand-ramp)), transparent);
          mask-image: linear-gradient(to right,
      #000 calc(100% - var(--lp-brand-ramp)), transparent);
}
/* Collapsing (and while compact): the artwork slides out under the left edge,
   so those letters ARE in motion there and want the same feather. */
.lp-nav[data-logo-animating="true"][data-logo-compact="true"] .lp-brand__identity {
  -webkit-mask-image: linear-gradient(to right,
      transparent, #000 var(--lp-brand-ramp),
      #000 calc(100% - var(--lp-brand-ramp)), transparent);
          mask-image: linear-gradient(to right,
      transparent, #000 var(--lp-brand-ramp),
      #000 calc(100% - var(--lp-brand-ramp)), transparent);
}
.lp-brand__logo {
  position: absolute; left: 0; top: 50%; display: block;
  max-width: none;
  transform-origin: left center;
  will-change: transform;
  transition: transform var(--dur-slower) var(--ease-out-expo);
}
.lp-brand__logo--wordmark {
  width: var(--lp-brand-logo-width); height: auto;
  transform: translateY(-50%);
}
.lp-brand__logo--mark { display: none; }
.lp-nav[data-logo-compact="true"] .lp-brand__identity { width: var(--lp-brand-mark-width); }
.lp-nav[data-logo-compact="true"] .lp-brand__logo--wordmark {
  transform: translate(var(--lp-brand-mark-shift), -50%);
}
@media (prefers-reduced-motion: reduce) {
  .lp-brand__identity,
  .lp-brand__logo { transition: none; }
}

.lp-nav__links { display: flex; align-items: center; gap: 28px; }
.lp-navlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; line-height: 20px;
  font-weight: var(--w-medium); letter-spacing: -0.1px;
  color: var(--text-strong-950);
  transition: color .12s ease;
}
.lp-navlink:hover { color: var(--text-sub-600); }
.lp-nav__badge {
  font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #4d6dff;
  background: #eef1ff; padding: 3px 6px; border-radius: 5px;
}
.lp-nav__actions { display: flex; align-items: center; gap: 10px; }
.lp-btn--nav { padding: 9px 14px; }
.lp-nav__menu-toggle {
  width: 44px; height: 44px; flex: none;
  display: none; place-items: center;
  color: var(--text-strong-950);
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-card);
}
.lp-nav__menu-icon {
  position: relative; width: 18px; height: 14px; display: block;
}
.lp-nav__menu-icon::before,
.lp-nav__menu-icon::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; border-radius: 999px;
  background: currentColor;
  transition: top .16s ease, transform .16s ease;
}
.lp-nav__menu-icon::before { top: 3px; }
.lp-nav__menu-icon::after { top: 9px; }
.lp-nav__menu-toggle[aria-expanded="true"] .lp-nav__menu-icon::before {
  top: 6px; transform: rotate(45deg);
}
.lp-nav__menu-toggle[aria-expanded="true"] .lp-nav__menu-icon::after {
  top: 6px; transform: rotate(-45deg);
}

/* ==========================================================================
   7 · HERO  (component: Hero — badge · title · sub · CTA · media)
   ========================================================================== */
.lp-hero { position: relative; padding-block: 56px 0; overflow: hidden; }
.lp-hero__inner {
  max-width: calc(var(--content-w) + 48px); margin-inline: auto; padding-inline: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center;
}
.lp-hero__title { max-width: 970px; }
.lp-hero__break { display: none; }
@media (min-width: 760px) { .lp-hero__break { display: block; } }
.lp-hero__sub { max-width: 970px; }
.lp-hero__cta { display: flex; gap: 12px; margin-top: 4px; }
.lp-download-group {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%;
}
.lp-intel-link {
  font-size: 11px; line-height: 15px;
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-sub-600); opacity: 0.62; text-decoration: none;
  text-align: center;
}
.lp-intel-link:hover { color: var(--blue-darker); opacity: 0.86; }

/* Offer tag — bg-weak pill · white "Free" chip · label · arrow */
.lp-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 9px 4px 6px; border-radius: var(--radius-badge);
  background: var(--bg-weak-50);
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-sub-600); white-space: nowrap;
  transition: background .14s ease;
}
.lp-tag:hover { background: var(--bg-soft-100); }
.lp-tag__free {
  padding: 2px 5px; border-radius: 5px;
  background: var(--bg-white-0); box-shadow: var(--shadow-pill);
  font-family: var(--lp-font-paragraph);
  font-size: 10px; line-height: 12px; font-weight: var(--w-semibold);
  letter-spacing: 0.2px; color: var(--text-sub-600);
}

/* Hero product visual (Figma 149:1532) — the app screenshot sits directly on
   white, no wallpaper frame, and dissolves toward the bottom (the design's
   alpha mask: opaque to 80% height, transparent at 100%). */
.lp-hero__media {
  width: 100%; margin-top: 56px;
  display: flex; justify-content: center;
}
.lp-hero__app {
  position: relative;
  width: 1112px; max-width: 100%;       /* the design's media width */
}
/* Product UI (Figma 149:2116 "Generic Chat Framework") — a full HTML
   rebuild authored at the design's native 1440x900, scaled to the hero
   column. The chat panel and the prompt bar are separate parallax layers. */
.lp-hero__frame {
  aspect-ratio: 1440 / 900;   /* the scale wrapper keeps its unscaled layout
                                 height, so the frame must cap the box itself */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.lp-fw-scale { width: 1440px; height: 900px; transform-origin: top left; }
.lp-fw {
  position: relative; width: 1440px; height: 900px;
  background: var(--bg-weak-50);
  border-radius: 20px; overflow: hidden;
  text-align: left;
}
.lp-fw, .lp-fw * { box-sizing: border-box; }
.lp-fw__icon16 { width: 16px; height: 16px; display: grid; place-items: center; flex: none; }
.lp-fw__icon20 { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.lp-fw img { display: block; }

/* -- Sidebar ------------------------------------------------------------ */
.lp-fw__side {
  position: absolute; left: 0; top: 0; width: 272px; height: 900px;
  padding: 20px 14px 14px;
  display: flex; flex-direction: column; gap: 16px; overflow: hidden;
}
.lp-fw__sidetop { display: flex; align-items: center; justify-content: space-between; padding-left: 6px; }
.lp-fw__dots { display: flex; gap: 8px; padding: 1px; }
.lp-fw__dot { width: 12px; height: 12px; border-radius: 100px; border: 0.5px solid rgba(0,0,0,.1); }
.lp-fw__dot--r { background: #ff736a; } .lp-fw__dot--y { background: #febc2e; } .lp-fw__dot--g { background: #19c332; }
.lp-fw__navicons { display: flex; gap: 8px; align-items: center; }
.lp-fw__update {
  background: #262626; color: var(--text-white-0);
  border-radius: 8px; padding: 4px 6px;
  display: flex; gap: 2px; align-items: center;
  font-size: 12px; line-height: 16px; font-weight: var(--w-medium);
}
.lp-fw__update span { padding-inline: 4px; }
.lp-fw__searchbox {
  width: 100%; background: #ebebeb; border-radius: 10px; padding: 8px;
  display: flex; gap: 8px; align-items: center;
  font-size: 14px; line-height: 20px; letter-spacing: -0.084px;
  font-weight: var(--w-medium); color: var(--text-soft-400);
}
.lp-fw__sidehead { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.lp-fw__group { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.lp-fw__block { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.lp-fw__block--grow { flex: 1 1 0; min-height: 0; overflow: hidden; }
.lp-fw__item {
  width: 244px; display: flex; gap: 8px; align-items: center;
  padding: 6px 8px 6px 6px; border-radius: 8px;
  font-size: 12px; line-height: 16px; font-weight: var(--w-medium);
  color: var(--text-strong-950);
}
.lp-fw__item span:last-child { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; }
.lp-fw__item .lp-fw__icon16, .lp-fw__item .lp-fw__newdot { flex: none; }
/* "New Chat" is a full-width outlined button in the updated design, not a
   tinted list row. */
.lp-fw__newbtn {
  width: 100%; display: flex; gap: 2px; align-items: center; justify-content: center;
  padding: 8px 6px; border-radius: 8px;
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  box-shadow: 0 1px 2px 0 rgba(10, 13, 20, .03);
  font-size: 12px; line-height: 16px; font-weight: var(--w-medium);
  color: var(--text-strong-950);
}
.lp-fw__newbtn > span:last-child { padding-inline: 4px; }
.lp-fw__subtitle {
  padding-inline: 6px;
  font-size: 12px; line-height: 16px; font-weight: var(--w-medium);
  color: var(--text-soft-400);
}
.lp-fw__divider { width: 244px; height: 1px; background: var(--stroke-soft-200); margin-block: 1.5px; flex: none; }

/* -- Chat panel (PARALLAX LAYER 1) --------------------------------------- */
.lp-fw__chat {
  position: absolute; left: 272px; top: 6px; width: 1162px; height: 888px;
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  will-change: transform;
}
.lp-fw__hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; border-bottom: 1px solid var(--stroke-soft-200); flex: none;
}
.lp-fw__crumbs {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 14px; line-height: 20px; letter-spacing: -0.084px; font-weight: var(--w-medium);
}
.lp-fw__crumbs .dim { color: var(--text-soft-400); }
.lp-fw__crumbs .strong { color: var(--text-strong-950); }
.lp-fw__hdrbtns { display: flex; gap: 8px; align-items: center; }
.lp-fw__hbtn {
  display: flex; gap: 4px; align-items: center;
  padding: 6px 8px 6px 12px; border-radius: 10px;
  background: var(--bg-white-0);
  font-size: 14px; line-height: 20px; letter-spacing: -0.084px;
  font-weight: var(--w-medium); color: var(--text-sub-600); white-space: nowrap;
  box-shadow: 0 3px 3px -1.5px rgba(23,23,23,.04),
              0 1px 1px -0.5px rgba(23,23,23,.04),
              0 0 0 1px rgba(23,23,23,.08);
}
.lp-fw__hbtn--icon { padding: 6px 8px; }
.lp-fw__body {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px; padding-bottom: 20px;
}
.lp-fw__content {
  width: 700px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  /* The composer starts the parallax lifted 52px and zoomed; the design's 40px
     gap is the SETTLED spacing, so open this one gap enough that the raised
     state still clears the greeting. Only this gap changes — composer to
     starter prompts stays at the design's 40. */
  margin-bottom: 24px;
}
/* The oversized grid/planet artwork is gone; the greeting now leads with the
   38px app mark, and the column is centred rather than bottom-weighted. */
.lp-fw__main { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; }
.lp-fw__mark { width: 38px; height: 38px; flex: none; display: block; }
.lp-fw__mark img { width: 100%; height: 100%; border-radius: 9px; }
.lp-fw__hello { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: center; }
.lp-fw__hello b {
  font-size: 18px; line-height: 24px; letter-spacing: -0.27px;
  font-weight: var(--w-medium); color: var(--text-strong-950);
}
.lp-fw__hello span {
  font-size: 14px; line-height: 20px; letter-spacing: -0.084px;
  font-weight: var(--w-medium); color: var(--text-soft-400);
}
/* -- Prompt slot (PARALLAX LAYER 2) — hosts the .lp-pa component --------- */
.lp-fw__msg { width: 700px; padding-inline: 4px; flex: none; will-change: transform; }
.lp-fw__msg .lp-pa { width: 100%; }
/* Starter prompts under the composer */
.lp-fw__suggest {
  width: 690px; flex: none;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding-bottom: 8px;
}
.lp-fw__sitem {
  width: 244px; display: flex; gap: 8px; align-items: center;
  padding: 6px 8px 6px 6px; border-radius: 8px;
  font-size: 12px; line-height: 16px; font-weight: var(--w-medium);
  color: var(--text-strong-950); white-space: nowrap;
}
/* Right utility rail */
.lp-fw__rail {
  width: 60px; flex: none; align-self: stretch;
  border-left: 1px solid var(--stroke-soft-200);
  background: var(--bg-white-0);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 12px 16px;
}
.lp-fw__railbtn {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
}
.lp-fw__railbtn img { width: 16px; height: 16px; }

/* Prompt Area component — token-exact port of the Figma node */
.lp-pa {
  width: 700px;
  background: var(--bg-weak-50);
  border-radius: 20px;
  padding: 1px;
}
.lp-pa__chat {
  background: var(--bg-white-0);
  border-radius: 19px;
  padding: 14px 12px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 31px;
  box-shadow:
    0 10px 10px -5px rgba(23, 23, 23, 0.02),
    0 6px 6px -3px rgba(23, 23, 23, 0.04),
    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
    0 1px 1px -0.5px rgba(23, 23, 23, 0.04),
    0 0 0 1px rgba(23, 23, 23, 0.02);
}
.lp-pa__text {
  padding-inline: 4px;
  font-size: var(--body-size); line-height: var(--body-lh);
  font-weight: var(--w-regular); letter-spacing: var(--body-ls);
  color: var(--text-soft-400);
}
.lp-pa__actions { display: flex; align-items: center; gap: 8px; width: 100%; }
.lp-pa__spacer { flex: 1 1 0; }
.lp-pa__btn, .lp-pa__chip {
  display: inline-flex; align-items: center;
  background: var(--bg-weak-50);
  border: 0; border-radius: 9px; cursor: default;
  font-family: inherit;
}
.lp-pa__btn { padding: 4px; }
.lp-pa__chip {
  gap: 4px; padding: 4px 4px 4px 8px;
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-sub-600); white-space: nowrap;
}
.lp-pa__icon { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.lp-pa__icon img { display: block; }



/* ==========================================================================
   8 · FEATURE CARD  (Features grid — icon · title · body)
   ========================================================================== */
/* Bento grid: left column (2 stacked) · center featured (spans 2 rows) · right column (2 stacked) */
/* Figma nests three 400px columns (gap 12) and stacks two 248px cards inside
   the outer two (gap 8). One grid with split gaps reproduces that exactly:
   the centre card spans both rows + the row gap = 248+8+248 = 504px. */
.lp-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 248px;
  column-gap: 12px;
  row-gap: 8px;
}
.lp-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
  padding: 40px;
  background: var(--bg-weak-50);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.lp-card--a { grid-column: 1; grid-row: 1; }
.lp-card--b { grid-column: 1; grid-row: 2; }
.lp-card--c { grid-column: 3; grid-row: 1; }
.lp-card--d { grid-column: 3; grid-row: 2; }
/* Centre card is full-height: icon at the top, copy pinned to the bottom. */
.lp-card--featured {
  grid-column: 2; grid-row: 1 / span 2;
  justify-content: space-between;
  gap: 0;
}
.lp-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-btn); flex: none;
  display: grid; place-items: center;
  background: var(--bg-white-0);
  box-shadow: var(--shadow-icon);
}
/* Icons are the Figma exports, cropped to their bbox and centred in the 28px
   frame — their intrinsic size already encodes the design's optical sizing. */
.lp-card__icon svg,
.lp-card__icon img { display: block; }
.lp-card__text { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.lp-card__title {
  font-size: var(--large-size); line-height: var(--large-lh);
  font-weight: var(--w-medium); letter-spacing: var(--large-ls);
  color: var(--text-strong-950);
}
.lp-card__body {
  font-size: var(--body-size); line-height: var(--body-lh);
  font-weight: var(--w-medium); letter-spacing: var(--body-ls);
  color: var(--text-soft-400);
}

/* ==========================================================================
   9 · INTEGRATIONS  (Figma 251:4255 — copy left · logo tiles right)
   ========================================================================== */
.lp-section__inner.lp-integ2 { flex-direction: row; align-items: center; gap: 40px; }
.lp-integ2__text {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.lp-integ2__text .lp-h2 { max-width: 592px; }
.lp-integ2__lead { max-width: 528px; }
.lp-integ2__logos {
  width: 592px; flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px;
}
.lp-integ2__tile {
  width: 120px; height: 120px; border-radius: 32px;
  background: var(--bg-white-0);
  border: 1px solid var(--stroke-soft-200);
  display: grid; place-items: center;
}
.lp-integ2__tile img { height: 56px; width: auto; max-width: 64px; object-fit: contain; display: block; }

/* ==========================================================================
   10 · TABBED SLIDER  (How It Works — tabs · preview panel)
   ========================================================================== */
.lp-slider { width: 100%; display: flex; flex-direction: column; gap: 32px; }

/* Numbered step — shared atom */
.lp-step { display: flex; gap: 14px; align-items: flex-start; }
.lp-step__num {
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  font-size: var(--small-size); font-weight: var(--w-medium); letter-spacing: -0.1px;
  color: var(--text-sub-600);
  border: 0; background: var(--bg-weak-50);
}
.lp-step--active .lp-step__num {
  color: var(--primary-base);
  border-color: var(--primary-base);
  box-shadow: inset 0 0 0 1px var(--primary-base);
}
.lp-step__body { display: flex; flex-direction: column; gap: 8px; }
.lp-step__title {
  font-size: var(--large-size); line-height: var(--large-lh);
  font-weight: var(--w-medium); letter-spacing: var(--large-ls); color: var(--text-sub-600);
}
.lp-step--active .lp-step__title { color: var(--text-strong-950); }
.lp-step__desc {
  font-size: var(--body-size); line-height: var(--body-lh);
  font-weight: var(--w-regular); letter-spacing: var(--body-ls); color: var(--text-sub-600);
}

/* Horizontal stepper (Slider 1) — 3 steps (fill), 1px dividers, gap 48 */
.lp-steps-row { width: 100%; display: flex; align-items: stretch; gap: 48px; }
.lp-steps-row .lp-step { flex: 1; gap: 20px; align-items: flex-start; cursor: pointer; }
.lp-steps-row .lp-step:not(.lp-step--active):hover .lp-step__num { border-color: var(--stroke-sub-300); }
.lp-steps-row .lp-step:not(.lp-step--active):hover .lp-step__title { color: var(--text-strong-950); }
.lp-steps-row .lp-step:focus-visible { outline: none; }
.lp-steps-row .lp-step:focus-visible .lp-step__num { box-shadow: 0 0 0 3px var(--primary-alpha-16); }
.lp-steps-row .lp-step__num {
  width: 56px; height: 56px; align-self: flex-start;
  font-size: 20px;
}
.lp-step-sep { width: 1px; align-self: stretch; background: var(--stroke-soft-200); flex: none; }

/* Auto-advancing slider: the active step highlights + an ANGULAR white→pink
   gradient ring fills clockwise around its circle (like a loader). On
   completion the JS advances to the next step + slides in its content. */
@property --lp-p { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
.lp-steps-row .lp-step__num { position: relative; }
.lp-step__n { position: relative; z-index: 1; }
.lp-step__ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -90deg, #ffffff, var(--primary-base));
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)),
    conic-gradient(from -90deg, #000 var(--lp-p, 0%), transparent 0);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)),
    conic-gradient(from -90deg, #000 var(--lp-p, 0%), transparent 0);
          mask-composite: intersect;
  opacity: 0;
}
.lp-steps-row .lp-step--active .lp-step__num {
  color: var(--primary-base);
  border-color: var(--stroke-soft-200);   /* keep grey track; ring paints the pink */
  box-shadow: none;
}
.lp-steps-row .lp-step--active .lp-step__ring,
.lp-steps-col .lp-step--active .lp-step__ring,
.lp-testi__arrow--live .lp-step__ring {
  opacity: 1;
  animation: lp-ring-fill var(--lp-step-dur, 4000ms) linear forwards;
}
@keyframes lp-ring-fill { from { --lp-p: 0%; } to { --lp-p: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .lp-steps-row .lp-step--active .lp-step__ring,
  .lp-steps-col .lp-step--active .lp-step__ring { animation: none; --lp-p: 100%; }
  .lp-testi__arrow--live .lp-step__ring { animation: none; opacity: 0; }
}

/* Vertical stepper (Slider 2) — step list beside a 600px preview panel.
   Figma widths: 576 + 48 gap + 600 = 1224 (the content column). */
.lp-slider--split {
  width: 100%; display: flex; flex-direction: row;  /* .lp-slider defaults to column */
  gap: 48px; align-items: center;
}
.lp-steps-col { flex: 0 1 576px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-steps-col { position: relative; }
/* align-items is ALWAYS flex-start: alignment can't animate, so flipping it
   per-state made the title/number jump 8px at every switch. The body's 8px
   top padding reproduces the centred look for collapsed cards instead
   (24+8 = same title y as centring 24px text against the 40px circle). */
.lp-steps-col .lp-step {
  width: 100%;
  display: flex; gap: 24px; align-items: flex-start;
  padding: 24px;
  border-radius: 20px;
  background: transparent;
  border: 1px solid var(--stroke-soft-200);
  /* The grey fill fades in ON the active tab — no travelling element. */
  transition: background-color .25s ease, border-color .25s ease;
  cursor: pointer;
}
.lp-steps-col .lp-step:not(.lp-step--active):hover { border-color: var(--stroke-sub-300); }
.lp-steps-col .lp-step:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-alpha-16); }

/* Description is always in the DOM and animates open on the active step.
   The box is a FIXED 48px (two lines) and max-height animates to exactly
   that value: the collapsing card then mirrors the expanding card
   frame-for-frame — one shrinks precisely as fast as the other grows — so
   the column's total height stays constant and nothing below shifts. */
.lp-steps-col .lp-step__desc {
  display: block; overflow: hidden;
  height: 72px;                       /* every desc occupies the same box (3 lines) */
  max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height .5s cubic-bezier(.4, 0, .2, 1),
              margin-top .5s cubic-bezier(.4, 0, .2, 1),
              opacity .35s ease;
}
.lp-steps-col .lp-step--active .lp-step__desc { max-height: 72px; opacity: 1; margin-top: 8px; }
/* Numbers sit in a slim circle that hosts the same gradient progress ring
   as Slider 1 — the auto-advance countdown draws around the active number. */
.lp-steps-col .lp-step__num {
  position: relative;
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%; box-shadow: none;
  font-size: var(--large-size); line-height: var(--large-lh);
  font-weight: var(--w-medium); letter-spacing: var(--large-ls);
  color: var(--text-soft-400);
}
.lp-steps-col .lp-step__body { flex: 1 1 0; min-width: 0; gap: 0; padding-top: 8px; }
.lp-steps-col .lp-step__title {
  font-size: var(--large-size); line-height: var(--large-lh);
  font-weight: var(--w-medium); letter-spacing: var(--large-ls);
  color: var(--text-strong-950);
}
.lp-steps-col .lp-step__desc {
  font-family: var(--lp-font-paragraph);
  font-size: var(--body-size); line-height: var(--body-lh);
  font-weight: var(--w-regular); letter-spacing: var(--body-ls);
  color: var(--text-sub-600);
}
/* Active: grey fill on the tab itself; the border drops out. */
.lp-steps-col .lp-step--active {
  background: var(--bg-weak-50);
  border-color: transparent;
}
.lp-steps-col .lp-step--active .lp-step__num { color: var(--primary-base); }

/* Not-yet-reached steps mute the number and the label. */
.lp-steps-col .lp-step--todo .lp-step__num   { color: var(--text-disabled-300); }
.lp-steps-col .lp-step--todo .lp-step__title { color: var(--text-soft-400); }

/* Preview (Slider 1) — a slide carousel; each slide = 400px card + fill panel.
   Slides swap in sync with the active step, entering from the right. */
.lp-preview { position: relative; width: 100%; height: 480px; overflow: hidden; }
.lp-slide {
  position: absolute; inset: 0; display: flex; gap: 6px;
  opacity: 0; visibility: hidden;
}
.lp-slide--active {
  opacity: 1; visibility: visible; z-index: 1;
  animation: lp-slide-in 620ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes lp-slide-in {
  from { opacity: 0; transform: translateX(110px); }
  to   { opacity: 1; transform: translateX(0); }
}
.lp-preview__card {
  width: 400px; flex: none; height: 100%;
  border-radius: 32px; padding: 40px;
  background: var(--bg-weak-50);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.lp-preview__icon {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-white-0);
  box-shadow: var(--shadow-icon);
}
.lp-preview__icon img { display: block; }
.lp-preview__text { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.lp-preview__cardtitle {
  font-size: 24px; line-height: 32px; letter-spacing: -0.12px;   /* H5 */
  font-weight: var(--w-medium); color: var(--text-strong-950);
}
.lp-preview__cardbody {
  font-size: 18px; line-height: 24px; letter-spacing: -0.27px;   /* Regular/Large */
  font-weight: var(--w-regular); color: var(--text-sub-600);
}
.lp-preview__panel {
  position: relative;
  flex: 1; height: 100%; border-radius: 32px; background: var(--bg-weak-50);
  display: grid; place-items: center; overflow: hidden;
}
/* Fixed-size composition stages — authored at design px, scaled to their
   panel by script (transform only; geometry inside stays design-exact). */
.lp-stage {
  position: absolute; left: 50%; top: 50%;
  width: 818px; height: 480px;
  display: grid; place-items: center;
  transform-origin: center;
}
.lp-stage--pipe {
  left: 0; top: 0;
  width: 600px; height: 600px;
  display: block;
  transform-origin: top left;
}

/* Slide media — a WebM that fills the whole grey well edge to edge. `cover`
   crops rather than letterboxes, so the panel never shows grey bands; author
   the clips at 818×480 (or any 17:10-ish ratio) to avoid losing content. */
.lp-panel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border: 0;
}

/* Slide 2 — single bordered screenshot, centred */
.lp-panel-main {
  width: 640px; max-width: 88%; height: auto;
  border-radius: 12px; border: 1px solid var(--stroke-soft-200);
  display: block; position: relative;
}
/* Slides 1 & 3 — blurred product backdrop behind the composition */
.lp-panel-bg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 966px; height: 604px; max-width: none;
}
/* Slide 3 — sharp mid image on the backdrop */
.lp-panel-mid {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 652px; height: 408px; max-width: none;
}

/* Slide 1 — cascading "Integration Switch" cards (Figma 251:4171-73) */
.lp-iswitch {
  position: absolute; width: 336px;
  display: flex; flex-direction: column; gap: 16px;
  filter: drop-shadow(0 1px 1px rgba(10, 13, 20, 0.03));
  font-family: var(--lp-font-paragraph); text-align: left;
}
.lp-iswitch__title {
  display: flex; align-items: center; gap: 4px;
  font-size: 16px; line-height: 24px; font-weight: 500;
  letter-spacing: -0.176px; color: var(--text-strong-950);
}
.lp-iswitch__logo { width: 20px; height: 20px; display: block; object-fit: contain; }
.lp-iswitch__logo--codex {
  background: linear-gradient(139deg, #849fff 2%, #7394ff 98%);
  -webkit-mask: url("../assets/images/logo-codex.png") center / 17.5px 17.5px no-repeat;
          mask: url("../assets/images/logo-codex.png") center / 17.5px 17.5px no-repeat;
}
.lp-iswitch__badge {
  background: #c2f5da; color: #0b4627;
  border-radius: 999px; padding: 2px 8px;
  font-size: 11px; line-height: 12px; font-weight: 500;
  letter-spacing: 0.22px; text-transform: uppercase;
}
.lp-iswitch__input {
  background: var(--bg-white-0); border-radius: 12px;
  padding: 6px 6px 6px 12px;
  display: flex; gap: 8px; align-items: center;
  box-shadow: 0 3px 3px -1.5px rgba(23,23,23,.04),
              0 1px 1px -0.5px rgba(23,23,23,.04),
              0 0 0 1px rgba(23,23,23,.08);
  font-size: 14px; line-height: 20px; letter-spacing: -0.084px;
  color: var(--text-strong-950);
}
.lp-iswitch__input .dim { color: var(--text-soft-400); }
.lp-iswitch__ico { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.lp-iswitch__val { flex: 1 1 0; min-width: 0; }
.lp-iswitch__btn { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.lp-iswitch__btn--dark { background: #171717; }
.lp-iswitch__ico img, .lp-iswitch__btn img { display: block; }
.lp-preview__screen {
  border-radius: 16px; border: 1px solid var(--stroke-soft-200);
  background-image:
    radial-gradient(60% 60% at 30% 15%, #ffe1f0 0%, rgba(255,225,240,0) 60%),
    radial-gradient(55% 60% at 85% 95%, #e7dcff 0%, rgba(231,220,255,0) 55%),
    linear-gradient(#fff, #fff);
}
/* Slider 2's panel is a flat 600px placeholder well in the design (it awaits
   a product image), not the gradient screen used elsewhere. */
.lp-slider--split .lp-preview__screen {
  position: relative;
  flex: 0 1 600px; min-width: 0;
  width: 600px; max-width: 100%; height: 600px;
  border-radius: 36px;
  border: 1px solid var(--bg-weak-50);
  background-image: none;
  background-color: var(--bg-weak-50);
  box-shadow: none;
  overflow: hidden;
}
/* Step media — a WebM filling the whole 600px well, same treatment as the
   slider-1 panels. `cover` crops rather than letterboxes, so author the
   clips square-ish; the well itself is 1:1. */
.lp-pstep-video {
  /* -1px so the clip covers the well's hairline border too and reaches the
     true edge of the grey box (border-box, so the size grows to match). */
  position: absolute; inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  max-width: none;                    /* opt out of the global media clamp */
  object-fit: cover; object-position: center;
  display: none; border: 0;
}
.lp-pstep-video.is-on { display: block; }

.lp-pstep-img { position: absolute; display: none; max-width: none; object-fit: cover; }
.lp-pstep-img.is-on { display: block; }
.lp-pstep-img--1 { left: 70px; top: 50px; width: 1440px; height: 900px;
  border-radius: 20px; border: 1px solid var(--stroke-soft-200); }
.lp-pstep-img--2 { left: 59px; top: 103px; width: 482px; height: 394px; }
.lp-pstep-img--3 { left: 48px; top: 23px; width: 503px; height: 553px; }
.lp-pstep-img--4 { left: -975px; top: 56px; width: 1514px; height: 946px;
  border-radius: 28px; border: 1px solid var(--stroke-soft-200); }
.lp-pstep-img--5 { left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 524px; height: 192px; border-radius: 20px; border: 1px solid var(--stroke-soft-200); }
/* Re-run on each step change so the panel visibly swaps with the tabs. */
.lp-slider--split .lp-preview__screen.is-switching {
  animation: lp-panel-in 480ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes lp-panel-in {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   10b · TESTIMONIALS  (Figma 149:881 — "Trusted by builders" quote wall)
   ========================================================================== */
.lp-testi {
  background: var(--bg-white-0);
  border-bottom: 1px solid var(--stroke-soft-200);
  padding: 120px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.lp-testi__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.lp-testi__sub {
  font-size: var(--body-size); line-height: var(--body-lh);
  font-weight: var(--w-regular); letter-spacing: var(--body-ls);
  color: var(--text-sub-600);
}

/* Brand strip — 22px mark + muted 18px wordmark */
.lp-testi__brands { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.lp-brandtag { display: inline-flex; align-items: center; gap: 6px; }
.lp-brandtag img { width: 22px; height: 22px; display: block; }
.lp-brandtag span {
  font-size: var(--large-size); line-height: var(--large-lh);
  font-weight: var(--w-medium); letter-spacing: var(--large-ls);
  color: var(--text-soft-400); white-space: nowrap;
}

/* Quote wall — grey frame holding three vertically-scrolling columns.
   Middle column is full height; the outer two are 48px shorter and sit
   centred, exactly as in the design. Fades come from per-column masks. */
.lp-testi__wall {
  width: 100%; max-width: var(--content-w);
  background: var(--bg-weak-50);
  border: 1px solid var(--stroke-soft-200);
  border-radius: 20px;
  padding: 20px;
  display: flex; align-items: center; gap: 10px;
  overflow: hidden;
}
.lp-testi__col {
  flex: 1 1 0; min-width: 0;
  height: 696px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.lp-testi__col--edge { height: 648px; }

/* Track scrolls like the logo marquee, but vertically. Spacing lives in a
   per-card margin (not flex gap) so the duplicated track tiles seamlessly. */
.lp-testi__track { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .lp-testi__track {
    animation: lp-testi-scroll var(--lp-scroll-dur, 52s) linear infinite;
    will-change: transform;
  }
  .lp-testi__col--rev .lp-testi__track { animation-direction: reverse; }
  .lp-testi__wall:hover .lp-testi__track { animation-play-state: paused; }
}
@keyframes lp-testi-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Quote card */
.lp-tcard {
  background: var(--bg-white-0);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 32px;
}
.lp-tcard__quote {
  font-size: var(--large-size); line-height: var(--large-lh);
  font-weight: var(--w-medium); letter-spacing: var(--large-ls);
  color: var(--text-strong-950);
}
.lp-tcard__who { display: flex; align-items: center; gap: 12px; }
.lp-tcard__avatar {
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  background: var(--bg-strong-950); overflow: hidden;
}
.lp-tcard__avatar img { display: block; width: 100%; height: 100%; }
.lp-tcard__name {
  flex: 1 1 0; min-width: 0;
  font-size: var(--body-size); line-height: var(--body-lh);
  font-weight: var(--w-medium); letter-spacing: var(--body-ls);
  color: var(--text-strong-950);
}
.lp-tcard__x { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.lp-tcard__x img { display: block; }

/* ==========================================================================
   11 · CUSTOM CTA BANNER  (Figma 21:354 — pink band + Λ motifs)
   ========================================================================== */
/* CTA + footer live in ONE grey band (Figma 199692:317): the banner spans the
   band's full inner width; the footer card sits below it on the same grey, so
   it reads as one section rather than two stacked cards. */
.lp-footcta {
  width: 100%;
  background: var(--bg-weak-50);
  padding: 40px 60px 104px;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.lp-cta { padding: 44px; background: var(--bg-white-0); }  /* legacy standalone CTA */
.lp-cta__banner {
  position: relative; overflow: hidden;
  width: 100%; margin-inline: auto;   /* full band width in .lp-footcta */
  border-radius: var(--radius-3xl);
  padding-block: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: var(--accent-lighter);
}
.lp-cta__content {
  position: relative; z-index: 1;   /* above the motifs */
  width: 832px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* Oversized Λ marks bleeding off the band; the right one is flipped upside
   down. Exact offsets from the design (288×407 artwork). */
.lp-cta__motif { position: absolute; width: 288px; height: 407px; pointer-events: none; }
.lp-cta__motif img { display: block; width: 100%; height: 100%; }
.lp-cta__motif--l { left: 41px; top: -43px; }
.lp-cta__motif--r { right: 20px; top: -23px; transform: scaleY(-1); }
.lp-cta__title {
  font-size: var(--h2-size); line-height: var(--h2-lh);
  font-weight: var(--w-medium); letter-spacing: var(--h2-ls);
  color: var(--blue-darker);
  max-width: 692px;
}
/* CTA button — Fancy Button small, solid primary-darkest */
.lp-btn--cta {
  gap: 4px; padding: 10px; border-radius: 10px;
  background: var(--blue-dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-white-0);
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
}
.lp-btn--cta .lp-btn__label { padding-inline: 4px; }
.lp-btn--cta .lp-btn__icon { width: 20px; height: 20px; }
.lp-btn--cta:hover { filter: brightness(1.15); transform: translateY(-1px); }
.lp-btn--cta:active { transform: translateY(0); }

/* Liquid-glass treatment for waitlist actions. The soft refraction stays
   within the existing button footprint so the CTA remains balanced at every
   breakpoint. */
.lp-btn--glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  /* Tints come from the site's information-blue family (accent-light
     #c0d5ff / primary #335cff) — the launch glass carried pink stops left
     over from the pre-remap theme. Label is near-black grey at FULL opacity:
     any alpha lets the glow bleed through the glyphs and wash them out. */
  color: #171717;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .08)) padding-box,
    linear-gradient(110deg,
      rgba(92, 108, 138, .30),
      rgba(255, 255, 255, .96) 30%,
      rgba(192, 213, 255, .60) 66%,
      rgba(51, 92, 255, .38)) border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  box-shadow:
    0 20px 30px -20px rgba(20, 28, 46, .34),
    0 4px 14px -8px rgba(30, 42, 70, .20),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(115, 127, 148, .16);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
/* Glow layers sit BELOW the label (negative z within the button's own
   stacking context): the hero button's label is a bare text node, which the
   `> *` z-lift can't rescue — with the glow above it the text washed out. */
.lp-btn--glass::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(34% 95% at 84% 50%, rgba(192, 213, 255, .40), transparent 75%),
    radial-gradient(35% 100% at 67% 100%, rgba(51, 92, 255, .20), transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, .54), rgba(255, 255, 255, .02));
  filter: blur(1px);
  pointer-events: none;
}
.lp-btn--glass::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 6px;
  z-index: -1;   /* after ::before in tree order, so still above the glow */
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  pointer-events: none;
}
.lp-btn--glass > * { position: relative; z-index: 2; }
.lp-btn--glass:hover {
  filter: none;
  color: #171717;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .16)) padding-box,
    linear-gradient(110deg,
      rgba(92, 108, 138, .36),
      rgba(255, 255, 255, .98) 30%,
      rgba(192, 213, 255, .70) 66%,
      rgba(51, 92, 255, .46)) border-box;
  background-clip: padding-box, border-box;
  transform: translateY(-1px);
  box-shadow:
    0 24px 34px -20px rgba(20, 28, 46, .38),
    0 6px 16px -8px rgba(30, 42, 70, .22),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(255, 255, 255, .42);
}
.lp-btn--glass:active { transform: translateY(.5px); }
.lp-btn--glass:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-alpha-16),
              0 20px 30px -20px rgba(20, 28, 46, .34),
              inset 0 1px 0 rgba(255, 255, 255, .96);
}

/* ==========================================================================
   12 · FOOTER  (Figma 21:311 — grey card: brand · link columns · legal bar)
   ========================================================================== */
.lp-footer { background: var(--bg-white-0); padding: 104px 24px; }
.lp-footer__card {
  width: 100%; max-width: var(--content-w); margin-inline: auto;
  background: var(--bg-weak-50);
  border-radius: var(--radius-2xl);
  padding: 48px 80px;
  display: flex; flex-direction: column; gap: 48px;
  overflow: hidden;
}
.lp-footer__items { display: flex; align-items: flex-start; gap: 48px; width: 100%; }
.lp-footer__brandcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.lp-footer__logo { display: block; width: 112px; height: 24px; }
.lp-footer__tag {
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-soft-400);
}
/* App Store badge — 90×30 black chip, artwork positioned per the design */
.lp-badge-appstore {
  position: relative; display: block;
  width: 90px; height: 30px; border-radius: 8px;
  background: #000; overflow: hidden;
}
.lp-badge-appstore img { position: absolute; display: block; }
.lp-badge-appstore .lp-badge-appstore__apple { left: 7.5px;  top: 6.5px;  width: 13.3px; height: 16.3px; }
.lp-badge-appstore .lp-badge-appstore__line1 { left: 26.8px; top: 6.3px;  width: 52px;   height: 4.8px; }
.lp-badge-appstore .lp-badge-appstore__line2 { left: 25.9px; top: 13.4px; width: 56.5px; height: 11.7px; }
.lp-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lp-footer__h {
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-soft-400);
}
.lp-footer__link {
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-sub-600); white-space: nowrap;
  transition: color .12s;
}
.lp-footer__link:hover { color: var(--text-strong-950); }
.lp-footer__vr { width: 1px; align-self: stretch; background: var(--stroke-soft-200); flex: none; }
.lp-footer__divider { width: 100%; height: 1px; background: var(--stroke-soft-200); flex: none; }
.lp-footer__detail { display: flex; align-items: center; gap: 16px; width: 100%; }
.lp-footer__social { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 16px; }
.lp-footer__social a { width: 20px; height: 20px; display: grid; place-items: center; }
.lp-footer__social img { display: block; }
.lp-footer__copy {
  font-size: 12px; line-height: 16px;               /* Bold/X Small */
  font-weight: var(--w-medium); letter-spacing: 0;
  color: var(--text-soft-400); white-space: nowrap;
}
.lp-footer__legal { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.lp-footer__legal a {
  font-size: 12px; line-height: 16px;
  font-weight: var(--w-medium); letter-spacing: 0;
  color: var(--text-soft-400); white-space: nowrap;
  transition: color .12s;
}
.lp-footer__legal a:hover { color: var(--text-sub-600); }

/* ==========================================================================
   14 · SUBPAGES  (Talk to Sales · Legal) — same tokens, simple content shell
   ========================================================================== */
.lp-page { background: var(--bg-white-0); padding: 96px 24px 120px; }
.lp-page__inner { max-width: 720px; margin-inline: auto; }
.lp-page__head {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; margin-bottom: 56px;
}
.lp-page__lead { max-width: 520px; }

/* Contact form — Prompt-Area aesthetic: white fields with the soft ring */
.lp-form { display: flex; flex-direction: column; gap: 20px; }
.lp-form__row { display: flex; gap: 20px; }
.lp-form__row .lp-field { flex: 1 1 0; min-width: 0; }
.lp-field { display: flex; flex-direction: column; gap: 8px; }
.lp-field__label {
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-sub-600);
}
.lp-field__input {
  width: 100%;
  background: var(--bg-white-0);
  border: 0; border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--lp-font-paragraph);
  font-size: var(--body-size); line-height: var(--body-lh);
  letter-spacing: var(--body-ls); color: var(--text-strong-950);
  box-shadow: 0 3px 3px -1.5px rgba(23,23,23,.04),
              0 1px 1px -0.5px rgba(23,23,23,.04),
              0 0 0 1px rgba(23,23,23,.08);
  transition: box-shadow .14s ease;
}
.lp-field__input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-white-0), 0 0 0 4px var(--primary-base);
}
.lp-field__input--area { resize: vertical; min-height: 120px; }
.lp-field__input::placeholder { color: var(--text-soft-400); }
.lp-form__actions { display: flex; justify-content: center; margin-top: 20px; }
.lp-form__actions + p { margin-top: 20px; }
.lp-form__done {
  text-align: center;
  font-size: var(--body-size); line-height: var(--body-lh);
  font-weight: var(--w-medium); color: var(--text-strong-950);
  background: var(--accent-lighter); border-radius: 12px; padding: 16px;
}

/* Legal document typography */
.lp-legal__toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lp-legal__toc a {
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
  color: var(--text-sub-600);
  background: var(--bg-weak-50); border-radius: 999px; padding: 6px 14px;
  transition: background .14s ease, color .14s ease;
}
.lp-legal__toc a:hover { background: var(--bg-soft-100); color: var(--text-strong-950); }
.lp-legal { display: flex; flex-direction: column; gap: 56px; }
.lp-legal__sec { scroll-margin-top: 96px; }
.lp-legal__sec h2 {
  font-size: var(--title-size); line-height: var(--title-lh);
  font-weight: var(--w-medium); letter-spacing: var(--title-ls);
  color: var(--text-strong-950);
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid var(--stroke-soft-200);
}
.lp-legal__sec h3 {
  font-size: var(--large-size); line-height: var(--large-lh);
  font-weight: var(--w-medium); letter-spacing: var(--large-ls);
  color: var(--text-strong-950);
  margin: 24px 0 8px;
}
.lp-legal__sec p, .lp-legal__sec li {
  font-family: var(--lp-font-paragraph);
  font-size: var(--body-size); line-height: 26px;
  letter-spacing: var(--body-ls); color: var(--text-sub-600);
}
.lp-legal__sec p + p { margin-top: 12px; }
.lp-legal__sec ul { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.lp-legal__sec strong { color: var(--text-strong-950); font-weight: var(--w-medium); }
.lp-legal__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 4px;
}
.lp-legal__meta span,
.lp-placeholder {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 4px 10px;
  background: var(--bg-weak-50); color: var(--text-sub-600);
  font-size: var(--small-size); line-height: var(--small-lh);
  font-weight: var(--w-medium); letter-spacing: var(--small-ls);
}
.lp-legal__notice {
  border: 1px solid var(--stroke-soft-200);
  border-radius: 12px; padding: 16px;
  background: var(--accent-lighter);
}
.lp-legal__notice p { margin: 0; }
.lp-legal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.lp-legal__card {
  border: 1px solid var(--stroke-soft-200);
  border-radius: 8px; padding: 20px;
  background: var(--bg-white-0);
  box-shadow: var(--shadow-card);
}
.lp-legal__card h2 { margin-bottom: 12px; }
.lp-legal__card .lp-btn { margin-top: 18px; }
.lp-legal__table-wrap {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--stroke-soft-200);
  border-radius: 8px; margin-top: 12px;
}
.lp-legal__table {
  width: 100%; border-collapse: collapse;
  font-family: var(--lp-font-paragraph);
  font-size: var(--small-size); line-height: var(--small-lh);
  color: var(--text-sub-600);
}
.lp-legal__sec address { font-style: normal; }
.lp-legal__table th,
.lp-legal__table td {
  text-align: left; vertical-align: top;
  padding: 12px; border-bottom: 1px solid var(--stroke-soft-200);
}
.lp-legal__table tr:last-child th,
.lp-legal__table tr:last-child td { border-bottom: 0; }
.lp-legal__table th {
  color: var(--text-strong-950);
  font-weight: var(--w-medium);
  background: var(--bg-weak-50);
}

/* ==========================================================================
   13 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1120px) {
  .lp-nav__inner { padding: 16px 24px; }
  .lp-nav__menu-toggle { display: grid; }
  .lp-nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 12px 24px 24px;
    max-height: calc(100dvh - 72px); overflow-y: auto;
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--stroke-soft-200);
    box-shadow: 0 16px 32px -24px rgba(23,23,23,.28);
  }
  .lp-nav__links.is-open { display: flex; }
  .lp-navlink {
    min-height: 48px; padding: 12px 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 16px; line-height: 24px; font-weight: var(--w-medium);
    color: var(--text-strong-950);
    border-bottom: 1px solid var(--stroke-soft-200);
  }
}

/* Mobile stacked steps — phones drop the slider mechanic entirely; each step
   renders as number + title + description + its image, stacked. The blocks
   are cloned from the sliders by script and hidden everywhere else. */
.lp-msteps { display: none; }
@media (max-width: 760px) {
  #how .lp-slider, .lp-slider--split { display: none; }
  .lp-msteps { display: flex; flex-direction: column; gap: 48px; width: 100%; }
  .lp-mstep { display: flex; flex-direction: column; gap: 20px; }
  .lp-mstep .lp-step { gap: 16px; padding: 0; border: 0; background: none; cursor: default; }
  .lp-mstep .lp-step__title { color: var(--text-strong-950); }
  .lp-mstep .lp-step__body { gap: 6px; padding-top: 4px; }
  .lp-mstep .lp-step__desc {
    height: auto; max-height: none; overflow: visible;
    opacity: 1; margin-top: 0;
  }
  .lp-mstep .lp-preview__panel { width: 100%; flex: none; }
  .lp-mstep__screen {
    position: relative; width: 100%; aspect-ratio: 1;
    border-radius: 24px; border: 1px solid var(--bg-weak-50);
    background-image: none; background-color: var(--bg-weak-50);
    overflow: hidden;
  }
  /* Keep the closing CTA aligned with the inset cards above it. */
  .lp-cta { padding-inline: 0; }
  .lp-cta__banner {
    width: calc(100% - 48px);
    border-radius: var(--radius-panel);
  }
  .lp-footer { padding-inline: 0; }
  .lp-footer__card { border-radius: 0; }
  .lp-footcta { padding: 32px 0 64px; }
}
@media (max-width: 980px) {
  .lp { --h1-size: 40px; --h1-lh: 46px; --h2-size: 34px; --h2-lh: 40px; }
  .lp-section__inner.lp-integ2 { flex-direction: column; align-items: center; gap: 32px; }
  .lp-integ2__text { align-items: center; text-align: center; }
  .lp-integ2__logos { width: 100%; }
  .lp-cards { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .lp-card--a,.lp-card--b,.lp-card--c,.lp-card--d,.lp-card--featured { grid-column: auto; grid-row: auto; }
  .lp-steps-row { flex-direction: column; gap: 20px; }
  .lp-step-sep { display: none; }
  .lp-slider--split { flex-direction: column; }
  .lp-steps-col { width: 100%; }
  .lp-slider--split .lp-preview__screen { width: 100%; height: auto; aspect-ratio: 1; }
  .lp-preview { height: auto; }
  .lp-slide { position: relative; flex-direction: column; }
  .lp-slide:not(.lp-slide--active) { display: none; }
  .lp-preview__card { width: 100%; }
  .lp-preview__panel { min-height: 0; aspect-ratio: 818 / 480; height: auto; }
  .lp-testi { padding-block: 72px; }
  .lp-form__row { flex-direction: column; }
  .lp-page { padding: 64px 24px 80px; }
  .lp-testi__col:nth-child(3) { display: none; }
  .lp-testi__col--edge { height: 696px; }
  .lp-testi__col:nth-child(2) { display: none; }
  .lp-footer { padding-block: 64px; }
  .lp-footer__card { padding: 40px 32px; }
  .lp-footer__items { flex-wrap: wrap; }
  .lp-footer__vr { display: none; }
  .lp-footer__brandcol { flex-basis: 100%; }
  .lp-cta__motif { display: none; }
}
@media (max-width: 620px) {
  .lp { --h1-size: 32px; --h1-lh: 38px; --h2-size: 27px; --h2-lh: 32px; }
  .lp-nav__inner { padding: 12px 16px; gap: 12px; }
  .lp-brand { --lp-brand-logo-width: 96px; height: 24px; }
  .lp-nav__actions { gap: 8px; }
  .lp-nav__actions .lp-btn--ghost { display: none; }
  .lp-btn--nav { padding: 8px 10px; font-size: 14px; }
  .lp-nav__links { padding: 8px 16px 20px; }
  .lp-integ2__logos {
    max-width: 360px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .lp-integ2__tile {
    width: 100%; height: auto; aspect-ratio: 1;
    border-radius: 24px;
  }
  .lp-integ2__tile img { width: 48%; height: auto; }
  .lp-cards { grid-template-columns: 1fr; }
  .lp-legal__grid { grid-template-columns: 1fr; }
  .lp-section { padding-block: 64px; }
  .lp-cta { padding: 24px 0; }
  .lp-footer__detail {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .lp-footer__social,
  .lp-footer__legal {
    flex: none;
    width: auto;
    justify-content: center;
  }
  .lp-footer__copy { text-align: center; }
}
@media (max-width: 360px) {
  .lp-nav__inner { gap: 8px; }
  #nav-logo-anim { width: 96px; }
  .lp-nav__download-suffix { display: none; }
  .lp-btn--nav { padding-inline: 8px; font-size: 13px; }
}