:root{
  --paper:#EEF2F5; --card:#FFFFFF; --ink:#13233A; --steel:#5A6B80; --line:#D3DBE3;
  --vis:#FFC629; --vis-d:#E8AE00; --miss:#D6343A; --reply:#1C8C4E; --bubble:#E4E9EF;
  --hd:"Barlow Condensed",system-ui,sans-serif; --bd:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--bd);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--hd);font-weight:700;line-height:1.02;margin:0;letter-spacing:-.005em}
h2{font-size:clamp(34px,4.4vw,52px)}
h3{font-size:24px;line-height:1.1}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:6px;background:var(--vis);color:var(--ink);
  font:700 18px/1 var(--hd);letter-spacing:.02em;padding:15px 20px;cursor:pointer;text-decoration:none;box-shadow:inset 0 -3px 0 var(--vis-d)}
.btn:hover{background:#FFD24F}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-sm{font-size:16px;padding:10px 14px}
.btn-wide{width:100%}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(238,242,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.logo{display:inline-flex;align-items:center;gap:9px;font:800 24px/1 var(--hd);text-decoration:none;letter-spacing:.01em}
.mark{width:22px;height:22px;border-radius:5px;background:var(--ink);position:relative;flex:none}
.mark::after{content:"";position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--vis);border:2px solid var(--paper)}
.trades{display:flex;gap:4px}
.trades a{font:600 17px/1 var(--hd);text-decoration:none;color:var(--steel);padding:8px 10px;border-radius:5px}
.trades a:hover{color:var(--ink);background:#E2E8EE}
.trades a.on{color:var(--ink);background:#DCE3EA}
@media(max-width:620px){.trades{display:none}}

/* hero */
.hero{padding:56px 0 64px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
.kicker{font:600 17px/1.2 var(--bd);color:var(--steel);margin-bottom:14px}
.hero h1{font-size:clamp(46px,7vw,84px);font-weight:800;line-height:.95;max-width:12ch}
.lede{font-size:19px;color:#2C3D55;max-width:56ch;margin-top:20px}
.chips{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:600 15px/1 var(--bd);padding:9px 12px;border:1.5px solid var(--ink);border-radius:999px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero{padding-top:32px}}

/* demo box */
.demo{background:var(--ink);color:#fff;border-radius:10px;padding:22px;max-width:560px}
.demo-h{font:700 26px/1.1 var(--hd)}
.demo-p{color:#C7D2DF;margin-top:6px;font-size:16px}
.demo-p b{color:#fff}
.demo .row{display:flex;gap:8px;margin-top:16px}
.demo input{flex:1;min-width:0;font:500 17px var(--bd);padding:14px;border-radius:6px;border:0;color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.seg button{font:600 15px/1 var(--bd);color:#fff;background:transparent;border:1.5px solid #4A5D78;border-radius:6px;padding:9px 11px;cursor:pointer}
.seg button[aria-checked="true"]{background:#fff;color:var(--ink);border-color:#fff}
.fine{font-size:13px;color:#8FA0B5;margin-top:10px;line-height:1.4}
.err{color:#FF8A8F;font-size:14px;margin-top:8px}
.bigtel{display:inline-block;margin:12px 0 6px;font:800 44px/1 var(--hd);color:var(--vis);text-decoration:none}
@media(max-width:480px){.demo .row{flex-direction:column}}

/* phone */
.hero-art{display:flex;justify-content:center}
.phone{width:100%;max-width:340px;position:relative}
.screen{background:#fff;border:10px solid var(--ink);border-radius:38px;min-height:560px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(19,35,58,.45)}
.call{background:var(--ink);color:#fff;text-align:center;padding:30px 16px 22px}
.call .who{font:700 28px/1 var(--hd)}
.call .sub{color:#AAB8C8;font-size:14px;margin-top:4px}
.state{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font:600 14px/1 var(--bd);color:#FFB3B6}
.dot{width:9px;height:9px;border-radius:50%;background:var(--miss)}
.thread{padding:14px 14px 20px}
.stamp{text-align:center;font-size:12px;color:var(--steel);margin:4px 0 12px}
.b{max-width:82%;padding:9px 12px;border-radius:16px;font-size:15px;line-height:1.35;margin-bottom:8px}
.b.in{background:var(--bubble);border-bottom-left-radius:4px}
.b.out{background:#2F7BF6;color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.alert{position:absolute;left:-28px;right:28px;bottom:-22px;background:var(--vis);border-radius:8px;padding:12px 14px;font-size:15px;line-height:1.35;box-shadow:0 14px 30px -14px rgba(19,35,58,.5)}
@media(max-width:420px){.alert{left:-6px;right:6px}}

/* one orchestrated moment: the call goes missed, then the thread plays in */
.anim .state{animation:ring 1.4s ease-out 1}
.anim .stamp,.anim .b,.anim .alert{opacity:0;transform:translateY(8px);animation:pop .45s ease-out forwards}
.anim .stamp{animation-delay:1.3s}
.anim .b{animation-delay:calc(1.9s + var(--i) * 1.1s)}
.anim .alert{animation-delay:6.6s}
@keyframes pop{to{opacity:1;transform:none}}
@keyframes ring{0%,40%{color:#fff}100%{color:#FFB3B6}}
@media(prefers-reduced-motion:reduce){.anim .stamp,.anim .b,.anim .alert,.anim .state{animation:none;opacity:1;transform:none}}

/* sections */
.sec{padding:80px 0}
.intro{font-size:19px;color:#2C3D55;max-width:60ch;margin-top:12px}
.how{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:16px}
.steps li::before{content:counter(s);display:block;font:800 44px/1 var(--hd);color:var(--vis-d);margin-bottom:8px}
.steps p{color:#3A4B62;margin-top:8px}
@media(max-width:800px){.steps{grid-template-columns:1fr}}

/* roi */
.roi-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.roi-copy p{margin-top:14px;color:#2C3D55}
.roi-copy .note{font-size:15px;color:var(--steel)}
.roi-box{background:var(--card);border:1.5px solid var(--ink);border-radius:10px;padding:26px}
.sl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin-bottom:22px;font-weight:500}
.sl output{font:700 22px/1 var(--hd)}
.sl input{grid-column:1/-1;width:100%;accent-color:var(--ink);height:28px}
.roi-out{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;border-top:1.5px solid var(--line);padding-top:18px}
.roi-big span{display:block;font:800 clamp(48px,6vw,68px)/1 var(--hd)}
.roi-small span{display:block;font:700 34px/1 var(--hd);color:#2C3D55}
.roi-out small{font-size:14px;color:var(--steel)}
.math{font-size:14px;color:var(--steel);margin-top:12px}
@media(max-width:900px){.roi-grid{grid-template-columns:1fr;gap:24px}}

/* why */
.why{padding-top:0}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1.5px solid var(--ink)}
.why-item{padding:26px 28px 26px 0;border-bottom:1px solid var(--line)}
.why-item:nth-child(odd){padding-right:40px;border-right:1px solid var(--line)}
.why-item:nth-child(even){padding-left:40px}
.why-item p{color:#3A4B62;margin-top:8px}
@media(max-width:760px){.why-grid{grid-template-columns:1fr}.why-item:nth-child(n){padding:22px 0;border-right:0}}

/* signup */
.start{background:var(--ink);color:#fff}
.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.price{margin-top:16px;font-size:18px;color:#C7D2DF}
.price .now{font:800 40px/1 var(--hd);color:var(--vis)}
.price .was{text-decoration:line-through;color:#8FA0B5}
.ticks{list-style:none;padding:0;margin:22px 0 0}
.ticks li{padding:8px 0 8px 28px;position:relative;color:#E3E9F0}
.ticks li::before{content:"";position:absolute;left:0;top:15px;width:14px;height:8px;border-left:3px solid var(--vis);border-bottom:3px solid var(--vis);transform:rotate(-45deg)}
.signup{background:#fff;color:var(--ink);border-radius:10px;padding:26px}
.signup .fine{color:var(--steel)}
.signup .err{color:var(--miss)}
.signup h3{font-size:32px}
.signup.done p{margin-top:10px}
.f{display:block;margin-bottom:14px}
.f span{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.f input,.f select{width:100%;font:500 17px var(--bd);padding:13px;border:1.5px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.f input:focus,.f select:focus{border-color:var(--ink);outline:0}
@media(max-width:800px){.start-grid{grid-template-columns:1fr;gap:28px}}

/* faq */
.faq h2{margin-bottom:24px}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{font:700 22px/1.2 var(--hd);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:26px;line-height:1}
details[open] summary::after{content:"−"}
details p{margin-top:10px;color:#3A4B62;max-width:62ch}

/* footer */
.foot{padding:36px 0 44px;border-top:1px solid var(--line)}
.footrow{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot p{color:var(--steel);margin-top:8px;font-size:15px}
.footlinks{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--steel)}

/* legal */
.legal{padding-top:48px;padding-bottom:64px}
.legal h1{font-size:clamp(38px,5vw,56px)}
.legal h2{font-size:26px;margin-top:32px}
.legal p{margin-top:10px;color:#2C3D55}