/* ===================================================================
   InduIndex — landing v4 (bead induindex-520): the landing lives in the
   app shell (app_base.html — left nav rail + slim header), so it runs
   on the SAME design tokens as the product (static/css/app/tokens.css:
   warm paper, IBM Plex, amber accent). Content keeps the annunciator
   language: flat status lamps, mono rule chips, the step rail — and the
   dark instrument panel reserved for the hero screen + closing band.

   Animation stance: entrance reveals are pure CSS and run once on load
   — never a scroll-observer that strands content invisible. The looping
   tool-demo animations (bars, message threads, doc rows, scan line) are
   CSS-only and additive: base styles are the finished state, and
   reduced-motion gets a fully lit static page. There is no landing.js.
   =================================================================== */

.lp-body {
  /* Derived tokens the app system doesn't name. The panel block is the
     app's own dark theme, hardcoded: one dark island on a light page —
     values must match [data-theme="dark"] in static/css/app/tokens.css. */
  /* Retired as its own value: the app tokens now carry an amber-text
     role, and two different "deep amber"s is the incoherence this
     ramp exists to remove. Kept as an alias so the ~30 .lp-* usages
     don't all have to churn. */
  --lp-accent-deep: var(--accent-text);
  /* Deliberately a shade less saturated than [data-theme="dark"] --surface
     (#221e17, hue 38° sat 19%). A dark island surrounded by warm paper shows
     its hue far more than the same colour surrounded by other dark surfaces —
     simultaneous contrast — and at 19% saturation it read as brown in light
     mode. Same lightness, warm skew halved (R-B +11 → +5): still a warm
     charcoal, not the cold slate this palette deliberately left behind. */
  --lp-panel: #1f1d1a;
  --lp-panel-2: rgba(255, 255, 255, 0.05);
  --lp-panel-border: rgba(255, 255, 255, 0.09);
  --lp-panel-text: #ece7de;
  --lp-panel-muted: #a49d90;
  --lp-panel-accent: #f5b325;
  /* Rotated from #dc7a55 (hue 16°) to hue 8°, same lightness and saturation.
     Against the old duller amber a 25° gap read fine; against #f5b325 the
     flood bars just looked like "the more orange amber ones" instead of an
     alarm. Now 33° from the accent and 30° from --warn. */
  --lp-panel-crit: #dc6755;
}

/* The landing takes the content column full-bleed. */
.lp-body .app-content { padding: 0; gap: 0; }
.lp-canvas { display: flex; flex-direction: column; }

/* The rail stays functional but stops reading as a white column: it
   blends into the page background, and the landing always shows the
   slim icon width — an app-side "expanded" preference (html[data-nav])
   would otherwise park 212px of empty white next to the hero. The
   expand toggle is hidden here because it would have nothing to do. */
.lp-body .app-nav { background: var(--bg); border-right: none; }
[data-nav="expanded"] .lp-body .app-nav { width: var(--nav-w); }
.lp-body .nav-toggle { display: none; }
.lp-body .nav-item-label,
.lp-body .nav-brand-name,
.lp-body .nav-user-meta { display: none; }

/* ── Sections ────────────────────────────────────────────────────── */
.lp-section { padding: clamp(44px, 7vw, 84px) clamp(20px, 4vw, 44px); }
.lp-section > * { max-width: 1120px; margin-inline: auto; }
.lp-section-alt { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-section-head { text-align: center; margin-bottom: clamp(30px, 5vw, 52px); }
.lp-section > .lp-section-head { max-width: 680px; }
.lp-kicker { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; color: var(--lp-accent-deep); margin: 0 0 10px; }
.lp-h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.022em; color: var(--text); margin: 0; }
.lp-h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); line-height: 1.15; font-weight: 650; letter-spacing: -0.015em; color: var(--text); margin: 0; }
.lp-sub { color: var(--text-2); font-size: 15.5px; line-height: 1.55; margin: 12px 0 0; }
.lp-ok { color: var(--ok); }
.lp-warn { color: var(--warn); }
.lp-crit { color: var(--crit); }

/* Bigger CTA row buttons on top of the app .btn scale. */
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.lp-cta-center { justify-content: center; }
.lp-cta-row .btn-lg { height: 42px; padding: 0 22px; font-size: 13.5px; }
.lp-textlink { color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.lp-textlink:hover { color: var(--lp-accent-deep); }

/* ── Status lamps — flat dots, no glow ───────────────────────────── */
.lp-lamp { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--border-2); }
.lp-lamp-ok { background: var(--ok); }
.lp-lamp-warn { background: var(--warn); }
.lp-lamp-crit { background: var(--crit); }
.lp-lamp-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-2); }

/* ── Citation chips ──────────────────────────────────────────────── */
.lp-chip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border); color: var(--text-2); background: var(--surface-2); white-space: nowrap; }

/* ── HERO — tight under the app header ───────────────────────────── */
.lp-hero { position: relative; overflow: hidden; background: var(--bg); }
.lp-hero::after { content: ""; position: absolute; top: -30%; right: -6%; width: 44%; height: 130%; background: radial-gradient(closest-side, var(--accent-soft), transparent 72%); z-index: 0; pointer-events: none; }
.lp-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1120px; margin-inline: auto; padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 44px) clamp(40px, 6vw, 72px); }
/* Grid children default to min-width:auto — wide demo-panel content would
   push the track past the viewport and .lp-hero's overflow:hidden clips the
   copy's last glyphs on small screens. */
.lp-hero-copy, .lp-hero-panel { min-width: 0; }
.lp-lead { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.55; color: var(--text-2); margin: 18px 0 0; max-width: 48ch; }
.lp-lead strong { color: var(--text); font-weight: 600; }
.lp-trustline { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin: 20px 0 0; max-width: 52ch; }

/* ── Screens: app-style windows for the tool demos ───────────────── */
.lp-screen { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow); }
.lp-chrome { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
/* The ii bar-mark, small, at the left of every screen's chrome bar — the
   app icon a title bar would actually carry. Replaces three generic window
   dots that said nothing the address pill doesn't already say. Dots take
   --accent-line, not --accent: at 3px they're small shapes that have to
   hold 3:1, same reason the light favicon tile does. */
.lp-chrome-mark { display: inline-flex; align-items: flex-end; gap: 2px; flex: none; }
.lp-chrome-mark span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lp-chrome-mark i { width: 3px; border-radius: 1px; display: block; background: var(--text); }
.lp-chrome-mark i:first-child { height: 3px; background: var(--accent-line); }
.lp-chrome-mark .lp-cm-short i:last-child { height: 7px; }
.lp-chrome-mark .lp-cm-tall i:last-child { height: 11px; }
.lp-addr { flex: 1; min-width: 0; font-size: 11px; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); padding: 3px 11px; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); border: 1px solid var(--border-2); border-radius: 999px; padding: 2px 9px; flex: none; }
.lp-status-live { color: var(--lp-accent-deep); border-color: var(--accent-line); background: var(--accent-soft); }

.lp-app { padding: 15px 17px 16px; background: var(--bg); }
.lp-app-file { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 600; margin: 0 0 10px; }
.lp-app-parse { color: var(--text-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.lp-app-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-app-col { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }

/* Demo findings / timeline rows */
.lp-demo-findings { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px 13px; }
.lp-app-col .lp-demo-findings { border: none; padding: 0; background: transparent; }
.lp-demo-finding { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); padding: 8px 0; margin: 0; border-top: 1px solid var(--border); }
.lp-demo-finding:first-child { border-top: 0; }
.lp-accept { color: var(--lp-accent-deep); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-left: auto; white-space: nowrap; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 8px; }
.lp-demo-foot { margin: 11px 0 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); display: flex; align-items: center; gap: 10px; }

/* Hero demo KPI tiles */
.lp-demo-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.lp-demo-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; }
.lp-demo-kpi-label { font-size: 9px; letter-spacing: 0.09em; color: var(--text-3); }
.lp-demo-kpi-value { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; line-height: 1; }
.lp-demo-kpi-sub { font-size: 9.5px; color: var(--text-3); }

/* Hero demo: rolling bar chart */
.lp-demo-chart { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 90px; padding-top: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.lp-demo-floodline { position: absolute; left: 0; right: 0; bottom: 62%; border-top: 1px dashed var(--crit); opacity: 0.6; }
.lp-demo-floodtag { position: absolute; right: 0; bottom: calc(62% + 3px); font-size: 9px; color: var(--crit); padding: 0 3px; }
.lp-demo-bar { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0.9; transform-origin: bottom; animation: lp-bar 6s ease-in-out infinite; animation-delay: var(--ph); }
.lp-demo-bar-flood { background: var(--crit); }
@keyframes lp-bar { 0%, 100% { transform: scaleY(0.72); } 50% { transform: scaleY(1); } }

/* Sequenced items: one shared 14s cycle, each slot its own window. */
.lp-seq-1 { animation: lp-seq-1 14s ease-in-out infinite; }
.lp-seq-2 { animation: lp-seq-2 14s ease-in-out infinite; }
.lp-seq-3 { animation: lp-seq-3 14s ease-in-out infinite; }
.lp-seq-4 { animation: lp-seq-4 14s ease-in-out infinite; }
@keyframes lp-seq-1 { 0%, 4% { opacity: 0; transform: translateY(5px); } 8%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes lp-seq-2 { 0%, 14% { opacity: 0; transform: translateY(5px); } 18%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes lp-seq-3 { 0%, 26% { opacity: 0; transform: translateY(5px); } 30%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes lp-seq-4 { 0%, 40% { opacity: 0; transform: translateY(5px); } 44%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* ── Hero screen: the dark instrument panel ──────────────────────── */
.lp-hero-panel .lp-screen { background: var(--lp-panel); color: var(--lp-panel-text); border-color: var(--lp-panel-border); box-shadow: 0 28px 64px -24px rgba(30, 24, 15, 0.55); }
.lp-hero-panel .lp-chrome { background: var(--lp-panel-2); border-bottom-color: var(--lp-panel-border); }
.lp-hero-panel .lp-chrome-mark i { background: var(--lp-panel-text); }
.lp-hero-panel .lp-chrome-mark i:first-child { background: var(--lp-panel-accent); }
.lp-hero-panel .lp-addr { color: var(--lp-panel-muted); background: var(--lp-panel-2); border-color: var(--lp-panel-border); }
.lp-hero-panel .lp-status-live { color: var(--lp-panel-accent); border-color: rgba(245, 179, 37, 0.5); background: rgba(245, 179, 37, 0.14); }
.lp-hero-panel .lp-app { background: transparent; }
.lp-hero-panel .lp-app-file { color: var(--lp-panel-accent); }
.lp-hero-panel .lp-app-parse { color: var(--lp-panel-muted); }
.lp-hero-panel .lp-demo-kpi { background: var(--lp-panel-2); border-color: var(--lp-panel-border); }
.lp-hero-panel .lp-demo-kpi-label, .lp-hero-panel .lp-demo-kpi-sub { color: var(--lp-panel-muted); }
.lp-hero-panel .lp-demo-kpi-value.lp-crit { color: var(--lp-panel-crit); }
.lp-hero-panel .lp-demo-kpi-value.lp-warn { color: var(--lp-panel-accent); }
.lp-hero-panel .lp-demo-chart { border-bottom-color: var(--lp-panel-border); }
.lp-hero-panel .lp-demo-bar { background: var(--lp-panel-accent); }
.lp-hero-panel .lp-demo-bar-flood { background: var(--lp-panel-crit); }
.lp-hero-panel .lp-demo-floodline { border-top-color: var(--lp-panel-crit); }
.lp-hero-panel .lp-demo-floodtag { color: var(--lp-panel-crit); }
.lp-hero-panel .lp-demo-findings { background: transparent; border: none; padding: 0; }
.lp-hero-panel .lp-demo-finding { color: var(--lp-panel-text); border-top-color: var(--lp-panel-border); }
.lp-hero-panel .lp-chip { border-color: var(--lp-panel-border); color: var(--lp-panel-muted); background: var(--lp-panel-2); }
.lp-hero-panel .lp-accept { color: var(--lp-panel-accent); border-color: rgba(245, 179, 37, 0.5); background: rgba(245, 179, 37, 0.14); }

/* ── TOOLS ───────────────────────────────────────────────────────── */
.lp-tool { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(22px, 4vw, 44px); align-items: center; padding: clamp(26px, 4vw, 38px) 0; border-top: 1px solid var(--border); }
.lp-tool:last-child { padding-bottom: 0; }
.lp-tool-flip .lp-tool-copy { order: 2; }
.lp-tool-flip .lp-screen { order: 1; }
.lp-tool-title { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--text); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-flag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--text-3); border: 1px solid var(--border-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.lp-flag-live { color: var(--lp-accent-deep); border-color: var(--accent-line); background: var(--accent-soft); }
.lp-tool-desc { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0 0 16px; max-width: 50ch; }
.lp-tool-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Chat demos */
.lp-app-chat, .lp-app-chatwide { display: flex; flex-direction: column; gap: 8px; }
.lp-msg { font-size: 12.5px; line-height: 1.45; margin: 0; padding: 8px 11px; border-radius: 10px; max-width: 92%; }
.lp-msg .lp-chip { margin-left: 6px; }
.lp-msg-user { background: var(--surface-3); color: var(--text); align-self: flex-end; border-bottom-right-radius: 3px; }
.lp-msg-bot { background: var(--surface); border: 1px solid var(--border); color: var(--text); align-self: flex-start; border-bottom-left-radius: 3px; }
.lp-typing { display: inline-flex; gap: 4px; padding: 6px 2px; margin: 0; }
.lp-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: lp-typing 1.1s ease-in-out infinite; }
.lp-typing span:nth-child(2) { animation-delay: 0.15s; }
.lp-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lp-typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* Doc-generation demo */
.lp-demo-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.lp-demo-docrow { display: grid; grid-template-columns: 36px 92px 1fr; gap: 10px; font-size: 12px; color: var(--text); padding: 7px 12px; margin: 0; border-top: 1px solid var(--border); }
.lp-demo-docrow:first-child { border-top: 0; }
.lp-demo-docrow span:first-child { font-size: 11px; font-weight: 600; color: var(--lp-accent-deep); }
.lp-demo-docrow span:nth-child(2) { color: var(--text-2); }
.lp-progress { flex: none; width: 90px; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: inline-block; }
.lp-progress-fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: lp-progress 14s ease-in-out infinite; }
@keyframes lp-progress { 0% { transform: scaleX(0.05); } 44%, 94% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0.05); } }

/* PLC review demo */
.lp-demo-code { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 0; margin-bottom: 12px; font-family: var(--font-mono); font-size: 12px; }
.lp-demo-codeline { display: flex; align-items: center; gap: 12px; padding: 3px 14px; margin: 0; white-space: pre; color: var(--text); }
.lp-ln { color: var(--text-3); width: 2ch; text-align: right; user-select: none; flex: none; font-size: 10.5px; }
.lp-demo-codeline-flag { background: var(--crit-soft); border-left: 2px solid var(--crit); padding-left: 12px; }
.lp-code-note { margin-left: auto; font-family: var(--font-sans, inherit); font-size: 10.5px; color: var(--crit); background: var(--crit-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lp-demo-scan { position: absolute; left: 0; right: 0; top: -22%; height: 26px; background: linear-gradient(to bottom, transparent, var(--accent-soft), transparent); animation: lp-scan 14s linear infinite; pointer-events: none; }
@keyframes lp-scan { 0% { top: -22%; } 30%, 100% { top: 115%; } }

/* ── HOW IT WORKS ────────────────────────────────────────────────── */
.lp-steps { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 30px); }
.lp-step { position: relative; padding-top: 16px; border-top: 2px solid var(--border-2); }
.lp-step::before { content: ""; position: absolute; top: -2px; left: 0; width: 34px; height: 2px; background: var(--accent-line); }
.lp-step-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--lp-accent-deep); }
.lp-step-title { font-size: 15.5px; font-weight: 650; margin: 8px 0; color: var(--text); }
.lp-step-body { color: var(--text-2); font-size: 13px; line-height: 1.6; margin: 0; }

/* ── DATA SECURITY spec sheet ────────────────────────────────────── */
.lp-section > .lp-spec { max-width: 820px; }
.lp-spec { list-style: none; margin: 0 auto; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow); }
.lp-spec-row { display: grid; grid-template-columns: 120px 1fr 20px; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); }
.lp-spec-row:first-child { border-top: 0; }
.lp-spec-key { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; font-weight: 600; color: var(--lp-accent-deep); }
.lp-spec-val { font-size: 13px; color: var(--text-2); line-height: 1.5; font-family: 'IBM Plex Sans', system-ui, sans-serif; }

/* ── PRICING ─────────────────────────────────────────────────────── */
.lp-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.lp-price { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.lp-price-featured { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow); }
.lp-price-flag { position: absolute; top: -10px; left: 20px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; background: var(--accent); color: var(--text-on-accent); padding: 2px 9px; border-radius: 999px; }
.lp-price-name { font-size: 15px; font-weight: 650; margin: 0; color: var(--text); }
.lp-price-amount { font-family: var(--font-mono); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--text); margin: 0; }
.lp-price-amount span { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.lp-price-list { list-style: none; margin: 0; padding: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; flex: 1; border-top: 1px solid var(--border); }
.lp-price-list li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.lp-price-list li::before { content: ""; position: absolute; left: 2px; top: 0.4em; width: 9px; height: 5px; border-left: 2px solid var(--accent-line); border-bottom: 2px solid var(--accent-line); transform: rotate(-45deg); }

/* ── EARLY ACCESS / FEATURE-REQUEST ──────────────────────────────── */
.lp-section > .lp-ea { max-width: 640px; }
.lp-ea { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent-line); border-radius: 13px; padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow); text-align: center; }
.lp-ea-success { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-ea-error { color: var(--crit); font-size: 13px; margin: 14px 0 0; }
.lp-ea-form { text-align: left; margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.lp-ea-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-label { font-size: 13px; font-weight: 600; color: var(--text); }
.lp-optional { color: var(--text-3); font-weight: 400; font-size: 0.85em; }
.lp-input { background: var(--surface); border: 1px solid var(--border-2); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 12px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.lp-input::placeholder { color: var(--text-3); }
.lp-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.lp-textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.lp-ea-note { color: var(--text-3); font-size: 11.5px; line-height: 1.5; margin: 0; text-align: center; }
.lp-ea-note a { color: var(--text-2); }

/* ── FAQ ─────────────────────────────────────────────────────────── */
/* FAQ: flat hairline-divider accordion (no boxed cards). Bigger question
   type, generous padding, a mono +/- affordance flush to the right. */
.lp-section > .lp-faq { max-width: 760px; border-top: 1px solid var(--border); }
.lp-faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 0; overflow: hidden; }
.lp-faq-item summary { cursor: pointer; list-style: none; padding: 19px 46px 19px 2px; font-size: 15.5px; font-weight: 600; color: var(--text); position: relative; transition: color 0.15s ease; }
.lp-faq-item summary:hover { color: var(--lp-accent-deep); }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--lp-accent-deep); font-family: var(--font-mono); }
.lp-faq-item[open] summary::after { content: "–"; }
.lp-faq-item p { margin: 0; padding: 0 2px 19px; max-width: 64ch; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }

/* ── CLOSING BAND: the dark panel again ──────────────────────────── */
.lp-band { background: var(--lp-panel); color: var(--lp-panel-text); text-align: center; padding: clamp(44px, 6vw, 80px) clamp(20px, 4vw, 44px); }
.lp-band > * { max-width: 720px; margin-inline: auto; }
.lp-band .lp-h2 { color: #fff; margin-bottom: 24px; }
.lp-band .btn-secondary { color: var(--lp-panel-text); border-color: rgba(255, 255, 255, 0.28); background: transparent; }
.lp-band .btn-secondary:hover { color: var(--lp-panel-accent); border-color: var(--lp-panel-accent); background: rgba(255, 255, 255, 0.05); }

/* ── Footer (partials/site_footer.html): the app tokens version ──── */
.lp-body .footer { background: var(--surface); border-top: 1px solid var(--border); padding: clamp(32px, 5vw, 52px) clamp(20px, 4vw, 44px) 22px; }
.lp-body .footer-content { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(20px, 4vw, 44px); max-width: 1120px; margin: 0 auto 28px; }
.lp-body .footer-block { display: flex; flex-direction: column; gap: 10px; }
.lp-body .footer-heading { font-size: 14px; font-weight: 650; color: var(--text); margin: 0; }
.lp-body .footer-description { color: var(--text-2); font-size: 12.5px; line-height: 1.6; margin: 0; }
.lp-body .footer-info p { color: var(--text-2); font-size: 12.5px; margin: 0; }
.lp-body .footer-nav { display: flex; flex-direction: column; gap: 7px; }
.lp-body .footer-nav a { color: var(--text-2); font-size: 12.5px; text-decoration: none; }
.lp-body .footer-nav a:hover { color: var(--lp-accent-deep); }
.lp-body .footer-bottom { text-align: center; padding-top: 18px; border-top: 1px solid var(--border); max-width: 1120px; margin: 0 auto; }
.lp-body .footer-bottom p { color: var(--text-3); font-size: 12px; margin: 0; }
.lp-body .footer-bottom a { color: var(--text-2); }

/* ── Entrance animation: pure CSS, runs once on load (never a
      scroll-observer that can strand content invisible). ──────────── */
/* ── Practitioner voices (social proof, before pricing) ──────────── */
.lp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-quote { margin: 0; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent-line); border-radius: 11px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.lp-quote p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.lp-quote footer { font-size: 10.5px; color: var(--text-3); letter-spacing: 0.04em; }

@keyframes lp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.lp-reveal { animation: lp-rise 0.55s ease-out both; }

/* When landing.js confirms scroll reveals are safe (IntersectionObserver +
   motion allowed), it sets html.lp-anim: suppress the on-load rise and
   switch to a single gentle fade+rise as each block scrolls into view.
   Base state (no .lp-anim) stays the finished frame — nothing is stranded. */
@media (prefers-reduced-motion: no-preference) {
  html.lp-anim .lp-reveal { animation: none; opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
  html.lp-anim .lp-reveal.in-view { opacity: 1; transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .lp-price-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-quotes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-tool, .lp-tool-flip { grid-template-columns: 1fr; }
  .lp-tool-flip .lp-tool-copy { order: 1; }
  .lp-tool-flip .lp-screen { order: 2; }
  .lp-steps { grid-template-columns: repeat(2, 1fr); }
  .lp-body .footer-content { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-steps, .lp-price-grid, .lp-ea-fields, .lp-app-split, .lp-quotes { grid-template-columns: 1fr; }
  .lp-spec-row { grid-template-columns: 92px 1fr 16px; gap: 10px; }
  .lp-demo-kpis { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-reveal, .lp-demo-bar, .lp-seq-1, .lp-seq-2, .lp-seq-3, .lp-seq-4,
  .lp-typing span, .lp-progress-fill, .lp-demo-scan { animation: none; }
}