:root{
  --sky:#E8EFF5;
  --paper:#FFFFFF;
  --ink:#13203A;
  --ink-soft:#4A5872;
  --blue:#2B66F6;
  --red:#E5484D;
  --sun:#FFC23D;
  --line:#CBD6E2;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sky);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4vw,2.75rem);font-weight:800;margin-bottom:.5em}
h3{font-size:1.25rem;font-weight:700;margin-bottom:.35em}
p{max-width:62ch}

/* header */
.site{padding:22px 0}
.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--ink);text-decoration:none;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:8px}
.logo i{width:12px;height:12px;border-radius:50%;background:var(--red);display:inline-block;transform:translateY(-6px)}
.site nav{display:flex;gap:22px}
.site nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem}
.site nav a:hover{color:var(--blue)}
@media(max-width:640px){.site nav a:not(.nav-cta){display:none}}

.btn{display:inline-block;background:var(--sun);color:var(--ink);font-weight:700;text-decoration:none;padding:14px 22px;border-radius:999px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.small{padding:8px 16px;font-size:.95rem;box-shadow:2px 2px 0 var(--ink)}
.textlink{font-weight:700;margin-left:18px}

/* hero */
.hero{padding:40px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:800;letter-spacing:-.035em;margin-bottom:22px}
.hero .lede{font-size:1.2rem;color:var(--ink-soft);margin-bottom:32px;max-width:46ch}
.hero .fine{margin-top:18px;font-size:.95rem;color:var(--ink-soft)}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:48px}.phone{justify-self:center}}

/* phone */
.phone{width:min(340px,100%);background:var(--ink);border-radius:44px;padding:12px;box-shadow:0 30px 60px -20px rgba(19,32,58,.45)}
.screen{background:#F7F9FB;border-radius:34px;overflow:hidden;min-height:540px;display:flex;flex-direction:column}
.notch{width:110px;height:26px;background:var(--ink);border-radius:0 0 16px 16px;margin:0 auto}
.missed{margin:18px 14px 6px;background:var(--paper);border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 1px 0 var(--line)}
.missed .ic{width:36px;height:36px;border-radius:10px;background:var(--red);display:grid;place-items:center;flex:none}
.missed b{display:block;font-size:.9rem}
.missed span{font-size:.85rem;color:var(--ink-soft)}
.thread-head{text-align:center;font-size:.8rem;color:var(--ink-soft);padding:14px 0 6px}
.thread-head strong{display:block;color:var(--ink);font-size:.95rem}
.thread{padding:6px 14px 18px;display:flex;flex-direction:column;gap:8px}
.bubble{max-width:82%;padding:9px 13px;border-radius:18px;font-size:.92rem;line-height:1.35}
.bubble.out{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.bubble.in{align-self:flex-start;background:#E3E8EF;border-bottom-left-radius:6px}
.stamp{align-self:center;font-size:.72rem;color:var(--ink-soft);margin:2px 0}

/* one orchestrated load sequence */
@media (prefers-reduced-motion:no-preference){
  .seq{opacity:0;transform:translateY(8px);animation:pop .35s ease-out forwards}
  .seq.s1{animation-delay:.3s}.seq.s2{animation-delay:1.1s}.seq.s3{animation-delay:1.5s}
  .seq.s4{animation-delay:2.6s}.seq.s5{animation-delay:3.6s}.seq.s6{animation-delay:4.6s}
  @keyframes pop{to{opacity:1;transform:none}}
}

/* sections */
section{padding:88px 0}
section.light{background:var(--paper)}
.intro{color:var(--ink-soft);font-size:1.15rem;margin-bottom:48px}

/* how it works: real sequence */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:22px;left:22px;right:22px;height:2px;background:var(--line)}
.steps li{position:relative;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);font:800 1.15rem var(--display);margin-bottom:18px;position:relative}
.steps li:first-child::before{background:var(--red);border-color:var(--red);color:#fff}
.steps p{color:var(--ink-soft);font-size:1rem}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* owner alert */
.alert-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.alert{background:var(--sky);border-radius:22px;padding:22px;border:2px solid var(--ink)}
.alert .from{font-size:.85rem;color:var(--ink-soft);margin-bottom:10px}
.alert .msg{background:#E3E8EF;border-radius:18px;border-bottom-left-radius:6px;padding:14px 16px;font-size:.98rem;line-height:1.5}
.alert .msg b{display:block;margin-bottom:4px}
.checks{list-style:none;margin-top:22px}
.checks li{padding:10px 0 10px 34px;position:relative;border-top:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:4px;top:15px;width:16px;height:9px;border:solid var(--blue);border-width:0 0 3px 3px;transform:rotate(-45deg)}
@media(max-width:860px){.alert-wrap{grid-template-columns:1fr;gap:36px}}

/* pricing */
.price{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:start;background:var(--paper);border:2px solid var(--ink);border-radius:28px;padding:44px;box-shadow:6px 6px 0 var(--ink)}
.price .amt{font-family:var(--display);font-weight:800;font-size:clamp(3.5rem,9vw,5.5rem);line-height:1;letter-spacing:-.04em}
.price .per{font-size:1.1rem;color:var(--ink-soft);margin:6px 0 24px}
.price ul{list-style:none}
.price li{padding:12px 0;border-bottom:1px solid var(--line)}
.price li:last-child{border:0}
@media(max-width:760px){.price{grid-template-columns:1fr;gap:28px;padding:28px}}

/* faq */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font:700 1.15rem var(--display);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--blue);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--ink-soft)}

/* contact */
.contact{background:var(--ink);color:#fff}
.contact h2{color:#fff}
.contact .intro{color:#B9C4D6}
.contact-lines{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:28px;font-size:1.1rem}
.contact-lines a{color:var(--sun);font-weight:700}
.contact-lines span{display:block;font-size:.85rem;color:#B9C4D6}

footer{padding:32px 0;font-size:.9rem;color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
footer nav{display:flex;gap:20px}

/* legal pages */
.legal{background:var(--paper);padding:56px 0 72px}
.legal .wrap{max-width:780px}
.legal h1{font-size:2.6rem;font-weight:800;margin-bottom:6px}
.legal .updated{color:var(--ink-soft);margin-bottom:28px}
.legal h2{font-size:1.4rem;margin:32px 0 10px}
.legal p,.legal li{margin-bottom:10px}
.legal ul{padding-left:22px}

/* ---------- interactive demo ---------- */
.try-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.try-copy .intro{margin-bottom:28px}
.field{display:block;font-weight:700;font-size:.95rem;margin-bottom:10px}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:6px;font:400 1.05rem var(--body);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:12px 14px}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--blue);outline-offset:2px}
.field .hint{display:block;font-weight:400;font-size:.88rem;color:var(--ink-soft);margin-top:4px}
.fine{font-size:.9rem;color:var(--ink-soft)}
.owner-alert{margin-top:28px;background:var(--paper);border:2px solid var(--ink);border-radius:22px;padding:20px;box-shadow:4px 4px 0 var(--ink)}
.owner-alert .from{font-size:.85rem;color:var(--ink-soft);margin-bottom:10px}
.owner-alert .msg{background:#E3E8EF;border-radius:18px;border-bottom-left-radius:6px;padding:14px 16px;font-size:.95rem;line-height:1.5;white-space:pre-line;margin-bottom:18px}
.demo-phone{width:340px;max-width:100%}
.demo-phone .screen{position:relative;height:560px}
.demo-view{flex:1;display:flex;flex-direction:column;min-height:0}
.demo-view[hidden]{display:none}
#view-dial,#view-calling{align-items:center;justify-content:center;text-align:center;padding:24px}
.dial-name{font:800 1.5rem var(--display);letter-spacing:-.02em;margin-bottom:4px}
.dial-num,.call-status{color:var(--ink-soft)}
.call-btn,.end-btn{width:72px;height:72px;border-radius:50%;border:0;display:grid;place-items:center;margin-top:48px}
.call-btn{background:#22B14C;cursor:pointer}
.call-btn:hover{filter:brightness(1.08)}
.end-btn{background:var(--red);margin-top:auto}
.dial-hint{margin-top:12px;font-size:.9rem;color:var(--ink-soft)}
.ring{display:flex;gap:8px;margin:40px 0}
.ring span{width:10px;height:10px;border-radius:50%;background:var(--blue);opacity:.25}
@media (prefers-reduced-motion:no-preference){.ring span{animation:ring 1.2s infinite}.ring span:nth-child(2){animation-delay:.2s}.ring span:nth-child(3){animation-delay:.4s}
@keyframes ring{40%{opacity:1;transform:scale(1.3)}}}
.ring.off span{animation:none;opacity:.15}
.voice{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:.9rem;line-height:1.4;max-width:250px}
.demo-thread{flex:1;overflow-y:auto;min-height:0}
.typing{align-self:flex-start;background:#E3E8EF;border-radius:18px;padding:10px 14px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.5}
@media (prefers-reduced-motion:no-preference){.typing i{animation:ring 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px;justify-content:flex-end}
.chips button{font:700 .82rem var(--body);color:var(--blue);background:var(--paper);border:1.5px solid var(--blue);border-radius:999px;padding:6px 11px;cursor:pointer;text-align:left}
.chips button:hover{background:#EDF2FF}
.compose{display:flex;gap:8px;padding:10px 12px 14px;border-top:1px solid var(--line);background:var(--paper)}
.compose input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font:400 .95rem var(--body)}
.compose button{width:38px;height:38px;border-radius:50%;border:0;background:var(--blue);display:grid;place-items:center;cursor:pointer;flex:none}
.compose input:disabled,.compose button:disabled{opacity:.45;cursor:default}
.restart{background:none;border:0;color:var(--blue);font:700 1rem var(--body);cursor:pointer;margin:20px 0 0;text-decoration:underline}
@media(max-width:860px){.try-wrap{grid-template-columns:minmax(0,1fr);gap:40px}.demo-phone{justify-self:center}}

/* ---------- signup ---------- */
.signup{padding:24px 0 88px}
.signup-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
.signup-side h1{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;letter-spacing:-.035em;margin-bottom:12px}
.signup-side>p{color:var(--ink-soft);margin-bottom:28px}
.progress{list-style:none;margin-bottom:28px;counter-reset:p}
.progress li{counter-increment:p;display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--ink-soft);font-weight:700}
.progress li::before{content:counter(p);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:var(--paper);font:800 .95rem var(--display);flex:none}
.progress li.current{color:var(--ink)}
.progress li.current::before{border-color:var(--ink);background:var(--sun)}
.progress li.done::before{content:"\2713";background:var(--blue);border-color:var(--blue);color:#fff}
.signup-card{background:var(--paper);border:2px solid var(--ink);border-radius:28px;padding:40px;box-shadow:6px 6px 0 var(--ink)}
.signup-card fieldset{border:0}
.signup-card legend{font:800 1.9rem var(--display);letter-spacing:-.02em;margin-bottom:24px}
.signup-card .field{margin-bottom:22px}
.opt{font-weight:400;color:var(--ink-soft)}
.field [aria-invalid="true"]{border-color:var(--red);background:#FFF5F5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.review{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:10px 20px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.review dt{color:var(--ink-soft);font-size:.95rem}
.review dd{font-weight:700;overflow-wrap:anywhere}
.review .back{grid-column:1/-1;justify-self:start}
.agree{display:flex;gap:12px;align-items:flex-start;margin:6px 0 28px;font-size:.98rem}
.agree input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--blue)}
.next-steps{background:var(--sky);border-radius:18px;padding:22px 24px}
.next-steps ol{padding-left:20px;color:var(--ink-soft)}
.next-steps li{margin-bottom:6px}
.form-error{margin-top:20px;background:#FFF0F0;border:2px solid var(--red);border-radius:14px;padding:12px 16px;color:#8A1C1F;font-weight:700}
.nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:16px}
.nav-row .btn{margin-left:auto;font-size:1.05rem;cursor:pointer;font-family:var(--body)}
.nav-row .btn:disabled{opacity:.6;cursor:wait}
.back{background:none;border:0;font:700 1rem var(--body);color:var(--blue);cursor:pointer;text-decoration:underline;padding:8px 0}
.done h2{margin-bottom:12px}
.done p{margin-bottom:16px}
@media(max-width:860px){.signup-wrap{grid-template-columns:minmax(0,1fr);gap:28px}.progress{display:flex;gap:8px}.progress li{font-size:0;padding:0}.progress li::before{font-size:.95rem}.signup-card{padding:26px 22px}.review{grid-template-columns:1fr}.review dd{margin-bottom:8px}}