.crumbs{font-size:.875rem; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:28px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--faint)}
.w-hero h1{font-size:clamp(2.5rem, 6vw, 4.25rem); letter-spacing:-0.045em; line-height:1; font-weight:600}
.w-hero h1 .l2{display:block; color:var(--violet-ink)}
.partner-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.partner-row .tag{margin:0}
/* Features */
.feat-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:700px){ .feat-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1080px){ .feat-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
.feat{display:grid; gap:12px; align-content:start; padding:26px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .25s, box-shadow .25s, transform .25s}
.feat:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.feat h3{font-size:1.1875rem; letter-spacing:-0.02em}
.feat p{color:var(--muted); font-size:.9688rem}
.src-note{margin-top:20px; font-size:.8125rem; color:var(--faint)}
.src-note a{color:var(--muted)}

/* Tabbed sets (use cases, method) */
.tabset{margin-top:48px; display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.t-tabs{display:none}
.t-panel{padding:26px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:14px; align-content:start}
.t-panel .num{font-family:var(--mono); font-size:.8125rem; color:var(--teal-ink)}
.t-panel h3{font-size:1.375rem; letter-spacing:-0.03em}
.t-panel p{color:var(--muted); font-size:1.0625rem; max-width:40em}
.t-panel .covers{display:flex; flex-wrap:wrap; gap:6px}
.t-panel .covers span{font-size:.8125rem; font-weight:500; padding:5px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--line)}
.t-panel ul.how{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.t-panel ul.how li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; color:var(--ink); font-size:.9688rem}
.t-panel ul.how .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}
.sample{justify-self:start; max-width:30em; font-size:.9375rem; line-height:1.45; padding:12px 14px; border-radius:14px 14px 14px 4px; background:var(--surface); border:1px solid var(--line)}
.sample .lbl{display:block; font-size:.75rem; font-weight:600; color:var(--muted); margin-bottom:4px}
@media (min-width:960px){
  .tabset{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:stretch}
  .t-tabs{display:grid; gap:4px; align-content:start}
  .t-tab{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; width:100%; text-align:left; font:inherit; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--r); padding:12px 14px; cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
  .t-tab .n{font-family:var(--mono); font-size:.8125rem; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--muted); transition:background-color .2s, color .2s, border-color .2s}
  .t-tab .n .icon{width:18px; height:18px}
  .t-tab b{font-weight:600; font-size:1rem; letter-spacing:-0.01em}
  .t-tab:hover{background:var(--surface); color:var(--ink)}
  .t-tab[aria-selected="true"]{background:var(--raised); border-color:var(--line); box-shadow:var(--shadow); color:var(--ink)}
  .t-tab[aria-selected="true"] .n{background:var(--btn-bg); color:var(--btn-fg); border-color:transparent}
  .t-panel{padding:44px}
  .t-panel h3{font-size:2rem}
  .t-panel:not(.on){display:none}
  .t-panel.on{animation:fade .4s ease both}
}
/* Integrations */
.int-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:960px){ .int-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
.int-main{padding:30px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:16px; align-content:start}
.int-main .logos{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.int-main .logos .plus{color:var(--faint); font-weight:600}
.int-main .zc img{height:30px}
.int-main .zv img{height:28px}
.int-main h3{font-size:1.5rem; letter-spacing:-0.03em}
.int-main ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.int-main li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:.9688rem}
.int-main li .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}
.int-side{padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:14px; align-content:start}
.int-side h3{font-size:1.25rem; letter-spacing:-0.025em}
.int-side p{color:var(--muted); font-size:.9688rem}
.chips-lg{display:flex; flex-wrap:wrap; gap:8px}
.chips-lg span{font-size:.875rem; font-weight:500; padding:7px 12px; border-radius:999px; background:var(--raised); border:1px solid var(--line)}

/* FAQ + CTA */
.faq{margin-top:40px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-size:1.125rem; font-weight:600; letter-spacing:-0.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); transition:transform .25s, background-color .2s}
.faq details[open] summary .pm{transform:rotate(45deg); background:var(--surface)}
.faq details p{color:var(--muted); padding:0 0 22px; max-width:46em}
.faq-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:24px}
@media (min-width:960px){ .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px} .faq{margin-top:0} }
.cta-panel.slim{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .cta-panel.slim{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end} }
/* Cloud Telephony page additions: same tokens and components as the approved pages */
:root{ --call-bg:#F6F4FC; --call-ink:#16122B; --call-muted:#6B6785; --call-line:#E3DEF0; --call-card:#FFFFFF; --call-head:#2A2160; }

/* Call journey console */
.console-top .seg{flex:none}
.cj-body{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:16px 16px 0}
@media (min-width:600px){ .cj-body{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:14px; padding:18px 18px 4px} }
.callscreen{background:var(--call-bg); color:var(--call-ink); border-radius:22px; overflow:hidden; border:6px solid #0B0918; box-shadow:0 0 0 1px var(--console-line); display:flex; flex-direction:column; height:404px}
.cs-top{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; background:var(--call-head); color:#FFFFFF; font-size:.75rem; font-weight:600}
.cs-top .cs-line{font-family:var(--mono); font-size:.625rem; font-weight:500; opacity:.8}
.cs-caller{display:grid; justify-items:center; text-align:center; gap:2px; padding:18px 12px 12px}
.cs-av{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:1rem; color:#FFFFFF; background:linear-gradient(135deg, #40328E, #25BBB5); margin-bottom:6px; position:relative}
.cs-av.ring::before,.cs-av.ring::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid #25BBB5; animation:csring 1.4s ease-out infinite}
.cs-av.ring::after{animation-delay:.7s}
@keyframes csring{from{opacity:.8; transform:scale(.9)} to{opacity:0; transform:scale(1.35)}}
.cs-caller b{font-size:.9375rem; line-height:1.25}
.cs-caller small{font-family:var(--mono); font-size:.6875rem; color:var(--call-muted)}
.cs-status{margin-top:8px; font-size:.6875rem; font-weight:600; color:#0B7A75; background:#D9F3F1; border-radius:999px; padding:3px 10px}
.cs-status.warn{color:#8A3B12; background:#FBE7DA}
.cs-panel{flex:1; padding:4px 12px 12px; display:flex; flex-direction:column; justify-content:flex-start; gap:7px; overflow:hidden}
.cs-panel > *{animation:pop .32s cubic-bezier(.2,.7,.2,1) both}
.cs-card{background:var(--call-card); border:1px solid var(--call-line); border-radius:12px; padding:9px 11px; font-size:.75rem; line-height:1.4}
.cs-card .h{display:flex; align-items:center; gap:6px; font-size:.625rem; font-weight:600; color:var(--call-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px}
.cs-card .h img{height:14px; width:auto}
.cs-card b{display:block; font-size:.8125rem}
.cs-card dl{margin:4px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px}
.cs-card dt{color:var(--call-muted)}
.cs-card dd{margin:0; font-weight:500}
.cs-key{display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:9px; background:var(--call-card); border:1px solid var(--call-line); border-radius:10px; padding:6px 9px; font-size:.75rem; font-weight:500}
.cs-key .k{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--mono); font-size:.75rem; background:#F0EDFB; color:#40328E}
.cs-key.pick{border-color:#40328E; box-shadow:0 0 0 2px rgba(64,50,142,.12)}
.cs-key.pick .k{background:#40328E; color:#FFFFFF}
.cs-key em{font-style:normal; font-size:.625rem; font-weight:600; color:#40328E}
.cs-agents{display:flex; gap:6px; flex-wrap:wrap}
.cs-agent{display:flex; align-items:center; gap:6px; background:var(--call-card); border:1px solid var(--call-line); border-radius:999px; padding:4px 9px 4px 4px; font-size:.6875rem; font-weight:500}
.cs-agent i{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:.5625rem; font-weight:700; background:#ECE8F7; color:#40328E}
.cs-agent.ringing{border-color:#25BBB5}
.cs-agent.ringing i{background:#25BBB5; color:#FFFFFF; animation:blink 1s infinite}
.cs-agent.busy{opacity:.55}
.cs-bar{height:6px; border-radius:6px; background:#ECE8F7; overflow:hidden}
.cs-bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg, #40328E, #25BBB5); transform-origin:left; animation:drain 2.2s linear both}
@keyframes drain{from{transform:scaleX(1)} to{transform:scaleX(.04)}}
.cs-note{font-size:.6875rem; color:var(--call-muted); text-align:center}
.cs-tag{display:inline-flex; align-items:center; gap:5px; font-size:.625rem; font-weight:600; padding:2px 8px; border-radius:999px; background:#ECE8F7; color:#40328E}
.cs-tag.ok{background:#D9F3F1; color:#0B7A75}
.cs-tag.miss{background:#FBE7DA; color:#8A3B12}
@keyframes blink{0%,100%{opacity:.35} 50%{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(6px) scale(.98)} to{opacity:1; transform:none}}
.cj-flow{padding:6px 0 8px}
.cj-flow .rail{left:19px; top:28px; bottom:28px}
.cj-flow .step{padding:7px 0; gap:12px}
.cj-flow .step-detail{font-size:.8125rem}
.kind{display:inline-block; margin-left:6px; font-family:var(--mono); font-size:.5938rem; letter-spacing:.02em; padding:1px 6px; border-radius:999px; border:1px solid rgba(66,214,207,.4); color:var(--console-teal); vertical-align:1px}
.kind.c{border:1px dashed rgba(174,159,247,.6); color:var(--console-violet)}
.cj-foot{flex-wrap:wrap}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.75rem}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend .kind{margin:0}
@media (max-width:599px){ .callscreen{height:330px} .cs-caller{padding:12px 12px 8px} .cs-av{width:44px; height:44px} .cj-flow .step:not([data-state="running"]) .step-detail{display:none} }

/* Light-surface kind tags */
.k-tag{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.6875rem; padding:3px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--teal) 45%, var(--line)); color:var(--teal-ink); background:var(--teal-soft); white-space:nowrap}
.k-tag.c{border:1px dashed color-mix(in srgb, var(--violet) 55%, var(--line)); color:var(--violet-ink); background:var(--violet-soft)}

/* Missed-call scenario */
.mc-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-top:48px; align-items:start}
@media (min-width:1000px){ .mc-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px} }
.mlog{background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.mlog-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.mlog-top b{font-size:.9375rem; display:flex; align-items:center; gap:8px}
.mlog-top b img{height:26px; width:auto; background:#FFFFFF; border:1px solid var(--line); border-radius:7px; padding:3px 6px; box-sizing:border-box}
.mtabs{display:flex; gap:2px; padding:3px; background:var(--surface); border:1px solid var(--line); border-radius:11px; max-width:100%; overflow-x:auto; scrollbar-width:none}
.mtabs::-webkit-scrollbar{display:none}
.mtabs button{font:inherit; font-size:.8125rem; font-weight:500; color:var(--muted); background:transparent; border:0; padding:6px 10px; border-radius:8px; cursor:pointer; white-space:nowrap}
.mtabs button[aria-selected="true"]{background:var(--raised); color:var(--ink); box-shadow:0 1px 2px rgba(22,18,43,.08)}
.mtabs .c{font-family:var(--mono); font-size:.6875rem; margin-left:4px; color:var(--faint)}
.mrows{list-style:none; margin:0; padding:0}
.mrow{display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); transition:background-color .3s}
.mrow:last-child{border-bottom:0}
.mrow[hidden]{display:none}
.mrow .ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:#FBE7DA; color:#8A3B12}
.mrow .ic .icon{width:18px; height:18px}
.mrow.ret .ic{background:var(--teal-soft); color:var(--teal-ink)}
.mrow b{display:block; font-size:.9688rem; font-weight:600; line-height:1.3}
.mrow .meta{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.8125rem; color:var(--muted); margin-top:2px}
.mrow .meta .vm{color:var(--violet-ink); font-weight:500}
.mrow .act{display:flex; align-items:center}
.cb{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:.8125rem; font-weight:600; color:var(--btn-fg, #FFFFFF); background:var(--btn-bg, #40328E); border:0; border-radius:9px; padding:8px 12px; cursor:pointer; white-space:nowrap; transition:opacity .2s}
.cb .icon{width:15px; height:15px}
.cb[disabled]{opacity:.65; cursor:default}
.done-tag{display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; color:var(--teal-ink); background:var(--teal-soft); border-radius:999px; padding:4px 10px; white-space:nowrap}
.done-tag .icon{width:13px; height:13px}
.mrow.flash{background:var(--teal-soft)}
.mlog-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:var(--surface); font-size:.8125rem; color:var(--muted)}
.mlog-foot button{font:inherit; font-size:.8125rem; font-weight:600; color:var(--ink); background:var(--raised); border:1px solid var(--line); border-radius:8px; padding:6px 10px; cursor:pointer}
.mlog-empty{padding:28px 16px; text-align:center; color:var(--muted); font-size:.9375rem}
@media (max-width:520px){ .mrow{grid-template-columns:34px minmax(0,1fr); padding:14px} .mrow .ic{width:34px; height:34px} .mrow .act{grid-column:2} }
.mc-steps{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.mc-step{display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:20px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg)}
.mc-step .n{font-family:var(--mono); font-size:.8125rem; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--teal-ink)}
.mc-step h3{font-size:1.125rem; letter-spacing:-0.02em; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.mc-step p{color:var(--muted); font-size:.9375rem; margin-top:6px}

/* Capabilities plan notes */
.feat .plan{font-size:.8125rem; color:var(--faint); border-top:1px solid var(--line); padding-top:10px; margin-top:2px}
.plans{margin-top:56px; display:grid; gap:16px}
.plans h3{font-size:1.375rem; letter-spacing:-0.03em}
.plans > p{color:var(--muted); max-width:44em}
.ptable-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--raised)}
.ptable{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:320px}
.ptable th,.ptable td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.ptable thead th{font-size:.8125rem; font-weight:600; color:var(--muted); background:var(--surface)}
.ptable thead th small{display:block; font-weight:400; font-size:.75rem; color:var(--faint)}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody th{font-weight:500}
.ptable td{text-align:center; width:20%}
.ptable thead th:not(:first-child){text-align:center}
.ptable .y{width:18px; height:18px; color:var(--teal-ink)}
.ptable .n{color:var(--faint)}
.ptable .p{font-size:.75rem; font-weight:600; color:var(--violet-ink)}
@media (max-width:560px){ .ptable{font-size:.8125rem} .ptable th,.ptable td{padding:10px 8px} .ptable thead th small{display:none} }

/* Native vs configured */
.nc{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px}
@media (min-width:900px){ .nc{grid-template-columns:repeat(2, minmax(0,1fr))} }
.nc article{padding:28px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--raised); display:grid; gap:14px; align-content:start}
.nc article.cfg{background:var(--surface); border-style:dashed; border-color:var(--line-strong)}
.nc h3{font-size:1.25rem; letter-spacing:-0.025em}
.nc ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.nc li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:.9688rem}
.nc li .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}
.nc .cfg li .icon{color:var(--violet-ink)}
.nc .req{font-size:.8125rem; color:var(--faint)}
@media (prefers-reduced-motion: reduce){ .cs-panel > *, .cs-av.ring::before, .cs-av.ring::after, .cs-bar i, .cs-agent.ringing i{animation:none} }