/* Shared homepage-led theme, loaded last on every internal and public page. */
:root{
 --brand-start:#1177FF;--brand-end:#6881F1;
 --brand-gradient:linear-gradient(90deg,var(--brand-start) 0%,var(--brand-end) 100%);
 --brand-soft:#edf4ff;--brand-line:#dce6fa;
}
html body[data-page]{
 --blue:var(--brand-start);--blue-dark:#0d60ce;--violet:var(--brand-end);
 --n2-blue:var(--brand-start);--product-blue:var(--brand-start);--p9-blue:var(--brand-start);--sector-blue:var(--brand-start);
 --ink:#262626;--n2-ink:#262626;--product-ink:#262626;--p9-ink:#262626;--sector-ink:#262626;--ss-ink:#262626;--qa-ink:#262626;
 --muted:#667185;--n2-muted:#667185;--product-muted:#667185;--p9-muted:#667185;--sector-muted:#667185;--ss-muted:#667185;--qa-muted:#667185;
 --bg-soft:#f5f5f8;--n2-soft:#f5f5f8;--product-soft:#f5f5f8;--p9-soft:#f5f5f8;--sector-soft:#f5f5f8;
 --font:Arial,'PingFang SC','Microsoft YaHei',sans-serif;
 color:var(--ink);font-family:var(--font);
}
/* Keep the home page's dark idle actions; use the exact brand pair on interaction. */
html body[data-page] main .btn.btn-primary{
 background:#16171c;color:#fff;border-color:transparent;border-radius:999px;
 box-shadow:0 8px 24px #16171c12;transition:background .2s,box-shadow .2s,transform .2s;
}
html body[data-page] main .btn.btn-primary:not(:disabled):is(:hover,:focus-visible){
 background:var(--brand-gradient);color:#fff;border-color:transparent;filter:none;box-shadow:0 8px 24px #1177ff26;
}
html body[data-page] main .btn.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
html body[data-page] main :is(.btn-outline,.btn-ghost,.btn-light){border-radius:999px}
html body[data-page] main :is(.btn-outline,.btn-ghost):hover{background:var(--brand-soft);color:var(--brand-start);border-color:var(--brand-line)}
html body[data-page] .cta-band{background:var(--brand-gradient)}
html body[data-page] .cta-band :is(h2,p){color:#fff}
html body[data-page] .cta-band .btn-light{background:#fff;color:#262626;border-color:#fff}
/* All inner pages share the homepage's calm, light hero surface. */
html body[data-page]:not([data-home-narrative]) .inner-hero{
 background:#f5f5f8 url('../img/hero-background.png') center top/cover no-repeat;
}
html body[data-page]:not([data-home-narrative]) .inner-hero h1{
 color:#262626;font-family:var(--font);font-size:clamp(32px,3.4vw,48px);font-weight:400;line-height:1.2;letter-spacing:-.045em;
}
html body[data-page]:not([data-home-narrative]) .inner-hero .hero-sub{color:#667185;font-size:16px;line-height:1.8}
html body[data-page]:not([data-home-narrative]) .inner-hero .eyebrow{
 display:inline-flex;align-items:center;width:fit-content;color:#495057;background:#fff;
 border:1px solid #e6e7e9;box-shadow:0 0 0 3px #f9fafc;border-radius:999px;padding:4px 12px;letter-spacing:.02em;
}
html body[data-page] main :is(.card,.compare-card,.faq-item){border-radius:18px}
html body[data-page] main :is(.card-icon,.channel-symbol){color:var(--brand-start);background:var(--brand-soft);border-color:var(--brand-line)}
html body[data-page] main :is(.step-num,.play-btn,.db-play,.card-flag-chip){background:var(--brand-gradient);color:#fff}
html body[data-page] main :is(input,select,textarea):focus{outline:2px solid var(--brand-start);outline-offset:2px;border-color:var(--brand-start);box-shadow:0 0 0 4px #1177ff12}
html body[data-page] main :is(a,button,summary):focus-visible{outline-color:var(--brand-start)}
html body[data-page] main :is(.narrative-tabs,.industry-tabs,.outcome-steps) button:focus-visible{outline-color:var(--brand-start)}
/* Preserve home motion while using consistent gradient endpoints. */
html body[data-page] :is(.hero-connect,.final-cta-primary,.trust-cta)::before,
html body[data-page] #industries .card-link::before,
html body[data-page] .inner-hero .btn-primary::before{background:var(--brand-gradient)}
html body[data-page] .figma-header .header-actions .btn:is(:hover,:focus-visible){background:var(--brand-gradient)}
html body[data-page] .figma-header .header-actions .btn-primary::before{background:conic-gradient(from var(--demo-angle),var(--brand-start),var(--brand-end),var(--brand-start))}
html body[data-page] .figma-header .header-actions .btn-primary::after{background:var(--brand-gradient)}
html body[data-page] .figma-header .dropdown-link[aria-current="page"]{box-shadow:none}
@media(prefers-reduced-motion:reduce){html body[data-page] main .btn.btn-primary{transition:none}}
/* Dropdown states: blue text over a 10% opacity brand gradient. */
html body[data-page] .site-header.figma-header .dropdown-link:is(:hover,:focus-visible,[aria-current="page"]),
html body[data-page] .site-header.figma-header .language-option:is(:hover,:focus-visible,.active){
 background:linear-gradient(135deg,rgba(17,119,255,.1),rgba(104,129,241,.1));color:var(--brand-start);box-shadow:none;
}
html body[data-page] .site-header.figma-header .dropdown-link:is(:hover,:focus-visible,[aria-current="page"]) small{color:var(--brand-start)}
/* Interaction audit: use the same brand states across all page families. */
html body[data-page] :is(.site-header,.site-footer) :is(a,button,select):focus-visible{outline-color:var(--brand-start)}
html body[data-page] main :is(a,button,summary,pre,[tabindex]):focus-visible{outline-color:var(--brand-start)}
html body[data-page] .site-header.figma-header .language-option:focus-visible{outline-color:var(--brand-start)}
html body[data-page] .ss-selector-controls button:is(:hover,:focus-visible,[aria-selected="true"]),
html body[data-page] #industries .industry-tabs button:is(:hover,:focus-visible,[aria-selected="true"]){background:var(--brand-gradient);color:#fff;border-color:transparent;box-shadow:none}
html body[data-page] #oneConversation .outcome-steps>button:is(:hover,:focus-visible,[aria-selected="true"]) .outcome-step-number{background:var(--brand-gradient);color:#fff}
html body[data-page] #oneConversation .outcome-steps>button:is(:hover,:focus-visible,[aria-selected="true"]) :is(strong,small){color:var(--brand-start)}
html body[data-page] #oneConversation .outcome-steps>button::after{background:var(--brand-gradient)}
html body[data-page] #moments .narrative-tabs button:is(:hover,:focus-visible,[aria-selected="true"]) .moment-tab-copy>span{color:#131313}
html body[data-page] #moments .narrative-tabs button[aria-selected="true"]::after{border-color:#131313;background:linear-gradient(to bottom,#fff 0 var(--moment-progress,0%),#131313 var(--moment-progress,0%) 100%)}
html body[data-page] .ss-links a:is(:hover,:focus-visible) h3{color:var(--brand-start)}
html body[data-page] .presence-controls button:not(:disabled):is(:hover,:focus-visible){background:var(--brand-gradient);border-color:transparent;color:#fff}
html body[data-page] main .play-btn:is(:hover,:focus-visible){background:var(--brand-gradient)}
/* Industry tabs: selected state matches the dark action buttons. */
html body[data-page] #industries .industry-tabs button[aria-selected="true"]{background:#16171c;color:#fff;border-color:transparent;box-shadow:none}

/* Contact form: reference card styling adapted to V3's additional context. */
html body[data-page="contact"] #form .lead-form{
 padding:32px 48px;gap:14px 16px;align-content:start;background:#f9fafb;
}
html body[data-page="contact"] #form .lead-form [data-public-form-notice]{
 margin:0;padding:12px 14px;border:1px solid #eaecf0;border-radius:8px;
 background:#fff;color:#667185;font-size:12px;line-height:1.65;
}
html body[data-page="contact"] #form .lead-form [data-assessment-notice]{
 margin:0;padding:0 0 20px;border-bottom:1px solid #e5e7eb;
 color:#495057;font-size:14px;line-height:1.75;
}
html body[data-page="contact"] #form .lead-form label,
html body[data-page="contact"] #form .volume-picker{gap:4px;font-weight:400}
html body[data-page="contact"] #form .lead-form :is(input:not([type="hidden"]),select,textarea),
html body[data-page="contact"] #form .volume-trigger{
 background:#fff;border:1px solid #dfe3eb;border-radius:8px;
 color:#262626;font-size:12px;font-weight:400;box-shadow:0 1px 2px #00000008;
}
html body[data-page="contact"] #form .lead-form :is(input:not([type="hidden"]),select),
html body[data-page="contact"] #form .volume-trigger{height:48px}
html body[data-page="contact"] #form .lead-form textarea{height:112px;min-height:112px;line-height:1.7}
html body[data-page="contact"] #form .lead-form :is(input,textarea)::placeholder{color:#8a909c;opacity:1}
html body[data-page="contact"] #form .lead-form :is(input,select,textarea):focus,
html body[data-page="contact"] #form .volume-trigger:focus-visible{
 outline:none;border-color:var(--brand-start);box-shadow:0 0 0 3px #1177ff1a;
}
html body[data-page="contact"] #form .lead-form [aria-invalid="true"]{border-color:#d92d20}
html body[data-page="contact"] #form .lead-form button[type="submit"]{
 min-height:48px;border-radius:8px;background:#16171c;color:#fff;box-shadow:none;
}
html body[data-page="contact"] #form .lead-form button[type="submit"]:disabled{
 opacity:1;cursor:not-allowed;transform:none;background:#16171c;
}
html body[data-page="contact"] #form .lead-form button[type="submit"]:not(:disabled):hover{background:var(--brand-gradient)}
html body[data-page="contact"] #form .volume-option:is(.active,:hover,:focus-visible){background:linear-gradient(90deg,#1177ff1a,#6881f11a);color:var(--brand-start)}
@media(max-width:900px){html body[data-page="contact"] #form .lead-form{padding:28px;gap:14px 16px}}
@media(max-width:700px){html body[data-page="contact"] #form .lead-form{padding:24px}}

/* Navigation group captions: black at 35% opacity. */
html body[data-page] .site-header.figma-header .mega-column h2{color:rgba(0,0,0,.35)}

/* Shared CTA sound-wave ornament, matching the header Book a Demo. */
html body[data-page] main .cta-voice{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;background:none;border:0;box-shadow:none}
html body[data-page] main .cta-voice img{display:block;width:18px;height:18px;transform:rotate(-90deg);opacity:1}

/* Hide the lifecycle example tags while retaining their markup and copy. */
html body[data-page] #moments .v3-moment-context{display:none}

/* Keep source content while hiding the requested supplementary lines. */
html body[data-page] .site-footer.footer-ref>nav.container,
html body[data-page] #customerCases .v3-case-note{display:none}

/* Extend the Voice Agent hero behind the floating navigation. */
html body[data-page="ai-voice-agent"] .inner-hero{margin-top:-80px;padding-top:144px}
@media(max-width:1024px){html body[data-page="ai-voice-agent"] .inner-hero{padding-top:130px}}
@media(max-width:760px){html body[data-page="ai-voice-agent"] .inner-hero{padding-top:124px}}
@media(max-width:560px){html body[data-page="ai-voice-agent"] .inner-hero{margin-top:-68px;padding-top:112px}}
/* Shared closing CTA: Figma 724:5003 dotted artwork follows each band's height. */
html body[data-page] main .cta-band{position:relative;isolation:isolate}
html body[data-page] main .cta-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../img/voice-examples/background-724-5003.svg') center/100% 100% no-repeat}

/* Standard inner heroes continue behind the shared floating navigation.
   Add the header height to the existing content inset to keep text in place. */
html body[data-page]:not([data-solution-story]):not(.home-style-inner):not([data-page="contact"]) main>.inner-hero:not(#voiceHero){
 --hero-header-height:80px;
 --hero-content-inset:96px;
 margin-top:calc(-1 * var(--hero-header-height));
 padding-top:calc(var(--hero-content-inset) + var(--hero-header-height));
}
html body[data-page][data-product-visual]:not([data-solution-story]):not(.home-style-inner):not([data-page="contact"]) main>.inner-hero:not(#voiceHero){--hero-content-inset:64px}
@media(max-width:1024px){
 html body[data-page][data-product-visual]:not([data-solution-story]):not(.home-style-inner):not([data-page="contact"]) main>.inner-hero:not(#voiceHero){--hero-content-inset:50px}
}
@media(max-width:760px){
 html body[data-page]:not([data-solution-story]):not(.home-style-inner):not([data-page="contact"]) main>.inner-hero:not(#voiceHero){--hero-content-inset:64px}
 html body[data-page][data-product-visual]:not([data-solution-story]):not(.home-style-inner):not([data-page="contact"]) main>.inner-hero:not(#voiceHero){--hero-content-inset:44px}
}
@media(max-width:560px){
 html body[data-page]:not([data-solution-story]):not(.home-style-inner):not([data-page="contact"]) main>.inner-hero:not(#voiceHero){--hero-header-height:68px}
}


/* Figma 865:13075 workspace; background replaced with exported 877:229. */
html body[data-page="developers"] #developer-quickstart{position:relative;isolation:isolate;background:#fff;padding:100px 0 110px}
#developer-quickstart::before,#developer-quickstart::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
#developer-quickstart::before{background:url('../img/developers/quickstart-background-877-229.png') center/cover no-repeat}
#developer-quickstart::after{content:none}
#developer-quickstart .developer-quickstart-grid{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;width:calc(100% - 96px);max-width:1260px;padding:0;align-items:start}
html body[data-page="developers"] #developer-quickstart h2{max-width:371px;margin:0 0 12px;font-size:48px;line-height:1.2;letter-spacing:-2.4px;font-weight:400;color:rgb(0 0 0/.85)}
#developer-quickstart .developer-quickstart-copy p{max-width:371px;margin:0;font-size:14px;line-height:25.2px;color:rgb(0 0 0/.65)}
#developer-quickstart .developer-code-window{min-width:0;border-radius:20px;overflow:hidden;background:#282c34}
#developer-quickstart .developer-code-toolbar{min-height:48px;height:auto;display:flex;align-items:center;gap:16px;padding:0 16px;background:#16171c}
#developer-quickstart .developer-window-dots{display:flex;gap:8px;flex:none}
#developer-quickstart .developer-window-dots img{display:block;width:12px;height:12px}
#developer-quickstart .developer-code-tab{box-sizing:border-box;align-self:end;flex:0 1 auto;width:max-content;min-width:0;max-width:calc(100% - 68px);min-height:43px;height:auto;margin-top:5px;padding:11px 24px;display:flex;align-items:center;background:url('../img/developers/window-tab.svg') center/100% 100% no-repeat;color:#fff;font-size:14px}
#developer-quickstart .developer-code-tab span{white-space:normal;overflow:visible;text-overflow:clip;line-height:21px;overflow-wrap:anywhere}
html body[data-page="developers"] #developer-quickstart pre.code-block{margin:0;padding:24px 30px 28px;min-height:394px;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;overflow:auto;font-size:14px;line-height:20px;tab-size:2;white-space:pre}
#developer-quickstart pre.code-block:focus-visible{outline:2px solid #6881f1;outline-offset:-3px}
@media(max-width:1100px){html body[data-page="developers"] #developer-quickstart h2{font-size:38px;letter-spacing:-1.5px}#developer-quickstart .developer-quickstart-grid{gap:32px}}
@media(max-width:800px){html body[data-page="developers"] #developer-quickstart{padding:64px 0}#developer-quickstart .developer-quickstart-grid{width:calc(100% - 48px);grid-template-columns:minmax(0,1fr);gap:28px}html body[data-page="developers"] #developer-quickstart h2{max-width:100%;font-size:34px}#developer-quickstart .developer-quickstart-copy p{max-width:560px}html body[data-page="developers"] #developer-quickstart pre.code-block{padding:20px;font-size:12px}#developer-quickstart .developer-code-tab{font-size:12px}}

/* API icon treatment follows Figma 392:3768; texture 853:12848. */
html body[data-page="developers"] #developer-api-capabilities{position:relative;isolation:isolate}
#developer-api-capabilities::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../../img/global-presence/texture.png') left top/16.8px 16.8px repeat;opacity:.05}
html body[data-page="developers"] #developer-api-capabilities .card-icon{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;width:50px;height:50px;padding:12px;border:1px solid #e2e2e2;border-radius:10px;background:#fff;color:#262626;box-shadow:none;overflow:hidden}
html body[data-page="developers"] #developer-api-capabilities .card-icon svg{display:block;flex:none;width:24px;height:24px;stroke:currentColor;stroke-width:1.8}

/* Square API cards with drafting-style borders extending 20px at each corner. */
html body[data-page="developers"] #developer-api-capabilities .card-grid{gap:48px}
html body[data-page="developers"] #developer-api-capabilities .card{
 position:relative;overflow:visible;background:#f5f5f5;border:1px solid #dfe3eb;border-radius:0;box-shadow:none;
}
#developer-api-capabilities .card::before,#developer-api-capabilities .card::after{
 content:"";position:absolute;pointer-events:none;border-color:#dfe3eb;border-style:solid;border-width:0;
}
#developer-api-capabilities .card::before{top:-1px;bottom:-1px;left:-21px;right:-21px;border-top-width:1px;border-bottom-width:1px}
#developer-api-capabilities .card::after{top:-21px;bottom:-21px;left:-1px;right:-1px;border-left-width:1px;border-right-width:1px}

/* Center the API capabilities heading across the full card group. */
#developer-api-capabilities > .container > .section-head{width:100%;max-width:none;text-align:center}
#developer-api-capabilities > .container > .section-head > h2{margin-inline:auto;text-align:center}

/* Center the documentation title and supporting copy. */
#developer-documentation > .container{text-align:center}
#developer-documentation .section-head,#developer-documentation .prose{margin-inline:auto;text-align:center}
#developer-documentation .section-head h2,#developer-documentation .prose p{text-align:center}

/* Quickstart introduction sits above the centered 1260px code window. */
#developer-quickstart .developer-quickstart-copy{width:100%;text-align:center}
html body[data-page="developers"] #developer-quickstart .developer-quickstart-copy h2{max-width:100%;margin-inline:auto;text-align:center}
#developer-quickstart .developer-quickstart-copy p{max-width:760px;margin-inline:auto;text-align:center}
#developer-quickstart .developer-code-window{width:100%;max-width:1260px;margin-inline:auto}