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

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

  --brand:#0b8f5f; --brand-d:#07714b; --brand-l:#e3f8ee;
  --blue:#2563eb; --blue-l:#e6edfe;
  --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}
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: kept, ring, book, ringtaker, 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)}
  28%,42%{transform:translateY(-1.3em);animation-timing-function:cubic-bezier(.3,.9,.3,1.2)}
  54%,68%{transform:translateY(-2.6em);animation-timing-function:cubic-bezier(.3,.9,.3,1.2)}
  82%,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}
.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);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:11px;z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 15px 11px 11px;
  box-shadow:0 18px 40px -16px rgba(10,16,32,.35),0 2px 6px rgba(10,16,32,.06);
  font-size:.8rem;line-height:1.35;max-width:260px;color:var(--ink)}
.shot-chip .ic{width:34px;height:34px;border-radius:10px;flex:none}
.shot-chip b{display:block;font-weight:650}
.shot-chip small{display:block;color:var(--ink3);font-size:.72rem}
.shot-chip.mail{left:-18px;bottom:-24px}
.shot-chip.answered{right:-18px;top:-20px;padding:8px 13px 8px 8px}
.shot-chip.answered .ic{width:28px;height:28px;border-radius:8px}
#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{opacity:1;pointer-events:auto}
.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{left:10px}.shot-chip.answered{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}}

/* ---------- 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);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}
}
@media (max-width:760px){
  section{padding:58px 0}
  .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}
  .nav-cta .btn-ghost{display:none}
  .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:#7f8da6;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)}

/* 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)}
.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}
.now .seg{background:rgba(255,255,255,.08);margin-top:16px}
.now .seg button{color:#cfd9e8}
.now .seg button.on{background:#fff;color:var(--ink)}
.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)}
.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-x: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:56px;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 27px,#f3f5f9 27px 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.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}}

.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}
.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? */
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.label-row a{font-weight:500;font-size:.85rem}

/* Ringtaker 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 dashboard on each device (D-147) ------------------------------------------------
   Desktop: everything at once, in two columns. iPad: one section at a time from a side rail.
   Phone: an app, with its own top bar and a tab bar at the bottom. */
.app-top,.tabbar{display:none}
.dash-cols,.dcol{display:contents}
@media (min-width:1100px){
  .app-page .dash{max-width:1240px}
  .dash-cols{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:16px;align-items:start}
  .dcol{display:grid;gap:16px;min-width:0}
}
@media (max-width:1099px){
  .app-page .nav{display:none}
  .dash [data-sec]:not(.on-tab){display:none !important}
  .app-top{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;
    margin:-18px -14px 4px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)}
  .app-mark{display:flex}
  .app-mark svg,.app-mark .mark{width:34px;height:34px}
  .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}
  .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{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}
}
/* Phone */
@media (max-width:699px){
  .app-page .dash{padding:18px 14px calc(84px + env(safe-area-inset-bottom))}
  .tabbar{left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .app-page .box{padding:16px;border-radius:16px}
  .now{border-radius:18px}
}
/* iPad and other tablets: a side rail, roomier cards */
@media (min-width:700px) and (max-width:1099px){
  .app-page .dash{max-width:none;margin:0;padding:24px 28px 40px 116px}
  .app-top{margin:-24px -28px 8px -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)}
  .dgrid{grid-template-columns:1fr 1fr}
}