:root {
  color-scheme: light;
  --ink: #17262d;
  --muted: #52656d;
  --line: #d6e0df;
  --paper: #f7f9f7;
  --card: #ffffff;
  --accent: #1d7668;
  --accent-dark: #15584e;
  --warning: #71531b;
  --warning-bg: #fff8df;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.55; }
main { width: min(100% - 2rem, 1050px); margin: 0 auto; padding: 5.5rem 0 3.5rem; }
.hero { max-width: 760px; }
.eyebrow { margin: 0 0 .75rem; color: var(--accent); font-size: .78rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
h1, h2 { line-height: 1.08; letter-spacing: -.035em; }
h1 { max-width: 720px; margin: 0; font-size: clamp(1.9rem, 4.5vw, 3.8rem); }
h2 { margin: 0 0 .7rem; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.lede { max-width: 690px; margin: 1.4rem 0; color: var(--muted); font-size: 1.15rem; }
.notice { max-width: 700px; border: 1px solid #ead9a3; border-radius: .65rem; background: var(--warning-bg); color: #513c12; padding: 1rem 1.1rem; }
.demo-card { display: grid; grid-template-columns: 1fr minmax(300px, 420px); gap: 4rem; margin-top: 4.25rem; padding: clamp(1.5rem, 4vw, 3.25rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--card); box-shadow: 0 24px 50px rgb(27 54 53 / 7%); }
.demo-card p { color: var(--muted); }
form { display: grid; gap: .65rem; align-content: start; }
label { font-weight: 650; }
input[type="tel"] { width: 100%; border: 1px solid #b7c6c4; border-radius: .45rem; padding: .82rem .9rem; font: inherit; color: inherit; }
input[type="tel"]:focus { outline: 3px solid rgb(29 118 104 / 20%); border-color: var(--accent); }
.field-help, .small { margin: 0; color: var(--muted); font-size: .87rem; }
code { font-size: .9em; }
.consent { display: flex; align-items: flex-start; gap: .72rem; margin: .7rem 0 .25rem; font-size: .92rem; font-weight: 450; }
.consent input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; accent-color: var(--accent); }
.turnstile { min-height: 65px; }
button { width: fit-content; border: 0; border-radius: .48rem; background: var(--accent); color: white; cursor: pointer; font: inherit; font-weight: 700; padding: .88rem 1.2rem; transition: background .15s ease, transform .15s ease; }
button:hover { background: var(--accent-dark); transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .62; transform: none; }
button.secondary { border: 1px solid #9eb0ae; background: white; color: var(--accent-dark); }
button.secondary:hover { background: #edf4f2; }
.form-status { min-height: 1.5rem; margin: .15rem 0 0; color: var(--muted); font-size: .91rem; }
.form-status.error { color: #a42929; }
.form-status.success { color: var(--accent-dark); }
.how-it-works { margin: 5rem 0 1rem; }
.how-it-works ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; padding: 0; list-style: none; }
.how-it-works li { padding: 1rem 1.1rem; border-top: 1px solid var(--line); color: var(--muted); }
.how-it-works li span { display: block; margin-bottom: .8rem; color: var(--accent); font-size: .76rem; font-weight: 750; letter-spacing: .08em; }
footer { border-top: 1px solid var(--line); padding: 1.6rem 1rem 2rem; color: var(--muted); text-align: center; font-size: .85rem; }
@media (max-width: 720px) { main { padding-top: 3.25rem; } .demo-card { grid-template-columns: 1fr; gap: 2rem; } .how-it-works ol { grid-template-columns: 1fr; } }