/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE VERSION B (/hero-b) only: Roobert throughout, and no colour.
   Titles, icons, buttons and tiles go to ink and greys. The Stagwell logo and
   the chat (launcher, voice buttons) keep their colour. Loaded after
   home-c.css, and every rule is scoped to body.hc-b.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Roobert';font-style:normal;font-weight:100 350;font-display:swap;src:url(/next/assets/fonts/roobert/roobert-light.woff2) format('woff2')}
@font-face{font-family:'Roobert';font-style:normal;font-weight:351 550;font-display:swap;src:url(/next/assets/fonts/roobert/roobert-regular.woff2) format('woff2')}
@font-face{font-family:'Roobert';font-style:normal;font-weight:551 900;font-display:swap;src:url(/next/assets/fonts/roobert/roobert-bold.woff2) format('woff2')}

body.hc-b:not(#_),
body.hc-b:not(#_) *:not(svg):not(svg *){font-family:'Roobert',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important}

/* titles: the colour wipe resolves to the title's own colour */
body.hc-b .hl:not(#_){--hl:var(--hl-base,#0B1220) !important}
body.hc-b #why .display--cos:not(#_),
body.hc-b #why .display--cos:not(#_) *,
body.hc-b .chat-over .chat-over__title:not(#_) em,
body.hc-b .chat-over .chat-over__title:not(#_) em *{color:inherit !important}
body.hc-b #why .display--cos:not(#_){color:#0B1220 !important}
body.hc-b .ask-end .hc-clients__t:not(#_){color:rgba(11,18,32,.56) !important}
body.hc-b .call__edit:not(#_),
body.hc-b .stat__n span:not(#_){color:#0B1220 !important}

/* buttons: Book a demo goes ink; the demo button on the film goes white */
body.hc-b .btn:is([data-cta="session"],[data-cta="demo"]):not(.why__cta):not(#_){background:#0B1220 !important;border-color:#0B1220 !important;color:#FFFFFF !important}
body.hc-b .btn:is([data-cta="session"],[data-cta="demo"]):not(.why__cta):not(#_):hover{background:#3A3F47 !important;border-color:#3A3F47 !important}
body.hc-b .intro__act .btn[data-cta]:not(#_){background:#FFFFFF !important;border-color:#FFFFFF !important;color:#0B1220 !important}
body.hc-b .intro__act .btn[data-cta]:not(#_) *{color:#0B1220 !important}
body.hc-b .intro__act .btn[data-cta]:not(#_):hover{background:#E6E6E3 !important;border-color:#E6E6E3 !important}

/* icons: product marks and suite icons in dark grey, no tint */
body.hc-b .nav__pmark:not(#_),
body.hc-b .hcs__card .hcs__ic:not(#_){background:rgba(11,18,32,.05) !important;box-shadow:inset 0 0 0 1px rgba(11,18,32,.18) !important;color:#3A3F47 !important}
body.hc-b .nav__pmark:not(#_) svg,
body.hc-b .hcs__card .hcs__ic:not(#_) svg{color:#3A3F47 !important}
body.hc-b .hcs__card:hover .hcs__go:not(#_),
body.hc-b .hcs__card:focus-visible .hcs__go:not(#_){background:#0B1220 !important;border-color:#0B1220 !important;color:#FFFFFF !important}

/* small marks inside the product mockups */
body.hc-b .mk-wave i:not(#_){background:#3A3F47 !important}
body.hc-b .mk-st i:not(#_),
body.hc-b .ask-mini__dots i:not(#_){background:#8A8E95 !important}

/* Why: the Edge box goes light grey */
body.hc-b #why .why__slot--pair:not(#_){background:#EDEDEA !important}

body.hc-b .call__hint:not(#_){color:rgba(11,18,32,.56) !important;background:transparent !important}
body.hc-b .stat__n span:not(#_)::before{background:#8A8E95 !important;color:#8A8E95 !important}

/* more air around the film */
@media (min-width:761px){
  body.hc-b .intro:not(#_){padding-top:clamp(80px,11vh,128px) !important;padding-bottom:clamp(72px,8vw,120px) !important}
}
@media (max-width:760px){
  body.hc-b .intro:not(#_){padding-top:48px !important;padding-bottom:56px !important}
}

/* closing Book a demo tile: see the end of the sheet (the dotted-planes picture, 7 Oct) */
body.hc-b .ask-end .ask-end__ways .btn[data-cta]:not(#_){border-color:transparent !important}

/* "Our solutions" (Extensible) keeps its blue: the words match their underline */
body.hc-b .hc-inlink:not(#_){color:#009CBD !important}

/* the hero title a touch heavier: Roobert has no Medium, so a fine stroke adds the weight */
body.hc-b .hero .display--hero:not(#_),
body.hc-b .hero .display--hero:not(#_) *{-webkit-text-stroke:.5px #0B1220;paint-order:stroke fill}

/* Why Stagwell AI as alternating rows: a large picture beside its text, sides swapping
   row by row, the text centred on the picture (the Manus feature-page grid) */
body.hc-b #why .why__item:not(#_),
body.hc-b #why .why__item:not(#_):last-child{border:0 !important;padding:0 !important;background:transparent !important}
body.hc-b #why .why__item:not(#_) + .why__item{margin-top:clamp(64px,8vw,128px) !important}
body.hc-b #why .why__grid:not(#_){margin-top:clamp(40px,5vw,72px) !important}
body.hc-b #why .why__item:not(#_) .why__t{font-size:clamp(34px,1rem + 2.2vw,52px) !important;line-height:1.08 !important;letter-spacing:-.03em !important;margin:0 0 18px !important}
body.hc-b #why .why__item:not(#_) > .why__d{max-width:520px !important;font-size:clamp(16px,.9rem + .3vw,19px) !important;line-height:1.55 !important}
body.hc-b #why .why__item:not(#_) > .why__d--lead{color:#0B1220 !important;margin:0 0 6px !important}
body.hc-b #why .why__item:not(#_) > .why__d:not(.why__d--lead){color:rgba(11,18,32,.6) !important}
@media (min-width:900px){
  body.hc-b #why .why__item:not(#_){display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;grid-template-rows:1fr auto auto auto 1fr !important;
    column-gap:clamp(56px,7vw,112px) !important;row-gap:0 !important;align-items:start !important}
  body.hc-b #why .why__item:not(#_) > .why__slot{grid-row:1 / 6 !important;grid-column:1 / 2 !important;align-self:stretch !important;
    width:100% !important;aspect-ratio:11 / 10 !important;height:auto !important;max-height:600px;min-height:0 !important;margin:0 !important}
  body.hc-b #why > .wrap:not(#_){max-width:1320px !important;padding-inline:40px !important;margin-inline:auto !important}
  body.hc-b #why .why__item:not(#_) > .why__head{grid-row:2 !important;grid-column:2 / 3 !important}
  body.hc-b #why .why__item:not(#_) > .why__d--lead{grid-row:3 !important;grid-column:2 / 3 !important}
  body.hc-b #why .why__item:not(#_) > .why__d:not(.why__d--lead){grid-row:4 !important;grid-column:2 / 3 !important}
  body.hc-b #why .why__item:not(#_):nth-child(even) > .why__slot{grid-column:2 / 3 !important}
  body.hc-b #why .why__item:not(#_):nth-child(even) > :not(.why__slot){grid-column:1 / 2 !important}
}
@media (max-width:899px){
  body.hc-b #why .why__item:not(#_){display:flex !important;flex-direction:column !important;align-items:stretch !important}
  body.hc-b #why .why__item:not(#_) > .why__head{display:block !important;order:0 !important}
  body.hc-b #why .why__item:not(#_) > .why__slot{order:-1 !important;width:100% !important;height:auto !important;min-height:0 !important;aspect-ratio:16 / 10 !important;margin:0 0 24px !important;align-self:stretch !important}
}

/* Why Stagwell AI: a full-size section title, centred */
body.hc-b #why .display--cos:not(#_),
body.hc-b #why .display--cos:not(#_) *{font-size:clamp(40px,1rem + 3.9vw,78px) !important;line-height:1.06 !important;
  letter-spacing:-.02em !important;font-weight:400 !important;text-transform:none !important;text-align:center !important}
body.hc-b #why .display--cos:not(#_){display:block !important;width:100% !important;max-width:none !important;margin:0 auto clamp(48px,6vw,96px) !important}
body.hc-b #why .display--cos:not(#_) .ln{display:block !important}

/* Experience: the event picture, darkened, with the turning logos small and white on top */
body.hc-b #why .why__slot--logos:not(#_){background:linear-gradient(rgba(11,18,32,.42),rgba(11,18,32,.42)),#0B1220 url(/assets/img/why/experience-event.jpg) center / cover no-repeat !important}
body.hc-b #why .why__slot--logos:not(#_) .why__reel{width:30% !important;height:10% !important;z-index:1}
body.hc-b #why .why__slot--logos:not(#_) .why__logo{background:#FFFFFF !important}

/* Expertise: the tunnel picture, with the Code and Theory wordmark smaller on top
   (screen blend drops the wordmark's black ground, leaving the white letters) */
body.hc-b #why .why__slot--img:not(#_){background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),#0B0B0B url(/assets/img/why/expertise-tunnel.jpg) center / cover no-repeat !important;isolation:isolate}
body.hc-b #why .why__slot--img:not(#_) img{width:62% !important;height:auto !important;object-fit:contain !important;mix-blend-mode:screen;margin:auto}

/* Edge: the Adobe and Palantir marks a size down */
body.hc-b #why .why__slot--pair:not(#_) .why__mark{width:24% !important}
body.hc-b #why .why__slot--pair:not(#_) .why__sep{height:11% !important}   /* half: it must not touch the marks (Julian, 7 Oct) */

/* Expertise: the wordmark's letters sit 3.8% above the middle of its own image, so it is
   nudged down by that much to land on the centre of the box (on the dark band) */
body.hc-b #why .why__slot--img:not(#_) img{transform:translateY(3.8%)}

/* every big title carries the H1's letter spacing */
body.hc-b :is(.display,.hcs__h,.why__t):not(#_),
body.hc-b :is(.display,.hcs__h,.why__t):not(#_) *{letter-spacing:-.035em !important}
body.hc-b #why :is(.display--cos,.why__t):not(#_),
body.hc-b #why :is(.display--cos,.why__t):not(#_) *{letter-spacing:-.035em !important}
body.hc-b #why .why__item:not(#_) .why__t:not(#_){letter-spacing:-.035em !important}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES (/products and the product pages) on the approved homepage B look.
   Same grid, type scale, colours and pictures as the homepage. Scoped to .pc-page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* one grid with the homepage and the footer: 1240px of content, 20px gutters */
body.hc-b.pc-page .pp-wrap:not(.pp-hero__in):not(#_){max-width:1280px !important;padding-inline:20px !important;margin-inline:auto !important}

/* titles: the homepage H1 and section-title scale, all at -0.035em */
body.hc-b.pc-page .pp-title:not(#_),
body.hc-b.pc-page .pp-title:not(#_) *{font-size:clamp(32px,1rem + 3.1vw,60px) !important;line-height:1.08 !important;letter-spacing:-.035em !important;font-weight:500 !important}
body.hc-b.pc-page .pp-title:not(#_),
body.hc-b.pc-page .pp-title:not(#_) *{-webkit-text-stroke:.5px #0B1220;paint-order:stroke fill}
body.hc-b.pc-page .pp-h2:not(#_),
body.hc-b.pc-page .pp-h2:not(#_) *,
body.hc-b.pc-page .prodgroup > .prodgroup__words .prodgroup__h:not(#_){font-size:clamp(40px,1rem + 3.9vw,78px) !important;line-height:1.06 !important;letter-spacing:-.035em !important;font-weight:400 !important;max-width:none !important}
body.hc-b.pc-page .pp-diff__item:not(#_) h3,
body.hc-b.pc-page .pc-row__h:not(#_){font-size:clamp(34px,1rem + 2.2vw,52px) !important;line-height:1.08 !important;letter-spacing:-.035em !important;font-weight:400 !important}
body.hc-b.pc-page .pp-uses__list:not(#_) h4{font-size:clamp(22px,.9rem + 1vw,30px) !important;line-height:1.15 !important;letter-spacing:-.025em !important;font-weight:400 !important}
body.hc-b.pc-page .pp-with__grid:not(#_) b{font-size:clamp(18px,.9rem + .4vw,21px) !important;line-height:1.3 !important;letter-spacing:-.01em !important;font-weight:400 !important}

/* body copy: the homepage paragraph size, grey under an ink lead */
body.hc-b.pc-page :is(.pp-diff__item p,.pp-uses__list p,.pp-with__grid span,.pc-how__card p):not(#_){font-size:clamp(16px,.9rem + .3vw,19px) !important;line-height:1.55 !important;letter-spacing:0 !important}
body.hc-b.pc-page :is(.pp-diff__item p,.pp-uses__list p,.pp-with__grid span):not(#_){color:rgba(11,18,32,.6) !important}
body.hc-b.pc-page .pp-sign:not(#_),
body.hc-b.pc-page .pp-eyebrow:not(#_){font-size:12px !important;letter-spacing:1.6px !important;text-transform:uppercase !important;font-weight:400 !important;color:rgba(11,18,32,.56) !important}

/* no colour: steps, bars, icons and small numbers in ink and grey; one white ground */
body.hc-b.pc-page .pc-how__n:not(#_),
body.hc-b.pc-page .pc-how__cn:not(#_),
body.hc-b.pc-page .ptoc__num:not(#_),
body.hc-b.pc-page .pp-diff__n:not(#_){color:rgba(11,18,32,.4) !important}
body.hc-b.pc-page .pc-how__card .pc-how__cn:not(#_){color:rgba(255,255,255,.6) !important}
body.hc-b.pc-page .pc-how__tab.is-on:not(#_) .pc-how__n{color:#0B1220 !important}
body.hc-b.pc-page .pc-how__bar:not(#_),
body.hc-b.pc-page .pc-how__bar:not(#_)::before,
body.hc-b.pc-page .pc-how__bar:not(#_)::after{background-color:#0B1220 !important}
body.hc-b.pc-page .pp-with__grid:not(#_) svg{color:#0B1220 !important;stroke:currentColor}
body.hc-b.pc-page .pp-uses:not(#_){background:transparent !important}
body.hc-b.pc-page .pp-hero:not(#_)::before{content:none !important}

/* Explore sits on pictures and dark cards: white with ink, like the demo button on the film */
body.hc-b.pc-page .prodcard__link:not(#_),
body.hc-b.pc-page .prodcard__link.pc-go:not(#_){background:#FFFFFF !important;border-color:#FFFFFF !important;color:#0B1220 !important}
body.hc-b.pc-page .prodcard__link:not(#_) *{color:#0B1220 !important}
body.hc-b.pc-page .prodcard__link:not(#_):hover{background:#E6E6E3 !important;border-color:#E6E6E3 !important}

/* pictures and film square-cornered like the homepage's; the film inset 20px like B's */
body.hc-b.pc-page .pp-film:not(#_){padding-inline:20px !important}
body.hc-b.pc-page .pp-film__frame:not(#_),
body.hc-b.pc-page .pp-film__frame:not(#_) video,
body.hc-b.pc-page .pp-more__media:not(#_),
body.hc-b.pc-page .pc-break:not(#_),
body.hc-b.pc-page .pc-break:not(#_) img{border-radius:0 !important}

/* the closing tiles at the homepage's width */
body.hc-b.pc-page .ask-end .ask-end__ways:not(#_){max-width:1180px !important;width:100% !important;gap:20px !important;margin-inline:auto !important}

/* proof: big light figures on a fine top rule, the labels quiet beneath */
body.hc-b.pc-page .pp-proof .pp-figs:not(#_){display:grid !important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;gap:0 clamp(24px,3vw,48px) !important;
  margin-top:clamp(40px,5vw,72px) !important;border:0 !important;background:none !important;padding:0 !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) li{border:0 !important;border-top:1px solid rgba(11,18,32,.16) !important;background:none !important;padding:28px 0 0 !important;margin:0 !important;display:block !important;text-align:left !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) strong{display:block !important;font-size:clamp(56px,1.5rem + 4.4vw,112px) !important;line-height:.95 !important;font-weight:300 !important;
  letter-spacing:-.045em !important;color:#0B1220 !important;font-variant-numeric:tabular-nums;white-space:nowrap}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) span{display:block !important;margin-top:18px !important;max-width:260px !important;font-size:clamp(15px,.85rem + .25vw,17px) !important;line-height:1.45 !important;color:rgba(11,18,32,.6) !important;letter-spacing:0 !important}
body.hc-b.pc-page .pp-proof .pp-flag:not(#_){background:none !important;border:1px solid rgba(11,18,32,.18) !important;color:rgba(11,18,32,.56) !important}
body.hc-b.pc-page .pp-proof .pp-proof__note:not(#_){margin-top:clamp(32px,4vw,56px) !important;color:rgba(11,18,32,.5) !important}
body.hc-b.pc-page :is(.pp-more__head,.pp-proof__head):not(#_){max-width:1040px !important}
@media (max-width:760px){
  body.hc-b.pc-page .pp-title:not(#_),
  body.hc-b.pc-page .pp-title:not(#_) *{font-size:clamp(36px,10.7vw,46px) !important}
}
@media (max-width:760px){
  body.hc-b.pc-page .pp-proof .pp-figs:not(#_){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 20px !important}
  body.hc-b.pc-page .pp-proof .pp-figs:not(#_) li{padding:20px 0 32px !important}
  body.hc-b.pc-page .pp-proof .pp-figs:not(#_) strong{font-size:clamp(38px,11vw,56px) !important}
  body.hc-b.pc-page .pp-proof .pp-figs:not(#_) span{margin-top:12px !important;font-size:14px !important}
}

/* solution pages (/s/…): the product's name over the hero, in ink */
body.hc-b.pc-page .sp-mark:not(#_){color:#0B1220 !important;font-size:clamp(20px,.9rem + .6vw,26px) !important;font-weight:400 !important;letter-spacing:-.02em !important;margin:0 0 14px !important;text-shadow:none !important}
body.hc-b.pc-page .sp-also:not(#_){padding-block:clamp(72px,9vw,136px) clamp(24px,3vw,48px) !important;background:transparent !important}
body.hc-b.pc-page .sp-also__list:not(#_){display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)) !important;gap:0 clamp(24px,3vw,48px) !important;margin-top:clamp(32px,4vw,56px) !important;padding:0 !important;list-style:none !important}
body.hc-b.pc-page .sp-also__item:not(#_){display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:20px !important;
  background:none !important;border:0 !important;border-top:1px solid rgba(11,18,32,.16) !important;border-radius:0 !important;box-shadow:none !important;padding:24px 0 28px !important;color:#0B1220 !important;text-decoration:none !important}
body.hc-b.pc-page .sp-also__n:not(#_){display:block !important;font-size:clamp(22px,.9rem + 1vw,30px) !important;font-weight:400 !important;letter-spacing:-.025em !important;line-height:1.15 !important;color:#0B1220 !important}
body.hc-b.pc-page .sp-also__w:not(#_){display:block !important;margin-top:8px !important;font-size:clamp(15px,.85rem + .25vw,17px) !important;line-height:1.45 !important;color:rgba(11,18,32,.6) !important}
body.hc-b.pc-page .sp-also__item:not(#_) svg{width:22px !important;height:22px !important;flex:0 0 auto !important;margin-top:6px !important;color:#0B1220 !important;transition:transform .25s ease}
body.hc-b.pc-page .sp-also__item:not(#_):hover svg{transform:translateX(4px)}
body.hc-b.pc-page .sp-mark:not(#_){border:0 !important;background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}

/* solution pages, round two: the product's picture is the hero's ground (a darkened card
   inset 20px, like the homepage film), white type on it */
body.hc-b.pc-page .sp-hero--pic:not(#_){position:relative !important;margin:clamp(72px,9vh,88px) 20px 0 !important;min-height:min(80vh,760px) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;padding-block:clamp(72px,10vh,120px) !important;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(11,18,32,.42),rgba(11,18,32,0) 100%),linear-gradient(180deg,rgba(11,18,32,.66) 0%,rgba(11,18,32,.5) 50%,rgba(11,18,32,.72) 100%),#0B1220 var(--sp-pic) center / cover no-repeat !important;border-radius:0 !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) :is(.sp-mark,.pp-eyebrow,.pp-title,.pp-title *,.pp-lede){color:#FFFFFF !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) :is(.pp-title,.pp-title *){-webkit-text-stroke-color:#FFFFFF !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) .pp-eyebrow{color:rgba(255,255,255,.72) !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) .pp-lede{color:rgba(255,255,255,.86) !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) .btn[data-cta]{background:#FFFFFF !important;border-color:#FFFFFF !important;color:#0B1220 !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) .btn[data-cta] *{color:#0B1220 !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) .btn[data-cta]:hover{background:#E6E6E3 !important;border-color:#E6E6E3 !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) .pp-site{color:#FFFFFF !important;border-color:rgba(255,255,255,.7) !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) .pp-site *{color:#FFFFFF !important}
@media (max-width:760px){
  body.hc-b.pc-page .sp-hero--pic:not(#_){margin:72px 16px 0 !important;min-height:min(86svh,680px) !important;padding-inline:4px !important}
}

/* "What it does": the capabilities as a plain numbered list, two columns */
body.hc-b.pc-page .pp-more__grid:not(#_):has(> .sp-caps){display:block !important}
body.hc-b.pc-page .sp-caps:not(#_){display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 clamp(24px,4vw,64px) !important;
  list-style:none !important;padding:0 !important;margin:clamp(32px,4vw,56px) 0 0 !important;counter-reset:none}
body.hc-b.pc-page .sp-caps:not(#_) > li{display:flex !important;align-items:baseline !important;gap:20px !important;border:0 !important;border-top:1px solid rgba(11,18,32,.16) !important;
  padding:24px 0 30px !important;margin:0 !important;background:none !important;opacity:1}
body.hc-b.pc-page .sp-caps:not(#_) > li > b{flex:0 0 32px !important;font-size:13px !important;font-weight:400 !important;letter-spacing:.04em !important;color:rgba(11,18,32,.4) !important;background:none !important;width:auto !important;height:auto !important;border:0 !important}
body.hc-b.pc-page .sp-caps:not(#_) h3{margin:0 !important;font-size:clamp(24px,.9rem + 1.4vw,36px) !important;font-weight:400 !important;letter-spacing:-.03em !important;line-height:1.12 !important;color:#0B1220 !important}
@media (max-width:760px){
  body.hc-b.pc-page .sp-caps:not(#_){grid-template-columns:1fr !important}
}

/* Related: each product as a picture card */
body.hc-b.pc-page .sp-also__item:not(#_){display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;grid-template-areas:"pic pic" "txt go" !important;
  align-items:start !important;border-top:0 !important;padding:0 0 28px !important;column-gap:20px !important}
body.hc-b.pc-page .sp-also__pic:not(#_){grid-area:pic;display:block;width:100%;aspect-ratio:16 / 10;margin:0 0 20px;background:#0B1220 var(--sp-pic) center / cover no-repeat;transition:opacity .3s ease}
body.hc-b.pc-page .sp-also__item:not(#_) > span:not(.sp-also__pic){grid-area:txt;display:block}
body.hc-b.pc-page .sp-also__item:not(#_) > svg{grid-area:go}
body.hc-b.pc-page .sp-also__item:not(#_):hover .sp-also__pic{opacity:.88}
body.hc-b.pc-page .sp-also__list:not(#_){grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)) !important}
body.hc-b.pc-page .sp-caps:not(#_) > li > b{position:static !important;inset:auto !important;order:-1 !important;transform:none !important}
body.hc-b.pc-page .sp-caps:not(#_) > li > b::before,
body.hc-b.pc-page .sp-caps:not(#_) > li > b::after{content:none !important}
body.hc-b.pc-page .sp-hero .sp-mark:not(#_){order:-2 !important}

/* solution pages, round three ───────────────────────────────────────────────
   How it works: the square picture left, heading and numbered list right */
body.hc-b.pc-page .sp-how__in:not(#_){display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:clamp(40px,6vw,112px) !important;align-items:center !important}
body.hc-b.pc-page .sp-how__pic:not(#_){aspect-ratio:1 / 1;overflow:hidden;background:#0B1220;border-radius:0}
body.hc-b.pc-page .sp-how__pic:not(#_) img{width:100%;height:100%;object-fit:cover;display:block}
body.hc-b.pc-page .sp-how:not(#_) .pp-more__head{max-width:none !important;margin:0 !important}
body.hc-b.pc-page .sp-how:not(#_) .pp-h2,
body.hc-b.pc-page .sp-how:not(#_) .pp-h2 *{font-size:clamp(34px,1rem + 2.2vw,52px) !important;line-height:1.08 !important}
body.hc-b.pc-page .sp-how:not(#_) .sp-caps{grid-template-columns:1fr !important;margin-top:clamp(24px,3vw,40px) !important}
body.hc-b.pc-page .sp-how:not(#_) .sp-caps > li{padding:20px 0 22px !important}
body.hc-b.pc-page .sp-how:not(#_) .sp-caps h3{font-size:clamp(20px,.9rem + .8vw,26px) !important;letter-spacing:-.02em !important}
body.hc-b.pc-page .sp-how:not(#_) .sp-caps > li:last-child{border-bottom:1px solid rgba(11,18,32,.16) !important}
body.hc-b.pc-page .sp-how:not(#_) .pp-mid{text-align:left !important;margin:clamp(28px,3vw,40px) 0 0 !important;justify-content:flex-start !important}
@media (max-width:860px){
  body.hc-b.pc-page .sp-how__in:not(#_){grid-template-columns:1fr !important;gap:32px !important}
  body.hc-b.pc-page .sp-how__pic:not(#_){aspect-ratio:16 / 10}
}

/* Related: dark tiles like the closing Book a demo / Call my phone, the product's
   picture darkened behind its name */
body.hc-b.pc-page .sp-also__list:not(#_){grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)) !important;gap:20px !important}
body.hc-b.pc-page .sp-also__item:not(#_){position:relative !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;
  grid-template-areas:none !important;min-height:230px !important;padding:22px 64px 22px 24px !important;border:0 !important;border-radius:10px !important;overflow:hidden !important;
  background:#0B1220 !important;color:#FFFFFF !important;isolation:isolate}
body.hc-b.pc-page .sp-also__pic:not(#_){position:absolute !important;inset:0 !important;width:auto !important;aspect-ratio:auto !important;margin:0 !important;z-index:-1;
  background:linear-gradient(180deg,rgba(11,18,32,.8) 0%,rgba(11,18,32,.38) 58%,rgba(11,18,32,.58) 100%),#0B1220 var(--sp-pic) center / cover no-repeat !important;transition:opacity .3s ease}
body.hc-b.pc-page .sp-also__item:not(#_) > span:not(.sp-also__pic){display:block !important}
body.hc-b.pc-page .sp-also__item:not(#_) .sp-also__n{font-size:22px !important;font-weight:500 !important;letter-spacing:-.01em !important;text-transform:uppercase !important;color:#FFFFFF !important;line-height:1.15 !important}
body.hc-b.pc-page .sp-also__item:not(#_) .sp-also__w{margin-top:10px !important;max-width:340px !important;font-size:15px !important;color:rgba(255,255,255,.78) !important}
body.hc-b.pc-page .sp-also__item:not(#_) > svg{position:absolute !important;top:22px !important;right:24px !important;margin:0 !important;color:#FFFFFF !important}
body.hc-b.pc-page .sp-also__item:not(#_):hover .sp-also__pic{opacity:.9}
@media (max-width:760px){
  body.hc-b.pc-page .sp-also__item:not(#_){min-height:180px !important}
}
body.hc-b.pc-page .sp-also__list:not(#_){grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)) !important}
body.hc-b.pc-page .sp-also:not(#_) .pp-h2,
body.hc-b.pc-page .sp-also:not(#_) .pp-h2 *{font-size:clamp(34px,1rem + 2.2vw,52px) !important;line-height:1.08 !important}

/* the product-site link as a button beside Book a demo: same pill and type, white with a
   fine stroke (all product and solution pages) */
body.hc-b.pc-page .pp-acts .pp-site:not(#_){display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  height:42px !important;padding:0 20px !important;border-radius:999px !important;border:1px solid rgba(11,18,32,.22) !important;background:#FFFFFF !important;
  color:#0B1220 !important;font-size:13.5px !important;font-weight:600 !important;letter-spacing:.01em !important;text-transform:uppercase !important;text-decoration:none !important;line-height:1 !important;box-shadow:none !important}
body.hc-b.pc-page .pp-acts .pp-site:not(#_):hover{border-color:#0B1220 !important;background:#FFFFFF !important}
body.hc-b.pc-page .pp-acts .pp-site:not(#_) svg{width:12px !important;height:12px !important;transform:none !important;color:#0B1220 !important}
body.hc-b.pc-page .pp-acts .pp-site:not(#_)::after,
body.hc-b.pc-page .pp-acts .pp-site:not(#_)::before{content:none !important}
body.hc-b.pc-page .pp-acts:not(#_){gap:12px !important;flex-wrap:wrap !important}

/* solution pages: the hero's picture, wide under the words */
body.hc-b.pc-page .sp-hero__pic:not(#_){display:block;max-width:1240px;margin:clamp(48px,6vw,80px) auto 0;padding:0 20px;box-sizing:content-box}
body.hc-b.pc-page .sp-hero__pic:not(#_) img{display:block;width:100%;aspect-ratio:2 / 1;object-fit:cover;border-radius:16px;background:#0B1220}
@media (max-width:760px){
  body.hc-b.pc-page .sp-hero__pic:not(#_){padding:0 16px;margin-top:36px}
  body.hc-b.pc-page .sp-hero__pic:not(#_) img{aspect-ratio:4 / 3;border-radius:12px}
}

/* solution pages: How it works as tabs over one card (after the Manus solutions pages) */
body.hc-b.pc-page .sp-tabs:not(#_){padding-block:clamp(72px,9vw,136px) clamp(24px,3vw,48px) !important}
body.hc-b.pc-page .sp-tabs__head:not(#_){text-align:center}
body.hc-b.pc-page .sp-tabs__head:not(#_) .pp-more__head{max-width:none !important;margin:0 auto !important;text-align:center !important}
body.hc-b.pc-page .sp-tabs:not(#_) .pp-h2,
body.hc-b.pc-page .sp-tabs:not(#_) .pp-h2 *{font-size:clamp(34px,1rem + 2.2vw,52px) !important;line-height:1.08 !important}
body.hc-b.pc-page .sp-tabs__bar:not(#_){display:flex;justify-content:center;gap:6px;margin:clamp(28px,3vw,44px) auto clamp(20px,2.4vw,32px);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.hc-b.pc-page .sp-tabs__bar:not(#_)::-webkit-scrollbar{display:none}
body.hc-b.pc-page .sp-tabs__tab:not(#_){flex:0 0 auto;height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:rgba(11,18,32,.62);
  font:inherit;font-size:16px;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease}
body.hc-b.pc-page .sp-tabs__tab:not(#_):hover{color:#0B1220}
body.hc-b.pc-page .sp-tabs__tab.is-on:not(#_){background:#E9E9E6;color:#0B1220}
body.hc-b.pc-page .sp-tabs__tab:not(#_):focus-visible{outline:2px solid #0B1220;outline-offset:2px}
body.hc-b.pc-page .sp-tabs__panel:not(#_){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(420px,42vw,580px);
  border-radius:20px;overflow:hidden;background:#F1F1EF}
body.hc-b.pc-page .sp-tabs__panel:not(#_) + .sp-tabs__panel{margin-top:20px}
body.hc-b.pc-page .sp-tabs.is-tabbed .sp-tabs__panel:not(#_) + .sp-tabs__panel{margin-top:0}
body.hc-b.pc-page .sp-tabs__panel[hidden]:not(#_){display:none !important}
body.hc-b.pc-page .sp-tabs__txt:not(#_){display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,88px)}
body.hc-b.pc-page .sp-tabs__n:not(#_){margin:0 0 16px;font-size:15px;color:rgba(11,18,32,.5);letter-spacing:.02em}
body.hc-b.pc-page .sp-tabs__txt:not(#_) h3{margin:0 0 18px;font-size:clamp(28px,1rem + 1.6vw,44px);font-weight:400;letter-spacing:-.035em;line-height:1.1;color:#0B1220}
body.hc-b.pc-page .sp-tabs__txt:not(#_) p:not(.sp-tabs__n){margin:0;max-width:460px;font-size:clamp(16px,.9rem + .3vw,19px);line-height:1.55;color:rgba(11,18,32,.6)}
body.hc-b.pc-page .sp-tabs__pic:not(#_){position:relative;background:#0B1220}
body.hc-b.pc-page .sp-tabs__pic:not(#_) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
body.hc-b.pc-page .sp-tabs:not(#_) .pp-mid{text-align:center !important;margin:clamp(32px,4vw,48px) 0 0 !important;display:flex;justify-content:center}
@media (max-width:860px){
  body.hc-b.pc-page .sp-tabs__bar:not(#_){justify-content:flex-start;margin-inline:-20px;padding-inline:20px}
  body.hc-b.pc-page .sp-tabs__panel:not(#_){grid-template-columns:1fr;min-height:0;border-radius:16px}
  body.hc-b.pc-page .sp-tabs__pic:not(#_){order:-1;aspect-ratio:16 / 10}
  body.hc-b.pc-page .sp-tabs__txt:not(#_){padding:28px 24px 32px}
}
body.hc-b.pc-page .sp-tabs__head:not(#_) :is(.pp-sign,.pp-h2){text-align:center !important;margin-inline:auto !important}
@media (max-width:860px){
  body.hc-b.pc-page .sp-tabs__tab:not(#_){max-width:min(260px,68vw);overflow:hidden;text-overflow:ellipsis;font-size:15px}
}

/* ── inner pages, polish round ───────────────────────────────────────────── */
/* no eyebrows over section titles: the title says it */
body.hc-b.pc-page .pp-sign:not(#_){display:none !important}

/* hero rhythm: label, title, lede, buttons on even steps */
body.hc-b.pc-page .pp-hero :is(.pp-eyebrow,.sp-mark):not(#_){margin:0 0 20px !important}
body.hc-b.pc-page .pp-hero .pp-title:not(#_){margin:0 0 24px !important}
body.hc-b.pc-page .pp-hero .pp-lede:not(#_){margin:0 0 36px !important}
body.hc-b.pc-page .pp-hero .pp-acts:not(#_){margin:0 !important}
/* solution pages: the product's name is the one small label over the title */
body.hc-b.pc-page .sp-hero .pp-eyebrow:not(#_){display:none !important}
body.hc-b.pc-page .sp-hero .sp-mark:not(#_){font-size:12px !important;letter-spacing:1.6px !important;text-transform:uppercase !important;color:rgba(11,18,32,.56) !important;font-weight:400 !important}

/* product pages: the product's own picture (NewVoices: the live voice) fills the first tab */
body.hc-b.pc-page .sp-tabs__pic:not(#_) > .pp-more__media{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
  margin:0 !important;border-radius:0 !important;aspect-ratio:auto !important;max-height:none !important;overflow:hidden !important}
body.hc-b.pc-page .sp-tabs__pic:not(#_) > .pp-more__media :is(img,picture){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
body.hc-b.pc-page .sp-tabs:not(#_) .pp-more__head .pp-h2{max-width:none !important}

/* proof: one ink card, the figures large and light in white, quiet labels */
body.hc-b.pc-page .pp-proof:not(#_){padding-inline:20px !important;padding-block:clamp(56px,7vw,112px) !important}
body.hc-b.pc-page .pp-proof .pp-wrap:not(#_){max-width:1240px !important;margin-inline:auto !important;padding:clamp(40px,6vw,88px) clamp(28px,5.5vw,80px) !important;
  background:#0B1220 !important;border-radius:20px !important}
body.hc-b.pc-page .pp-proof:not(#_) .pp-h2,
body.hc-b.pc-page .pp-proof:not(#_) .pp-h2 *{color:#FFFFFF !important;font-size:clamp(34px,1rem + 2.2vw,52px) !important;line-height:1.08 !important}
body.hc-b.pc-page .pp-proof .pp-flag:not(#_){border-color:rgba(255,255,255,.28) !important;color:rgba(255,255,255,.7) !important;background:none !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) li{border-top-color:rgba(255,255,255,.18) !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) strong{color:#FFFFFF !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) span{color:rgba(255,255,255,.64) !important}
body.hc-b.pc-page .pp-proof .pp-proof__note:not(#_){color:rgba(255,255,255,.46) !important}
@media (max-width:760px){
  body.hc-b.pc-page .pp-proof:not(#_){padding-inline:16px !important}
  body.hc-b.pc-page .pp-proof .pp-wrap:not(#_){border-radius:16px !important}
}
body.hc-b.pc-page .sp-tabs .pp-more__grid[hidden]:not(#_){display:none !important}
@media (min-width:861px){
  body.hc-b.pc-page .sp-tabs__bar:not(#_){flex-wrap:wrap;overflow:visible;justify-content:center;row-gap:6px}
}
@media (max-width:860px){
  body.hc-b.pc-page .sp-tabs__bar:not(#_){justify-content:flex-start !important}
}
@media (min-width:861px){
  body.hc-b.pc-page .sp-tabs__tab:not(#_){padding:0 16px;font-size:15px}
}
/* "What [product] does": an arrow at each end of the card, vertically centred, stepping through the
   tabs (10-05 item 4, prod-c.js). They sit beside the card, never on it: in the margin where the
   page has one, in a gutter the card makes room for where it does not. */
body.hc-b.pc-page .sp-tabs.has-arrows .sp-tabs__panels:not(#_){position:relative;padding-inline:60px}
body.hc-b.pc-page .sp-tabs__arr:not(#_){position:absolute;top:50%;z-index:2;width:44px;height:44px;margin:-22px 0 0;padding:0;display:grid;place-items:center;
  border:1px solid rgba(11,18,32,.18);border-radius:50%;background:#fff;color:#0B1220;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
body.hc-b.pc-page .sp-tabs__arr:not(#_) svg{width:20px;height:20px;display:block}
body.hc-b.pc-page .sp-tabs__arr:not(#_):hover{border-color:#0B1220;background:#F4F4F2}
body.hc-b.pc-page .sp-tabs__arr:not(#_):focus-visible{outline:2px solid #0B1220;outline-offset:2px}
body.hc-b.pc-page .sp-tabs__arr--prev:not(#_){left:0}
body.hc-b.pc-page .sp-tabs__arr--next:not(#_){right:0}
@media (min-width:1400px){
  body.hc-b.pc-page .sp-tabs.has-arrows .sp-tabs__panels:not(#_){padding-inline:0}
  body.hc-b.pc-page .sp-tabs__arr--prev:not(#_){left:-64px}
  body.hc-b.pc-page .sp-tabs__arr--next:not(#_){right:-64px}
}
@media (max-width:860px){
  body.hc-b.pc-page .sp-tabs.has-arrows .sp-tabs__panels:not(#_){margin-inline:-16px;padding-inline:40px}
  body.hc-b.pc-page .sp-tabs__arr:not(#_){width:36px;height:36px;margin-top:-18px}
  body.hc-b.pc-page .sp-tabs__arr:not(#_) svg{width:18px;height:18px}
  body.hc-b.pc-page .sp-tabs__arr--prev:not(#_){left:0}
  body.hc-b.pc-page .sp-tabs__arr--next:not(#_){right:0}
}
/* hero rhythm, corrected: the container's own 20px gap was stacking on the margins */
body.hc-b.pc-page .pp-hero__in:not(#_){gap:0 !important;row-gap:0 !important}
body.hc-b.pc-page .pp-hero :is(.pp-eyebrow,.sp-mark):not(#_){margin:0 0 16px !important;max-width:none !important}
body.hc-b.pc-page .pp-hero .pp-title:not(#_){margin:0 0 20px !important}
body.hc-b.pc-page .pp-hero .pp-lede:not(#_){margin:0 0 28px !important;padding-top:0 !important}

/* hero collage (prod-c.js): the page's image in a rounded card with three small product
   screens around it, on a soft grey ground. A 1080×480 stage scaled to fit. */
body.hc-b.pc-page .pc-collage{position:relative;max-width:1240px;margin:clamp(48px,6vw,80px) auto 0;box-sizing:border-box}
body.hc-b.pc-page .pc-collage__stage{position:absolute;left:60px;top:40px;transform:scale(var(--k,1));transform-origin:0 0}
body.hc-b.pc-page .pc-collage__card{position:absolute;overflow:hidden;background:#FFFFFF;border:1px solid rgba(11,18,32,.1);border-radius:20px}
body.hc-b.pc-page .pc-collage__main{border-radius:24px;border:0;background:#0B1220;z-index:1}
body.hc-b.pc-page .pc-collage__main > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
body.hc-b.pc-page .pc-collage__ui--1,body.hc-b.pc-page .pc-collage__ui--2{z-index:2}
body.hc-b.pc-page .pc-collage__ui--3{z-index:3}
body.hc-b.pc-page .pc-collage__main .pp-film:not(#_){position:absolute !important;inset:0 !important;margin:0 !important;padding:0 !important;height:auto !important;min-height:0 !important;max-width:none !important;background:#0B1220 !important}
body.hc-b.pc-page .pc-collage__main .pp-film__frame:not(#_){position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:none !important;margin:0 !important;aspect-ratio:auto !important;border-radius:0 !important}
body.hc-b.pc-page .pc-collage__main .pp-film__frame:not(#_) video{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;border-radius:0 !important}
body.hc-b.pc-page .pc-collage__main .pp-film__play:not(#_){left:22px !important;top:22px !important;right:auto !important;bottom:auto !important;transform:none !important;width:52px !important;height:52px !important;z-index:2 !important}
body.hc-b.pc-page .pc-collage__main .pp-film.is-playing .pp-film__play:not(#_){display:none !important}
/* the screens round the picture sit spread out while the page is at the top and come together as you scroll
   (Julian, 7 Oct): --p is the scroll progress prod-c.js writes on the scene, 0 at the top, 1 once the hero has moved
   up half a screen; --dx/--dy are each screen's own outward offset */
body.hc-b.pc-page .pc-collage .pc-collage__ui{translate:calc(var(--dx,0px) * (1 - var(--p,1))) calc(var(--dy,0px) * (1 - var(--p,1)))}
/* no fade on arrival (Julian, 7 Oct): the screens are simply there, spread out, and the scroll brings them in */
body.hc-b.pc-page .pc-collage.is-armed .pc-collage__card{opacity:1;transition:none}
body.hc-b.pc-page .pc-collage.is-in .pc-collage__ui--1{transition-delay:.12s}
body.hc-b.pc-page .pc-collage.is-in .pc-collage__ui--2{transition-delay:.22s}
body.hc-b.pc-page .pc-collage.is-in .pc-collage__ui--3{transition-delay:.3s}
@media (max-width:760px){
  body.hc-b.pc-page .pc-collage__ground{inset:0 16px;border-radius:18px}
  body.hc-b.pc-page .pc-collage__stage{left:40px;top:40px}
}

/* the product screens */
.sx{padding:22px;color:#0B1220;font-size:13px;line-height:1.4;text-align:left;letter-spacing:0}
.sx *{box-sizing:border-box}
.sx ul{list-style:none;margin:0;padding:0}
.sx-h{display:flex;flex-direction:column;gap:3px;margin:0 0 12px}
.sx-h b{font-size:15px;font-weight:500;letter-spacing:-.01em}
.sx-h span{font-size:12px;color:#8A8E95}
.sx-face{display:inline-block;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#D6D7D3 url(/assets/img/brand-growth.jpg) 0 0 / 400% 500% no-repeat}
.sx-legend{display:flex;gap:14px;margin:-4px 0 10px;font-size:11px;color:#5E636B}
.sx-legend span{display:inline-flex;align-items:center;gap:6px}
.sx-legend i{width:8px;height:8px;border-radius:2px}
.sx-plot{display:block;overflow:visible}
.sx-axis{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;color:#9A9EA5}
.sx-bars{display:flex;align-items:flex-end;gap:8px;padding-bottom:18px;position:relative}
.sx-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.sx-bar i{display:block;width:100%;max-width:22px;border-radius:5px 5px 2px 2px;background:#E4E4E0}
.sx-bar.is-top i{background:#0B1220}
.sx-bar em{position:absolute;bottom:-18px;font-style:normal;font-size:10px;color:#9A9EA5}
.sx-donut{display:flex;align-items:center;gap:18px}
.sx-donut ul{display:flex;flex-direction:column;gap:9px;font-size:12px}
.sx-donut li{display:flex;align-items:center;gap:8px}
.sx-donut li i{width:8px;height:8px;border-radius:50%}
.sx-gauge{display:flex;flex-direction:column;align-items:center;margin-top:6px}
.sx-scale{display:flex;justify-content:space-between;width:170px;font-size:10.5px;color:#9A9EA5;margin-top:2px}
.sx-chat{display:flex;flex-direction:column;gap:10px;height:100%;justify-content:center}
.sx-msg{max-width:88%;font-size:12.5px;line-height:1.45}
.sx-msg.is-me{align-self:flex-end;background:#0B1220;color:#fff;padding:9px 13px;border-radius:14px 14px 4px 14px}
.sx-msg:not(.is-me){display:flex;gap:9px;align-items:flex-start}
.sx-msg p{margin:0;background:#F2F2EF;padding:9px 13px;border-radius:14px 14px 14px 4px}
.sx-av{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#0B1220;display:grid;place-items:center;overflow:hidden}
.sx-av .sx-face{width:26px;height:26px}
.sx-typing{display:flex;gap:4px;padding-left:36px}
.sx-typing i{width:5px;height:5px;border-radius:50%;background:#C4C6C9;animation:sxDot 1.2s infinite ease-in-out}
.sx-typing i:nth-child(2){animation-delay:.15s}.sx-typing i:nth-child(3){animation-delay:.3s}
@keyframes sxDot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.sx-prompt{display:flex;flex-direction:column;gap:12px;height:100%;justify-content:center}
.sx-chips{display:flex;gap:6px;flex-wrap:wrap}
.sx-chips span{padding:5px 11px;border-radius:999px;border:1px solid #E1E2DE;font-size:11px;color:#5E636B}
.sx-chips span.is-on{background:#0B1220;border-color:#0B1220;color:#fff}
.sx-field{border:1px solid #E1E2DE;border-radius:16px;padding:14px 14px 10px;background:#fff}
.sx-field p{margin:0 0 18px;font-size:14px;line-height:1.4;color:#0B1220}
.sx-caret{display:inline-block;width:1.5px;height:15px;background:#0B1220;margin-left:2px;vertical-align:-2px;animation:sxBlink 1s steps(1) infinite}
@keyframes sxBlink{50%{opacity:0}}
.sx-field__bar{display:flex;justify-content:space-between;align-items:center}
.sx-plus{width:26px;height:26px;border-radius:50%;border:1px solid #E1E2DE;display:grid;place-items:center;color:#8A8E95;font-size:15px}
.sx-send{width:30px;height:30px;border-radius:50%;background:#0B1220;display:grid;place-items:center}
.sx-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #F0F0ED}
.sx-list li:first-child{border-top:0;padding-top:2px}
.sx-list span{flex:1;min-width:0}
.sx-list b{display:block;font-weight:400;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-list em{font-style:normal;font-size:10.5px;color:#8A8E95;padding:3px 8px;border-radius:999px;background:#F2F2EF;white-space:nowrap}
.sx-list em.is-on{background:#0B1220;color:#fff}
.sx-ico{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:#F2F2EF;position:relative}
.sx-ico::after{content:"";position:absolute;inset:9px;border-radius:3px;background:#C4C6C9}
.sx-ico.is-on{background:#0B1220}.sx-ico.is-on::after{background:#fff}
.sx-rank{display:flex;flex-direction:column;gap:6px}
.sx-rank li{display:grid;grid-template-columns:26px 70px 1fr;align-items:center;gap:10px;font-size:12px;padding:6px 0;border-top:1px solid #F0F0ED}
.sx-rank li:first-child{border-top:0}
.sx-rank em{width:26px;height:26px;border-radius:8px;background:#F2F2EF;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:500;color:#5E636B}
.sx-rank em.is-on{background:#0B1220;color:#fff}
.sx-rank i{display:block;height:8px;border-radius:4px;background:#F0F0ED;overflow:hidden}
.sx-rank b{display:block;height:100%;border-radius:4px;background:#C4C6C9}
.sx-rank b.is-on{background:#0B1220}
.sx-q{font-size:14px;font-weight:500;margin:0 0 12px;letter-spacing:-.01em}
.sx-survey{display:flex;flex-direction:column;gap:8px}
.sx-survey li{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #E6E6E2;border-radius:10px;overflow:hidden;font-size:12.5px}
.sx-survey li b{position:absolute;left:0;top:0;bottom:0;background:#F2F2EF;z-index:0}
.sx-survey li > *:not(b){position:relative;z-index:1}
.sx-survey li i{width:14px;height:14px;border-radius:50%;border:1.5px solid #C4C6C9}
.sx-survey li.is-on{border-color:#0B1220}
.sx-survey li.is-on i{border:4px solid #0B1220}
.sx-map{position:relative}
.sx-map svg{display:block}
.sx-pin{position:absolute;left:14%;top:6%;padding:4px 9px;border-radius:999px;background:#0B1220;color:#fff;font-size:10.5px;white-space:nowrap}
.sx-call{display:flex;align-items:center;gap:10px}
.sx-call .sx-face{width:36px;height:36px}
.sx-call b{display:block;font-size:13.5px;font-weight:500}
.sx-call em{display:flex;align-items:center;gap:6px;font-style:normal;font-size:11px;color:#8A8E95}
.sx-call em i{width:6px;height:6px;border-radius:50%;background:#0B1220;animation:sxBlink 1.4s steps(1) infinite}
.sx-wave{display:flex;align-items:center;gap:2px;height:46%;margin:18px 0 14px}
.sx-wave i{flex:1;border-radius:2px;background:#0B1220;min-height:3px}
.sx-wave i:nth-child(3n){background:#8A8E95}
.sx-call__acts{display:flex;justify-content:center;gap:14px}
.sx-call__acts span{width:30px;height:30px;border-radius:50%;background:#F2F2EF}
.sx-call__acts span.is-end{background:#0B1220}
.sx-creators{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sx-creators li{position:relative;display:grid;place-items:center}
.sx-creators .sx-face{width:54px;height:54px}
.sx-ok{position:absolute;right:calc(50% - 30px);bottom:0;width:16px;height:16px;border-radius:50%;background:#0B1220;border:2px solid #fff}
.sx-ok::after{content:"";position:absolute;left:3px;top:2px;width:4px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.sx--network{position:relative}
.sx-net{display:block}
.sx-tag{position:absolute;transform:translate(-50%,-50%);font-weight:500;padding:3px 8px;border-radius:999px;background:#fff;border:1px solid #E1E2DE;font-size:10.5px;white-space:nowrap}
.sx-weeks{display:grid;grid-template-columns:56px repeat(6,1fr);font-size:10px;color:#9A9EA5;margin:0 0 6px}
.sx-flight{display:flex;flex-direction:column;gap:8px}
.sx-flight li{display:grid;grid-template-columns:56px 1fr;align-items:center;font-size:11.5px}
.sx-flight i{position:relative;display:block;height:14px;border-radius:7px;background:repeating-linear-gradient(90deg,#F4F4F1 0 calc(16.66% - 1px),#E8E8E4 calc(16.66% - 1px) 16.66%)}
.sx-flight b{position:absolute;top:0;bottom:0;border-radius:7px;background:#C4C6C9}
.sx-flight b.is-on{background:#0B1220}
@media (prefers-reduced-motion:reduce){.sx-typing i,.sx-caret,.sx-call em i{animation:none}}
body.hc-b.pc-page .pc-collage--F .pc-collage__main .pp-film__play:not(#_){left:auto !important;right:22px !important}
.sx-next{display:flex;justify-content:flex-end;margin-top:12px}
.sx-next span{padding:7px 14px;border-radius:999px;background:#0B1220;color:#fff;font-size:11px}

/* the fan: tilted cards; the note: one sentence a person typed */
body.hc-b.pc-page .pc-collage--fan .pc-collage__card{transform-origin:50% 50%}
.sx--note{padding:0}
.sx-note{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:#F2F2EF;color:#0B1220}
.sx-note.is-ink{background:#0B1220;color:#fff}
.sx-note__mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(11,18,32,.08);color:#0B1220}
.sx-note.is-ink .sx-note__mark{background:rgba(255,255,255,.14);color:#fff}
.sx-note p{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.02em;font-weight:500}
/* the tiles */
.sx--tile{display:flex;flex-direction:column;justify-content:space-between;padding:24px;border-radius:22px}
body.hc-b.pc-page .pc-collage__card.sx--tile.is-ink{background:#0B1220;color:#fff;border-color:#0B1220}
body.hc-b.pc-page .pc-collage__card.sx--tile.is-dark{background:#2A2F3A;color:#fff;border-color:#2A2F3A}
body.hc-b.pc-page .pc-collage__card.sx--tile.is-light{background:#F2F2EF;color:#0B1220;border-color:#F2F2EF}
body.hc-b.pc-page .pc-collage__card.sx--tile.is-white{background:#fff;color:#0B1220}
.sx-tile__ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(11,18,32,.08)}
.sx--tile.is-ink .sx-tile__ico,.sx--tile.is-dark .sx-tile__ico{background:rgba(255,255,255,.14)}
.sx-tile__ico i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.85}
.sx-tile__body b{display:block;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.sx-tile__body span{display:block;margin-top:6px;font-size:12.5px;opacity:.6}
.sx-tile__spark{position:absolute;right:24px;bottom:24px;opacity:.9}
.sx--tile.is-light .sx-tile__spark,.sx--tile.is-white .sx-tile__spark{opacity:.55}
/* the live voice as the centre piece */
body.hc-b.pc-page .pc-collage__main.has-voice{background:#0B1220}
body.hc-b.pc-page .pc-collage__main.has-voice .call__voice{position:absolute;inset:0;width:100%;height:100%}
body.hc-b.pc-page .pc-collage--fan .pc-collage__ui--1{z-index:1}
body.hc-b.pc-page .pc-collage--fan .pc-collage__ui--2{z-index:2}
body.hc-b.pc-page .pc-collage--fan .pc-collage__ui--3{z-index:3}
body.hc-b.pc-page .pc-collage--fan .pc-collage__ui--4{z-index:4}
body.hc-b.pc-page .pc-collage__card.sx--note{border:0}
/* clip sideways only: the turned cards' borders were cut at the top and bottom of the stage */
body.hc-b.pc-page .pc-collage{overflow-x:clip;overflow-y:visible}
body.hc-b.pc-page .pc-collage--phone .sx-tile__spark{display:none}
body.hc-b.pc-page .pc-collage--phone .sx--tile{padding:18px}
body.hc-b.pc-page .pc-collage--phone .sx-tile__body b{font-size:18px}
/* nothing off-screen may widen the page (a hidden state of the call tile was doing it on Agent Cloud) */
html:has(body.hc-b.pc-page),body.hc-b.pc-page{overflow-x:clip}
body.hc-b.pc-page .sx-gauge{margin-top:2px}

/* tiles, richer: a badge, a big label, mini bars or a sparkline, and one tile that is the picture */
.sx-tile__pill{align-self:flex-start;padding:5px 10px;border-radius:999px;font-size:11px;background:rgba(11,18,32,.07);color:inherit;opacity:.8}
.sx--tile.is-ink .sx-tile__pill,.sx--tile.is-dark .sx-tile__pill{background:rgba(255,255,255,.14)}
.sx-tile__ico{display:none}
.sx-tile__body{margin-top:auto}
.sx-tile__body b{font-size:26px}
.sx-tile__viz{position:absolute;right:24px;bottom:22px}
.sx-tile__spark{position:static}
.sx-tile__bars{display:flex;align-items:flex-end;gap:5px;height:48px;width:110px}
.sx-tile__bars i{flex:1;border-radius:3px 3px 1px 1px;background:currentColor;opacity:.28}
.sx-tile__bars i.is-on{opacity:1}
.sx--tile.is-light .sx-tile__viz,.sx--tile.is-white .sx-tile__viz{opacity:.7}
body.hc-b.pc-page .pc-collage__card.sx--tile.is-pic{padding:0;border:0;background:#0B1220}
.sx--tile.is-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.hc-b.pc-page .pc-collage--phone .sx-tile__viz{display:none}

/* proof, again: off the black. Figures on white in soft cards, the label beneath */
body.hc-b.pc-page .pp-proof .pp-wrap:not(#_){background:transparent !important;padding:0 20px !important;border-radius:0 !important}
body.hc-b.pc-page .pp-proof:not(#_) .pp-h2,
body.hc-b.pc-page .pp-proof:not(#_) .pp-h2 *{color:#0B1220 !important}
body.hc-b.pc-page .pp-proof .pp-flag:not(#_){border-color:rgba(11,18,32,.18) !important;color:rgba(11,18,32,.56) !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_){grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;gap:20px !important;margin-top:clamp(32px,4vw,48px) !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) li{border:0 !important;background:#F4F4F1 !important;border-radius:20px !important;padding:32px 28px 30px !important;display:flex !important;flex-direction:column !important;justify-content:flex-end !important;min-height:220px}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) strong{color:#0B1220 !important;font-size:clamp(48px,1.5rem + 3.6vw,88px) !important;font-weight:300 !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) span{color:rgba(11,18,32,.6) !important;margin-top:14px !important}
body.hc-b.pc-page .pp-proof .pp-proof__note:not(#_){color:rgba(11,18,32,.5) !important;margin-top:24px !important}
@media (max-width:760px){
  body.hc-b.pc-page .pp-proof .pp-wrap:not(#_){padding:0 16px !important}
  body.hc-b.pc-page .pp-proof .pp-figs:not(#_){grid-template-columns:1fr 1fr !important;gap:12px !important}
  body.hc-b.pc-page .pp-proof .pp-figs:not(#_) li{padding:20px 18px 18px !important;min-height:150px;border-radius:16px !important}
}

/* What it connects to: the same soft cards, a small ink disc for the check */
body.hc-b.pc-page .pp-with__grid:not(#_){gap:20px !important}
body.hc-b.pc-page .pp-with__grid:not(#_) li{border:0 !important;background:#F4F4F1 !important;border-radius:20px !important;padding:28px 26px 30px !important;display:flex !important;flex-direction:column !important;gap:18px !important}
body.hc-b.pc-page .pp-with__grid:not(#_) svg{width:16px !important;height:16px !important;color:#FFFFFF !important;background:#0B1220;border-radius:50%;padding:9px;box-sizing:content-box;flex:0 0 auto}
body.hc-b.pc-page .pp-with__grid:not(#_) b{display:block;margin:0 0 8px !important}
@media (max-width:760px){
  body.hc-b.pc-page .pp-with__grid:not(#_){gap:12px !important}
  body.hc-b.pc-page .pp-with__grid:not(#_) li{padding:22px 20px !important;border-radius:16px !important}
}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) li{justify-content:flex-start !important}
body.hc-b.pc-page .pp-with__grid:not(#_) svg.pp-with__ic{background:#0B1220 !important;color:#FFFFFF !important;padding:9px !important;border-radius:50% !important;width:16px !important;height:16px !important;margin:0 !important}
body.hc-b.pc-page .sp-tabs__pic:not(#_) video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0B1220}
@media (max-width:760px){
  body.hc-b.pc-page .pp-proof .pp-figs:not(#_) strong{font-size:clamp(28px,8.6vw,40px) !important;letter-spacing:-.04em !important}
}
/* /products hero: the same rhythm as the product pages; the buttons never ride up on the paragraph */
body.hc-b.pl-c .pl-hero .pp-title:not(#_){margin-bottom:28px !important}
body.hc-b.pl-c .pl-hero .pp-acts:not(#_){margin-top:0 !important;position:static !important;transform:none !important}
@media (max-width:760px){
  body.hc-b.pl-c .pl-hero .pp-hero__in:not(#_){display:flex !important;flex-direction:column !important;gap:0 !important}
  body.hc-b.pl-c .pl-hero .pp-title:not(#_){margin-bottom:20px !important}
  body.hc-b.pl-c .pl-hero .pl-say:not(#_){margin:0 0 28px !important;order:0}
  body.hc-b.pl-c .pl-hero .pp-acts:not(#_){order:1}
}

/* proof: numbers stay on one line at a size that fits; word figures wrap at a title size */
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) strong.is-num{font-size:clamp(40px,1.2rem + 3vw,72px) !important}
body.hc-b.pc-page .pp-proof .pp-figs:not(#_) strong.is-words{font-size:clamp(24px,1rem + 1.1vw,32px) !important;line-height:1.15 !important;white-space:normal !important;font-weight:400 !important;letter-spacing:-.02em !important}
/* fan cards are as tall as their content */
body.hc-b.pc-page .pc-collage--fan .sx-prompt{justify-content:flex-start;height:auto}
/* hero titles on two lines */
body.hc-b.pc-page .pp-hero__in:not(#_){max-width:1120px !important}
body.hc-b.pc-page .pp-hero .pp-title:not(#_){max-width:30ch !important;margin-inline:auto !important}
/* a mockup inside a How-it-works tab */
body.hc-b.pc-page .sp-tabs__pic .sx-in{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#E7E7E3}
body.hc-b.pc-page .sp-tabs__pic .sx-in .pc-collage__card{max-width:100%;border-radius:18px}
body.hc-b.pc-page .sp-tabs__pic.is-voice{background:#0B1220}
body.hc-b.pc-page .sp-tabs__pic:not(#_) > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){ body.hc-b.pc-page .sp-tabs__pic .sx-in{padding:16px} body.hc-b.pc-page .sp-tabs__pic .sx-in .pc-collage__card{transform:scale(.9)} }
/* mockups: one padding, content-sized cards; the note keeps a minimum so its words breathe */
.sx-chat{height:auto;justify-content:flex-start}
.sx-prompt{height:auto;justify-content:flex-start}
.sx-note{min-height:150px}
.sx-list li:last-child{padding-bottom:0}
/* mockups: every card as tall as its content; the charts take their height from the width */
.sx-wave{height:90px}
.sx-scale{width:100%;max-width:220px}
.sx-tile__viz{position:absolute}
.sx--network{padding-bottom:22px}
.sx-net{margin-bottom:0}

/* ── /book in the approved look: the same words and the same form (lead.js), set like the other
      inner pages — centred title, the three points in a row, the form in one light-bordered card ── */
body.hc-b.bk-page .bk-hero:not(#_){min-height:0;display:block;overflow:visible;background:#FFFFFF;color:#0B1220;
  padding:calc(var(--nav-h,72px) + clamp(36px,5vw,72px)) 0 clamp(72px,9vw,136px)}
body.hc-b.bk-page .bk-hero:not(#_)::before{display:none}
/* desktop: the words on the left, the form on the right, so more of the form is in view */
body.hc-b.bk-page .bk__in:not(#_){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(40px,6vw,96px);align-items:start;max-width:1240px;margin:0 auto;padding:0 20px}
body.hc-b.bk-page .bk__copy:not(#_){text-align:left;max-width:520px;position:sticky;top:calc(var(--nav-h,72px) + 32px)}
body.hc-b.bk-page .bk__title:not(#_){font-family:'Roobert',var(--sans,ui-sans-serif),system-ui,sans-serif;font-weight:500;color:#0B1220;
  font-size:clamp(40px,1rem + 3.4vw,68px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
body.hc-b.bk-page .bk__points:not(#_){margin:32px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
body.hc-b.bk-page .bk__points:not(#_) li{display:flex;align-items:center;gap:12px;max-width:none;font-size:17px;font-weight:500;line-height:1.3;color:#0B1220}
body.hc-b.bk-page .bk__ic:not(#_){width:40px;height:40px;border-radius:50%;background:#F1F1EF;color:#0B1220;box-shadow:none;border:0}
body.hc-b.bk-page .bk__ic:not(#_) svg{width:20px;height:20px}
body.hc-b.bk-page .bk__card:not(#_){width:100%;max-width:none;margin:0;background:#FFFFFF;color:#0B1220;
  border:1px solid rgba(11,18,32,.12);border-radius:24px;padding:clamp(24px,3.4vw,44px);box-shadow:none}
body.hc-b.bk-page .bk__card .lead__lbl:not(#_){font-family:inherit;font-size:14px;font-weight:500;color:#0B1220}
body.hc-b.bk-page .bk__card input:not(#_){height:52px;border:0;border-radius:12px;background:#F1F1EF;font-family:inherit;font-size:16px;color:#0B1220;box-shadow:none}
body.hc-b.bk-page .bk__card input:not(#_):hover{box-shadow:inset 0 0 0 1px rgba(11,18,32,.25)}
body.hc-b.bk-page .bk__card input:not(#_):focus{background:#FFFFFF;box-shadow:inset 0 0 0 2px #0B1220}
body.hc-b.bk-page .bk__card .lead__pick span{font-family:inherit;font-weight:500;background:#F1F1EF;color:#0B1220}
body.hc-b.bk-page .bk__card .lead__pick:hover span{background:#E7E7E3}
body.hc-b.bk-page .bk__card .lead__pickshint{color:rgba(11,18,32,.56)}
/* the submit: ink, as every Book a demo button is on B (lead.css paints it orange with an id-strength rule) */
body.hc-b.bk-page .bk__card .lead__form .btn--dark:not(#_){background:#0B1220 !important;border-color:#0B1220 !important;color:#FFFFFF !important;
  height:56px;border-radius:999px;font-weight:600}
body.hc-b.bk-page .bk__card .lead__form .btn--dark:not(#_):hover{background:#000000 !important;border-color:#000000 !important;transform:none}
body.hc-b.bk-page .bk__card .modal__fine:not(#_){color:rgba(11,18,32,.56)}
body.hc-b.bk-page .bk__card .modal__ok h3:not(#_){font-family:inherit;font-weight:500;letter-spacing:-.02em}
@media (max-width:760px){
  body.hc-b.bk-page .bk-hero:not(#_){padding-top:calc(var(--nav-h,64px) + 32px)}
  body.hc-b.bk-page .bk__title:not(#_){font-size:clamp(34px,10vw,44px)}
  body.hc-b.bk-page .bk__in:not(#_){display:flex;flex-direction:column;gap:28px}
  body.hc-b.bk-page .bk__copy:not(#_){width:100%;position:static;max-width:none}
  body.hc-b.bk-page .bk__points:not(#_){flex-direction:column;align-items:flex-start;gap:12px;margin:24px 0 0;width:100%}
  body.hc-b.bk-page .bk__points:not(#_) li{text-align:left;font-size:16px}
  body.hc-b.bk-page .bk__card:not(#_){border-radius:20px;padding:20px}
}

/* ── the lead panel (Talk to an AI expert, the strategy session) in the approved look: the same form
      (lead.js), set like the /book card — clean panel, light fields, ink submit, no logo in the box ── */
body.hc-b .modal.lead:not(#_) .modal__scrim{background:rgba(11,18,32,.55);backdrop-filter:blur(8px)}
body.hc-b .modal.lead:not(#_) .modal__panel{max-width:600px;padding:40px;border-radius:24px;border:1px solid rgba(11,18,32,.12);background:#FFFFFF;color:#0B1220;box-shadow:none}
body.hc-b .modal.lead:not(#_) .modal__brand{display:none}
body.hc-b .modal.lead:not(#_) .modal__x{right:18px;top:18px;width:40px;height:40px;background:#F1F1EF;color:#0B1220}
body.hc-b .modal.lead:not(#_) .modal__x:hover{background:#E7E7E3}
body.hc-b .modal.lead:not(#_) .modal__x svg{width:16px;height:16px}
body.hc-b .modal.lead:not(#_) .lead__body > h3{margin:0 48px 10px 0;font-family:inherit;font-size:30px;font-weight:500;line-height:1.1;letter-spacing:-.03em;color:#0B1220}
body.hc-b .modal.lead:not(#_) .lead__body > p{margin:0 0 24px;font-size:16px;line-height:1.5;color:rgba(11,18,32,.62)}
body.hc-b .modal.lead:not(#_) .lead__form{display:flex;flex-direction:column;gap:12px;margin:0}
body.hc-b .modal.lead:not(#_) .lead__pair{grid-template-columns:1fr 1fr;gap:12px}
body.hc-b .modal.lead:not(#_) .lead__row input{height:52px;padding:0 16px;border:0;border-radius:12px;background:#F1F1EF;font-family:inherit;font-size:16px;color:#0B1220;box-shadow:none;outline:none}
body.hc-b .modal.lead:not(#_) .lead__row input::placeholder{color:rgba(11,18,32,.5)}
body.hc-b .modal.lead:not(#_) .lead__row input:hover{box-shadow:inset 0 0 0 1px rgba(11,18,32,.25)}
body.hc-b .modal.lead:not(#_) .lead__row input:focus{background:#FFFFFF;box-shadow:inset 0 0 0 2px #0B1220}
body.hc-b .modal.lead:not(#_) .lead__hint{font-family:inherit;font-size:13px;letter-spacing:0}
body.hc-b .modal.lead:not(#_) .lead__picks{margin-top:8px}
body.hc-b .modal.lead:not(#_) .lead__lbl{font-family:inherit;font-size:14px;font-weight:500;color:#0B1220}
body.hc-b .modal.lead:not(#_) .lead__pickshint{color:rgba(11,18,32,.56);font-size:13px}
body.hc-b .modal.lead:not(#_) .lead__pick span{font-family:inherit;font-weight:500;background:#F1F1EF;color:#0B1220;padding:8px 13px}
body.hc-b .modal.lead:not(#_) .lead__pick:hover span{background:#E7E7E3}
body.hc-b .modal.lead:not(#_) .lead__form .btn--dark{width:100%;height:56px;margin-top:8px;border-radius:999px;font-family:inherit;font-size:15px;font-weight:600;
  background:#0B1220 !important;border-color:#0B1220 !important;color:#FFFFFF !important;display:inline-flex;align-items:center;justify-content:center}
body.hc-b .modal.lead:not(#_) .lead__form .btn--dark:hover{background:#000000 !important;border-color:#000000 !important}
body.hc-b .modal.lead:not(#_) .modal__fine{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:rgba(11,18,32,.56);text-align:center}
body.hc-b .modal.lead:not(#_) .lead__alt{margin-top:20px;padding-top:20px;border-top:1px solid rgba(11,18,32,.1);display:flex;flex-direction:column;align-items:center;gap:12px}
body.hc-b .modal.lead:not(#_) .lead__or{font-size:14px;color:rgba(11,18,32,.62)}
body.hc-b .modal.lead:not(#_) .call__btn{height:48px;padding:0 22px;border-radius:999px;border:1px solid rgba(11,18,32,.25);background:#FFFFFF;color:#0B1220;font-family:inherit;font-size:14px;font-weight:600}
body.hc-b .modal.lead:not(#_) .call__btn:hover{border-color:#0B1220}
body.hc-b .modal.lead:not(#_) .modal__ok h3{font-family:inherit;font-size:28px;font-weight:500;letter-spacing:-.03em;color:#0B1220}
body.hc-b .modal.lead:not(#_) .modal__ok p{color:rgba(11,18,32,.62)}
body.hc-b .modal.lead:not(#_) .lead__opt{border-color:rgba(11,18,32,.12);border-radius:16px}
@media (max-width:600px){
  body.hc-b .modal.lead:not(#_){padding:0;place-items:end center}
  body.hc-b .modal.lead:not(#_) .modal__panel{max-height:92svh;border-radius:20px 20px 0 0;padding:28px 20px 24px;border-bottom:0}
  body.hc-b .modal.lead:not(#_) .lead__body > h3{font-size:26px}
  body.hc-b .modal.lead:not(#_) .lead__pair{grid-template-columns:1fr}
}

/* ── Expertise: the Code and Theory logo on the tunnel, its awards running under it (client doc, 2026-09-23) ── */
body.hc-b #why .why__slot--ct:not(#_){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,20px);padding:0 0 clamp(14px,1.6vw,22px)}
/* the wordmark is white on black (16:9, letters in the middle band): screen blend drops the black,
   a 16:4 crop keeps the band */
body.hc-b #why .why__slot--ct:not(#_) img.why__ctlogo{width:76% !important;height:auto !important;aspect-ratio:16 / 4;object-fit:cover !important;object-position:center;mix-blend-mode:screen;transform:none;margin:0;display:block}
body.hc-b #why .why__slot--ct:not(#_) .why__awards{width:100%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
body.hc-b #why .why__slot--ct:not(#_) .why__awards__reel{display:flex;width:max-content;gap:0;animation:whyAwards 32s linear infinite;will-change:transform}
body.hc-b #why .why__slot--ct:not(#_) .why__awards__reel span{display:inline-flex;align-items:center;gap:18px;padding-right:18px;white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:.01em;color:#FFFFFF}
body.hc-b #why .why__slot--ct:not(#_) .why__awards__reel span::after{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.7)}
@keyframes whyAwards{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){body.hc-b #why .why__slot--ct:not(#_) .why__awards__reel{animation:none}}
/* the tiles no longer link: no pointer, no arrow, the same layout */
body.hc-b .hc-port__cap:not(#_){cursor:default;text-decoration:none}

/* ── Expertise: the wordmark on the centre of the box, the awards along its bottom edge ── */
body.hc-b #why .why__slot--ct:not(#_){display:block;position:relative;padding:0}
body.hc-b #why .why__slot--ct:not(#_) img.why__ctlogo{position:absolute;left:50%;top:50%;translate:-50% -50%;width:62% !important;margin:0}
body.hc-b #why .why__slot--ct:not(#_) .why__awards{position:absolute;left:0;right:0;bottom:clamp(14px,1.8vw,24px)}

/* ── How it works: the mockup panes take muted tones cut from the Stagwell palette (sand from the orange,
      dusty blue from the blue, straw from the yellow, stone from the navy), the way Manus tints its panes ── */
body.hc-b.pc-page .sp-tabs__panel:nth-child(1) .sp-tabs__pic .sx-in{background:#F3E7DA}
body.hc-b.pc-page .sp-tabs__panel:nth-child(4) .sp-tabs__pic .sx-in{background:#CFDBDF}
body.hc-b.pc-page:is(.sp--questdiy,.sp--unicepta,.sp--geopulse,.sp--media_machine,.sp--id_graph,.pp--targeting-machine,.pp--agent-cloud) .sp-tabs__panel:nth-child(1) .sp-tabs__pic .sx-in{background:#E6E5D9}
body.hc-b.pc-page:is(.sp--bera,.sp--imai,.sp--numetrix,.sp--search_plus,.pp--newvoices) .sp-tabs__panel:nth-child(4) .sp-tabs__pic .sx-in{background:#EDE7D3}

/* ── the Shared context card: the tools' logos, one after another, in ink ── */
body.hc-b.pc-page .sx-logos{position:relative;height:150px}
body.hc-b.pc-page .sx-logos__item{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.94);
  animation:sxLogos calc(var(--n) * 2.2s) linear infinite;animation-delay:calc(var(--i) * 2.2s)}
body.hc-b.pc-page .sx-logos .sx-logo{display:block;width:150px;height:44px;background:#0B1220;
  -webkit-mask:var(--logo) center / contain no-repeat;mask:var(--logo) center / contain no-repeat}
@keyframes sxLogos{0%{opacity:0;transform:scale(.94)} 5%{opacity:1;transform:none} 17%{opacity:1;transform:none} 21%{opacity:0;transform:scale(.94)} 100%{opacity:0;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){body.hc-b.pc-page .sx-logos__item{animation:none} body.hc-b.pc-page .sx-logos__item[style*="--i:0"]{opacity:1;transform:none}}

/* ── Why boxes: a CTA under each paragraph (client, 2026-09-23), ink pill on the white box ── */
body.hc-b #why .why__cta:not(#_){display:inline-flex !important;align-items:center;justify-content:center;align-self:flex-start;margin-top:22px;height:44px;padding:0 22px;
  border-radius:999px;border:1px solid #0B1220;background:#0B1220 !important;color:#FFFFFF !important;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer}
body.hc-b #why .why__cta:not(#_):hover{background:#3A3F47 !important;border-color:#3A3F47 !important;color:#FFFFFF !important}
/* the Code and Theory mark as a transparent PNG (no black ground to blend, so no box round it), bigger */
body.hc-b #why .why__slot--ct:not(#_) img.why__ctlogo{width:78% !important;aspect-ratio:auto;object-fit:contain !important;mix-blend-mode:normal;background:none}
/* product and solution heroes: the words a little wider, so the paragraph sits in three lines */
body.hc-b.pc-page .pp-hero .pp-title:not(#_){max-width:36ch !important}
body.hc-b.pc-page:not(.pl-c) .pp-hero .pp-lede:not(#_){max-width:720px !important}
/* the Why box is a grid (picture and slot in column 1, words in column 2): the CTA takes the last row of the words column, under the paragraph */
body.hc-b #why .why__item > .why__cta:not(#_){grid-area:5 / 2 / 6 / 3;justify-self:start;align-self:start;margin-top:18px}
@media (max-width:760px){ body.hc-b #why .why__item > .why__cta:not(#_){grid-area:auto;margin-top:18px} }

/* ── QA pass (2026-09-23): the Why titles were touching their lead line on phones ── */
body.hc-b #why .why__item .why__head:not(#_){margin-bottom:10px}
/* proof figures on phones: two columns of big numbers ran edge to edge in their cards */
@media (max-width:480px){
  body.hc-b.pc-page .pp-proof .is-num:not(#_){font-size:clamp(28px,8.6vw,38px) !important;letter-spacing:-.03em}
}
/* How-it-works mockup panes on phones: the pane grows to its mockup instead of cropping it */
@media (max-width:860px){
  body.hc-b.pc-page .sp-tabs__pic:has(.sx-in):not(#_){aspect-ratio:auto;height:auto;min-height:0}
  body.hc-b.pc-page .sp-tabs__pic .sx-in:not(#_){position:relative;inset:auto;padding:20px;display:grid;place-items:center}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .pc-collage__card:not(#_){position:relative;left:auto !important;top:auto !important;transform:none;width:100% !important;max-width:420px;rotate:none}
}
/* tablets (761–899): the Why box stacks as a column, but the second paragraph kept its desktop centring */
@media (max-width:899px){
  body.hc-b #why .why__item:not(#_) > *{align-self:flex-start !important;margin-left:0 !important}
  body.hc-b #why .why__item:not(#_) > .why__slot{align-self:stretch !important}
}
/* the About paragraph on product pages: a readable measure on tablets and up */
body.hc-b.pc-page .pp-about .pp-wrap > p:not(#_),body.hc-b.pc-page .pp-about__text:not(#_){max-width:720px}
/* /book on tablets: two columns left the words a sliver, so the page stacks up to 1000px */
@media (max-width:1000px){
  body.hc-b.bk-page .bk__in:not(#_){display:flex;flex-direction:column;gap:28px}
  body.hc-b.bk-page .bk__copy:not(#_){width:100%;position:static;max-width:none}
  body.hc-b.bk-page .bk__points:not(#_){flex-direction:column;align-items:flex-start;gap:12px;margin:24px 0 0;width:100%}
  body.hc-b.bk-page .bk__points:not(#_) li{text-align:left}
  body.hc-b.bk-page .bk__card:not(#_){max-width:640px}
}

/* ── footer links, one voice: same size, same ink, same quiet hover (no teal, no big pair) ── */
body.hc-b .foot .foot__big:not(#_){display:flex;flex-direction:column;gap:12px}
body.hc-b .foot .foot__big a:not(#_),body.hc-b .foot .foot__small a:not(#_),body.hc-b .foot .foot__small button:not(#_){font-family:inherit;font-size:16px !important;font-weight:500;letter-spacing:0;line-height:1.3;color:#0B1220 !important;text-decoration:none;transition:color .2s ease}
body.hc-b .foot .foot__big a:not(#_):hover,body.hc-b .foot .foot__small a:not(#_):hover,body.hc-b .foot .foot__small button:not(#_):hover{color:rgba(11,18,32,.55) !important;text-decoration:underline;text-underline-offset:4px}
body.hc-b.pc-page .sp-tabs__panel:nth-child(3) .sp-tabs__pic .sx-in{background:#E6E5D9}

/* ── /products Explore pills: white on the dark caption, ink text (children too); the hover only where there is a
      pointer, so a tap on a phone does not leave the pill in its hover state with white text ── */
body.hc-b.pl-c .pc-cap .pc-go:not(#_),body.hc-b.pl-c .pc-cap .prodcard__link:not(#_),body.hc-b.pl-c .prodgroup__words .prodcard__link:not(#_){background:#FFFFFF !important;border-color:#FFFFFF !important;color:#0B1220 !important}
body.hc-b.pl-c .pc-cap .pc-go:not(#_) *,body.hc-b.pl-c .pc-cap .prodcard__link:not(#_) *,body.hc-b.pl-c .prodgroup__words .prodcard__link:not(#_) *{color:#0B1220 !important}
@media (hover:hover){
  body.hc-b.pl-c .pc-cap .pc-go:not(#_):hover,body.hc-b.pl-c .pc-cap .prodcard__link:not(#_):hover,body.hc-b.pl-c .prodgroup__words .prodcard__link:not(#_):hover{background:#E7E7E3 !important;border-color:#E7E7E3 !important;color:#0B1220 !important}
}

/* ── the tab pane clips its own corners: a composited video did not honour the panel's radius (IMAI Campaigns) ── */
body.hc-b.pc-page .sp-tabs__pic:not(#_){overflow:hidden;isolation:isolate;border-radius:0 20px 20px 0}
body.hc-b.pc-page .sp-tabs__pic:not(#_) video{border-radius:inherit}
@media (max-width:860px){ body.hc-b.pc-page .sp-tabs__pic:not(#_){border-radius:16px 16px 0 0} }

/* ── heroes: no inner side padding on the words block (it sat 44px in from the container on both sides) ── */
body.hc-b.pc-page .pp-hero__in:not(#_),body.hc-b.pl-c .pl-hero .pp-hero__in:not(#_){padding-inline:0 !important;margin-inline:auto !important}
/* the About paragraph under the product heroes runs wider, so it takes fewer lines */
body.hc-b.pc-page .pp-about .pp-wrap > p:not(#_),body.hc-b.pc-page .pp-about__text:not(#_){max-width:960px !important}

/* ── footer: the two left links sit together at the top, and both bands share the same left edge ── */
body.hc-b .foot .foot__in:not(#_){align-items:flex-start !important;padding-inline:40px !important}
body.hc-b .foot .foot__big:not(#_){justify-content:flex-start !important;gap:14px !important;height:auto !important}
body.hc-b .foot .foot__small:not(#_){gap:14px 28px !important}
body.hc-b .foot .foot__band:not(#_){padding-inline:40px !important}
body.hc-b .foot .foot__legal:not(#_),body.hc-b .foot .foot__social:not(#_){margin:0}
body.hc-b .foot .foot__brand:not(#_){margin-left:0}
@media (max-width:760px){
  body.hc-b .foot .foot__in:not(#_),body.hc-b .foot .foot__band:not(#_){padding-inline:20px !important}
}

/* ── the products field on the lead forms: a dropdown that opens to a checklist (as many as they like), instead
      of the seventeen pills in the open ── */
.lead__picks.is-dd .lead__pickshint{display:none}
.lead__picks.is-dd .lead__dd{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:52px;margin:6px 0 0;padding:0 16px;
  border:0;border-radius:12px;background:#F1F1EF;font-family:inherit;font-size:16px;color:#0B1220;text-align:left;cursor:pointer}
.lead__picks.is-dd .lead__dd:hover{box-shadow:inset 0 0 0 1px rgba(11,18,32,.25)}
.lead__picks.is-dd .lead__dd:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #0B1220}
.lead__picks.is-dd .lead__dd__label.is-empty{color:rgba(11,18,32,.5)}
.lead__picks.is-dd .lead__dd svg{width:16px;height:16px;flex:0 0 auto;transition:transform .2s ease}
.lead__picks.is-dd.is-open .lead__dd svg{transform:rotate(180deg)}
.lead__picks.is-dd .lead__pickrow{display:none;margin:8px 0 0;padding:6px;border:1px solid rgba(11,18,32,.12);border-radius:12px;background:#FFFFFF;max-height:240px;overflow:auto;flex-direction:column;flex-wrap:nowrap;gap:2px}
.lead__picks.is-dd.is-open .lead__pickrow{display:flex}
.lead__picks.is-dd .lead__pick{display:block}
.lead__picks.is-dd .lead__pick span{display:flex;width:100%;padding:9px 10px;border-radius:8px;background:transparent;box-shadow:none;font-size:14px;font-weight:500;color:#0B1220}
.lead__picks.is-dd .lead__pick:hover span{background:#F1F1EF}
.lead__picks.is-dd .lead__pick input:checked + span{background:#F1F1EF;color:#0B1220;box-shadow:none}
.lead__picks.is-dd .lead__pick input:checked + span::before{background:#0B1220;box-shadow:inset 0 0 0 1px #0B1220}
.lead__picks.is-dd .lead__dd__hint{display:block;margin:8px 0 0;font-size:12.5px;line-height:1.45;color:rgba(11,18,32,.56)}
@media (prefers-reduced-motion:reduce){.lead__picks.is-dd .lead__dd svg{transition:none}}
/* the words block keeps 20px of side padding wherever the container's auto margins run out (phones, tablets, narrow desktops) */
@media (max-width:1180px){
  body.hc-b.pc-page .pp-hero__in:not(#_),body.hc-b.pl-c .pl-hero .pp-hero__in:not(#_){padding-inline:20px !important}
}

/* ── /products phone carousel: more air between cards; who/what folded behind a + ── */
@media (max-width:760px){
  body.hc-b.pl-c .pc-rail:not(#_){gap:24px}
  body.hc-b.pl-c .pc-rail > .prodgroup:not(#_){flex-basis:82%}
}
body.hc-b.pl-c .pc-more__btn{display:inline-grid;place-items:center;width:38px;height:38px;margin:14px 0 0;padding:0;border:1px solid rgba(11,18,32,.25);border-radius:50%;background:#FFFFFF;color:#0B1220;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}
body.hc-b.pl-c .pc-more__btn svg{width:18px;height:18px;transition:transform .2s ease}
body.hc-b.pl-c .pc-more__btn:hover{border-color:#0B1220}
body.hc-b.pl-c .pc-more__btn:focus-visible{outline:2px solid #0B1220;outline-offset:2px}
body.hc-b.pl-c .prodcard.is-more .pc-more__btn{background:#0B1220;border-color:#0B1220;color:#FFFFFF}
body.hc-b.pl-c .prodcard.is-more .pc-more__btn svg{transform:rotate(45deg)}
body.hc-b.pl-c .pc-more{margin:14px 0 0;padding:18px;border-radius:14px;background:#F1F1EF;display:flex;flex-direction:column;gap:14px}
body.hc-b.pl-c .pc-more .prodcard__who,body.hc-b.pl-c .pc-more .pc-foot__what{margin:0 !important}
@media (prefers-reduced-motion:reduce){body.hc-b.pl-c .pc-more__btn,body.hc-b.pl-c .pc-more__btn svg{transition:none}}
/* /products: air between the Show me dropdown and the first product (it was 8px on phones) */
body.hc-b.pl-c .ptoc:not(#_){margin-bottom:56px !important}
@media (max-width:760px){ body.hc-b.pl-c .ptoc:not(#_){margin-bottom:40px !important} }

/* ── /products phone gallery: one arrow on the picture instead of the pair under the cards ── */
@media (max-width:760px){
  body.hc-b.pl-c .pc-rail-wrap:not(#_){position:relative}
  body.hc-b.pl-c .pc-arrows--rail:not(#_){position:absolute;top:var(--pic-mid,140px);right:8px;left:auto;margin:0;transform:translateY(-50%);z-index:4;pointer-events:none}
  body.hc-b.pl-c .pc-arrows--rail.is-end:not(#_){right:auto;left:8px}
  body.hc-b.pl-c .pc-arrows--rail:not(#_) .pc-arrow{pointer-events:auto;width:44px;height:44px;background:#FFFFFF;color:#0B1220;border:1px solid rgba(11,18,32,.12)}
  body.hc-b.pl-c .pc-arrows--rail:not(#_) .pc-arrow[hidden]{display:none}
}
/* the gallery arrow is a scroll hint: it fades out the moment the rail has moved, and does not come back */
@media (max-width:760px){
  body.hc-b.pl-c .pc-arrows--rail:not(#_){transition:opacity .25s ease}
  body.hc-b.pl-c .pc-arrows--rail.is-gone:not(#_){opacity:0;visibility:hidden}
}

/* ── hero starting points: on desktop the five sit in the open, wrapped and centred, no slider and no arrow;
      solid on the hero ground so the decoration behind never shows through ── */
body.hc-b .hcb-tags .chat__tags .tag:not(#_){background:#FAFAFA !important}
@media (min-width:900px){
  body.hc-b .hcb-tags:not(#_){width:min(100%,960px);max-width:960px}
  body.hc-b .hcb-tags .chat__tags:not(#_){flex-wrap:wrap !important;justify-content:center !important;overflow:visible !important;scroll-snap-type:none !important;-webkit-mask-image:none !important;mask-image:none !important;row-gap:10px}
  body.hc-b .hcb-tags__arw:not(#_){display:none !important}
}
@media (max-width:899px){
  body.hc-b .hcb-tags__arw:not(#_){display:none !important}
}
/* the chat overlay on phones carried two rows of starting points: the old toggle row scrolled off to the left and
   showed as a half-cut chip above the input. The row under the input (#agentTags) is the one that stays. */
@media (max-width:899px){
  body.hc-b .chat-over .ask__tags:not(#_){display:none !important}
}

/* ── the Products menu on desktop: a wide panel under the bar, three columns of products with a line each,
      and a dark banner on the right with a loop and Book a demo (after the NewIntel reference, in our language) ── */
@media (min-width:900px){
  body.hc-b .nav__in:not(#_){position:relative}
  body.hc-b .nav__drop:not(#_){position:static}
  body.hc-b .nav__panel:not(#_){left:0;right:0;top:calc(100% + 6px);width:auto;min-width:0;max-width:none;padding:24px 24px 16px;border-radius:20px;
    background:#FFFFFF;border:1px solid rgba(11,18,32,.12);box-shadow:none}
  body.hc-b .nav__mega:not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(280px,340px);gap:8px 20px;align-items:stretch}
  body.hc-b .nav__panel:not(#_){max-width:1000px;margin-inline:auto}
  body.hc-b .nav__mcol .nav__pitem:not(#_){display:flex;flex-direction:row;align-items:center;gap:14px;text-align:left}
  body.hc-b .nav__mcol .nav__pthumb:not(#_){width:48px;height:48px;border-radius:12px;object-fit:cover;flex:0 0 auto}
  body.hc-b .nav__mcol .nav__ptext:not(#_){display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
  body.hc-b .nav__mcol .nav__pdesc:not(#_){white-space:normal}
  body.hc-b .nav__mhead:not(#_){margin:6px 12px 6px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,18,32,.5)}
  body.hc-b .nav__mcol .nav__plist:not(#_){display:block;margin:0;padding:0;list-style:none}
  body.hc-b .nav__mitem:not(#_){display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px}
  body.hc-b .nav__mitem:not(#_):hover{background:#F4F4F1}
  body.hc-b .nav__mitem .nav__pname:not(#_){font-size:15px;font-weight:500;letter-spacing:-.01em;color:#0B1220}
  body.hc-b .nav__mitem .nav__pdesc:not(#_){font-size:12.5px;line-height:1.4;color:rgba(11,18,32,.56)}
  body.hc-b .nav__mcta:not(#_){position:relative;overflow:hidden;border-radius:16px;background:#0B1220;color:#FFFFFF;min-height:100%;display:flex;align-items:flex-end}
  body.hc-b .nav__mcta:not(#_) video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
  body.hc-b .nav__mcta__in:not(#_){position:relative;z-index:1;padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  body.hc-b .nav__mcta__t:not(#_){margin:0;font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#FFFFFF;text-wrap:balance}
  body.hc-b .nav__mcta__btn:not(#_){height:42px;padding:0 20px;border-radius:999px;border:0;background:#FFFFFF !important;color:#0B1220 !important;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
  body.hc-b .nav__mcta__btn:not(#_):hover{background:#E7E7E3 !important;color:#0B1220 !important}
  body.hc-b .nav__pall:not(#_){display:inline-block;margin:12px 12px 0;font-size:13.5px;color:#0B1220}
}

/* ── the cookie notice in the site's own voice: white card, ink words, ink Accept, outlined Decline (consent.js
      injects a navy card with an orange button; these outrank it) ── */
body.hc-b #saiConsent:not(#_){background:#FFFFFF;color:#0B1220;border:1px solid rgba(11,18,32,.12);border-radius:16px;padding:20px 22px;box-shadow:none;
  font:400 14px/1.5 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:560px;left:20px;right:20px;bottom:20px;margin:0 0 0 auto}
body.hc-b #saiConsent:not(#_) h2{color:#0B1220;font-size:15px;font-weight:500;letter-spacing:-.01em;margin:0 0 4px}
body.hc-b #saiConsent:not(#_) p{color:rgba(11,18,32,.62);margin:0 0 14px}
body.hc-b #saiConsent:not(#_) a{color:#0B1220;text-decoration:underline;text-underline-offset:3px}
body.hc-b #saiConsent:not(#_) button{font:600 13px 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.06em;text-transform:uppercase;height:40px;padding:0 18px}
body.hc-b #saiConsent:not(#_) .yes{background:#0B1220;color:#FFFFFF}
body.hc-b #saiConsent:not(#_) .yes:hover{background:#3A3F47}
body.hc-b #saiConsent:not(#_) .no{background:transparent;color:#0B1220;border:1px solid rgba(11,18,32,.3)}
body.hc-b #saiConsent:not(#_) .no:hover{border-color:#0B1220}
@media (max-width:520px){ body.hc-b #saiConsent:not(#_){left:12px;right:12px;bottom:12px;margin:0 auto} }
@media (min-width:900px){
  body.hc-b .nav__mitem:not(#_){text-align:left;align-items:flex-start;min-width:0;white-space:normal}
  body.hc-b .nav__mitem .nav__pname:not(#_),body.hc-b .nav__mitem .nav__pdesc:not(#_){display:block;white-space:normal;text-align:left;max-width:100%}
  body.hc-b .nav__mcol:not(#_){min-width:0;text-align:left}
  body.hc-b .nav__panel:not(#_){text-align:left}
}

@media (min-width:900px){
  /* the banner is the link to every product: the loop behind, the words and an arrow in front */
  body.hc-b .nav__mcta:not(#_){text-decoration:none;min-height:180px}
  body.hc-b .nav__mcta__in:not(#_){flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:16px}
  body.hc-b .nav__mcta__t:not(#_){font-size:22px}
  body.hc-b .nav__mcta__arw:not(#_){display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#FFFFFF;color:#0B1220;flex:0 0 auto;transition:transform .2s ease}
  body.hc-b .nav__mcta:not(#_):hover .nav__mcta__arw{transform:translateX(3px)}
}

@media (min-width:900px){
  /* menu items: the thumbnail sits on the name's line, one size, the words in a tidy block */
  body.hc-b .nav__mcol .nav__pitem:not(#_){align-items:flex-start;padding:10px 12px}
  body.hc-b .nav__mcol .nav__pthumb:not(#_){width:40px;height:40px;border-radius:10px;margin-top:1px}
  body.hc-b .nav__mcol .nav__pname:not(#_){font-size:15px;line-height:1.25}
  body.hc-b .nav__mcol .nav__pdesc:not(#_){font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body.hc-b .nav__mcta:not(#_) video{opacity:.85}
}
@media (min-width:900px){
  /* the drawn marks in the menu: bare, one size, on the name's line, no box round them */
  body.hc-b .nav__mcol .nav__pitem:not(#_){gap:12px;align-items:flex-start}
  body.hc-b .nav__mcol .nav__pmark:not(#_){flex:0 0 22px;width:22px;height:22px;margin-top:0;border-radius:0;box-shadow:none !important;background:none !important;color:#0B1220}
  body.hc-b .nav__mcol .nav__pmark:not(#_) svg{width:20px;height:20px}
  body.hc-b .nav__mcol .nav__pitem:not(#_):hover .nav__pmark{box-shadow:none !important;background:none !important}
}
@media (min-width:900px){
  /* room for each line on one line: a wider panel, a narrower banner; the line only wraps when the screen is too small */
  body.hc-b .nav__panel:not(#_){max-width:1180px}
  body.hc-b .nav__mega:not(#_){grid-template-columns:repeat(2,minmax(0,1fr)) minmax(240px,280px);gap:8px 16px}
  body.hc-b .nav__mcol .nav__pdesc:not(#_){display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal}
}
@media (min-width:900px){
  /* the marks keep their containers, as in the phone menu: a 40px rounded square with a hairline, centred on the words */
  body.hc-b .nav__mcol .nav__pitem:not(#_){align-items:center;gap:14px}
  body.hc-b .nav__mcol .nav__pmark:not(#_){flex:0 0 40px;width:40px;height:40px;border-radius:11px;margin:0;display:grid;place-items:center;
    box-shadow:inset 0 0 0 1px rgba(11,18,32,.16) !important;background:#FFFFFF !important;color:#0B1220}
  body.hc-b .nav__mcol .nav__pmark:not(#_) svg{width:20px;height:20px}
  body.hc-b .nav__mcol .nav__pitem:not(#_):hover .nav__pmark{box-shadow:inset 0 0 0 1px rgba(11,18,32,.34) !important;background:#FFFFFF !important}
}
@media (min-width:900px){
  /* the banner is only as tall as the two rows of links; the loop is cropped, not stretched */
  body.hc-b .nav__mega:not(#_){align-items:start}
  body.hc-b .nav__mcta:not(#_){min-height:0;height:122px;align-self:start}
  body.hc-b .nav__mcta__in:not(#_){padding:20px 22px}
  body.hc-b .nav__mcta__t:not(#_){font-size:20px}
  body.hc-b .nav__mcta__arw:not(#_){width:40px;height:40px}
  body.hc-b .nav__panel:not(#_){padding:20px 20px 16px}
}

/* ── /products in the suite order (client deck, 2026-09-27): picture and title link to the product page ── */
body.hc-b.pl-c .prodgroup__head:not(#_){position:relative}
body.hc-b.pl-c .prodgroup__go:not(#_){position:absolute;inset:0;z-index:2;border-radius:inherit}
body.hc-b.pl-c .prodgroup__words:not(#_){position:relative;z-index:3}
body.hc-b.pl-c .pc-row__h a:not(#_){color:inherit;text-decoration:none}
body.hc-b.pl-c .pc-row__h a:not(#_):hover{text-decoration:underline;text-underline-offset:4px}
body.hc-b.pl-c .pl-say__p{display:block}
body.hc-b.pl-c .pl-say__p + .pl-say__p{margin-top:12px}

/* ── /products (client, 2026-09-27): the hero sits on the same side gutters as the product rows; product names
      the size of the line on the picture; a colour change on hover, not an underline; ── */
@media (min-width:1181px){
  body.hc-b.pl-c .pl-hero .pp-hero__in:not(#_){max-width:none !important;padding-inline:clamp(20px,3.6vw,72px) !important;margin-inline:0 !important}
}
body.hc-b.pl-c .prodcard .pc-row__h:not(#_){font-size:clamp(24px,1rem + 1.2vw,31px) !important;line-height:1.1}
body.hc-b.pl-c .pc-row__h a:not(#_):hover{text-decoration:none;color:rgba(11,18,32,.55)}

/* ── footer on wide screens: the link columns start on the logo's left edge and sit close together ── */
body.hc-b .foot .foot__in:not(#_){max-width:none !important;width:100% !important;margin-inline:0 !important;justify-content:flex-start !important;gap:24px clamp(64px,8vw,140px) !important}
body.hc-b .foot .foot__big:not(#_),body.hc-b .foot .foot__small:not(#_){flex:0 0 auto !important;min-width:0}
body.hc-b .foot .foot__small:not(#_){display:grid !important;grid-template-columns:1fr;gap:14px !important}
body.hc-b .foot .foot__band:not(#_){max-width:none !important;width:100% !important;margin-inline:0 !important}
/* the footer's second column: every link starts on the same left edge */
body.hc-b .foot .foot__small:not(#_){justify-items:start;text-align:left}
body.hc-b .foot .foot__small:not(#_) li{text-align:left;justify-self:start;width:auto}
body.hc-b .foot .foot__small:not(#_) a,body.hc-b .foot .foot__small:not(#_) button{justify-content:flex-start;text-align:left;padding:0}

/* ── /products, two products under one number (#9): each card's Explore is a black pill on the left, under
      What it does, as the deck shows it. The white pill at the right edge was invisible on the white card. ── */
body.hc-b.pl-c .prodgroup[data-suite] .prodcard__link:not(#_){grid-column:1 !important;grid-row:5 !important;justify-self:start !important;align-self:start !important;margin:22px 0 0 !important;background:#0B1220 !important;border-color:#0B1220 !important;color:#FFFFFF !important}
body.hc-b.pl-c .prodgroup[data-suite] .prodcard__link:not(#_) *{color:#FFFFFF !important}
body.hc-b.pl-c .prodgroup[data-suite] .prodcard__link:not(#_):hover{background:#05080F !important;border-color:#05080F !important;color:#FFFFFF !important}

/* ── "From signal to action" (Machine OS and The Knowledge Machine only; client, 2026-09-29): the three Machines in a
      row, each under its own mark in its own colour, an arrow between; the orchestration sits under the middle one,
      joined to the first and the last by a line, the way the client drew it. Cards all alike on every page. ── */
body.hc-b.pc-page .mx-flow{padding-block:clamp(40px,5vw,80px) clamp(56px,7vw,112px)}
body.hc-b.pc-page .mx-flow .pp-h2:not(#_){max-width:22ch}
body.hc-b.pc-page .mx-flow__grid{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:stretch}
body.hc-b.pc-page .mx-flow__card{display:flex;min-width:0}
body.hc-b.pc-page .mx-flow__in:not(#_){flex:1;display:flex;flex-direction:column;gap:10px;min-height:0;padding:26px 26px 28px;border-radius:20px;background:#F2F2EF;box-shadow:none;color:#0B1220;text-decoration:none;transition:background .2s ease}
body.hc-b.pc-page a.mx-flow__in:not(#_):hover{background:#E8E8E4}
body.hc-b.pc-page .mx-flow__mark{width:34px;height:34px;flex:0 0 auto;margin-bottom:6px}
body.hc-b.pc-page .mx-flow__name{font-size:12px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:rgba(11,18,32,.6)}
body.hc-b.pc-page .mx-flow__t{margin-top:26px;font-size:clamp(22px,.9rem + .9vw,28px);line-height:1.12;letter-spacing:-.025em;font-weight:400;color:#0B1220}
body.hc-b.pc-page .mx-flow__d{font-size:16px;line-height:1.45;color:rgba(11,18,32,.68)}
body.hc-b.pc-page .mx-flow__arw{align-self:center;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#0B1220;color:#fff}
body.hc-b.pc-page .mx-flow__arw svg{width:16px;height:16px;flex-shrink:0}
body.hc-b.pc-page .mx-flow__base{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 64px;align-items:stretch;min-height:150px}
body.hc-b.pc-page .mx-flow__line{position:relative;display:block}
body.hc-b.pc-page .mx-flow__line::before{content:"";position:absolute;top:12px;bottom:calc(50% - 22px);border-bottom:1.5px solid #0B1220}
body.hc-b.pc-page .mx-flow__line--l::before{left:50%;right:-40px;border-left:1.5px solid #0B1220;border-bottom-left-radius:16px}
body.hc-b.pc-page .mx-flow__line--r::before{right:50%;left:-40px;border-right:1.5px solid #0B1220;border-bottom-right-radius:16px}
body.hc-b.pc-page .mx-flow__line::after{content:"";position:absolute;top:12px;width:9px;height:9px;border-left:1.5px solid #0B1220;border-top:1.5px solid #0B1220;rotate:45deg}
body.hc-b.pc-page .mx-flow__line--l::after{left:calc(50% - 4px)}
body.hc-b.pc-page .mx-flow__line--r::after{right:calc(50% - 4px)}
body.hc-b.pc-page .mx-flow__orc{display:flex;gap:16px;align-items:flex-start;padding-top:38px}
body.hc-b.pc-page .mx-flow__oic{width:34px;height:34px;flex:0 0 auto;color:#FF6D24}
body.hc-b.pc-page .mx-flow__orc p:not(#_){margin:0;max-width:none}
body.hc-b.pc-page .mx-flow__eb:not(#_){font-size:12px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:rgba(11,18,32,.6)}
body.hc-b.pc-page .mx-flow__bt:not(#_){margin-top:8px !important;font-size:clamp(22px,.9rem + .9vw,28px);line-height:1.12;letter-spacing:-.025em;color:#0B1220}
body.hc-b.pc-page .mx-flow__bd:not(#_){margin-top:8px !important;font-size:16px;line-height:1.45;color:rgba(11,18,32,.68)}
@media (min-width:861px){ body.hc-b.pc-page .mx-flow__d{min-height:2.9em} }
@media (max-width:860px){
  body.hc-b.pc-page .mx-flow__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  body.hc-b.pc-page .mx-flow__in:not(#_){padding:22px}
  body.hc-b.pc-page .mx-flow__t{margin-top:16px}
  body.hc-b.pc-page .mx-flow__arw{justify-self:center;rotate:90deg}
  body.hc-b.pc-page .mx-flow__base{display:block;min-height:0}
  body.hc-b.pc-page .mx-flow__line{display:none}
  body.hc-b.pc-page .mx-flow__orc{padding:26px 22px 0}
}

/* the orchestration is a card like the three above it, under the middle one; its lines leave its sides and rise into
   the first and the last card. The icon is the gears, in ink. The Machine mark is the logo's own four lenses. */
body.hc-b.pc-page .mx-flow__orc{margin-top:26px;padding:24px 26px 26px;border-radius:20px;background:#F2F2EF}
body.hc-b.pc-page .mx-flow__oic{color:#0B1220;width:36px;height:36px}
body.hc-b.pc-page .mx-flow__line::before{bottom:calc(50% - 13px)}
body.hc-b.pc-page .mx-flow__line--l::before{right:-64px}
body.hc-b.pc-page .mx-flow__line--r::before{left:-64px}
@media (max-width:860px){ body.hc-b.pc-page .mx-flow__orc{margin-top:10px;padding:22px} }
/* the orchestration card reads like the three above it: icon on top, label, title, sentence, on the same steps */
body.hc-b.pc-page .mx-flow__orc{flex-direction:column;gap:10px}
body.hc-b.pc-page .mx-flow__oic{width:34px;height:34px;margin-bottom:6px}
body.hc-b.pc-page .mx-flow__bt:not(#_){margin-top:36px !important}
body.hc-b.pc-page .mx-flow__bd:not(#_){margin-top:10px !important}
@media (max-width:860px){ body.hc-b.pc-page .mx-flow__bt:not(#_){margin-top:26px !important} }
/* the orchestration is not a fourth Machine: no fill, a stroke round it, and more air between it and the row above */
body.hc-b.pc-page .mx-flow__orc{background:transparent;box-shadow:inset 0 0 0 1.5px #0B1220;margin-top:48px}
body.hc-b.pc-page .mx-flow__line::before{bottom:calc(50% - 24px)}
@media (max-width:860px){ body.hc-b.pc-page .mx-flow__orc{margin-top:32px} }
/* the orchestration card's stroke is grey, not ink */
body.hc-b.pc-page .mx-flow__orc{box-shadow:inset 0 0 0 1.5px #C9C9C4}

/* ── product pages, first paint: the film and the wide picture are replaced by the scene the script builds, so they
      showed for an instant on every load and the hero jumped. With scripting on they never paint, and the hero keeps
      the scene's room until it arrives. (Without scripting the picture still shows.) ── */
@media (scripting: enabled){
  body.hc-b.pc-page:not(.pl-c) .pp-film:not(#_){display:none !important}
  body.hc-b.pc-page:not(.pl-c) .pp-hero .sp-hero__pic:not(#_){display:none !important}
  body.hc-b.pc-page:not(.pl-c) .pp-hero:not(:has(.pc-collage))::after{content:"";display:block;margin:clamp(48px,6vw,80px) auto 0;height:min(490px,calc((100vw - 40px) * .454))}
  @media (max-width:700px){
    body.hc-b.pc-page:not(.pl-c) .pp-hero:not(:has(.pc-collage))::after{height:calc((100vw - 32px) * .95)}
  }
}

/* ── /products "Show me" as the client's mockup draws it (2026-10-01): a wide FAQ dropdown, questions under category
      headings, a Matching products line with a count, and a Show all products button. next/faqs.js builds it. ── */
body.hc-b.pl-c .pfq{max-width:1240px;margin:0 auto clamp(40px,5vw,56px);padding:0 20px;box-sizing:content-box}
body.hc-b.pl-c .pfq__eyebrow:not(#_){display:flex;align-items:center;gap:18px;margin:0;font-size:12px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:rgba(11,18,32,.55)}
body.hc-b.pl-c .pfq__eyebrow::after{content:"";flex:1;height:1px;background:rgba(11,18,32,.14)}
body.hc-b.pl-c .pfq__h:not(#_){margin:clamp(28px,4vw,44px) auto clamp(24px,3vw,32px);max-width:760px;text-align:center;font-size:clamp(22px,1rem + 1vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:500;color:#0B1220}
body.hc-b.pl-c .pfq__ctl{position:relative;max-width:825px;margin:0 auto}
body.hc-b.pl-c .pfq__lead:not(#_){margin:0 0 10px;font-size:12px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:rgba(11,18,32,.55)}
body.hc-b.pl-c .pfq__btn:not(#_){display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:60px;padding:0 20px;border:1.5px solid #0B1220;border-radius:8px;background:#fff;color:#0B1220;font:inherit;font-size:17px;font-weight:500;letter-spacing:-.01em;text-align:left;cursor:pointer}
body.hc-b.pl-c .pfq__label{flex:1;min-width:0;line-height:1.3;padding:14px 0}
body.hc-b.pl-c .pfq__chev{width:16px;height:16px;flex:0 0 auto;transition:rotate .2s ease}
body.hc-b.pl-c .pfq.is-open .pfq__chev{rotate:180deg}
body.hc-b.pl-c .pfq__panel{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:30;max-height:min(60vh,560px);overflow:auto;padding:10px;border:1px solid rgba(11,18,32,.14);border-radius:10px;background:#fff}
body.hc-b.pl-c .pfq__cat:not(#_){margin:10px 0 4px;padding:14px 18px;border-radius:6px;background:#F5F5F2;font-size:13px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#0B1220}
body.hc-b.pl-c .pfq__cat:not(#_):first-child{margin-top:0}
body.hc-b.pl-c .pfq__q:not(#_){display:block;width:100%;padding:13px 18px;border:0;border-radius:6px;background:transparent;color:#0B1220;font:inherit;font-size:16px;line-height:1.35;text-align:left;cursor:pointer}
body.hc-b.pl-c .pfq__q:not(#_):hover,body.hc-b.pl-c .pfq__q:not(#_):focus-visible{background:#F5F5F2;outline:none}
body.hc-b.pl-c .pfq__q[aria-selected="true"]:not(#_){background:#0B1220;color:#fff}
body.hc-b.pl-c .pfq__match{margin-top:clamp(40px,5vw,64px)}
body.hc-b.pl-c .pfq__mh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1.5px solid #0B1220}
body.hc-b.pl-c .pfq__mt:not(#_){margin:0;font-size:clamp(28px,1.4rem + 1.6vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:400;color:#0B1220}
body.hc-b.pl-c .pfq__count{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:rgba(11,18,32,.55);white-space:nowrap;padding-bottom:6px}
body.hc-b.pl-c .pfq__row{display:flex;justify-content:flex-end;padding:18px 0;border-bottom:1px solid rgba(11,18,32,.14)}
body.hc-b.pl-c .pfq__all:not(#_){padding:12px 22px;border:0;border-radius:999px;background:#F2F2EF;color:#0B1220;font:inherit;font-size:15px;font-weight:500;cursor:pointer}
body.hc-b.pl-c .pfq__all:not(#_):hover{background:#E6E6E2}
body.hc-b.pl-c .prodgroup[hidden],body.hc-b.pl-c .prodcard[hidden]{display:none !important}
@media (max-width:760px){
  body.hc-b.pl-c .pfq{padding:0 16px}
  body.hc-b.pl-c .pfq__btn:not(#_){min-height:54px;font-size:16px;padding:0 16px}
  body.hc-b.pl-c .pfq__panel{max-height:62vh}
  body.hc-b.pl-c .pfq__mh{flex-direction:column;align-items:flex-start;gap:8px}
}
/* the FAQ block sits on the same side gutters as the hero above it */
@media (min-width:1181px){ body.hc-b.pl-c .pfq{max-width:none;padding-inline:clamp(20px,3.6vw,72px)} }
/* Show me narrower; one thin line under Matching products and no others (Julian, 2026-10-01) */
body.hc-b.pl-c .pfq__ctl{max-width:640px}
body.hc-b.pl-c .pfq__h:not(#_){margin-top:0}
body.hc-b.pl-c .pfq__mh{border-bottom:1px solid rgba(11,18,32,.16);padding-bottom:14px}
body.hc-b.pl-c .pfq__row{border-bottom:0;padding:16px 0 0}
/* air between the hero's buttons and the Explore sentence */
body.hc-b.pl-c .pfq__h:not(#_){margin-top:clamp(40px,5vw,72px)}
/* the open list sits in the page and pushes the cards down; it never lies over them (client, 2026-10-01) */
body.hc-b.pl-c .pfq__panel{position:static;margin-top:10px}
body.hc-b.pl-c .prodgroup.is-first:not(#_){border-top:0 !important}

/* ── mockup shapes added for the product teams' screens (2026-10-01): stages under a curve, a stacked bar, bubble labels ── */
.sx-stages{display:flex;gap:3px;margin-top:10px}
.sx-stages span{flex:1;padding:5px 0;border-radius:4px;font-size:10px;line-height:1.2;text-align:center;letter-spacing:.02em;color:#0B1220;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-stack{display:flex;gap:2px;height:34px;border-radius:6px;overflow:hidden;margin:4px 0 12px}
.sx-stack i{display:block;height:100%}
.sx-keys{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12px;color:#0B1220}
.sx-keys li{display:flex;align-items:center;gap:8px}
.sx-keys li i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}

/* ── the tab mockups arrive, then draw themselves: the card rises in, bars grow, lines draw, rows and segments follow
      in turn. Only inside the How-it-works tabs, only when motion is allowed. ── */
@media (prefers-reduced-motion: no-preference){
  .sp-tabs__panel.is-on .sx-in .pc-collage__card{animation:sxCard .55s cubic-bezier(.2,.7,.2,1) both}
  .sp-tabs__panel.is-on .sx-bar i{transform-origin:50% 100%;animation:sxGrowY .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.18s + var(--i,0) * .06s)}
  .sp-tabs__panel.is-on .sx-rank i b{transform-origin:0 50%;animation:sxGrowX .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i,0) * .07s)}
  .sp-tabs__panel.is-on .sx-stack i{transform-origin:0 50%;animation:sxGrowX .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0) * .05s)}
  .sp-tabs__panel.is-on .sx-list li,.sp-tabs__panel.is-on .sx-keys li,.sp-tabs__panel.is-on .sx-survey li,.sp-tabs__panel.is-on .sx-stages span{animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i,0) * .07s)}
  .sp-tabs__panel.is-on .sx-plot path[fill="none"]:not([stroke-dasharray]){stroke-dasharray:1400;stroke-dashoffset:1400;animation:sxDraw 1.1s cubic-bezier(.4,0,.2,1) .2s forwards}
  .sp-tabs__panel.is-on .sx-plot path:not([fill="none"]),.sp-tabs__panel.is-on .sx-plot circle,.sp-tabs__panel.is-on .sx-plot text{animation:sxFade .6s ease .7s both}
  .sp-tabs__panel.is-on .sx-donut svg,.sp-tabs__panel.is-on .sx-gauge svg{animation:sxPop .7s cubic-bezier(.2,.7,.2,1) .15s both}
  .sp-tabs__panel.is-on .sx-chat > *{animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i,0) * .18s)}
  .sp-tabs__panel.is-on .sx-in :is(.sx-bar,.sx-rank li,.sx-stack i,.sx-list li,.sx-keys li,.sx-survey li,.sx-stages span,.sx-chat > *):nth-child(1){--i:0}
  .sp-tabs__panel.is-on .sx-in :is(.sx-bar,.sx-rank li,.sx-stack i,.sx-list li,.sx-keys li,.sx-survey li,.sx-stages span,.sx-chat > *):nth-child(2){--i:1}
  .sp-tabs__panel.is-on .sx-in :is(.sx-bar,.sx-rank li,.sx-stack i,.sx-list li,.sx-keys li,.sx-survey li,.sx-stages span,.sx-chat > *):nth-child(3){--i:2}
  .sp-tabs__panel.is-on .sx-in :is(.sx-bar,.sx-rank li,.sx-stack i,.sx-list li,.sx-keys li,.sx-survey li,.sx-stages span,.sx-chat > *):nth-child(4){--i:3}
  .sp-tabs__panel.is-on .sx-in :is(.sx-bar,.sx-rank li,.sx-stack i,.sx-list li,.sx-keys li,.sx-survey li,.sx-stages span,.sx-chat > *):nth-child(5){--i:4}
  .sp-tabs__panel.is-on .sx-in :is(.sx-bar,.sx-rank li,.sx-stack i,.sx-list li,.sx-keys li,.sx-survey li,.sx-stages span,.sx-chat > *):nth-child(6){--i:5}
  .sp-tabs__panel.is-on .sx-in :is(.sx-bar,.sx-rank li,.sx-stack i,.sx-list li,.sx-keys li,.sx-survey li,.sx-stages span,.sx-chat > *):nth-child(7){--i:6}
  .sp-tabs__panel.is-on .sx-rank li i b{--i:inherit}
}
@keyframes sxCard{from{opacity:0;translate:0 14px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes sxGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sxGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sxRow{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes sxDraw{to{stroke-dashoffset:0}}
@keyframes sxFade{from{opacity:0}to{opacity:1}}
@keyframes sxPop{from{opacity:0;scale:.92}to{opacity:1;scale:1}}

/* ── the product's own wordmark at the top of its page (the teams' black SVGs, 2026-10-01) ── */
body.hc-b.pc-page .sp-mark--logo:not(#_){display:block;line-height:0}
body.hc-b.pc-page .sp-mark--logo:not(#_) img{display:inline-block;height:auto;max-height:28px;width:auto;max-width:min(100%,360px)}
body.hc-b.pc-page .pp-logo--ink:not(#_){height:auto;max-height:30px;width:auto;max-width:min(100%,380px);mix-blend-mode:normal;margin:0 auto 24px}
@media (max-width:760px){
  body.hc-b.pc-page .sp-mark--logo:not(#_) img{max-height:22px;max-width:min(100%,280px)}
  body.hc-b.pc-page .pp-logo--ink:not(#_){max-height:24px;max-width:min(100%,280px)}
}
/* the black wordmarks exist now, so they show (the old rule hid the white-on-black ones) */
body.hc-b.pc-page .pp-logo--ink:not(#_){display:block !important}
/* the mark sits in a centred column with no width of its own, so the image takes a fixed height, not a % width */
body.hc-b.pc-page .sp-mark--logo:not(#_){width:auto;max-width:100%}
body.hc-b.pc-page .sp-mark--logo:not(#_) img{height:26px;max-height:none;width:auto;max-width:none}
body.hc-b.pc-page .sp-mark--logo:not(#_) img[width="1576"],body.hc-b.pc-page .sp-mark--logo:not(#_) img[width="1500"]{height:20px}   /* the two very wide Machine wordmarks */
@media (max-width:760px){
  body.hc-b.pc-page .sp-mark--logo:not(#_) img{height:20px}
  body.hc-b.pc-page .sp-mark--logo:not(#_) img[width="1576"],body.hc-b.pc-page .sp-mark--logo:not(#_) img[width="1500"]{height:15px}
}
body.hc-b.pc-page .pp-logo--ink:not(#_){height:30px;max-height:none;width:auto;max-width:none}
body.hc-b.pc-page .pp-logo--ink[width="2435"]:not(#_){height:20px}
@media (max-width:760px){ body.hc-b.pc-page .pp-logo--ink:not(#_){height:24px} body.hc-b.pc-page .pp-logo--ink[width="2435"]:not(#_){height:15px} }

/* ── the dashboard panel, the dotted map and the tile grid (the teams' screens, redrawn in the site's cards) ── */
.sx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:8px;margin:0 0 12px}
.sx-stats div{padding:8px 10px;border-radius:8px;background:#F5F5F2;min-width:0}
.sx-stats em{display:block;font-style:normal;font-size:10px;line-height:1.2;color:#8A8E95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-stats b{display:block;margin-top:3px;font-size:16px;line-height:1.1;font-weight:500;letter-spacing:-.01em;color:#0B1220}
.sx-hbars{display:flex;flex-direction:column;gap:9px;margin:2px 0}
.sx-hbars li{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:10px;font-size:11px;color:#0B1220}
.sx-hbars li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-hbars li i{display:block;height:6px;border-radius:3px;background:#EFEFEC;overflow:hidden}
.sx-hbars li i b{display:block;height:100%;border-radius:3px;background:#8A8E95}
.sx-hbars li i b.is-on{background:#0B1220}
.sx-hbars li em{font-style:normal;font-size:10px;color:#8A8E95;text-align:right}
.sx-rows{margin-top:6px}
.sx-rows li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #F0F0ED;font-size:12px;color:#0B1220}
.sx-rows li:first-child{border-top:0}
.sx-rows li em{flex:0 0 auto;font-style:normal;font-size:10px;line-height:1;padding:5px 9px;border-radius:999px;background:#F2F2EF;color:#0B1220}
.sx-rows li em.is-on{background:#0B1220;color:#fff}
.sx-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.sx-foot div{padding:8px 10px;border:1px solid #EFEFEC;border-radius:8px}
.sx-foot em{display:block;font-style:normal;font-size:10px;color:#8A8E95}
.sx-foot b{display:block;margin-top:2px;font-size:14px;font-weight:500;color:#0B1220}
.sx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sx-cards div{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;background:#F5F5F2;min-width:0}
.sx-cards em{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:#fff;color:#0B1220;font-style:normal;font-size:11px;font-weight:500;margin-bottom:4px}
.sx-cards div.is-on em{background:#0B1220;color:#fff}
.sx-cards b{font-size:11px;line-height:1.2;font-weight:500;color:#0B1220;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-cards span{font-size:10px;color:#8A8E95}
@media (prefers-reduced-motion: no-preference){
  .sp-tabs__panel.is-on .sx-hbars li i b{transform-origin:0 50%;animation:sxGrowX .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i,0) * .07s)}
  .sp-tabs__panel.is-on :is(.sx-stats div,.sx-rows li,.sx-cards div,.sx-foot div){animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0) * .06s)}
  .sp-tabs__panel.is-on .sx-map svg{animation:sxFade .9s ease .2s both}
  .sp-tabs__panel.is-on .sx-in :is(.sx-hbars li,.sx-stats div,.sx-rows li,.sx-cards div,.sx-foot div)  :nth-child(1){--i:0}
  .sp-tabs__panel.is-on .sx-in :is(.sx-hbars li,.sx-stats div,.sx-rows li,.sx-cards div,.sx-foot div)  :nth-child(2){--i:1}
  .sp-tabs__panel.is-on .sx-in :is(.sx-hbars li,.sx-stats div,.sx-rows li,.sx-cards div,.sx-foot div)  :nth-child(3){--i:2}
  .sp-tabs__panel.is-on .sx-in :is(.sx-hbars li,.sx-stats div,.sx-rows li,.sx-cards div,.sx-foot div)  :nth-child(4){--i:3}
  .sp-tabs__panel.is-on .sx-in :is(.sx-hbars li,.sx-stats div,.sx-rows li,.sx-cards div,.sx-foot div)  :nth-child(5){--i:4}
  .sp-tabs__panel.is-on .sx-in :is(.sx-hbars li,.sx-stats div,.sx-rows li,.sx-cards div,.sx-foot div)  :nth-child(6){--i:5}
  .sp-tabs__panel.is-on .sx-in :is(.sx-map circle):nth-child(n+7){--i:6}
}

/* ── dash: small cards side by side (BERA Brand explorer) ── */
.sx-dash{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sx-mini{min-width:0;padding:10px 10px 9px;border:1px solid #E1E2DE;border-radius:10px;background:#fff}
.sx-mini > b{display:block;font-size:11.5px;font-weight:500;letter-spacing:-.01em;color:#0B1220;margin:0 0 8px}
.sx-mini > span{display:block;font-size:10px;color:#8A8E95;margin:-6px 0 6px}
.sx-mini .sx-hbars{gap:7px;margin:0}
.sx-mini .sx-hbars li{grid-template-columns:54px 1fr 28px;gap:6px;font-size:10px}
.sx-mini .sx-hbars li i{height:5px}
.sx-mini .sx-hbars li em{font-size:9.5px}
.sx-mini .sx-spark{display:block;width:100%;height:44px}
.sx-mini .sx-axis{margin-top:4px;font-size:9.5px}
/* ── table: a search field and saved rows (BERA My audiences) ── */
.sx-search{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #E1E2DE;border-radius:9px;color:#8A8E95;font-size:11.5px;margin:0 0 4px}
.sx-search svg{flex-shrink:0}
.sx-table li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid #F0F0ED}
.sx-table li:first-child{border-top:0}
.sx-table li > div{min-width:0}
.sx-table b{display:block;font-weight:400;font-size:12.5px;color:#0B1220;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-table span{display:block;font-size:10.5px;color:#8A8E95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sx-table em{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-style:normal;font-size:10px;color:#0B1220}
.sx-table em i{width:1px;height:10px;background:#E1E2DE}
@media (prefers-reduced-motion: no-preference){
  .sp-tabs__panel.is-on .sx-mini{animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.1s + var(--i,0) * .08s)}
  .sp-tabs__panel.is-on .sx-mini .sx-hbars li i b{animation-delay:calc(.35s + var(--i,0) * .08s)}
  .sp-tabs__panel.is-on .sx-table li,.sp-tabs__panel.is-on .sx-search{animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0) * .09s)}
  .sp-tabs__panel.is-on .sx-table li.is-new{animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both,sxNew 2.4s ease both;animation-delay:.9s,.9s}
  .sp-tabs__panel.is-on .sx-in .sx-dash .sx-mini:nth-child(1){--i:0}
  .sp-tabs__panel.is-on .sx-in .sx-dash .sx-mini:nth-child(2){--i:1}
  .sp-tabs__panel.is-on .sx-in .sx-dash .sx-mini:nth-child(3){--i:2}
  .sp-tabs__panel.is-on .sx-in .sx-dash .sx-mini:nth-child(4){--i:3}
  .sp-tabs__panel.is-on .sx-in .sx-table li:nth-child(1){--i:1}
  .sp-tabs__panel.is-on .sx-in .sx-table li:nth-child(2){--i:2}
  .sp-tabs__panel.is-on .sx-in .sx-table li:nth-child(3){--i:3}
}
@keyframes sxNew{0%{background:#F5F5F2;outline:6px solid #F5F5F2}100%{background:transparent;outline:6px solid transparent}}

/* ── models: a big card that changes model, the marks in a row under it (Agent Cloud, Leading LLMs) ── */
.sx-models{display:grid;position:relative}
.sx-model{grid-area:1/1;padding:16px 16px 14px;border:1px solid #E1E2DE;border-radius:14px;background:#fff;color:#0B1220;opacity:0}
.sx-model:first-child{opacity:1}
.sx-model__mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#F5F5F2;margin:0 0 12px}
.sx-model b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;margin:0 0 6px}
.sx-model p{margin:0 0 14px;font-size:12px;line-height:1.45;color:#5F636B}
.sx-model em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11px;color:#0B1220}
.sx-model__row{display:flex;gap:8px;margin-top:10px}
.sx-model__chip{display:grid;place-items:center;flex:1;height:36px;border-radius:10px;border:1px solid #E1E2DE;color:#0B1220;opacity:.35}
.sx-model__chip:first-child{opacity:1;background:#F5F5F2}
@media (prefers-reduced-motion: no-preference){
  .sp-tabs__panel.is-on .sx-model{animation:sxModel calc(var(--n) * 3.2s) ease-in-out infinite both;animation-delay:calc(var(--k) * 3.2s)}
  .sp-tabs__panel.is-on .sx-model:first-child,.sp-tabs__panel.is-on .sx-model__chip:first-child{opacity:0;background:transparent}
  .sp-tabs__panel.is-on .sx-model__chip{animation:sxModelChip calc(var(--n) * 3.2s) ease-in-out infinite both;animation-delay:calc(var(--k) * 3.2s)}
}
@keyframes sxModel{0%{opacity:0;translate:0 8px}4%{opacity:1;translate:0 0}23%{opacity:1;translate:0 0}26%{opacity:0;translate:0 -6px}100%{opacity:0;translate:0 -6px}}
@keyframes sxModelChip{0%{opacity:.35;background:transparent}3%{opacity:1;background:#F5F5F2}24%{opacity:1;background:#F5F5F2}27%{opacity:.35;background:transparent}100%{opacity:.35;background:transparent}}
.sx-ico--mark{display:grid;place-items:center;color:#0B1220}
.sx-ico--mark::after{content:none}
.sx-ico--mark.is-on{color:#fff}

/* ── real map with pulsing pins ── */
.sx-map--real{position:relative;overflow:hidden;border-radius:10px;background:#F6F6F3}
.sx-map--real img{display:block;width:100%;height:100%;object-fit:cover}
.sx-pulse{position:absolute;width:calc(7px * var(--s,1));height:calc(7px * var(--s,1));margin:calc(-3.5px * var(--s,1)) 0 0 calc(-3.5px * var(--s,1));border-radius:50%;background:#0B1220;border:1.5px solid #fff}
.sx-pulse.is-main{width:12px;height:12px;margin:-6px 0 0 -6px}
.sx-pulse::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid #0B1220;opacity:0}
@media (prefers-reduced-motion: no-preference){
  .sx-pulse::before{animation:sxPulse 2.4s ease-out infinite;animation-delay:var(--d,0s)}
  .sx-pulse.is-main::before{animation-duration:2s}
}
@keyframes sxPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}}

/* ── Expertise: the Code and Theory mark a size down and higher, the three awards turning under it as logos
      (the same reel as Experience: one at a time, white), the text marquee gone (Julian, 2026-10-01) ── */
body.hc-b #why .why__slot--ct:not(#_) img.why__ctlogo{width:54% !important;top:40%}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards{inset:auto;left:50%;top:60%;translate:-50% 0;margin:0;width:36%;height:20%;overflow:hidden}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo{background:#FFFFFF !important}
body.hc-b #why .why__slot--ct:not(#_) .why__awards{display:none}

/* the awards reel keeps the Experience reel's movement and timing exactly (0.67s in, 1.5s hold, 0.72s out, one
   handing over to the next), but there are three of them, so the keyframes are cut for a cycle of three */
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo{animation-name:whyReel3;animation-duration:7.2s;animation-delay:calc(var(--i) * 2.4s)}
@keyframes whyReel3{
  0%{transform:translateY(112%)}
  9.3%{transform:translateY(0)}
  30.2%{transform:translateY(0)}
  40.3%{transform:translateY(-112%)}
  100%{transform:translateY(-112%)}
}
@media (prefers-reduced-motion:reduce){body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo{animation:none}}

/* ── Expertise: Code and Theory is one of the four in the reel, in the middle of the box like Experience's brands,
      the Experience movement cut for a cycle of four (0.67s in, 1.5s hold, 0.72s out) ── */
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards{inset:0;translate:none;margin:auto;width:44%;height:14%}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo{animation-name:whyReel4;animation-duration:9.6s;animation-delay:calc(var(--i) * 2.4s)}
@keyframes whyReel4{
  0%{transform:translateY(112%)}
  7%{transform:translateY(0)}
  22.6%{transform:translateY(0)}
  30.2%{transform:translateY(-112%)}
  100%{transform:translateY(-112%)}
}
@media (prefers-reduced-motion:reduce){
  body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo{animation:none}
  body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo[style*="--i:0;"]{transform:none}
}

/* The One Show mark twice the size (Julian, 2026-10-01): the window is twice as tall so it can be, and the wide marks
   keep their old size (Code and Theory and Fast Company are bound by the width anyway; ADWEEK is held at half height) */
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards{height:28%}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo[style*="adweek"]{-webkit-mask-size:auto 50%;mask-size:auto 50%}

/* ═══ the six design decks of 2026-10-05: the teams' screens redrawn as mockups ═══ */
/* a score gauge: the figure inside the arc, the benchmarks in pills */
.sx-gauge--score .sx-gauge__dial{position:relative;width:210px;max-width:100%}
.sx-gauge--score .sx-gauge__dial svg{display:block;width:100%;height:auto}
.sx-gauge__mid{position:absolute;left:0;right:0;bottom:2px;text-align:center;color:#0B1220}
.sx-gauge__mid b{display:block;font-size:34px;line-height:1;font-weight:500;letter-spacing:-.03em}
.sx-gauge__mid b i{font-style:normal;font-size:15px;letter-spacing:0;vertical-align:top;margin-left:1px}
.sx-gauge__mid span{display:block;margin-top:4px;font-size:10.5px;color:#8A8E95}
.sx-gauge--score .sx-scale{width:210px;max-width:100%}
.sx-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
.sx-pills span{padding:5px 11px;border-radius:999px;background:#F5F5F2;font-size:10.5px;color:#5E636B}
.sx-pills span b{font-weight:500;color:#0B1220}
/* ring: the equity score and its parts */
.sx-ring{display:flex;align-items:center;gap:16px}
.sx-ring__dial{position:relative;flex:0 0 auto}
.sx-ring__dial svg{display:block}
.sx-ring__mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#0B1220}
.sx-ring__mid em{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#8A8E95}
.sx-ring__mid b{font-size:24px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.sx-ring__mid span{font-size:11px;color:#5E636B}
.sx-ring__cells{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sx-ring__cells li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 11px;border-radius:9px;background:#F5F5F2}
.sx-ring__cells em{font-style:normal;font-size:10.5px;color:#8A8E95;white-space:nowrap}
.sx-ring__cells b{font-size:13.5px;font-weight:500;color:#0B1220}
/* funnel */
.sx-funnel{display:grid;grid-template-columns:minmax(0,104px) 1fr;gap:12px;align-items:start}
.sx-funnel ul{display:flex;flex-direction:column;gap:4px}
.sx-funnel li{display:flex;align-items:center;gap:8px;border-top:1px solid #F0F0ED}
.sx-funnel li:first-child{border-top:0}
.sx-funnel li b{flex:0 0 34px;font-size:13.5px;font-weight:500;color:#0B1220}
.sx-funnel li span{min-width:0;font-size:10.5px;line-height:1.25;color:#5E636B}
.sx-funnel li em{display:block;font-style:normal;font-size:9.5px;color:#9A9EA5}
.sx-funnel svg{display:block;width:100%}
/* brands: one brand at a time, three ticked bars */
.sx-brand{padding:13px 14px 12px}
.sx-brand__h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 9px}
.sx-brand__h b{font-size:13.5px;font-weight:500;margin:0 !important}
.sx-brand__h span{font-size:10px;color:#8A8E95;white-space:nowrap}
.sx-brand ul{display:flex;flex-direction:column;gap:9px}
.sx-brand li > div:first-child{display:flex;align-items:baseline;gap:7px;margin-bottom:5px}
.sx-brand li em{font-style:normal;font-size:9.5px;color:#8A8E95}
.sx-brand li b{font-size:11.5px;font-weight:500;margin:0 !important;display:inline !important}
.sx-brand li u{margin-left:auto;text-decoration:none;font-size:9.5px;line-height:1;padding:4px 7px;border-radius:999px;background:#F2F2EF;color:#0B1220}
.sx-brand li u.is-down{background:#0B1220;color:#fff}
.sx-ticks{display:flex;align-items:center;gap:10px}
.sx-ticks i{flex:1;height:13px;background:repeating-linear-gradient(90deg,#E4E4E0 0 2.5px,transparent 2.5px 5.5px)}
.sx-ticks i b{display:block !important;height:100%;margin:0 !important;background:repeating-linear-gradient(90deg,#0B1220 0 2.5px,#fff 2.5px 5.5px)}
.sx-ticks span{flex:0 0 42px;text-align:right;font-size:11.5px;color:#0B1220}
.sx-model__chip--txt{font-size:10.5px;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bubbles */
.sx-bubbles{display:block;width:100%;height:auto;margin:-4px 0 8px;font-family:inherit}
.sx-hbars--top li{grid-template-columns:60px 1fr 44px}
/* survey builder */
.sx-build__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.sx-build__h b{font-size:14px;font-weight:500;letter-spacing:-.01em}
.sx-build__h span{font-size:10.5px;color:#5E636B;padding:5px 11px;border:1px solid #E1E2DE;border-radius:8px}
.sx-build__q{margin:0 0 10px;padding:10px 12px;border:1px solid #E1E2DE;border-radius:10px;font-size:12.5px;line-height:1.4;font-weight:500;color:#0B1220}
.sx-build__ai{display:flex;gap:8px;margin:0 0 10px;font-size:11px;line-height:1.45;color:#5E636B}
.sx-build__ai .sx-av{flex:0 0 auto;margin-top:1px}
.sx-build__ai b{font-weight:500;color:#0B1220}
.sx-opts{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border-radius:10px;background:#F5F5F2}
.sx-opts li{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.35;color:#0B1220}
.sx-opts li i{flex:0 0 auto;width:12px;height:12px;margin-top:1px;border-radius:50%;border:1.5px solid #C4C6C9;background:#fff}
.sx-opts li.is-on i{border:4px solid #0B1220}
.sx-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.sx-btns span{padding:7px 14px;border-radius:999px;border:1px solid #E1E2DE;font-size:11px;color:#0B1220}
.sx-btns span.is-on{background:#0B1220;border-color:#0B1220;color:#fff}
/* concept test */
.sx-concept{border-radius:10px;overflow:hidden;height:132px;margin:0 0 10px}
.sx-concept svg{display:block;width:100%;height:100%}
.sx-fields{display:grid;grid-template-columns:104px 1fr;gap:8px}
.sx-fields div{padding:7px 11px;border:1px solid #E1E2DE;border-radius:9px;min-width:0}
.sx-fields em{display:block;font-style:normal;font-size:9.5px;color:#8A8E95}
.sx-fields b{display:block;font-size:11.5px;font-weight:400;color:#0B1220;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* engines */
.sx-engines li{display:grid;grid-template-columns:28px 78px 1fr 34px;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #F0F0ED;font-size:12px;color:#0B1220}
.sx-engines li:first-child{border-top:0;padding-top:2px}
.sx-engines li:last-child{padding-bottom:0}
.sx-engines em{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#F2F2EF;color:#0B1220}
.sx-engines em.is-on{background:#0B1220;color:#fff}
.sx-engines i{display:block;height:6px;border-radius:3px;background:#EFEFEC;overflow:hidden}
.sx-engines i b{display:block;height:100%;border-radius:3px;background:#8A8E95}
.sx-engines i b.is-on{background:#0B1220}
.sx-engines u{text-decoration:none;font-size:11px;color:#5E636B;text-align:right}
/* US states */
.sx-states{position:relative}
.sx-states img{display:block;width:100%;height:100%}
.sx-ramp{margin-top:10px;height:7px;border-radius:4px;overflow:hidden}
.sx-ramp i{display:block;height:100%;background:linear-gradient(90deg,#E9EEF1,#CBD8DE 20%,#9DB6C1 40%,#5F8799 60%,#1F5870 80%,#003349)}
.sx-ramp + .sx-axis{margin-top:5px}
/* three options */
.sx-optcards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sx-optcards div{display:flex;flex-direction:column;min-width:0;padding:11px 10px 12px;border:1px solid #E1E2DE;border-radius:11px;color:#0B1220}
.sx-optcards div:first-child{background:#F5F5F2;border-color:#0B1220}
.sx-optcards em{font-style:normal;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:#8A8E95}
.sx-optcards b{margin:4px 0 14px;font-size:12px;line-height:1.25;font-weight:500;min-height:30px}
.sx-optcards svg{margin:auto auto 0}
/* sources */
.sx-sources{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sx-sources div{display:grid;place-items:center;height:62px;border:1px solid #E1E2DE;border-radius:11px;color:#0B1220}
.sx-sources b{font-size:14px;font-weight:500;letter-spacing:-.02em}
.sx-sources i{display:block;width:62%;height:22px;background:#0B1220;-webkit-mask:var(--logo) center / contain no-repeat;mask:var(--logo) center / contain no-repeat}
/* collaboration */
.sx-collab{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 4px}
.sx-collab svg{display:block;max-width:100%;height:auto}
.sx-gear{transform-box:fill-box;transform-origin:center}
/* variants */
.sx-variants{display:flex;flex-direction:column;gap:6px}
.sx-variants li{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center;padding-top:6px;border-top:1px solid #F0F0ED}
.sx-variants li:first-child{border-top:0;padding-top:0}
.sx-variants b{display:block;font-size:12px;font-weight:500;color:#0B1220}
.sx-variants span{display:block;font-size:10px;color:#8A8E95}
.sx-variants p{display:flex;flex-wrap:wrap;gap:3px;margin:0}
.sx-variants p i{width:10px;height:10px;border-radius:2.5px;background:#E4E4E0}
.sx-variants p i:nth-child(4n+1){background:#0B1220}
.sx-variants p i:nth-child(4n+3){background:#BDBFBA}
/* marks */
.sx-marks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sx-marks div{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 8px 13px;border:1px solid #E1E2DE;border-radius:11px;color:#0B1220}
.sx-marks span{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:#F5F5F2}
.sx-marks b{font-size:12.5px;font-weight:500}
.sx-marks em{font-style:normal;font-size:10px;line-height:1;padding:4px 9px;border-radius:999px;background:#0B1220;color:#fff}
/* a long question as a card title wraps instead of being cut */
.sx-h b{overflow-wrap:anywhere}
.sx-bars--mini{margin:2px 0 12px}
.sx-bars--mini .sx-bar em{font-size:9px}
@media (prefers-reduced-motion: no-preference){
  .sp-tabs__panel.is-on :is(.sx-ring__cells li,.sx-funnel li,.sx-engines li,.sx-opts li,.sx-fields div,.sx-variants li,.sx-pills span){animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i,0) * .07s)}
  .sp-tabs__panel.is-on .sx-in :is(.sx-ring__cells li,.sx-funnel li,.sx-engines li,.sx-opts li,.sx-fields div,.sx-variants li,.sx-pills span):nth-child(1){--i:0}
  .sp-tabs__panel.is-on .sx-in :is(.sx-ring__cells li,.sx-funnel li,.sx-engines li,.sx-opts li,.sx-fields div,.sx-variants li,.sx-pills span):nth-child(2){--i:1}
  .sp-tabs__panel.is-on .sx-in :is(.sx-ring__cells li,.sx-funnel li,.sx-engines li,.sx-opts li,.sx-fields div,.sx-variants li,.sx-pills span):nth-child(3){--i:2}
  .sp-tabs__panel.is-on .sx-in :is(.sx-ring__cells li,.sx-funnel li,.sx-engines li,.sx-opts li,.sx-fields div,.sx-variants li,.sx-pills span):nth-child(4){--i:3}
  .sp-tabs__panel.is-on .sx-in :is(.sx-ring__cells li,.sx-funnel li,.sx-engines li,.sx-opts li,.sx-fields div,.sx-variants li,.sx-pills span):nth-child(5){--i:4}
  .sp-tabs__panel.is-on .sx-ring__dial svg{animation:sxSpin 1.1s cubic-bezier(.2,.7,.2,1) both}
  .sp-tabs__panel.is-on .sx-ring__mid{animation:sxFade .6s ease .45s both}
  .sp-tabs__panel.is-on .sx-funnel path{transform-box:fill-box;transform-origin:50% 0;animation:sxGrowY .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0) * .1s)}
  .sp-tabs__panel.is-on .sx-engines i b,.sp-tabs__panel.is-on .sx-ticks i b{transform-origin:0 50%;animation:sxGrowX .8s cubic-bezier(.2,.7,.2,1) .3s both}
  .sp-tabs__panel.is-on .sx-bub{transform-box:fill-box;transform-origin:center;animation:sxPop .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(.1s + var(--i,0) * .05s)}
  .sp-tabs__panel.is-on .sx-knob{animation:sxFade .4s ease 1.2s both}
  .sp-tabs__panel.is-on .sx-gauge__mid{animation:sxFade .6s ease .5s both}
  .sp-tabs__panel.is-on .sx-opts li.is-on i{animation:sxPick 3.6s ease-in-out 1s infinite both}
  .sp-tabs__panel.is-on .sx-variants p i{animation:sxPop .35s ease both;animation-delay:calc(.2s + var(--i,0) * .018s)}
  .sp-tabs__panel.is-on .sx-concept svg{animation:sxFade .8s ease .15s both}
  .sp-tabs__panel.is-on .sx-states img{animation:sxFade .9s ease .15s both}
  .sp-tabs__panel.is-on .sx-optcards div{animation:sxOpt calc(var(--n) * 2.4s) ease-in-out infinite both;animation-delay:calc(var(--k) * 2.4s)}
  .sp-tabs__panel.is-on .sx-optcards div:first-child{background:transparent;border-color:#E1E2DE}
  .sp-tabs__panel.is-on :is(.sx-sources,.sx-marks) div{animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--k,0) * .09s)}
  .sx-gear{animation:sxTurn 9s linear infinite}
  .pc-collage.is-in .sx-variants p i{animation:sxPop .35s ease both;animation-delay:calc(.5s + var(--i,0) * .018s)}
}
@keyframes sxSpin{from{opacity:0;rotate:-90deg}to{opacity:1;rotate:0deg}}
@keyframes sxTurn{to{rotate:360deg}}
@keyframes sxPick{0%,18%{border-width:1.5px;border-color:#C4C6C9}26%,100%{border-width:4px;border-color:#0B1220}}
@keyframes sxOpt{0%{background:transparent;border-color:#E1E2DE}4%{background:#F5F5F2;border-color:#0B1220}30%{background:#F5F5F2;border-color:#0B1220}34%{background:transparent;border-color:#E1E2DE}100%{background:transparent;border-color:#E1E2DE}}
.sx-hbars--big{gap:8px}
.sx-hbars--big li{grid-template-columns:78px 1fr;font-size:11.5px}
.sx-hbars--big li i{height:24px;border-radius:7px;background:#F5F5F2}
.sx-hbars--big li i b{border-radius:7px}
.sx-hbars--big li em{display:none}
.sx-hbars--wide li{grid-template-columns:118px 1fr 36px}

/* two-line lockups at the top of a product page (NEW by Stagwell AI, IMAI's official mark) stand taller than the
   one-line wordmarks, so their letters come out the same size */
body.hc-b.pc-page .sp-mark--logo:not(#_) img[width="324"],body.hc-b.pc-page .sp-mark--logo:not(#_) img[width="316"]{height:46px}
@media (max-width:760px){ body.hc-b.pc-page .sp-mark--logo:not(#_) img[width="324"],body.hc-b.pc-page .sp-mark--logo:not(#_) img[width="316"]{height:38px} }
/* /products: a product that shares its number with the one above (NEW by Stagwell AI, with IMAI) has its own
   picture tile and sits close under it, as one group */
body.hc-b.pl-c .prodgroup--also:not(#_){padding-top:clamp(14px,1.6vw,22px)}

/* ── Expertise reel (Luis's recording, 2026-10-05) ──
   The box went empty for about half a second at every handover: the outgoing mark left before the incoming one
   had started. Now the two move together, like a belt (out begins at 25%, exactly when the next one's 0% begins),
   and the window fades at its top and bottom edges, so nothing shows as a sliver on the way in.
   Code and Theory was the smallest of the four: the window is wider, so its long wordmark stands as tall as the
   others; the three award marks keep their size. */
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards{width:64%;-webkit-mask:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo{animation-name:whyReel4b}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo[style*="one-show"]{-webkit-mask-size:auto 100%;mask-size:auto 100%}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo[style*="fast-company"]{-webkit-mask-size:68% auto;mask-size:68% auto}
@keyframes whyReel4b{
  0%{transform:translateY(112%)}
  7%{transform:translateY(0)}
  25%{transform:translateY(0)}
  32%{transform:translateY(-112%)}
  100%{transform:translateY(-112%)}
}

/* ── Fonts: the older stylesheets (home-c.css, prod-c.css) declare Roobert as 260 KB .ttf files at weights 300, 400 and
      600–700, and those were the faces the browser actually used, so on a reload the bold labels (the nav buttons) were
      drawn in a fallback and then jumped when the big file arrived. The same three faces exist as 65 KB .woff2: declared
      again here with the SAME weights, last, they replace the .ttf ones, and the pages preload the two the first screen
      needs (regular and bold). Same typeface, same metrics, a quarter of the bytes. (2026-10-05) ── */
@font-face{font-family:'Roobert';font-style:normal;font-weight:300;font-display:swap;src:url(/next/assets/fonts/roobert/roobert-light.woff2) format('woff2')}
@font-face{font-family:'Roobert';font-style:normal;font-weight:400;font-display:swap;src:url(/next/assets/fonts/roobert/roobert-regular.woff2) format('woff2')}
@font-face{font-family:'Roobert';font-style:normal;font-weight:600 700;font-display:swap;src:url(/next/assets/fonts/roobert/roobert-bold.woff2) format('woff2')}

/* ── the chat's small print, out of the box and under the starting points: small, quiet, centred ── */
body.hc-b .askbox__notice--out:not(#_){max-width:620px;margin:16px auto 0;padding:0 16px;text-align:center;font-size:11.5px;line-height:1.5;color:#8A8E95}
body.hc-b .askbox__notice--out:not(#_) strong{font-weight:500;color:#5E636B}
body.hc-b .askbox__notice--out:not(#_) a{color:#5E636B;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
body.hc-b .askbox__notice--out:not(#_) a:hover{color:#0B1220}
body.hc-b .askbox__notice--out:not(#_) .askbox__out{display:inline-block;margin-left:3px;vertical-align:-1px}

/* ── Phones: "Book a demo" sits in the bar beside the menu icon, and the icon stands alone, without the word "Menu" /
      "Close" next to it (Julian, 2026-10-05). The word stays for screen readers. ── */
@media (max-width:820px){
  body.hc-b .nav .nav__acts:not(#_){gap:8px}
  body.hc-b .nav .nav__acts > .btn--ink[data-cta="session"]:not(#_){display:inline-flex !important;height:36px !important;min-height:0 !important;padding:0 14px !important;font-size:11.5px !important;letter-spacing:.02em;white-space:nowrap}
  body.hc-b .nav .nav__blbl:not(#_){position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  body.hc-b .nav .nav__burger:not(#_){width:40px;min-width:40px;padding:0;justify-content:center;gap:0}
}
@media (max-width:350px){
  body.hc-b .nav .nav__acts:not(#_){gap:4px}
  body.hc-b .nav .nav__acts > .btn--ink[data-cta="session"]:not(#_){height:34px !important;padding:0 11px !important;font-size:10.5px !important}
}

/* ── Footer on phones: the six links are one list with one rhythm. They are two lists in the markup, and the second
      started 11px further down than the links sit from each other (Julian, 2026-10-05). ── */
@media (max-width:760px){
  body.hc-b .foot .foot__in:not(#_){gap:14px 0 !important;align-items:flex-start !important}
  body.hc-b .foot .foot__big:not(#_),body.hc-b .foot .foot__small:not(#_){display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;gap:14px !important;flex:0 0 100% !important;margin:0 !important;padding:0 !important}
  body.hc-b .foot .foot__big:not(#_) > li,body.hc-b .foot .foot__small:not(#_) > li{margin:0 !important;padding:0 !important;line-height:1.3}
  body.hc-b .foot .foot__big:not(#_) > li > *,body.hc-b .foot .foot__small:not(#_) > li > *{display:inline-block;margin:0 !important;padding:0 !important;line-height:1.3 !important;min-height:0 !important;height:auto !important}
}

/* ── Why reels, the logos' sizes (Julian, 2026-10-05) ──
   The One Show's edges looked see-through: the awards window fades at its top and bottom, and that mark stood the
   window's full height, so the fade ate its top and bottom. The fade is thinner now and the mark stands inside it;
   the window is a little taller so the mark keeps its size, and the other three keep theirs. */
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards{height:32%;-webkit-mask:linear-gradient(transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo[style*="one-show"]{-webkit-mask-size:auto 84%;mask-size:auto 84%}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo[style*="adweek"]{-webkit-mask-size:auto 44%;mask-size:auto 44%}
/* phones: The One Show a size up, and the brands under Experience a size up too */
@media (max-width:760px){
  body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards{width:72%;height:42%}
  body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo[style*="adweek"]{-webkit-mask-size:auto 36%;mask-size:auto 36%}
  body.hc-b #why .why__slot--ct:not(#_) .why__reel--awards .why__logo[style*="fast-company"]{-webkit-mask-size:66% auto;mask-size:66% auto}
  body.hc-b #why .why__slot--logos:not(#_) .why__reel{width:46% !important;height:15% !important}
}

/* ── The phone menu (Julian, 2026-10-05) ──
   Open, it is the top layer: the floating "Ask Stagwell AI" button and its "I can talk" bubble step out while it is
   open (they sat on top of the menu's own Ask field and Book a demo) and come back when it closes.
   "View all products" is the same card as in the desktop mega menu: the dark tile with the moving mosaic, the words
   and the round arrow. */
body.menu-open #hcLaunch:not(#_){opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transition:opacity .15s ease,visibility 0s linear .15s}
body.hc-b .menu .menu__mcta:not(#_){position:relative;display:flex !important;align-items:center;justify-content:space-between;gap:16px;overflow:hidden;height:96px;margin:14px 0 18px;padding:0 18px 0 20px !important;border-radius:16px;background:#0B1220;color:#FFFFFF !important;text-decoration:none;border:0}
body.hc-b .menu .menu__mcta:not(#_)::after{content:none !important;display:none !important}
body.hc-b .menu .menu__mcta:not(#_) video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
body.hc-b .menu .menu__mcta__t:not(#_){position:relative;z-index:1;font-size:19px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#FFFFFF}
body.hc-b .menu .menu__mcta__arw:not(#_){position:relative;z-index:1;display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#FFFFFF;color:#0B1220}

/* ── "View all products" card (the desktop mega menu's and the phone menu's): a 30% black veil over the moving
      mosaic, under the words, so the words read (Julian, 2026-10-05) ── */
body.hc-b .nav__mcta:not(#_)::before,body.hc-b .menu .menu__mcta:not(#_)::before{content:"" !important;display:block !important;position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.3) !important;opacity:1 !important;-webkit-mask:none !important;mask:none !important;filter:none !important;pointer-events:none;border-radius:inherit}
body.hc-b .nav__mcta:not(#_) video,body.hc-b .menu .menu__mcta:not(#_) video{z-index:0}
.sx-rank em svg{display:block}

/* ── The buttons that sit on a picture (Julian, 2026-10-05): white with dark words, a soft grey under the pointer.
      They were dark on a dark picture and could hardly be seen.
      · home, the suite cards: "Learn more", shown when a card opens onto its picture
      · /products, the picture tiles: "Explore" ── */
body.hc-b .hcs__card .hcs__go:not(#_),
body.hc-b .hcs__card:hover .hcs__go:not(#_),
body.hc-b .hcs__card:focus-visible .hcs__go:not(#_){background:#FFFFFF !important;border-color:#FFFFFF !important;color:#0B1220 !important;transition:background-color .18s ease,border-color .18s ease,opacity .25s ease,transform .25s ease}
body.hc-b .hcs__card .hcs__go:not(#_) *{color:#0B1220 !important}
body.hc-b .hcs__card:hover .hcs__go:not(#_):hover,
body.hc-b .hcs__card .hcs__go:not(#_):active{background:#E7E7E3 !important;border-color:#E7E7E3 !important;color:#0B1220 !important}
body.hc-b.pl-c .prodgroup[data-suite] .prodgroup__words .prodcard__link:not(#_),
body.hc-b.pl-c .prodgroup .prodgroup__words .prodcard__link:not(#_){background:#FFFFFF !important;border-color:#FFFFFF !important;color:#0B1220 !important;transition:background-color .18s ease,border-color .18s ease}
body.hc-b.pl-c .prodgroup[data-suite] .prodgroup__words .prodcard__link:not(#_) *,
body.hc-b.pl-c .prodgroup .prodgroup__words .prodcard__link:not(#_) *{color:#0B1220 !important}
body.hc-b.pl-c .prodgroup[data-suite] .prodgroup__words .prodcard__link:not(#_):hover,
body.hc-b.pl-c .prodgroup .prodgroup__words .prodcard__link:not(#_):hover,
body.hc-b.pl-c .prodgroup[data-suite] .prodgroup__words .prodcard__link:not(#_):focus-visible{background:#E7E7E3 !important;border-color:#E7E7E3 !important;color:#0B1220 !important}

/* ── two mockups in one tab: side by side, the second set lower and tucked a little onto the first ── */
/* the tuck (16px) is less than the back card's own padding, so the front card never covers a word */
.sx-duo{position:relative;display:flex;align-items:flex-start;width:528px}
.sx-duo .sx-duo__back{flex:none}
.sx-duo .sx-duo__top{position:relative !important;flex:none;display:block;margin:48px 0 0 -16px;z-index:2;border:1px solid #E1E2DE}
.sx-duo .sx-donut{gap:14px}
.sx-duo .sx-donut svg{flex:none;width:76px;height:76px}
.sx-duo .sx-donut ul{font-size:11.5px}
.sx-stat em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8A8E95}
.sx-stat b{display:block;margin:4px 0 8px;font-size:28px;line-height:1;font-weight:500;letter-spacing:-.03em;color:#0B1220}
.sx-stat svg{display:block;width:100%;height:46px}
.sx-stat span{display:block;margin-top:6px;font-size:10.5px;color:#8A8E95}
@media (prefers-reduced-motion: no-preference){
  .sp-tabs__panel.is-on .sx-duo__top{animation:sxCard .6s cubic-bezier(.2,.7,.2,1) .35s both}
}
@media (max-width:860px){
  /* phones: the two cards stack, full width, a plain gap between them */
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo:not(#_){display:grid;gap:10px;width:100%;max-width:420px}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo .pc-collage__card.sx-duo__back:not(#_){width:100% !important;max-width:none}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo .pc-collage__card.sx-duo__top:not(#_){position:relative !important;width:100% !important;max-width:none;margin:0 !important}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo .sx-donut:not(#_){flex-direction:row;align-items:center;gap:18px}
}

/* paired mockups: a label in a narrow figure cell wraps instead of being cut, and on phones the pair is held to the
   pane's width (a long line inside it was setting the width) */
.sx-duo .sx-stats em{white-space:normal;overflow:visible;text-overflow:clip}
.sx-duo .pc-collage__card{min-width:0}
@media (max-width:860px){
  body.hc-b.pc-page .sp-tabs__pic .sx-in:has(.sx-duo):not(#_){grid-template-columns:minmax(0,1fr);justify-items:center}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo:not(#_){min-width:0}
}

/* ── Book a demo inside each tab, under the paragraph; the centred one under the tabs is gone ── */
body.hc-b.pc-page .sp-tabs__txt:not(#_) p.sp-tabs__cta{margin:clamp(24px,2.4vw,32px) 0 0 !important;max-width:none}
body.hc-b.pc-page .sp-tabs:not(#_) .pp-mid{display:none !important}

/* a tool name in the toolkit grid wraps to a second line instead of being cut */
.sx-cards b{white-space:normal;overflow:visible;text-overflow:clip}
.sx-cards span{margin-top:auto}

/* ── every mockup: no dead space, no cut words (Julian, 2026-10-05) ── */
/* the ring's list fills the rest of its card as soft rows, so the card has no empty right side at any width */
.sx-donut svg{flex:none}
.sx-donut ul{flex:1;min-width:0;gap:5px}
.sx-donut li{padding:6px 10px;border-radius:8px;background:#F5F5F2;white-space:nowrap}
/* a long headline or figure label wraps to a second line instead of ending in dots */
.sx-list b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.sx-stats em{white-space:normal;overflow:visible;text-overflow:clip}

/* ── a pair of mockups is composed like the hero: each card turned a little, opposite ways, and the front one
   hanging 46px below the back one so their feet never line up (Julian, 2026-10-05). Phones stack them straight. ── */
@media (min-width:861px){
  .sx-duo{align-items:flex-end;padding:10px 6px 56px}
  .sx-duo .sx-duo__back{rotate:-2.5deg;transform-origin:50% 60%}
  .sx-duo .sx-duo__top{margin:0 0 -46px -22px;rotate:3deg}
}

/* QuestDIY Testing: the product photograph from the team's own screenshot, filling the picture well */
.sx-concept{position:relative}
.sx-concept img{position:absolute;inset:0;display:block;width:100% !important;height:100% !important;max-width:none;object-fit:cover;object-position:50% 55%}
@media (prefers-reduced-motion: no-preference){ .sp-tabs__panel.is-on .sx-concept img{animation:sxFade .8s ease .15s both} }

/* QuestDIY Testing: the wider cosmetics photograph Julian picked (Unsplash dMjkQJs58uo); the well grows to its shape */
.sx-concept{height:158px}
.sx-concept img{object-position:50% 50%}

/* ── Why > Expertise (client, 2026-10-05): a new picture behind, and the reel is now six agencies in white, Code and
   Theory first. Six marks a turn of 14.4s, each one up, held 2.4s, and out as the next comes in. The picture is light,
   so the veil over it is deeper than the tunnel's was. ── */
body.hc-b #why .why__slot--img.why__slot--ct:not(#_){background:linear-gradient(rgba(6,14,24,.52),rgba(6,14,24,.52)),#0B0B0B url(/assets/img/why/expertise-gallery.jpg) 30% 50% / cover no-repeat !important}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--agencies .why__logo{animation-name:whyReel6;animation-duration:14.4s;animation-delay:calc(var(--i) * 2.4s)}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--agencies .why__logo[style*="bera"]{-webkit-mask-size:56% auto;mask-size:56% auto}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--agencies .why__logo[style*="harris"]{-webkit-mask-size:82% auto;mask-size:82% auto}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--agencies .why__logo[style*="leaders"]{-webkit-mask-size:auto 66%;mask-size:auto 66%}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--agencies .why__logo[style*="stagwell-media"]{-webkit-mask-size:auto 42%;mask-size:auto 42%}
body.hc-b #why .why__slot--ct:not(#_) .why__reel--agencies .why__logo[style*="unicepta"]{-webkit-mask-size:74% auto;mask-size:74% auto}
@keyframes whyReel6{
  0%{transform:translateY(112%)}
  4.7%{transform:translateY(0)}
  16.67%{transform:translateY(0)}
  21.4%{transform:translateY(-112%)}
  100%{transform:translateY(-112%)}
}
@media (prefers-reduced-motion:reduce){
  body.hc-b #why .why__slot--ct:not(#_) .why__reel--agencies .why__logo{animation:none}
}

/* ── Why cards, desktop: the words sat 30px low beside the picture (Julian, 2026-10-05). The button was placed in the
   bottom spacer row, so the space above the heading was 60px more than the space under the button. The button now has
   its own row between the two spacers, and the block is centred on the picture. ── */
@media (min-width:900px){
  body.hc-b #why .why__item:not(#_){grid-template-rows:1fr auto auto auto auto 1fr !important}
  body.hc-b #why .why__item:not(#_) > .why__slot{grid-row:1 / 7 !important}
  body.hc-b #why .why__item:not(#_) > .why__cta{grid-row:5 / 6 !important}
}

/* ── One white button everywhere (Julian, 2026-10-06): white, a 1px dark line, dark words; under the pointer a soft
   grey (#E7E7E3), never black. Covers the outlined buttons, Call my phone in the nav, the cookie banner's Decline, and
   the Learn more / Explore buttons on pictures. ── */
body.hc-b .btn--line:not(#_){background:#FFFFFF;color:#0B1220;box-shadow:inset 0 0 0 1px #0B1220;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
body.hc-b .btn--line:not(#_):hover,body.hc-b .btn--line:not(#_):focus-visible{background:#E7E7E3;color:#0B1220;box-shadow:inset 0 0 0 1px #0B1220;transform:none}
body.hc-b .call--nav .call__btn:not(#_):hover,body.hc-b .call--nav .call__btn:not(#_):focus-visible{background:#E7E7E3 !important;border-color:#0B1220 !important;color:#0B1220 !important}
body.hc-b #saiConsent:not(#_) .no{background:#FFFFFF;color:#0B1220;border:1px solid #0B1220;transition:background-color .18s ease}
body.hc-b #saiConsent:not(#_) .no:hover,body.hc-b #saiConsent:not(#_) .no:focus-visible{background:#E7E7E3;border-color:#0B1220}
body.hc-b.pl-c .prodgroup .prodgroup__words .prodcard__link:not(#_),
body.hc-b.pl-c .prodgroup[data-suite] .prodgroup__words .prodcard__link:not(#_){border-color:#0B1220 !important}
body.hc-b.pl-c .prodgroup .prodgroup__words .prodcard__link:not(#_):hover,
body.hc-b.pl-c .prodgroup[data-suite] .prodgroup__words .prodcard__link:not(#_):hover,
body.hc-b.pl-c .prodgroup[data-suite] .prodgroup__words .prodcard__link:not(#_):focus-visible{border-color:#0B1220 !important}
body.hc-b .hcs__card .hcs__go:not(#_),body.hc-b .hcs__card:hover .hcs__go:not(#_),body.hc-b .hcs__card:focus-visible .hcs__go:not(#_),
body.hc-b .hcs__card:hover .hcs__go:not(#_):hover,body.hc-b .hcs__card .hcs__go:not(#_):active{border-color:#0B1220 !important}

/* ── Logos the same visible height (Priscilla, 10-05 item U3): the files carry different empty margins, so a fixed
   box made Agent Cloud look two thirds the size of Machine OS. Each file's ink was measured (ink height over file
   height, --k) and the box is sized so the INK is 28px on every page, 22px on phones; /products titles use 24/20.
   The three very wide Machine wordmarks are capped in width and scale down inside their box. ── */
body.hc-b .sp-mark--logo:not(#_) img,body.hc-b .pp-logo--ink:not(#_),body.hc-b .prodcard__logo:not(#_){height:calc(var(--lg-ink,28px) / var(--k,1)) !important;max-height:none !important;width:auto !important;max-width:min(100%,380px) !important;object-fit:contain;object-position:center}
body.hc-b .prodcard__logo:not(#_){--lg-ink:24px;display:block;object-position:left center}
@media (max-width:760px){
  body.hc-b .sp-mark--logo:not(#_) img,body.hc-b .pp-logo--ink:not(#_),body.hc-b .prodcard__logo:not(#_){--lg-ink:22px;max-width:min(100%,280px) !important}
  body.hc-b .prodcard__logo:not(#_){--lg-ink:20px}
}
body.hc-b img[src*="companies/agent-cloud/"]{--k:0.643}
body.hc-b img[src*="companies/geopulse/"]{--k:0.593}
body.hc-b img[src*="companies/imai/"]{--k:0.719}
body.hc-b img[src*="companies/media-machine/"]{--k:0.942}
body.hc-b img[src*="companies/newintel/"]{--k:0.792}
body.hc-b img[src*="companies/newvoices/"]{--k:0.942}
body.hc-b img[src*="companies/numetrix/"]{--k:0.595}
body.hc-b img[src*="companies/questbrand/"]{--k:0.952}
body.hc-b img[src*="companies/questdiy/"]{--k:0.942}
body.hc-b img[src*="companies/new/"]{--k:0.823}
body.hc-b img[src*="companies/the-machine/"]{--k:0.944}

/* ── a product's own client logos at the foot (design decks, 6 Oct): one logo per cell, still, as many cells as logos;
   on phones three to a row and all of them shown ── */
body.hc-b .ask-end .hc-clients--own .hc-clients__row:not(#_){grid-template-columns:repeat(var(--cols,5),minmax(0,1fr))}
body.hc-b .ask-end .hc-clients--own .hc-clients__reel:not(#_){width:62%;max-width:190px;height:66%}   /* tall marks (Bayer, Adidas) need the height; wide ones are held by the width */
body.hc-b .ask-end .hc-clients--own .hc-clients__logo:not(#_){animation:none !important;transform:none !important}
@media (max-width:760px){
  body.hc-b .ask-end .hc-clients--own .hc-clients__row:not(#_){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  body.hc-b .ask-end .hc-clients--own .hc-clients__cell:not(#_){display:block;height:72px}
  body.hc-b .ask-end .hc-clients--own .hc-clients__reel:not(#_){width:74%;height:64%}
}

/* a long hero line (The Media Machine's) sits a size down so it holds to two lines on desktop (Julian, 6 Oct) */
@media (min-width:861px){
  body.hc-b.pc-page .pp-title.pp-title--long:not(#_),
  body.hc-b.pc-page .pp-title.pp-title--long:not(#_) *{font-size:clamp(30px,1rem + 2.3vw,46px) !important}
  body.hc-b.pc-page .pp-hero .pp-title.pp-title--long:not(#_){max-width:min(100%,1120px) !important}
}

/* ── /products, desktop: the words sit level with the picture's middle, not at its top (Julian, 6 Oct), as the Why
   cards do on the home page ── */
@media (min-width:1024px){
  body.hc-b.pl-c .prodgroup__cards:not(#_){display:flex;flex-direction:column;justify-content:center;align-self:stretch}
  body.hc-b.pl-c .prodgroup__cards:not(#_) > .prodcard{flex:0 0 auto}
}

/* "Find my fit in a conversation" (the outlined link on the product and /products heroes) hovers like every other
   white button: soft grey, dark line (Julian, 6 Oct) */
body.hc-b.pc-page .pp-acts .pp-site:not(#_):hover,body.hc-b.pc-page .pp-acts .pp-site:not(#_):focus-visible{background:#E7E7E3 !important;border-color:#0B1220 !important;color:#0B1220 !important}
body.hc-b.pc-page .sp-hero--pic:not(#_) .pp-site:hover{background:rgba(255,255,255,.16) !important;border-color:#FFFFFF !important;color:#FFFFFF !important}

/* ── a client band with more than seven logos (IMAI 11, NewVoices 8): the shared band's keyframes are cut for seven
   (each mark holds a seventh of the turn), so with eleven the next mark climbed in while the last was still up and
   two showed at once. Each count gets keyframes cut to its own share of the turn. ── */
@keyframes whyReel8{0%{transform:translateY(112%)}3.8%{transform:translateY(0)}12.5%{transform:translateY(0)}16.3%{transform:translateY(-112%)}100%{transform:translateY(-112%)}}
@keyframes whyReel11{0%{transform:translateY(112%)}2.7%{transform:translateY(0)}9.1%{transform:translateY(0)}11.8%{transform:translateY(-112%)}100%{transform:translateY(-112%)}}
body.hc-b .ask-end .hc-clients[style*="--n:8"] .hc-clients__logo:not(#_){animation-name:whyReel8}
body.hc-b .ask-end .hc-clients[style*="--n:11"] .hc-clients__logo:not(#_){animation-name:whyReel11}

/* ── home, "How we put agentic AI to work": the words on the dark slides a size up, at least the Why paragraphs' size
   (Julian, 6 Oct) ── */
body.hc-b .hc-port__cap .hc-port__h:not(#_){font-size:34px !important;line-height:1.08 !important;letter-spacing:-.035em !important}   /* the Why titles' size (Expertise, Experience…) */
@media (max-width:760px){ body.hc-b .hc-port__cap .hc-port__h:not(#_){font-size:28px !important} }
body.hc-b .hc-port__cap .hc-port__eb:not(#_){font-size:14px !important}
body.hc-b .hc-port .hc-port__tab:not(#_){font-size:15px !important}

/* ── every H1 a fifth bigger on desktop (Julian, 6 Oct): 32–60px becomes 38–72px; the long Media Machine line
   36–55px. Phones keep their sizes, where a fifth more would not fit. ── */
@media (min-width:861px){
  body.hc-b .hero .display--hero:not(#_),body.hc-b .hero .display--hero:not(#_) *{font-size:clamp(38px,1.2rem + 3.72vw,72px) !important}
  body.hc-b.pc-page .pp-title:not(#_),body.hc-b.pc-page .pp-title:not(#_) *{font-size:clamp(38px,1.2rem + 3.72vw,72px) !important}
  body.hc-b.pc-page .pp-title.pp-title--long:not(#_),body.hc-b.pc-page .pp-title.pp-title--long:not(#_) *{font-size:clamp(34px,1.1rem + 2.5vw,50px) !important}
}

/* ── home intro: more air between the title and Book a demo (Julian, 6 Oct) ── */
body.hc-b .intro__over .intro__act:not(#_){margin-top:clamp(34px,4vw,56px) !important}
/* ── every title on the same line height as the hero headline ── */
body.hc-b .display:not(#_),body.hc-b .hcs__h:not(#_),body.hc-b.pc-page .pp-h2:not(#_),body.hc-b.pc-page .pp-title:not(#_),
body.hc-b.pc-page .pp-title:not(#_) *,body.hc-b .hero .display--hero:not(#_){line-height:1.05 !important}

/* ── the two closing cards (Book a demo, Call my phone): under the pointer the label edges right and the arrow edges
   left, both towards the middle, a little (Julian, 6 Oct) ── */
body.hc-b .ask-end .ask-end__ways .btn[data-cta]:not(#_),body.hc-b .ask-end .call__btn:not(#_){transition:padding-left .45s cubic-bezier(.2,.7,.2,1),background-size .6s cubic-bezier(.2,.7,.2,1),filter .3s ease,background-color .3s ease}
body.hc-b .ask-end .ask-end__ways .btn[data-cta]:not(#_)::after,body.hc-b .ask-end .call__btn:not(#_)::after{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
body.hc-b .ask-end .ask-end__ways .btn[data-cta]:not(#_):hover,body.hc-b .ask-end .call__btn:not(#_):hover{padding-left:32px !important}
body.hc-b .ask-end .ask-end__ways .btn[data-cta]:not(#_):hover::after,body.hc-b .ask-end .call__btn:not(#_):hover::after{transform:translateX(-8px)}

/* ── product tabs on phones (Julian, 6 Oct): the two arrows sit under the card, at the left, as black discs, like
   the home page's slides; the card takes the full width again. A pair of mockups shows one card at a time,
   each fading to the other every few seconds, instead of stacking into a tall column. ── */
@media (max-width:860px){
  body.hc-b.pc-page .sp-tabs.has-arrows .sp-tabs__panels:not(#_){margin-inline:0;padding-inline:0;padding-bottom:64px}
  body.hc-b.pc-page .sp-tabs__arr:not(#_){top:auto;bottom:0;margin:0;width:44px;height:44px;background:#0B1220;border-color:#0B1220;color:#FFFFFF}
  body.hc-b.pc-page .sp-tabs__arr:not(#_) svg{width:20px;height:20px}
  body.hc-b.pc-page .sp-tabs__arr--prev:not(#_){left:0}
  body.hc-b.pc-page .sp-tabs__arr--next:not(#_){left:54px;right:auto}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo:not(#_){display:grid;gap:0;width:100%;max-width:420px}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo > .pc-collage__card:not(#_){grid-area:1 / 1;width:100% !important;margin:0 !important;align-self:start}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo .sx-duo__back:not(#_){animation:sxAlt 8s ease-in-out infinite}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo .sx-duo__top:not(#_){animation:sxAlt 8s ease-in-out -4s infinite}
  /* the Machines flow: its title a size down on phones */
  body.hc-b.pc-page .mx-flow .pp-h2:not(#_){font-size:30px !important;line-height:1.08 !important;margin-bottom:8px}
}
@keyframes sxAlt{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}   /* each card holds 3.5s, then a half-second cross to the other */
@media (prefers-reduced-motion:reduce){ body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo > .pc-collage__card:not(#_){animation:none} }

/* ── the band under the bar on a product's own page (Julian, 6 Oct): 34px, ink, the page's tagline centred in white
   12px small caps, still. The page is pushed down by the same 34px. 30px on phones. ── */
body.hc-b main .nav__strip{position:relative;height:34px;margin-top:var(--nav-h,72px);background:#DEDEDF;color:#0B1220;display:flex;align-items:center;justify-content:center;padding:0 16px;overflow:hidden}
body.hc-b main .nav__strip__t{margin:0;font:500 12px/1 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#0B1220;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:760px){
  body.hc-b main .nav__strip{height:30px}
  body.hc-b main .nav__strip__t{font-size:11px;letter-spacing:.06em}
}

/* ── Why cards: Julian's own pictures behind Expertise, Experience and Edge (7 Oct); the veils stay so the white
   logos and marks read ── */
body.hc-b #why .why__slot--img.why__slot--ct:not(#_){background:linear-gradient(rgba(6,14,24,.52),rgba(6,14,24,.52)),#0B0B0B url(/assets/img/why/why-expertise-2.jpg) center / cover no-repeat !important}
body.hc-b #why .why__slot--logos:not(#_){background:linear-gradient(rgba(11,18,32,.42),rgba(11,18,32,.42)),#0B1220 url(/assets/img/why/why-experience-2.jpg) center / cover no-repeat !important}
body.hc-b #why .why__slot--pair:not(#_){background:linear-gradient(rgba(11,18,32,.42),rgba(11,18,32,.42)),#0B1220 url(/assets/img/why/why-edge-2.jpg) center / cover no-repeat !important}
body.hc-b #why .why__slot--pair:not(#_) .why__mark{background:#FFFFFF}            /* Adobe and Palantir in white on the dark picture */
body.hc-b #why .why__slot--pair:not(#_) .why__sep{background:rgba(255,255,255,.4)}

/* ── closing Book a demo card: Julian's own picture of three dotted planes (7 Oct) on its light grey,
   ink label and arrow ── */
body.hc-b .ask-end .ask-end__ways .btn[data-cta]:not(#_){background:#DEDEDF !important;background-image:linear-gradient(90deg,#DEDEDF,rgba(222,222,223,0) 14%,rgba(222,222,223,0) 86%,#DEDEDF),linear-gradient(180deg,#DEDEDF,rgba(222,222,223,0) 18%,rgba(222,222,223,0) 82%,#DEDEDF),url(/assets/img/book-a-demo-dots.jpg) !important;background-position:center bottom 7% !important;background-size:auto 78% !important;background-repeat:no-repeat !important;color:#0B1220 !important}   /* the picture's edges fade into the card's grey, so no rectangle shows, hover included */
body.hc-b .ask-end .ask-end__ways .btn[data-cta]:not(#_):hover{background-color:#DEDEDF !important;filter:brightness(.95)}
body.hc-b .ask-end .ask-end__ways .btn[data-cta]:not(#_)::after{background:#0B1220}

/* ── client edits 10-06: the paragraph under the hero scene is centred on every product page ── */
body.hc-b.pc-page:not(.pl-c) .pp-about__text:not(#_){text-align:center !important;margin-inline:auto !important}   /* not /products: its paragraph sits beside the title, left-aligned */

/* ── product pages: the closing Book a demo / Call my phone pair sits exactly under the related-product cards, the
   same width and columns, with a rule line between the two rows (Julian, 7 Oct) ── */
body.hc-b.pc-page .ask-end:not(#_){padding-top:clamp(24px,3vw,48px) !important}
/* the pair's width on EVERY page (home too, Julian 7 Oct): the wrap's content box, like the cards above it */
body.hc-b .ask-end .ask-end__ways:not(#_),body.hc-b.pc-page .ask-end .ask-end__ways:not(#_){width:calc(100% + 2 * clamp(20px,4vw,40px)) !important;max-width:none !important;margin-inline:calc(-1 * clamp(20px,4vw,40px)) !important;position:relative}   /* the pc-page form outranks the sheet's earlier 1180px cap */
body.hc-b.pc-page .ask-end .ask-end__ways:not(#_){border-top:1px solid rgba(11,18,32,.16);padding-top:clamp(40px,5vw,72px)}
@media (max-width:820px){
  body.hc-b .ask-end .ask-end__ways:not(#_),body.hc-b.pc-page .ask-end .ask-end__ways:not(#_){width:100% !important;margin-inline:0 !important}   /* on phones the wrap has no outer gutter: its padding IS the card inset */
}

/* ── footer on the nav's grid (Julian, 7 Oct): the same 1440 container and side padding as .nav__in, so the links
   and the wordmark start exactly under the nav's logo ── */
body.hc-b .foot .foot__in:not(#_),body.hc-b .foot .foot__band:not(#_){max-width:1440px !important;width:100% !important;margin-inline:auto !important;padding-inline:var(--gutter) !important}
@media (max-width:760px){
  body.hc-b .foot .foot__in:not(#_),body.hc-b .foot .foot__band:not(#_){padding-inline:20px !important}
}

/* ── whole application screens in the How-it-works tabs (prod-c.js SCREEN.app; client decks 5 Oct, Julian 7 Oct) ── */
.sx.sx--app{padding:0;background:#fff;border:1px solid #E1E2DE;overflow:hidden;font-size:11.5px;line-height:1.35}
body.hc-b.pc-page .sp-tabs__pic .sx-in .sx--app{max-width:none}
.sx-app__bar{display:flex;align-items:center;gap:14px;min-height:40px;padding:0 16px;border-bottom:1px solid #EFEFEC;font-size:11px;white-space:nowrap}
.sx-app__brand{display:flex;align-items:center;gap:7px;font-weight:500;font-size:12px;color:#0B1220}
.sx-app__brand i{width:14px;height:14px;border-radius:4px;background:#0B1220}
.sx-app__crumbs{color:#8A8E95}.sx-app__crumbs i{font-style:normal;margin:0 6px;color:#C4C6C9}
.sx-app__tabs{display:flex;gap:12px;color:#8A8E95;min-width:0;overflow:hidden}.sx-app__tabs span.is-on{color:#0B1220;font-weight:500}
.sx-app__tabs.is-right{margin-left:auto;gap:8px;font-size:10.5px}
.sx-app__note{margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5E636B}
.sx-app__note + .sx-app__acts{margin-left:0}
.sx-app__acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sx-app__acts span{padding:4px 9px;border-radius:999px;border:1px solid #E1E2DE;font-size:10.5px;color:#0B1220;white-space:nowrap}
.sx-app__acts span.is-on{background:#0B1220;color:#fff;border-color:#0B1220}
.sx-app__body{display:flex;align-items:stretch}
.sx-app__rail{flex:0 0 128px;padding:12px 10px;background:#F7F7F4;border-right:1px solid #EFEFEC;font-size:11px;color:#5E636B;display:flex;flex-direction:column;gap:2px;min-width:0}
.sx-app__rail em{font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9A9EA5;margin:9px 0 3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-app__rail span{padding:5px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-app__rail span.is-on{background:#fff;color:#0B1220;font-weight:500;border:1px solid #E6E6E2}
.sx-app__main{flex:1;min-width:0;padding:16px;display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:10px;align-content:start}
.sx-app__main.is-flush{padding:0;gap:0}
.sx-app__main.is-inner{padding:0}
.sx-app__blk{min-width:0}
.sx-app__blk.is-card{border:1px solid #E6E6E2;border-radius:10px;padding:12px;background:#fff}
.sx-app__blk.is-soft{border-radius:10px;padding:12px;background:#F5F5F2}
.sx-app__blk.is-center{text-align:center}
.sx-app__blk > .sx-h{margin-bottom:8px}
.sx-app__blk .sx-mosaic{display:block;width:100%;height:auto}
.sx-app__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid #EFEFEC;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5E636B}
.sx-app__btn{padding:7px 14px;border-radius:999px;background:#0B1220;color:#fff;font-weight:500}
.sx-app__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sx-app__h > div{min-width:0}
.sx-app__h b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:-.01em;color:#0B1220}
.sx-app__h.is-big b{font-size:19px;letter-spacing:-.02em}
.sx-app__h span{display:block;margin-top:3px;font-size:11px;color:#8A8E95}
.sx-app__h .sx-select{flex:0 0 auto;margin-top:0;padding:6px 12px;border:1px solid #E1E2DE;border-radius:8px;font-size:11px;color:#0B1220}
.sx-app__h .sx-select::after{content:" ▾";color:#8A8E95}
.sx-app__x{flex:0 0 auto;text-decoration:none;font-size:16px;line-height:1;color:#8A8E95}
.sx-app__eb{margin:0;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#5E636B;font-weight:500}
.sx-app__eb span{display:block;margin-top:2px;letter-spacing:0;text-transform:none;font-weight:400;font-size:10.5px;color:#8A8E95}
.sx-app__eb.is-plain{letter-spacing:0;text-transform:none;font-weight:400;font-size:11px;color:#5E636B}
.sx-app__p{margin:0;font-size:11.5px;color:#0B1220}
.sx-pill{display:inline-block;font-style:normal;font-size:10px;line-height:1;padding:5px 9px;border-radius:999px;background:#F2F2EF;color:#0B1220;white-space:nowrap}
.sx-pill.is-on{background:#0B1220;color:#fff}.sx-pill.is-soft{font-size:9.5px;background:#E7F6EC;color:#1E6B3C}
.sx-kpis{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px}
.sx-kpis div{position:relative;min-width:0;padding:10px 12px;border:1px solid #E6E6E2;border-radius:10px;background:#fff}
.sx-kpis em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#5E636B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-kpis b{display:block;margin-top:5px;font-size:20px;line-height:1;font-weight:400;letter-spacing:-.02em;color:#0B1220;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-kpis span{display:block;margin-top:5px;font-size:10px;color:#8A8E95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-kpis .sx-sparkline{position:absolute;right:10px;top:8px}
.sx-kpis.is-plain div{background:#F5F5F2;border-color:transparent}
.sx-tbl{display:flex;flex-direction:column;gap:0}
.sx-tbl li{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px;align-items:center;padding:8px 0;border-top:1px solid #EFEFEC;font-size:11px;color:#0B1220}
.sx-tbl li:first-child{border-top:0}
.sx-tbl li.sx-tbl__head{padding:4px 0 8px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8A8E95;border-top:0}
.sx-tbl li > span{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.sx-tbl li > span > b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sx-tbl li > span > span{flex-basis:100%;font-size:10px;color:#8A8E95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-tbl.is-boxed li:not(.sx-tbl__head){border:1px solid #0B1220;border-radius:9px;padding:10px 12px;margin-top:6px}
.sx-tbl.is-boxed li > span > span{white-space:nowrap}
.sx-tbl__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.sx-tbl__top .sx-h{margin:0;flex-direction:row;align-items:baseline;gap:8px}
.sx-tbl__eb{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 8px}.sx-tbl__eb span{font-size:10px;color:#8A8E95}
.sx-tbl__note{margin:10px 0 0;padding-top:10px;border-top:1px solid #EFEFEC;font-size:10.5px;color:#5E636B}
.sx-cellk{width:22px;height:22px;border-radius:50%;background:#F2F2EF;display:inline-grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:500;margin-right:4px}
.sx-cellbar{display:flex;align-items:center;gap:8px;margin:0;width:100%}.sx-cellbar i{flex:1;height:5px;border-radius:3px;background:#EFEFEC;overflow:hidden}.sx-cellbar i b{display:block;height:100%;background:#0B1220;border-radius:3px}.sx-cellbar span{flex:0 0 auto;font-size:10.5px}
.sx-cellbtns{display:flex;gap:4px;margin:0}.sx-cellbtns span{padding:4px 8px;border-radius:999px;border:1px solid #E1E2DE;font-size:9.5px;white-space:nowrap}.sx-cellbtns span.is-on{background:#0B1220;border-color:#0B1220;color:#fff}
.sx-radio{width:12px;height:12px;border-radius:50%;border:1.5px solid #C4C6C9}
.sx-doc{font-size:11.5px;color:#0B1220}
.sx-doc h4{margin:0 0 4px;font-size:16px;font-weight:500;letter-spacing:-.015em;line-height:1.2}
.sx-doc h5{margin:12px 0 4px;font-size:12px;font-weight:500}
.sx-doc h5.sx-doc__n{font-size:12.5px}
.sx-doc p{margin:0 0 6px;color:#3A3F47;line-height:1.45}
.sx-doc .sx-doc__s{margin-bottom:8px;color:#8A8E95;font-size:11px}
.sx-doc .sx-doc__x{text-decoration:line-through;color:#A3A7AE}
.sx-doc mark{background:#FFF1C2;color:#0B1220;padding:1px 3px}
.sx-doc__kv{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:6px 0;border-top:1px solid #EFEFEC;font-size:11px}
.sx-doc__kv em{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#5E636B;padding-top:2px}
.sx-doc__kv span.is-dim{color:#B9741A;font-style:italic}
.sx-doc__tag{display:inline-block;padding:4px 8px;border:1px solid #E1E2DE;border-radius:6px;font-size:10px;color:#5E636B;background:#F7F7F4}
.sx-doc__ul{margin:2px 0 8px;padding:0 0 0 14px;list-style:disc !important;color:#3A3F47;font-size:11px}.sx-doc__ul li{margin:2px 0}
.sx-doc__msg{display:flex;gap:8px;margin:8px 0 0;font-size:10.5px;color:#3A3F47}.sx-doc__msg i{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:#FF6D24}.sx-doc__msg b{display:block;font-weight:500;color:#0B1220}
.sx-doc__frame{margin-top:8px}.sx-doc__frame span{display:block;font-size:9.5px;color:#009CBD;margin-bottom:3px}.sx-doc__frame > div{height:68px;border-radius:4px;background:linear-gradient(135deg,#D9D3C7,#B8AD9A);border:1px solid #77E3F6}
.sx-doc__frame p{display:flex;gap:3px;margin:6px 0 0}.sx-doc__frame p i{flex:1;height:14px;border-radius:2px;background:#E4E0D7}.sx-doc__frame em{display:inline-block;margin-top:5px;font-style:normal;font-size:9px;padding:2px 5px;border-radius:3px;background:#009CBD;color:#fff}
.sx-doc.is-small{font-size:10.5px}.sx-doc.is-small h4{font-size:12.5px}.sx-doc.is-small .sx-doc__kv{grid-template-columns:58px 1fr;font-size:10px;padding:4px 0}.sx-doc.is-small p{font-size:10px;margin-bottom:4px}
.sx-boxes{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sx-boxes div{padding:8px 11px;border:1px solid #0B1220;border-radius:9px}
.sx-boxes em{display:block;font-style:normal;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5E636B}
.sx-boxes b{display:block;font-size:11.5px;font-weight:500;color:#0B1220;margin:2px 0 1px}
.sx-boxes span{display:block;font-size:9.5px;color:#8A8E95}
.sx-dlist__h{display:flex;align-items:center;gap:7px;padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid #0B1220;font-size:12px}
.sx-dlist__h i{width:18px;height:18px;border-radius:5px;background:#0B1220;color:#fff;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:500}
.sx-dlist__h b{font-weight:500}.sx-dlist__h span{margin-left:auto;font-size:11px;color:#5E636B}
.sx-dlist li{padding:3px 0;font-size:10.5px;line-height:1.35;color:#0B1220}
.sx-dlist li b{font-weight:500}.sx-dlist li span{color:#8A8E95}.sx-dlist li span::before{content:" · "}
.sx-win{border:1px solid #E1E2DE;border-radius:10px;overflow:hidden;background:#fff;height:100%}
.sx-win__bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0B1220;color:#fff;font-size:10.5px}
.sx-win__bar b{font-size:13px;font-weight:500}.sx-win__bar em{font-style:normal;letter-spacing:.08em;text-transform:uppercase;font-size:9px;color:#B9BEC7}.sx-win__bar span{margin-left:auto;color:#D9DCE2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-win__body{display:flex;min-height:150px}
.sx-win__rail{flex:0 0 92px;padding:10px;background:#F7F7F4;border-right:1px solid #EFEFEC;font-size:9.5px;line-height:1.9;color:#5E636B;white-space:nowrap;overflow:hidden}
.sx-win .sx-doc{flex:1;min-width:0;padding:10px 12px}
.sx-form{display:flex;flex-direction:column;gap:4px}
.sx-form .sx-app__eb{margin:6px 0 2px;font-size:10px;letter-spacing:0;text-transform:none;color:#0B1220}
.sx-form__grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:5px}
.sx-form__grid span{display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #E6E6E2;border-radius:7px;font-size:10.5px;color:#0B1220;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-form__grid span i{flex:0 0 auto;width:11px;height:11px;border-radius:3px;border:1.5px solid #C4C6C9}
.sx-form__grid span.is-on{border-color:#0B1220}.sx-form__grid span.is-on i{background:#0B1220;border-color:#0B1220}
.sx-tree{display:flex;gap:4px;height:112px;margin:2px 0 8px}
.sx-tree > div, .sx-tree__r > div{display:grid;place-items:center;border-radius:6px;font-size:10px;font-weight:500;color:#0B1220}
.sx-tree__r{display:flex;flex-direction:column;gap:4px}
.sx-tree .is-a{background:#0B1220;color:#fff}.sx-tree .is-b{background:#8A8E95;color:#fff}.sx-tree .is-c{background:#E4E4E0}
.sx-brandcol__h{display:flex;align-items:center;gap:6px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #E6E6E2;font-size:10.5px}
.sx-brandcol__h i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#0B1220;color:#fff;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:500}
.sx-brandcol__h b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sx-brandcol__h span{margin-left:auto;font-size:9px;color:#8A8E95;white-space:nowrap}
.sx-brandcol__step{padding:8px 9px;border-radius:8px;background:#fff;border:1px solid #E6E6E2}
.sx-brandcol__step > div{display:grid;grid-template-columns:1fr auto;gap:0 6px;align-items:center}
.sx-brandcol__step em{grid-column:1;font-style:normal;font-size:8.5px;color:#8A8E95}
.sx-brandcol__step b{grid-column:1;font-size:10.5px;font-weight:500;color:#0B1220}
.sx-brandcol__step s{grid-column:2;grid-row:1 / span 2;text-decoration:none;font-size:9px;padding:3px 6px;border-radius:5px;background:#F2F2EF;color:#0B1220}
.sx-brandcol__step s.is-down{background:#FDE8E4;color:#B3261E}
.sx-brandcol__arw{display:block;height:14px;position:relative}.sx-brandcol__arw::after{content:"↓";position:absolute;left:50%;top:-1px;transform:translateX(-50%);font-size:11px;color:#5E636B}
.sx-ticks{display:flex;align-items:center;gap:6px;margin:8px 0 0}
.sx-ticks i{flex:1;height:14px;background:repeating-linear-gradient(90deg,#E6E6E2 0 3px,transparent 3px 6px);border-radius:2px;overflow:hidden}
.sx-ticks i b{display:block;height:100%;background:repeating-linear-gradient(90deg,#0B1220 0 3px,transparent 3px 6px)}
.sx-ticks > b{flex:0 0 auto;font-size:10.5px;font-weight:500;color:#0B1220}
.sx-app__chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sx-app__chips .sx-chips{flex:1 1 auto}
.sx-app__chips .sx-search.is-inline{margin:0;padding:6px 10px;font-size:10.5px}
.sx-app__chips .sx-pill{margin-left:auto}
.sx-field2{padding:9px 12px;border:1px solid #E1E2DE;border-radius:8px;font-size:11px;color:#0B1220;margin-top:4px}
.sx-field2.is-ph{color:#A3A7AE}
.sx-toolbar{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #EFEFEC;font-size:10.5px;color:#0B1220;flex-wrap:wrap}
.sx-toolbar span.is-first{font-weight:500}
.sx-toolbar.is-split span:last-child{margin-left:auto}
.sx-legend2{display:flex;align-items:center;gap:14px}
.sx-legend2 svg{flex:0 0 auto}
.sx-legend2 ul{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:#0B1220}
.sx-legend2 li{display:flex;align-items:center;gap:7px}.sx-legend2 li i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}.sx-legend2 li em{font-style:normal;color:#8A8E95}
.sx-progress{display:flex;align-items:center;gap:10px;font-size:11px;color:#0B1220}
.sx-progress i{flex:1;height:6px;border-radius:3px;background:#EFEFEC;overflow:hidden}.sx-progress i b{display:block;height:100%;background:#0B1220}
.sx-progress em{font-style:normal;font-size:10.5px;color:#5E636B}
.sx-rows2__h{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid #EFEFEC}
.sx-rows2__h b{font-size:11.5px;font-weight:500;color:#0B1220}.sx-rows2__h span{font-size:10.5px;color:#5E636B}
.sx-rows2 li{display:flex;justify-content:space-between;padding:6px 0 6px 10px;font-size:11px;color:#0B1220;border-top:1px solid #F5F5F2}
.sx-rows2 li:first-child{border-top:0}.sx-rows2 li em{font-style:normal;color:#5E636B}
.sx-callout{padding:9px 12px;border-radius:8px;font-size:11px;line-height:1.4;background:#F5F5F2;color:#3A3F47}
.sx-callout.is-alert{background:#FDE8E4;color:#8E1F17;font-weight:500}
.sx-app__blk.is-tight .sx-hbars li{grid-template-columns:72px 1fr 38px;gap:6px;font-size:10px}
.sx-app__blk.is-tight .sx-hbars{gap:6px}
.sx-app__blk.is-tight .sx-hbars li i{height:5px}
@media (max-width:860px){
  /* a whole screen keeps its drawn width on phones too; prod-c.js scales it to the pane and gives the pane its height */
  body.hc-b.pc-page .sp-tabs__pic .sx-in .pc-collage__card.sx--app:not(#_){width:var(--sx-w,680px) !important;max-width:none !important}
}
.sx-kpis.is-small b{font-size:15px}.sx-kpis.is-small div{padding:8px 10px}
.sx-kpis.is-xs b{font-size:13px}.sx-kpis.is-xs div{padding:7px 8px}.sx-kpis.is-xs em{font-size:8.5px}
.sx-cellbtns{flex-wrap:wrap}
/* cleaner screens (Julian, 7 Oct): one line per row, nothing wraps into a mess */
.sx-dlist li{display:flex;gap:5px;white-space:nowrap;overflow:hidden}
.sx-dlist li b{overflow:hidden;text-overflow:ellipsis}
.sx-dlist li span{flex:0 0 auto}
.sx-boxes b,.sx-boxes span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-doc.is-small p,.sx-doc.is-small .sx-doc__kv span,.sx-doc.is-small .sx-doc__s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-doc.is-small .sx-doc__msg div{white-space:normal}
.sx-doc.is-small h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-doc__frame > div{position:relative;height:84px;background:#EFEFEC;border:1px solid #E1E2DE;border-radius:4px}
.sx-doc__frame > div i{position:absolute;left:30%;top:18%;width:40%;height:64%;border-radius:3px;background:#0B1220;opacity:.82}
.sx-doc__frame p i{height:16px;background:#E4E4E0}
.sx-doc__frame em{background:#0B1220}
.sx-win__rail{font-size:10px}
.sx-win__body{min-height:0}
.sx-tbl li > span > b{font-size:11px}
.sx-doc__kv span{white-space:normal}
.sx-app__blk.is-card .sx-doc__kv{grid-template-columns:64px 1fr}
.sx-tbl li > span{white-space:nowrap;overflow:hidden}
/* ── less air round the paragraph under the hero scene (Julian, 7 Oct): scene → paragraph → "What X does" ── */
body.hc-b.pc-page:not(.pl-c) .pp-hero:not(#_){padding-bottom:clamp(24px,3vw,40px) !important}
body.hc-b.pc-page:not(.pl-c) .pp-about:not(#_){padding:clamp(32px,3.5vw,52px) 0 clamp(16px,2vw,28px) !important}
body.hc-b.pc-page:not(.pl-c) .pp-about + .pp-more:not(#_){padding-top:clamp(48px,5.5vw,76px) !important}
/* ── the product hero's arrival (prod-c.js wraps the title's lines in .ln > .ln__in): lines rise out of their
   clipped rows after the wipe, then the paragraph and the button; the wordmark leads ── */
body.hc-b.pc-page .pp-hero--reveal .pp-title .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
body.hc-b.pc-page .pp-hero--reveal .pp-title .ln__in{display:block;white-space:normal;transform:translateY(118%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}   /* home.css makes .ln__in nowrap; a line that turns out a hair too wide wraps rather than clips */
body.hc-b.pc-page .pp-hero--reveal :is(.pp-logo,.sp-mark,.pp-lede,.pp-acts){translate:0 26px;transition:translate 1.1s cubic-bezier(.2,.7,.2,1)}   /* no opacity anywhere in the arrival (Julian, 7 Oct) */
html.mo-started body.hc-b.pc-page .pp-hero--reveal .pp-title .ln__in,html:not(.mo-on) body.hc-b.pc-page .pp-hero--reveal .pp-title .ln__in{transform:none}
html.mo-started body.hc-b.pc-page .pp-hero--reveal .pp-title .ln:nth-child(1) .ln__in{transition-delay:.1s}
html.mo-started body.hc-b.pc-page .pp-hero--reveal .pp-title .ln:nth-child(2) .ln__in{transition-delay:.2s}
html.mo-started body.hc-b.pc-page .pp-hero--reveal .pp-title .ln:nth-child(3) .ln__in{transition-delay:.3s}
html.mo-started body.hc-b.pc-page .pp-hero--reveal .pp-title .ln:nth-child(4) .ln__in{transition-delay:.4s}
html.mo-started body.hc-b.pc-page .pp-hero--reveal :is(.pp-logo,.sp-mark,.pp-lede,.pp-acts),html:not(.mo-on) body.hc-b.pc-page .pp-hero--reveal :is(.pp-logo,.sp-mark,.pp-lede,.pp-acts){translate:0 0}
html.mo-started body.hc-b.pc-page .pp-hero--reveal :is(.pp-logo,.sp-mark){transition-delay:0s}
html.mo-started body.hc-b.pc-page .pp-hero--reveal .pp-lede{transition-delay:.38s}
html.mo-started body.hc-b.pc-page .pp-hero--reveal .pp-acts{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  body.hc-b.pc-page .pp-hero--reveal .pp-title .ln__in{transform:none;transition:none}
  body.hc-b.pc-page .pp-hero--reveal :is(.pp-logo,.sp-mark,.pp-lede,.pp-acts){translate:0 0;transition:none}
}
/* ── phones: the slide's film keeps crisp, equal corners. The breathing scale on a video made its top corners
   render differently from the bottom ones clipped by the slide (Julian, 7 Oct); the film is clipped to its own
   rounded box and does not breathe on phones ── */
@media (max-width:860px){
  html.mo-on .hc-port__pic{animation:none !important;transform:none !important}
  body.hc-b .hc-port__pic:not(#_){border-radius:14px;clip-path:inset(0 round 14px);-webkit-clip-path:inset(0 round 14px)}
}

/* ── the lead panel as a full page on desktop (Julian, 8 Oct): Talk to an AI expert / the strategy session open
   as a whole screen, the words large on the left and the form on the right in a round card; a clear close X top right; the logo
   top left (a link home); the small print small at the bottom centre of the page. It arrives with the same slanted
   wipe as a page change. Nothing scrolls: the page behind is locked and the layout fits the screen.
   The fields: round and grey as before, the label inside the field that lifts when you type, and a reserved line under every
   field for the red message (home-c.js checks the email and the phone), so nothing jumps. Phones get the same page
   (Julian, 8 Oct): it scrolls, the logo top left scrolls with it, only the close X stays fixed; no card, no sheet. ── */
@media (min-width:901px){
  html:has(.modal.lead:not([hidden])){overflow:hidden !important}
  body.hc-b .modal.lead:not(#_){padding:0;place-items:stretch}
  body.hc-b .modal.lead:not(#_) .modal__scrim{background:transparent;backdrop-filter:none}
  body.hc-b .modal.lead:not(#_) .modal__panel{position:fixed;inset:0;display:flex;flex-direction:column;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;
    background:#FFFFFF;overflow:hidden auto;overscroll-behavior:contain;animation:lead-cover .55s cubic-bezier(.8,0,.2,1) both}
  /* the wipe: the light panel sweeps in with its slanted edge, then is cut away the same way to show the page */
  body.hc-b .modal.lead:not(#_) .modal__panel::after{content:"";position:fixed;inset:0;z-index:6;background:#F3F3EF;pointer-events:none;animation:lead-reveal .8s cubic-bezier(.8,0,.2,1) .5s both}
  body.hc-b .modal.lead:not(#_) .lead__body > h3,body.hc-b .modal.lead:not(#_) .lead__body > p:not(.modal__fine),body.hc-b .modal.lead:not(#_) .lead__alt,body.hc-b .modal.lead:not(#_) .lead__form{animation:lead-settle 1.1s cubic-bezier(.2,.7,.2,1) .55s both}
  body.hc-b .modal.lead:not(#_) .lead__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);grid-template-rows:auto auto 1fr;column-gap:clamp(48px,7vw,120px);
    align-items:start;width:100%;max-width:1240px;margin:auto;padding:clamp(84px,12vh,120px) 40px 72px;box-sizing:border-box}
  /* the words, left */
  body.hc-b .modal.lead:not(#_) .lead__body > h3{grid-column:1;grid-row:1;margin:0 0 24px;font-size:clamp(44px,1rem + 3.4vw,68px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
  body.hc-b .modal.lead:not(#_) .lead__body > p:not(.modal__fine){grid-column:1;grid-row:2;margin:0;max-width:34ch;font-size:clamp(17px,.9rem + .35vw,20px);line-height:1.5;color:rgba(11,18,32,.62)}
  body.hc-b .modal.lead:not(#_) .lead__alt{grid-column:1;grid-row:3;align-self:start;align-items:flex-start;margin-top:40px;padding-top:28px;max-width:34ch;border-top:1px solid rgba(11,18,32,.1)}
  /* 13 Oct 2026 (Jonathan: "cannot add full number"): align-items:flex-start shrank the widget's mount to the
     button's width, and call.js opens the number pill no wider than its mount (177px, room for 3px of number).
     The mount spans the column; the button keeps its own width inside it. */
  body.hc-b .modal.lead:not(#_) .lead__alt [data-lead-call]{align-self:stretch;width:100%}
  body.hc-b .modal.lead:not(#_) .lead__or{font-size:15px}
  body.hc-b .modal.lead:not(#_) .lead__alt .call:not([data-state="done"]) .call__fine--done{display:none}
  body.hc-b .modal.lead:not(#_) .lead__alt .call__fine{white-space:normal}
  /* the form, right, in a round card */
  body.hc-b .modal.lead:not(#_) .lead__form{grid-column:2;grid-row:1 / span 3;display:flex;flex-direction:column;gap:0;margin:0;background:#FFFFFF;border:1px solid rgba(11,18,32,.12);border-radius:24px;padding:clamp(28px,4.4vh,44px) clamp(28px,3vw,44px)}
  body.hc-b .modal.lead:not(#_) .lead__pair{grid-template-columns:1fr 1fr;gap:0 12px;margin:0}
  body.hc-b .modal.lead:not(#_) .lead__row{position:relative;display:block;margin:0;padding:0 0 24px}
  body.hc-b .modal.lead:not(#_) .lead__row input{display:block;width:100%;height:58px;margin:0;padding:22px 16px 6px;border:0;border-radius:12px;background:#F1F1EF;box-shadow:none;
    font-family:inherit;font-size:16px;line-height:1.2;color:#0B1220;transition:background-color .18s ease,box-shadow .18s ease}
  body.hc-b .modal.lead:not(#_) .lead__row input::placeholder{color:transparent}
  body.hc-b .modal.lead:not(#_) .lead__row input:hover{box-shadow:inset 0 0 0 1px rgba(11,18,32,.25)}
  body.hc-b .modal.lead:not(#_) .lead__row input:focus{outline:none;background:#FFFFFF;box-shadow:inset 0 0 0 2px #0B1220}
  /* the label sits in the field and lifts when the field is in use or filled */
  body.hc-b .modal.lead:not(#_) .lead__row > span.vh,body.hc-b .modal.lead:not(#_) .lead__row > span.lead__lbl{position:absolute !important;left:17px;top:19px;width:auto !important;height:auto !important;max-width:calc(100% - 34px);margin:0;
    clip:auto !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-size:16px;line-height:20px;font-weight:400;letter-spacing:0;color:rgba(11,18,32,.5);
    transform-origin:0 0;transition:transform .18s ease,color .18s ease}
  body.hc-b .modal.lead:not(#_) .lead__row:has(input:focus) > span,body.hc-b .modal.lead:not(#_) .lead__row:has(input:not(:placeholder-shown)) > span{transform:translateY(-11px) scale(.75);color:rgba(11,18,32,.62)}
  /* the reserved line for the message under each field */
  body.hc-b .modal.lead:not(#_) .lead__row > .lead__hint{position:absolute;left:0;right:0;top:62px;margin:0;font-size:12.5px;line-height:16px;letter-spacing:0;color:#D92D20;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.hc-b .modal.lead:not(#_) .lead__row:has(.lead__hint:not([hidden])) input{box-shadow:inset 0 0 0 1px #D92D20}
  body.hc-b .modal.lead:not(#_) .lead__row:has(.lead__hint:not([hidden])) input:focus{box-shadow:inset 0 0 0 2px #D92D20}
  /* the products field, the same shape, its question inside it */
  body.hc-b .modal.lead:not(#_) .lead__picks{position:relative;margin:0;padding:0 0 38px;border:0;min-width:0}
  body.hc-b .modal.lead:not(#_) .lead__picks > legend{position:absolute;left:17px;top:9px;z-index:1;margin:0;padding:0;font-size:12px;line-height:14px;font-weight:400;color:rgba(11,18,32,.62);pointer-events:none}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd{height:58px;margin:0;padding:18px 16px 0;border:0;border-radius:12px;background:#F1F1EF;box-shadow:none}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd:hover{box-shadow:inset 0 0 0 1px rgba(11,18,32,.25)}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd:focus-visible{box-shadow:inset 0 0 0 2px #0B1220}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd svg{margin-top:-18px}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd__hint{position:absolute;left:0;right:0;top:62px;margin:0;font-size:12.5px;line-height:16px;color:rgba(11,18,32,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* the list opens over the form, upwards, so the page never grows */
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__pickrow{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:4;margin:0;border-radius:12px;max-height:min(300px,46vh);box-shadow:0 18px 40px -18px rgba(11,18,32,.28)}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__pick span{border-radius:8px;background:transparent;padding:10px 12px}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__pick:hover span,body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__pick input:checked + span{background:#F1F1EF}
  body.hc-b .modal.lead:not(#_) .lead__optin{margin:0 0 14px;font-size:12.5px;line-height:1.45;color:rgba(11,18,32,.56)}
  body.hc-b .modal.lead:not(#_) .lead__form .btn--dark{width:100%;height:56px;margin:4px 0 0}
  /* the small print: small, at the bottom centre of the page */
  body.hc-b .modal.lead:not(#_) .lead__body > p.modal__fine{position:fixed;left:0;right:0;bottom:22px;z-index:2;margin:0;max-width:none;font-size:12px;line-height:1.4;color:rgba(11,18,32,.48);text-align:center}
  /* the thank-you states fill the page, centred */
  body.hc-b .modal.lead:not(#_) .lead__body > .modal__ok{grid-column:1 / -1;grid-row:1 / -1;align-self:center;justify-self:center;max-width:560px;align-items:center;text-align:center}
  /* the logo, top left (a link home), and a clear close X, top right */
  body.hc-b .modal.lead:not(#_) .modal__brand{display:block;position:fixed;top:30px;left:40px;z-index:3}
  body.hc-b .modal.lead:not(#_) .modal__brand a{display:block;color:inherit}
  body.hc-b .modal.lead:not(#_) .modal__brand svg{display:block;height:22px;width:auto;aspect-ratio:6.2 / 1}
  body.hc-b .modal.lead:not(#_) .modal__x{position:fixed;top:22px;right:28px;z-index:3;width:48px;height:48px;border-radius:50%;background:#FFFFFF;border:1px solid #0B1220;color:#0B1220}
  body.hc-b .modal.lead:not(#_) .modal__x:hover{background:#E7E7E3}
  body.hc-b .modal.lead:not(#_) .modal__x svg{width:18px;height:18px}
}
@media (max-width:900px){
  html:has(.modal.lead:not([hidden])){overflow:hidden !important}
  body.hc-b .modal.lead:not(#_){padding:0;place-items:stretch}
  body.hc-b .modal.lead:not(#_) .modal__scrim{background:transparent;backdrop-filter:none}
  body.hc-b .modal.lead:not(#_) .modal__panel{position:fixed;inset:0;display:flex;flex-direction:column;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;
    background:#FFFFFF;overflow:hidden auto;overscroll-behavior:contain;animation:lead-cover .55s cubic-bezier(.8,0,.2,1) both}
  body.hc-b .modal.lead:not(#_) .modal__panel::after{content:"";position:fixed;inset:0;z-index:6;background:#F3F3EF;pointer-events:none;animation:lead-reveal .8s cubic-bezier(.8,0,.2,1) .5s both}
  body.hc-b .modal.lead:not(#_) .lead__body > h3,body.hc-b .modal.lead:not(#_) .lead__body > p:not(.modal__fine),body.hc-b .modal.lead:not(#_) .lead__alt,body.hc-b .modal.lead:not(#_) .lead__form{animation:lead-settle 1.1s cubic-bezier(.2,.7,.2,1) .55s both}
  body.hc-b .modal.lead:not(#_) .lead__alt .call:not([data-state="done"]) .call__fine--done{display:none}
  body.hc-b .modal.lead:not(#_) .lead__alt .call__fine{white-space:normal}
  body.hc-b .modal.lead:not(#_) .lead__row{position:relative;display:block;margin:0;padding:0 0 24px}
  body.hc-b .modal.lead:not(#_) .lead__row input{display:block;width:100%;height:58px;margin:0;padding:22px 16px 6px;border:0;border-radius:12px;background:#F1F1EF;box-shadow:none;
    font-family:inherit;font-size:16px;line-height:1.2;color:#0B1220;transition:background-color .18s ease,box-shadow .18s ease}
  body.hc-b .modal.lead:not(#_) .lead__row input::placeholder{color:transparent}
  body.hc-b .modal.lead:not(#_) .lead__row input:hover{box-shadow:inset 0 0 0 1px rgba(11,18,32,.25)}
  body.hc-b .modal.lead:not(#_) .lead__row input:focus{outline:none;background:#FFFFFF;box-shadow:inset 0 0 0 2px #0B1220}
  body.hc-b .modal.lead:not(#_) .lead__row > span.vh,body.hc-b .modal.lead:not(#_) .lead__row > span.lead__lbl{position:absolute !important;left:17px;top:19px;width:auto !important;height:auto !important;max-width:calc(100% - 34px);margin:0;
    clip:auto !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-size:16px;line-height:20px;font-weight:400;letter-spacing:0;color:rgba(11,18,32,.5);
    transform-origin:0 0;transition:transform .18s ease,color .18s ease}
  body.hc-b .modal.lead:not(#_) .lead__row:has(input:focus) > span,body.hc-b .modal.lead:not(#_) .lead__row:has(input:not(:placeholder-shown)) > span{transform:translateY(-11px) scale(.75);color:rgba(11,18,32,.62)}
  body.hc-b .modal.lead:not(#_) .lead__row > .lead__hint{position:absolute;left:0;right:0;top:62px;margin:0;font-size:12.5px;line-height:16px;letter-spacing:0;color:#D92D20;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.hc-b .modal.lead:not(#_) .lead__row:has(.lead__hint:not([hidden])) input{box-shadow:inset 0 0 0 1px #D92D20}
  body.hc-b .modal.lead:not(#_) .lead__row:has(.lead__hint:not([hidden])) input:focus{box-shadow:inset 0 0 0 2px #D92D20}
  body.hc-b .modal.lead:not(#_) .lead__picks{position:relative;margin:0;padding:0 0 24px;border:0;min-width:0}
  body.hc-b .modal.lead:not(#_) .lead__picks > legend{position:absolute;left:17px;top:9px;z-index:1;margin:0;padding:0;font-size:12px;line-height:14px;font-weight:400;color:rgba(11,18,32,.62);pointer-events:none}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd{height:58px;margin:0;padding:18px 16px 0;border:0;border-radius:12px;background:#F1F1EF;box-shadow:none}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd:hover{box-shadow:inset 0 0 0 1px rgba(11,18,32,.25)}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd:focus-visible{box-shadow:inset 0 0 0 2px #0B1220}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd svg{margin-top:-18px}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd__hint{position:absolute;left:0;right:0;top:62px;margin:0;font-size:12.5px;line-height:16px;color:rgba(11,18,32,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__pick span{border-radius:8px;background:transparent;padding:10px 12px}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__pick:hover span,body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__pick input:checked + span{background:#F1F1EF}
  body.hc-b .modal.lead:not(#_) .lead__optin{margin:0 0 14px;font-size:12.5px;line-height:1.45;color:rgba(11,18,32,.56)}
  body.hc-b .modal.lead:not(#_) .lead__form .btn--dark{width:100%;height:56px;margin:4px 0 0}
  body.hc-b .modal.lead:not(#_) .modal__brand a{display:block;color:inherit}
  /* phones: a page that scrolls, the logo top left scrolling with it (no bar), only the close X fixed top right */
  body.hc-b .modal.lead:not(#_) .modal__panel{display:block;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  body.hc-b .modal.lead:not(#_) .modal__brand{display:block;position:absolute;top:22px;left:20px;z-index:1;margin:0}
  body.hc-b .modal.lead:not(#_) .modal__brand svg{display:block;height:20px;width:auto;aspect-ratio:6.2 / 1}
  body.hc-b .modal.lead:not(#_) .modal__x{position:fixed;top:10px;right:12px;z-index:3;width:44px;height:44px;border-radius:50%;background:#FFFFFF;border:1px solid #0B1220;color:#0B1220}
  body.hc-b .modal.lead:not(#_) .modal__x svg{width:16px;height:16px}
  body.hc-b .modal.lead:not(#_) .lead__body{display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:100px 20px 36px;box-sizing:border-box;min-height:100%;justify-content:center}
  body.hc-b .modal.lead:not(#_) .lead__body > h3{order:1;margin:0 0 14px;font-size:clamp(36px,9.4vw,48px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
  body.hc-b .modal.lead:not(#_) .lead__body > p:not(.modal__fine){order:2;margin:0 0 32px;font-size:17px;line-height:1.5;color:rgba(11,18,32,.62)}
  body.hc-b .modal.lead:not(#_) .lead__form{order:3;display:flex;flex-direction:column;gap:0;margin:0;padding:0;border:0;border-radius:0;background:transparent}
  body.hc-b .modal.lead:not(#_) .lead__pair{grid-template-columns:1fr 1fr;gap:0 10px;margin:0}
  body.hc-b .modal.lead:not(#_) .lead__alt{order:4;align-items:flex-start;margin-top:32px;padding-top:24px;border-top:1px solid rgba(11,18,32,.1)}
  body.hc-b .modal.lead:not(#_) .lead__body > p.modal__fine{order:5;margin:28px 0 0;font-size:12px;line-height:1.4;color:rgba(11,18,32,.48);text-align:center}
  /* the products list opens in the page here (it scrolls), so its note sits in the flow */
  body.hc-b .modal.lead:not(#_) .lead__picks{padding-bottom:20px}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd__hint{position:static;margin:6px 0 0;white-space:normal}
  body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__pickrow{margin:8px 0 0}
  body.hc-b .modal.lead:not(#_) .lead__body > .modal__ok{order:1;margin:auto 0;padding-top:20px;align-items:flex-start;text-align:left}
}
@media (min-width:901px) and (max-height:720px){
  body.hc-b .modal.lead:not(#_) .lead__row input,body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd{height:52px}
  body.hc-b .modal.lead:not(#_) .lead__row > span.vh,body.hc-b .modal.lead:not(#_) .lead__row > span.lead__lbl{top:16px}
  body.hc-b .modal.lead:not(#_) .lead__row > .lead__hint,body.hc-b .modal.lead:not(#_) .lead__picks.is-dd .lead__dd__hint{top:55px}
  body.hc-b .modal.lead:not(#_) .lead__row,body.hc-b .modal.lead:not(#_) .lead__picks{padding-bottom:22px}
  body.hc-b .modal.lead:not(#_) .lead__picks{padding-bottom:34px}
  body.hc-b .modal.lead:not(#_) .lead__body > h3{font-size:clamp(40px,1rem + 2.8vw,56px)}
}
@keyframes lead-cover{from{clip-path:polygon(0 0,0 0,-12% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@keyframes lead-reveal{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(100% 0,100% 0,100% 100%,112% 100%)}}
@keyframes lead-settle{from{transform:scale(1.02)}to{transform:none}}
@media (prefers-reduced-motion:reduce){ body.hc-b .modal.lead:not(#_) .modal__panel,body.hc-b .modal.lead:not(#_) .modal__panel::after,body.hc-b .modal.lead:not(#_) .lead__body > *{animation:none !important} body.hc-b .modal.lead:not(#_) .modal__panel::after{display:none} }

/* ── "What [product] does" as one scroll (Julian, 8 Oct, after palantir.com): desktop, the left side holds still
      (counter, the step's name, its title big, Book a demo) while the paragraphs and mockups scroll on the right;
      phones, the steps one under the other. prod-c.js builds it from the tabs. ── */
body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__bar,body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__arr{display:none !important}
body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panels{position:static;margin:0;padding:0 !important}
body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel{display:block;min-height:0;margin:0 !important;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt{display:block;padding:0;background:none}
body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__n{display:none}
body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__pic{order:0;border-radius:24px;overflow:hidden;isolation:isolate}
.sp-story__eyebrow{margin:0 0 16px;font-size:15px;line-height:1.3;letter-spacing:.01em;color:rgba(11,18,32,.5)}
.sp-story__eyebrow--step span{margin-right:14px;font-variant-numeric:tabular-nums;color:#0B1220}
@media (min-width:901px){
  body.hc-b.pc-page .sp-story__grid:not(#_){display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(40px,5vw,88px);align-items:start;margin-top:clamp(56px,6vw,96px)}
  .sp-story__rail{position:sticky;top:clamp(112px,17vh,168px)}
  .sp-story__idx{display:flex;align-items:center;gap:10px;margin:0 0 clamp(28px,4.4vh,48px);font-size:15px;line-height:1;font-variant-numeric:tabular-nums}
  .sp-story__i{appearance:none;margin:0;padding:4px 0;border:0;background:none;font:inherit;color:rgba(11,18,32,.36);cursor:pointer;transition:color .3s ease}
  .sp-story__i:hover{color:#0B1220}
  .sp-story__i.is-on{color:#0B1220}
  .sp-story__i.is-on::before{content:"["}.sp-story__i.is-on::after{content:"]"}
  .sp-story__i:focus-visible{outline:2px solid #0B1220;outline-offset:3px}
  .sp-story__ln{display:block;flex:0 0 22px;height:1px;background:rgba(11,18,32,.18);transition:flex-grow .8s cubic-bezier(.7,0,.2,1)}
  .sp-story__ln.is-on{flex-grow:1}
  /* the titles stand in one place; the live one is wiped in from below, the one before it wiped out upwards */
  .sp-story__heads{display:grid}
  .sp-story__head{grid-area:1 / 1;align-self:start;clip-path:inset(100% 0 0 0);transform:translateY(40px);transition:clip-path .85s cubic-bezier(.7,0,.2,1),transform .85s cubic-bezier(.7,0,.2,1)}
  .sp-story__head.is-past{clip-path:inset(0 0 100% 0);transform:translateY(-40px)}
  .sp-story__head.is-on{clip-path:inset(-4px -4px -12px -4px);transform:none}
  .sp-story__title{margin:0;font-size:clamp(40px,1rem + 2.8vw,64px);font-weight:400;line-height:1.04;letter-spacing:-.035em;color:#0B1220;text-wrap:balance}
  .sp-story__cta{margin:clamp(28px,4.4vh,48px) 0 0}
  /* the right side: each step's paragraph over its mockup */
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel{padding:0 0 clamp(104px,16vh,176px)}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel:last-of-type{padding-bottom:0}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt > :is(h3,.sp-story__eyebrow,.sp-tabs__cta){position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt > p:not(.sp-tabs__n):not(.sp-tabs__cta):not(.sp-story__eyebrow){margin:0 0 clamp(28px,4vh,44px);max-width:31em;font-size:clamp(19px,.85rem + .6vw,24px);line-height:1.45;color:rgba(11,18,32,.62)}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__pic{position:relative;aspect-ratio:7 / 5;height:auto;min-height:0}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__pic .sx-in{padding:36px}
}
@media (max-width:900px){
  .sp-story__rail{display:none}
  body.hc-b.pc-page .sp-story__grid:not(#_){display:block;margin-top:clamp(28px,6vw,44px)}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel{display:flex;flex-direction:column;padding:0 0 56px}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel:last-of-type{padding-bottom:0}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel + .sp-tabs__panel{padding-top:8px}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt{display:flex;flex-direction:column}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt h3{margin:0 0 12px;font-size:clamp(28px,7.4vw,38px);line-height:1.08}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt > p:not(.sp-tabs__n):not(.sp-tabs__cta):not(.sp-story__eyebrow){margin:0 0 24px;font-size:17px;line-height:1.5}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__cta{order:3;margin:24px 0 0}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel:not(:last-child) .sp-tabs__cta{display:none}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt{display:contents}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__pic{order:2;border-radius:16px}
}
/* the scroll story's small motions: Book a demo travels with the title */
@media (min-width:901px){ .sp-story__cta{transition:translate .85s cubic-bezier(.7,0,.2,1)} }
@media (prefers-reduced-motion:reduce){ .sp-story__head,.sp-story__ln,.sp-story__cta{transition:none !important} }
/* no coloured pane behind the drawn mockups (Julian, 8 Oct): the mockup sits on the page with its own thin edge, no
   shadow; films and the animated pieces keep their rounded frame */
body.hc-b.pc-page .sp-story .sp-tabs__pic:has(.sx-in):not(#_){background:transparent;overflow:visible;border-radius:0;aspect-ratio:auto;min-height:0}
body.hc-b.pc-page .sp-story .sp-tabs__panel .sp-tabs__pic .sx-in:not(#_){position:relative;inset:auto;display:block;padding:0;background:transparent}
body.hc-b.pc-page .sp-story .sp-tabs__pic .sx-in .pc-collage__card:not(#_){border:1px solid #E4E4E0;border-radius:16px;box-shadow:none}
body.hc-b.pc-page .sp-story .sp-tabs__pic .sx-duo .pc-collage__card:not(#_){border-radius:14px;box-shadow:none}
@media (max-width:860px){
  body.hc-b.pc-page .sp-story .sp-tabs__panel .sp-tabs__pic .sx-in:not(#_){display:grid;justify-items:start;padding:0}
  body.hc-b.pc-page .sp-story .sp-tabs__pic .sx-in .pc-collage__card:not(.sx--app):not(#_){max-width:100%}
}

/* ── the mockups in the scroll story, quieter (Julian, 8 Oct: "much cleaner, more high-end", no colours, no shadow,
      more space between things). Only here; the tab mockups elsewhere are untouched.
      - the tool windows inside a screen get a light title bar instead of a black one, and lose their own side menus
      - the orange squares become small grey marks; the yellow, green, teal and orange accents turn ink or grey
      - more line height and padding, so no text touches the text next to it ── */
.sp-story .sx :is(.sx-win){border-color:#ECECE8;border-radius:12px}
.sp-story .sx .sx-win__bar{gap:10px;padding:11px 14px;background:#FAFAF8;color:#0B1220;border-bottom:1px solid #EFEFEC}
.sp-story .sx .sx-win__bar b{font-size:12.5px;font-weight:500;color:#0B1220}
.sp-story .sx .sx-win__bar em{color:#9A9EA5;letter-spacing:.06em}
.sp-story .sx .sx-win__bar span{color:#8A8E95}
.sp-story .sx .sx-win__rail{display:none}
.sp-story .sx .sx-win__body{min-height:0}
.sp-story .sx .sx-win .sx-doc{padding:14px 16px 16px}
.sp-story .sx .sx-doc p{line-height:1.55;margin-bottom:8px}
.sp-story .sx .sx-doc.is-small p{line-height:1.55}
.sp-story .sx .sx-doc h4{margin-bottom:6px;line-height:1.3}
.sp-story .sx .sx-doc .sx-doc__s{margin-bottom:12px}
.sp-story .sx .sx-doc__kv{gap:12px;padding:8px 0;line-height:1.45}
.sp-story .sx .sx-doc.is-small .sx-doc__kv{grid-template-columns:76px 1fr;padding:7px 0}
.sp-story .sx .sx-doc__kv span.is-dim{color:#8A8E95}
.sp-story .sx .sx-doc mark{background:transparent;padding:0;box-shadow:inset 0 -1px 0 #0B1220}
.sp-story .sx .sx-doc__msg{gap:10px;margin-top:12px;line-height:1.5}
.sp-story .sx .sx-doc__msg i{width:8px;height:8px;margin-top:5px;border-radius:50%;background:#B9BCC2}
.sp-story .sx .sx-doc__frame span{color:#8A8E95}
.sp-story .sx .sx-doc__frame em{background:#0B1220}
.sp-story .sx .sx-pill.is-soft{background:#F1F1EF;color:#5E636B}
.sp-story .sx .sx-brandcol__step s.is-down,.sp-story .sx .sx-callout.is-alert{background:#F1F1EF;color:#0B1220}
.sp-story .sx .sx-app__bar{min-height:46px;padding:0 18px}
.sp-story .sx .sx-app__rail{background:#FFFFFF;padding:16px 12px;gap:4px}
.sp-story .sx .sx-app__rail span.is-on{background:#F4F4F1;border-color:transparent}
.sp-story .sx .sx-app__main{padding:20px;gap:14px}
.sp-story .sx .sx-app__main.is-flush,.sp-story .sx .sx-app__main.is-inner{padding:0}
.sp-story .sx .sx-app__blk.is-card,.sp-story .sx .sx-app__blk.is-soft{padding:14px;border-radius:12px}
.sp-story .sx .sx-app__blk.is-card{border-color:#ECECE8}
.sp-story .sx .sx-app__foot{padding:12px 18px}
/* the boxed rows and the list headers drew their edges in ink; in the story they take the same light edge as the rest */
.sp-story .sx .sx-boxes div,.sp-story .sx .sx-tbl.is-boxed li:not(.sx-tbl__head){border-color:#E4E4E0;padding:10px 12px}
.sp-story .sx .sx-dlist__h{border-bottom-color:#E4E4E0;padding-bottom:9px;margin-bottom:7px}
.sp-story .sx .sx-form__grid span.is-on,.sp-story .sx .sx-survey li.is-on{border-color:#B9BCC2}
/* tool marks in the screens, in ink; the inputs as a grid (Machine OS step 4: shorter, Julian 8 Oct); the label
   column of the key/value lists wider so a label never runs into its value */
.sx-ic{display:block;flex:0 0 auto;width:14px;height:14px;color:#0B1220}
.sx-app__brand .sx-ic{width:15px;height:15px}
.sx-win__bar .sx-ic{width:14px;height:14px;margin-right:-2px}
.sx-dlist__h .sx-ic{width:16px;height:16px}
.sx-boxes.is-grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.sp-story .sx .sx-doc__kv{grid-template-columns:96px 1fr;gap:16px}
.sp-story .sx .sx-doc.is-small .sx-doc__kv{grid-template-columns:90px 1fr;gap:14px}
.sp-story .sx .sx-doc__kv em{font-size:8.5px;line-height:1.5}
.sx-boxes.is-grid b{white-space:normal;overflow:visible;line-height:1.35}
/* one container width down the product pages (Julian, 8 Oct): "by the numbers" sat 20px inside the others */
body.hc-b.pc-page .pp-proof > .pp-wrap:not(#_){max-width:1280px !important}
body.hc-b.pc-page .pp-proof:not(#_){padding-inline:0 !important}
/* the two-card mockups lie flat, side by side, in the story */
.sp-story .sx-duo{width:auto;gap:16px;align-items:stretch}
.sp-story .sx-duo .sx-duo__top{margin:0;border-color:#E4E4E0}
.sp-story .sx-duo .pc-collage__card{rotate:none !important;transform:none !important}
/* the mockups keep moving while they are on screen (Julian, 8 Oct: "make them feel alive"): bars breathe, donuts
   sway, pins pulse, a dot runs along each line; prod-c.js rolls the numbers, moves the status pill, retypes prompts */
@media (prefers-reduced-motion:no-preference){
  /* each grows in when its step comes on screen, then keeps breathing while it stays there */
  .sp-story .sp-tabs__panel.is-live .sx-breathe:not(#_){transform-origin:0 50%;animation:sxGrowX .8s cubic-bezier(.2,.7,.2,1) both,sxBreathe 5.2s ease-in-out calc(.9s + var(--bd,0s)) infinite alternate}
  .sp-story .sp-tabs__panel.is-live .sx-breathe-y:not(#_){transform-origin:50% 100%;animation:sxGrowY .8s cubic-bezier(.2,.7,.2,1) both,sxBreatheY 4.6s ease-in-out calc(.9s + var(--bd,0s)) infinite alternate}
  .sp-story .sp-tabs__panel.is-live .sx-sway:not(#_){animation:sxPop .7s cubic-bezier(.2,.7,.2,1) .15s both,sxSway 9s ease-in-out 1s infinite alternate}
  .sp-story .sp-tabs__panel.is-live .sx-pulse.is-pulsing:not(#_)::before{animation:sxRing 2.4s ease-out infinite}
}
.sp-story .sx-runner{fill:#0B1220;stroke:#fff;stroke-width:2;paint-order:stroke}
.sp-story .sx :is(em,.sx-ico){transition:background-color .5s ease,color .5s ease}
@keyframes sxBreathe{from{transform:scaleX(1)}to{transform:scaleX(var(--bs,.93))}}
@keyframes sxBreatheY{from{transform:scaleY(1)}to{transform:scaleY(.9)}}
@keyframes sxSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes sxRing{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
/* rotating screens: the waiting ones stay out of the layout; the one that arrives is wiped in from the left */
.sx [data-rot][hidden]{display:none !important}
@media (prefers-reduced-motion:no-preference){ .sp-story .sx-swap-in{animation:sxSwap .7s cubic-bezier(.7,0,.2,1) both} }
@keyframes sxSwap{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* "What [product] does" runs wider than the other sections, with more room between its two sides (Julian, 8 Oct) */
@media (min-width:901px){
  body.hc-b.pc-page .sp-story > .pp-wrap:not(#_){max-width:1440px !important;padding-inline:clamp(24px,3vw,40px) !important}
  body.hc-b.pc-page .sp-story__grid:not(#_){column-gap:clamp(56px,7vw,128px)}
}
/* the media plan in the story: rows on hairlines instead of boxes, so the screen is shorter */
.sp-story .sx .sx-tbl.is-boxed li:not(.sx-tbl__head){border:0;border-bottom:1px solid #EFEFEC;border-radius:0;margin:0;padding:9px 2px}
/* platform marks in forms and tables; a platform with no published mark shows its initial */
.sx-form__grid span .sx-ic{width:13px;height:13px;margin-right:6px;color:#0B1220}
.sx-form__grid span .sx-lt{display:inline-grid;place-items:center;width:13px;height:13px;margin-right:6px;border-radius:3px;background:#0B1220;color:#fff;font-style:normal;font-size:8px;font-weight:600;line-height:1;vertical-align:-2px}
.sx-form__grp[hidden]{display:none !important}
.sx-cellmark{display:inline-flex;vertical-align:-2px;margin-right:7px}.sx-cellmark .sx-ic{width:13px;height:13px}
.sp-story .sx .sx-doc__ul{padding-left:20px}.sp-story .sx .sx-doc__ul li{padding-left:2px;margin:3px 0}
/* every app screen in the story is held to the shape of a screen (about 16:10); a longer one scrolls inside it */
@media (min-width:901px){
  .sp-story .sx--app{display:flex;flex-direction:column;max-height:calc(var(--sx-w,680px) * .8);overflow:hidden}
  .sp-story .sx--app > .sx-app__body{flex:1 1 auto;min-height:0;overflow:hidden}
  .sp-story .sx--app .sx-app__main{max-height:100%;overflow:hidden}

  .sp-story .sx--app .sx-app__rail{overflow:hidden}
}
/* ── list rows: a line icon for what the row is, a small trace beside it ── */
.sx-ico.has-ic{display:grid;place-items:center;color:#5E636B}
.sx-ico.has-ic::after{content:none}
.sx-ico.has-ic.is-on{color:#fff}
.sx-lic{width:15px;height:15px;display:block}
.sx-rowspark{flex:0 0 auto;width:80px;height:20px;margin-left:auto;color:#C4C6C9}
.sx-list li:first-child .sx-rowspark{color:#0B1220}
.sx-list li .sx-rowspark + em{margin-left:14px}
.sx-list li > span{min-width:0}
@media (prefers-reduced-motion:no-preference){
  .sp-story .sp-tabs__panel.is-live .sx-rowspark path{stroke-dasharray:140;stroke-dashoffset:140;animation:sxDraw 1.2s cubic-bezier(.4,0,.2,1) .3s forwards}
}
/* ── a chat with a panel beside it ── */
.sx-chat.has-side{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;align-items:stretch}
.sx-chat__conv{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.sx-chat__side{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid #ECECE8;border-radius:12px;background:#FAFAF8;font-size:11px}
.sx-chat__sh{display:flex;align-items:center;justify-content:space-between;margin:0}
.sx-chat__sh b{font-size:12px;font-weight:500;color:#0B1220}
.sx-livedot{display:inline-flex;align-items:center;gap:6px;color:#5E636B;font-size:10.5px}
.sx-livedot::before{content:"";width:6px;height:6px;border-radius:50%;background:#0B1220}
.sx-wave{display:flex;align-items:center;gap:3px;height:34px}
.sx-wave i{flex:1;height:calc(var(--h,.5) * 100%);border-radius:2px;background:#0B1220;transform-origin:50% 50%}
.sx-chat__clock{display:flex;justify-content:space-between;align-items:baseline;margin:0;color:#8A8E95}
.sx-chat__clock b{font-size:16px;font-weight:500;color:#0B1220;font-variant-numeric:tabular-nums}
.sx-chat__kv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sx-chat__kv li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid #EFEFEC}
.sx-chat__kv span{color:#8A8E95}.sx-chat__kv b{font-weight:500;color:#0B1220;text-align:right}
@media (prefers-reduced-motion:no-preference){
  .sp-story .sp-tabs__panel.is-live .sx-wave i{animation:sxWave 1.1s ease-in-out calc(var(--i) * -.09s) infinite alternate}
  .sp-story .sp-tabs__panel.is-live .sx-livedot::before{animation:sxBlink 1.6s ease-in-out infinite}
}
@keyframes sxWave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes sxBlink{50%{opacity:.25}}
@media (max-width:860px){ .sx-chat.has-side{grid-template-columns:1fr} }
/* ── one screen shape for films and screens in the story (Julian, 8 Oct: none taller than a screen) ── */
@media (min-width:901px){
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__pic:not(:has(.sx-in)){aspect-ratio:16 / 10}
}
.sp-story .sx-duo{height:auto !important;min-height:0 !important;padding:0 !important;margin:0 !important}

/* ── PHONES (client brief, 8 Oct): one type scale and one rhythm for every page, and mockups made for the phone ── */
@media (max-width:760px){
  /* headings: every section heading and every step heading the same size (the reference: "From signal to action");
     the parent "What [product] does" a step larger, with its "How it works" label over it */
  body.hc-b .pp-h2:not(#_),body.hc-b .pp-h2:not(#_) *,
  body.hc-b section h2.display:not(.display--hero):not(.display--end):not(#_),body.hc-b .hcs__h:not(#_),body.hc-b .why__t:not(#_),
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt h3{font-size:30px !important;line-height:1.1 !important;letter-spacing:-.03em !important;text-wrap:balance}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head .pp-h2,body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head .pp-h2 *{font-size:38px !important;line-height:1.05 !important}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head .pp-sign{display:block !important;margin:0 0 14px !important;font-size:14px;letter-spacing:.02em;color:rgba(11,18,32,.5)}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head{text-align:left}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head :is(.pp-sign,.pp-h2),body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head .pp-more__head{text-align:left !important;margin-inline:0 !important}
  /* the steps: number and name, then room, then the heading, the words, the mockup */
  body.hc-b.pc-page .sp-story__grid:not(#_){margin-top:44px}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt > .sp-story__eyebrow--step{display:flex;align-items:baseline;gap:12px;margin:0 0 18px !important;font-size:14px;letter-spacing:.02em}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt > .sp-story__eyebrow--step span{margin:0;font-size:14px;font-weight:500}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt h3{margin:0 0 16px !important}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__txt > p:not(.sp-tabs__n):not(.sp-tabs__cta):not(.sp-story__eyebrow){margin:0 0 28px !important;font-size:17px;line-height:1.55}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel{padding:0 0 72px !important}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel:last-of-type{padding-bottom:0 !important}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__panel + .sp-tabs__panel{padding-top:0 !important;border-top:0 !important}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__cta{margin-top:28px}
}
/* a whole screen on a phone: its panels take turns in a window of a steady height; tables keep their first and last
   columns; the screen's bar keeps its name and the one action that matters */
.sx--app.is-phone .sx-app__main{overflow:hidden}
.sx--app.is-phone .sx-app__bar{flex-wrap:nowrap;overflow:hidden}
.sx--app.is-phone .sx-app__acts span:not(.is-on){display:none}
.sx--app.is-phone .sx-tbl[style*="--n:4"],.sx--app.is-phone .sx-tbl[style*="--n:5"]{grid-template-columns:1fr 1fr !important}
.sx--app.is-phone .sx-tbl[style*="--n:4"] li > span:nth-child(2),.sx--app.is-phone .sx-tbl[style*="--n:4"] li > span:nth-child(3),
.sx--app.is-phone .sx-tbl[style*="--n:5"] li > span:nth-child(2),.sx--app.is-phone .sx-tbl[style*="--n:5"] li > span:nth-child(3),.sx--app.is-phone .sx-tbl[style*="--n:5"] li > span:nth-child(4){display:none}
.sx--app.is-phone .sx-app__main.is-clipped{-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
@media (max-width:760px){
  /* home: "Why Stagwell AI" and its four words sit at the section size too */
  body.hc-b .why .display--cos:not(#_):not(#_),body.hc-b .why .display--cos:not(#_):not(#_) *,body.hc-b .why__t:not(#_):not(#_){font-size:30px !important;line-height:1.1 !important;letter-spacing:-.03em !important}
}
.sx--app.is-phone .sx-kpis{--n:2 !important}
/* ── desktop, product pages (Julian, 8 Oct): the step titles on the left at the section-heading size, and every
      section after the hero on the width of "What [product] does", the widest one ── */
@media (min-width:901px){
  .sp-story__title{font-size:clamp(34px,1rem + 2.2vw,52px) !important;line-height:1.08}
  body.hc-b.pc-page:not(.pl-c) :is(.pp-proof,.mx-flow,.sp-also) > .pp-wrap:not(#_):not(#_){max-width:1440px !important;padding-inline:clamp(24px,3vw,40px) !important}
  body.hc-b.pc-page:not(.pl-c) .ask-end .ask-end__in:not(#_):not(#_){max-width:1440px !important;padding-inline:clamp(24px,3vw,40px) !important}
  body.hc-b.pc-page:not(.pl-c) .ask-end .ask-end__ways:not(#_):not(#_){width:100% !important;max-width:none !important;margin-inline:0 !important}
}

/* ── mockup buttons read as part of the picture, not as buttons on the page (Julian, 8 Oct): grey, ink text ── */
.sp-story .sx :is(.sx-app__btn,.sx-btns span.is-on,.sx-cellbtns span.is-on,.sx-app__acts span.is-on,.sx-next span){background:#ECECE9 !important;border-color:#ECECE9 !important;color:#0B1220 !important}

/* ── the section after the centred paragraph stands apart by room, not a rule (Julian, 8 Oct); on phones it sits on a
      very light grey ground ── */
@media (min-width:761px){
  body.hc-b.pc-page:not(.pl-c) .pp-about:not(#_){padding-bottom:clamp(72px,8vw,128px) !important}
  body.hc-b.pc-page:not(.pl-c) .sp-story:not(#_){padding-top:clamp(56px,6vw,96px) !important}
}

@media (max-width:760px){
  body.hc-b.pc-page:not(.pl-c) .pp-about:not(#_){padding-bottom:64px !important}
  body.hc-b.pc-page .sp-story:not(#_){padding-top:64px !important;padding-bottom:72px !important;background:#F6F6F4}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__pic .sx-in .pc-collage__card{background:#FFFFFF}
  body.hc-b.pc-page .sp-story__grid:not(#_){margin-top:64px}
  /* a call on a phone: the call itself, not the chat beside it */
  .sp-story .sx-chat.has-side{display:block}
  .sp-story .sx-chat.has-side .sx-chat__conv{display:none}
}
/* a whole screen on a phone: as tall as the panel on show, no taller; when the panels take turns the screen glides to
   the new height (prod-c.js), so there is never an empty band or a faded foot (Julian, 8 Oct) */
.sx--app.is-phone .sx-app__main{max-height:520px}
.sx-app__main.is-gliding,.sx-boxes.is-gliding{transition:height .55s cubic-bezier(.2,.7,.2,1);overflow:hidden}

/* ── one arrival, not two (Julian, 8 Oct): the product hero's words were painted plain, then hidden when the motion
      layer woke, then risen in; on a phone that read as the animation playing twice. A line in the head (mo-pre)
      keeps them unseen from the first paint until the wipe has cleared; nothing animates on the way to hidden; and
      if the motion layer never starts, they show anyway after three seconds. ── */
html.mo-pre:not(.mo-started) body.hc-b.pc-page:not(.pl-c) .pp-hero :is(.pp-title,.pp-logo,.sp-mark,.pp-lede,.pp-acts){visibility:hidden;animation:moShow 0s 3s forwards}
@keyframes moShow{to{visibility:visible}}
html:not(.mo-started) body.hc-b.pc-page .pp-hero--reveal .pp-title .ln__in,html:not(.mo-started) body.hc-b.pc-page .pp-hero--reveal :is(.pp-logo,.sp-mark,.pp-lede,.pp-acts){transition:none !important}

/* ── "What [product] does" on every size: its heading set left like the rest of the section, and the whole section on a
      soft grey from edge to edge, so the page is not one long white sheet (Julian, 8 Oct) ── */
body.hc-b.pc-page:not(.pl-c) .sp-story:not(#_){background:#F6F6F4}
body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__pic .sx-in .pc-collage__card{background:#FFFFFF}
@media (min-width:761px){
  body.hc-b.pc-page:not(.pl-c) .sp-story:not(#_){padding-bottom:clamp(88px,9vw,144px) !important}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head,body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head .pp-more__head{text-align:left !important;margin-inline:0 !important;max-width:none !important}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head :is(.pp-sign,.pp-h2){text-align:left !important;margin-inline:0 !important}
  body.hc-b.pc-page .sp-story:not(#_) .sp-tabs__head .pp-sign{display:block !important;margin:0 0 16px !important;font-size:15px;letter-spacing:.02em;color:rgba(11,18,32,.5)}
}

/* ── ONE SPACE BETWEEN SECTIONS on the product pages (Julian, 8 Oct): G on the edge of the grey section, inside and out,
      and G between two white sections (half from each). G is 64px on phones and grows to 120px on wide screens. ── */
body.hc-b.pc-page:not(.pl-c){--sec-g:clamp(64px,8vw,120px)}
body.hc-b.pc-page:not(.pl-c) .pp-about:not(#_):not(#_){padding-bottom:var(--sec-g) !important}
body.hc-b.pc-page:not(.pl-c) .sp-story:not(#_):not(#_){padding-top:var(--sec-g) !important;padding-bottom:var(--sec-g) !important;margin:0 !important}
body.hc-b.pc-page:not(.pl-c) .sp-story > .pp-wrap > .sp-tabs__head:not(#_),body.hc-b.pc-page:not(.pl-c) .sp-story .sp-tabs__head > .pp-more__head:not(#_){margin-top:0 !important;padding-top:0 !important}
body.hc-b.pc-page:not(.pl-c) .sp-story .sp-tabs__head .pp-more__head > :first-child:not(#_){margin-top:0 !important}
body.hc-b.pc-page:not(.pl-c) .sp-story .sp-tabs__panel:last-of-type:not(#_){padding-bottom:0 !important;margin-bottom:0 !important}
body.hc-b.pc-page:not(.pl-c) .sp-story .sp-tabs__panel:last-of-type .sp-tabs__pic:not(#_){margin-bottom:0 !important}
body.hc-b.pc-page:not(.pl-c) .pp-proof:not(#_):not(#_){padding-top:var(--sec-g) !important;padding-bottom:calc(var(--sec-g) / 2) !important;margin:0 !important}
body.hc-b.pc-page:not(.pl-c) .mx-flow:not(#_):not(#_){padding-top:calc(var(--sec-g) / 2) !important;padding-bottom:calc(var(--sec-g) / 2) !important;margin:0 !important}
body.hc-b.pc-page:not(.pl-c) .sp-also:not(#_):not(#_){padding-top:calc(var(--sec-g) / 2) !important;padding-bottom:var(--sec-g) !important;margin:0 !important}
body.hc-b.pc-page:not(.pl-c) :is(.pp-proof,.mx-flow,.sp-also) > .pp-wrap > :first-child:not(#_){margin-top:0 !important}
body.hc-b.pc-page:not(.pl-c) :is(.pp-proof,.mx-flow,.sp-also) > .pp-wrap > :last-child:not(#_){margin-bottom:0 !important}
/* a page with no "by the numbers": the grey section's lower edge still gets the full space */
body.hc-b.pc-page:not(.pl-c):not(:has(.pp-proof)) .sp-also:not(#_):not(#_){padding-top:var(--sec-g) !important}
/* table columns: the widths a screen asks for reach its rows (they were set on the list and never used) */
.sx-tbl li{grid-template-columns:var(--tw,repeat(var(--n,4),minmax(0,1fr)))}
.sx--app.is-phone .sx-tbl[style*="--n:4"] li,.sx--app.is-phone .sx-tbl[style*="--n:5"] li{grid-template-columns:1fr 1fr !important}
.sx--app.is-phone .sx-tbl[style*="--n:6"] li,.sx--app.is-phone .sx-tbl[style*="--n:7"] li{grid-template-columns:1fr 1fr !important}
.sx--app.is-phone .sx-tbl:is([style*="--n:6"],[style*="--n:7"]) li > span:not(:first-child):not(:last-child){display:none}
/* figure unit words smaller than the number */
body.hc-b.pc-page .pp-proof .pp-figs strong .pp-fig__u{font-size:.5em;letter-spacing:-.01em}
/* the home hero, the same way: its lines wait below their edge, unseen, until the wipe has cleared, then rise once
   (the head line adds mo-started after 3.5s if the motion layer never does, so nothing can stay hidden) */
html.mo-pre:not(.mo-started) body.hc-b .hero .display--hero{visibility:hidden}
html.mo-pre:not(.mo-started) body.hc-b .hero .display--hero .ln__in{transform:translateY(105%) !important;transition:none !important}

/* ── related products: two to a row at the closing pair's size; more than two open under Show more ── */
body.hc-b.pc-page:not(.pl-c) .sp-also__list:not(#_):not(#_){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:20px !important}
body.hc-b.pc-page:not(.pl-c) .sp-also__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),margin-top .6s cubic-bezier(.2,.7,.2,1);margin-top:0}
body.hc-b.pc-page:not(.pl-c) .sp-also__more.is-open{grid-template-rows:1fr;margin-top:20px}
body.hc-b.pc-page:not(.pl-c) .sp-also__more > .sp-also__rest{min-height:0;overflow:hidden;margin:0 !important}
body.hc-b.pc-page:not(.pl-c) .sp-also__more:not(.is-open) > .sp-also__rest{visibility:hidden;transition:visibility 0s .6s}
body.hc-b.pc-page:not(.pl-c) .sp-also__toggle{display:inline-flex;align-items:center;gap:8px;margin:28px 0 0;padding:0 20px;height:44px;border:1px solid rgba(11,18,32,.25);border-radius:999px;background:#FFFFFF;font:inherit;font-size:14px;font-weight:500;color:#0B1220;cursor:pointer}
body.hc-b.pc-page:not(.pl-c) .sp-also__toggle:hover{border-color:#0B1220}
body.hc-b.pc-page:not(.pl-c) .sp-also__toggle svg{width:16px;height:16px;transition:transform .3s ease}
body.hc-b.pc-page:not(.pl-c) .sp-also__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (max-width:760px){ body.hc-b.pc-page:not(.pl-c) .sp-also__list:not(#_):not(#_){grid-template-columns:1fr !important} }
@media (prefers-reduced-motion:reduce){ body.hc-b.pc-page .sp-also__more{transition:none} }
/* a film's frame: no dark ground behind it, so its rounded corners show no dark edge */
body.hc-b.pc-page .sp-story .sp-tabs__pic:not(:has(.sx-in)):not(#_){background:transparent}
body.hc-b.pc-page .sp-story .sp-tabs__pic:not(#_) video{background:transparent}
body.hc-b.pc-page:not(.pl-c) .sp-also__more > .sp-also__rest:not(#_):not(#_){margin:0 !important}
body.hc-b.pc-page:not(.pl-c) .sp-also__list:not(.sp-also__rest):not(#_):not(#_){margin-bottom:0 !important}
.sx--app.is-phone .sx-doc__kv > span,.sx--app.is-phone .sx-doc__kv > b{white-space:normal !important;overflow:visible !important;text-overflow:clip !important}
/* the number and its unit word inside a figure: the figure's own size and half of it; the box's caption rule
   (".pp-figs span") must not reach them */
body.hc-b.pc-page .pp-proof .pp-figs strong > .pp-fig__n:not(#_):not(#_){font-size:1em !important;line-height:inherit !important;color:inherit !important;letter-spacing:inherit !important;display:inline !important;margin:0 !important;max-width:none !important}
body.hc-b.pc-page .pp-proof .pp-figs strong > .pp-fig__u:not(#_):not(#_){font-size:.5em !important;line-height:inherit !important;color:inherit !important;letter-spacing:-.01em !important;display:inline !important;margin:0 !important;max-width:none !important}
/* the home title rises top line first on every size (Julian, 8 Oct: on a phone the last line rose first): its desktop
   lines (ln--d) and phone lines (ln--m) each get their own order, starting as the wipe clears */
html.mo-started body.hc-b .hero .display--hero .ln--d:nth-child(1) .ln__in:not(#_){transition-delay:.05s !important}
html.mo-started body.hc-b .hero .display--hero .ln--d:nth-child(2) .ln__in:not(#_){transition-delay:.15s !important}
html.mo-started body.hc-b .hero .display--hero .ln--m:nth-child(3) .ln__in:not(#_){transition-delay:.05s !important}
html.mo-started body.hc-b .hero .display--hero .ln--m:nth-child(4) .ln__in:not(#_){transition-delay:.15s !important}
html.mo-started body.hc-b .hero .display--hero .ln--m:nth-child(5) .ln__in:not(#_){transition-delay:.25s !important}
/* a stretched line chart: its line may draw to the edge, and its dots are round marks laid over it */
.sx-sparkbox{position:relative}
.sx-sparkbox .sx-spark{display:block;overflow:visible}
.sx-sparkdot{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#0B1220}
.sx-sparkdot.is-last{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-shadow:0 0 0 2px #FFFFFF}
@media (prefers-reduced-motion:no-preference){ .sp-tabs__panel.is-on .sx-sparkdot{animation:sxPop .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:.9s} }
/* the stretched chart draws in with a wipe from the left (a dash drawn along a stretched line breaks off) */
@media (prefers-reduced-motion:no-preference){ .sp-tabs__panel.is-on .sx-sparkbox > svg{animation:sxWipeX 1.1s cubic-bezier(.4,0,.2,1) .2s both} }
@keyframes sxWipeX{from{clip-path:inset(-10px 100% -10px -10px)}to{clip-path:inset(-10px -10px -10px -10px)}}

/* ── THE FOOTER (Julian, 11 Oct, after palantir.com): light, on the site's widest container; the legal lines and the
      social link on the left, every product under its category on the right, the wordmark beneath ── */
body.hc-b .foot--rich:not(#_){background:#FFFFFF;color:#0B1220;border-top:1px solid rgba(11,18,32,.12);padding:0}
body.hc-b .foot--rich .fr{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.6fr);gap:clamp(40px,6vw,96px);max-width:1440px;margin:0 auto;padding:clamp(64px,7vw,112px) clamp(24px,3vw,40px) clamp(48px,5vw,72px);box-sizing:border-box}
body.hc-b .foot--rich .fr__side{display:flex;flex-direction:column;max-width:340px}
body.hc-b .foot--rich .fr__copy{margin:0 0 28px;font-size:17px;line-height:1.5;color:#0B1220}
body.hc-b .foot--rich .fr__rows{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid rgba(11,18,32,.14)}
body.hc-b .foot--rich .fr__rows li{border-bottom:1px solid rgba(11,18,32,.14)}
body.hc-b .foot--rich .fr__row{display:flex;align-items:center;gap:6px;width:100%;padding:18px 0;border:0;background:none;font:inherit;font-size:16px;color:#0B1220;text-align:left;text-decoration:none;cursor:pointer}
body.hc-b .foot--rich .fr__row svg{width:13px;height:13px;flex:0 0 auto;color:rgba(11,18,32,.5);transition:transform .25s ease}
body.hc-b .foot--rich .fr__row:hover svg{transform:translate(2px,-2px);color:#0B1220}
body.hc-b .foot--rich .fr__social{display:flex;flex-wrap:wrap;gap:10px}
body.hc-b .foot--rich .fr__pill{display:inline-flex;align-items:center;justify-content:center;min-width:200px;height:48px;padding:0 24px;border:1px solid #0B1220;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#0B1220;text-decoration:none;transition:background-color .2s ease,color .2s ease}
body.hc-b .foot--rich .fr__pill:hover{background:#0B1220;color:#FFFFFF}
body.hc-b .foot--rich .fr__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px clamp(24px,3vw,48px)}
body.hc-b .foot--rich .fr__h{margin:0 0 16px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,18,32,.5)}
body.hc-b .foot--rich .fr__col ul + .fr__h{margin-top:36px}
body.hc-b .foot--rich .fr__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
body.hc-b .foot--rich .fr__cols :is(a,button){padding:0;border:0;background:none;font:inherit;font-size:17px;line-height:1.35;color:#0B1220;text-align:left;text-decoration:none;cursor:pointer;transition:color .2s ease}
body.hc-b .foot--rich .fr__cols :is(a,button):hover{color:rgba(11,18,32,.55)}
body.hc-b .foot--rich .fr__base{max-width:1440px;margin:0 auto;padding:0 clamp(24px,3vw,40px) clamp(28px,3vw,40px);box-sizing:border-box}
body.hc-b .foot--rich .fr__brand{display:block;color:#0B1220}
body.hc-b .foot--rich .fr__brand svg{display:block;width:100%;height:auto;aspect-ratio:1870 / 153}
@media (max-width:1100px){ body.hc-b .foot--rich .fr{grid-template-columns:1fr} body.hc-b .foot--rich .fr__side{max-width:none} }
@media (max-width:760px){
  body.hc-b .foot--rich .fr__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  body.hc-b .foot--rich .fr__cols :is(a,button){font-size:16px}
  body.hc-b .foot--rich .fr__pill{min-width:0;width:100%}
}

/* ── buttons: on hover the label rolls up out of its line and the same words rise in from below (Julian, 11 Oct).
      motion.js wraps each button's words; the copy below is a text-shadow, so nothing is read twice ── */
.btn-roll{display:inline-block;overflow:hidden;vertical-align:top;height:1.3em;line-height:1.3}
.btn-roll__t{display:block;text-shadow:0 1.3em 0 currentColor;transition:transform .5s cubic-bezier(.7,0,.2,1)}
:is(.btn,button,a):hover > .btn-roll > .btn-roll__t,:is(.btn,button,a):focus-visible > .btn-roll > .btn-roll__t{transform:translateY(-1.3em)}
@media (prefers-reduced-motion:reduce){ .btn-roll__t{transition:none} :is(.btn,button,a):hover > .btn-roll > .btn-roll__t{transform:none} }
/* the footer building itself (motion.js arms it): each line rises 12px into place, 35ms after the one before */
.foot--rich.fr-armed .fr-up{opacity:0;transform:translateY(12px)}
.foot--rich.fr-armed.fr-in .fr-up{animation:mo-row .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0) * 35ms)}
.foot--rich.fr-armed .fr-rise{clip-path:inset(100% 0 0 0);transform:translateY(24px)}
.foot--rich.fr-armed.fr-in .fr-rise{animation:frRise 1s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes frRise{from{clip-path:inset(100% 0 0 0);transform:translateY(24px)}to{clip-path:inset(0 0 0 0);transform:none}}

/* the rolling label always takes its button's own colour: an older rule for spans inside the closing tiles painted it
   white on the grey Book a demo tile (Julian, 11 Oct) */
.btn .btn-roll:not(#_):not(#_),.btn .btn-roll__t:not(#_):not(#_){color:inherit !important;background:none !important;font:inherit !important;letter-spacing:inherit !important}
.btn .btn-roll:not(#_){padding:0 !important;margin:0 !important;border:0 !important}

/* ── footer, refined (Julian, 11 Oct): each column as wide as its links, one gap between all of them; the LinkedIn pill
      keeps white words on its dark hover; room under the wordmark so the Ask Stagwell AI button never sits on it ── */
@media (min-width:761px){
  body.hc-b .foot--rich .fr__cols:not(#_){display:flex;justify-content:flex-end;flex-wrap:wrap;gap:40px clamp(48px,5vw,96px)}
  body.hc-b .foot--rich .fr__col:not(#_){flex:0 0 auto}
}
body.hc-b .foot--rich .fr__pill:not(#_):not(#_):hover{background:#0B1220 !important;color:#FFFFFF !important;border-color:#0B1220 !important}
body.hc-b .foot--rich .fr__base:not(#_){padding-bottom:clamp(104px,9vw,128px)}


/* ── footer, settled (Julian, 11 Oct): the logo at its usual size where the copyright was; the copyright small and
      centred as the footer's last line; room beneath it for the Ask Stagwell AI pill (its message steps aside while
      the footer is on screen) ── */
body.hc-b .foot--rich .fr__logo{display:block;width:clamp(180px,16vw,232px);margin:4px 0 32px;color:#0B1220}
body.hc-b .foot--rich .fr__logo svg{display:block;width:100%;height:auto;aspect-ratio:1870 / 153}
body.hc-b .foot--rich .fr__legal{max-width:1440px;margin:0 auto;padding:28px clamp(24px,3vw,40px) 96px;box-sizing:border-box;border-top:1px solid rgba(11,18,32,.08);font-size:13px;line-height:1.5;color:rgba(11,18,32,.5);text-align:center}
body.hc-b .foot--rich .fr:not(#_){padding-bottom:clamp(56px,6vw,88px)}
/* the bubble's close X goes wherever the bubble goes: it floated alone when the bubble stepped aside (Julian, 11 Oct) */
.hc-launch:has(.hc-launch__say.is-gone) .hc-launch__x:not(#_){display:none !important}
/* the X arrives with its bubble, not before it (it showed alone for a moment as the launcher came in) */
@keyframes hcXIn{from{opacity:0}to{opacity:1}}
.hc-launch.is-on .hc-launch__x:not(#_){animation:hcXIn .3s ease .9s both}
/* ── the footer on a phone: one column; each category a row with a chevron that opens its links smoothly; hairlines
      between rows as on the left ── */
.fr__chev{display:none}
@media (max-width:760px){
  body.hc-b .foot--rich .fr__cols:not(#_){display:block;border-top:1px solid rgba(11,18,32,.14)}
  body.hc-b .foot--rich .fr__col:not(#_){display:contents}
  body.hc-b .foot--rich .fr__h:not(#_){display:flex;align-items:center;justify-content:space-between;margin:0 !important;padding:18px 0;border-bottom:1px solid rgba(11,18,32,.14);font-size:13px;letter-spacing:.08em;color:#0B1220;cursor:pointer;-webkit-tap-highlight-color:transparent}
  body.hc-b .foot--rich .fr__h .fr__chev{display:block;width:16px;height:16px;color:rgba(11,18,32,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  body.hc-b .foot--rich .fr__h.is-open .fr__chev{transform:rotate(180deg)}
  body.hc-b .foot--rich .fr__h + ul:not(#_){max-height:0;overflow:hidden;gap:0;transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
  body.hc-b .foot--rich .fr__h + ul > li:first-child{padding-top:6px}
  body.hc-b .foot--rich .fr__h + ul > li:last-child{padding-bottom:18px}
  body.hc-b .foot--rich .fr__h.is-open + ul:not(#_){border-bottom:1px solid rgba(11,18,32,.14)}
  body.hc-b .foot--rich .fr__h + ul :is(a,button){display:block;padding:9px 0;font-size:17px}
  body.hc-b .foot--rich .fr__side:not(#_){margin-bottom:8px}
}
/* on a phone the last category row already draws a line; the copyright does not draw a second one under it */
@media (max-width:760px){ body.hc-b .foot--rich .fr__legal:not(#_){border-top:0;padding-top:20px} }
/* the phone menu: Book a demo as tall as the Ask Stagwell row beside it (Julian, 11 Oct) */
@media (max-width:900px){ body.hc-b #navMenu .btn:not(#_):not(#_){height:60px !important;min-height:60px} }
/* desktop footer: the columns share their rows, so the second headings (Data, Media, AI Productivity, Contact) sit on
   one line like the first (Julian, 11 Oct); each column stays as wide as its links, one gap between them */
@media (min-width:761px){
  body.hc-b .foot--rich .fr__cols:not(#_):not(#_){display:grid;grid-template-columns:repeat(4,max-content);grid-template-rows:repeat(4,auto);justify-content:end;column-gap:clamp(48px,5vw,96px);row-gap:0}
  body.hc-b .foot--rich .fr__col:not(#_):not(#_){display:grid;grid-row:1 / span 4;grid-template-rows:subgrid;align-content:start}
  body.hc-b .foot--rich .fr__col > ul:not(#_){align-self:start}
  body.hc-b .foot--rich .fr__col > .fr__h:not(#_){align-self:start;margin:0 0 16px}
  body.hc-b .foot--rich .fr__col > ul + .fr__h:not(#_){margin-top:44px}
}
/* the new footer and the cookie bar on a phone (ours, 13 Oct): home.css gives .foot room under it for the bar while the
   bar is up, and the rich footer's padding:0 outranked that; the room comes back here, in place of the copyright
   line's own room for the Ask Stagwell AI pill (consent.funnel.mjs: the last line can be scrolled clear of the bar) */
@media (max-width:640px){
  html.sai-consent-open body.hc-b .foot--rich:not(#_):not(#_){padding-bottom:calc(var(--sai-consent-h,0px) + 24px)}
  html.sai-consent-open body.hc-b .foot--rich .fr__legal:not(#_):not(#_){padding-bottom:24px}
}

/* The grey band under the bar is gone from every page (Julian, 12 Oct): strip.js no longer loads, so the hero's small
   tagline stays hidden here, and the hero keeps the extra air the band's script used to give it (48px on a computer,
   16px on a phone), so the logo sits where it did, just without the band. */
body.hc-b.pc-page .pp-hero .pp-eyebrow:not(#_){display:none !important}
body.hc-b.pc-page .pp-hero .pp-hero__in:not(#_){padding-top:48px !important}
@media (max-width:860px){ body.hc-b.pc-page .pp-hero .pp-hero__in:not(#_){padding-top:16px !important} }

/* ═══ The split hero (Julian, 12 Oct, after Palantir's Apollo page) ═══════════════════════════════════════════════
   prod-c.js marks the hero pp-hero--split. As clean as Apollo: on the left only the product's logo, the title and
   the button; on the right ONE screen drawn straight on a soft panel (no card inside it), animated. The hero lines up
   with the navigation: the words start where the Stagwell logo starts, the panel ends where the bar's last button
   ends (the bar: max 1440px wide, clamp(24px,4vw,64px) at its sides). Under it, as on Apollo: the short line on the
   left and the paragraph on the right; then "<product> capabilities" with the three capabilities and their icons. */
body.hc-b.pc-page .pp-hero.pp-hero--split:not(#_):not(#_){display:grid;grid-template-columns:var(--pc-cols,minmax(0,1fr) minmax(0,1.35fr));column-gap:clamp(40px,5.5vw,88px);align-items:stretch;text-align:left;padding-inline:calc(max(0px, (100% - 1440px) / 2) + var(--gutter)) !important;padding-bottom:0 !important}
body.hc-b.pc-page .pp-hero--split .pp-hero__in:not(#_):not(#_){max-width:none !important;margin:0 !important;padding:0 !important;text-align:left;align-items:flex-start !important}
/* the generated pages carry the logo in a p.sp-mark and their picture in a figure (the panel replaces it) */
body.hc-b.pc-page .pp-hero--split .sp-hero__pic:not(#_):not(#_){display:none !important}
body.hc-b.pc-page .pp-hero--split .sp-mark:not(#_):not(#_){margin:0 0 clamp(24px,2.4vw,36px) !important;padding:0 !important;line-height:0}
body.hc-b.pc-page .pp-hero--split .sp-mark img:not(#_):not(#_){height:clamp(24px,2.24vw,34px) !important;width:auto !important;max-width:100% !important;margin:0 !important}
body.hc-b.pc-page .pp-hero--split .pp-logo:not(#_):not(#_){height:clamp(24px,2.24vw,34px) !important;width:auto !important;margin:0 0 clamp(24px,2.4vw,36px) !important}
/* the button bigger (Julian's layout) */
body.hc-b.pc-page .pp-hero--split .pp-acts .btn:not(#_):not(#_){height:clamp(52px,4.4vw,64px) !important;padding-inline:clamp(28px,2.8vw,40px) !important;font-size:clamp(14px,1.1vw,16px) !important}
body.hc-b.pc-page .pp-hero--split .pp-title:not(#_):not(#_){text-align:left !important;margin:0 !important;max-width:none !important;font-size:clamp(42px,1rem + 3vw,64px) !important;line-height:1.06 !important;letter-spacing:-.025em !important}
/* The Media Machine's title is twice as long as any other: a size down, or it runs to seven lines */
body.hc-b.pc-page .pp-hero--split .pp-title.pp-title--long:not(#_):not(#_){font-size:clamp(30px,1rem + 1.75vw,42px) !important;line-height:1.1 !important}
/* the title's line pieces carry the old big size of their own: they take the title's */
body.hc-b.pc-page .pp-hero--split .pp-title span:not(#_):not(#_){font-size:inherit !important;line-height:inherit !important;letter-spacing:inherit !important}
/* the button follows the title at a set distance (Julian, 12 Oct: on a short title it sat too far below it) */
body.hc-b.pc-page .pp-hero--split .pp-acts:not(#_):not(#_){justify-content:flex-start !important;margin-top:0 !important;padding-top:clamp(32px,3vw,44px) !important}
.pc-split{min-width:0;display:flex;flex-direction:column}
.pc-split__vis{position:relative;display:grid;place-items:center;aspect-ratio:5 / 2;padding:clamp(20px,2.2vw,32px) clamp(24px,3.2vw,48px);background:#EEF2F3;overflow:hidden}
/* a lower panel (Julian, 12 Oct): the rows sit closer */
.pc-split__card .sx-variants{gap:2px}
.pc-split__card .sx-variants li{padding-top:4px}
.pc-split__card .sx-h{margin-bottom:8px}
.pc-split__vis.is-media{aspect-ratio:5 / 2;padding:0}
.pc-split__vis.is-voice{background:#0B1220}
.pc-split__vis.is-media > :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* BERA's picture moves slowly (Julian: "keep the image, animated if you can") */
@media (prefers-reduced-motion:no-preference){ .pc-split__vis > img.is-drift{animation:pcDrift 16s ease-in-out infinite alternate;transform-origin:60% 50%} }
@keyframes pcDrift{from{transform:scale(1)}to{transform:scale(1.08) translateX(-1.5%)}}
/* The Knowledge Machine: its picture's twelve rings, a few taking a colour in turn */
.pc-split__vis.is-circles{background:#1B1B1D}
/* The Targeting Machine: the picture's dark blue, a little lighter at the top as in the picture */
.pc-split__vis.is-torus{background:radial-gradient(120% 90% at 50% 18%,#06213F 0%,#020F22 55%,#00050E 100%)}
.pc-split__vis.is-torus canvas{position:absolute;inset:0;display:block}
.pc-rings{position:absolute;left:50%;top:50%;height:84%;width:auto;transform:translate(-50%,-50%)}
.pc-rings circle{fill:none;stroke:#3C3D40;stroke-width:3.5;transition:stroke .9s ease}
.pc-split__vis.is-voice{background:#0B1220}
.pc-split__stage{position:relative}
/* the screen is drawn straight on the panel: no card inside the panel (Julian, 12 Oct: nothing inside something) */
body.hc-b.pc-page .pc-split__card.pc-collage__card:not(#_):not(#_){position:absolute;left:0;top:0;transform-origin:0 0;height:auto;box-shadow:none;background:transparent;border:0;border-radius:0;padding:0;overflow:visible}
.pc-split__card .sx-variants li{border-top-color:rgba(11,18,32,.1)}
.pc-split__card .sx-variants p i:not(:nth-child(4n+1)):not(:nth-child(4n+3)){background:#D3D9DB}
/* the variants: every square lights up in turn, holds, and fades, over and over (assets being read and placed) */
@media (prefers-reduced-motion:no-preference){
  .pc-split.is-in .sx-variants p i{animation:pcFill 6.4s cubic-bezier(.2,.7,.2,1) infinite both;animation-delay:calc(var(--i,0) * .045s)}
  .pc-split.is-in .sx-variants li{animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.1s + var(--i,0) * .08s)}
}
/* every other screen keeps moving as the story's screens do: bars breathe, charts sway, dots pulse */
@media (prefers-reduced-motion:no-preference){
  .pc-split.is-in .sx-breathe{transform-origin:0 50%;animation:sxGrowX .8s cubic-bezier(.2,.7,.2,1) both,sxBreathe 5.2s ease-in-out calc(.9s + var(--bd,0s)) infinite alternate}
  .pc-split.is-in .sx-breathe-y{transform-origin:50% 100%;animation:sxGrowY .8s cubic-bezier(.2,.7,.2,1) both,sxBreatheY 4.6s ease-in-out calc(.9s + var(--bd,0s)) infinite alternate}
  .pc-split.is-in .sx-sway{animation:sxPop .7s cubic-bezier(.2,.7,.2,1) .15s both,sxSway 9s ease-in-out 1s infinite alternate}
  .pc-split.is-in .sx-pulse.is-pulsing::before{animation:sxRing 2.4s ease-out infinite}
  .pc-split.is-in :is(.sx-list li,.sx-rows li){animation:sxRow .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0) * .08s)}
}
@keyframes pcFill{0%{opacity:.12;transform:scale(.55)}9%{opacity:1;transform:scale(1)}78%{opacity:1;transform:scale(1)}100%{opacity:.12;transform:scale(.55)}}
/* under the hero, on the hero's own two columns (Julian's layout, 12 Oct): the short line under the title's column,
   the paragraph where the panel starts, both about 74px under the button */
html.pc-split-on body.hc-b.pc-page .pp-about--pair:not(#_){padding-top:clamp(48px,5.2vw,80px) !important;padding-bottom:clamp(40px,5vw,80px) !important;margin-top:0 !important}
html.pc-split-on body.hc-b.pc-page .pp-about--pair .pp-wrap:not(#_):not(#_){display:grid;grid-template-columns:var(--pc-cols-about,var(--pc-cols,minmax(0,1fr) minmax(0,1.35fr)));column-gap:clamp(40px,5.5vw,88px);align-items:start;max-width:1440px !important;margin-inline:auto !important;padding-inline:var(--gutter) !important}
html.pc-split-on body.hc-b.pc-page .pp-about--pair :is(.pc-split__lede,.pp-about__text):not(#_):not(#_){grid-area:auto !important;grid-row:1 !important;margin:0 !important;max-width:none !important;padding:0 !important;text-align:left !important;font:400 clamp(17px,1.35vw,20px)/1.45 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;letter-spacing:0 !important;color:#0B1220 !important}
html.pc-split-on body.hc-b.pc-page .pp-about--pair .pc-split__lede:not(#_):not(#_){grid-column:1 !important;padding-right:clamp(0px,3vw,48px) !important}
html.pc-split-on body.hc-b.pc-page .pp-about--pair .pp-about__text:not(#_):not(#_){grid-column:2 !important}
/* the capabilities just under the panel (16px), the block at its right edge, the words left to right, two lines,
   14px like the voice bubble; one at a time,
   each rising in from below its line as the last rises out above it */
.pc-caps__roll{position:relative;overflow:hidden;margin-top:16px;align-self:flex-end;max-width:100%;font:400 14px/1.45 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.pc-caps__item{position:absolute;left:0;top:0;margin:0;font:inherit;text-align:left;text-wrap:balance;color:#0B1220;transform:translateY(110%);opacity:0;transition:transform .85s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
.pc-caps__item.is-on{transform:none;opacity:1}
.pc-caps__item.is-out{transform:translateY(-110%);opacity:0}
@media (prefers-reduced-motion:reduce){ .pc-caps__item{transform:none !important;transition:opacity .3s ease} }
@media (max-width:860px){
  /* Julian's phone layout (12 Oct): logo, title, button, the short line, the panel, the capability under it on the
     right, then the paragraph */
  body.hc-b.pc-page .pp-hero.pp-hero--split:not(#_):not(#_){grid-template-columns:minmax(0,1fr);row-gap:48px;padding-inline:var(--gutter) !important}
  body.hc-b.pc-page .pp-hero--split .pp-acts:not(#_):not(#_){order:3;margin-top:0 !important;padding-top:28px !important}
  body.hc-b.pc-page .pp-hero--split .pp-lede:not(#_):not(#_){order:4;margin:44px 0 0 !important;padding:0 !important;max-width:none !important;text-align:left !important;font:400 16px/1.45 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;letter-spacing:0 !important;color:#0B1220 !important}
  .pc-split__vis{padding:20px}
  html.pc-split-on body.hc-b.pc-page .pp-about--pair:not(#_){padding-top:28px !important}
  html.pc-split-on body.hc-b.pc-page .pp-about--pair .pp-wrap:not(#_):not(#_){grid-template-columns:minmax(0,1fr);padding-inline:var(--gutter) !important}
  html.pc-split-on body.hc-b.pc-page .pp-about--pair :is(.pc-split__lede,.pp-about__text):not(#_):not(#_){grid-column:1 !important;grid-row:auto !important;padding-right:0 !important;font-size:16px !important}
}

/* the hero's title is the biggest type on the page (Julian, 12 Oct): "From signal to action" took the generic 78px
   title size; it takes every section title's size instead */
body.hc-b.pc-page .mx-flow:not(#_) .pp-h2,body.hc-b.pc-page .mx-flow:not(#_) .pp-h2 *{font-size:clamp(34px,1rem + 2.2vw,52px) !important;line-height:1.08 !important}
@media (max-width:860px){ body.hc-b.pc-page .mx-flow:not(#_) .pp-h2,body.hc-b.pc-page .mx-flow:not(#_) .pp-h2 *{font-size:30px !important} }

/* "View all products" in the Products dropdown: its words and arrow sit in the middle of the banner, not at its foot
   (Julian, 12 Oct: it read as not vertically centred; it sat 7px low) */
body.hc-b .nav__mcta:not(#_):not(#_){align-items:center}

/* Agent Cloud only (Julian, 12 Oct): the logo 40% bigger; the title kept to three lines on wide screens (its size stops
   at 57px, still the biggest type on the page); the short line two lines, reaching a little into the gap */
body.hc-b.pc-page.pp--agent-cloud .pp-hero--split .pp-logo:not(#_):not(#_){height:clamp(34px,3.14vw,48px) !important}
body.hc-b.pc-page.pp--agent-cloud .pp-hero--split .pp-title:not(#_):not(#_){font-size:clamp(42px,1rem + 3vw,57px) !important}
@media (min-width:861px){ html.pc-split-on body.hc-b.pc-page.pp--agent-cloud .pp-about--pair .pc-split__lede:not(#_):not(#_){padding-right:0 !important;margin-right:calc(clamp(40px,5.5vw,88px) / -2) !important} }

/* per page, on computers only (Julian, 12 Oct): the words' column wider and the panel narrower where a title runs long */
@media (min-width:861px){
  body.hc-b.pc-page.pp--agent-cloud{--pc-cols:minmax(0,1.15fr) minmax(0,1.2fr)}
  body.hc-b.pc-page.sp--media_machine{--pc-cols:minmax(0,1.3fr) minmax(0,1fr);--pc-cols-about:minmax(0,1.75fr) minmax(0,1fr)}
}

/* BERA: the picture's dark ground for its live chart; its logo 5% smaller (Julian, 12 Oct) */
.pc-split__vis.is-bera{background:linear-gradient(180deg,#181D23 0%,#1C2125 100%)}
.pc-split__vis.is-bera canvas{position:absolute;inset:0;display:block}
body.hc-b.pc-page.sp--bera .pp-hero--split .sp-mark img:not(#_):not(#_){height:clamp(23px,2.13vw,32px) !important}
.pc-split__vis.is-media > video.is-top{object-position:50% 0}

/* UNICEPTA: the orange of its card picture, lighter at the top right */
.pc-split__vis.is-unicepta{background:linear-gradient(225deg,#F7770A 0%,#E75605 50%,#D44304 100%)}
.pc-split__vis.is-unicepta canvas{position:absolute;inset:0;display:block}
/* IMAI (Julian, 12 Oct): the logo 40% bigger; on computers the columns even, so the title runs two lines */
body.hc-b.pc-page.sp--imai .pp-hero--split .sp-mark img:not(#_):not(#_){height:clamp(37px,3.45vw,53px) !important}
@media (min-width:861px){ body.hc-b.pc-page.sp--imai{--pc-cols:minmax(0,1.25fr) minmax(0,1.2fr)} }

/* NEW by Stagwell AI (Julian, 12 Oct): its picture zooming slowly in and out; the logo 10% bigger; under the hero the
   long line gets most of the width (171 characters against the paragraph's 65) */
@media (prefers-reduced-motion:no-preference){ .pc-split__vis > img.is-zoom{animation:pcZoom 20s cubic-bezier(.25,.1,.25,1) both;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden} }
/* clearly moving (Julian, 12 Oct: the first, slower zoom read as a still): in by a fifth while drifting left */
/* one slow zoom in as the page lands, and it stays there, never back out (Julian, 12 Oct, as on The Media Machine); it
   starts already a little in, so the picture's edge is never at the panel's edge (that read as a 1px shimmer) */
@keyframes pcZoom{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.24) translate3d(0,0,0)}}
body.hc-b.pc-page.sp--smb_platform .pp-hero--split .sp-mark img:not(#_):not(#_){height:clamp(26px,2.46vw,37px) !important}
@media (min-width:861px){ body.hc-b.pc-page.sp--smb_platform{--pc-cols-about:minmax(0,2.4fr) minmax(0,1fr)} }

/* GEOPulse: the logo 30% bigger (Julian, 12 Oct) */
body.hc-b.pc-page.sp--geopulse .pp-hero--split .sp-mark img:not(#_):not(#_){height:clamp(31px,2.9vw,44px) !important}

/* Numetrix (Julian, 12 Oct: the map "floats"): its white ground turned a very soft grey, the loop multiplied onto it;
   the logo 15% bigger */
.pc-split__vis.is-soft{background:#F1F2F3}
.pc-split__vis.is-soft > video{mix-blend-mode:multiply}
body.hc-b.pc-page.sp--numetrix .pp-hero--split .sp-mark img:not(#_):not(#_){height:clamp(28px,2.58vw,39px) !important}

/* Buttons: the words sat 1.5px low in every 42px button (Julian, 12 Oct: "not centred vertically"). Roobert's ascent
   (1.04em) is much taller than its descent (.22em), so a line box centred in the button puts the capitals .11em below
   its middle; the label is lifted by exactly that, so the capitals' own centre is the button's centre. */
.btn .btn-roll:not(#_):not(#_){position:relative;top:-.11em}
/* The Knowledge Machine: its logo 10% smaller, it is a wide one (Julian, 12 Oct) */
body.hc-b.pc-page.sp--knowledge_machine .pp-hero--split .sp-mark img:not(#_):not(#_){height:clamp(22px,2.02vw,31px) !important}

/* product pages: the voice message waits until the numbers (home-c.js adds is-wait); its close cross waits with it */
.hc-launch__say.is-wait:not(#_):not(#_){display:none !important}
.hc-launch:has(.hc-launch__say.is-wait) .hc-launch__x:not(#_):not(#_){display:none !important}

/* /products cards (Julian, 12 Oct): NewVoices' voice chart sat on the words, it moves 40px up (its navy ground below
   is the card's own); Newintel's dot moves 20px down, the picture growing from its top edge so no gap shows. The
   `translate` and `scale` properties stack with the cards' own hover zoom. */
body.pl-c #p-newvoices .prodgroup__head:not(#_):not(#_){background:#0B182B !important}
body.pl-c #p-newvoices .prodgroup__pic:not(#_){translate:0 -40px}
body.pl-c #p-newintel .prodgroup__pic:not(#_){transform-origin:50% 0;scale:1.125}

/* QuestDIY mockups (Julian, 12 Oct): the survey builder's options keep their padding inside their grey box; in Insert
   image, Accessibility stands clear of the fields above, and its field shares a row with Cancel and Apply */
.sx-build .sx-opts:not(#_):not(#_){padding:12px 16px !important;gap:9px}
.sx-access{display:flex;align-items:flex-end;gap:12px;margin-top:16px}
.sx-access > div:first-child{flex:1 1 auto;min-width:0}
.sx-access .sx-app__eb:not(#_){margin:0 0 6px !important}
.sx-access .sx-field2:not(#_){margin:0 !important}
.sx-access .sx-btns:not(#_){flex:0 0 auto;margin:0 !important}

/* Why Stagwell AI held on screen while its four blocks change in place (home-c.js adds why--stack on computers) */
body.hc-b #why.why--stack .why__track{position:relative}
body.hc-b #why.why--stack .why__grid:not(#_):not(#_){position:sticky;display:grid !important;grid-template-columns:minmax(0,1fr) !important;grid-template-rows:auto !important;gap:0 !important}
body.hc-b #why.why--stack .why__item:not(#_):not(#_){grid-area:1 / 1 !important;visibility:hidden;pointer-events:none}
body.hc-b #why.why--stack .why__item.is-on:not(#_):not(#_),body.hc-b #why.why--stack .why__item.is-off:not(#_):not(#_){visibility:visible}
body.hc-b #why.why--stack .why__item.is-on:not(#_):not(#_){pointer-events:auto;z-index:2}
body.hc-b #why.why--stack .why__item.is-off:not(#_):not(#_){z-index:1}
/* every picture on the right, the words on the left (Julian, 12 Oct) */
body.hc-b #why.why--stack .why__item:nth-child(n):not(#_):not(#_) > .why__slot{grid-column:2 / 3 !important}
body.hc-b #why.why--stack .why__item:nth-child(n):not(#_):not(#_) > :not(.why__slot){grid-column:1 / 2 !important}
/* held still: no scroll parallax on the pictures here (motion.js writes it inline; it made the held section drift) */
body.hc-b #why.why--stack .why__item > .why__slot:not(#_):not(#_){transform:none !important}
body.hc-b #why.why--stack .why__slot img:not(#_){transform:none !important}
/* every picture exactly the same size: the box takes its shape from its width alone, never from what it holds
   (Expertise's longer words made its row taller and the box stretched with it, 82px taller) */
body.hc-b #why .why__item:not(#_):not(#_) > .why__slot{contain:size;overflow:hidden;align-self:center !important;height:auto !important;max-height:none !important}
/* each picture wipes in from the right over the last one; the words rise in, one after another; the leaving words lift away */
body.hc-b #why.why--stack .why__item > .why__slot{clip-path:inset(0 0 0 100%);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
body.hc-b #why.why--stack .why__item.is-on > .why__slot:not(#_),body.hc-b #why.why--stack .why__item.is-off > .why__slot:not(#_){clip-path:inset(0 0 0 0)}
body.hc-b #why.why--stack .why__item > :not(.why__slot){opacity:0;transform:translateY(28px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
body.hc-b #why.why--stack .why__item.is-on > :not(.why__slot){opacity:1;transform:none;transition:opacity .7s ease .25s,transform .8s cubic-bezier(.2,.7,.2,1) .25s}
body.hc-b #why.why--stack .why__item.is-on > .why__d--lead{transition-delay:.33s}
body.hc-b #why.why--stack .why__item.is-on > .why__d:not(.why__d--lead){transition-delay:.41s}
body.hc-b #why.why--stack .why__item.is-on > .why__cta{transition-delay:.49s}
body.hc-b #why.why--stack .why__item.is-off > :not(.why__slot){opacity:0;transform:translateY(-20px)}
/* the four blocks share one spot and all fill it to the same height; each picture is centred in its block, so every
   picture lands in exactly the same place */
body.hc-b #why.why--stack .why__item:not(#_):not(#_){align-self:stretch !important;height:100% !important;aspect-ratio:auto !important;margin:0 !important}

/* ═══ The Stagwell AI suite as Apple's shop rail (Julian, 12 Oct) ══════════════════════════════════════════════════
   Bigger cards, about three and a third on screen; each card: the product's kind small, its line big, the product's
   photo in the middle with its moving panel on it, Learn more at the foot on the right. No icon, no hover photo, no
   drift; the arrows sit on the right. */
body.hc-b #suite .hcs__rail > li:not(#_):not(#_){flex:0 0 calc((100vw - clamp(20px,6vw,120px) - 75px) / 3.3) !important;height:auto !important}
body.hc-b #suite .hcs__card:not(#_):not(#_),body.hc-b #suite .hcs__card:hover:not(#_):not(#_){display:flex !important;flex-direction:column !important;
  min-height:clamp(470px,37vw,580px);height:100%;padding:30px 28px 26px !important;border-radius:22px !important;background:#F3F3F3 !important;overflow:hidden}
body.hc-b #suite .hcs__card::after{display:none !important}
body.hc-b #suite .hcs__card .hcs__ic:not(#_):not(#_){display:none !important}
body.hc-b #suite .hcs__card .hcs__kind:not(#_):not(#_){order:1;position:static !important;margin:0 0 10px !important;font:500 15px/1.35 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;letter-spacing:0 !important;text-transform:none !important;color:#0B1220 !important;transform:none !important}
body.hc-b #suite .hcs__card .hcs__desc:not(#_):not(#_){order:2;margin:0 0 24px !important;padding:0 !important;max-width:none !important;font:500 clamp(24px,2vw,30px)/1.15 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;letter-spacing:-.02em !important;color:#0B1220 !important;transform:none !important}
body.hc-b #suite .hcs__card .hcs__media:not(#_):not(#_){order:3;display:block !important;position:relative;flex:1 1 auto !important;height:auto !important;min-height:200px;margin:0 !important;aspect-ratio:auto !important;border-radius:16px !important;overflow:hidden !important;background:#E6E6E6 !important}
body.hc-b #suite .hcs__card .hcs__media img:not(#_):not(#_){display:block !important;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.hc-b #suite .hcs__card .hcs__go:not(#_):not(#_),body.hc-b #suite .hcs__card:hover .hcs__go:not(#_):not(#_){order:4;position:static !important;align-self:flex-end;margin:22px 0 0 !important;opacity:1 !important;transform:none !important;pointer-events:auto !important;
  display:inline-flex;align-items:center;height:44px;padding:0 22px !important;border-radius:999px;background:#0B1220 !important;border-color:#0B1220 !important;color:#FFFFFF !important}
body.hc-b #suite .hcs__card .hcs__go:not(#_):not(#_) *{color:#FFFFFF !important}
body.hc-b #suite .hcs__card:hover .hcs__go:not(#_):not(#_){background:#3A3F47 !important;border-color:#3A3F47 !important}
body.hc-b #suite .hcs__nav:not(#_):not(#_){justify-content:flex-end;padding-right:clamp(20px,6vw,120px) !important}
@media (max-width:860px){
  body.hc-b #suite .hcs__rail > li:not(#_):not(#_){flex:0 0 82vw !important}
  body.hc-b #suite .hcs__card:not(#_):not(#_),body.hc-b #suite .hcs__card:hover:not(#_):not(#_){min-height:460px;padding:24px 22px 22px !important}
  body.hc-b #suite .hcs__nav:not(#_):not(#_){padding-right:16px !important}
}
/* the suite cards show their photo only, no panel on it; every photo the same size (Julian, 12 Oct): the line above
   keeps room for two lines, the photo a fixed shape */
body.hc-b #suite .hcs__card .hcs__media .mk:not(#_):not(#_){display:none !important}
body.hc-b #suite .hcs__card .hcs__desc:not(#_):not(#_){min-height:2.3em}
body.hc-b #suite .hcs__card .hcs__media:not(#_):not(#_){flex:0 0 auto !important;aspect-ratio:4 / 3 !important;min-height:0 !important}
body.hc-b #suite .hcs__card:not(#_):not(#_),body.hc-b #suite .hcs__card:hover:not(#_):not(#_){min-height:0 !important}
/* the line a size bigger and more room between it and the photo (Julian, 12 Oct) */
body.hc-b #suite .hcs__card .hcs__desc:not(#_):not(#_){font-size:clamp(26px,2.3vw,34px) !important;margin:0 0 36px !important}
/* Learn more as the site's white button (Julian, 12 Oct): white, an ink hairline, the words rolling on hover (it is a
   .btn now, so motion.js wraps them); no icon. The whole card's hover rolls it too. */
body.hc-b #suite .hcs__card .hcs__go.btn:not(#_):not(#_),body.hc-b #suite .hcs__card:hover .hcs__go.btn:not(#_):not(#_){background:#FFFFFF !important;border-color:#0B1220 !important;box-shadow:inset 0 0 0 1px #0B1220 !important;color:#0B1220 !important;height:42px;padding:0 22px !important}
body.hc-b #suite .hcs__card .hcs__go.btn:not(#_):not(#_) *{color:#0B1220 !important}
body.hc-b #suite .hcs__card:hover .hcs__go.btn:not(#_):not(#_){background:#E7E7E3 !important}
body.hc-b #suite .hcs__card .hcs__go svg:not(#_){display:none !important}
:is(.hcs__card:hover,.hcs__card:focus-visible) .hcs__go > .btn-roll > .btn-roll__t{transform:translateY(-1.3em)}
/* the line keeps room for three lines (the longest runs to three at this size), so every photo starts at the same height */
body.hc-b #suite .hcs__card .hcs__desc:not(#_):not(#_){min-height:3.45em}
/* (Julian, 12 Oct) the arrows back on the left, clear of the Ask Stagwell AI pill; every card's line exactly two lines:
   its size follows the card's width (8.6% of it, about 28.5px on a 1440 screen, the largest at which all nine lines
   fit in two), with room for two lines kept so every photo starts at the same height */
body.hc-b #suite .hcs__nav:not(#_):not(#_){justify-content:flex-start;padding-left:clamp(20px,6vw,120px) !important;padding-right:clamp(20px,4vw,40px) !important}
body.hc-b #suite .hcs__card:not(#_):not(#_){container-type:inline-size}
body.hc-b #suite .hcs__card .hcs__desc:not(#_):not(#_){font-size:max(20px,8.6cqi) !important;min-height:2.3em}

/* the held Why section's "Scroll to explore": small, grey, at the foot of the screen in the middle, a gentle bob */
.why__hint{position:fixed;left:50%;bottom:26px;z-index:20;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;
  transform:translateX(-50%);font:500 12px/1 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.01em;
  color:rgba(11,18,32,.55);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s linear .4s}
.why__hint.is-on{opacity:1;visibility:visible;transition:opacity .4s ease}
.why__hint svg{display:block;color:#0B1220}
@media (prefers-reduced-motion:no-preference){ .why__hint.is-on svg{animation:whyBob 1.8s ease-in-out infinite} }
@keyframes whyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* (Julian, 12 Oct) the suite cards round their corners as the Book a demo / Call my phone boxes do (10px), and their
   photos have square corners */
body.hc-b #suite .hcs__card:not(#_):not(#_),body.hc-b #suite .hcs__card:hover:not(#_):not(#_){border-radius:10px !important}
body.hc-b #suite .hcs__card .hcs__media:not(#_):not(#_){border-radius:0 !important}
/* the closing section's Book a demo and Call my phone keep the bar's side margins at every width (between 860 and
   1280 they ran to the screen's edges) */
body.hc-b .ask-end > .wrap.ask-end__in:not(#_){box-sizing:border-box;max-width:calc(1240px + 2 * var(--gutter)) !important;padding-inline:var(--gutter) !important;margin-inline:auto !important}
@media (max-width:860px){ body.hc-b .ask-end > .wrap.ask-end__in:not(#_){padding-inline:20px !important} }
body.hc-b .ask-end .ask-end__ways:not(#_):not(#_){margin-left:0 !important;margin-right:0 !important;width:100% !important}

/* ═══ Square CTA buttons and the full-screen menu (Julian, 13 Oct) ═══════════════════════════════════════════════════ */
/* every call-to-action button square (the chat's pills and tags keep theirs) */
body.hc-b .btn:not(#_):not(#_){border-radius:0 !important}
/* computers: the bar keeps the logo, Ask, Book a demo, Call my phone and a square Menu button; the old Why/Products
   links and the phone's burger step aside */
.nav__menu{display:none}
@media (min-width:861px){
  body.hc-b #nav .nav__links:not(#_):not(#_){display:none !important}
  body.hc-b #nav .nav__burger:not(#_):not(#_){display:none !important}
  body.hc-b #nav .nav__acts:not(#_):not(#_){grid-column:3 !important;justify-self:end !important;margin-left:auto !important;margin-right:0 !important}
  body.hc-b #nav .nav__menu:not(#_){display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:42px;margin-left:0;padding:0;
    background:#FFFFFF;border:0;box-shadow:inset 0 0 0 1px #0B1220;border-radius:0;cursor:pointer;transition:background-color .18s ease}
  body.hc-b #nav .nav__menu:not(#_):hover{background:#E7E7E3}
  body.hc-b #nav .nav__menu span{display:block;width:18px;height:1.5px;background:#0B1220}
  body.hc-b #nav .nav__menu span{transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
  body.hc-b #nav .nav__menu.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.hc-b #nav .nav__menu.is-open span:nth-child(2){opacity:0}
  body.hc-b #nav .nav__menu.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
/* the menu: white, under the bar (the bar stays on top, so nothing moves), Palantir's order in our type */
.mega{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;background:#FFFFFF;color:#0B1220;
  padding:calc(var(--nav-h,72px) + clamp(16px,3vh,40px)) var(--gutter) clamp(24px,4vh,48px);opacity:0;transition:opacity .35s ease;font-family:'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.mega.is-in{opacity:1}
html.mega-open body.hc-b #nav:not(#_){z-index:160 !important;background:#FFFFFF !important}
.mega__grid{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,3vw,48px);max-width:1312px;width:100%;margin:0 auto;min-height:0}
.mega__col{border-top:1px solid rgba(11,18,32,.14);padding-top:22px;min-width:0}
.mega__eb{margin:0 0 clamp(18px,2.6vh,32px);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,18,32,.55)}
.mega__big{list-style:none;margin:0;padding:0}
.mega__big a{display:inline-flex;align-items:baseline;gap:.35em;padding:.08em 0;color:#0B1220;text-decoration:none;font-size:clamp(28px,2.7vw,42px);line-height:1.2;letter-spacing:-.02em;transition:color .18s ease}
.mega__big a:hover{color:#009CBD}
.mega__big .is-why{margin-top:18px;padding-top:18px;border-top:1px solid rgba(11,18,32,.14)}
.mega__arw{font-size:.72em;color:rgba(11,18,32,.45)}
/* every product: one row per family, opening like the phone footer's */
.mega__acc{border-top:1px solid rgba(11,18,32,.14)}
.mega__fam{border-bottom:1px solid rgba(11,18,32,.14)}
.mega__fh{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;border:0;background:none;color:#0B1220;cursor:pointer;font:400 19px/1.3 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:left}
.mega__fh svg{flex:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mega__fam.is-open .mega__fh svg{transform:rotate(180deg)}
.mega__fl{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.2,1)}
.mega__fl li:last-child{padding-bottom:14px}
.mega__fl a{display:block;padding:5px 0;color:rgba(11,18,32,.72);text-decoration:none;font-size:16px;line-height:1.35}
.mega__fl a:hover{color:#009CBD}
/* the film the full height of the column, its words and button in the middle of it, set to the left */
.mega__col--film{display:flex;flex-direction:column}
.mega__film{position:relative;flex:1 1 auto;display:flex;align-items:center;min-height:320px;overflow:hidden;background:#0B1220;color:#FFFFFF;text-decoration:none}
.mega__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.mega__film::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.mega__film__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:clamp(24px,2.6vw,40px)}
.mega__film__t{font-size:clamp(32px,3.2vw,52px);line-height:1.05;letter-spacing:-.02em;font-weight:400}
body.hc-b .mega__film__btn.btn:not(#_){height:48px;padding:0 26px;background:#FFFFFF !important;color:#0B1220 !important;box-shadow:none !important}
/* the way in: the columns, then their lines, rise one after another */
@media (prefers-reduced-motion:no-preference){
  .mega__col{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .mega__col:nth-child(2){transition-delay:.06s}.mega__col:nth-child(3){transition-delay:.12s}
  .mega__big li,.mega__fam{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.12s + var(--i,0) * .045s)}
  .mega.is-in .mega__col,.mega.is-in .mega__big li,.mega.is-in .mega__fam{opacity:1;transform:none}
}
@media (max-width:860px){ .mega{display:none !important} }
/* (Julian, 13 Oct) more air between the big product links; the View all products banner's words and button centred */
.mega__big li + li{margin-top:clamp(10px,1.4vh,16px)}
.mega__film{justify-content:center}
.mega__film__in{align-items:center;text-align:center}

/* (Julian, 13 Oct) no blue on hover: a fine line draws in under the words instead */
.mega__big a:hover,.mega__fl a:hover{color:inherit}
.mega__fl a:hover{color:#0B1220}
.mega__t{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1);padding-bottom:.06em}
.mega__big a:hover .mega__t,.mega__fl a:hover .mega__t,.mega__big a:focus-visible .mega__t,.mega__fl a:focus-visible .mega__t{background-size:100% 1px}
.mega__big a .mega__t{background-image:linear-gradient(currentColor,currentColor);background-size:0 2px}
.mega__big a:hover .mega__t,.mega__big a:focus-visible .mega__t{background-size:100% 2px}
/* the two lists stand as tall as the film beside them: the products spaced down the column with Why Stagwell AI at
   its foot, the families sharing the column's height; a fine line between Products and Every product */
.mega__col{position:relative;display:flex;flex-direction:column}
.mega__big{flex:1 1 auto;display:flex;flex-direction:column;gap:clamp(14px,3vh,34px)}
.mega__big li + li{margin-top:0}
.mega__big .is-why{margin-top:auto}
.mega__acc{flex:1 1 auto;display:flex;flex-direction:column}
.mega__fam{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:56px}
.mega__fam.is-open{justify-content:flex-start}
.mega__col:nth-child(2)::before{content:"";position:absolute;top:0;bottom:0;left:calc(clamp(28px,3vw,48px) / -2);width:1px;background:rgba(11,18,32,.14)}

/* ═══ One button style everywhere (Julian, 13 Oct): 13.5px, semi-bold, capitals, 42px tall, square ══════════════════
   the Why Stagwell AI buttons take the capitals; Ask Stagwell AI and the footer's LinkedIn become the bar's white
   button (white, an ink hairline) instead of a teal pill and a round pill */
body.hc-b #why .why__cta:not(#_):not(#_){text-transform:uppercase !important;letter-spacing:.01em !important;font-size:13.5px !important;font-weight:600 !important}
body.hc-b .hc-launch__btn:not(#_):not(#_),body.hc-b .fr__pill:not(#_):not(#_){display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px !important;padding:0 20px !important;
  border:0 !important;border-radius:0 !important;background:#FFFFFF !important;color:#0B1220 !important;box-shadow:inset 0 0 0 1px #0B1220 !important;
  font:600 13.5px/1 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;letter-spacing:.01em !important;text-transform:uppercase !important;text-decoration:none !important;transition:background-color .18s ease}
body.hc-b .hc-launch__btn:not(#_):not(#_) *{color:#0B1220 !important}
body.hc-b .hc-launch__btn:not(#_):not(#_) svg{width:16px;height:16px;color:#0B1220 !important;fill:currentColor}
body.hc-b .hc-launch__btn:not(#_):not(#_):hover,body.hc-b .fr__pill:not(#_):not(#_):hover{background:#E7E7E3 !important;color:#0B1220 !important}

/* ── Menu, round 5 (Julian, 13 Oct): no divider between the columns; Why Stagwell AI comes up under the products instead
   of sitting at the foot; the products a touch closer; the big links' underline is a 1px hairline like the dividers */
.mega__col:nth-child(2)::before{content:none}
.mega__big{gap:clamp(12px,2.3vh,26px)}
.mega__big .is-why{margin-top:clamp(10px,1.6vh,18px)}
.mega__big a .mega__t{background-size:0 1px}
.mega__big a:hover .mega__t,.mega__big a:focus-visible .mega__t{background-size:100% 1px}
/* correction: the closer spacing is for the middle column's rows (Stagwell Machines, Data…), which no longer stretch to
   the menu's full height; the products in the left column keep the spacing Julian liked */
.mega__big{gap:clamp(14px,3vh,34px)}
.mega__acc{flex:0 0 auto}
.mega__fam{flex:0 0 auto;min-height:0}
.mega__fh{padding:20px 0}

/* ── Buttons a weight lighter; Ask Stagwell AI without the pulsing ring; it and its voice bubble share one grey hairline,
   square (Julian, 13 Oct). The mic in the bubble stays blue */
body.hc-b .btn:not(#_):not(#_),body.hc-b .hc-launch__btn:not(#_):not(#_),body.hc-b .fr__pill:not(#_):not(#_),body.hc-b #why .why__cta:not(#_):not(#_){font-weight:500 !important}
body.hc-b .hc-launch__btn:not(#_):not(#_)::before,body.hc-b .hc-launch__btn:not(#_):not(#_)::after{animation:none !important;content:none !important}
body.hc-b .hc-launch__btn:not(#_):not(#_){box-shadow:inset 0 0 0 1px #CFCFCA !important}
body.hc-b .hc-launch__say:not(#_):not(#_){border-radius:0 !important;box-shadow:inset 0 0 0 1px #CFCFCA !important}
/* LinkedIn and Ask Stagwell AI hover like every other CTA: the words roll, the fill turns the light grey, no black flood
   (Julian, 13 Oct) */
body.hc-b .foot--rich .fr__pill:not(#_):not(#_):not(#_):hover{background:#E7E7E3 !important;color:#0B1220 !important}
:is(.hc-launch__btn:hover,.hc-launch__btn:focus-visible) > span > .btn-roll > .btn-roll__t{transform:translateY(-1.3em)}
.hc-launch__btn > span > .btn-roll,.fr__pill > .btn-roll{position:relative;top:-.11em}

/* ── The bar once the page scrolls: frosted, like Palantir's (Julian, 13 Oct): the page shows through softly, blurred.
   The full-screen menu keeps it solid white */
html:not(.mega-open) body.hc-b #nav.is-stuck:not(#_):not(#_){background:rgba(250,250,250,.7) !important;-webkit-backdrop-filter:blur(20px) !important;backdrop-filter:blur(20px) !important}   /* blur only: the colour boost made what passes under it read stronger than the bar's 92% (Julian, 13 Oct) */

/* ── Every CTA on every page is the one button (Julian, 13 Oct): the product hero's Book a demo drops from the large
   52px size to the 42px one; /products' "Find my fit" and the cards' "Explore" lose their round pills and become the
   white outlined button, rolling their words like the rest */
body.hc-b .pp-acts .btn:not(#_):not(#_),body.hc-b.pc-page .pp-hero--split .pp-acts .btn:not(#_):not(#_){height:42px !important;min-height:42px !important;padding:0 20px !important;font-size:13.5px !important}
body.hc-b .pp-site:not(#_):not(#_),body.hc-b .prodcard__link:not(#_):not(#_){display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px !important;padding:0 20px !important;
  border:0 !important;border-radius:0 !important;background:#FFFFFF !important;color:#0B1220 !important;box-shadow:inset 0 0 0 1px #0B1220 !important;
  font:500 13.5px/1 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;letter-spacing:.01em !important;text-transform:uppercase !important;text-decoration:none !important;transition:background-color .18s ease}
body.hc-b .pp-site:not(#_):not(#_):hover,body.hc-b .prodcard__link:not(#_):not(#_):hover{background:#E7E7E3 !important;color:#0B1220 !important}
.pp-site > .btn-roll,.prodcard__link > .btn-roll{position:relative;top:-.11em}
/* the rolled words sit on the same line height in every CTA (the .btn ones inherit 1.5 from the button, the launcher
   and the others had 1.3, so their capitals sat 1.4px apart), and the lift centres the capitals' ink exactly
   (measured with Roobert's metrics, 13 Oct) */
:is(.hc-launch__btn,.fr__pill,.pp-site,.prodcard__link) .btn-roll__t{line-height:1.5}
.btn .btn-roll:not(#_):not(#_),.hc-launch__btn > span > .btn-roll,.pp-site > .btn-roll,.prodcard__link > .btn-roll,.fr__pill > .btn-roll{top:-.158em}

/* ── ONE side margin for everything that runs edge to edge (Julian, 13 Oct): the bar, the footer, the portfolio tabs,
   the product heroes, the menu and the closing boxes all start on the footer's line, clamp(24px,3vw,40px), instead of
   58px / 40px / 28px. Everything that lined up with the bar reads --gutter, so it moves with it */
body.hc-b{--gutter:clamp(24px,3vw,40px)}
body.hc-b .hc-port > .wrap:not(#_){padding-inline:var(--gutter) !important}
.mega__grid{max-width:calc(1440px - 2 * var(--gutter))}   /* its columns start under the logo again */

/* ── In-between widths (Julian, 13 Oct) ──
   the footer stacks under 1100px: its link columns now spread across the full width from the left margin instead of
   huddling at the right; the bar's Book a demo on tablets and phones is the same 42px / 13.5px button as on desktop */
@media (min-width:761px) and (max-width:1100px){
  body.hc-b .foot--rich .fr__cols:not(#_):not(#_){justify-content:space-between}
}
@media (max-width:820px){
  body.hc-b .nav .nav__acts > .btn--ink[data-cta="session"]:not(#_):not(#_){height:42px !important;padding:0 20px !important;font-size:13.5px !important;letter-spacing:.01em}
}
@media (max-width:400px){
  body.hc-b .nav .nav__acts > .btn--ink[data-cta="session"]:not(#_):not(#_){padding:0 14px !important;font-size:12.5px !important}
}
/* the one side margin holds on tablets and phones too: 20px under 760px for the bar, the footer, the boxes and the
   hero (the bar had 16px, the footer 24px) */
@media (max-width:760px){ body.hc-b{--gutter:20px} }
body.hc-b #nav .nav__in:not(#_):not(#_){padding-inline:var(--gutter) !important}
body.hc-b .foot--rich :is(.fr,.fr__base,.fr__legal):not(#_):not(#_){padding-left:var(--gutter) !important;padding-right:var(--gutter) !important}

/* Machine OS's picture: its mark tiled on a dark, grained ground; a few take a colour at a time (prod-c.js PCVIS.machines) */
.is-machines{background:#1B1B1D}
.pc-marks{position:absolute;inset:0;width:100%;height:100%;display:block}
.pc-marks use{color:#5F6066;stroke-width:5;transition:color .9s ease}   /* 35% stronger than first drawn (Julian, 13 Oct) */   /* the mark's hairline outlines, given weight */

/* two-tone headings, desktop and phones (Julian, 13 Oct, after the products statement): the words that lead in ink, the rest a
   softer tone of the same colour (motion.js marks them .mo-dim from data-tone); soft ink on light grounds, soft white on the intro's film */
/* (phones too, Julian 13 Oct) */
  /* solid greys, no transparency (Julian, 13 Oct: on a picture a see-through grey shifts with what is behind it) */
  body.hc-b .mo-dim:not(#_):not(#_),body.hc-b .mo-dim:not(#_):not(#_) .mo-c{color:#8F949B !important}
  body.hc-b .display--intro .mo-dim:not(#_):not(#_),body.hc-b .display--intro .mo-dim:not(#_):not(#_) .mo-c{color:#B4BAC2 !important}
  body.pn .pn-dim{color:#B4BAC2}
  /* the homepage H1: "transform marketing" in the grey */
  body.hc-b #heroTitle .hl:not(#_):not(#_),body.hc-b #heroTitle .hl:not(#_):not(#_) *{color:#8F949B !important
}

/* "transform marketing" in the grey all through: its fill is a clipped gradient with a hairline outline for weight, so
   both take the grey (only the colour changed before, which left a dark outline round the grey letters) */
  body.hc-b #heroTitle .hl:not(#_):not(#_){background-image:none !important;-webkit-text-fill-color:#8F949B !important;-webkit-text-stroke-color:#8F949B !important}
/* the phone menu: each product led by the desktop menu's arrow instead of its mark, and more room between Ask Stagwell
   and Book a demo (Julian, 13 Oct) */
body.hc-b #navMenu .menu__sub .nav__pmark:not(#_):not(#_){width:auto !important;height:auto !important;min-width:0;background:none !important;border:0 !important;box-shadow:none !important;
  display:inline-flex;align-items:center;flex:0 0 auto !important;margin:0 !important;padding:0 !important;align-self:flex-start;font-size:17px;line-height:1.25;color:rgba(11,18,32,.45)}
body.hc-b #navMenu .menu__sub .nav__pmark:not(#_):not(#_) > *{display:none !important}
body.hc-b #navMenu .menu__sub .nav__pmark:not(#_):not(#_)::before{content:"\21B3"}
body.hc-b #navMenu .menu__sub a:not(#_):not(#_){gap:10px;align-items:flex-start !important}
body.hc-b #navMenu .menu__acts:not(#_):not(#_){gap:16px}
/* the greyed words that are also highlights ("to work", "suite"): their fill is a clipped gradient, so the grey goes on
   the fill and its hairline outline, as on the H1 */
  body.hc-b .mo-dim:is(.hl,[class*="hl"]):not(#_):not(#_),body.hc-b .hl .mo-dim:not(#_):not(#_),body.hc-b .mo-dim .hl:not(#_):not(#_){background-image:none !important;-webkit-text-fill-color:#8F949B !important;-webkit-text-stroke-color:#8F949B !important;color:#8F949B !important}
/* phones: the held Why section keeps its blocks; the "Scroll to explore" sign would sit on the voice bubble, so it rests */
@media (max-width:860px){ .why__hint:not(#_){display:none !important} }
/* phones: while Why Stagwell AI is held on screen, "I can talk, try my voice feature" steps aside (it sat over the
   section's foot) and comes back after (Julian, 13 Oct) */
@media (max-width:860px){
  html.why-held .hc-launch__say:not(#_),html.why-held .hc-launch__x:not(#_){opacity:0 !important;visibility:hidden !important;transition:opacity .25s ease,visibility 0s linear .25s !important}
}
/* the phone menu's products in the same type as "Why Stagwell AI" (20px, semi-bold), the arrow the same size and on
   the name's line, the short description under the name (Julian, 13 Oct) */
body.hc-b #navMenu .menu__sub .menu__pname:not(#_):not(#_){font-size:20px !important;font-weight:600 !important;line-height:24px !important;letter-spacing:-.01em}
body.hc-b #navMenu .menu__sub .nav__pmark:not(#_):not(#_){font-size:20px !important;line-height:24px !important}
body.hc-b #navMenu .menu__sub .menu__pdesc:not(#_):not(#_){margin-top:3px}
/* the phone menu's names a weight lighter: medium, Why Stagwell AI with them (Julian, 13 Oct) */
body.hc-b #navMenu .menu__sub .menu__pname:not(#_):not(#_),body.hc-b #navMenu .menu__links > li > a:not(#_):not(#_){font-weight:500 !important}

/* the desktop menu opens more slowly, so its rise is noticed (Julian, 13 Oct): the white comes in, then the columns,
   then each link and family one after another, a beat apart */
.mega{transition:opacity .5s ease}
@media (prefers-reduced-motion:no-preference){
  .mega__col:not(#_){transform:translateY(26px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
  .mega__col:nth-child(2):not(#_){transition-delay:.12s}.mega__col:nth-child(3):not(#_){transition-delay:.24s}
  .mega__big li:not(#_),.mega__fam:not(#_){transform:translateY(26px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.25s + var(--i,0) * .09s)}
  .mega.is-in .mega__col:not(#_),.mega.is-in .mega__big li:not(#_),.mega.is-in .mega__fam:not(#_){transform:none}
}
/* slower again (Julian, 13 Oct: "still a little too fast"): about two seconds from the white to the last link */
.mega{transition:opacity .7s ease}
@media (prefers-reduced-motion:no-preference){
  .mega__col:not(#_):not(#_){transform:translateY(34px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
  .mega__col:nth-child(2):not(#_):not(#_){transition-delay:.18s}.mega__col:nth-child(3):not(#_):not(#_){transition-delay:.36s}
  .mega__big li:not(#_):not(#_),.mega__fam:not(#_):not(#_){transform:translateY(34px);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.35s + var(--i,0) * .16s)}
  .mega.is-in .mega__col:not(#_):not(#_),.mega.is-in .mega__big li:not(#_):not(#_),.mega.is-in .mega__fam:not(#_):not(#_){transform:none}
}
/* the slow, staggered rise is for opening only; closing is prompt */
@media (prefers-reduced-motion:no-preference){
  .mega:not(.is-in) .mega__col:not(#_):not(#_),.mega:not(.is-in) .mega__big li:not(#_):not(#_),.mega:not(.is-in) .mega__fam:not(#_):not(#_){transition-duration:.25s;transition-delay:0s}
  .mega.is-in .mega__col:nth-child(2):not(#_):not(#_){transition-delay:.18s}.mega.is-in .mega__col:nth-child(3):not(#_):not(#_){transition-delay:.36s}
  .mega.is-in .mega__big li:not(#_):not(#_),.mega.is-in .mega__fam:not(#_):not(#_){transition-delay:calc(.35s + var(--i,0) * .16s)}
}
/* phones: "Why Stagwell AI" the same size as the other section titles (How we put agentic AI to work, the suite...):
   their words are clamp(40px, 10.6vw, 50px), this one had been pinned at 30px (Julian, 13 Oct) */
@media (max-width:760px){
  body.hc-b #why .display--cos:not(#_):not(#_):not(#_),body.hc-b #why .display--cos:not(#_):not(#_):not(#_) *{font-size:clamp(40px,10.6vw,50px) !important;line-height:1.08 !important}
}
/* Machine OS's mark, one large, its four parts lighting in turn */
.pc-marks--one{position:absolute;left:50%;top:50%;width:62%;height:62%;translate:-50% -50%;overflow:visible}
.pc-marks--one .pc-part{color:#5F6066;transition:color .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.pc-marks--one .pc-part path{fill:currentColor;stroke:currentColor;stroke-width:4}
.pc-marks--one .pc-part.is-on{transform:translate(calc(var(--ox) * 7px),calc(var(--oy) * 7px))}
.pc-marks__grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .pc-marks--one .pc-part{transition:none} }
/* Machine OS's mark: fine lines, and the parts stay put as their colour changes (Julian, 13 Oct) */
.pc-marks--one .pc-part path:not(#_){stroke-width:1.4}
.pc-marks--one .pc-part:not(#_),.pc-marks--one .pc-part.is-on:not(#_){transform:none;transition:color .9s ease}

/* ── the site's small paragraphs, one size and one leading everywhere (Julian, 13 Oct: "the same font size for consistency
   and the same line height", the spacing felt high at 1.45-1.55): 18px on computers, 16px on phones, leading 1.2. The
   fine print (legal, notices, the call form's small lines) keeps its own ── */
body.hc-b :is(.why__d,.pn-r__p,.pp-lede,.pp-about__text,.ask-end__lede,.prodcard__pos,.pn-r__who,.prodcard__who,.pc-col):not(#_):not(#_):not(#_){font-size:18px !important;line-height:1.2 !important}
body.hc-b :is(.why__d,.pn-r__p,.pp-lede,.pp-about__text,.ask-end__lede,.prodcard__pos,.pn-r__who,.prodcard__who,.pc-col):not(#_):not(#_):not(#_) *{line-height:inherit !important}
body.hc-b .pn-r__what:not(#_):not(#_){line-height:1.2 !important}
@media (max-width:760px){
  body.hc-b :is(.why__d,.pn-r__p,.pp-lede,.pp-about__text,.ask-end__lede,.prodcard__pos,.pn-r__who,.prodcard__who,.pc-col):not(#_):not(#_):not(#_){font-size:16px !important;line-height:1.3 !important}   /* phones a touch more air (Julian, 13 Oct) */
}
/* Why: the highlighted words in a block's paragraph ("Code and Theory, the most-awarded digital agency of the agentic
   era") read in the black ink at the paragraph's own weight, not bold (Julian, 13 Oct) */
body.hc-b #why .why__d :is(strong,b):not(#_):not(#_){font-weight:inherit !important;color:#0B1220 !important}
/* inline links in the copy ("Our solutions" in Extensible): black and underlined, not blue (Julian, 13 Oct) */
body.hc-b .hc-inlink:not(#_):not(#_){color:#0B1220 !important;background-image:none !important;text-decoration:underline !important;text-decoration-thickness:1px !important;text-underline-offset:.18em !important;text-decoration-color:currentColor !important}
body.hc-b .hc-inlink:not(#_):not(#_):hover{color:rgba(11,18,32,.6) !important}
/* the menu's left column: a line under Why Stagwell AI, and Talk to an AI expert in black at the column's foot */
.mega__big .is-why:not(#_){padding-bottom:clamp(14px,2.2vh,22px);border-bottom:1px solid rgba(11,18,32,.14)}
.mega__foot{margin-top:auto;padding-top:clamp(20px,3vh,32px)}
@media (prefers-reduced-motion:no-preference){
  .mega__foot{opacity:0;transform:translateY(34px);transition:opacity .25s ease,transform .25s ease}
  .mega.is-in .mega__foot{opacity:1;transform:none;transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.35s + var(--i,0) * .16s)}
}
.mega__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* the close buttons of the expert form and the chat look like the menu's (Julian, 13 Oct: square corners everywhere):
   a white 44x42 square, an ink hairline, the cross in ink; light grey on hover. Styling only: the chat's own files are
   untouched */
body.hc-b .modal__x:not(#_):not(#_),body.hc-b .chat-over__close:not(#_):not(#_){width:44px !important;height:42px !important;min-width:0 !important;padding:0 !important;
  border:0 !important;border-radius:0 !important;background:#FFFFFF !important;color:#0B1220 !important;box-shadow:inset 0 0 0 1px #0B1220 !important;
  display:inline-flex !important;align-items:center;justify-content:center;transition:background-color .18s ease}
body.hc-b .modal__x:not(#_):not(#_):hover,body.hc-b .chat-over__close:not(#_):not(#_):hover{background:#E7E7E3 !important}
body.hc-b :is(.modal__x,.chat-over__close):not(#_):not(#_) svg{width:18px !important;height:18px !important;color:#0B1220 !important;stroke:currentColor}

/* ── the footer: its logo smaller and all black; the wordmark again at the very foot, page-wide and quiet, cut by the
   edge (Julian, 13 Oct, after wonderful.ai) ── */
body.hc-b .foot--rich .fr__logo:not(#_):not(#_){width:clamp(140px,11vw,180px)}
body.hc-b .foot--rich .fr__mono path{fill:#0B1220 !important}
body.hc-b .foot--rich .fr__legal:not(#_):not(#_){padding-bottom:28px !important}
.fr__giant{max-width:1440px;margin:0 auto;padding:0 var(--gutter,24px);box-sizing:border-box;overflow:hidden;line-height:0;pointer-events:none}
.fr__giant svg{display:block;width:100%;height:auto;margin-bottom:-2.6%}
.fr__giant path{fill:#ECECE8}

/* ── related products (Julian, 13 Oct, after wonderful.ai's platform cards): tall picture cards, the product's name in the
   middle in white, its line and an Explore button at the foot; three to a row; more than three run as a row you scroll
   sideways. No hover effect. ── */
body.hc-b .sp-also .sp-also__list:not(#_):not(#_):not(#_){display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:clamp(12px,1.4vw,22px) !important;margin:0 !important;padding:0 !important;list-style:none}
body.hc-b .sp-also .sp-also__list:has(> li:nth-child(4)):not(#_):not(#_):not(#_){display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-right:calc(-1 * var(--gutter,24px)) !important;padding-right:var(--gutter,24px) !important;scroll-padding-left:0}
body.hc-b .sp-also .sp-also__list:has(> li:nth-child(4))::-webkit-scrollbar{display:none}
body.hc-b .sp-also .sp-also__list:has(> li:nth-child(4)) > li:not(#_){flex:0 0 calc((100% - 2 * clamp(12px,1.4vw,22px)) / 3.2);scroll-snap-align:start}
body.hc-b .sp-also .sp-also__list > li:not(#_){margin:0 !important;padding:0 !important;border:0 !important;min-width:0}
body.hc-b .sp-also__item:not(#_):not(#_):not(#_){position:relative;display:flex !important;flex-direction:column;align-items:center;justify-content:flex-end;aspect-ratio:7 / 10;height:auto !important;
  padding:clamp(22px,2.4vw,36px) clamp(18px,2vw,30px) !important;border:0 !important;border-radius:10px !important;overflow:hidden;isolation:isolate;
  background:#0B1220 !important;color:#FFFFFF !important;text-align:center;text-decoration:none !important;box-shadow:none !important;transform:none !important}
body.hc-b .sp-also__item:not(#_):not(#_):hover{background:#0B1220 !important;transform:none !important}
body.hc-b .sp-also__item > .sp-also__pic:not(#_):not(#_){position:absolute !important;inset:0 !important;z-index:-1;width:auto !important;height:auto !important;margin:0 !important;border-radius:0 !important;
  background:var(--sp-pic) center / cover no-repeat !important;transform:none !important;filter:none !important}
body.hc-b .sp-also__item > .sp-also__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,18,.18) 0%,rgba(6,10,18,.32) 45%,rgba(6,10,18,.62) 100%)}
body.hc-b .sp-also__item > span:not(.sp-also__pic):not(#_):not(#_):not(#_){display:contents !important}
body.hc-b .sp-also__item .sp-also__n:not(#_):not(#_){margin:auto 0 !important;font-size:clamp(24px,2.1vw,32px) !important;font-weight:400 !important;line-height:1.1 !important;letter-spacing:-.015em;color:#FFFFFF !important}
body.hc-b .sp-also__item .sp-also__w:not(#_):not(#_){display:block;max-width:22em;margin:0 0 18px !important;font-size:16px !important;line-height:1.3 !important;color:rgba(255,255,255,.9) !important}
body.hc-b .sp-also__item > svg:not(#_):not(#_){display:none !important}
body.hc-b .sp-also__item::after{content:"Explore";display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;background:#FFFFFF;color:#0B1220;
  font:500 13.5px/1 'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.01em;text-transform:uppercase}
@media (max-width:760px){
  body.hc-b .sp-also .sp-also__list:not(#_):not(#_):not(#_){display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--gutter,20px)) !important;padding-right:var(--gutter,20px) !important}
  body.hc-b .sp-also .sp-also__list > li:not(#_):not(#_){flex:0 0 78%;scroll-snap-align:start}
}
body.hc-b .sp-also__toggle,body.hc-b .sp-also__more{display:none !important}
/* the name at the card's true middle (its line and Explore keep the foot), in its own case; a little more shade so white
   reads on the lighter pictures */
body.hc-b .sp-also__item .sp-also__n:not(#_):not(#_):not(#_){position:absolute;left:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);top:50%;translate:0 -50%;margin:0 !important;text-transform:none !important;text-align:center}
body.hc-b .sp-also__item > .sp-also__pic::after{background:linear-gradient(180deg,rgba(6,10,18,.28) 0%,rgba(6,10,18,.4) 50%,rgba(6,10,18,.7) 100%) !important}
body.hc-b .sp-also__item:not(#_):not(#_):not(#_){justify-content:flex-end !important;align-items:center !important}
/* related cards, refined (Julian, 13 Oct): a deeper shade so the white reads on every picture; the line closer to its
   Explore; long names ("The Targeting Machine") break evenly over two lines; on phones room between the title and the row */
body.hc-b .sp-also__item > .sp-also__pic::after{background:linear-gradient(180deg,rgba(6,10,18,.42) 0%,rgba(6,10,18,.5) 50%,rgba(6,10,18,.78) 100%) !important}
body.hc-b .sp-also__item .sp-also__w:not(#_):not(#_):not(#_){margin:0 0 10px !important}
body.hc-b .sp-also__item .sp-also__n:not(#_):not(#_):not(#_){left:50%;right:auto;width:min(9em,calc(100% - 36px));translate:-50% -50%;text-wrap:balance}
@media (max-width:760px){ body.hc-b .sp-also .sp-also__list:not(#_):not(#_):not(#_){margin-top:28px !important} }
/* more of the footer's big wordmark shows (Julian, 13 Oct): cut less by the edge */
.fr__giant svg:not(#_){margin-bottom:-1.2%}
/* related cards, desktop (Julian, 13 Oct, with a two-card reference): room under the title; the cards less tall; when a
   page has only two, one wide and one narrower at a landscape height, so the row is filled; a darker shade */
body.hc-b .sp-also__item > .sp-also__pic::after{background:linear-gradient(180deg,rgba(6,10,18,.5) 0%,rgba(6,10,18,.58) 50%,rgba(6,10,18,.84) 100%) !important}
@media (min-width:761px){
  body.hc-b .sp-also .sp-also__list:not(#_):not(#_):not(#_){margin-top:clamp(32px,3vw,48px) !important}
  body.hc-b .sp-also__item:not(#_):not(#_):not(#_){aspect-ratio:4 / 5}
  body.hc-b .sp-also .sp-also__list:not(:has(> li:nth-child(3))):not(#_):not(#_):not(#_){grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) !important}
  body.hc-b .sp-also .sp-also__list:not(:has(> li:nth-child(3))) .sp-also__item:not(#_):not(#_):not(#_){aspect-ratio:auto;height:clamp(360px,32vw,460px) !important}
}
/* related cards on desktop (Julian, 13 Oct): the name and its line at the top left, Explore at the bottom right; the
   shade deepest at the top, where the words now sit. Phones keep the centred card */
@media (min-width:761px){
  body.hc-b .sp-also__item:not(#_):not(#_):not(#_){justify-content:flex-start !important;align-items:flex-start !important;text-align:left !important}
  body.hc-b .sp-also__item .sp-also__n:not(#_):not(#_):not(#_){position:static;left:auto;right:auto;top:auto;width:auto;max-width:14em;translate:none;margin:0 !important;text-align:left;text-wrap:balance}
  body.hc-b .sp-also__item .sp-also__w:not(#_):not(#_):not(#_){margin:12px 0 0 !important;max-width:24em;text-align:left}
  body.hc-b .sp-also__item:not(#_):not(#_):not(#_)::after{margin-top:auto;align-self:flex-end}
  body.hc-b .sp-also__item > .sp-also__pic::after{background:linear-gradient(180deg,rgba(6,10,18,.8) 0%,rgba(6,10,18,.55) 45%,rgba(6,10,18,.5) 100%) !important}
}
/* three or more related cards on desktop: square, not tall (Julian, 13 Oct: they looked too big) */
@media (min-width:761px){ body.hc-b .sp-also .sp-also__list:has(> li:nth-child(3)) .sp-also__item:not(#_):not(#_):not(#_){aspect-ratio:1 / 1} }
/* the related card's line sits just under its name: 8px (an old 20px gap was adding to it) */
body.hc-b .sp-also__item:not(#_):not(#_):not(#_){gap:0 !important;row-gap:0 !important}
@media (min-width:761px){ body.hc-b .sp-also__item .sp-also__w:not(#_):not(#_):not(#_){margin:8px 0 0 !important} }
@media (max-width:760px){ body.hc-b .sp-also__item .sp-also__w:not(#_):not(#_):not(#_){margin:0 0 14px !important} }

/* ── Footer overlap (Julian, 13 Oct) ──
   the solution names made the link columns wider than their half of the footer, so Stagwell Machines and Data slid
   left into the lines under Cookie settings, Privacy Notice and Terms of Use. The left block keeps a fixed width, the
   columns get the rest, and the footer stacks a little earlier, while the columns would still not fit beside it */
@media (min-width:1361px){
  body.hc-b .foot--rich .fr:not(#_){grid-template-columns:220px minmax(0,1fr);column-gap:clamp(40px,4vw,72px)}
  body.hc-b .foot--rich .fr__cols:not(#_):not(#_){grid-template-columns:repeat(4,minmax(0,max-content));column-gap:clamp(36px,4vw,96px)}
}
@media (min-width:1101px) and (max-width:1360px){
  body.hc-b .foot--rich .fr:not(#_){grid-template-columns:1fr}
  body.hc-b .foot--rich .fr__side{max-width:none}
  body.hc-b .foot--rich .fr__cols:not(#_):not(#_){justify-content:space-between}
}

/* (Julian's own fix for the expert form's number field is covered by the [data-lead-call] rule above, 13 Oct) */

/* ── the bar's call pill, open (Julian, 13 Oct): no drop shadow, and as tall as the bar's buttons (42px) ── */
body.hc-b .call--nav:is([data-state="phone"],[data-state="details"],[data-state="done"]):not(#_):not(#_){box-shadow:none !important}
body.hc-b .call--nav[data-state="phone"]:not(#_):not(#_){height:42px !important}
body.hc-b .call--nav[data-state="phone"]:not(#_) .call__form{height:42px;padding:0 4px 0 6px;gap:8px}
body.hc-b .call--nav[data-state="phone"]:not(#_) .call__go{width:34px;height:34px}
body.hc-b .call--nav[data-state="phone"]:not(#_) .call__go svg{width:17px;height:17px}
body.hc-b .call--nav[data-state="phone"]:not(#_) .call__x{width:30px;height:30px}
/* on a phone the Book a demo column is only ~290px, which left the number field 118px: tighter gaps and a smaller
   arrow give the whole number room there */
@media (max-width:640px){
  .lead__alt .call[data-state="phone"]:not(#_) .call__form{gap:6px;padding:0 4px 0 4px}
  .lead__alt .call[data-state="phone"]:not(#_) .call__go{width:42px;height:42px}
  .lead__alt .call[data-state="phone"]:not(#_) .call__x{width:30px}
}

/* ── links added in the CMS inside a paragraph (14 Oct): the paragraph's own colour, underlined, like the
   homepage's Extensible link ── */
body.hc-b a.cms-link:not(#_){color:#0B1220;-webkit-text-fill-color:#0B1220;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:opacity .2s ease}
body.hc-b a.cms-link:not(#_):hover{opacity:.7}
/* words set in full black in a grey paragraph (the CMS, 14 Oct) */
body.hc-b .cms-ink:not(#_):not(#_):not(#_){color:#0B1220 !important;-webkit-text-fill-color:#0B1220}
/* a CMS link is black even in a grey paragraph (Julian, 14 Oct); on the dark How we put agentic AI to work panels, white */
body.hc-b .hc-port a.cms-link:not(#_):not(#_){color:#FFFFFF;-webkit-text-fill-color:#FFFFFF}

/* ── Search+'s hero picture, drawn from the platform (client feedback, 19 Oct; prod-c.js PCVIS.searchplus) ──
   the engines' readiness, the Brand Knowledge Graph and paid/owned/earned on the hero's teal; a phone gets a taller
   frame, so the words stay readable */
.pc-split__vis.is-searchplus{background:#009CBD;padding:0}
@media (max-width:600px){ .pc-split__vis.is-searchplus:not(#_){aspect-ratio:6 / 5} }
.pc-split__vis.is-searchplus svg.sx-sp{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.sx-sp__card{fill:#FFFFFF}
.sx-sp__h{font-size:13px;font-weight:500;fill:#0B1220}
.sx-sp__sub{font-size:10px;fill:#6B7079}
.sx-sp__t{font-size:11.5px;fill:#0B1220}
.sx-sp__num{font-size:12px;font-weight:500;fill:#0B1220}
.sx-sp__lift{font-size:8.5px;fill:#0E5F8E}
.sx-sp__mark{fill:#0B1220;fill-rule:evenodd}
.sx-sp__rule{stroke:rgba(11,18,32,.08);stroke-width:1}
.sx-sp__spoke{stroke:rgba(255,255,255,.42);stroke-width:1}
.sx-sp__rim{stroke:rgba(255,255,255,.24);stroke-width:1}
.sx-sp__node{fill:#FFFFFF}
.sx-sp__halo{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1;stroke-dasharray:2 4;transform-box:fill-box;transform-origin:center}
.sx-sp__core{fill:#003349}
.sx-sp__core-t{font-size:9.5px;font-weight:500;fill:#FFFFFF}
.sx-sp__wire{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1}
.sx-sp__bead{fill:#FFFFFF}
.sx-sp__bead.is-out{fill:#FFB81C}
.sx-sp__track{fill:rgba(11,18,32,.08)}
.sx-sp__bar{fill:#0E5F8E;transition:fill .4s ease}
.is-lit > .sx-sp__bar{fill:#FF6D24}
.is-lit > .sx-sp__t{font-weight:500}
.sx-sp__big{font-size:22px;fill:#0B1220}
.sx-sp__gauge-bg{fill:none;stroke:rgba(11,18,32,.08);stroke-width:7;stroke-linecap:round}
.sx-sp__gauge{fill:none;stroke:#FFB81C;stroke-width:7;stroke-linecap:round}
.sx-sp__tip-bg{fill:#003349}
.sx-sp__tip-dot{fill:#FF6D24}
.sx-sp__tip-a{font-size:10px;font-weight:500;fill:#FFFFFF}
.sx-sp__tip-b{font-size:10px;fill:#77E3F6}
@media (prefers-reduced-motion:no-preference){
  .sx-sp__halo{animation:sxSpTurn 24s linear infinite}
  .sx-sp__tip.is-in{animation:sxSpTip .6s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes sxSpTurn{to{transform:rotate(360deg)}}
@keyframes sxSpTip{from{opacity:0}to{opacity:1}}
.sx-sp__core-t.is-small{font-size:8px}
.sx-sp__ies,.sx-sp__gauge-fill{fill:#FFB81C}
.sx-sp__num.is-big{font-size:15px}
.sx-sp__gauge-bg.is-thin,.sx-sp__gauge.is-thin{stroke-width:5}
.sx-sp__num.is-bigger{font-size:22px;font-weight:400}
.sx-sp__sub.is-small{font-size:8.5px}
.sx-sp__tip.is-off{display:none}

/* phones, the product pages' How it works (Julian, 20 Oct: "a very huge gap between 01 and 02", and from 03 to the end):
   48px between one step's card and the next number (was 72); under the last card 64px of the section's grey, as tall
   as the white over the next section's title (the panels' own 64px no longer adds to it) */
@media (max-width:860px){
  body.hc-b.pc-page .sp-story:not(#_):not(#_) .sp-tabs__panel{padding-bottom:48px !important}
  body.hc-b.pc-page .sp-story:not(#_):not(#_) .sp-tabs__panel:last-of-type{padding-bottom:0 !important}
  body.hc-b.pc-page .sp-tabs.sp-story:not(#_):not(#_) .sp-tabs__panels{padding-bottom:0 !important}
  body.hc-b.pc-page .pp-more.sp-story:not(#_):not(#_){padding-bottom:64px !important}   /* the grey under the last card as tall as the white over the next title (64px) */
}
/* phones: a step's pair of dashboards shows only the big one, held still (Julian, 20 Oct: the small one, taking turns
   in the same place, left an empty band under it); computers keep the pair */
@media (max-width:860px){
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo .sx-duo__top:not(#_):not(#_){display:none !important}
  body.hc-b.pc-page .sp-tabs__pic .sx-in .sx-duo .sx-duo__back:not(#_):not(#_){animation:none !important;opacity:1 !important}
}