/* ── Landing page ───────────────────────────────────────────
   Opens light (themeFor() in lib/store.js), with a full dark version one
   toggle away. Zinc greys, Geist for display type, flat fills and hairlines,
   no gradients. Colour is a modern blue family: an electric indigo-blue leads
   (--lp-accent: buttons, the headline's second line, the tag, the demo's tab
   and send button) with cyan and violet in support, used sparingly and always
   flat (ticks, the stage's top line, the feature labels). The hues are tuned
   per theme so text in them stays readable. Everything is namespaced lp- so
   the shared hero/steps/faq classes used by the download and support pages
   stay untouched. */

body:has(.lp) {
  /* The fill is the same in both themes: white text on it clears 4.5:1. */
  --lp-accent: #4361ee;
  --lp-accent-hi: #3651e0;
  --lp-on-accent: #ffffff;
  --accent: var(--lp-accent);
  --accent-hi: var(--lp-accent-hi);
  --accent-glow: rgba(67, 97, 238, 0.35);
  --on-accent: var(--lp-on-accent);
}

/* Dark: a deeper near-black than the app's dark theme. */
:root:not([data-theme="light"]) body:has(.lp) {
  --bg: #09090b;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-hi: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-hi: rgba(255, 255, 255, 0.15);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --subtle: #71717a;
  --lp-accent-ink: #8ea2ff;
  --lp-cyan: #5fd8f5;
  --lp-violet: #b59cff;
}

/* Light: white, with the hues one step deeper so they read on it. */
:root[data-theme="light"] body:has(.lp) {
  --bg: #ffffff;
  --surface: rgba(9, 9, 11, 0.03);
  --surface-hi: rgba(9, 9, 11, 0.055);
  --line: rgba(9, 9, 11, 0.08);
  --line-hi: rgba(9, 9, 11, 0.15);
  --text: #09090b;
  --muted: #52525b;
  --subtle: #71717a;
  --lp-accent-ink: #4361ee;
  --lp-cyan: #0b8fb3;
  --lp-violet: #7c5ce6;
}

html:has(.lp):not([data-theme="light"]) { background: #09090b; }
html[data-theme="light"]:has(.lp) { background: #ffffff; }

.lp {
  /* Product-surface tokens shared by the hero window and the feature
     visuals, so every mock reads as the same app. */
  --lp-panel: #121215;
  --lp-panel-side: #0f0f12;
  --lp-stage: #131316;
  --lp-grid: rgba(255, 255, 255, 0.035);
  --lp-hair: rgba(255, 255, 255, 0.08);
  --lp-chip: rgba(255, 255, 255, 0.06);
  --lp-chip-hi: rgba(255, 255, 255, 0.11);
  --lp-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 32px 64px -24px rgba(0, 0, 0, 0.7);
  --lp-stage-edge: rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
}

:root[data-theme="light"] .lp {
  --lp-panel: #ffffff;
  --lp-panel-side: #fafafa;
  --lp-stage: #f4f4f5;
  --lp-grid: rgba(9, 9, 11, 0.045);
  --lp-hair: rgba(9, 9, 11, 0.08);
  --lp-chip: rgba(9, 9, 11, 0.04);
  --lp-chip-hi: rgba(9, 9, 11, 0.08);
  --lp-shadow: 0 0 0 1px rgba(9, 9, 11, 0.08), 0 24px 48px -24px rgba(9, 9, 11, 0.18);
  --lp-stage-edge: rgba(255, 255, 255, 0.9);
}

/* The page-wide aurora and grid are decoration this page does not need. */
body:has(.lp) .aurora { display: none; }

/* ── Type ───────────────────────────────────────────────── */

.lp-section { margin-top: clamp(112px, 12vw, 160px); }

.lp-h2 {
  font-family: var(--font-geist);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}

.lp-lede {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.lp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: clamp(44px, 5vw, 64px);
}

.lp-head .lp-lede { text-wrap: balance; }

.lp-kicker { font-size: 14px; font-weight: 500; color: var(--subtle); }

/* Feature labels cycle through the blue family, one hue per section. */
.lp-feature:nth-child(3n + 1) .lp-kicker { color: var(--lp-cyan); }
.lp-feature:nth-child(3n + 2) .lp-kicker { color: var(--lp-accent-ink); }
.lp-feature:nth-child(3n + 3) .lp-kicker { color: var(--lp-violet); }

/* A text action: no box, an arrow or a play disc. */
.lp-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.lp-link-btn > svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.lp-link-btn:hover > svg { transform: translateX(3px); }
.lp-link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

.lp-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-hi);
  display: grid;
  place-items: center;
  flex: none;
  transition: background 0.2s var(--ease);
}

.lp-play svg { width: 11px; height: 11px; fill: currentColor; margin-left: 2px; }
.lp-link-btn:hover .lp-play { background: var(--surface-hi); }

.lp-inline-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-hi);
  transition: text-decoration-color 0.2s var(--ease);
}

.lp-inline-link:hover { text-decoration-color: currentColor; }

/* ── Statement ──────────────────────────────────────────── */

.lp-statement { margin-top: clamp(112px, 12vw, 168px); }

.lp-statement p {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--subtle);
  text-wrap: balance;
}

.lp-lit { color: var(--text); }

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

.lp-faq {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.lp-faq-head { display: flex; flex-direction: column; gap: 16px; }
.lp-faq-list { border-top: 1px solid var(--line); }
.lp-faq-item { border-bottom: 1px solid var(--line); }

.lp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

.lp-faq-mark {
  color: var(--subtle);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.28s var(--ease), color 0.2s var(--ease);
}

.lp-faq-mark svg { width: 18px; height: 18px; }
.lp-faq-q:hover .lp-faq-mark { color: var(--text); }
.lp-faq-item[open] .lp-faq-mark { transform: rotate(45deg); color: var(--text); }

.lp-faq-a {
  padding: 0 48px 26px 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

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

.lp-closing {
  margin-top: clamp(112px, 12vw, 168px);
  padding: clamp(24px, 4vw, 48px) 0 clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.lp-closing-title {
  font-family: var(--font-geist);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-wrap: balance;
}

.lp-closing .lp-hero-cta { margin-top: 16px; }

/* ── Reveal on scroll ───────────────────────────────────────
   Scroll-driven, so there is no observer to wire and a re-render cannot
   replay it. Browsers without view timelines simply show the content. */

@keyframes lp-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lp-reveal {
      animation: lp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes lp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lp-in { animation: lp-in 0.35s var(--ease) both; }

/* ── Small screens ──────────────────────────────────────── */

@media (max-width: 860px) {
  .lp-faq { grid-template-columns: 1fr; }
  .lp-faq-a { padding-right: 0; }
}

@media (max-width: 700px) {
  .lp-faq-q { padding: 20px 0; font-size: 16px; }
  .lp-faq-a { font-size: 15px; padding-bottom: 22px; }
}