/* ============================================================
   LATCH — marketing landing page
   Hero · problem · features (bento) · how it works · social
   proof · compatibility · FAQ · CTA · footer.
   Accent inherits the global --border-active token from
   styles.css, so a brand recolor propagates here automatically.
   ============================================================ */

.landing {
  --lp-bg: #0a0a0b;
  --lp-card: #252528;
  --lp-tile: rgba(255, 255, 255, 0.022);
  --lp-tile-hover: rgba(255, 255, 255, 0.04);
  --lp-text: #ffffff;
  --lp-text-sub: rgba(255, 255, 255, 0.82);
  --lp-text-dim: rgba(255, 255, 255, 0.7);
  --lp-text-muted: rgba(255, 255, 255, 0.64);
  --lp-hairline: rgba(255, 255, 255, 0.12);
  --lp-display: var(--font-sans); /* Helvetica Neue on Apple, Arimo fallback */
  --lp-body: 'Inter', system-ui, sans-serif;
  --lp-mono: 'Space Grotesk', 'IBM Plex Mono', monospace;
  --lp-gutter: 64px;
  --lp-max: 1200px;

  display: block;
  min-height: 100dvh;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-body);
  -webkit-font-smoothing: antialiased;
}

.landing a { text-decoration: none; }
.lp-brand { color: var(--lp-text); }

/* ── Header ───────────────────────────────────────────── */

.lp-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--lp-gutter);
}

.lp-brand { display: flex; align-items: center; gap: 15px; }
.lp-brand-logo { display: block; height: 34px; width: auto; }

.lp-brand-tagline {
  max-width: 86px;
  font-family: var(--lp-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}

.lp-brand-tagline-beta {
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.lp-nav { display: flex; align-items: center; gap: 30px; }

.lp-nav-link {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--lp-text-dim);
  transition: color 0.15s;
}

.lp-nav-link:hover { color: var(--lp-text); }

/* ── Buttons ──────────────────────────────────────────── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Neutralize native <button> chrome (UA background/border/appearance/font)
     so a real <button> renders identically to the <a class="lp-btn"> usage
     elsewhere on the page. Anchors have no native chrome, so this is a
     no-op for them — variant rules below re-apply the intended look. */
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  font-family: var(--lp-body);
  text-align: center;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.lp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), 0 0 0 4px rgba(255, 255, 255, 0.32);
}

.lp-btn-outline {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.lp-btn-outline:hover:not(.lp-btn--roll) {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.04);
}

.lp-btn-primary {
  padding: 13px 22px;
  border-radius: 9px;
  background: #ffffff;
  color: #0a0a0b;
  font-size: 15px;
  font-weight: 600;
}

.lp-btn-primary:hover:not(.lp-btn--roll) { background: #ececec; }

.lp-btn-lg { padding: 16px 30px; font-size: 16px; border-radius: 10px; }

/* Roll hover (GSAP) — static fallback when motion is reduced or touch-only */
.lp-btn--roll {
  position: relative;
  /* Clip roll stacks in .lp-btn-chrome / .lp-btn-word — not here, or inset:-1px borders clip */
  background: transparent !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  transition: none !important;
  flex-shrink: 0;
  isolation: isolate;
}

.lp-btn--roll:hover,
.lp-btn--roll:focus-visible,
.lp-btn--roll:active {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  transition: none !important;
}

.lp-btn-outline.lp-btn--roll {
  /* Match outline chrome border width so outer box never shrinks on init */
  border: 1px solid transparent !important;
}

.lp-btn-primary.lp-btn--roll {
  border: none !important;
}

.lp-btn-chrome {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.lp-btn-outline.lp-btn--roll .lp-btn-chrome {
  /* Cover the transparent outer border so chrome fills the full visual box */
  inset: -1px;
  /* Single ring on the wrapper — slabs only supply fill to avoid seam lines */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: box-shadow 0.15s ease;
}

.lp-btn-outline.lp-btn--roll.is-roll-hover .lp-btn-chrome {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.lp-btn-chrome-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lp-btn-chrome-layer {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  border-radius: inherit;
}

.lp-btn-chrome-layer--outline {
  border: 1px solid transparent;
  background: transparent;
}

.lp-btn-chrome-layer--outline.lp-btn-chrome-layer--hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.04);
}

.lp-btn-chrome-layer--primary {
  /* No border — transparent borders exposed the dark page at slab edges */
  border: none;
  background: #ffffff;
}

.lp-btn-chrome-layer--primary.lp-btn-chrome-layer--hover {
  background: #ececec;
}

.lp-btn-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
  overflow: hidden;
  max-height: 1em;
  line-height: 1;
}

.lp-btn-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: 1em;
  line-height: 1;
  /* Cap-height window — descenders live inside each clipped line, not below the word box */
  clip-path: inset(0);
}

.lp-btn-word-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.lp-btn-word-line {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 1em;
  line-height: 1;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn--roll {
    border: revert !important;
    background: revert !important;
  }

  .lp-btn-outline.lp-btn--roll {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  .lp-btn-chrome { display: none; }
}

/* ── Hero (copy above, large product rises from bottom) ─ */

.lp-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100dvh;
  margin: 0;
  padding: 28px var(--lp-gutter) clamp(48px, 8vw, 96px);
  overflow: hidden;
}

.lp-hero-bg {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: min(1780px, 124vw);
  height: clamp(560px, 78dvh, 920px);
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 94%,
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 94%,
    #000 100%
  );
}

.lp-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 11, 0.82) 0%,
    rgba(10, 10, 11, 0.28) 18%,
    transparent 38%,
    transparent 88%,
    rgba(10, 10, 11, 0.18) 100%
  );
  pointer-events: none;
}

.lp-hero-bg picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lp-hero-bg img {
  display: block;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 32%;
  will-change: transform;
}

.lp-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 925px;
  max-width: 100%;
  margin-top: clamp(4px, 1.5dvh, 20px);
  margin-bottom: auto;
  padding-bottom: clamp(340px, 58dvh, 700px);
  text-align: center;
  will-change: transform;
}

.lp-hero-title {
  margin: 0;
  font-family: var(--lp-display);
  font-weight: 400;
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--lp-text);
}

.lp-hero-accent { color: var(--border-active); }

/* ── Hero rotating word ───────────────────────────────── */

.lp-hero-rotator-host {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

/* Invisible in-flow twin of the current word: reserves the exact box the
   browser would use for plain text, so the host's baseline lines up with
   the rest of the heading exactly like normal text would. Its width is
   animated in sync with the visible word so the trailing period tracks the
   end of the line and the centered line re-centers as the word changes.
   Kept overflow-visible (never clipped) so its text baseline is preserved. */
.lp-hero-rotator-spacer {
  display: inline-block;
  visibility: hidden;
  white-space: nowrap;
}

/* Absolutely positioned so it never participates in the host's own line
   box — its overflow:hidden would otherwise force the host's baseline to
   fall back to its bottom margin edge instead of the true text baseline. */
.lp-hero-rotator-stage {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
}

.lp-hero-rotator-word {
  position: absolute;
  left: 0;
  white-space: nowrap;
}

.lp-hero-rotator-char {
  display: inline-block;
  will-change: transform;
}

.lp-hero-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 560px;
  max-width: 100%;
}

.lp-hero-sub {
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: var(--lp-text-muted);
}

.lp-hero-actions { display: flex; align-items: center; gap: 28px; }

.lp-hero-demo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text-dim);
  transition: color 0.15s;
}

.lp-hero-demo span {
  display: inline-block;
  transition: transform 0.15s;
}

.lp-hero-demo:hover { color: var(--lp-text); }

.lp-hero-demo:hover span { transform: translateX(3px); }

.lp-hero-trust {
  margin: 0;
  font-family: var(--lp-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
}

/* Framed product screenshot */
.lp-shot { width: 100%; max-width: 1315px; }

.lp-shot-frame {
  padding: 8px;
  border-radius: 16px;
  background: var(--lp-card);
  box-shadow:
    0 0 60px color-mix(in srgb, var(--border-active) 12%, transparent),
    0 40px 90px rgba(0, 0, 0, 0.5);
}

.lp-shot-frame img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ── Section scaffold ─────────────────────────────────── */

.lp-section {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 120px var(--lp-gutter);
}

/* Offset in-page anchor jumps so section tops clear the fixed pill nav */
.lp-section { scroll-margin-top: 96px; }
#history, #library, #device-sync { scroll-margin-top: 96px; }

.lp-section-head { max-width: 760px; margin-bottom: 80px; }
.lp-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.lp-eyebrow {
  display: inline-block;
  font-family: var(--lp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--border-active);
}

.lp-section-title {
  margin: 18px 0 0;
  font-family: var(--lp-display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--lp-text);
}

/* ── Staggered highlights (alternating image/text) ────── */

.lp-stagger-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 120px);
}

.lp-stagger-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

/* Alternate: even rows place the image on the right */
.lp-stagger-row:nth-child(even) .lp-stagger-media { order: 2; }

.lp-stagger-media { min-width: 0; }

.lp-stagger-frame {
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--lp-hairline);
  background: var(--lp-card);
  box-shadow:
    0 0 50px color-mix(in srgb, var(--border-active) 9%, transparent),
    0 30px 70px rgba(0, 0, 0, 0.45);
}

.lp-stagger-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}

/* Preset library shot: fades out to imply the list keeps going, with a
   count badge that makes the "unlimited" idea legible at a glance. */
.lp-shot-fade {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
}

.lp-shot-fade img { margin: 0; }

.lp-shot-fade-mask {
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(to bottom, transparent, #000 88%);
  pointer-events: none;
}

.lp-shot-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border-active) 40%, transparent);
  background: rgba(10, 10, 11, 0.75);
  backdrop-filter: blur(6px);
  font-family: var(--lp-mono);
  font-size: 11px;
  color: var(--lp-text);
  white-space: nowrap;
}

.lp-shot-badge b { color: var(--border-active); font-size: 13px; font-weight: 600; }
.lp-shot-badge em { font-style: normal; color: var(--lp-text-muted); }

/* History art reused from the bento, sized to sit in a stagger frame */
.lp-stagger-frame .lp-art-history {
  border-radius: 9px;
  min-height: 300px;
  gap: 16px;
  padding: 34px 30px;
}

.lp-stagger-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 44ch;
}

.lp-stagger-tag {
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--border-active);
}

.lp-stagger-title {
  margin: 4px 0 0;
  font-family: var(--lp-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--lp-text);
}

.lp-stagger-copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--lp-text-muted);
}

/* ── Features (bento) ─────────────────────────────────── */

.lp-bento {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 16px;
}

.lp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--lp-hairline);
  border-radius: 18px;
  background: var(--lp-tile);
  overflow: hidden;
  transition: border-color 0.18s, background 0.18s;
}

.lp-tile:hover { border-color: rgba(255, 255, 255, 0.2); background: var(--lp-tile-hover); }

.lp-tile-body { display: flex; flex-direction: column; gap: 10px; }

.lp-tile-tag {
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--border-active);
}

.lp-tile-title {
  margin: 4px 0 0;
  font-family: var(--lp-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--lp-text);
}

.lp-tile-copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.56;
  color: var(--lp-text-muted);
  max-width: 48ch;
}

/* media region (shared) */
.lp-tile-media {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  background: #050506;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 132px;
}

.lp-tile-media--shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* media fills the remaining height so the three cards align */
.lp-tile-media { flex: 1; }

/* ── Bento art: history timeline ──────────────────────── */
.lp-art-history {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  padding: 20px 22px;
  background: #0e0e10;
}
.lp-hx {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 18px;
  font-family: var(--lp-mono);
  font-size: 12px;
  color: var(--lp-text-muted);
}
.lp-hx::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -13px;
  height: 13px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.lp-hx:first-child::before { display: none; }
.lp-hx i {
  position: absolute;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: var(--lp-bg);
}
.lp-hx--cur i { background: var(--border-active); border-color: var(--border-active); }
.lp-hx b { color: var(--lp-text); font-weight: 500; }
.lp-hx-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-hx em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  color: var(--border-active);
  border: 1px solid color-mix(in srgb, var(--border-active) 35%, transparent);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ── Bento art: drag preset onto device slot ──────────── */
.lp-art-dnd {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(70% 70% at 30% 50%, color-mix(in srgb, var(--border-active) 8%, transparent), transparent 70%),
    #0e0e10;
}

/* fixed-size stage keeps the animation's pixel offsets exact */
.lp-dnd-stage {
  position: relative;
  width: 208px;
  height: 108px;
}

/* vertical stack of device slots, pinned right */
.lp-dnd-slots {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-dnd-slots i {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 86px;
  height: 21px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
.lp-dnd-slots i b,
.lp-dnd-slots i s {
  display: block;
  height: 3px;
  border-radius: 2px;
}
.lp-dnd-slots i b { width: 32px; background: rgba(255, 255, 255, 0.26); }
.lp-dnd-slots i s { width: 12px; background: color-mix(in srgb, var(--border-active) 65%, transparent); }
/* slots that already hold a preset sit quietly in the background */
.lp-dnd-slots i.is-filled b { background: rgba(255, 255, 255, 0.16); }

.lp-dnd-slots i.is-target {
  animation: lp-dnd-fill 5.6s ease-in-out infinite;
}
/* the dropped preset's name + tag appear once it lands */
.lp-dnd-slots i.is-target b,
.lp-dnd-slots i.is-target s {
  opacity: 0;
  animation: lp-dnd-land 5.6s ease-out infinite;
}
.lp-dnd-slots i.is-target s { animation-delay: 0.08s; }

@keyframes lp-dnd-land {
  0%, 56%   { opacity: 0; transform: translateX(-4px); }
  65%, 89%  { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(-4px); }
}

.lp-dnd-card {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -27px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  width: 84px;
  height: 54px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-active) 45%, transparent);
  background: rgba(20, 20, 22, 0.96);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
  animation: lp-dnd-drag 5.6s ease-in-out infinite;
}
/* grip rail on the left, same 2×3 dot column the library rows use */
.lp-dnd-grip {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.34);
}
.lp-dnd-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.lp-dnd-lines b { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); }
.lp-dnd-lines b:nth-of-type(1) { width: 100%; }
.lp-dnd-lines b:nth-of-type(2) { width: 62%; background: color-mix(in srgb, var(--border-active) 55%, transparent); }

/* pointer grabs the card by its grip and carries it across */
.lp-dnd-cursor {
  position: absolute;
  left: 13px;
  top: 50%;
  margin-top: -4px;
  width: 12px;
  height: 16px;
  opacity: 0;
  animation: lp-dnd-cursor 5.6s ease-in-out infinite;
}

/* card travels to the 3rd slot: x = 208 - 86/2 - 84/2 = 123px, y = +14.5px */
@keyframes lp-dnd-drag {
  0%, 12%   { transform: translate(0, 0) scale(1); opacity: 1; }
  18%       { transform: translate(0, -4px) scale(1.04); opacity: 1; }
  50%       { transform: translate(123px, 14.5px) scale(1.03); opacity: 1; }
  58%       { transform: translate(123px, 14.5px) scale(0.9); opacity: 0; }
  93%       { transform: translate(123px, 14.5px) scale(0.9); opacity: 0; }
  94%       { transform: translate(0, 0) scale(1); opacity: 0; }
  100%      { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* cursor: arrive → press → carry the card → release → leave */
@keyframes lp-dnd-cursor {
  0%        { opacity: 0; transform: translate(-12px, 10px) scale(1); }
  7%        { opacity: 1; transform: translate(0, 0) scale(1); }
  12%       { opacity: 1; transform: translate(0, 0) scale(0.82); }
  18%       { opacity: 1; transform: translate(0, -4px) scale(0.86); }
  50%       { opacity: 1; transform: translate(123px, 14.5px) scale(0.86); }
  57%       { opacity: 1; transform: translate(123px, 14.5px) scale(1); }
  72%       { opacity: 0; transform: translate(123px, 14.5px) scale(1); }
  100%      { opacity: 0; transform: translate(123px, 14.5px) scale(1); }
}

@keyframes lp-dnd-fill {
  0%, 34% {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 0 0 transparent;
  }
  46% {
    border-color: color-mix(in srgb, var(--border-active) 60%, transparent);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 0 transparent;
  }
  59% {
    border-color: var(--border-active);
    background: color-mix(in srgb, var(--border-active) 24%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--border-active) 16%, transparent);
  }
  72%, 91% {
    border-color: var(--border-active);
    background: color-mix(in srgb, var(--border-active) 16%, transparent);
    box-shadow: 0 0 0 0 transparent;
  }
  100% {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ── Bento art: randomize + lock knobs ────────────────── */
.lp-art-randomize {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 26px 18px;
  background:
    radial-gradient(70% 70% at 50% 34%, color-mix(in srgb, var(--border-active) 8%, transparent), transparent 70%),
    #0e0e10;
}
/* horizontal rows, mirroring the editor's knob grid */
.lp-rnd-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}
/* knob + label, same stack as the editor's knob cell */
.lp-rnd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.lp-rnd-cell em {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.lp-rnd-knob {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}
.lp-rnd-knob::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--border-active) 70%, white 10%);
  transform-origin: 50% 14px;
  transform: translateX(-50%) rotate(var(--a1, 0deg));
  animation: lp-rnd-turn 4.8s cubic-bezier(0.34, 1.3, 0.5, 1) infinite;
}
/* stagger so the sweep cascades across the grid, not a lockstep flip */
.lp-rnd-cell:nth-child(2) .lp-rnd-knob::after { animation-delay: 0.05s; }
.lp-rnd-cell:nth-child(3) .lp-rnd-knob::after { animation-delay: 0.10s; }
.lp-rnd-cell:nth-child(4) .lp-rnd-knob::after { animation-delay: 0.15s; }
.lp-rnd-row:nth-of-type(2) .lp-rnd-cell:nth-child(1) .lp-rnd-knob::after { animation-delay: 0.20s; }
.lp-rnd-row:nth-of-type(2) .lp-rnd-cell:nth-child(2) .lp-rnd-knob::after { animation-delay: 0.25s; }
.lp-rnd-row:nth-of-type(2) .lp-rnd-cell:nth-child(3) .lp-rnd-knob::after { animation-delay: 0.30s; }
.lp-rnd-row:nth-of-type(2) .lp-rnd-cell:nth-child(4) .lp-rnd-knob::after { animation-delay: 0.35s; }

/* locked knobs hold their position — that's the whole point */
.lp-rnd-cell:has(.is-locked) em { background: color-mix(in srgb, var(--border-active) 45%, transparent); }
.lp-rnd-knob.is-locked { border-color: color-mix(in srgb, var(--border-active) 55%, transparent); }
.lp-rnd-knob.is-locked::after {
  background: rgba(255, 255, 255, 0.3);
  animation: none;
}

@keyframes lp-rnd-turn {
  0%, 20%   { transform: translateX(-50%) rotate(var(--a1, 0deg)); }
  28%, 52%  { transform: translateX(-50%) rotate(var(--a2, 0deg)); }
  60%, 84%  { transform: translateX(-50%) rotate(var(--a3, 0deg)); }
  92%, 100% { transform: translateX(-50%) rotate(var(--a1, 0deg)); }
}

/* lock badge — top-right of the knob, matching the editor */
.lp-rnd-lock {
  position: absolute;
  top: -7px;
  right: -8px;
  width: 14px;
  height: 14px;
  color: var(--border-active);
}

/* ── Bento art: import a preset file into the library ─── */
/* Three beats on one 9s clock: Import button → file picker → library. */
.lp-art-import {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--border-active) 8%, transparent), transparent 70%),
    #0e0e10;
}
.lp-imp-stage {
  position: relative;
  width: 208px;
  height: 112px;
}

/* ── Beat 1: the Import button ── */
.lp-imp-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: lp-imp-scene 9s ease-in-out infinite;
}
.lp-imp-btn {
  padding: 7px 18px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--border-active) 55%, transparent);
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #fff;
  animation: lp-imp-btn-press 9s ease-in-out infinite;
}

/* ── Beat 2: the file picker ── */
.lp-imp-dialog {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #17171a;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  opacity: 0;
  animation: lp-imp-dialog 9s ease-in-out infinite;
}
.lp-imp-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.lp-imp-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.lp-imp-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 0;
}
.lp-imp-file {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 17px;
  padding: 0 7px;
  border-radius: 4px;
}
/* the little document glyph */
.lp-imp-file s {
  display: block;
  width: 8px;
  height: 10px;
  border-radius: 1.5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.lp-imp-file b {
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.lp-imp-file em {
  font-family: var(--lp-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: #fff;
}
.lp-imp-file.is-picked {
  background: color-mix(in srgb, var(--border-active) 30%, transparent);
}
.lp-imp-file.is-picked s { border-color: rgba(255, 255, 255, 0.75); }

.lp-imp-open {
  position: absolute;
  right: 9px;
  bottom: 8px;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--border-active) 55%, transparent);
  font-family: var(--lp-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: #fff;
  animation: lp-imp-press 9s ease-in-out infinite;
}

.lp-imp-cursor {
  position: absolute;
  width: 12px;
  height: 16px;
  opacity: 0;
}
.lp-imp-cursor--btn {
  left: 122px;
  top: 84px;
  animation: lp-imp-cursor-btn 9s ease-in-out infinite;
}
.lp-imp-cursor--open {
  left: 62px;
  top: 46px;
  animation: lp-imp-cursor-open 9s ease-in-out infinite;
}

/* ── Beat 3: the preset landing in the library ── */
.lp-imp-library {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  opacity: 0;
  animation: lp-imp-library 9s ease-out infinite;
}
.lp-imp-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}
.lp-imp-row b {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}
.lp-imp-row s {
  display: block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--border-active) 70%, transparent);
}
/* the newly imported preset — drops in at the top and pushes the rest down */
.lp-imp-row.is-new {
  border-color: var(--border-active);
  background: color-mix(in srgb, var(--border-active) 14%, transparent);
  animation: lp-imp-insert 9s cubic-bezier(0.34, 1.28, 0.5, 1) infinite;
}
.lp-imp-row.is-new em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: -0.005em;
  color: #fff;
  white-space: nowrap;
}

@keyframes lp-imp-scene {
  0%        { opacity: 0; transform: scale(0.96); }
  3%, 22%   { opacity: 1; transform: scale(1); }
  27%, 100% { opacity: 0; transform: scale(0.97); }
}

@keyframes lp-imp-btn-press {
  0%, 15%   { background: transparent; box-shadow: 0 0 0 0 transparent; }
  17%, 20%  { background: color-mix(in srgb, var(--border-active) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--border-active) 16%, transparent); }
  23%, 100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* cursor travels up-left onto the Import button and clicks */
@keyframes lp-imp-cursor-btn {
  0%, 4%    { opacity: 0; transform: translate(0, 0); }
  8%        { opacity: 1; transform: translate(0, 0); }
  15%       { opacity: 1; transform: translate(-26px, -32px) scale(1); }
  17%       { opacity: 1; transform: translate(-26px, -32px) scale(0.82); }
  20%       { opacity: 1; transform: translate(-26px, -32px) scale(1); }
  25%, 100% { opacity: 0; transform: translate(-26px, -32px); }
}

@keyframes lp-imp-dialog {
  0%, 27%   { opacity: 0; transform: scale(0.95); }
  31%, 55%  { opacity: 1; transform: scale(1); }
  60%       { opacity: 0; transform: scale(0.96); }
  100%      { opacity: 0; transform: scale(0.95); }
}

/* cursor crosses the picker to the Open button and clicks */
@keyframes lp-imp-cursor-open {
  0%, 32%   { opacity: 0; transform: translate(0, 0); }
  35%       { opacity: 1; transform: translate(0, 0); }
  47%       { opacity: 1; transform: translate(104px, 46px) scale(1); }
  49%       { opacity: 1; transform: translate(104px, 46px) scale(0.82); }
  52%       { opacity: 1; transform: translate(104px, 46px) scale(1); }
  57%, 100% { opacity: 0; transform: translate(104px, 46px); }
}

@keyframes lp-imp-press {
  0%, 48%   { background: transparent; box-shadow: 0 0 0 0 transparent; }
  50%, 53%  { background: color-mix(in srgb, var(--border-active) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-active) 18%, transparent); }
  57%, 100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

@keyframes lp-imp-library {
  0%, 60%   { opacity: 0; transform: scale(0.96); }
  66%, 94%  { opacity: 1; transform: scale(1); }
  99%, 100% { opacity: 0; transform: scale(0.96); }
}

/* collapsing height is what shoves the rows below it down the list */
@keyframes lp-imp-insert {
  0%, 66% {
    height: 0;
    margin-bottom: -7px;
    opacity: 0;
    transform: translateY(-10px);
    box-shadow: 0 0 0 0 transparent;
  }
  70% {
    height: 22px;
    margin-bottom: 0;
    opacity: 0.55;
    transform: translateY(-4px);
    box-shadow: 0 0 0 0 transparent;
  }
  76% {
    height: 22px;
    margin-bottom: 0;
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--border-active) 16%, transparent);
  }
  84%, 96% {
    height: 22px;
    margin-bottom: 0;
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 0 0 transparent;
  }
  100% {
    height: 0;
    margin-bottom: -7px;
    opacity: 0;
    transform: translateY(-10px);
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (max-width: 640px) {
  .lp-dnd-stage { width: 178px; height: 96px; }
  .lp-dnd-slots i { width: 74px; height: 19px; padding: 0 7px; gap: 5px; }
  .lp-dnd-slots i b { width: 26px; }
  .lp-dnd-slots i s { width: 10px; }
  .lp-dnd-card { width: 74px; height: 48px; padding: 0 9px; margin-top: -24px; gap: 7px; }
  .lp-dnd-cursor { left: 11px; }
  /* card travels to the 3rd slot: x = 178 - 74/2 - 74/2 = 104px, y = +13.5px */
  @keyframes lp-dnd-drag {
    0%, 12%  { transform: translate(0, 0) scale(1); opacity: 1; }
    18%      { transform: translate(0, -4px) scale(1.04); opacity: 1; }
    50%      { transform: translate(104px, 13.5px) scale(1.03); opacity: 1; }
    58%      { transform: translate(104px, 13.5px) scale(0.9); opacity: 0; }
    93%      { transform: translate(104px, 13.5px) scale(0.9); opacity: 0; }
    94%      { transform: translate(0, 0) scale(1); opacity: 0; }
    100%     { transform: translate(0, 0) scale(1); opacity: 1; }
  }
  @keyframes lp-dnd-cursor {
    0%       { opacity: 0; transform: translate(-12px, 10px) scale(1); }
    7%       { opacity: 1; transform: translate(0, 0) scale(1); }
    12%      { opacity: 1; transform: translate(0, 0) scale(0.82); }
    18%      { opacity: 1; transform: translate(0, -4px) scale(0.86); }
    50%      { opacity: 1; transform: translate(104px, 13.5px) scale(0.86); }
    57%      { opacity: 1; transform: translate(104px, 13.5px) scale(1); }
    72%      { opacity: 0; transform: translate(104px, 13.5px) scale(1); }
    100%     { opacity: 0; transform: translate(104px, 13.5px) scale(1); }
  }
  .lp-rnd-row { gap: 14px; }
  .lp-art-randomize { gap: 20px; }
  .lp-imp-stage { width: 190px; height: 106px; }
  .lp-imp-file em { font-size: 9px; }
  .lp-imp-row.is-new em { font-size: 10px; }
  .lp-imp-cursor--btn { left: 112px; top: 78px; }
  @keyframes lp-imp-cursor-btn {
    0%, 4%    { opacity: 0; transform: translate(0, 0); }
    8%        { opacity: 1; transform: translate(0, 0); }
    15%       { opacity: 1; transform: translate(-24px, -30px) scale(1); }
    17%       { opacity: 1; transform: translate(-24px, -30px) scale(0.82); }
    20%       { opacity: 1; transform: translate(-24px, -30px) scale(1); }
    25%, 100% { opacity: 0; transform: translate(-24px, -30px); }
  }
  @keyframes lp-imp-cursor-open {
    0%, 32%   { opacity: 0; transform: translate(0, 0); }
    35%       { opacity: 1; transform: translate(0, 0); }
    47%       { opacity: 1; transform: translate(88px, 42px) scale(1); }
    49%       { opacity: 1; transform: translate(88px, 42px) scale(0.82); }
    52%       { opacity: 1; transform: translate(88px, 42px) scale(1); }
    57%, 100% { opacity: 0; transform: translate(88px, 42px); }
  }
}

/* Motion here is decorative — hold a legible resting state instead */
@media (prefers-reduced-motion: reduce) {
  .lp-dnd-card,
  .lp-dnd-cursor,
  .lp-dnd-slots i.is-target,
  .lp-dnd-slots i.is-target b,
  .lp-dnd-slots i.is-target s,
  .lp-rnd-knob::after,
  .lp-imp-scene,
  .lp-imp-btn,
  .lp-imp-dialog,
  .lp-imp-cursor,
  .lp-imp-open,
  .lp-imp-library,
  .lp-imp-row.is-new {
    animation: none !important;
  }
  /* drag-and-drop rests on the completed drop */
  .lp-dnd-card,
  .lp-dnd-cursor { opacity: 0; }
  .lp-dnd-slots i.is-target {
    border-color: var(--border-active);
    background: color-mix(in srgb, var(--border-active) 16%, transparent);
  }
  .lp-dnd-slots i.is-target b,
  .lp-dnd-slots i.is-target s { opacity: 1; transform: none; }
  /* import rests on the imported preset sitting in the library */
  .lp-imp-scene,
  .lp-imp-dialog,
  .lp-imp-cursor { opacity: 0; }
  .lp-imp-library { opacity: 1; transform: none; }
  .lp-imp-row.is-new {
    height: 22px;
    margin-bottom: 0;
    opacity: 1;
    transform: none;
  }
}

/* ── Bento art: browser frame ─────────────────────────── */
.lp-art-browser {
  display: flex;
  flex-direction: column;
  background: #050506;
}
.lp-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.lp-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.lp-browser-bar em {
  margin-left: 10px;
  font-style: normal;
  font-family: var(--lp-mono);
  font-size: 11px;
  color: var(--lp-text-muted);
}
.lp-art-browser img {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top left;
}

/* ── How it works (Midday-style vertical stepper) ─────── */

.lp-how { padding-top: 100px; }

.lp-hiw-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.lp-hiw-title {
  margin: 0 0 40px;
  font-family: var(--lp-display);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--lp-text);
}

.lp-hiw-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 2px;
  position: relative;
}

.lp-hiw-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--lp-hairline);
}

.lp-hiw-step {
  position: relative;
  min-height: 0;
}

@media (min-width: 1025px) {
  .lp-hiw-step { min-height: 32vh; }
  .lp-hiw-list { padding-bottom: 14vh; }
}

.lp-hiw-trigger {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0 0 36px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.lp-hiw-step:last-child .lp-hiw-trigger { padding-bottom: 0; }

.lp-hiw-marker {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.25s, transform 0.25s;
}

.lp-hiw-step-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.lp-hiw-step-title {
  font-family: var(--lp-display);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.25s;
}

.lp-hiw-step.is-active .lp-hiw-marker {
  background: var(--lp-text);
  transform: scale(1.08);
}

.lp-hiw-step.is-active .lp-hiw-step-title { color: var(--lp-text); }

.lp-hiw-step-copy {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-text-muted);
  opacity: 0;
  transition: max-height 0.4s ease, margin 0.35s ease, opacity 0.3s ease;
}

.lp-hiw-step.is-active .lp-hiw-step-copy {
  max-height: 140px;
  margin-top: 10px;
  opacity: 1;
}

@media (min-width: 1025px) {
  /* Reserve copy space on desktop so step activation doesn't reflow the list. */
  .lp-hiw-step-copy {
    max-height: 96px;
    margin-top: 10px;
  }

  .lp-hiw-step.is-active .lp-hiw-step-copy { max-height: 96px; }
}

.lp-hiw-visual {
  position: sticky;
  top: 96px;
  min-height: clamp(320px, 42vw, 480px);
  border: 1px solid var(--lp-hairline);
  border-radius: 16px;
  background: #0e0e10;
  overflow: hidden;
  isolation: isolate;
}

.lp-hiw-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.lp-hiw-panel.is-active {
  opacity: 1;
  visibility: visible;
}

.lp-hiw-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.lp-hiw-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

/* Connect step mock */
.lp-hiw-art--connect {
  gap: 0;
  padding: 48px 32px;
  background:
    radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--border-active) 10%, transparent), transparent 70%),
    #0e0e10;
}

/* Shared Microcosm silhouette used in Connect + Sync how-it-works panels.
   Same dark graphic language as before, but the top-down reads like the real
   pedal: two rows of four knobs, the four variation LED bars, three footswitches. */
.lp-hiw-pedal {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 118px;
  height: 92px;
  padding: 10px 12px 9px;
  box-sizing: border-box;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01)),
    #161618;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lp-hiw-pedal-knobs {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.lp-hiw-pedal-knobs i {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.2), transparent 55%),
    rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.lp-hiw-pedal-leds {
  display: flex;
  justify-content: space-between;
  width: 72%;
  margin: 2px 0 1px;
}

.lp-hiw-pedal-leds i {
  width: 12px;
  height: 4px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.lp-hiw-pedal-leds i.is-on {
  background: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.45);
}

.lp-hiw-pedal-switches {
  display: flex;
  justify-content: space-between;
  width: 78%;
}

.lp-hiw-pedal-switches i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.lp-hiw-pedal-switches i.is-on {
  background: var(--border-active);
  border-color: color-mix(in srgb, var(--border-active) 80%, white);
  box-shadow: 0 0 8px color-mix(in srgb, var(--border-active) 70%, transparent);
}

.lp-hiw-connect-cable {
  flex: 0 0 56px;
  height: 3px;
  margin: 0 -2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
}

.lp-hiw-connect-browser {
  flex: 1;
  max-width: 280px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #121214;
  overflow: hidden;
}

.lp-hiw-connect-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--lp-mono);
  font-size: 11px;
  color: var(--lp-text-muted);
}

.lp-hiw-connect-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.lp-hiw-connect-bar em {
  margin-left: auto;
  font-style: normal;
  color: rgba(255, 255, 255, 0.42);
}

.lp-hiw-connect-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  font-family: var(--lp-mono);
  font-size: 13px;
  color: var(--lp-text-sub);
}

.lp-hiw-connect-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-active);
  box-shadow: 0 0 12px color-mix(in srgb, var(--border-active) 65%, transparent);
}

/* History step mock */
.lp-hiw-art--history {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  padding: 36px 40px;
  background: #0e0e10;
}

/* Sync step mock */
.lp-hiw-art--sync {
  gap: 0;
  padding: 48px 32px;
  background:
    radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--border-active) 10%, transparent), transparent 70%),
    #0e0e10;
}

.lp-hiw-sync-cable {
  flex: 0 0 56px;
  height: 3px;
  margin: 0 -2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
}

.lp-hiw-sync-bank {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 300px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #121214;
  overflow: hidden;
}

.lp-hiw-sync-bank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--lp-mono);
}

.lp-hiw-sync-bank-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

.lp-hiw-sync-bank-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--border-active);
}

.lp-hiw-sync-bank-all i,
.lp-hiw-sync-status i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-active);
  box-shadow: 0 0 8px color-mix(in srgb, var(--border-active) 65%, transparent);
}

.lp-hiw-sync-list {
  display: flex;
  flex-direction: column;
}

.lp-hiw-sync-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--lp-mono);
  font-size: 12px;
}

.lp-hiw-sync-row:last-child { border-bottom: none; }

.lp-hiw-sync-num { color: rgba(255, 255, 255, 0.32); width: 10px; }

.lp-hiw-sync-name {
  flex: 1;
  color: var(--lp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-hiw-sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--border-active);
}

@media (prefers-reduced-motion: reduce) {
  .lp-hiw-step-copy {
    display: block;
    opacity: 1;
    margin-top: 10px;
  }
  .lp-hiw-step:not(.is-active) .lp-hiw-step-copy { display: none; }
}

/* ── Social proof ─────────────────────────────────────── */

.lp-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(40px, 8vw, 96px);
  padding-bottom: 64px;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--lp-hairline);
  text-align: center;
}

.lp-stat { display: flex; flex-direction: column; gap: 6px; }

.lp-stat-num {
  font-family: var(--lp-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--lp-text);
}

.lp-stat-num small { font-size: 0.5em; color: var(--lp-text-muted); letter-spacing: 0; }

.lp-stat-label {
  font-family: var(--lp-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

.lp-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lp-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--lp-hairline);
  border-radius: 16px;
  background: var(--lp-tile);
}

.lp-quote-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--lp-text-sub);
}

.lp-quote-by { display: flex; align-items: center; gap: 12px; }

.lp-quote-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--lp-mono);
  font-size: 14px;
  color: var(--lp-bg);
  background: color-mix(in srgb, var(--border-active) 80%, white 20%);
}

.lp-quote-meta { display: flex; flex-direction: column; line-height: 1.3; }
.lp-quote-name { font-size: 14px; font-weight: 600; color: var(--lp-text); }
.lp-quote-role { font-size: 13px; color: var(--lp-text-muted); }

/* ── Compatibility ────────────────────────────────────── */

.lp-compat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.lp-compat-item { padding: 26px 28px 26px 0; border-top: 1px solid var(--lp-hairline); }

.lp-compat-title {
  margin: 0;
  position: relative;
  padding-left: 22px;
  font-family: var(--lp-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}

.lp-compat-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 12px;
  height: 7px;
  border-left: 1.8px solid var(--border-active);
  border-bottom: 1.8px solid var(--border-active);
  transform: rotate(-45deg);
}

.lp-compat-copy {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-text-muted);
}

/* ── Compare (LATCH vs. other editors) ────────────────── */

.lp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.lp-compare-cell {
  padding: 20px 24px;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--lp-hairline);
}

.lp-compare-cell--label {
  width: 22%;
  font-family: var(--lp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

thead .lp-compare-cell--latch,
thead .lp-compare-cell--other {
  font-family: var(--lp-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text);
}

tbody .lp-compare-cell--latch,
tbody .lp-compare-cell--other {
  font-size: 15px;
  line-height: 1.5;
  color: var(--lp-text-sub);
}

tbody .lp-compare-cell--other { color: var(--lp-text-muted); }

.lp-compare-cell--latch {
  border-left: 1px solid var(--border-active);
  border-right: 1px solid var(--border-active);
  background: color-mix(in srgb, var(--border-active) 6%, transparent);
}

/* Jasper-style win marks: filled mint circle + dark check, LATCH column only. */
.lp-compare-win {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lp-compare-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--border-active);
}

thead .lp-compare-cell--latch { border-top: 1px solid var(--border-active); }

.lp-compare-note {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--lp-text-muted);
}

/* Pull the title measure in so the wrap lands after "apart" instead of
   orphaning "rest?" on its own line. */
.lp-compare .lp-section-title {
  max-width: 11.5em;
}

/* ── FAQ ──────────────────────────────────────────────── */

.lp-faq-list { border-top: 1px solid var(--lp-hairline); }

.lp-faq-item { border-bottom: 1px solid var(--lp-hairline); }

.lp-faq-q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  font-family: var(--lp-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--lp-text);
  transition: color 0.15s;
}

.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q:hover { color: var(--border-active); }

.lp-faq-q::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(currentColor, currentColor) center/13px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.6px 13px no-repeat;
  color: var(--lp-text-muted);
  transition: transform 0.2s, color 0.15s;
}

.lp-faq-item[open] .lp-faq-q::after { transform: rotate(45deg); color: var(--border-active); }

.lp-faq-a {
  margin: 0;
  padding: 0 44px 26px 0;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.66;
  color: var(--lp-text-muted);
}

/* ── Closing CTA ──────────────────────────────────────── */

.lp-cta {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 120px var(--lp-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 34px;
  border-top: 1px solid var(--lp-hairline);
}

.lp-cta-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--lp-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--lp-text);
}

.lp-cta-meta {
  margin: 0;
  font-family: var(--lp-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--lp-text-muted);
}

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

.lp-footer {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 64px var(--lp-gutter) 40px;
  border-top: 1px solid var(--lp-hairline);
}

.lp-footer-top {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  flex-wrap: wrap;
}

.lp-footer-brand { max-width: 320px; }
.lp-footer-brand .lp-brand { margin-bottom: 18px; }

.lp-footer-blurb {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}

.lp-social { display: flex; gap: 10px; }

.lp-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--lp-hairline);
  border-radius: 9px;
  color: var(--lp-text-dim);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.lp-social-link:hover {
  color: var(--lp-text);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

.lp-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, auto));
  gap: 56px;
}

.lp-footer-col { display: flex; flex-direction: column; gap: 12px; }

.lp-footer-h {
  margin: 0 0 4px;
  font-family: var(--lp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-text);
}

.lp-footer-col a {
  font-size: 14px;
  color: var(--lp-text-sub);
  transition: color 0.15s;
}

.lp-footer-col a:hover { color: var(--lp-text); }

.lp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lp-footer-copy,
.lp-footer-disclaimer {
  margin: 0;
  font-family: var(--lp-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}

.lp-footer-disclaimer { color: rgba(255, 255, 255, 0.3); }

/* ── Responsive ───────────────────────────────────────── */

@media (min-width: 1025px) {
  .lp-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(236px, auto);
  }
  /* Bento: two wide tiles stacked on the left, one tall tile on the right */
  .lp-tile--sync   { grid-column: 1 / 3; grid-row: 1; }
  .lp-tile--free   { grid-column: 1 / 3; grid-row: 2; }
  .lp-tile--export { grid-column: 3;     grid-row: 1 / 3; }

  /* wide tiles: text + visual side by side */
  .lp-tile--sync,
  .lp-tile--free {
    flex-direction: row;
    align-items: stretch;
    gap: 26px;
  }
  .lp-tile--sync .lp-tile-body,
  .lp-tile--free .lp-tile-body { flex: 1; justify-content: center; }
  .lp-tile--sync .lp-tile-media,
  .lp-tile--free .lp-tile-media { flex: 0 0 50%; }
}

@media (max-width: 1024px) {
  .landing { --lp-gutter: 40px; }

  .lp-hero { padding-top: 20px; }

  .lp-hero-bg {
    width: min(1200px, 118vw);
    height: clamp(480px, 70dvh, 760px);
    bottom: 0;
  }

  .lp-hero-copy {
    margin-top: 4px;
    gap: 24px;
    padding-bottom: clamp(280px, 50dvh, 560px);
  }
  .lp-section, .lp-cta { padding-top: 88px; padding-bottom: 88px; }
  .lp-section-head { margin-bottom: 44px; }

  .lp-quotes { grid-template-columns: 1fr; }

  .lp-stagger-row { grid-template-columns: 1fr; gap: 24px; }
  .lp-stagger-row:nth-child(even) .lp-stagger-media { order: 0; }
  .lp-stagger-body { max-width: none; }
  .lp-compat-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }

  .lp-hiw-layout { grid-template-columns: 1fr; gap: 32px; }
  .lp-hiw-step { min-height: 0 !important; }
  .lp-hiw-visual { position: relative; top: auto; order: -1; min-height: 280px; }
}

@media (max-width: 640px) {
  .landing { --lp-gutter: 22px; }

  .lp-header { padding: 18px var(--lp-gutter); gap: 14px; }
  .lp-brand-logo { height: 26px; }
  .lp-brand-tagline { display: none; }
  .lp-nav { gap: 14px; }
  .lp-nav-link:not(:last-of-type) { display: none; } /* keep Try LATCH only */

  .lp-hero {
    padding-top: 16px;
    padding-bottom: 24px;
    min-height: 0;
  }

  .lp-hero-bg {
    position: relative;
    left: auto;
    bottom: auto;
    order: 2;
    width: calc(100% + (2 * var(--lp-gutter)));
    max-width: none;
    height: auto;
    aspect-ratio: 1672 / 941;
    max-height: 42dvh;
    margin-top: 28px;
    margin-left: calc(-1 * var(--lp-gutter));
    margin-right: calc(-1 * var(--lp-gutter));
    transform: none;
    overflow: hidden;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .lp-hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(10, 10, 11, 0.08) 0%,
      transparent 14%,
      transparent 100%
    );
  }

  .lp-hero-bg img {
    object-fit: cover;
    object-position: center center;
    height: 112%;
    filter: brightness(1.08);
  }

  .lp-hero-copy {
    order: 1;
    margin-top: 0;
    margin-bottom: 0;
    gap: 22px;
    padding-bottom: 0;
  }
  .lp-hero-actions { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .lp-btn-primary { width: 100%; }

  .lp-shot-frame { padding: 6px; border-radius: 12px; }
  .lp-shot-frame img { border-radius: 7px; }

  .lp-section, .lp-cta { padding-top: 72px; padding-bottom: 72px; }

  .lp-bento { grid-template-columns: 1fr; }
  .lp-tile { grid-column: 1 / -1; }

  .lp-hiw-trigger { padding-bottom: 28px; }
  .lp-hiw-connect-pedal,
  .lp-hiw-sync-pedal,
  .lp-hiw-pedal { width: 96px; height: 74px; padding: 8px 9px 7px; gap: 4px; }
  .lp-hiw-pedal-knobs i { width: 9px; height: 9px; }
  .lp-hiw-pedal-leds i { width: 8px; height: 2px; }
  .lp-hiw-pedal-switches i { width: 11px; height: 11px; }
  .lp-hiw-connect-cable { flex-basis: 32px; }
  .lp-hiw-art--history { padding: 24px 22px; }
  .lp-hiw-sync-cable { flex-basis: 32px; }
  .lp-hiw-art--sync { padding: 32px 22px; }

  .lp-compat-grid { grid-template-columns: 1fr; }
  .lp-compat-item { padding-right: 0; }

  .lp-footer-top { gap: 40px; }
  .lp-footer-cols { gap: 32px; grid-template-columns: repeat(2, 1fr); }
  .lp-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  .lp-compare-table, .lp-compare-table thead, .lp-compare-table tbody,
  .lp-compare-table tr, .lp-compare-table th, .lp-compare-table td {
    display: block;
    width: auto;
  }
  .lp-compare-table thead { display: none; }
  .lp-compare-table tr { margin-bottom: 20px; border-bottom: 1px solid var(--lp-hairline); }
  .lp-compare-table tr:last-child { margin-bottom: 0; }
  .lp-compare-cell { border-bottom: none; padding: 6px 16px; }
  .lp-compare-cell--label { padding: 16px 16px 4px; }
  .lp-compare-cell--latch, .lp-compare-cell--other { padding-left: 16px; }
  .lp-compare-cell--latch { border: none; background: none; }
  .lp-compare-cell--latch::before { content: "LATCH — "; color: var(--border-active); font-weight: 500; }
  .lp-compare-cell--other::before { content: "Other editors — "; }
  .lp-compare-cell--latch, .lp-compare-cell--other { border-left: 2px solid var(--lp-hairline); margin-left: 4px; }
  .lp-compare-cell--latch { border-left-color: var(--border-active); }
  /* Mobile already prefixes each cell with "LATCH — ", so the win mark is redundant. */
  .lp-compare-check { display: none; }
}

/* ── Legal pages (Privacy / Terms) ────────────────────── */

.lp-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px var(--lp-gutter) 120px;
}

.lp-legal-head {
  margin-bottom: 44px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--lp-hairline);
}

.lp-legal-title {
  margin: 14px 0 0;
  font-family: var(--lp-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--lp-text);
}

.lp-legal-meta {
  margin: 16px 0 0;
  font-family: var(--lp-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--lp-text-muted);
}

.lp-legal-lead {
  margin: 0 0 40px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--lp-text-sub);
}

.lp-legal-body h2 {
  margin: 44px 0 14px;
  font-family: var(--lp-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}

.lp-legal-body p,
.lp-legal-body li {
  font-size: 16px;
  line-height: 1.72;
  color: var(--lp-text-dim);
}

.lp-legal-body p { margin: 0 0 16px; }

.lp-legal-body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.lp-legal-body li { margin-bottom: 10px; }

.lp-legal-body strong { color: var(--lp-text); font-weight: 600; }

.lp-legal-body a {
  color: var(--border-active);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lp-legal-body a:hover { color: var(--lp-text); }

@media (max-width: 640px) {
  .lp-legal { padding-top: 48px; padding-bottom: 80px; }
  .lp-legal-lead { font-size: 17px; }
}

/* ── Analytics notice ─────────────────────────────────── */

.lp-consent {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 380px;
  padding: 14px 16px;
  background: rgba(20, 20, 22, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--lp-hairline);
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.lp-consent[hidden] { display: none; }
.lp-consent.is-visible { opacity: 1; transform: none; }

.lp-consent-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lp-text-dim);
}

.lp-consent-text a {
  color: var(--border-active);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lp-consent-text a:hover { color: var(--lp-text); }

.lp-consent-dismiss {
  flex-shrink: 0;
  padding: 8px 14px;
  font-family: var(--lp-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-bg);
  background: var(--lp-text);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.lp-consent-dismiss:hover { background: #ececec; }

@media (max-width: 640px) {
  .lp-consent { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-consent { transition: opacity 0.2s ease; transform: none; }
}

/* ── Contact modal ─────────────────────────────────────────── */
body.lp-modal-open { overflow: hidden; }

.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lp-modal[hidden] { display: none; }

.lp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lp-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(80dvh, 640px);
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 22, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--lp-hairline);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.lp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--lp-hairline);
  flex-shrink: 0;
}

.lp-modal-title {
  margin: 0;
  font-family: var(--lp-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}

.lp-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--lp-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lp-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--lp-text);
}

.lp-modal-body {
  padding: 20px;
  overflow-y: auto;
}

.lp-contact-form {
  display: flex;
  flex-direction: column;
}

.lp-contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}

.lp-contact-label {
  font-family: var(--lp-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

.lp-contact-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--lp-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--lp-hairline);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}

.lp-contact-input::placeholder { color: var(--lp-text-muted); }

.lp-contact-input:hover:not(:focus):not(.lp-contact-input--error) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.lp-contact-input:focus {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.lp-contact-input--error { border-color: rgba(224, 128, 128, 0.65); }

.lp-contact-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.45;
  font-weight: 400;
  font-family: var(--lp-body);
}

.lp-contact-error {
  font-size: 12px;
  color: #e08080;
  margin: 4px 0 0;
  line-height: 1.4;
}

.lp-contact-note {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--lp-text-muted);
}

.lp-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-contact-actions .lp-btn {
  width: 100%;
}

.lp-contact-confirm {
  padding: 8px 0 4px;
}

.lp-contact-confirm p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-text-sub);
}

@media (max-width: 640px) {
  .lp-modal { padding: 16px; }
}