/* CX Index clean style, November 2026.
   Loaded last on every page. Replaces the Mondrian grid with full width sections,
   white cards with a coloured top bar, and one colour strip top and bottom. */

:root{--rule:4px;--strip:linear-gradient(90deg,#0B2846 0 46%,#0E9C74 46% 69%,#34D399 69% 85%,#FF0081 85% 92.5%,#FFC93C 92.5%)}

/* ---------- frame: header, strip, footer ---------- */
.site-head{border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(11,40,70,.02)}
.site-head::before{content:"";display:block;height:6px;background:var(--strip)}
.site-head .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.announce{display:none}
footer{background:#fff;border-top:1px solid var(--line);position:relative}
footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--strip)}
.fnl{border-bottom:1px solid var(--line)}
.fnl .hsbox{border:1px solid var(--line)}
.wrap{max-width:1240px;padding:0 24px}
@media (min-width:1600px){.wrap{max-width:1240px;padding:0 24px}}

/* ---------- type ---------- */
h1,h2,h3,h4{line-height:1.08}
h2{line-height:1.12}
.sec-head::before{content:"";display:block;width:48px;height:6px;background:var(--ink);margin-bottom:18px}
.fsec:nth-of-type(4n+2) .sec-head::before{background:var(--green)}
.fsec:nth-of-type(4n+3) .sec-head::before{background:var(--pink)}
.fsec:nth-of-type(4n) .sec-head::before{background:var(--mint)}
.partners .sec-head::before,.pclose .sec-head::before{background:var(--mint)}
.sec-head{margin-bottom:40px}
.sec-head .eyebrow{margin-bottom:12px}

/* ---------- buttons ---------- */
.btn{border-width:2px}

/* ---------- sections ---------- */
.fsec{padding:96px 0}
.fsec.alt{background:var(--panel);border:0}
.band-sec{padding:96px 0}
.band-sec[style]{border-top:0!important;border-bottom:0!important}
.faq{padding:96px 0;border-top:0;background:#fff}
.demo{padding:96px 0;border-top:0;background:var(--panel)}
.pclose{padding:96px 0}

/* ---------- product page hero: text left, one colour block right ---------- */
.f-hero{display:flex;flex-wrap:wrap;gap:0;background:#fff;border:0;max-width:1240px;margin:0 auto;padding:64px 24px 88px;box-sizing:border-box}
.f-head{flex:3 1 560px;min-width:0;padding:32px 56px 32px 0;background:transparent}
.f-head h1{font-size:clamp(2.4rem,4.4vw,3.9rem);max-width:16ch;line-height:1.04}
.f-big{flex:2 1 360px;min-width:0;padding:44px 40px;justify-content:center}
.f-big h2{max-width:18ch}
.f-big .facts{background:transparent;gap:0;grid-template-columns:1fr 1fr;margin-top:28px}
.f-big .facts div{background:transparent!important;border-top:1px solid rgba(255,255,255,.3);padding:14px 12px 14px 0}
.z1,.z2,.z3{display:none}
@media (max-width:760px){.f-hero{padding:32px 16px 56px}.f-head{padding:0 0 28px}.f-big{padding:32px 24px}}

/* ---------- card sets: white cards, coloured top bars, no navy gutters ---------- */
.why,.steps,.asks,.examples,.laws,.results,.tiles8,.caps,.gloss,.plist,.res{background:transparent;border:0;gap:20px}
.why div,.steps div,.asks div,.examples div,.laws div,.results div,.caps>div,.tiles8 div,.gloss div{background:#fff;border:1px solid var(--line);border-top:6px solid var(--ink)}
.why div:nth-child(4n+2),.steps div:nth-child(4n+2),.asks div:nth-child(4n+2),.examples div:nth-child(4n+2),.laws div:nth-child(4n+2),.results div:nth-child(4n+2),.caps>div:nth-child(4n+2),.tiles8 div:nth-child(4n+2){border-top-color:var(--green)}
.why div:nth-child(4n+3),.steps div:nth-child(4n+3),.asks div:nth-child(4n+3),.examples div:nth-child(4n+3),.laws div:nth-child(4n+3),.results div:nth-child(4n+3),.caps>div:nth-child(4n+3),.tiles8 div:nth-child(4n+3){border-top-color:var(--mint)}
.why div:nth-child(4n),.steps div:nth-child(4n),.asks div:nth-child(4n),.examples div:nth-child(4n),.laws div:nth-child(4n),.results div:nth-child(4n),.caps>div:nth-child(4n),.tiles8 div:nth-child(4n){border-top-color:var(--pink)}
.why div,.steps div,.asks div,.examples div,.laws div,.caps>div{padding:28px 26px 30px}
.why h3,.steps h3,.laws h3,.caps h3{font-size:1.2rem}
.why p,.steps p,.laws p,.caps p{font-size:.97rem;line-height:1.6;margin-top:10px}
.fsec.alt .why div,.fsec.alt .steps div,.fsec.alt .caps>div,.fsec.alt .laws div,.fsec.alt .asks div,.fsec.alt .examples div,.fsec.alt .results div{border-color:transparent;border-top-width:6px}
/* undo the old solid coloured first and last step */
.steps div:nth-child(1),.steps div:last-child{background:#fff}
.steps div:nth-child(1) h3,.steps div:last-child h3{color:var(--ink)}
.steps div:nth-child(1) p,.steps div:last-child p{color:var(--ink-mid)}
.tiles8 div,.tiles8 div:nth-child(1),.tiles8 div:nth-child(6),.tiles8 div:nth-child(8){background:#fff;color:var(--ink)}
.asks div{border-left:1px solid var(--line)}
.examples b,.examples div:nth-child(2) b{background:var(--ink)}
.gloss{gap:12px}
.gloss div{border-top-width:1px}
.res a{border:1px solid var(--line)}
.res a:hover{background:#fff;border-color:var(--ink)}
.plist div{background:rgba(255,255,255,.06)}

/* capability grid beside screenshots */
.capgrid{gap:56px}
.frame{border:1px solid var(--line);padding:10px;background:#fff}
.frame:hover{border-color:var(--ink)}
.shotstack{gap:16px}

/* related links row */
.family{gap:8px}
.family a{border:1px solid var(--line);padding:11px 16px}
.family a:hover{border-color:var(--ink)}

/* comparison tables */
.ctwrap{border:0;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
.ctable th,.ctable td{border-top:1px solid var(--line);padding:16px 18px}

/* FAQ */
.faq-list{border:0;border-top:6px solid var(--ink);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{padding:22px 56px 22px 0}
.faq summary::after{right:4px;top:18px}
.faq details p{padding:0 0 22px}

/* forms */
.demo .hsbox.hs-demo,.hsbox.hs-kit{border:1px solid var(--line);background:#fff}

/* closing band */
.pclose{background:var(--ink)}

/* ---------- homepage ---------- */
.h-hero{max-width:1240px;margin:0 auto;padding:72px 24px 96px;display:flex;flex-wrap:wrap;align-items:stretch;box-sizing:border-box}
.h-hero .h-text{flex:3 1 560px;min-width:0;padding:32px 56px 32px 0}
.h-kick{margin:0 0 22px;display:flex;align-items:center;gap:10px;font-family:var(--fut);font-weight:600;font-size:.95rem;color:var(--green)}
.h-kick i{width:12px;height:12px;background:var(--pink);display:inline-block}
.h-kick a{color:inherit;text-decoration:none;border-bottom:2px solid var(--green)}
.h-hero h1{font-size:clamp(2.6rem,5vw,4.4rem);max-width:15ch;line-height:1.02;letter-spacing:-.02em;font-weight:700}
.h-hero .lede{margin-top:28px;max-width:52ch;font-size:1.18rem;line-height:1.6}
.h-hero .acts{margin-top:36px}
.h-proof{flex:2 1 360px;min-width:0;background:var(--green);color:#DBF3EB;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.h-proof div+div{border-top:1px solid rgba(255,255,255,.35);padding-top:24px}
.h-proof b{display:block;font-family:var(--fut);font-weight:600;color:#fff;font-size:3rem;line-height:1}
.h-proof b.sm{font-size:1.5rem}
.h-proof span{display:block;margin-top:8px}
.h-proof img{width:96px;height:auto;filter:brightness(0) invert(1);margin-bottom:10px}
.h-logos{background:var(--panel)}
.h-logos .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px;padding-top:36px;padding-bottom:36px}
.h-logos img{height:32px;width:auto;max-width:180px;object-fit:contain}
.h-sec{padding:112px 0}
.h-sec.alt{background:var(--panel)}
.h-bar{display:block;width:48px;height:6px;background:var(--ink);margin:0 0 18px}
.h-sec h2{font-size:clamp(2rem,3.6vw,2.9rem);max-width:22ch;font-weight:700}
.h-three{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.h-three p{margin:0;font-family:var(--fut);font-size:1.25rem;line-height:1.35;font-weight:600;color:var(--ink)}
.h-turn{margin:36px 0 0;font-family:var(--fut);font-size:1.2rem;font-weight:600;color:var(--green)}
.h-shot{margin-top:48px;background:#fff;border:4px solid var(--ink);padding:12px}
.h-shot img{display:block;width:100%;height:auto}
.h-four{margin-top:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.h-four div{background:#fff;padding:32px 28px;border-top:6px solid var(--ink)}
.h-four div:nth-child(2){border-top-color:var(--green)}
.h-four div:nth-child(3){border-top-color:var(--mint)}
.h-four div:nth-child(4){border-top-color:var(--pink)}
.h-four h3{font-size:1.6rem}
.h-four p{margin:14px 0 0;line-height:1.6}
.h-canary{background:var(--yellow);color:var(--ink)}
.h-canary .wrap{display:flex;flex-wrap:wrap;gap:64px;align-items:center}
.h-canary .wrap>div{flex:1 1 440px;min-width:0}
.h-tag{display:inline-block;background:var(--ink);color:#fff;padding:6px 12px;font-family:var(--fut);font-size:.88rem;font-weight:600;margin:0 0 18px}
.h-canary h2{font-size:clamp(2.2rem,4vw,3.4rem);max-width:18ch}
.h-canary p.lede{color:var(--ink);max-width:48ch;margin-top:24px}
.h-cards{display:flex;flex-direction:column;gap:6px}
.h-cards div{background:#fff;padding:24px 28px}
.h-cards div:last-child{background:var(--ink)}
.h-cards div:last-child h3{color:#fff}
.h-cards div:last-child p{color:#C9D8E4}
.h-cards h3{font-size:1.25rem}
.h-cards p{margin:6px 0 0}
.h-res{display:flex;flex-wrap:wrap;gap:64px}
.h-res>div:first-child{flex:1 1 320px;min-width:0}
.h-table{flex:2 1 600px;min-width:0;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
.h-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;padding:22px 0;border-top:1px solid var(--line)}
.h-row.head{border-top:0;padding:14px 0;font-family:var(--fut);font-size:.84rem;font-weight:600;color:var(--ink-soft);border-bottom:1px solid var(--ink)}
.h-row.head+.h-row{border-top:0}
.h-row>:nth-child(1){flex:1 1 220px;font-family:var(--fut);font-size:1.25rem;font-weight:600;color:var(--ink)}
.h-row>:nth-child(2){flex:1 1 220px}
.h-row>:nth-child(3){flex:0 0 150px;text-align:right;font-family:var(--fut);font-size:2.4rem;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.h-row.head>*{font-size:.84rem!important;color:var(--ink-soft)!important;font-weight:600!important}
.h-row a{color:inherit;text-decoration:none;border-bottom:2px solid var(--line)}
.h-row a:hover{border-bottom-color:var(--green)}
.h-link{font-family:var(--fut);font-weight:600;text-decoration:none;color:var(--ink);border-bottom:3px solid var(--pink);padding-bottom:2px}
.h-int .wrap{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.h-int h2{flex:1 1 420px;font-size:clamp(1.8rem,3vw,2.4rem)}
.h-chips{flex:1 1 480px;display:flex;flex-wrap:wrap;gap:6px}
.h-chips a,.h-chips span{background:var(--panel);padding:13px 18px;font-family:var(--fut);font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none}
.h-chips a:hover{background:var(--ink);color:#fff}
.h-sectors{margin-top:48px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.h-sectors a{display:block;border:1px solid var(--line);border-top:6px solid var(--ink);padding:18px 18px 20px;text-decoration:none;color:var(--ink);font-family:var(--fut);font-weight:600;font-size:1.08rem}
.h-sectors a span{display:block;margin-top:6px;font-family:"Archivo",Arial,sans-serif;font-weight:400;font-size:.86rem;color:var(--ink-soft)}
.h-sectors a:nth-child(5n+2){border-top-color:var(--green)}
.h-sectors a:nth-child(5n+3){border-top-color:var(--mint)}
.h-sectors a:nth-child(5n+4){border-top-color:var(--pink)}
.h-sectors a:nth-child(5n){border-top-color:var(--yellow)}
.h-sectors a:hover{border-color:var(--ink);border-top-color:inherit}
@media (max-width:1080px){.h-four{grid-template-columns:repeat(2,minmax(0,1fr))}.h-sectors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .h-hero{padding:32px 16px 56px}.h-hero .h-text{padding:0 0 32px}.h-proof{padding:32px 24px}
  .h-sec{padding:72px 0}.h-three,.h-four{grid-template-columns:1fr;gap:16px}.h-three{gap:20px}
  .h-sectors{grid-template-columns:1fr 1fr}
  .h-row>:nth-child(3){flex:1 1 100%;text-align:left}
  .h-canary .wrap{gap:32px}
}

/* ---------- special page heroes: same treatment as the product template ---------- */
.p-hero,.k-hero,.t-hero{display:flex;flex-wrap:wrap;gap:0;background:#fff;border:0;max-width:1240px;margin:0 auto;padding:64px 24px 88px;box-sizing:border-box}
.p-head,.k-head,.t-head{flex:3 1 520px;min-width:0;padding:32px 56px 32px 0;background:transparent}
.p-head h1,.k-head h1,.t-head h1{font-size:clamp(2.4rem,4.4vw,3.9rem);max-width:16ch;line-height:1.04}
.p-img{flex:3 1 520px;min-width:0;background:var(--panel);padding:16px;align-self:center}
.k-yellow,.t-cert{flex:2 1 360px;min-width:0;padding:44px 40px;justify-content:center}
.kfacts,.certrow{background:transparent!important;border:0!important;gap:0!important}
.kfacts div{background:transparent!important;border-top:1px solid rgba(11,40,70,.25);padding:14px 12px 14px 0}
.certrow div{background:transparent!important;border-top:1px solid rgba(255,255,255,.3)}
.a1,.a2,.a3,.k1,.k2,.k3,.tm,.tp,.ty,.t-hero .z1,.t-hero .z2,.t-hero .z3,.nl-side,.band{display:none!important}
@media (max-width:760px){.p-hero,.k-hero,.t-hero{padding:32px 16px 56px}.p-head,.k-head,.t-head{padding:0 0 28px}.k-yellow,.t-cert{padding:32px 24px}}

/* platform stage map: four plain cards */
.tgrid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-areas:none!important;gap:20px;background:transparent;border:0}
.tgrid .tb{grid-area:auto!important;background:#fff!important;border:1px solid var(--line);border-top:6px solid var(--ink);padding:26px 24px 28px}
.tgrid .t-green{border-top-color:var(--green)}.tgrid .t-mint{border-top-color:var(--mint)}.tgrid .t-panel{border-top-color:var(--pink)}
.tgrid .tb h3{color:var(--ink)!important}
.tgrid .tb .tnum{color:var(--green-text)!important}
.tgrid .tb .tlinks a{color:var(--ink-mid)!important;border-color:var(--line)!important}
.tgrid .tb .tlinks a:hover{color:var(--green)!important}
@media (max-width:1080px){.tgrid{grid-template-columns:1fr 1fr!important}}
@media (max-width:600px){.tgrid{grid-template-columns:1fr!important}}
.thumbs{gap:12px}

/* card grids on Canary, Trust, Resources, Blog and Partner pages: no navy gutters or frames */
.ksteps,.kwatch,.kbuild,.knext-grid,.cells,.docs,.lib,.portal,a.feat,.bgrid,.intgroups,.models,.proof,.score{background:transparent!important;border:0!important;gap:20px!important}
.ksteps>div,.kwatch>div,.cells>div,.docs>*,.lib>a,.bgrid>a,.intgroups>div,.score>div{border:1px solid var(--line);border-top:6px solid var(--ink)}
.ksteps>div:nth-child(2),.kwatch>div:nth-child(4n+2),.cells>div:nth-child(4n+2),.docs>*:nth-child(3n+2),.intgroups>div:nth-child(3n+2),.score>div:nth-child(2){border-top-color:var(--green)}
.ksteps>div:nth-child(3),.kwatch>div:nth-child(4n+3),.cells>div:nth-child(4n+3),.docs>*:nth-child(3n),.intgroups>div:nth-child(3n),.score>div:nth-child(3){border-top-color:var(--pink)}
.ksteps>div:first-child{background:#fff}
.kwatch>div:last-child{background:#fff;border-top-color:var(--yellow)}
.ksec.alt{border:0!important}
.bigsig{border:1px solid var(--line);border-left:6px solid var(--yellow)}
.kbeta{border-top:0}
.knext{padding:96px 0}
.spec{border:0;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
a.feat .f-art{display:none}
a.feat>*{grid-column:1/-1!important}
a.feat{border:1px solid var(--line)!important;border-top:6px solid var(--green)!important}
.a-strip{display:none}
.author{border-top:1px solid var(--line)}
.more-posts{border-top:0}
.callout{border-left:6px solid var(--mint)}
.afband{border-top:0}
.afgrid{background:transparent;gap:0}
.af-side{display:none}
.af-main{grid-column:1/-1!important}
.models>div,.proof>div{border:1px solid var(--line)}
.rchip,.bchip,.chip{border-width:1px}
.find input{border-width:1px}

/* Genesys comparison page has its own stylesheet */
.scope{border-top:0}
.close{border-top:0}
.cat-row td{border-top:6px solid var(--ink)}
table{border-width:0}
.nl{display:block!important;background:transparent!important;border:0!important}
.nl-main{border-top:6px solid var(--mint)}
.kbuild>div{border:1px solid var(--line)}
@media (max-width:760px){.h-row.head{display:none}.h-table .h-row:nth-child(2){border-top:0}}

/* accessibility: text shades that pass WCAG AA on white */
:root{--ink-soft:#5B6B75}
.eyebrow,.stagetag,.h-kick,.h-turn,.crumb,.a-cat,.cat,.tnum{color:#0A7A5B}
.crumb a{color:var(--ink)}
.partners .eyebrow,.pclose .eyebrow,.knext .eyebrow,.on-dark .eyebrow{color:var(--mint)}
.fh{font-family:var(--fut);font-weight:600;color:var(--ink);font-size:.84rem;margin:0 0 12px}
.fnl .fh{font-size:1.1rem;margin:0}
.shortv h2{font-size:1rem;margin:0 0 10px;max-width:none}

/* accessibility: a deeper shade of the brand green wherever text sits on it */
:root{--green-text:#0A7F60}
.h-proof,.f-big.green,.btn.onink,.models>div:first-child,.af-side div:first-child,.nl-main,.byline .av,.author .av,.cov.cs,.lib a.cs .cov,.res .cov.cs,.ctable thead th:nth-child(2),.t-cx{background:var(--green-text)!important;border-color:var(--green-text)!important}
.h-proof,.h-proof span,.h-proof a,.f-big.green,.f-big.green p,.f-big.green .facts span,.nl-main,.nl-main p{color:#F2FBF7!important}
.btn.onink:hover{background:#fff!important;color:var(--ink)!important;border-color:#fff!important}
.cat,.a-cat,.eyebrow,.stagetag,.h-turn,.tnum{color:var(--green-text)}
.site-head a[aria-current],.site-head a[aria-current="page"],.nav a[aria-current]{color:var(--green-text)!important}
.h-row>:nth-child(3){color:var(--green-text)}
.f-big .facts span,.facts span{opacity:1}
.cat,.a-cat,span.cat{color:var(--green-text)!important}