/* Landing page */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }

.nav { position: sticky; top: 0; z-index: 20; background: rgb(11 21 39 / .94); backdrop-filter: blur(10px); color: #fff; }
.nav-in { display: flex; align-items: center; gap: 16px; height: 60px; }
.nav .logo { font-size: 19px; margin-inline-end: auto; }
.nav-link { color: #c9d4e3; text-decoration: none; font-size: 15px; }
.nav-link:hover { color: #fff; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 15px; }

/* hero: the question on the left, the live answer on the right */
.hero { background: var(--navy); color: #fff; padding: 40px 0 56px; overflow: hidden; }
.hero-in { display: grid; gap: 32px; align-items: center; }
@media (min-width: 920px) { .hero-in { grid-template-columns: 1.25fr 1fr; gap: 56px; } .hero { padding: 72px 0 88px; } }
.hero h1 { font: 700 clamp(54px, 13vw, 92px)/.92 var(--display); letter-spacing: .3px; margin: 0; }
.hero h1 span { display: block; margin-top: 10px; color: #5fd3c1; font-size: .62em; line-height: 1; }
.lead { font-size: 18px; color: #c9d4e3; margin: 20px 0 26px; max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row .btn-ghost { color: #fff; }
.fine { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.hero .fine { color: #8fa0ba; }

.live {
  display: block; color: var(--ink); text-decoration: none; background: var(--surface); border-radius: 26px;
  padding: 20px 20px 18px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .06);
  transform: rotate(-1.2deg); transition: transform .25s ease; max-width: 420px; justify-self: center; width: 100%;
}
.live:hover { transform: rotate(0deg) translateY(-2px); }
.live-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 var(--brand); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.live-label { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.live-num { margin: -4px 0 4px; font: 700 84px/1 var(--display); }
.live-chart { direction: ltr; height: 96px; }
.live-chart svg { width: 100%; height: 100%; display: block; }
.live-rec { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--hot-soft); color: var(--ink); font-size: 14px; font-weight: 600; min-height: 1.5em; }
.live-rec:empty { display: none; }
.live-go { display: inline-block; margin-top: 12px; color: var(--brand-ink); font-weight: 600; font-size: 14px; }

.pains { background: var(--surface); border-bottom: 1px solid var(--line); }
.pains-in { display: grid; gap: 0; }
@media (min-width: 820px) { .pains-in { grid-template-columns: repeat(3, 1fr); } }
.pains p { margin: 0; padding: 22px 4px; font-size: 17px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .pains p { border-bottom: 0; padding: 28px 20px; } .pains p + p { border-inline-start: 1px solid var(--line); } }
.pains b { color: var(--ink); display: block; font-size: 19px; }

.how { padding: 64px 0; }
.how h2, .pilot h2 { font: 700 clamp(40px, 8vw, 58px)/1 var(--display); letter-spacing: .3px; margin: 0 0 28px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.steps li { counter-increment: s; background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.steps li::before { content: counter(s); display: block; font: 700 52px/1 var(--display); color: var(--brand); margin-bottom: 8px; }
.steps h3 { margin: 0 0 6px; font-size: 19px; }
.steps p { margin: 0; color: var(--ink-2); }

.pilot { background: var(--navy-2); color: #fff; padding: 64px 0; }
.pilot-in { display: grid; gap: 32px; align-items: start; }
@media (min-width: 920px) { .pilot-in { grid-template-columns: 1fr 1fr; gap: 56px; } }
.offer-tag { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: var(--navy); font-weight: 700; font-size: 14px; }
.offer ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; font-size: 17px; color: #d5deea; }
.offer li { padding-inline-start: 28px; position: relative; }
.offer li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #5fd3c1; font-weight: 700; }

.form { background: var(--surface); color: var(--ink); border-radius: 22px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7); }
.form h3 { margin: 0; font-size: 20px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.form input, .form select {
  min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2);
  font-weight: 400; font-size: 16px; width: 100%;
}
.form input:focus, .form select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.form [aria-invalid="true"] { border-color: var(--hot); }
.form .row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .form .row { grid-template-columns: 1fr; } }
.err { color: var(--hot); font-size: 13px; font-weight: 500; min-height: 0; }
.err:empty { display: none; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; font-size: 17px; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form-msg { margin: 0; font-weight: 600; }
.form-msg:empty { display: none; }
.form-msg.ok { color: var(--brand-ink); }
.form-msg.bad { color: var(--hot); }

.footer { padding: 26px 0 40px; color: var(--muted); font-size: 14px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }