/* ============================================================
   LANDING PAGE (lp-*) — additive styles, does not touch the
   existing simulator/demo styles above.
   ============================================================ */
.lp-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(237,240,242,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(17,33,38,.08);
}
.lp-nav-inner{
  width:min(1200px, calc(100% - 24px));
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.lp-logo{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.04em; color:var(--ink)}
.lp-logo span{color:var(--teal)}
.lp-nav-links{display:flex; gap:26px; align-items:center}
.lp-nav-links a{color:var(--muted); font-weight:700; font-size:14px; text-decoration:none}
.lp-nav-links a:hover{color:var(--ink)}
.lp-nav-cta{
  background:var(--ink); color:#fff; border:none; border-radius:999px;
  padding:10px 18px; font-weight:800; font-size:13px; cursor:pointer;
}

.lp-section{ width:min(1200px, calc(100% - 24px)); margin:0 auto; padding:70px 0; }
.lp-section-narrow{ width:min(880px, calc(100% - 24px)); margin:0 auto; padding:70px 0; }
.lp-kicker{
  display:inline-flex; gap:8px; align-items:center; padding:8px 14px; border-radius:999px;
  background:#edf8f5; color:#137d6f; font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; margin-bottom:16px;
}
.lp-h2{
  font-family:"Space Grotesk",sans-serif; font-size:clamp(28px,3.2vw,42px);
  line-height:1.05; letter-spacing:-.03em; margin:0 0 14px; color:var(--ink);
}
.lp-lead{ color:var(--muted); font-size:17px; line-height:1.7; max-width:720px; margin:0 0 10px; }
.lp-center{ text-align:center; margin-left:auto; margin-right:auto; }

.lp-problem{
  background:linear-gradient(180deg,#0d2126,#123138);
  border-radius:32px; padding:56px 44px; color:#e7f3f1;
}
.lp-problem .lp-h2{ color:#fff; }
.lp-problem .lp-lead{ color:#a9c2c0; max-width:800px }
.lp-problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.lp-problem-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:20px; }
.lp-problem-card strong{ display:block; font-size:15px; margin-bottom:6px; color:#fff }
.lp-problem-card span{ font-size:13.5px; color:#a9c2c0; line-height:1.55 }

.lp-personas{ display:grid; gap:22px; margin-top:34px; }
.lp-persona{
  display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:28px; padding:34px;
  box-shadow:0 20px 50px rgba(8,24,28,.06);
}
.lp-persona:nth-child(even) .lp-persona-story{ order:2 }
.lp-persona-tag{
  display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--teal); background:#edf8f5; padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.lp-persona-story h3{ font-family:"Space Grotesk",sans-serif; font-size:24px; margin:0 0 10px; letter-spacing:-.02em }
.lp-persona-story p{ color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 10px }
.lp-persona-solution{
  background:var(--soft); border:1px solid var(--line); border-radius:18px; padding:16px 18px; margin-top:14px;
}
.lp-persona-solution strong{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#137d6f; margin-bottom:8px }
.lp-persona-solution ul{ margin:0; padding-left:18px; color:#28454b; font-size:14px; line-height:1.7 }
.lp-persona-visual{
  background:linear-gradient(160deg,#f3f8f7,#e7f1ef); border-radius:22px; padding:24px; min-height:180px;
  display:flex; flex-direction:column; justify-content:center; gap:10px; border:1px solid var(--line);
}
.lp-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.lp-chip{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700; color:#28454b }
.lp-mini-thread{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; font-size:13px; color:#28454b; line-height:1.6 }
.lp-mini-thread b{ color:#0f9988 }

.lp-steps4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.lp-step4{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px; }
.lp-step4 .num{
  width:34px; height:34px; border-radius:50%; background:var(--teal); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:14px;
}
.lp-step4 strong{ display:block; font-size:16px; margin-bottom:6px }
.lp-step4 span{ color:var(--muted); font-size:13.5px; line-height:1.6 }

.lp-trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.lp-trust-card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px; }
.lp-trust-card .icon{ font-size:22px; margin-bottom:10px; display:block }
.lp-trust-card strong{ display:block; font-size:15.5px; margin-bottom:8px; color:var(--ink) }
.lp-trust-card p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.65 }

.lp-challenge{ background:var(--panel); border:1px solid rgba(17,33,38,.08); border-radius:32px; padding:50px 44px; backdrop-filter:blur(12px); }
.lp-persona-cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:30px; }
.lp-persona-card{
  background:#fff; border:2px solid var(--line); border-radius:20px; padding:20px 16px; text-align:left;
  cursor:pointer; transition:border-color .15s, transform .15s; font-family:inherit;
}
.lp-persona-card:hover{ border-color:var(--teal); transform:translateY(-3px); }
.lp-persona-card.active{ border-color:var(--teal); background:#f2faf8; }
.lp-persona-card .emoji{ font-size:26px; display:block; margin-bottom:10px }
.lp-persona-card strong{ display:block; font-size:14.5px; margin-bottom:5px; color:var(--ink) }
.lp-persona-card span{ font-size:12.5px; color:var(--muted); line-height:1.5 }

.lp-autoplay-toggle{
  display:flex; align-items:center; gap:10px; margin-top:20px; padding:12px 16px;
  background:#fff; border:1px solid var(--line); border-radius:14px; width:fit-content;
  font-size:13.5px; color:var(--muted); cursor:pointer; user-select:none;
}
.lp-autoplay-toggle input{ width:34px; height:20px; accent-color:#0b8f7d; cursor:pointer; }
.lp-autoplay-toggle strong{ color:var(--ink); font-weight:700; }

.lp-challenge-status{
  margin-top:24px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px 22px;
  display:none; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.lp-challenge-status.show{ display:flex }
.lp-challenge-status .txt strong{ display:block; font-size:14.5px; color:var(--ink) }
.lp-challenge-status .txt span{ font-size:13px; color:var(--muted) }
.lp-challenge-status button{
  background:var(--teal); color:#fff; border:none; border-radius:999px; padding:10px 18px;
  font-weight:800; font-size:13px; cursor:pointer;
}
.lp-challenge-status button.lp-challenge-share{ background:#fff; color:var(--teal); border:1.5px solid var(--teal); }

.lp-results{ margin-top:20px; display:none; }
.lp-results.show{ display:grid; }
.lp-results-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }
.lp-result-card{ background:#0d2126; color:#fff; border-radius:18px; padding:18px; text-align:center; }
.lp-result-card strong{ display:block; font-size:26px; font-family:"Space Grotesk",sans-serif; margin-bottom:4px; color:#4fe3b6 }
.lp-result-card span{ font-size:12px; color:#a9c2c0 }
.lp-results-note{ background:#f2faf8; border:1px solid #cfe9e2; border-radius:16px; padding:16px 18px; margin-top:16px; color:#12403a; font-size:14px; line-height:1.6 }

.lp-final-cta{
  text-align:center; background:linear-gradient(160deg,#0b8f7d,#0d2126); border-radius:32px; padding:60px 40px; color:#fff;
}
.lp-final-cta .lp-h2{ color:#fff }
.lp-final-cta p{ color:#cfe9e2; max-width:600px; margin:0 auto 26px; font-size:16px; line-height:1.7 }
.lp-final-cta .lp-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.lp-btn-white{ background:#fff; color:#0d2126; border:none; border-radius:999px; padding:14px 26px; font-weight:800; cursor:pointer; font-size:14.5px }
.lp-btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); border-radius:999px; padding:14px 26px; font-weight:800; cursor:pointer; font-size:14.5px }

.lp-footer{ text-align:center; padding:40px 0 60px; color:var(--muted); font-size:13px; }