/* Channel and integration pages: /ai-voice /whatsapp /sms /email /integrations */

/* Breadcrumbs (same look as pages.css) */
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 28px;padding:0;list-style:none;font-size:.875rem;color:var(--ink-3)}
.crumbs li{display:inline-flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"/";color:var(--line-2)}
.crumbs a{color:var(--ink-3);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.crumbs [aria-current]{color:var(--ink-2);font-weight:560}

/* Hero */
.ch-hero{padding:clamp(20px,3vw,48px) 0 clamp(8px,2vw,24px)}
.ch-hero-grid{display:grid;gap:clamp(36px,5vw,88px);align-items:center}
.ch-hero h1{font-size:clamp(2.5rem,1.25rem + 3.3vw,4.75rem);line-height:1.04}
.ch-hero h1 .kick{display:flex;align-items:flex-start;gap:9px;margin-bottom:22px;font-size:.8125rem;line-height:1.5;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ch-hero h1 .kick::before{content:"";flex:none;margin-top:.48em;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(10,190,236,.16)}
/* Jakarta's comma and period carry a wide left bearing that opens a gap at heading sizes */
.ch-pk{margin-left:-.06em}
.ch-hero .lead{margin-top:24px;max-width:36em}
.ch-hero .actions{margin-top:34px}
.ch-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none;font-size:.9375rem;color:var(--ink-2);font-weight:560}
.ch-facts li{display:inline-flex;align-items:center;gap:8px}
.ch-facts svg{width:16px;height:16px;color:var(--ok)}
.ch-pic{max-width:480px;width:100%;justify-self:center}
.ch-pic .pic{box-shadow:var(--sh-2)}
@media (min-width:1024px){
  .ch-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .ch-pic{justify-self:end}
}
@media (min-width:1800px){.ch-pic{max-width:540px}.ch-hero h1{font-size:5.125rem}}
.ch-nw{white-space:nowrap}

/* What it does */
.does{display:grid;gap:16px}
@media (min-width:640px){.does{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.does{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.does-c{padding:26px 24px 28px}
/* Subgrid lines up titles and bodies across a row when one title wraps */
@media (min-width:640px){.does-c{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}}
.does-c .ico{width:42px;height:42px;border-radius:12px;margin-bottom:22px}
.does-c .ico svg{width:20px;height:20px}
.does-c h3{font-size:1.1875rem;letter-spacing:-.012em}
.does-c p{margin:10px 0 0;color:var(--ink-3);font-size:.9375rem;line-height:1.6}

/* Usage frame */
.usage{display:grid;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(24px,4.5vw,64px)}
@media (min-width:960px){.usage{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.usage h2{font-size:clamp(1.875rem,1.1rem + 1.9vw,3rem);margin-top:14px}
.usage .def{margin:22px 0 0;font-size:1.0625rem;line-height:1.6;color:var(--ink-2)}
.usage .def b{color:var(--ink);font-weight:650}
.usage .over{display:block;width:fit-content;margin:20px 0 0;padding:10px 16px;border-radius:var(--r-sm);background:var(--tint);color:var(--ink-2);font-size:.9375rem}
.usage .over b{color:var(--navy);font-weight:700}
.pill-mute{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#eef1f6;color:var(--ink-3);font-size:.8125rem;font-weight:650}

.viz{background:var(--tint);border-radius:var(--r);padding:clamp(16px,2.4vw,28px);display:grid;gap:12px}
.viz-head{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lg-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff}
.lg-ico svg{width:16px;height:16px}

/* Voice ledger */
.lg-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.lg-name{font-weight:620;color:var(--ink);font-size:.9375rem}
.lg-steps{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lg-steps li{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:.8125rem;font-weight:620}
.lg-steps svg{width:14px;height:14px}
.lg-row .pill-ok,.lg-row .pill-mute{grid-column:1/-1;justify-self:start;font-size:.875rem;padding:6px 12px}
.lg-no{box-shadow:none;background:rgba(255,255,255,.6)}
.lg-no .lg-ico{background:#dfe4ee;color:var(--ink-3)}
.lg-no .lg-name{color:var(--ink-3)}
.lg-no .lg-steps li{background:#eef1f6;color:var(--ink-3)}
@media (min-width:560px){
  .lg-row{grid-template-columns:auto minmax(0,1fr) auto}
  .lg-row .pill-ok,.lg-row .pill-mute{grid-column:auto;grid-row:1;grid-column-start:3}
  .lg-steps{grid-column:2/-1}
}

/* 24-hour chat track */
.tk-pairs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:6px 0 0;padding:0;list-style:none}
.tk-pairs li{display:grid;gap:6px;justify-items:center;padding:12px 4px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.tk-pairs span{font-size:.8125rem;font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums}
.b-lead,.b-ai{display:block;width:min(34px,80%);height:12px;border-radius:6px}
.b-lead{background:var(--navy);justify-self:end;margin-right:10%}
.b-ai{background:#e3eaf8;border:1.5px solid #a9bce0;justify-self:start;margin-left:10%}
.tk-rail{display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.tk-rail i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line-2),var(--navy))}
.tk-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.8125rem;color:var(--ink-3);font-weight:560}
.tk-legend span{display:inline-flex;align-items:center;gap:7px}
.tk-legend i{width:18px;height:8px;margin:0}
.tk-legend .tk-12{margin-left:auto;color:var(--ink-2);font-weight:650}
.tk-end{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);font-weight:620;font-size:.9375rem;color:var(--ink)}
.tk-end .lg-ico{background:var(--ok-bg);color:var(--ok);width:30px;height:30px}

/* Email thread */
.th-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.th-list{display:grid;gap:8px;margin:0;padding:0 18px 0 0;list-style:none;border-right:2px solid var(--line-2)}
.th-list li{padding:11px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.th-list b{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:2px}
.th-list .th-ai{border-color:#c9d6ee}
.th-list .th-ai b{color:var(--accent)}
.th-list .th-lead{margin-right:28px}
.th-list .th-ai{margin-left:28px}
.th-brace{font-weight:700;color:var(--navy);font-size:.9375rem;white-space:nowrap}
/* Phones: the side brace squeezed the bubbles to ~150px; the total moves under the thread instead. */
@media (max-width:559px){
  .th-wrap{grid-template-columns:minmax(0,1fr);gap:12px}
  .th-list{padding:0 0 14px;border-right:0;border-bottom:2px solid var(--line-2)}
  .th-list .th-lead{margin-right:20px}
  .th-list .th-ai{margin-left:20px}
  .th-brace{justify-self:end}
}

/* Pricing */
.plans{display:grid;gap:18px}
.plan-tabs{justify-content:center}
.plan-sub{margin:0 0 18px;text-align:center;color:var(--ink-3);font-size:.9375rem}
.tiers{display:grid;gap:14px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.tiers{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.tier{display:flex;flex-direction:column;padding:24px 24px 22px}
.t-vol{font-size:.9375rem;color:var(--ink-3);font-weight:560}
.t-vol b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.t-price{margin-top:14px;display:flex;align-items:baseline;gap:2px}
.t-price b{font-size:clamp(2.25rem,1.6rem + 1.2vw,2.875rem);line-height:1;font-weight:620;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.t-price small{color:var(--ink-3);font-size:.9375rem}
.t-setup{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:.875rem;color:var(--ink-3)}
.plan-foot{margin-top:10px}
/* Phones: each tier is one compact row (volume and setup left, price right) so all four fit on a screen */
@media (max-width:639px){
  .tier{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:16px 20px}
  .t-vol{grid-area:1/1}
  .t-setup{grid-area:2/1;margin-top:4px;padding-top:0;border-top:0;font-size:.8125rem}
  .t-price{grid-area:1/2/3/3;margin-top:0}
  .t-price b{font-size:2rem}
}
#faq .faq-grid .sec-head{margin-bottom:0}
.plan-foot ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;color:var(--ink-2);font-size:.9375rem}
.plan-foot b{color:var(--ink)}

.more-link{margin:22px 0 0;text-align:center}

/* Integrations */
.int-hero{text-align:center;padding-bottom:clamp(40px,5vw,80px)}
.int-copy{max-width:900px;margin:0 auto}
.int-hero .crumbs ol{justify-content:center}
/* Block, not flex: a two-line kicker keeps its dot beside the first line, not at the far left */
.int-hero h1 .kick{display:block;text-align:center}
.int-hero h1 .kick::before{display:inline-block;vertical-align:.12em;margin:0 9px 0 0}
.int-hero .lead{margin-inline:auto}
.int-hero .actions{justify-content:center}
.hub-pic{margin-top:clamp(36px,5vw,72px)}
.hub-w{display:none;max-width:1160px;margin:0 auto}
.hub-n{max-width:440px;margin:0 auto}
/* Wide hub only from 960px: at 768 its 15px labels shrank to ~9px */
@media (min-width:960px){.hub-w{display:block}.hub-n{display:none}}
/* A story comet has no dash until .play, so while the hub waits to play it would draw as a solid line */
.hub-pic .ab .a-comet{opacity:0}
/* The page replays this hub, so its pulses restart with the story (and fade out with it) instead of running on
   underneath: a replay never adds the story's light to pulses already lit */
.hub-pic .ab-flow{animation-name:none}
.hub-pic.play .ab-flow{animation-name:ab-flow}

.stack{display:grid;margin:0;padding:8px clamp(18px,3vw,40px);list-style:none}
.grp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;align-items:center;padding:22px 0}
.grp+.grp{border-top:1px solid var(--line)}
.grp h3{font-size:1.125rem}
.grp-tools{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.grp-tools li{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:var(--page);border:1px solid var(--line);font-weight:600;font-size:.9375rem;color:var(--ink)}
.grp p{grid-column:1/-1;margin:0;color:var(--ink-3);font-size:.9375rem;text-wrap:pretty}
@media (min-width:900px){
  .grp{grid-template-columns:auto 170px minmax(0,1fr) minmax(0,.9fr);gap:20px}
  .grp-tools,.grp p{grid-column:auto}
}

.launch{display:grid;gap:28px;align-items:center;padding:clamp(24px,4.5vw,64px)}
@media (min-width:960px){.launch{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.launch h2{font-size:clamp(1.875rem,1.1rem + 1.9vw,3rem);margin-top:14px}
.launch .lead{margin-top:18px}
.launch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
/* Two columns split "Voice training" and "Calendar sync" onto two lines on phones. */
@media (max-width:439px){.launch-list{grid-template-columns:1fr;gap:10px}.launch-list li{min-height:52px}}
.launch-list li{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;border-radius:14px;background:var(--tint);font-weight:620;color:var(--ink)}
.launch-list svg{flex:none;width:18px;height:18px;color:var(--ok)}