/* Kept — design system. Light, dense, high contrast. */

:root{
  --ink:#0a1020; --ink2:#46526d; --ink3:#5f6d86;
  --line:#e3e8f0; --line2:#eef2f7;
  --bg:#fff; --soft:#f6f8fc; --deep:#0b1424;

  --brand:#087a51; --brand-d:#07714b; --brand-l:#e3f8ee;
  --blue:#2563eb; --blue-l:#e6edfe; --blue-d:#1d4ed8;
  --violet:#7c3aed; --violet-l:#eee8fe;
  --amber:#d97706; --amber-l:#fdf0da;
  --rose:#e11d48; --rose-l:#fde7ec;
  --teal:#0891b2; --teal-l:#dcf4fa;

  --r:14px; --r-s:10px; --r-l:22px;
  --sh:0 1px 2px rgba(10,16,32,.06),0 10px 30px -16px rgba(10,16,32,.28);
  --sh-l:0 2px 6px rgba(10,16,32,.06),0 28px 60px -24px rgba(10,16,32,.3);
  --wrap:1200px;
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--bg);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--brand-d);text-decoration:none}
a:hover{text-decoration:underline}
/* Links inside text are underlined, not told apart by colour alone (WCAG 1.4.1; testers' list).
   Placeholder text dark enough to read (4.5:1). */
main p a:not(.btn):not(.chip),main li a:not(.btn):not(.chip),.agree a,.alt a,.note a,.legal a,.chat-note a{text-decoration:underline;text-underline-offset:2px}
::placeholder{color:#6b7280;opacity:1}
h1,h2,h3,h4{margin:0;letter-spacing:-.022em;line-height:1.1;font-weight:700}
h1{font-size:clamp(2.3rem,4.6vw,3.65rem);letter-spacing:-.032em}
h2{font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.028em}
h3{font-size:1.09rem;letter-spacing:-.012em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:10px;font-weight:650;font-size:.95rem;
  border:1px solid transparent;cursor:pointer;transition:.15s ease;white-space:nowrap;
  text-decoration:none!important;font-family:inherit}
.btn-pri{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(7,113,75,.3),0 8px 20px -10px rgba(7,113,75,.6)}
.btn-pri:hover{background:var(--brand-d);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1b2740}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:#c3ccdb;background:var(--soft)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-line:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:8px 15px;font-size:.88rem;border-radius:8px}
.btn-lg{padding:15px 28px;font-size:1.03rem}
.btn-w{width:100%}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:66px;
  display:flex;align-items:center;gap:30px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.22rem;
  letter-spacing:-.04em;color:var(--ink);text-decoration:none!important}
.logo .mark{width:26px;height:26px;border-radius:8px;background:#0f172a;
  display:grid;place-items:center;flex:none}
.logo .mark svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.logo .mark .dot{fill:#34d399;stroke:none;transform-box:fill-box;transform-origin:center}
.foot .logo .mark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* the name in the top bar: ring, book, save, gotitdesk, once per visit (html.logo-anim) */
.wm{display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;vertical-align:middle}
.wm-reel{display:block;transform:translateY(-3.9em)}
.wm-reel>span{display:block;height:1.3em}
.wm-verb{color:var(--brand)}
html.logo-anim .wm-reel{animation:wm 2.6s .35s both}
@keyframes wm{
  0%,16%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,.9,.3,1.2)}
  30%,44%{transform:translateY(-1.3em);animation-timing-function:cubic-bezier(.3,.9,.3,1.2)}
  58%,72%{transform:translateY(-2.6em);animation-timing-function:cubic-bezier(.3,.9,.3,1.2)}
  86%,100%{transform:translateY(-3.9em)}}
html.logo-anim .logo .mark .dot{animation:dotring .7s ease 2.9s 2}
@keyframes dotring{50%{transform:scale(1.7);opacity:.55}}
.nav-links{display:flex;align-items:center;gap:3px;flex:1}
.nav-links>a,.has-menu>a{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;
  border-radius:8px;font-size:.93rem;font-weight:560;color:var(--ink2);
  text-decoration:none!important;cursor:pointer}
.nav-links>a:hover,.has-menu:hover>a{color:var(--ink);background:var(--soft)}
.has-menu{position:relative}
.has-menu>a::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5}
.menu{position:absolute;top:calc(100% + 10px);left:-14px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.16s ease;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--sh-l);padding:14px;min-width:620px;z-index:70}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.menu-grid a{display:flex;gap:11px;padding:11px;border-radius:12px;align-items:flex-start;
  text-decoration:none!important;color:var(--ink)}
.menu-grid a:hover{background:var(--soft)}
.menu-grid b{display:block;font-size:.92rem;font-weight:650}
.menu-grid small{display:block;color:var(--ink3);font-size:.81rem;line-height:1.45;margin-top:1px}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-links .nav-m{display:none}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;cursor:pointer}
.burger svg{width:18px;height:18px;display:block;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}

/* ---------- icon chips ---------- */
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--brand-l);color:var(--brand-d)}
.ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ic.b{background:var(--blue-l);color:var(--blue)}
.ic.v{background:var(--violet-l);color:var(--violet)}
.ic.a{background:var(--amber-l);color:var(--amber)}
.ic.r{background:var(--rose-l);color:var(--rose)}
.ic.t{background:var(--teal-l);color:var(--teal)}
.ic.sm{width:28px;height:28px;border-radius:8px}
.ic.sm svg{width:15px;height:15px}
.i{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;color:var(--brand-d)}

/* ---------- sections ---------- */
section{padding:84px 0}
.tint{background:var(--soft);border-block:1px solid var(--line)}
.sec-head{max-width:760px;margin:0 auto 44px;text-align:center}
.sec-head p{color:var(--ink2);font-size:1.08rem;margin-top:13px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand-d);
  background:var(--brand-l);padding:5px 11px;border-radius:999px}
.eyebrow.b{color:var(--blue-d);background:var(--blue-l)}
.lead{font-size:1.15rem;color:var(--ink2);line-height:1.62}

/* ---------- hero ---------- */
.hero{padding:62px 0 74px;position:relative;overflow:hidden;
  background:radial-gradient(1100px 520px at 78% -8%,#e6f6ef 0%,rgba(230,246,239,0) 62%),
             radial-gradient(760px 420px at 6% 6%,#eaf0ff 0%,rgba(234,240,255,0) 60%)}
.hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{margin:16px 0 18px}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin:26px 0 14px}
.micro{font-size:.86rem;color:var(--ink3)}
.micro b{color:var(--ink2);font-weight:620}

/* ---------- phone mockup ---------- */
.shot{position:relative;border-radius:26px;padding:26px;
  background:linear-gradient(145deg,#0f2a22 0%,#124a37 48%,#0b8f5f 100%);
  box-shadow:var(--sh-l);display:grid;place-items:center}
.phone{width:286px;background:#0a1020;border-radius:32px;padding:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1)}
.phone-in{background:#fff;border-radius:24px;overflow:hidden}
.phone-bar{background:var(--ink);color:#fff;padding:12px 14px;display:flex;
  align-items:center;gap:9px;font-size:.78rem}
.phone-bar .dot{width:7px;height:7px;border-radius:50%;background:#34d399;flex:none;
  animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.3}}
.chat{padding:13px;display:flex;flex-direction:column;gap:9px;background:#fbfcfe}
.bub{max-width:88%;padding:9px 12px;border-radius:14px;font-size:.81rem;line-height:1.45}
.bub.them{background:#eef1f6;color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
.bub.us{background:var(--brand);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.bub small{display:block;font-size:.68rem;opacity:.72;margin-top:3px}
.bub.card{background:#fff;border:1px solid var(--line);color:var(--ink);align-self:stretch;max-width:100%}
.bub.card b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--brand-d);margin-bottom:4px}

/* the hero call plays out (hero.js): four rings, answered, each line in order with the voice
   "speaking" before every answer, the booking card, then the owner's email. Without JS, or with
   reduced motion, it is all simply there: the hidden states only apply under .anim. */
.chat{position:relative}
.shot-chip{position:absolute;display:flex;align-items:center;gap:13px;z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 18px 13px 13px;
  box-shadow:0 18px 40px -16px rgba(10,16,32,.35),0 2px 6px rgba(10,16,32,.06);
  font-size:.88rem;line-height:1.35;max-width:290px;color:var(--ink)}
.shot-chip .ic{width:40px;height:40px;border-radius:11px;flex:none}
.shot-chip b{display:block;font-weight:680;font-size:1rem}
.shot-chip small{display:block;color:var(--ink3);font-size:.78rem}
/* Four, in the order they appear (hero.js): answered, booked and emailed, the owner's time, the job. */
.shot-chip.answered{right:-20px;top:-22px}
.shot-chip.mail{left:-24px;top:34%}
.shot-chip.time{right:-24px;top:54%}
.shot-chip.money{left:-20px;bottom:-26px;border:2px solid var(--brand)}
#hero-call .call-st{color:#94a3b8}#hero-call .call-st::before{content:'\00b7';margin-right:6px}
#hero-call .call-t{margin-left:auto;font-variant-numeric:tabular-nums}
.shot-chip.answered .ic{background:#fff6dc;color:#b7791f}
.bub.card{padding:12px 13px}
.bub.card .bk-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.bub.card .bk-label{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.bub.card .bk-ok{display:inline-flex;align-items:center;gap:4px;background:var(--brand);color:#fff;
  font-size:.68rem;font-weight:700;border-radius:99px;padding:3px 9px 3px 7px}
.bub.card .bk-ok .i{width:12px;height:12px;stroke:#fff;stroke-width:3}
.bub.card .bk-when{font-size:1.02rem;font-weight:750;letter-spacing:-.01em;margin-bottom:8px}
.bub.card .bk-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  border-top:1px dashed var(--line);padding-top:8px}
.bub.card .bk-row small{display:block;color:var(--ink3);font-size:.7rem;margin-top:1px}
.bub.card .bk-row b{font-size:1rem;display:inline;color:var(--ink);letter-spacing:-.01em;
  text-transform:none;margin:0}
.speaking{position:absolute;right:13px;display:none;align-items:center;gap:3px;height:34px;
  padding:0 14px;background:var(--brand);border-radius:14px;border-bottom-right-radius:4px}
.speaking i{width:3px;height:8px;border-radius:2px;background:#fff;animation:voice .9s ease-in-out infinite}
.speaking i:nth-child(2){animation-delay:.12s}.speaking i:nth-child(3){animation-delay:.24s}
.speaking i:nth-child(4){animation-delay:.36s}.speaking i:nth-child(5){animation-delay:.48s}
@keyframes voice{0%,100%{height:6px;opacity:.7}50%{height:18px;opacity:1}}
.waves{position:absolute;inset:0;display:none;place-items:center;pointer-events:none}
.waves i{grid-area:1/1;width:320px;height:320px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  animation:wave 1.6s ease-out infinite;opacity:0}
.waves i:nth-child(2){animation-delay:.53s}.waves i:nth-child(3){animation-delay:1.06s}
@keyframes wave{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.shot.ringing .waves{display:grid}
.shot.ringing .phone{animation:buzz .52s ease-in-out infinite}
@keyframes buzz{0%,100%{transform:rotate(0)}20%{transform:rotate(-1.2deg)}40%{transform:rotate(1.2deg)}60%{transform:rotate(-.6deg)}}
.shot.done .phone{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.replay{display:none}
.shot.anim .replay{display:inline-flex;align-items:center;gap:6px;position:absolute;right:16px;bottom:14px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:99px;
  padding:6px 12px;font:inherit;font-size:.78rem;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .4s ease;backdrop-filter:blur(6px)}
.shot.anim .replay .i{width:14px;height:14px;stroke:#fff}
.shot.done .replay,.shot.playing .replay{opacity:1;pointer-events:auto}
.shot.off .phone{animation-play-state:paused}
.shot.anim .bub,.shot.anim .shot-chip{opacity:0;transform:translateY(10px) scale(.97)}
.shot.anim .bub.on,.shot.anim .shot-chip.on{opacity:1;transform:none;
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.3,1.25)}
.shot.anim .bub.card.on{animation:pop .55s cubic-bezier(.2,.9,.3,1.35)}
.shot.anim .bub.card.on .bk-ok{animation:pop .5s cubic-bezier(.2,.9,.3,1.6) .35s both}
@keyframes pop{0%{transform:scale(.92)}100%{transform:scale(1)}}
.shot.anim .speaking.on{display:flex}
@media (max-width:1000px){.shot-chip.mail,.shot-chip.money{left:10px}.shot-chip.answered,.shot-chip.time{right:10px}
  .shot.anim .replay{padding:8px;right:12px;bottom:12px}.shot.anim .replay span{display:none}}
@media (prefers-reduced-motion:reduce){.speaking,.waves{display:none!important}.phone-bar .dot{animation:none}}
/* A phone: the four stickers line up under the call, in order, none cut off. */
@media (max-width:760px){.shot{gap:10px;padding:20px 14px 58px}
  .shot-chip{position:static;width:100%;max-width:340px;box-shadow:0 8px 20px -12px rgba(10,16,32,.35)}
  .shot-chip.money{border-width:2px}}

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--line);background:#fff;padding:0}
.trust-in{max-width:var(--wrap);margin:0 auto;padding:20px 24px;display:flex;
  flex-wrap:wrap;gap:12px 34px;align-items:center;justify-content:center}
.trust-in span{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;
  color:var(--ink2);font-weight:560}
.trust-in .i{width:16px;height:16px}

/* ---------- card grids ---------- */
.g{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  transition:.16s ease}
.card:hover{border-color:#ccd5e3;box-shadow:var(--sh);transform:translateY(-2px)}
.card h3{margin:14px 0 7px}
.card p{color:var(--ink2);font-size:.93rem}
.card .tag{display:inline-block;margin-top:13px;font-size:.78rem;font-weight:650;
  color:var(--brand-d);background:var(--brand-l);padding:3px 9px;border-radius:6px}
a.card{color:inherit;text-decoration:none!important;display:block}

/* ---------- numbered steps ---------- */
.steps{display:grid;gap:14px;counter-reset:s;max-width:880px;margin:0 auto}
.step{display:flex;gap:17px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;align-items:flex-start}
.step::before{counter-increment:s;content:counter(s);width:30px;height:30px;flex:none;
  border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:.9rem}
.step h3{margin-bottom:5px}
.step p{color:var(--ink2);font-size:.94rem}

/* ---------- checklists ---------- */
.list{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.list li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink2)}
.list li b{color:var(--ink);font-weight:620}
.list .i{margin-top:3px}
.list .i.no{color:var(--rose)}

/* ---------- stats band ---------- */
.band{background:var(--deep);color:#fff;border-radius:var(--r-l);padding:44px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.band .n{font-size:2.5rem;font-weight:750;letter-spacing:-.04em;line-height:1}
.band .n em{font-style:normal;color:#34d399}
.band p{color:#9fb0c9;font-size:.89rem;margin-top:9px}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.cmp{width:100%;border-collapse:collapse;font-size:.92rem;min-width:720px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line2)}
.cmp thead th{background:var(--soft);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink3);font-weight:700;position:sticky;top:0}
.cmp tbody th{font-weight:560;color:var(--ink2)}
.cmp td{text-align:center;width:17%}
.cmp .grp td,.cmp .grp th{background:#fbfcfe;font-weight:700;color:var(--ink);
  font-size:.79rem;text-transform:uppercase;letter-spacing:.07em}
.cmp .yes{color:var(--brand);font-weight:700}
.cmp .no{color:#c3ccdb}
.cmp .soon{display:inline-block;padding:2px 8px;border-radius:99px;background:#fef3c7;color:#92400e;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.cmp .col-hi{background:#f7fcfa}

/* ---------- pricing plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column}
.plan.hi{border:2px solid var(--brand);box-shadow:var(--sh-l)}
.plan-top{padding:9px 18px;font-size:.78rem;font-weight:700;text-align:center;
  background:var(--soft);color:var(--ink2);border-bottom:1px solid var(--line)}
.plan.hi .plan-top{background:var(--brand);color:#fff;border-color:var(--brand)}
.plan-body{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}
.plan h3{font-size:1.4rem}
.plan .desc{color:var(--ink2);font-size:.92rem;min-height:54px}
.price{display:flex;align-items:baseline;gap:7px}
.price .amt{font-size:3rem;font-weight:750;letter-spacing:-.045em;line-height:1}
.price .per{color:var(--ink3);font-size:.88rem;line-height:1.25}
.plan .feats{border-top:1px solid var(--line2);padding-top:16px;margin-top:2px}

/* ---------- addon cards ---------- */
.addon{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:12px}
.addon .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.addon .amt{font-size:1.5rem;font-weight:730;letter-spacing:-.03em}
.pill{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--blue-l);color:var(--blue-d);text-transform:uppercase;letter-spacing:.05em}
.pill.g{background:var(--brand-l);color:var(--brand-d)}
.pill.a{background:var(--amber-l);color:var(--amber)}

/* ---------- faq ---------- */
.faq{max-width:800px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 22px;font-weight:620;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
  transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--brand-d)}
.faq .ans{padding:0 22px 19px;color:var(--ink2);font-size:.95rem}

/* ---------- honesty / callout ---------- */
.callout{border:1px solid var(--line);border-left:4px solid var(--amber);
  background:#fffdf7;border-radius:var(--r);padding:24px 26px;max-width:880px;margin:0 auto}
.callout h3{margin-bottom:12px}
.callout .list li{font-size:.93rem}

/* ---------- forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;
  box-shadow:var(--sh);display:grid;gap:15px}
.field label{display:block;font-size:.85rem;font-weight:650;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border-radius:10px;
  border:1px solid var(--line);font:inherit;font-size:.95rem;background:#fff;color:var(--ink);
  transition:.14s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-l)}
.field textarea{resize:vertical;min-height:92px}
.field .err{display:none;color:var(--rose);font-size:.82rem;margin-top:5px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--rose)}
.field.bad .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.hp{position:absolute;left:-9999px}
.note{font-size:.84rem;color:var(--ink3)}
.ok-msg{display:none;background:var(--brand-l);border:1px solid #b6e8d2;color:var(--brand-d);
  padding:16px 18px;border-radius:12px;font-size:.94rem}

/* ---------- footer ---------- */
.foot{background:var(--deep);color:#9fb0c9;padding:56px 0 30px;font-size:.9rem}
.foot a{color:#cfd9e8;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}
.foot h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:14px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot .logo{color:#fff}
.foot-bot{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-split{grid-template-columns:1fr;gap:38px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:repeat(2,1fr);padding:32px}
  .plans{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
.cta-band{grid-template-columns:1.3fr .7fr;align-items:center}
.cta-go{text-align:right}
@media (max-width:760px){
  section{padding:58px 0}
  .cta-band{grid-template-columns:1fr}
  .cta-go{text-align:left}
  .nav-links{display:none}
  .burger{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:66px;left:0;right:0;
    flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);
    padding:10px;gap:2px;box-shadow:var(--sh)}
  .nav.open .menu{display:none}
  /* On a phone the menu headings are plain links: no arrow promising a submenu (testers' list). */
  .has-menu>a::after{display:none}
  .nav-cta .btn-ghost{display:none}
  .nav.open .nav-links .nav-m{display:block}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .band{grid-template-columns:1fr;gap:22px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .trust-in{gap:10px 20px}
}

/* ---------- live demo ---------- */
.demo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:start}
.call{background:var(--deep);border-radius:var(--r-l);padding:22px;color:#fff;
  box-shadow:var(--sh-l)}
.call-top{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.call-who{display:flex;align-items:center;gap:11px}
.call-who b{display:block;font-size:.98rem}
.call-who small{display:block;color:#8fa0ba;font-size:.8rem}
.call .dot{width:9px;height:9px;border-radius:50%;background:#64748b;flex:none}
.call.live .dot{background:#34d399;animation:pulse 1.6s infinite}
.call-time{font-variant-numeric:tabular-nums;font-size:.9rem;color:#8fa0ba}
.wave{display:flex;align-items:center;justify-content:center;gap:3px;height:52px;margin:14px 0 4px}
.wave span{width:3px;height:5px;border-radius:2px;background:rgba(255,255,255,.18)}
.call.speaking .wave span{background:#34d399;animation:bar .9s ease-in-out infinite}
.call.speaking.caller .wave span{background:#60a5fa}
.wave span:nth-child(3n){animation-delay:.12s}
.wave span:nth-child(3n+1){animation-delay:.26s}
.wave span:nth-child(4n){animation-delay:.4s}
@keyframes bar{0%,100%{height:5px}50%{height:34px}}
.tscript{height:330px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;
  padding:4px 2px;scroll-behavior:smooth}
.tscript-empty{color:#5f6d86;font-size:.88rem;margin:auto;text-align:center;max-width:30ch;
  line-height:1.5}
.tline{max-width:86%;padding:9px 13px;border-radius:14px;font-size:.88rem;line-height:1.48;
  opacity:.45;transition:opacity .2s}
.tline.on{opacity:1}
.tline.ai{background:var(--brand);color:#fff;align-self:flex-start;border-bottom-left-radius:4px}
.tline.caller{background:rgba(255,255,255,.1);color:#e6ecf5;align-self:flex-end;
  border-bottom-right-radius:4px}
.tline em{display:block;font-style:normal;font-size:.7rem;opacity:.7;margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.06em}
.call-foot{display:flex;gap:10px;margin-top:16px}
.call-foot .btn-ghost{background:transparent;color:#cfd9e8;border-color:rgba(255,255,255,.25)}
.call-foot .btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.1)}
.call-foot .btn:disabled{opacity:.4;cursor:default}

.feed{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:22px;
  min-height:480px}
.feed-h{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);
  font-weight:700;margin-bottom:16px}
.ev{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line2);
  animation:rise .32s ease both}
.ev:last-child{border-bottom:0}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.ev b{display:block;font-size:.93rem;font-weight:650}
.ev p{color:var(--ink2);font-size:.86rem;line-height:1.5;margin-top:2px}

.build-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}
.out{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:24px}
.out-lines{display:grid;gap:10px}
.out-lines div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:.9rem;line-height:1.5;color:var(--ink)}
.out-lines span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--brand-d);font-weight:700;margin-bottom:4px}
.bcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:12px;padding:16px 18px;font-size:.9rem;display:grid;gap:7px}
.bcard .k{display:flex;justify-content:space-between;gap:16px;color:var(--ink2)}
.bcard .k b{color:var(--ink);font-weight:620;text-align:right}

@media (max-width:1000px){
  .demo-grid,.build-grid{grid-template-columns:1fr}
  .feed{min-height:0}
  .tscript{height:280px}
}

/* Grid children default to min-content width, which lets a nowrap button push the whole
   column past the viewport on a phone. Pin them to the track instead. */
.demo-grid>*,.build-grid>*,.g>*,.plans>*,.hero-split>*{min-width:0}
@media (max-width:760px){
  .call{padding:16px}
  .call-foot{flex-wrap:wrap}
  .call-foot .btn{flex:1 1 140px}
}

/* ---------- setup wizard ---------- */
.wiz{max-width:900px;margin:0 auto}
.wiz-rail{display:flex;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.wiz-rail button{flex:1 1 110px;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  text-align:left;opacity:.5}
.wiz-rail button.on,.wiz-rail button.done{opacity:1}
.wiz-rail .bar{height:4px;border-radius:2px;background:var(--line);margin-bottom:7px}
.wiz-rail button.on .bar{background:var(--brand)}
.wiz-rail button.done .bar{background:#9ad9bf}
.wiz-rail small{font-size:.76rem;font-weight:650;color:var(--ink2)}
.panel{display:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;
  box-shadow:var(--sh)}
.panel.on{display:block}
.panel h2{font-size:1.5rem;margin-bottom:6px}
.panel>p.sub{color:var(--ink2);margin-bottom:22px;font-size:.96rem}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--line2)}
.choices{display:grid;gap:10px}
.choice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;cursor:pointer;transition:.14s;background:#fff}
.choice:hover{border-color:#c3ccdb;background:var(--soft)}
.choice.sel{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 1px var(--brand)}
.choice input{margin-top:3px;accent-color:var(--brand);flex:none}
.choice b{display:block;font-size:.95rem}
.choice small{display:block;color:var(--ink2);font-size:.85rem;line-height:1.45;margin-top:2px}
.choice .play{margin-left:auto;flex:none;border:1px solid var(--line);background:#fff;
  border-radius:8px;padding:7px 12px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:620}
.choice .play:hover{border-color:var(--brand);color:var(--brand-d)}
.choice .play.playing{background:var(--brand);color:#fff;border-color:var(--brand)}
.stage{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;
  padding:12px 15px;background:#fff}
.stage b{font-size:.92rem}
.stage small{display:block;color:var(--ink3);font-size:.82rem}
.stage .lock{margin-left:auto;font-size:.74rem;font-weight:700;color:var(--ink3);
  background:var(--soft);padding:3px 9px;border-radius:6px;white-space:nowrap}
.stage button.drop{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:6px 11px;cursor:pointer;font:inherit;font-size:.82rem;color:var(--rose)}
.stage button.drop:hover{border-color:var(--rose);background:var(--rose-l)}
.stage.off{opacity:.45}
.verdict{border-radius:12px;padding:15px 17px;font-size:.92rem;line-height:1.55;margin-top:14px;
  border:1px solid}
.verdict.ok{background:var(--brand-l);border-color:#b6e8d2;color:#09533a}
.verdict.must{background:var(--amber-l);border-color:#f1d3a0;color:#7a4a05}
.verdict b{display:block;margin-bottom:3px}
.verdict cite{display:block;font-style:normal;font-size:.8rem;opacity:.8;margin-top:6px}
.summary{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.summary div{display:flex;justify-content:space-between;gap:18px;padding:11px 15px;
  border-bottom:1px solid var(--line2);font-size:.9rem}
.summary div:last-child{border-bottom:0}
.summary span{color:var(--ink2);flex:none}
.summary b{font-weight:620;text-align:right}
.switch{display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid var(--line);
  border-radius:12px;background:var(--soft)}
.switch input{margin-top:3px;accent-color:var(--brand);width:17px;height:17px;flex:none}
.switch b{display:block;font-size:.94rem}
.switch small{display:block;color:var(--ink2);font-size:.86rem;line-height:1.5;margin-top:2px}
.switch.locked{opacity:.75}
@media (max-width:760px){.panel{padding:20px}.wiz-nav{flex-direction:column-reverse}
  .wiz-nav .btn{width:100%}}

/* ---------- legal pages ---------- */
.legal{max-width:760px}
.legal h2{font-size:1.2rem;margin:34px 0 10px;letter-spacing:-.01em}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink2);margin-bottom:12px;font-size:.98rem;line-height:1.7}
.legal b{color:var(--ink)}

/* =====================================================================================
   App shell v2 — accounts, setup and the dashboard
   ===================================================================================== */
.app-bg{background:var(--soft);min-height:calc(100vh - 66px)}

/* toggle switch */
.tg{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.tg input{opacity:0;width:0;height:0;position:absolute}
.tg span{position:absolute;inset:0;background:#cfd6e2;border-radius:999px;transition:.18s;cursor:pointer}
.tg span::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tg input:checked+span{background:var(--brand)}
.tg input:checked+span::before{transform:translateX(18px)}
.tg input:disabled+span{opacity:.55;cursor:not-allowed}
.tg input:focus-visible+span{box-shadow:0 0 0 3px var(--brand-l)}

/* segmented control */
.seg{display:inline-flex;background:#eef1f6;border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:none;font:inherit;font-size:.88rem;font-weight:620;color:var(--ink2);
  padding:9px 14px;border-radius:9px;cursor:pointer;transition:.14s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(10,16,32,.12)}

/* setting rows */
.rows{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.rowx{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line2)}
.rowx:last-child{border-bottom:0}
.rowx .txt{flex:1;min-width:0}
.rowx .txt b{display:block;font-size:.95rem;font-weight:640}
.rowx .txt small{display:block;color:var(--ink2);font-size:.84rem;line-height:1.45;margin-top:2px}
.rowx .ic{width:34px;height:34px}

/* auth */
.auth-wrap{max-width:440px;margin:0 auto;padding:56px 20px}
.auth{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--sh-l)}
.auth h1{font-size:1.7rem;margin-bottom:6px}
.auth .sub{display:block;color:var(--ink2);margin-bottom:24px;font-size:.95rem}
.auth .alt{text-align:center;margin-top:18px;font-size:.9rem;color:var(--ink2)}
.err-box{display:none;background:var(--rose-l);border:1px solid #f6c2cf;color:#9f1239;
  padding:11px 14px;border-radius:10px;font-size:.9rem;margin-bottom:14px}
.perks{display:grid;gap:9px;margin:20px 0 0;padding:0;list-style:none}
.perks li{display:flex;gap:9px;font-size:.88rem;color:var(--ink2)}

/* setup v2 layout */
.setup{display:grid;grid-template-columns:250px 1fr;gap:28px;max-width:1180px;margin:0 auto;
  padding:34px 24px 80px;align-items:start}
.rail2{position:sticky;top:90px;display:grid;gap:4px}
.rail2 button{display:flex;gap:12px;align-items:center;border:0;background:none;font:inherit;
  text-align:left;padding:10px 12px;border-radius:12px;cursor:pointer;color:var(--ink2)}
.rail2 button:hover{background:#fff}
.rail2 button .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:.82rem;font-weight:700;background:#e6eaf1;color:var(--ink2)}
.rail2 button b{display:block;font-size:.92rem;font-weight:640}
.rail2 button small{display:block;font-size:.78rem;color:var(--ink3)}
.rail2 button.on{background:#fff;box-shadow:var(--sh);color:var(--ink)}
.rail2 button.on .n{background:var(--brand);color:#fff}
.rail2 button.done .n{background:var(--brand-l);color:var(--brand-d)}
.rail2 .saved{font-size:.78rem;color:var(--ink3);padding:12px;display:flex;gap:7px;align-items:center}
.rail2 .saved i{width:7px;height:7px;border-radius:50%;background:#34d399;display:inline-block}
.pane{display:none}
.pane.on{display:block;animation:rise .25s ease both}
.pane-h{margin-bottom:22px}
.pane-h h2{font-size:1.75rem;letter-spacing:-.03em}
.pane-h p{color:var(--ink2);margin-top:6px;font-size:1rem}
.box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:16px}
.box>h3{font-size:1.02rem;margin-bottom:4px}
.box>p.hint{color:var(--ink2);font-size:.88rem;margin-bottom:16px}
.pane-nav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}

/* business type picker */
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.type{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:600;text-align:left;display:flex;gap:9px;align-items:center;
  color:var(--ink);transition:.12s}
.type:hover{border-color:#c3ccdb;background:var(--soft)}
.type.on{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 1px var(--brand)}
.type .e{font-size:1.1rem;line-height:1}
.search{position:relative}
.search input{padding-left:38px!important}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  fill:none;stroke:var(--ink3);stroke-width:2}

/* services table */
.svc{display:grid;grid-template-columns:1fr 110px 110px 36px;gap:8px;align-items:center;margin-bottom:8px}
.svc input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);font:inherit;font-size:.92rem}
.svc input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.svc-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);font-weight:700}
.icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:grid;place-items:center;color:var(--ink3);font-size:1rem;flex:none}
.icon-btn:hover{border-color:var(--rose);color:var(--rose);background:var(--rose-l)}
.icon-btn.plain:hover{border-color:#c3ccdb;color:var(--ink);background:var(--soft)}
.icon-btn:disabled{opacity:.35;cursor:default;background:#fff;color:var(--ink3);border-color:var(--line)}
.add{border:1.5px dashed #c9d2df;background:none;border-radius:12px;padding:11px 14px;width:100%;
  font:inherit;font-weight:620;font-size:.9rem;color:var(--brand-d);cursor:pointer;margin-top:4px}
.add:hover{border-color:var(--brand);background:var(--brand-l)}

/* weekly hours */
.week{display:grid;gap:6px}
.day{display:grid;grid-template-columns:62px 46px 1fr;gap:12px;align-items:start;padding:10px 0;
  border-bottom:1px solid var(--line2)}
.day:last-child{border-bottom:0}
.day .dn{font-weight:700;font-size:.92rem;padding-top:8px}
.day .tg{margin-top:7px}
.spans{display:grid;gap:7px}
.span{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.span input[type=time]{padding:8px 10px;border-radius:9px;border:1px solid var(--line);font:inherit;
  font-size:.9rem;background:#fff}
.span .lbl{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--amber);background:var(--amber-l);padding:3px 8px;border-radius:6px}
.span .to{color:var(--ink3);font-size:.85rem}
.closed-txt{color:var(--ink3);font-size:.9rem;padding-top:8px}
.linkbtn{border:0;background:none;color:var(--brand-d);font:inherit;font-size:.84rem;font-weight:650;
  cursor:pointer;padding:4px 0}
.linkbtn:hover{text-decoration:underline}
.linkbtn.danger{color:var(--ink3)}
.linkbtn.danger:hover{color:var(--rose)}
.btn-del{background:var(--rose);color:#fff;border-color:var(--rose)}
.btn-del:disabled{opacity:.45;cursor:not-allowed}
.del-box h3{color:var(--rose)}

/* dial codes */
.codes{display:grid;gap:8px;margin-top:6px}
.code{display:flex;align-items:center;gap:12px;background:var(--deep);color:#fff;border-radius:12px;
  padding:13px 16px}
.code .what{flex:1;font-size:.86rem;color:#b9c6da}
.code kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.02rem;font-weight:600;
  letter-spacing:.02em;color:#fff}
.code button{border:1px solid rgba(255,255,255,.25);background:none;color:#cfd9e8;border-radius:8px;
  padding:5px 10px;font:inherit;font-size:.78rem;cursor:pointer}
.code button:hover{background:rgba(255,255,255,.1)}
.code.off{background:#f1f4f9;color:var(--ink)}
.code.off .what{color:var(--ink2)}
.code.off kbd{color:var(--ink)}
.code.off button{border-color:var(--line);color:var(--ink2)}
.code.na{background:var(--amber-l);color:#7a4a05}
.code.na .what{color:#7a4a05}

/* flow editor */
.starts{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;
  font-size:.86rem;font-weight:620;cursor:pointer;color:var(--ink2)}
.chip:hover{border-color:#c3ccdb;color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.flow{display:grid;gap:10px;margin-top:4px}
.fstep{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 16px 16px 12px;
  display:grid;grid-template-columns:28px 1fr;gap:10px;transition:box-shadow .15s,border-color .15s}
.fstep:focus-within{border-color:#b9c4d6;box-shadow:var(--sh)}
.fstep.dragging{opacity:.4}
.fstep.over{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-l)}
.grip{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:2px}
.grip .handle{cursor:grab;color:var(--ink3);font-size:1rem;line-height:1;padding:2px;user-select:none}
.grip .handle:active{cursor:grabbing}
.grip .mv{border:0;background:none;cursor:pointer;color:var(--ink3);font-size:.75rem;padding:3px;border-radius:5px}
.grip .mv:hover:not(:disabled){background:var(--soft);color:var(--ink)}
.grip .mv:disabled{opacity:.25;cursor:default}
.fhead{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.fhead .kind{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:3px 8px;border-radius:6px;background:var(--blue-l);color:var(--blue-d)}
.fhead .kind.k-transfer{background:var(--rose-l);color:var(--rose)}
.fhead .kind.k-book,.fhead .kind.k-confirm{background:var(--brand-l);color:var(--brand-d)}
.fhead .kind.k-quote,.fhead .kind.k-deposit{background:var(--amber-l);color:var(--amber)}
.fhead .kind.k-greet{background:var(--violet-l);color:var(--violet)}
.fhead input.title{flex:1;min-width:140px;border:0;font:inherit;font-weight:700;font-size:1rem;
  padding:4px 6px;border-radius:6px;color:var(--ink)}
.fhead input.title:hover{background:var(--soft)}
.fhead input.title:focus{outline:none;background:var(--soft)}
.fhead .locked{font-size:.74rem;color:var(--ink3);font-weight:650}
.fstep textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;
  font-size:.93rem;line-height:1.5;resize:vertical;min-height:62px;background:#fcfdfe}
.fstep textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l);background:#fff}
.fstep .extra{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.fstep .extra input,.fstep .extra select{padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  font:inherit;font-size:.88rem}
.ftools{display:flex;gap:8px;align-items:center;margin-top:8px}
.sparkle{display:inline-flex;align-items:center;gap:6px;border:1px solid #ddd3fb;background:var(--violet-l);
  color:var(--violet);font:inherit;font-size:.82rem;font-weight:650;border-radius:8px;padding:6px 11px;cursor:pointer}
.sparkle:hover{background:#e4d9fd}
.sparkle[disabled]{opacity:.6;cursor:progress}
.ftools .sp{flex:1}
.sugs{display:grid;gap:7px;margin-top:9px}
.sug{border:1px solid #e3dbfb;background:#faf8ff;border-radius:10px;padding:10px 12px;font-size:.9rem;
  line-height:1.5;cursor:pointer;text-align:left;font:inherit;color:var(--ink);display:flex;gap:10px}
.sug:hover{border-color:var(--violet);background:#f3effe}
.sug em{font-style:normal;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--violet);flex:none;padding-top:3px;width:58px}
.addmenu{display:none;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:10px}
.addmenu.on{display:grid}
.addmenu button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;
  font:inherit;text-align:left;cursor:pointer}
.addmenu button:hover{border-color:var(--brand);background:var(--brand-l)}
.addmenu b{display:block;font-size:.88rem}
.addmenu small{display:block;font-size:.78rem;color:var(--ink2);margin-top:2px}
.fixed-line{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;
  background:#f6f8fc;border:1px solid var(--line2);font-size:.88rem;color:var(--ink2);margin-bottom:8px}
.fixed-line b{color:var(--ink)}

/* voices v2 */
.vfilter{margin-bottom:14px}
.voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.vcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;
  cursor:pointer;transition:.15s;display:grid;gap:14px}
.vcard:hover{border-color:#c3ccdb;box-shadow:var(--sh)}
.vcard.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand),var(--sh)}
.vcard .top{display:flex;gap:12px;align-items:center}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:750;
  font-size:1.1rem;flex:none}
.vcard .who b{display:block;font-size:1.02rem}
.vcard .who small{color:var(--ink2);font-size:.82rem}
.vcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.vcard .tags span{font-size:.72rem;font-weight:650;padding:3px 8px;border-radius:6px;background:var(--soft);color:var(--ink2)}
.vcard .tags span.rec{background:var(--brand-l);color:var(--brand-d)}
.vplay{display:flex;align-items:center;gap:12px;background:var(--soft);border-radius:12px;padding:8px 12px 8px 8px}
.vplay button{width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;
  display:grid;place-items:center;flex:none}
.vplay button svg{width:14px;height:14px;fill:currentColor}
.vplay .bars{display:flex;gap:2px;align-items:center;height:24px;flex:1}
.vplay .bars i{display:block;width:3px;border-radius:2px;background:#c9d1de;height:6px}
.vcard.playing .vplay .bars i{background:var(--brand);animation:bar .9s ease-in-out infinite}
.vcard.playing .vplay button{background:var(--brand)}
.vcard .check{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;
  background:var(--brand);color:#fff;display:none;place-items:center;font-size:.75rem}
.vcard.on .check{display:grid}
.vquote{font-size:.84rem;color:var(--ink2);font-style:italic;line-height:1.45}

/* launch */
.ready{display:grid;gap:10px}
.ready .rowx b{font-size:.92rem}
.big-cta{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--deep);color:#fff;border-radius:18px;padding:22px 24px}
.big-cta p{color:#a9b8cf;font-size:.9rem;margin-top:4px}

/* dashboard */
/* One column that fits the screen: a wide calendar scrolls inside its own box (.calwrap) instead
   of stretching the whole dashboard past the edge of a phone. */
.dash{max-width:980px;margin:0 auto;padding:30px 20px 80px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.dash>*{min-width:0}
.dash-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.dash-h h1{font-size:1.8rem}
.pill2{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;padding:5px 11px;
  border-radius:999px;background:var(--soft);color:var(--ink2);border:1px solid var(--line)}
.pill2 i{width:8px;height:8px;border-radius:50%;background:#94a3b8;display:inline-block}
.pill2.live{background:var(--brand-l);color:var(--brand-d);border-color:#b6e8d2}
.pill2.live i{background:#10b981;animation:pulse 1.6s infinite}
.pill2.wait{background:var(--amber-l);color:var(--amber);border-color:#f1d3a0}
.pill2.wait i{background:var(--amber)}
.now{background:var(--deep);color:#fff;border-radius:20px;padding:24px}
.now .state{font-size:1.35rem;font-weight:720;letter-spacing:-.02em;margin:6px 0 4px}
.now p{color:#a9b8cf;font-size:.92rem}
/* Three real buttons side by side, each outlined, so every choice looks pressable. */
.now .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:none;padding:0;margin-top:16px}
.now .seg button{color:#e2e8f0;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
  padding:11px 8px;text-align:center;line-height:1.25}
.now .seg button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.now .seg button.on{background:#fff;color:var(--ink);border-color:#fff}
.now .for{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.now .for button{border:1px solid rgba(255,255,255,.22);background:none;color:#cfd9e8;border-radius:999px;
  padding:6px 12px;font:inherit;font-size:.82rem;cursor:pointer}
.now .for button:hover{background:rgba(255,255,255,.1)}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.empty{text-align:center;padding:30px 20px;color:var(--ink2)}
.empty b{display:block;color:var(--ink);margin-bottom:4px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:.9rem;transition:.25s;
  z-index:90;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}

@media (max-width:900px){
  .setup{grid-template-columns:1fr;padding-top:18px}
  .rail2{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}
  .rail2 button{flex:none;padding:8px 10px}
  .rail2 button small,.rail2 .saved{display:none}
  .dgrid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .svc{grid-template-columns:1fr 84px 36px}
  .svc .dur,.svc-h.dur{display:none}
  .day{grid-template-columns:44px 46px 1fr}
  .box{padding:18px}
  .auth{padding:24px}
}

/* ---------- hours v2: set once, breaks once, see the week ---------- */
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.hgrid{display:grid;grid-template-columns:120px 1fr;gap:14px 18px;align-items:center}
.hgrid>.lab{font-size:.84rem;font-weight:700;color:var(--ink2)}
.dchips{display:flex;gap:6px;flex-wrap:wrap}
.dchip{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font:inherit;
  font-size:.82rem;font-weight:700;color:var(--ink3);cursor:pointer;transition:.12s}
.dchip:hover{border-color:#b9c4d6;color:var(--ink)}
.dchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.dchip.sm{width:30px;height:30px;font-size:.72rem}
.dchip.sm.on{background:var(--amber);border-color:var(--amber)}
.trange{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trange input[type=time]{padding:9px 11px;border-radius:10px;border:1px solid var(--line);font:inherit;
  font-size:.92rem;background:#fff}
.trange input[type=time]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.trange input.bad{border-color:var(--rose);background:var(--rose-l)}
.trange .to{color:var(--ink3);font-size:.86rem}
.perday{display:grid;gap:8px;margin-top:4px}
.perday .pd{display:flex;gap:12px;align-items:center}
.perday .pd b{width:44px;font-size:.88rem}
.brks{display:grid;gap:10px}
.brk{display:grid;grid-template-columns:150px auto 1fr 36px;gap:12px;align-items:center;padding:12px 14px;
  border:1px solid #f3dfb8;background:#fffbf3;border-radius:14px}
.brk input.blabel{border:1px solid transparent;background:transparent;font:inherit;font-weight:700;
  font-size:.92rem;padding:6px 8px;border-radius:8px;width:100%;color:#7a4a05}
.brk input.blabel:hover,.brk input.blabel:focus{border-color:#f1d3a0;background:#fff;outline:none}
.qadd{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qadd span{font-size:.84rem;color:var(--ink3)}
.warn{font-size:.82rem;color:#9f1239;margin-top:6px}

.tl{display:grid;gap:7px;margin-top:6px}
.tlr{display:grid;grid-template-columns:40px 1fr 118px;gap:12px;align-items:center}
.tlr b{font-size:.84rem}
.tlr.today b{color:var(--brand-d)}
.tlr small{font-size:.78rem;color:var(--ink3);text-align:right;white-space:nowrap}
.bar{position:relative;height:24px;border-radius:7px;background:#eef1f6;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0}
.bar i.o{background:linear-gradient(180deg,#34d399,#10b981)}
.bar i.b{background:repeating-linear-gradient(45deg,#fbbf24 0 6px,#f59e0b 6px 12px)}
.bar .nowmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);border-radius:2px}
.ticks{display:grid;grid-template-columns:40px 1fr 118px;gap:12px}
.ticks div{position:relative;height:16px}
.ticks span{position:absolute;transform:translateX(-50%);font-size:.7rem;color:var(--ink3)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.8rem;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:10px;border-radius:3px;display:inline-block}

/* ---------- try it ---------- */
.try{display:grid;grid-template-columns:330px 1fr;gap:22px;align-items:start}
.try .phone{width:100%;max-width:330px}
.try .chat{height:430px;overflow-y:auto;scroll-behavior:smooth}
.try .bub{animation:rise .25s ease both}
.bub.sys{align-self:center;background:transparent;color:var(--ink3);font-size:.72rem;text-align:center;
  max-width:100%;padding:2px 8px}
.typing{align-self:flex-start;background:#eef1f6;border-radius:14px;padding:10px 14px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:#94a3b8;animation:pulse 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.scen{display:grid;gap:8px}
.scen button{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);
  background:#fff;border-radius:14px;padding:13px 14px;font:inherit;cursor:pointer;transition:.12s}
.scen button:hover{border-color:#b9c4d6;background:var(--soft)}
.scen button.on{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 1px var(--brand)}
.scen b{display:block;font-size:.92rem}
.scen small{display:block;font-size:.8rem;color:var(--ink2)}
@media (max-width:900px){.try{grid-template-columns:1fr}.try .phone{margin:0 auto}}
@media (max-width:600px){.hgrid{grid-template-columns:1fr;gap:8px}
  .brk{grid-template-columns:1fr 36px}.brk .trange,.brk .dchips{grid-column:1/-1}
  .tlr,.ticks{grid-template-columns:34px 1fr 0}.tlr small{display:none}}

/* ---------- call step v3: tabs, intents, questions, rules ---------- */
.subtabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;padding:4px;background:#e9edf3;border-radius:14px}
.subtabs button{flex:1 0 auto;border:0;background:none;font:inherit;text-align:left;padding:10px 14px;border-radius:10px;
  cursor:pointer;color:var(--ink2);min-width:130px}
.subtabs button b{display:block;font-size:.88rem;font-weight:680}
.subtabs button small{display:block;font-size:.74rem;color:var(--ink3);margin-top:1px}
.subtabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(10,16,32,.12)}
.sub{display:none}.sub.on{display:block;animation:rise .2s ease both}
.intents{display:grid;gap:10px}
.intent{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.intent.off{background:#fafbfd}
.intent .ih{display:flex;gap:12px;align-items:center;padding:14px 16px}
.intent .ih .txt{flex:1}
.intent .ih b{font-size:.95rem}
.intent .ih small{display:block;color:var(--ink2);font-size:.82rem}
.intent .ib{padding:0 16px 16px;display:grid;gap:10px}
.intent.off .ib{display:none}
.intent .ib textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:.92rem;resize:vertical}
.intent .ib textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.then{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.84rem;color:var(--ink2)}
.then select{padding:7px 10px;border-radius:8px;border:1px solid var(--line);font:inherit;font-size:.86rem}
.words{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.word{display:inline-flex;gap:6px;align-items:center;background:var(--rose-l);color:#9f1239;border-radius:999px;
  padding:4px 6px 4px 11px;font-size:.8rem;font-weight:600}
.word button{border:0;background:rgba(159,18,57,.12);color:inherit;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:.7rem;line-height:1}
.words input{border:1px dashed #e7b3c0;border-radius:999px;padding:5px 11px;font:inherit;font-size:.8rem;min-width:140px}
.known{display:flex;gap:8px;flex-wrap:wrap}
.known span{display:inline-flex;gap:7px;align-items:center;background:var(--brand-l);color:var(--brand-d);border-radius:10px;
  padding:8px 12px;font-size:.84rem;font-weight:600}
.known span.miss{background:var(--amber-l);color:var(--amber)}
.pchips{display:flex;gap:6px;flex-wrap:wrap}
.pchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:.84rem;
  font-weight:600;color:var(--ink2);cursor:pointer}
.pchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.faqs{display:grid;gap:10px;margin-bottom:10px}
.faq-i{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;background:#fff}
.faq-i .qrow{display:flex;gap:10px;align-items:center}
.faq-i input.q{flex:1;border:0;font:inherit;font-weight:650;font-size:.93rem;padding:4px 6px;border-radius:6px}
.faq-i input.q:hover,.faq-i input.q:focus{background:var(--soft);outline:none}
.faq-i textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:.9rem;resize:vertical;min-height:44px}
.faq-i textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.badge{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
.badge.need{background:var(--amber-l);color:var(--amber)}
.badge.ok{background:var(--brand-l);color:var(--brand-d)}
.badge.soon{background:#eef1f6;color:var(--ink2)}
.locked-rules li{font-size:.92rem}
.never{display:flex;gap:8px;flex-wrap:wrap}
.never .word{background:var(--soft);color:var(--ink)}
.never .word button{background:rgba(10,16,32,.08)}
.other-row{display:flex;gap:10px;align-items:flex-end;margin-top:12px}

/* ---------- try it v2 ---------- */
.voicebar{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:12px}
.prog{height:6px;border-radius:3px;background:#e6eaf1;margin-top:10px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--brand);transition:width .2s}
.scen-h{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:8px 2px 2px}
.bub.speaking{box-shadow:0 0 0 2px #34d399}
.bub.them.speaking{box-shadow:0 0 0 2px #93c5fd}
.try-start{margin:auto;text-align:center;display:grid;gap:10px;justify-items:center;padding:40px 10px}

/* carriers and the switch-on steps (v4) */
.carriers{display:grid;gap:12px}
.cgroup{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:start}
.cg-h{font-size:.78rem;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;padding-top:9px}
.cg{display:flex;flex-wrap:wrap;gap:8px}
.cnote{margin-top:12px;background:var(--amber-l);color:#7a4a05;border-radius:12px;padding:10px 14px;font-size:.86rem}
.how{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px;counter-reset:how}
.how>li{counter-increment:how;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.how>li::before{content:counter(how);width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:.82rem;font-weight:700;display:grid;place-items:center}
.how>li.plain{counter-increment:none}
.how>li.plain::before{content:"";background:none}
.how>li>div>b{display:block;font-size:.95rem;margin:4px 0 6px}
.how>li>div>span{display:block;color:var(--ink2);font-size:.88rem;line-height:1.5}
.how .codes{margin-top:0}
.how .assist{display:inline-block;margin-top:8px;font-size:.86rem;color:var(--ink2)}
@media (max-width:640px){.cgroup{grid-template-columns:1fr;gap:6px}.cg-h{padding-top:0}}

/* reaching a person */
.xrow{display:grid;grid-template-columns:112px 1fr 170px;gap:10px;align-items:center}
.xrow+.xrow{margin-top:10px}
.xrow .lab{font-size:.86rem;font-weight:650;color:var(--ink2)}
.xrow input,.xrow select{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);font:inherit;
  font-size:.95rem;background:#fff;color:var(--ink);transition:.14s}
.xrow input:focus,.xrow select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.ferr{margin-left:122px}
.ferr{color:var(--rose);font-size:.8rem;margin-top:6px;display:none}
.ferr.on{display:block}
.lint{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--amber-l);color:#7a4a05;
  border-radius:10px;padding:8px 12px;font-size:.84rem}
.lint button{border:1px solid #e3b766;background:#fff;color:#7a4a05;border-radius:8px;padding:4px 10px;font:inherit;
  font-size:.8rem;font-weight:650;cursor:pointer}
.example{margin-top:8px;background:#f6f8fb;border:1px dashed var(--line);border-radius:12px;padding:10px 14px;
  font-size:.86rem;color:var(--ink2)}
.example i{font-style:normal;color:var(--ink)}
@media (max-width:640px){.xrow{grid-template-columns:1fr}.ferr{margin-left:0}}

/* a person is one tap away on every step */
.helpline{margin:18px 0 0;font-size:.88rem;color:var(--ink2);background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 16px}
.helpline a,.how .assist a{color:var(--brand);font-weight:650}

/* owners' own reasons */
.intent.own .ih .title{width:100%;border:0;border-bottom:1px dashed var(--line);font:inherit;font-size:.95rem;font-weight:680;
  padding:4px 0;background:none;color:var(--ink)}
.intent.own .ih .title:focus{outline:none;border-bottom-color:var(--brand)}
.intent.own .then input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.88rem}
.intent.own .word{background:#eef1f6;color:var(--ink)}
.intent.own .word button{color:var(--ink3)}
.intent.own .words input{border-color:var(--line)}

/* calendars in setup */
.resl{display:grid;gap:10px;max-width:560px}
.rescard{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.res-about{padding:9px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.88rem}
.res-svcs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip.mini{padding:4px 10px;font-size:.8rem}
.resrow{display:flex;gap:8px}
.resrow input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.92rem}
.calsync{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.linkrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.linked{background:var(--brand-l);color:#05603f;border-radius:10px;padding:9px 14px;font-size:.9rem}

/* Kept's calendar: one column per person, bay or room */
.calbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.upcoming{margin:0 0 14px}
.upcoming h4{margin:0 0 8px;font-size:.92rem}
.up-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1px solid #e6ebf1;border-radius:10px;background:#fff;margin-bottom:6px;font-size:.92rem}
.up-item span{min-width:0}
.calnav{display:flex;align-items:center;gap:6px;flex:1}
.calnav b{margin-left:8px;font-size:.95rem}
.calact{display:flex;gap:8px}
.calwrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.calgrid{display:grid;min-width:100%}
.calh{position:sticky;top:0;background:#f6f8fb;border-bottom:1px solid var(--line);padding:10px 12px;font-size:.84rem;font-weight:700;
  text-align:center;z-index:2}
.caltimes{border-right:1px solid var(--line)}
.caltimes span{display:block;height:calc(var(--slot,28px)*2);font-size:.72rem;color:var(--ink3);text-align:right;padding:2px 8px 0 0;
  border-top:1px solid #f0f2f6}
.calcol{position:relative;border-right:1px solid #eef1f6;cursor:copy;
  background-image:repeating-linear-gradient(#fff 0 calc(var(--slot,28px) - 1px),#f3f5f9 calc(var(--slot,28px) - 1px) var(--slot,28px))}
.calcol:last-child{border-right:0}
.calcol .off{position:absolute;left:0;right:0;background:repeating-linear-gradient(45deg,#f7f8fb 0 6px,#eef1f6 6px 12px);pointer-events:none}
.appt{position:absolute;left:4px;right:4px;border-radius:8px;padding:5px 8px;font-size:.78rem;line-height:1.25;overflow:hidden;
  cursor:pointer;background:#e7f7ef;border-left:3px solid var(--brand);color:#064e33;box-shadow:0 1px 2px rgba(10,16,32,.08)}
.appt b{display:block;font-size:.8rem}
.appt.short{display:flex;align-items:center;gap:6px;white-space:nowrap;padding-top:2px;padding-bottom:2px}
.appt.short b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
.appt.short .t{flex:none}
/* In a narrow column (the week view) there's room for one thing: the name. The time is on tap. */
.appt.short{container-type:inline-size}
@container (max-width:150px){.appt.short .t{display:none}}
.appt.kept{background:#eef0ff;border-left-color:#6366f1;color:#312e81}
.appt.block{background:#f1f3f7;border-left-color:#94a3b8;color:var(--ink2)}
.nowline{position:absolute;left:0;right:0;height:2px;background:var(--rose);z-index:1;pointer-events:none}
.caldlg{border:0;border-radius:18px;padding:0;width:min(520px,94vw);box-shadow:0 24px 60px rgba(10,16,32,.25)}
.caldlg::backdrop{background:rgba(10,16,32,.35)}
.caldlg form{padding:22px}
.caldlg-nav{display:flex;gap:8px;align-items:center;margin-top:18px}
.caldlg-nav span{flex:1}
@media (max-width:640px){.calact{width:100%}.calact .btn{flex:1}}
/* The week at a glance: a dot under each day with bookings. Day or Week on a computer; on a
   phone, the day's bookings as a list (a seven-column grid is too narrow to read there). */
.calview{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:#fff}
.calview button{border:0;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink3);
  padding:5px 12px;border-radius:7px;cursor:pointer}
.calview button.on{background:var(--brand-l);color:var(--brand-d)}
.calstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 14px}
.calstrip button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 2px 4px;font:inherit;
  cursor:pointer;color:var(--ink);text-align:center;line-height:1.2}
.calstrip button span{display:block;font-size:.72rem;color:var(--ink3)}
.calstrip button b{display:block;font-size:.95rem;font-weight:650}
.calstrip button i{display:block;height:8px;font-style:normal;color:var(--brand);font-size:.9rem;line-height:8px}
.calstrip button.closed{background:#f7f8fb}
.calstrip button.today b{color:var(--brand-d)}
.calstrip button.on{border-color:var(--brand);background:var(--brand-l)}
.callist{display:none}
.day-item{display:flex;gap:12px;align-items:stretch;margin-bottom:8px;cursor:pointer}
.day-item time{flex:0 0 64px;font-size:.8rem;color:var(--ink3);padding-top:9px}
.day-item div{flex:1;min-width:0;background:#e7f7ef;border-left:3px solid var(--brand);color:#064e33;border-radius:10px;padding:8px 12px;font-size:.88rem}
.day-item div b{display:block}
.day-item.block div{background:#f1f3f7;border-left-color:#94a3b8;color:var(--ink2)}
.calh small{display:block;font-weight:500;color:var(--ink3)}
.calh.today{color:var(--brand-d)}
@media (max-width:699px){
  .calview,.calwrap,.calhint{display:none}
  .callist{display:block}
  .calbar h3{display:none}
  .calnav b{margin-left:6px;font-size:.9rem}
}

.xnote{margin:6px 0 4px 122px;font-size:.82rem;color:var(--ink2)}
.xnote:empty{display:none}
.xnote.warn{color:#7a4a05;background:var(--amber-l);border-radius:8px;padding:6px 10px}
@media (max-width:640px){.xnote{margin-left:0}}

/* talk to it yourself */
.talkbar{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#f6f8fb}
.talkbar input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font:inherit;font-size:.88rem;background:#fff;color:var(--ink)}
.talkbar button{border:0;border-radius:50%;width:38px;height:38px;background:var(--brand);color:#fff;font-size:1rem;cursor:pointer}
.talkbar button:disabled{opacity:.5}
.try .phone-in{display:flex;flex-direction:column}
.talkhelp{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.talkhelp h3{font-size:1rem}
.talkhelp p{color:var(--ink2);font-size:.9rem;margin-top:4px}
[hidden]{display:none!important}

/* the customer's booking page */
.bk{min-height:100vh;display:grid;place-items:center;align-content:center;gap:14px;padding:24px 16px;background:var(--bg,#f6f8fb)}
.bk-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 10px 30px rgba(10,16,32,.06)}
.bk-biz{font-size:.82rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.06em}
.bk h1{font-size:1.6rem;margin:6px 0 16px}
.bk-when{display:grid;gap:4px;background:#f6f8fb;border-radius:14px;padding:14px 16px;margin-bottom:20px}
.bk-when b{font-size:1rem}.bk-when span{color:var(--ink2);font-size:.92rem}
.bk form{display:grid;gap:8px}
.bk label{font-weight:650;font-size:.92rem;margin-top:6px}.bk label span{color:var(--ink3);font-weight:500}
.bk input{padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:1rem}
.bk input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.bk-hint{font-size:.8rem;color:var(--ink3);margin:-2px 0 4px}
.bk-err{color:var(--rose);font-size:.85rem;min-height:1em}
.bk-ok{background:var(--brand-l);color:#05603f;border-radius:12px;padding:12px 14px;font-weight:600}
.bk-cal{display:block;text-align:center;margin-top:16px;font-weight:650;color:var(--brand);font-size:.92rem}
.bk-foot{font-size:.78rem;color:var(--ink3)}.bk-foot a{color:inherit}

.cf-status{margin-top:12px;font-size:.84rem;color:var(--ink2);background:#f6f8fb;border-radius:10px;padding:9px 12px}
.cf-status:empty{display:none}
.cf-status .ok{color:#05603f;font-weight:600}

.bk-change{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:8px}
.bk-change h2{font-size:1.05rem}
.bk-change p{color:var(--ink2);font-size:.88rem}
.bk-change textarea{padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:.95rem;resize:vertical}
.bk-cancel{background:none;border:0;color:var(--ink3);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;margin-top:6px}
.bk-cancel[data-sure="1"]{color:var(--rose);font-weight:650}

/* customers' messages */
.msgs{display:grid;gap:10px;margin-top:10px}
.msg{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff}
.msg-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.msg-h span{color:var(--ink2);font-size:.86rem}
.msg-h small{margin-left:auto;color:var(--ink3);font-size:.78rem}
.msg p{margin:6px 0 10px;font-size:.95rem}
.msg-a{display:flex;gap:8px;flex-wrap:wrap}
.msg-a .chip{padding:6px 12px;font-size:.82rem;text-decoration:none}
/* One-tap texts (D-143): the text to send, and the button that opens Messages with it */
.msg .msg-text{margin:-4px 0 10px;padding:8px 11px;border-radius:10px;background:var(--soft);color:var(--ink2);font-size:.88rem;white-space:pre-wrap}
.msg-a .chip.send{background:var(--brand);border-color:var(--brand);color:#fff}
.msg-a .chip.send:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.t-msg{margin:14px 0 18px;padding:12px 14px;border-radius:14px;background:var(--soft);border:1px solid var(--line);white-space:pre-wrap;font-size:.98rem}
.t-msg:empty{display:none}

.msg-urgent{font-style:normal;font-weight:700;color:#b42318;background:#fef3f2;border-radius:6px;padding:1px 6px;margin-right:4px;font-size:.78rem}
.box.verify{border-color:#f5c26b;background:#fffaf0}
.plan-cancelled{border-left:3px solid var(--amber);padding-left:14px}
.plan-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--amber);background:var(--amber-l);border-radius:999px;padding:3px 10px;margin-bottom:8px}
.calls-h,.plan-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-box .hint{margin:8px 0 12px}
.meter{height:6px;border-radius:6px;background:#eef2f6;overflow:hidden;margin:6px 0 10px}
.meter i{display:block;height:100%;background:#2f8f5b;border-radius:6px;transition:width .3s}
.meter i.high{background:#d48a1c}.meter i.full{background:#b42318}
.calllist{display:grid;gap:10px;margin-top:6px}
.cl-item{border:1px solid #e6ebf1;border-radius:10px;padding:10px 12px;background:#fff}
.cl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-head small{color:#6b7a90;margin-left:auto}
.cl-item p{margin:6px 0 8px;color:#3b4a60;font-size:.92rem}
.cl-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan-seg{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.cl-num{font-size:.86rem;color:var(--ink2);font-variant-numeric:tabular-nums;user-select:all}
.msg-a .cl-num{align-self:center}
.chip2{font-size:.74rem;font-weight:700;border-radius:6px;padding:1px 7px;background:#eef2f6;color:#3b4a60}
.chip2.ok{background:#e7f6ee;color:#1f6f45}.chip2.note{background:#fff4e0;color:#8a5a12}.chip2.dim{color:#8a97aa}

/* a field label with a link at its right, e.g. Password ... Forgot password? */
.pass-wrap{position:relative}
.pass-wrap input{padding-right:70px}
.pass-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;font:inherit;font-size:.84rem;font-weight:600;color:var(--brand-d);padding:6px 10px;cursor:pointer;border-radius:8px}
.pass-eye:hover{background:var(--soft)}
.field .label-row,.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.label-row a{font-weight:500;font-size:.85rem}

/* GotItDesk on your phone (D-145): how to install it, and notifications */
.app-steps{margin:8px 0 0;padding-left:20px;color:var(--ink2);font-size:.92rem;display:grid;gap:4px}
/* Installed on a phone (D-145): an app, not the website. No website menu or sign-up buttons, and
   room for the status bar. */
@media (display-mode: standalone){
  .nav-links,.nav-cta,.nav .menu{display:none !important}
  .nav{padding-top:env(safe-area-inset-top)}
  .dash{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){
  .dash{padding:18px 14px 60px}
  .dash-h .btn{padding:7px 12px;font-size:.86rem}
  .dash-h h1{font-size:1.5rem}
}

/* ---- The app (D-147, simplified in D-152) ---------------------------------------------
   Four tabs, one job each, on every screen: Home, Calendar, Calls, Settings. Computer: the tabs
   in the top bar. iPad: down the side. Phone: along the bottom. No website menu or footer. */
.app-page .nav,.app-page .foot{display:none}
.app-bg{min-height:100vh;overflow-x:clip}
.dash [data-sec]:not(.on-tab){display:none !important}
.dash section{display:grid;gap:16px;min-width:0;padding:0;grid-template-columns:minmax(0,1fr)}
.app-top{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
  margin:-30px -20px 0;padding:calc(10px + env(safe-area-inset-top)) 20px 10px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.app-logo{font-size:1.15rem;flex:none}
.app-logo .mark{width:30px;height:30px;border-radius:9px}
.app-logo .mark svg{width:19px;height:19px}
.app-wm{display:none}
.app-edit{display:none;flex:none}
.set-edit{display:flex;align-items:center;gap:12px;padding:16px;margin-bottom:14px;border-radius:16px;
  background:var(--brand-l);border:1px solid #b6e8d2;color:#064e33;text-decoration:none!important}
.set-edit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.set-edit span{flex:1;min-width:0}
.set-edit b{display:block;font-size:1rem}
.set-edit small{display:block;font-size:.85rem;opacity:.8;margin-top:2px}
.set-edit svg.chev{width:16px;height:16px}
.set-h{margin:4px 4px 8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
a.set-row{text-decoration:none!important}
.app-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.app-who b{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-who .pill2{align-self:flex-start;padding:2px 9px;font-size:.74rem}
.app-out{margin-left:auto;flex:none;border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 11px;
  font:inherit;font-size:.84rem;font-weight:600;color:var(--ink2);cursor:pointer}
.app-out:hover{background:var(--soft)}
.hp-l{display:block;font-size:.86rem;color:var(--ink2);margin:14px 0 6px}
#hp-form textarea,#hp-form input[type=email],#hp-form select{width:100%;box-sizing:border-box;font:inherit;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.hp-err{color:#b42318;font-size:.86rem;margin:6px 0 0}
.hp-me{display:flex;gap:8px;align-items:center;font-size:.88rem;color:var(--ink2);margin-top:10px}
.hp-done{text-align:center;padding:18px 0 6px}
.hp-done b{display:block;font-size:1.05rem}
.hp-row{display:flex;gap:10px;align-items:center;border-top:1px solid #e6ebf1;padding:9px 0;font-size:.92rem}
.hp-row:first-child{border-top:0}
.hp-row small{color:var(--ink3)}
.hp-row span{flex:1;min-width:0}
.toptabs{display:none}
.tabbar{display:flex;position:fixed;z-index:30;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.tabbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:0;background:none;font:inherit;font-size:.72rem;font-weight:600;color:var(--ink3);padding:8px 4px;cursor:pointer}
.tabbar button svg,.toptabs button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.on{color:var(--brand)}
.tb-badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--rose);color:#fff;font-style:normal;font-size:.7rem;line-height:18px;text-align:center}

/* Home */
.now{background:var(--brand-l);color:#064e33;border:1px solid #b6e8d2;border-radius:18px;padding:14px 16px}
.now.paused{background:var(--amber-l);border-color:#f1d3a0;color:#7a4b06}
.now .state{font-size:1.05rem;font-weight:720;letter-spacing:-.01em;margin:0 0 2px;display:flex;align-items:center;gap:9px}
.now .state::before{content:"";width:10px;height:10px;border-radius:50%;background:#10b981;flex:none}
.now.paused .state::before{background:var(--amber)}
.now p{color:inherit;opacity:.85;font-size:.9rem}
/* All three choices in one small switch; what the chosen one does, in a line under it. */
.now-q{margin:12px 0 6px;font-weight:650;opacity:1 !important}
.seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:#fff;border:1px solid #cfe9dd;
  border-radius:11px;padding:3px;margin-top:10px}
.seg3 button{border:0;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink2);padding:8px 4px;
  border-radius:8px;cursor:pointer;line-height:1.2}
.seg3 button:hover{background:var(--soft)}
.seg3 button.on{background:var(--brand);color:#fff}
.now.paused .seg3 button.on{background:var(--amber)}
.now-d{margin:7px 2px 0;font-size:.86rem}
.now .for{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.now .for button{border:1px solid #b6e8d2;background:#fff;color:var(--ink2);border-radius:999px;
  padding:6px 12px;font:inherit;font-size:.82rem;cursor:pointer}
.home-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.hcol{display:grid;gap:16px;align-content:start;min-width:0;grid-template-columns:minmax(0,1fr)}
.hblock{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.hh{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:1.02rem}
.hcount{font-style:normal;background:var(--rose);color:#fff;border-radius:99px;font-size:.72rem;padding:1px 8px}
.hblock .msgs{margin-top:0}
.caught{color:var(--ink2);font-size:.9rem;margin:0}
.hh-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.nfil{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.nfil[hidden]{display:none}
.nfil .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.nlist{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
/* One card per thing to do: a tick box to mark it done, what happened, what to do, one button.
   The arrow opens the rest. Urgent ones are red and come first. */
.ncard{display:flex;min-width:0;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff}
.ncard.urgent{border-color:#f4b4ae;background:#fffafa}
.ntick{flex:none;width:22px;height:22px;margin-top:16px;border:2px solid #b9c4d2;border-radius:6px;background:#fff;cursor:pointer;position:relative}
.ntick:hover{border-color:var(--brand)}
.ntick:hover::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--brand);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.nbody{flex:1;min-width:0}
.nhead{position:relative;display:block;width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;
  color:var(--ink);padding:0 28px 0 0}
.nlabel{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.ncard.urgent .nlabel{color:#b42318}
.nhead b{display:block;font-size:1rem;margin-top:2px}
.nsub{display:block;color:var(--ink2);font-size:.9rem;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ncard.open .nsub{white-space:normal}
.nchev{position:absolute;right:2px;top:50%;width:9px;height:9px;margin-top:-7px;border:solid var(--ink3);
  border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.ncard.open .nchev{transform:rotate(-135deg);margin-top:-2px}
.nhead:hover .nchev{border-color:var(--ink)}
.nmore{margin-top:10px}
.nmore .msg-text{margin:0 0 8px;padding:8px 11px;border-radius:10px;background:var(--soft);color:var(--ink2);font-size:.88rem;white-space:pre-wrap}
.nmore .note{margin:0 0 8px}
.nact{margin-top:10px}
#d-nmore{margin-top:8px}
.nextup{display:grid;margin:0 0 10px}
.next-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 0;border:0;
  border-bottom:1px solid var(--line2);background:none;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.next-item:last-child{border-bottom:0}
.next-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.next-item small{color:var(--ink3);font-size:.82rem;white-space:nowrap}
.next-item:hover span{color:var(--brand-d)}
.hnote{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:.88rem;color:var(--ink2)}
.hnote[hidden]{display:none}
/* Today, at a glance; tap for Insights */
.today{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;background:none;padding:0;font:inherit;cursor:pointer;text-align:center}
.today span{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 4px;font-size:.8rem;color:var(--ink2)}
.today b{display:block;font-size:1.25rem;color:var(--ink);line-height:1.2}
.today:hover span{border-color:var(--brand)}
.rec-line{font-size:.88rem}
.rec-line b{color:var(--ink)}
.rec-a{display:flex;align-items:center;gap:12px}
/* Insights */
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.ins{background:var(--soft);border-radius:12px;padding:12px 14px;border:1.5px solid transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.ins:hover{border-color:#c9d3e0}
.ins.on{border-color:var(--ink)}
.ins i{display:block;font-style:normal;font-size:.78rem;font-weight:600;color:var(--brand-d);margin-top:6px}
.ins.on i{color:var(--ink)}
.ins b{display:block;font-size:1.5rem;line-height:1.2}
.ins span{display:block;font-size:.84rem;color:var(--ink2);margin-top:2px}
.ins.win{background:var(--brand-l)}
.ins.win b{color:var(--brand-d)}
.ins-tip{grid-column:1/-1;margin:0}
#d-calls{scroll-margin-top:90px}
.cl-said{margin-top:10px;border-top:1px solid #e6ebf1;padding-top:8px;display:grid;gap:6px}
.cl-said p{margin:0;font-size:.9rem;line-height:1.45}
.cl-said b{display:inline-block;min-width:76px;font-size:.78rem;color:#6b7a90}
.cl-said .said-r b{color:var(--brand-d)}

/* Settings: a short list, each row its own page */
.set-group{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:14px}
.set-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:0;border-bottom:1px solid var(--line2);
  background:none;font:inherit;font-size:.95rem;color:var(--ink);text-align:left;cursor:pointer}
.set-row:last-child{border-bottom:0}
.set-row:hover{background:var(--soft)}
.set-row svg{width:20px;height:20px;fill:none;stroke:var(--ink2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.set-row span{flex:1;min-width:0;font-weight:600}
.set-row small{flex:0 1 auto;min-width:0;max-width:45%;color:var(--ink3);font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-row svg.chev{width:16px;height:16px;stroke:var(--ink3)}
.set-back{justify-self:start;border:0;background:none;font:inherit;font-weight:650;color:var(--brand);padding:4px 0;cursor:pointer}
.set-back[hidden],.set-list[hidden],.set-page[hidden]{display:none}
.set-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* Computer: tabs in the top bar; Home in two columns */
@media (min-width:1100px){
  .app-page .dash{max-width:1040px}
  .app-page .dash[data-tab="calendar"]{max-width:1240px;padding-bottom:16px}
  .app-top{margin:-30px calc(50% - 50vw) 0;padding:10px max(20px, calc(50vw - 620px))}
  .toptabs{display:flex;gap:4px;margin-left:12px}
  .toptabs button,.toptabs a{position:relative;display:flex;align-items:center;gap:8px;border:0;background:none;font:inherit;
    font-size:.92rem;font-weight:600;color:var(--ink2);padding:8px 14px;border-radius:10px;cursor:pointer;text-decoration:none}
  .toptabs button svg,.toptabs a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .toptabs button:hover,.toptabs a:hover{background:var(--soft)}
  .toptabs button.on,.toptabs a.on{background:var(--brand-l);color:var(--brand-d)}
  .toptabs .tb-badge{position:static;margin-left:2px}
  .app-who{margin-left:auto;align-items:flex-end}
  .app-out{margin-left:4px}
  .app-wm,.app-edit{display:inline-flex}
  .tabbar{display:none}
  .home-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  section[data-sec="insights"],section[data-sec="settings"]{max-width:860px;width:100%;justify-self:center}
}
/* Phone */
@media (max-width:699px){
  .app-page .dash{padding:18px 14px calc(84px + env(safe-area-inset-bottom))}
  .app-top{margin:-18px -14px 0;padding-left:16px;padding-right:16px}
  .tabbar{left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .app-page .box{padding:16px;border-radius:16px}
  .hblock{padding:16px}
}
/* iPad and other tablets: a side rail */
@media (min-width:700px) and (max-width:1099px){
  .app-page .dash{max-width:none;margin:0;padding:24px 28px 40px 116px}
  .app-page .dash[data-tab="calendar"]{padding-bottom:16px}
  .app-top{margin:-24px -28px 0 -116px;padding-left:116px}
  .tabbar{top:0;bottom:0;left:0;width:92px;flex-direction:column;justify-content:flex-start;gap:6px;
    padding:calc(16px + env(safe-area-inset-top)) 8px 16px;border-top:0;border-right:1px solid var(--line)}
  .tabbar button{flex:0 0 auto;padding:12px 4px;border-radius:14px;font-size:.78rem}
  .tabbar button.on{background:var(--brand-l)}
  .app-wm{display:inline}
}
/* Setup after launch (D-153): edited inside the app, one part at a time from Settings or the
   whole flow from Edit setup; nothing reaches live calls until Save. */
.edit-top,.edit-bar,.edit-back{display:none}
html.editing .nav,html.editing .foot{display:none}
html.editing .edit-top{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
  padding:calc(10px + env(safe-area-inset-top)) max(20px, calc(50vw - 620px)) 10px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
html.editing .edit-back{display:block;margin-bottom:10px}
html.editing .edit-bar{display:flex;align-items:center;gap:10px;position:sticky;bottom:0;z-index:15;grid-column:1/-1;
  margin:16px -24px -80px;padding:12px 24px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.edit-bar span{flex:1;min-width:0;font-size:.86rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edit-bar.dirty span{color:var(--amber);font-weight:650}
html.editing .rail2 .saved{display:none}
html.part .rail2{display:none}
html.part .setup{grid-template-columns:minmax(0,1fr);max-width:860px}
html.part .pane-nav{display:none}
html.editing .pane{padding:0 0 24px}
@media (max-width:900px){html.editing .edit-bar{margin:16px -24px -80px}}

/* Book a walkthrough (D-149) */
.wt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;max-width:1040px;margin:0 auto}
.wt-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.wt-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.wt-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.wt-day{flex:1 0 64px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 6px;
  font:inherit;cursor:pointer;text-align:center;color:var(--ink)}
.wt-day span{display:block;font-size:.75rem;color:var(--ink3)}
.wt-day b{display:block;font-size:.9rem;font-weight:650}
.wt-day.on{border-color:var(--brand);background:var(--brand-l)}
.wt-times{margin:16px 0 4px}
.wt-part{font-size:.75rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:12px 0 8px}
.wt-part:first-child{margin-top:0}
.wt-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wt-more{margin-top:12px;font-size:.88rem}
.wt-time{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 4px;font:inherit;
  font-size:.9rem;font-weight:600;cursor:pointer;color:var(--ink)}
.wt-time:hover,.wt-day:hover{border-color:var(--brand)}
.wt-time.on{border-color:var(--brand);background:var(--brand);color:#fff}
.wt-who{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.wt-who .row2{margin-top:10px}
.wt-who .btn{width:100%;margin-top:12px}
.wt-done{padding:8px 2px}
@media (max-width:860px){.wt{grid-template-columns:minmax(0,1fr);gap:22px}}
/* The signup agreement (Terms, Privacy, 18+) */
.agree{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink2);line-height:1.45;cursor:pointer}
.agree input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--brand)}
/* Holiday hours rows (setup) */
.brk.hol{grid-template-columns:150px 160px 1fr 36px;background:#f6f8fb;border-color:var(--line)}
.brk.hol input[type=date],.hol-how select{border:1px solid var(--line);border-radius:9px;padding:7px 9px;font:inherit;font-size:.88rem;background:#fff}
.hol-how{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:760px){.brk.hol{grid-template-columns:1fr 36px}.brk.hol input[type=date],.brk.hol .hol-how{grid-column:1/-1}}
.brk.hol input.blabel{color:var(--ink)}

/* ---------- admin console (D-168) ---------- */
.adm{max-width:1080px;margin:0 auto;padding:30px 20px 60px}
.adm-badge{background:var(--ink);color:#fff;border-radius:8px;padding:3px 9px;font-size:.78rem;flex:none}
.adm-tabs{display:flex;gap:4px;overflow-x:auto;margin-left:auto;scrollbar-width:none}
.adm-tabs button{border:0;background:none;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink2);padding:8px 12px;border-radius:10px;cursor:pointer;white-space:nowrap}
.adm-tabs button:hover{background:var(--soft)}
.adm-tabs button.on{background:var(--brand-l);color:var(--brand-d)}
.adm-main{display:grid;gap:14px;margin-top:18px}
.adm-main>section{display:grid;gap:14px;padding:0}
.adm-main>section[hidden]{display:none}
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.adm-cards a.ins{text-decoration:none!important;color:inherit;display:block}
.adm-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 0;border-top:1px solid #e6ebf1;text-decoration:none!important;color:inherit}
.adm-row:first-of-type{border-top:0}
.adm-row>span:first-child{flex:1 1 260px;min-width:0}
.adm-row small{color:var(--ink3)}
.adm-why{flex:1 1 100%;font-size:.86rem;color:var(--ink2)}
a.adm-row:hover{background:var(--soft)}
.adm-flags{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.adm-flag b{font-size:.74rem;text-transform:uppercase;margin-right:4px}
.adm-flag.red b{color:#b42318}.adm-flag.yel b{color:#8a5a12}
.adm-flag small{color:var(--ink3)}
.adm-events{margin:0;padding-left:18px;font-size:.88rem;display:grid;gap:3px}
.adm-help p{margin:6px 0}
.adm-note{width:100%;box-sizing:border-box;margin-top:10px;font:inherit;font-size:.9rem;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.adm-search{width:100%;box-sizing:border-box;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.adm-dl{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:6px 14px;margin:12px 0}
.adm-dl dt{color:var(--ink3);font-size:.88rem}.adm-dl dd{margin:0}
.adm-gate{margin-top:30px;text-align:center}
.chip2.bad{background:#fdecea;color:#b42318}
@media (max-width:760px){.adm{padding:20px 14px 40px}.adm .app-top{flex-wrap:wrap}.adm-tabs{margin-left:0;width:100%}}
/* The demo call as plain text (testers' list): readable without the audio or the animation. */
.readall{max-width:1100px;margin:18px auto 0;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.readall summary{padding:14px 20px;font-weight:620;cursor:pointer}
.readall .ans{padding:0 20px 14px;color:var(--ink2)}
.readall .ans p{margin:6px 0}
.next-steps{margin:0 0 6px 18px;padding:0;color:var(--ink2);font-size:.9rem;display:grid;gap:4px}
/* Industry pages (/for/...): the questions callers ask, and the starting call flow. */
.asks{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--ink2)}
.flow{list-style:none;counter-reset:f;margin:0;padding:0;display:grid;gap:10px}
.flow li{counter-increment:f;display:grid;grid-template-columns:28px 1fr;gap:4px 12px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.flow li::before{content:counter(f);grid-row:span 2;width:24px;height:24px;border-radius:50%;
  background:var(--brand-l);color:var(--brand-d);font-weight:650;font-size:.8rem;display:grid;place-items:center}
.flow li span{color:var(--ink2)}
.flow em{font-style:normal;color:var(--brand-d);font-weight:600}
/* Admin: the support desk's finding and draft reply (D-179). */
.adm-support{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.adm-found{white-space:pre-wrap;background:var(--soft);border-radius:8px;padding:10px 12px;font-size:.88rem;color:var(--ink2)}
.adm-draft{width:100%;font:inherit;font-size:.92rem;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:4px}
/* Admin → Sales (D-191): the goal, today's emails, onboarding, replies, leads */
.adm-goal .bar{height:10px;border-radius:6px;background:var(--soft);overflow:hidden;margin:10px 0 8px}
.adm-goal .bar i{display:block;height:100%;min-width:4px;background:var(--brand)}
.adm-goal b.big{font-size:1.6rem}
.adm-item{border-top:1px solid #e6ebf1;padding:14px 0}
.adm-item:first-of-type{border-top:0;padding-top:4px}
.adm-item h3{margin:0;font-size:1rem}
.adm-item .set-act{margin-top:10px}
.adm-item details{margin-top:8px}
.adm-item summary{cursor:pointer;font-size:.88rem;color:var(--brand-d);font-weight:600}
.adm-mail{white-space:pre-wrap;font:inherit;font-size:.9rem;line-height:1.5;background:var(--soft);border-radius:8px;padding:12px 14px;margin:8px 0 0;color:var(--ink)}
.adm-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:end}
.adm-form label{display:grid;gap:4px;font-size:.84rem;color:var(--ink2)}
.adm-form input{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}
.adm-pipe .ins span{font-size:.82rem}
.adm-pipe .adm-cards{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
/* The app, with example data (D-180). */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1040px;margin:0 auto}
.shot-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh)}
.shot-fig img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top;border-bottom:1px solid var(--line2)}
.shot-fig figcaption{padding:12px 16px;font-size:.92rem;color:var(--ink2)}
.shot-fig figcaption b{color:var(--ink);margin-right:4px}
@media (max-width:760px){.shots{grid-template-columns:1fr}}
/* A business's chat (D-181): /c/<id>, alone or inside the window on their website. */
.chat-app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:640px;margin:0 auto;background:#fff}
.chat-top{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.chat-top small{color:var(--ink3);font-size:.8rem}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:82%;padding:9px 13px;border-radius:16px;font-size:.95rem;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}
.chat-msg.ai{align-self:flex-start;background:var(--soft);color:var(--ink);border-bottom-left-radius:5px}
.chat-msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px}
.chat-msg.sys{align-self:center;background:none;color:var(--ink3);font-size:.85rem;text-align:center}
.chat-typing{display:flex;gap:4px;padding:0 20px 8px}
.chat-typing[hidden]{display:none}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);opacity:.5;animation:chatdot 1s infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes chatdot{50%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.chat-typing i{animation:none}}
.chat-in{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:flex-end}
.chat-in textarea{flex:1;resize:none;font:inherit;font-size:1rem;border:1px solid var(--line);border-radius:12px;padding:9px 12px;max-height:120px}
.chat-note{font-size:.75rem;color:var(--ink3);text-align:center;padding:0 12px 10px;margin:0}
.chat-note a{color:var(--ink3)}
.chat-again{align-self:center}
.copyrow{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.copyrow input{flex:1 1 220px;min-width:0;font:inherit;font-size:.86rem;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--soft)}
.fit .card{padding:20px 22px}.fit .card h3{margin:10px 0 6px}
.callout.later h3{display:flex;align-items:center;gap:8px}
.shot-fig .enlarge{display:none;color:var(--ink3);font-size:.82rem;margin-left:4px}
@media (max-width:760px){.shot-fig .enlarge{display:inline}}
/* "Coming soon" kept short: a list, not four cards (testers' list: the page had grown). */
.soon-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:900px;margin:0 auto}
.soon-list span{background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:.92rem;color:var(--ink2)}
.import{margin-top:16px;border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:12px 14px}
.import summary{cursor:pointer;font-weight:600}
.imp-out{margin-top:12px;display:grid;gap:10px}
.imp-list{display:grid;gap:8px}
.imp-i{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:10px}
.imp-i>span{display:grid;gap:3px}.imp-i small{color:#4b5563}
.copilot{border:1px solid #ddd3fb;background:linear-gradient(180deg,#f6f2ff,#fff);border-radius:16px;padding:14px 16px;margin:0 0 6px}
.copilot~.pane{padding-top:18px}
.cp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.cp-head b{font-size:15px}
.cp-ready{font-size:12.5px;color:#4b5563;margin-right:auto}
.copilot.closed .cp-body{display:none}
.cp-missing{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.cp-missing button{font:inherit;font-size:12.5px;border:1px solid #f1d4a5;background:#fff7ea;color:#7a4a00;border-radius:999px;padding:4px 10px;cursor:pointer}
.cp-log{display:grid;gap:10px;margin-top:10px;max-height:420px;overflow:auto}
.cp-msg{padding:9px 12px;border-radius:12px;max-width:92%;font-size:14px;line-height:1.45}
.cp-msg.me{background:#eef2ff;justify-self:end}.cp-msg.ai{background:#fff;border:1px solid #e5e7eb}
.cp-chg{display:flex;align-items:center;gap:8px;justify-content:space-between;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 10px;font-size:13.5px}
.cp-chg.done{opacity:.55}.cp-chg .acts{display:flex;gap:6px;flex-shrink:0}
.cp-chg button{font:inherit;font-size:12.5px;border-radius:8px;padding:4px 10px;cursor:pointer;border:1px solid #d1d5db;background:#fff}
.cp-chg button.ok{background:#0b7a53;border-color:#0b7a53;color:#fff}
.cp-in{display:flex;gap:8px;margin-top:10px;align-items:flex-end}.cp-in textarea{flex:1;min-width:0;font:inherit;font-size:14px;line-height:1.45;padding:9px 11px;border:1px solid var(--line);border-radius:10px;resize:vertical}
.cp-foot{margin-top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Phones: a shorter home page. Screenshots swipe sideways; trades and questions show the first
   few, with a button for the rest; the numbers sit two by two. */
.m-more{display:none;text-align:center;margin-top:16px}
@media (max-width:640px){
  .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .shot-fig{flex:0 0 86%;scroll-snap-align:start}
  #who .m-fold:not(.open)>a:nth-child(n+4):not(:last-child){display:none}
  .faq.m-fold:not(.open)>details:nth-child(n+6){display:none}
  .m-more{display:block}
  #numbers .band{grid-template-columns:1fr 1fr;gap:18px;padding:26px}
  #numbers .band .n{font-size:2rem}
  #numbers .band p{font-size:.8rem}
}
.cp-chg .acts{align-items:center}.cp-chg.done .acts{font-size:12.5px;color:#4b5563}
.copilot.closed .cp-ready{display:none}
@media (max-width:640px){.cp-in{flex-direction:column;align-items:stretch}.cp-in .btn{width:100%}
  .cp-chg{flex-direction:column;align-items:flex-start}.cp-chg .acts{align-self:flex-end}}
/* "Try it as your business" (D-189) */
.yform{display:grid;gap:14px}.yform .opt{color:var(--ink3);font-weight:500}
.yform .err{color:#b42318;font-size:.9rem;min-height:0;margin:0}.yform .err:empty{display:none}
.ychat{display:grid;gap:12px}
.yhead{display:flex;gap:10px;align-items:center}.yhead .dot{width:10px;height:10px;border-radius:50%;background:#16a34a;flex-shrink:0}
.yhead small{display:block;color:var(--ink3);font-size:.85rem}
.ylog{display:grid;gap:8px;max-height:380px;overflow:auto;padding:4px 2px}
.ymsg{padding:9px 13px;border-radius:14px;max-width:85%;font-size:.95rem;line-height:1.45}
.ymsg.ai{background:#fff;border:1px solid var(--line);justify-self:start}
.ymsg.me{background:#e8f1ff;justify-self:end}
.ymsg.note{background:#ecfdf3;color:#05603a;font-size:.85rem;justify-self:center}
.ysend{display:flex;gap:8px}.ysend input{flex:1;min-width:0}
/* Website audit (D-190): the hero's listen button, the "when it answers" row, mid-page starts,
   and the two contact forms as tabs. */
#h-listen.on{border-color:var(--brand,#0b7a53);color:var(--brand,#0b7a53)}
.listen-t{margin-top:-6px}
.aflow{list-style:none;margin:22px auto 6px;padding:0;max-width:880px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:f}
.aflow li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;display:grid;gap:6px;align-content:start}
.aflow li b{font-size:.98rem}.aflow li>span:last-child{color:var(--ink3);font-size:.88rem}.aflow li>:first-child{justify-self:start}
.aflow li:not(:last-child)::after{content:"\2192";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:1.1rem;background:var(--bg,#f6f8fb);line-height:1}
.mid-cta{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:28px}
.talk-tabs{padding:48px 0 0}
.talk-tabs .tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;width:max-content;max-width:100%;margin:0 auto}
.talk-tabs [role=tab]{font:inherit;font-weight:600;border:0;background:none;padding:9px 18px;border-radius:999px;cursor:pointer;color:var(--ink2)}
.talk-tabs [role=tab][aria-selected=true]{background:var(--deep,#0f172a);color:#fff}
.talk-tabs+#walkthrough,.talk-tabs~#contact{padding-top:28px;border-top:0}
@media (max-width:760px){.aflow{grid-template-columns:1fr 1fr}.aflow li:nth-child(2)::after{display:none}}
@media (max-width:420px){.aflow{grid-template-columns:1fr}.aflow li::after{display:none}.talk-tabs .tabs{width:100%}}
/* The missed-call calculator (/tools/missed-call-calculator) */
.calc-out{border-top:1px solid var(--line2);padding-top:14px;text-align:center}
.calc-out p{margin:4px 0}
.calc-out .calc-big{font-size:1.7rem;font-weight:600;color:var(--ink)}
.calc-big b{color:var(--brand)}
/* A comparison table that stacks on a phone: one card per row, each answer with its column's name */
@media (max-width:640px){
  .cmp-stack{min-width:0}
  .cmp-stack thead{display:none}
  .cmp-stack tr,.cmp-stack th,.cmp-stack td{display:block;width:auto}
  .cmp-stack tbody th{background:var(--soft);border-bottom:1px solid var(--line2)}
  .cmp-stack td{display:flex;justify-content:space-between;gap:16px;text-align:right}
  .cmp-stack td::before{content:attr(data-label);color:var(--ink2);text-align:left;font-weight:500}
}