/* HeyVox marketing site. One stylesheet for every public page.
   The rule: the site is the app, zoomed out. Colours, type, radii and
   icons come from the Android app (res/values/colors.xml, the drawables,
   Sora + Inter), so what people see here is what they get on the phone. */

@font-face{font-family:Sora;src:url(/assets/fonts/sora-var.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-600.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-700.woff2) format("woff2");font-weight:700 900;font-display:swap}

:root{
  --bg:#F4FAF8; --surface:#FFFFFF; --line:#DCE8E5; --line-2:#C9DCD7;
  --ink:#10201D; --body:#3F5A55; --muted:#56706B;
  --teal:#0A7B6C; --teal-dark:#075E53; --teal-deep:#063F38; --teal-light:#E6F4F1; --teal-soft:#E1F5EE; --teal-border:#9FE1CB;
  --coral:#E8593C; --coral-text:#C8452A; --coral-light:#FBE8E3;
  --gold:#7A5B12; --gold-light:#F7EED4;
  --r-btn:12px; --r-card:16px; --r-pill:100px;
  --wrap:1120px; --gut:24px;
  --lift:0 24px 48px -24px rgba(7,40,35,.28),0 8px 18px -10px rgba(7,40,35,.18);
  --ease:cubic-bezier(.2,0,0,1); --ease-in:cubic-bezier(.05,.7,.1,1);
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--body);font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal-dark)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;color:var(--ink);font-weight:600;margin:0}
p{margin:0}
.i{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em;flex:none}
.i svg{width:100%;height:100%}
.i svg path[fill]:not([fill="none"]){fill:currentColor}
.i svg path[stroke]{stroke:currentColor}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}

/* type */
.display{font-size:clamp(38px,6.2vw,64px);line-height:1.02;letter-spacing:-.025em}
.h2{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.018em}
.h3{font-size:clamp(19px,1.8vw,22px);line-height:1.25;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--body)}
.small{font-size:14px;line-height:1.5}
.cap{font-size:13px;line-height:1.45;color:var(--muted)}
.measure{max-width:60ch}

/* layout */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{padding:96px 0}
.sec.white{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec.white + .sec.white{border-top:0}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head p{margin-top:16px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
@media (max-width:760px){.sec{padding:72px 0}:root{--gut:16px}.sec-head{margin-bottom:32px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:var(--r-btn);font:600 16px/1 Inter,sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn .i{width:20px;height:20px}
.btn-p{background:var(--teal);color:#fff}
.btn-p:hover{background:var(--teal-dark);color:#fff}
.btn-s{background:var(--surface);color:var(--teal-dark);border-color:var(--line-2)}
.btn-s:hover{border-color:var(--teal);color:var(--teal-dark)}
.btn-soft{background:var(--teal-soft);color:var(--teal-dark)}
.btn-soft:hover{background:#D3EFE6;color:var(--teal-dark)}
.btn-sm{height:44px;padding:0 16px;font-size:15px}
.btn-block{width:100%}
.btn small{font-weight:500;opacity:.85}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:rgba(244,250,248,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;height:68px}
.wm{font-family:Sora,Inter,sans-serif;font-size:25px;font-weight:400;letter-spacing:-.01em;color:var(--ink);text-decoration:none;line-height:1}
.wm b{font-weight:800;color:var(--teal)}
.wm:hover{color:var(--ink)}
.hdr nav{display:flex;gap:2px;flex:1;justify-content:center}
.hdr nav a{color:var(--body);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:8px;white-space:nowrap}
.hdr nav a:hover,.hdr nav a[aria-current=page]{color:var(--ink);background:rgba(10,123,108,.07)}
.hdr-act{display:flex;align-items:center;gap:8px}
.hdr-act .login{color:var(--body);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;white-space:nowrap}
.menu-btn{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
.mnav{display:none}
@media (max-width:900px){
  .hdr nav,.hdr-act .login,.hdr-act .btn{display:none}
  .menu-btn{display:inline-flex;margin-left:auto}
  .mnav.open{display:block;position:absolute;top:100%;left:0;right:0;height:calc(100vh - 68px);height:calc(100dvh - 68px);z-index:39;background:var(--bg);padding:12px var(--gut) 32px;overflow:auto;border-top:1px solid var(--line)}
  .mnav a{display:block;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:600 18px/1.2 Sora,Inter,sans-serif}
  .mnav .btn{margin-top:20px;width:100%;display:flex;justify-content:center;height:52px;padding:0 18px;font:600 16px/1.2 Inter,system-ui,sans-serif}
  .mnav .btn-p{color:#fff;border:1px solid transparent}
  .mnav .btn-s{color:var(--teal-dark);border:1px solid var(--line-2)}
  .mnav .btn + .btn{margin-top:10px}
}

/* hero */
.hero{padding:56px 0 88px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{margin-bottom:22px}
.hero .lead{max-width:34ch;margin-bottom:32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{margin-top:22px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note .i{width:16px;height:16px;color:var(--teal)}
.hero-stage{position:relative;display:flex;justify-content:center;min-height:660px}
.hero-stage .ph{--s:.86}
.stage-cap{position:absolute;bottom:-34px;left:0;right:0;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero{padding:32px 0 72px}
  .hero-stage{min-height:0}
}
@media (max-width:420px){.hero-stage .ph{--s:.8}}

/* the demo-line button: big number on desktop, tap to call on a phone */
.demo-call{display:inline-flex;align-items:center;gap:14px;height:60px;padding:0 22px 0 14px;border-radius:var(--r-btn);background:var(--teal);color:#fff;text-decoration:none}
.demo-call:hover{background:var(--teal-dark);color:#fff}
.demo-call .dc-ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.demo-call .dc-ic .i{width:19px;height:19px}
.demo-call span{display:flex;flex-direction:column;line-height:1.15}
.demo-call small{font-size:13px;font-weight:500;color:#CDEBE4}
.demo-call b{font:600 19px/1.2 Inter,sans-serif;letter-spacing:.01em}
/* The web app demo: same size and weight as the call demo, outlined so the two read as a pair. */
.demo-call.demo-web{background:var(--surface);color:var(--teal-deep);border:1.5px solid var(--teal)}
.demo-call.demo-web:hover{background:var(--teal-light);color:var(--teal-deep)}
.demo-call.demo-web small{color:var(--teal-dark)}
.demo-call.demo-web .dc-ic{background:var(--teal-light);color:var(--teal)}

/* steps (a real sequence, so numbered) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:st}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px 0;display:flex;flex-direction:column;overflow:hidden}
.step-n{width:30px;height:30px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);display:grid;place-items:center;font:600 14px/1 Inter,sans-serif;margin-bottom:18px}
.step h3{margin-bottom:10px}
.step p{font-size:15.5px}
.step-vis{margin-top:auto;padding-top:28px;display:flex;justify-content:center;min-height:270px;align-items:flex-end}
@media (max-width:980px){.steps{grid-template-columns:1fr}.step-vis{min-height:0}}

/* cropped phone tops used inside step cards */
.crop{width:100%;max-width:300px;height:270px;overflow:hidden;border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:0;background:var(--bg);position:relative}
.crop .ph{--s:.82;border-radius:0;padding:0;background:none;box-shadow:none}
.crop .ph-screen{border-radius:0}
.crop.mid .ph-screen{margin-top:-150px}

/* caller transcript (what the caller hears) */
.say{width:100%;max-width:300px;align-self:stretch;display:flex;flex-direction:column;gap:10px;padding-bottom:28px}
.say div{font-size:14.5px;line-height:1.45;padding:10px 14px;border-radius:12px;max-width:92%}
.say .hv{background:var(--teal-light);color:var(--teal-deep)}
.say .cl{background:var(--bg);border:1px solid var(--line);color:var(--ink);align-self:flex-end}
.say small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:2px}

/* incoming-call screen (Android dialer, simplified) */
.ring{background:#1C2A27;color:#fff;text-align:center;padding:26px 20px 20px;height:100%}
.ring small{font-size:13px;color:#A9C2BC}
.ring b{display:block;font:600 22px/1.2 Inter,sans-serif;margin:6px 0 2px}
.ring .r-av{width:60px;height:60px;border-radius:50%;margin:16px auto 0;background:#2E4A44;display:grid;place-items:center;font-size:22px;font-weight:600}
.ring .r-row{display:flex;justify-content:space-around;margin-top:26px}
.ring .r-row span{width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.ring .r-row .no{background:#D93F2A}
.ring .r-row .yes{background:#1F9D57}
.ring .r-row .i{width:24px;height:24px}

/* two ways */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.way{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:32px;display:flex;flex-direction:column}
.way-tag{align-self:flex-start;font-size:13px;font-weight:600;color:var(--teal-dark);background:var(--teal-light);padding:4px 10px;border-radius:6px;margin-bottom:16px}
.way h3{margin-bottom:10px}
.way ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.way li{display:flex;gap:10px;font-size:15.5px;line-height:1.45}
.way li .i{color:var(--teal);width:18px;height:18px;margin-top:2px}
.way-card{margin-top:28px;padding:20px;background:var(--bg);border:1px solid var(--line);border-radius:14px}
.way-price{margin-top:24px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.way-price b{font:600 22px/1 Sora,Inter,sans-serif;color:var(--ink)}
.way-price b small{font:500 14px Inter,sans-serif;color:var(--muted)}
@media (max-width:860px){.two{grid-template-columns:1fr}.way{padding:24px}}

/* standalone app card (not inside a phone) */
.card-solo{--teal:#0A7B6C}
.card-solo .vm{margin:0}

/* feature split: copy one side, product the other */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .split-vis{order:-1}
.split-copy h2{margin-bottom:16px}
.ticks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:16px;line-height:1.5}
.ticks li .i{width:22px;height:22px;color:var(--teal);margin-top:1px}
.ticks b{color:var(--ink);font-weight:600}
.split-vis{display:flex;justify-content:center;position:relative}
@media (max-width:980px){.split{grid-template-columns:1fr;gap:40px}.split.rev .split-vis{order:0}}

/* a captured screen from the real web app */
.shot{border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--lift)}
.shot-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line);background:#F8FBFA}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#D5E3DF}
.shot-bar span{margin-left:10px;font-size:12px;color:var(--muted)}
.shot img{width:100%;height:auto}
.shot-wrap{position:relative;width:100%}
.shot-wrap .ph{position:absolute;right:-24px;bottom:-40px;--s:.62}
.load-demo{position:absolute;inset:34px 0 0;display:grid;place-items:center;background:rgba(244,250,248,0);border:0;cursor:pointer;width:100%}
.load-demo span{opacity:0;transform:translateY(6px);transition:.2s var(--ease);background:var(--ink);color:#fff;border-radius:10px;padding:12px 16px;font:600 15px Inter,sans-serif}
.load-demo:hover span,.load-demo:focus-visible span{opacity:1;transform:none}
.shot iframe{display:block;width:100%;height:720px;border:0}
@media (max-width:980px){.shot-wrap .ph{display:none}}

/* bookings visuals */
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.area{display:inline-flex;gap:8px;align-items:center;font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px 6px 6px}
.area b{font-weight:600;color:var(--teal-dark);background:var(--teal-light);border-radius:var(--r-pill);padding:2px 9px;font-size:13px}

/* trade tuner */
.tuner{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.tabs{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;height:42px;padding:0 16px;border-radius:10px;border:0;background:none;font:600 15px Inter,sans-serif;color:var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tab .i{width:18px;height:18px}
.tab:hover{background:var(--bg);color:var(--ink)}
.tab[aria-selected=true]{background:var(--teal-light);color:var(--teal-dark)}
.tuner-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tuner-l{padding:32px;border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;gap:16px}
.tuner-r{padding:32px;display:flex;flex-direction:column;gap:22px}
.tq h3{font:600 15px Inter,sans-serif;color:var(--ink);margin-bottom:12px}
.tq ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:q}
.tq li{counter-increment:q;display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:15px;line-height:1.45;color:var(--ink)}
.tq li:before{content:counter(q);width:24px;height:24px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);display:grid;place-items:center;font-size:12.5px;font-weight:600}
.tq p{margin-top:12px}
.calc{}
.calc h3{font:600 15px Inter,sans-serif;color:var(--ink);margin-bottom:16px}
.calc label{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:14px;color:var(--body);margin-bottom:12px}
.calc label output{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.calc input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--teal);height:24px;margin:2px 0 0}
.calc-out{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--teal-deep);color:#fff;border-radius:14px;padding:16px 18px;margin-top:6px}
.calc-out b{font:600 28px/1 Sora,Inter,sans-serif;font-variant-numeric:tabular-nums}
.calc-out span{font-size:14px;color:#BFE3DA}
@media (max-width:900px){.tuner-body{grid-template-columns:1fr}.tuner-l{border-right:0;border-bottom:1px solid var(--line)}.tuner-l,.tuner-r{padding:22px}}

/* pricing */
.seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);margin-bottom:28px}
.seg button{height:42px;padding:0 18px;border:0;border-radius:var(--r-pill);background:none;font:600 15px Inter,sans-serif;color:var(--body);cursor:pointer}
.seg button[aria-selected=true]{background:var(--teal);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plans.two-up{grid-template-columns:repeat(2,minmax(0,380px))}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column}
.plan.feat{border:2px solid var(--teal);padding:27px}
.plan-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.plan h3{font-size:21px}
.badge{font-size:12.5px;font-weight:600;color:var(--gold);background:var(--gold-light);border-radius:6px;padding:3px 8px;white-space:nowrap}
.plan-for{font-size:14.5px;color:var(--muted);min-height:44px}
.price{margin:18px 0 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price b{font:600 40px/1 Sora,Inter,sans-serif;color:var(--ink);letter-spacing:-.02em}
.price s{font-size:18px;color:var(--muted)}
.price span{font-size:14px;color:var(--muted)}
.plan-unit{font-size:14px;color:var(--teal-dark);font-weight:500;min-height:21px}
.plan ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px;font-size:15px;line-height:1.45}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.plan li .i{width:18px;height:18px;color:var(--teal);margin-top:2px}
.plan li.inc{font-weight:600;color:var(--ink)}
.plan .btn{margin-top:auto}
.founder-note{font-size:13.5px;color:var(--body);background:var(--gold-light);border-radius:10px;padding:10px 12px;margin:-8px 0 20px;line-height:1.45}
.price-notes{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--muted)}
.price-notes span{display:inline-flex;gap:6px;align-items:center}
.price-notes .i{width:16px;height:16px;color:var(--teal)}
.panel[hidden]{display:none}
@media (max-width:980px){.plans,.plans.two-up{grid-template-columns:minmax(0,1fr)}.plan-for{min-height:0}}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
table.tbl{border-collapse:collapse;width:100%;min-width:680px;font-size:15px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.tbl thead th{font:600 14px Inter,sans-serif;color:var(--ink);background:#F8FBFA;position:sticky;top:0}
.tbl tbody th{font-weight:500;color:var(--ink)}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl .us{background:var(--teal-light)}
.tbl thead .us{background:var(--teal);color:#fff}
.tbl .grp th{background:var(--bg);font:600 13px Inter,sans-serif;color:var(--teal-dark);padding:10px 16px}
.y,.n,.m{display:inline-flex;align-items:center;gap:6px}
.y{color:var(--teal-dark);font-weight:600}
.n{color:var(--muted)}
.m{color:var(--body)}
.y .i,.n .i{width:17px;height:17px}

/* founder */
.founder{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:40px}
.f-mark{width:88px;height:88px;border-radius:50%;background:var(--teal-light);color:var(--teal);display:grid;place-items:center;font:600 30px/1 Sora,Inter,sans-serif}
.founder blockquote{margin:0;font-size:18px;line-height:1.6;color:var(--ink);max-width:62ch}
.founder blockquote p + p{margin-top:14px}
.f-sig{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;font-size:15px}
.f-sig b{color:var(--ink)}
@media (max-width:760px){.founder{grid-template-columns:1fr;padding:24px;gap:20px}.f-mark{width:64px;height:64px;font-size:22px}.founder blockquote{font-size:16.5px}}

/* faq */
.faq{max-width:820px}
.faq-g{border-top:1px solid var(--line)}
.faq-g:last-child{border-bottom:1px solid var(--line)}
.faq-g > summary{list-style:none;display:flex;align-items:center;gap:16px;padding:22px 4px;cursor:pointer;font:600 19px/1.3 Sora,Inter,sans-serif;color:var(--ink)}
.faq-g > summary::-webkit-details-marker,.faq-q > summary::-webkit-details-marker{display:none}
.faq-g > summary span:not(.i){margin-left:auto;font:500 14px Inter,sans-serif;color:var(--muted)}
.faq-g > summary .i,.faq-q > summary .i{width:20px;height:20px;color:var(--teal);transition:transform .2s var(--ease)}
.faq-g[open] > summary .i,.faq-q[open] > summary .i{transform:rotate(180deg)}
.faq-in{padding:0 4px 18px}
.faq-q{border-top:1px solid var(--line)}
.faq-q > summary{list-style:none;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 0;cursor:pointer;font-weight:600;color:var(--ink);font-size:16px;line-height:1.45}
.faq-q p{padding:0 0 18px;max-width:68ch;font-size:15.5px}
.faq-q p + p{margin-top:-6px}

/* closing band */
.close{background:var(--teal-deep);color:#D5ECE6;padding:96px 0}
.close h2{color:#fff;max-width:18ch}
.close p{max-width:52ch;margin-top:16px;font-size:18px}
.close .cta-row{margin-top:32px}
.close .demo-call{background:#fff;color:var(--teal-deep)}
.close .demo-call:hover{background:#EAF6F2;color:var(--teal-deep)}
.close .demo-call .dc-ic{background:var(--teal-light)}
.close .demo-call.demo-web{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.close .demo-call.demo-web:hover{background:rgba(255,255,255,.1);color:#fff}

.close .demo-call.demo-web .dc-ic{background:rgba(255,255,255,.16);color:#fff}
.close .demo-call small{color:var(--muted)}
.close .demo-call.demo-web small{color:#CDEBE4}
.close .btn-s{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.close .btn-s:hover{border-color:#fff;color:#fff}
.close-note{margin-top:20px;font-size:14px;color:#9FCBC1}

/* footer */
.ftr{background:var(--surface);border-top:1px solid var(--line);padding:56px 0 40px;font-size:14.5px}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ftr h4{font:600 14px Inter,sans-serif;color:var(--ink);margin-bottom:12px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ftr a{color:var(--body);text-decoration:none;display:inline-block;padding:3px 0}
.ftr a:hover{color:var(--teal-dark);text-decoration:underline}
.ftr-about p{margin-top:12px;max-width:34ch;color:var(--muted)}
.ftr-base{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--muted);font-size:13.5px}
@media (max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-about{grid-column:1/-1}}

/* early access dialog */
.ea{border:0;padding:0;border-radius:20px;width:min(520px,calc(100vw - 24px));background:var(--surface);color:var(--body);box-shadow:0 30px 80px -20px rgba(7,40,35,.5)}
.ea::backdrop{background:rgba(6,40,35,.45)}
.ea form{padding:28px}
.ea h2{font-size:24px;margin-bottom:6px}
.ea-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:10px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:24px;line-height:1}
.ea-x:hover{background:var(--bg)}
.fld{display:grid;gap:6px;margin-top:16px}
.fld label{font:600 14px Inter,sans-serif;color:var(--ink)}
.fld input,.fld select{height:48px;border:1px solid var(--line-2);border-radius:10px;padding:0 14px;font:400 16px Inter,sans-serif;color:var(--ink);background:#fff;width:100%}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,123,108,.18)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ea .btn{margin-top:22px}
.ea-msg{margin-top:12px;font-size:14px}
.ea-ok{display:none;text-align:center;padding:12px 0}
.ea.done .ea-ok{display:block}
.ea.done .ea-form{display:none}
@media (max-width:480px){.fld-row{grid-template-columns:1fr}.ea form{padding:22px}}

/* on-load reveal: content is visible without JS; JS opts in via html.js */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-in),transform .5s var(--ease-in)}
html.js .rv.in{opacity:1;transform:none}

/* simple pages (legal, help) share the header/footer and this body style */
.doc{max-width:760px;margin:0 auto;padding:56px var(--gut) 96px}
.doc h1{font-size:clamp(30px,4vw,40px);letter-spacing:-.018em;margin-bottom:12px}
.doc h2{font-size:22px;margin:40px 0 12px}
.doc h3{font-size:18px;margin:28px 0 8px}
.doc p,.doc li{font-size:16px;line-height:1.7}
.doc p + p{margin-top:12px}

/* small-screen tightening */
.two > *,.split > *,.hero-grid > *,.tuner-body > *{min-width:0}
@media (max-width:760px){
  .sec{padding:64px 0}
  .step{padding:22px 20px 0}
  .step-vis{padding-top:20px}
  .crop{height:210px}
  .say{padding-bottom:20px}
  .say div{font-size:14px}
  .way-card{display:none}
  .split-vis .ph{--s:.78}
  .split.rev{margin-top:72px!important}
  .founder blockquote{font-size:16px}
}
@media (max-width:560px){.faq-g > summary span:not(.i){display:none}.crop{height:236px}}

/* ── Motion ──────────────────────────────────────────────────────────────
   Quiet, purposeful, and off for anyone who asks for reduced motion.
   1. Page to page: the browser cross-fades, the header stays put.
   2. Hero: headline, copy and buttons arrive in order, then a call lands.
   3. Below the fold: blocks ease up once as they come into view; cards in
      a row arrive one after another (delays set in site.js).
   4. Things you touch answer: FAQ answers open smoothly, tabs cross-fade,
      cards lift a touch under the cursor. */
@view-transition{navigation:auto}
.hdr{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .18s var(--ease) both}
::view-transition-new(root){animation:vt-in .32s var(--ease-in) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

html.js .hero-in{opacity:0;transform:translateY(16px);animation:heroIn .7s var(--ease-in) forwards}
html.js .hero-in.d1{animation-delay:.08s}
html.js .hero-in.d2{animation-delay:.18s}
html.js .hero-in.d3{animation-delay:.28s}
html.js .hero-in.d4{animation-delay:.38s}
html.js .hero-stage.hero-in{transform:translateY(24px) scale(.985);animation-duration:.9s;animation-delay:.2s}
@keyframes heroIn{to{opacity:1;transform:none}}

html.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-in),transform .7s var(--ease-in)}
html.js .split-vis.rv{transform:translateY(36px) scale(.97)}
html.js .rv.in{opacity:1;transform:none}

.plan,.step,.way,.area,.shot{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
@media (hover:hover){
  .plan:hover,.way:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(7,40,35,.35)}
  .plan.feat:hover{box-shadow:0 22px 40px -22px rgba(10,123,108,.45)}
  .area:hover{border-color:var(--teal-border)}
}

/* FAQ: answers open and close smoothly where the browser can animate height */
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
details[open]::details-content{block-size:auto}

/* tabs and the pricing switch: the new panel fades in */
.panel:not([hidden]),.tuner-body.swap{animation:fadeUp .35s var(--ease-in)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}}
.seg button,.tab{transition:background .2s var(--ease),color .2s var(--ease)}

/* the demo-call button breathes once after the hero settles, to say "this one" */
html.js .hero .demo-call:not(.demo-web){animation:nudge 1.2s var(--ease) 1.6s 1 both}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(10,123,108,0)}40%{box-shadow:0 0 0 8px rgba(10,123,108,.18)}}

@media (prefers-reduced-motion:reduce){
  /* reduced motion keeps gentle fades (no movement), so the page still feels alive
     without anything sliding or scaling */
  ::view-transition-new(root){animation:vt-fade .25s ease both}
  html.js .hero-in{transform:none;animation-name:fadeOnly;animation-duration:.5s}
  html.js .hero-stage.hero-in{transform:none}
  html.js .rv,html.js .split-vis.rv{transform:none;transition:opacity .5s ease}
  html.js .rv.in{transform:none}
  details::details-content{transition:none}
  .panel:not([hidden]),.tuner-body.swap,html.js .hero .demo-call{animation:none}
  .plan:hover,.way:hover{transform:none}
}

/* industries page */
.ind-grid .way{padding:28px}
.ind h2{margin-bottom:10px}
.ind-list{margin-top:14px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.ind-more{margin-top:auto;padding-top:16px;font-weight:600}

/* small screens: trade tabs wrap so none hide off the edge; table row labels stay put while you swipe */
@media (max-width:560px){
  .tuner .tabs{flex-wrap:wrap;overflow:visible}
  .tbl-wrap tbody th[scope=row]{position:sticky;left:0;background:var(--surface);z-index:1}
}

/* guide, business-type and voicemail pages */
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal-dark);text-decoration:underline}
.crumbs span[aria-current]{color:var(--body)}
.answer{max-width:760px;background:var(--teal-light);border:1px solid #BFE3DA;border-radius:var(--r-card);padding:24px 28px}
.answer p{margin-top:10px;font-size:17px;line-height:1.6;color:var(--ink)}
.measure-wrap > *{max-width:720px}
.asks{margin:20px 0 0;padding-left:22px;display:grid;gap:10px;font-size:16.5px;color:var(--ink)}
.asks li::marker{color:var(--teal);font-weight:600}
.checklist{list-style:none;counter-reset:ck;padding:0;margin:24px 0 0;display:grid;gap:22px}
.checklist li{counter-increment:ck;display:grid;grid-template-columns:36px 1fr;column-gap:14px}
.checklist li::before{content:counter(ck);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);font:600 14px/30px Inter,sans-serif;text-align:center}
.checklist h3{font-size:18px}
.checklist p{margin-top:4px;color:var(--body)}
.faq-list{max-width:820px;border-bottom:1px solid var(--line)}
.lead-card .qa-list{font-size:15px}
.lc-who{display:flex;align-items:center;gap:12px}
.lc-who .sh-av{width:42px;height:42px;margin:0;font-size:14px;flex:none}
.lead-card{box-shadow:0 18px 40px -28px rgba(7,40,35,.35)}

@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
@keyframes vt-fade{from{opacity:0}}
/* decline: the answer handset turned down, as on Android's incoming-call screen */
.ring .r-row .no .i{transform:rotate(135deg)}
/* icons in copy lists take the list's teal; some app drawables carry a fixed grey meant for the app's action rows */
.ticks .i [fill]:not([fill="none"]),.way li .i [fill]:not([fill="none"]),.plan li .i [fill]:not([fill="none"]){fill:currentColor}

/* what's different: six short reasons above the comparison table */
.diffs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.diffs li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.diffs li > .i{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--teal-light);color:var(--teal)}
.diffs li > .i [fill]:not([fill="none"]){fill:currentColor}
.diffs h3{font-size:18px;margin-bottom:6px}
.diffs p{font-size:15px;line-height:1.55;color:var(--body)}
@media (max-width:980px){.diffs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.diffs{grid-template-columns:minmax(0,1fr);gap:22px}}

/* Plan the day: the web app's day planner as the hero, the week view tucked
   over its corner, and the phone's My Day in their place on small screens */
.sec.pd{background:var(--teal-light);border-top:1px solid #CFE8E1;border-bottom:1px solid #CFE8E1}
.pd-stage{margin:0}
.pd-frames{position:relative;margin:0;padding-bottom:56px}
.pd-frames .shot{background:var(--surface)}
.pd-main{width:88%}
.pd-week{position:absolute;right:0;bottom:40px;width:44%;z-index:1;box-shadow:0 30px 60px -24px rgba(7,40,35,.38),0 10px 22px -12px rgba(7,40,35,.22)}
.pd-frames figcaption{position:absolute;left:0;bottom:0;width:52%}
.pd-phone{display:none;margin:0}
.pd-phone figcaption{margin-top:14px;text-align:center;max-width:34ch;margin-left:auto;margin-right:auto}
.pd-pts{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.pd-pts li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.pd-pts li > .i{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--surface);color:var(--teal);border:1px solid #CFE8E1}
.pd-pts li > .i [fill]:not([fill="none"]){fill:currentColor}
.pd-pts h3{font-size:18px;margin-bottom:6px}
.pd-pts p{font-size:15px;line-height:1.55;color:var(--body)}
.pd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:36px;padding-top:24px;border-top:1px solid #CFE8E1}
.pd-plan{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid #CFE8E1;border-radius:var(--r-pill);padding:6px 14px 6px 10px}
.pd-plan .i{color:var(--teal);width:18px;height:18px}
.pd-plan .i [fill]:not([fill="none"]){fill:currentColor}
.pd-more{font-weight:600}
.pd-try{margin-left:auto}
@media (max-width:640px){.pd-try{margin-left:0;width:100%}}
@media (max-width:980px){
  .pd-frames{padding-bottom:0}
  .pd-main{width:100%}
  .pd-week{position:relative;right:auto;bottom:auto;width:78%;margin:-32px 0 0 auto}
  .pd-frames figcaption{position:static;width:auto;margin-top:14px}
  .pd-pts{grid-template-columns:minmax(0,1fr);gap:22px;max-width:640px}
}
@media (max-width:640px){
  .pd-frames{display:none}
  .pd-phone{display:block}
  .pd-phone .ph{margin:0 auto;--s:.8}
}
/* the feature page's larger renders: one frame, a caption, nothing overlapping */
.pd-fig{margin:0}
.pd-fig .shot{background:var(--surface)}
.pd-fig figcaption{margin-top:12px}
.pd-fig.narrow{max-width:520px}
.steps.pd-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.steps.pd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.steps.pd-steps{grid-template-columns:minmax(0,1fr)}}
.pd-fig.narrow img{border-radius:16px}
@media (max-width:640px){.pd-plan{border-radius:14px}}
.pd-fig img{width:100%;height:auto}
.pd-swipe{display:none}
@media (max-width:640px){
  .pd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .pd-scroll img{width:720px;max-width:none}
  #schedule .pd-scroll img{width:640px}
  .pd-swipe{display:block;margin-top:8px}
}

/* iPhone list (site.js) */
.ios-inline{margin-top:14px}
.ios-row{display:flex;gap:8px;flex-wrap:wrap}
.ios-row input{flex:1 1 220px;min-width:0;height:44px;border:1px solid var(--line-2);border-radius:10px;padding:0 14px;font:400 16px Inter,sans-serif;color:var(--ink);background:#fff}
.ios-row input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,123,108,.18)}
.ios-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ios-form .ios-msg{margin:10px 0 0;padding:0;font-size:14px;color:var(--muted)}
.ios-form .ios-msg:empty{display:none}
.ios-form .ios-msg.bad{color:var(--coral-text)}
.ios-form .ios-fine{margin:10px 0 0;padding:0;font-size:13px;line-height:1.5;color:var(--muted)}
.ios-form .ios-ok,.ios-inline .ios-ok{margin:0;padding:0;font-weight:600;color:var(--teal-dark)}
.ios-form .opt{font-weight:400;color:var(--muted)}
.ios-dlg .ios-dlg-in{padding:28px;position:relative}
.ios-dlg form{padding:0}
.ios-dlg h2{font-size:24px;margin:0 40px 6px 0}
.ios-dlg .btn-block{margin-top:22px}
.ios-dlg .ios-done{margin-top:16px}
.ios-form .ios-msg.ios-ok{font-size:15px;font-weight:600;color:var(--teal-dark);outline:none}
.close-note a{color:#fff}
.close-note a:hover{color:#fff;text-decoration-thickness:2px}
.hero-note .ios-hero a{font-weight:600}
@media (max-width:480px){.ios-dlg .ios-dlg-in{padding:22px}}

.ios-form [hidden]{display:none !important}