/* ==========================================================================
   Adovvy V4 · the Channels and Integrations pages
   Built from the homepage's own parts: white, grey and deep grounds, colour
   cards holding white panels from the product, chat bubbles, pills, the
   dashed wires with their running lights, and the same FAQ and footer.
   The pages carry .page-home for the shared spacing, FAQ and footer, and
   .page-sub for everything below.
   ========================================================================== */

/* --- Page hero ---------------------------------------------------------- */
.page-sub .phero { padding-block: clamp(32px, 5vw, 72px) clamp(56px, 7vw, 104px); overflow: hidden; background: var(--white); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.phero__copy .kicker { margin-bottom: 20px; }
.phero__title { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; }
.phero__lede { margin: 22px 0 0; max-width: 33em; font: 500 clamp(17px, 1.4vw, 20px)/1.55 var(--font); color: var(--ink-2); }
.phero__lede b { color: var(--ink); font-weight: 700; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.phero__for { margin: 30px 0 10px; font: 600 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.phero__copy .mhero__chans { margin-top: 28px; max-width: 560px; }
.phero__copy .mhero__chans + .phero__lede { margin-top: 26px; }
.phero__copy .mhero__chans .icon { font-size: 17px; }
.phero__copy .mhero__chans svg.ilogo { width: 17px; height: 17px; color: var(--cc); }

/* The colour card every demo sits in (after How it works on the homepage). */
.pcard {
  --g0: #FFF8DF; --g1: #FFEAB0; --g2: #FFD36A;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  padding: 48px 28px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 28% 8%, var(--g0) 0%, transparent 58%),
    linear-gradient(160deg, var(--g1) 0%, var(--g2) 100%);
}
.pcard--yellow { --g0: #FFF8DF; --g1: #FFEAB0; --g2: #FFD36A; }
.pcard--peach { --g0: #FFE9DE; --g1: #FFC9AE; --g2: #FF9A6B; }
.pcard--sky { --g0: #EAF6FF; --g1: #BFE3FF; --g2: #7CC3F5; }
.pcard--mint { --g0: #E6FBF3; --g1: #ADEBD5; --g2: #48C99B; }
.pcard--lilac { --g0: #F3EFFF; --g1: #DCD2FF; --g2: #A98FFF; }
.pcard--pink { --g0: #FFE9F2; --g1: #FFC2DA; --g2: #F584B0; }
/* A live character that works the card's demo. */
.pcard__bot { position: absolute; right: 22px; bottom: 14px; z-index: 3; width: 104px; aspect-ratio: 1; pointer-events: none; }
.pcard__bot--left { right: auto; left: 22px; }

/* The white panel inside a colour card. */
.ppanel {
  position: relative;
  z-index: 2;
  width: min(400px, 100%);
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 30px 60px -28px rgba(21, 20, 43, .45);
}
.ppanel__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ppanel__head b { display: block; font: 700 14px/1.2 var(--font); color: var(--ink); }
.ppanel__head small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppanel__head > div { min-width: 0; }
.ppanel__head .ppanel__end { margin-left: auto; }
.pav { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cc, var(--accent)); color: #fff; font: 700 13px/1 var(--font); }
.pav img, .pav svg.ilogo { width: 20px; height: 20px; }
.pav--logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.pav--mark { background: var(--accent); color: #fff; }
.pav--mark svg { width: 17px; height: 11px; }

/* Chat bodies stack from the bottom, so new messages push old ones up. */
.pchat { display: grid; gap: 8px; align-content: end; height: 300px; padding: 8px 6px 4px; overflow: hidden; }
.pchat--tall { height: 340px; }
.pchat .zb { max-width: 86%; }
.zb small.zb__tag { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font: 600 11px/1 var(--font); color: var(--muted); }
.zb small.zb__tag img { width: 12px; height: 12px; }
.zb--typing { justify-self: end; display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--accent-tint); border-bottom-right-radius: 6px; }
.zb--typing.is-in { justify-self: start; background: var(--paper); border-bottom-right-radius: 16px; border-bottom-left-radius: 6px; }
.zb--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .5; animation: pDot 1s ease-in-out infinite; }
.zb--typing.is-in i { background: var(--muted); }
.zb--typing i:nth-child(2) { animation-delay: .15s; }
.zb--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
[data-play] .is-pending { display: none !important; }

/* A product inside a chat. */
.pprod { justify-self: end; width: min(260px, 86%); display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.pprod__img { width: 52px; height: 52px; border-radius: 12px; background: var(--pi, linear-gradient(150deg, #C9D3FF, #8E9BFF)); }
.pprod b { display: block; font: 700 13.5px/1.25 var(--font); color: var(--ink); }
.pprod small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font); color: var(--muted); }
.pprod__btn { grid-column: 1 / -1; display: grid; place-items: center; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; font: 700 12.5px/1 var(--font); transition: background-color .3s; }
.pprod.is-on .pprod__btn { background: #22C08F; }

/* --- The Channels hero: one inbox, seven channels ------------------------- */
.pinbox { min-height: 0; padding: 44px 26px 64px; }
.uinbox { width: min(480px, 100%); grid-template-columns: 58px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.uinbox__rail { list-style: none; margin: 0; padding: 12px 9px; display: grid; gap: 7px; align-content: start; background: var(--paper); border-right: 1px solid var(--line); }
.uinbox__rail li { --cc: var(--accent); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); font-size: 19px; transition: background-color .3s, color .3s, box-shadow .3s, transform .35s var(--ease-soft); }
.uinbox__rail li img, .uinbox__rail li svg.ilogo { width: 20px; height: 20px; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.uinbox__rail li svg.ilogo { color: #1877F2; }
.uinbox__rail li.is-on { background: #fff; color: var(--cc); box-shadow: 0 0 0 2px var(--cc), 0 8px 18px -10px var(--cc); transform: scale(1.06); }
.uinbox__rail li.is-on img, .uinbox__rail li.is-on svg.ilogo { filter: none; opacity: 1; }
.uinbox__main { min-width: 0; padding: 10px 10px 8px; }
.uinbox__ic { color: var(--cc, var(--accent)); font-size: 18px; }
.uinbox__ic img, .uinbox__ic svg.ilogo { filter: none; opacity: 1; width: 20px; height: 20px; color: #1877F2; }
.uinbox__st { transition: background-color .3s, color .3s; }
.uinbox__st .icon { display: none; }
.uinbox__st.is-on { background: var(--green-tint); color: var(--green-ink); }
.uinbox__st.is-on .icon { display: inline; }
.uinbox .pchat { height: 214px; }
.pinbox .pcard__bot { right: 18px; bottom: 6px; width: 96px; }

/* Two products side by side in a small widget. */
.pprods { justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pprod--mini { width: auto; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px; justify-self: stretch; }
.pprod--mini .pprod__img { width: 100%; height: 54px; border-radius: 10px; }
.pprod--mini .pprod__btn { grid-column: auto; height: 28px; font-size: 12px; }

/* The robots band keeps the page's full headline size. */
.page-sub #robots .h2 { max-width: 18em; font-size: var(--fs-h2); }

/* --- Shared section heads ------------------------------------------------ */
.psec__head { max-width: 860px; }
.psec__head .lede { margin-top: 18px; }
.psec__head.center .kicker { justify-content: center; }

/* --- A channel: a colour card and the words beside it --------------------- */
.chs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5.5vw, 88px); align-items: center; max-width: 1180px; margin-inline: auto; }
.chs--flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.chs--flip .pcard, .chs--flip .chs__media { order: 2; }
.chs__text .kicker { margin-bottom: 18px; }
.chs__text .h2 { font-size: clamp(32px, 3.5vw, 50px); text-wrap: balance; }
.chs__text .lede { margin-top: 20px; max-width: 32em; }
.chs__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.chs__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font: 500 var(--fs-p)/1.5 var(--font); color: var(--ink-2); }
.chs__list li::before { content: ''; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23167947' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='m3.6 8.4 2.9 2.9 5.9-6.3'/%3E%3C/svg%3E") center / 14px no-repeat; }
.chs__sub { margin: 30px 0 0; font: 700 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.chs__sub + .chs__list { margin-top: 16px; }
.chs__pills { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chs__pills li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14px/1 var(--font); color: var(--ink); }
.chs__pills li .icon { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-size: 16px; }
.section--sand .chs__pills li { box-shadow: 0 1px 2px rgba(23, 23, 43, .06); }
.chs + .chs { margin-top: clamp(80px, 10vw, 140px); }

/* --- AI voice: the call, its waveform and the words as they are said ---- */
.vcall__wave { display: flex; align-items: center; gap: 3px; height: 44px; margin: 6px 12px 4px; }
.vcall__wave i { flex: 1; height: 100%; border-radius: 2px; background: #9B7BFF; transform: scaleY(var(--h, .2)); transform-origin: center; opacity: .55; }
/* At rest the line keeps the shape of a voice. */
.vcall__wave i:nth-child(4n+1) { --h: .3; }
.vcall__wave i:nth-child(4n+2) { --h: .5; }
.vcall__wave i:nth-child(4n+3) { --h: .22; }
.vcall__wave i:nth-child(5n) { --h: .62; }
.vcall__wave i:nth-child(7n) { --h: .14; }
.vcall.is-talking .vcall__wave i { opacity: 1; animation: mWave .7s ease-in-out infinite alternate; }
.vcall__wave i:nth-child(3n) { animation-delay: -.2s; }
.vcall__wave i:nth-child(3n+1) { animation-delay: -.45s; }
.vcall__wave i:nth-child(4n) { animation-duration: .55s; }
.vcall__dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22C08F; vertical-align: 1px; }
.vlines { display: grid; gap: 8px; align-content: end; height: 214px; padding: 4px 6px; overflow: hidden; }
.vline { margin: 0; padding: 10px 13px; border-radius: 16px; background: var(--paper); font: 500 14px/1.45 var(--font); color: var(--ink); }
.vline b { display: block; margin-bottom: 2px; font: 700 11.5px/1.2 var(--font); letter-spacing: .02em; color: var(--muted); }
.vline--ai { background: #F1ECFF; }
.vline--ai b { color: #6645D8; }
.vcall .zb--done { margin: 8px auto 4px; }

/* --- Instagram and Messenger DMs ------------------------------------------ */
.dm .zb--out { background: linear-gradient(135deg, #6A5CFF, #A55BFF); }
.dm .zb--out.is-fb { background: #0A7CFF; }
.dm__apps { display: flex; gap: 4px; margin-left: auto; }
.dm__apps img { width: 22px; height: 22px; }

/* --- WhatsApp ------------------------------------------------------------- */
.wa { padding: 0; overflow: hidden; gap: 0; }
.wa__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #0F6E5C; color: #fff; }
.wa__head b { display: block; font: 700 14px/1.2 var(--font); }
.wa__head small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font); color: rgba(255, 255, 255, .8); }
.wa__head .pav { background: #fff; color: #0F6E5C; }
.wa__head img { width: 24px; height: 24px; margin-left: auto; }
.wa .pchat { padding: 12px 12px 10px; background: #EFF7F2; }
.wa .zb--in { background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.wa .zb--out { background: #D8F8C9; color: var(--ink); }
.wa .zb--typing { background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.wa .zb--typing i { background: #8FA39A; }
.zb__meta { display: block; margin-top: 4px; text-align: right; font: 500 10.5px/1 var(--font); color: rgba(23, 23, 43, .5); }
.zb__meta svg { width: 14px; height: 9px; margin-left: 3px; vertical-align: -1px; color: #3BA4F0; }
.wa__order { justify-self: end; width: min(250px, 86%); padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.wa__order b { display: block; font: 700 13.5px/1.3 var(--font); color: var(--ink); }
.wa__order small { display: block; margin-top: 3px; font: 500 12px/1.35 var(--font); color: var(--muted); }
.wa__order i { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 9px; border-radius: var(--r-pill); background: var(--green-tint); font: 700 11.5px/1 var(--font); font-style: normal; color: var(--green-ink); }

/* --- Web chat: a store page in a browser, with the widget open ----------- */
.wbrw { position: relative; z-index: 2; width: min(500px, 100%); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -28px rgba(21, 20, 43, .45); }
.wbrw__bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: #F1F2F6; border-bottom: 1px solid var(--line); }
.wbrw__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #D7D9E2; }
.wbrw__url { flex: 1; margin: 0 8px; height: 24px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; background: #fff; font: 500 11.5px/1 var(--font); color: var(--muted); }
.wbrw__cart { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink-2); font-size: 17px; }
.wbrw__cart b { position: absolute; right: -4px; top: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; background: #22C08F; color: #fff; font: 700 10px/1 var(--font); transform: scale(0); transition: transform .45s var(--ease-soft); }
.wbrw__cart.is-on b { transform: scale(1); }
.wbrw__page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 16px 120px; }
.wbrw__page span { aspect-ratio: 1 / 1.15; border-radius: 12px; background: linear-gradient(160deg, #F2F3F7, #E7E9F0); }
.wbrw__page span:nth-child(2) { background: linear-gradient(160deg, #EEF0FB, #DDE1F8); }
.wbrw__page span:nth-child(4) { background: linear-gradient(160deg, #EAF7F1, #D5F0E4); }
.wwid { position: absolute; right: 12px; bottom: 12px; width: min(300px, calc(100% - 24px)); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px -18px rgba(21, 20, 43, .45), 0 0 0 1px rgba(21, 20, 43, .06); }
.wwid__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--accent); color: #fff; }
.wwid__head b { display: block; font: 700 13.5px/1.2 var(--font); }
.wwid__head small { display: block; margin-top: 2px; font: 500 11.5px/1.2 var(--font); color: rgba(255, 255, 255, .78); }
.wwid__head .pav { width: 30px; height: 30px; background: #fff; color: var(--accent); }
.wwid .pchat { height: 286px; padding: 10px; }
.wwid .zb { font-size: 13.5px; }

/* --- Pictures that are the demo themselves (the kiosk) --------------------- */
.chs__media { position: relative; margin: 0; border-radius: 32px; overflow: hidden; background: #EEF0FB; box-shadow: 0 40px 80px -44px rgba(21, 20, 43, .45); }
.chs__media img { display: block; width: 100%; height: auto; }

/* --- Where it's needed: one customer, four agents, one memory -------------- */
.relay { margin-top: clamp(44px, 6vw, 72px); }
.relay__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.relay__track::before { content: ''; position: absolute; left: 6%; right: 6%; top: 39px; height: 2px; background: repeating-linear-gradient(90deg, #A9B1EC 0 6px, transparent 6px 12px); }
.relay__step { --cc: var(--accent); position: relative; display: grid; align-content: start; gap: 12px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
.relay__step.is-on { box-shadow: 0 0 0 2px var(--cc), 0 30px 60px -30px color-mix(in srgb, var(--cc) 70%, transparent); transform: translateY(-4px); }
.relay__top { display: flex; align-items: center; gap: 12px; }
.relay__m { width: 46px; height: 46px; flex: none; }
.relay__top b { display: block; font: 700 15px/1.2 var(--font); color: var(--ink); }
.relay__top small { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 12px/1 var(--font); color: var(--muted); }
.relay__top small img, .relay__top small .icon { width: 14px; height: 14px; font-size: 14px; color: var(--cc); }
.relay__q { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--paper); font: 500 14px/1.45 var(--font); color: var(--ink); }
.relay__done { justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--cc) 12%, #fff); font: 700 12.5px/1 var(--font); color: var(--ink); opacity: .45; transition: opacity .4s; }
.relay__done i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #fff; font-size: 12px; }
.relay__step.is-done .relay__done { opacity: 1; }
.relay__mem { margin: 22px auto 0; max-width: 980px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); min-height: 64px; }
.relay__memk { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; font: 700 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.relay__memk .pav { width: 28px; height: 28px; }
.relay__mem span:not(.relay__memk):not(.pav) { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent-tint); font: 600 13px/1 var(--font); color: var(--ink); }

/* --- Humanoid robotics, on the deep band ----------------------------------- */
.pbots__film { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 1080px; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--deep-2); }
.pbots__film img { width: 100%; height: 100%; object-fit: cover; }
.pbots__display { margin: clamp(48px, 6vw, 80px) 0 0; text-align: center; font: 700 clamp(44px, 7vw, 104px)/1 var(--font); letter-spacing: -.05em; color: #fff; }
.pbots__display em { font-style: normal; color: var(--accent-lift); }
.pcta { display: grid; justify-items: center; gap: 0; text-align: center; }
.pcta .h3, .pcta__title { margin: 0; font: 600 clamp(26px, 2.6vw, 38px)/1.15 var(--font); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.pcta p { margin: 14px 0 0; max-width: 40em; font: 400 var(--fs-lede)/1.6 var(--font); color: var(--body); }
.pcta .btn { margin-top: 28px; }
.section--deep .pcta__title { color: #fff; }
.section--deep .pcta p { color: var(--on-deep-2); }
.pbots .pcta { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line-deep); }

/* The closing ask before the footer: a soft indigo card. */
.pfinal__card { display: grid; justify-items: center; padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px); border-radius: 36px; text-align: center; background: radial-gradient(90% 120% at 50% 0%, #F4F5FF 0%, transparent 60%), linear-gradient(165deg, #EEF0FF 0%, #E2E5FF 100%); }
.pfinal__card .h2 { max-width: 15em; text-wrap: balance; }
.pfinal__card .btn { margin-top: 30px; }
.pfinal__card .lede { margin-top: 18px; }
.api .zb--done { justify-self: start; margin: 0; }

/* --- Integrations hero: your stack, wired into one Adovvy card ------------ */
.ihub { position: relative; aspect-ratio: 1 / .92; max-width: 600px; justify-self: center; width: 100%; }
.ihub__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ihub__wire { fill: none; stroke: #A9B1EC; stroke-width: 1.6; stroke-dasharray: 5 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ihub__core { position: absolute; left: 50%; top: 50%; width: 40%; transform: translate(-50%, -50%); z-index: 2; display: grid; justify-items: center; gap: 10px; padding: 26px 14px 22px; border-radius: 26px; text-align: center; color: #fff; background: radial-gradient(120% 100% at 24% 6%, #3B3484 0%, #2A2464 44%, #1B1742 100%); box-shadow: 0 36px 70px -34px rgba(42, 36, 100, .8); }
.ihub__core svg { width: 54px; height: auto; color: #fff; }
.ihub__core b { font: 700 clamp(15px, 1.3vw, 18px)/1.2 var(--font); letter-spacing: -.01em; }
.ihub__core small { font: 500 12px/1.35 var(--font); color: rgba(255, 255, 255, .74); }
.ihub__tile { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border-radius: 22px; background: #fff; box-shadow: 0 1px 1px rgba(21, 20, 43, .04), 0 18px 36px -18px rgba(21, 20, 43, .35); animation: pFloat 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ihub__tile svg { width: 34px; height: 34px; color: var(--bc, var(--ink)); }
.ihub__tile img { width: 34px; height: 34px; }
.ihub__tile span { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 12px/1 var(--font); color: var(--muted); }
@keyframes pFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ihub__more { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 700 13px/1 var(--font); white-space: nowrap; box-shadow: 0 14px 28px -14px rgba(21, 20, 43, .6); }

/* --- How it works with your systems: the chat and the steps behind it ----- */
.iflow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 1100px; margin: clamp(44px, 6vw, 72px) auto 0; }
.iflow .pcard { min-height: 520px; }
.isteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: istep; }
.istep { --cc: var(--accent); position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out), opacity .5s; opacity: .55; }
.istep.is-on { opacity: 1; transform: translateX(6px); box-shadow: 0 0 0 2px var(--cc), 0 26px 50px -30px color-mix(in srgb, var(--cc) 75%, transparent); }
.istep.is-done { opacity: 1; }
.istep__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 13%, #fff); color: var(--cc); font-size: 23px; }
.istep__ic svg.ilogo { width: 24px; height: 24px; }
.istep b { display: block; font: 700 16px/1.25 var(--font); color: var(--ink); }
.istep small { display: block; margin-top: 3px; font: 500 13.5px/1.4 var(--font); color: var(--muted); }
.istep__tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: transparent; font-size: 13px; transition: background-color .3s, color .3s; }
.istep.is-done .istep__tick { background: #22C08F; color: #fff; }
.pdisplay { margin: clamp(56px, 7vw, 96px) auto 0; text-align: center; font: 700 clamp(30px, 4.4vw, 64px)/1.08 var(--font); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; max-width: 18em; }
.pdisplay em { font-style: normal; color: var(--accent); }

/* --- Three ways to connect ------------------------------------------------- */
.ways { list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.way { display: grid; align-content: start; padding: 28px 28px 30px; border-radius: 30px; background: radial-gradient(120% 90% at 28% 8%, var(--g0) 0%, transparent 58%), linear-gradient(160deg, var(--g1) 0%, var(--g2) 100%); }
.way__n { font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(23, 23, 43, .55); }
.way__ic { width: 56px; height: 56px; margin-top: 18px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: var(--accent); font-size: 27px; box-shadow: 0 14px 28px -16px rgba(21, 20, 43, .35); }
.way h3 { margin: 22px 0 0; font: 700 clamp(21px, 1.8vw, 26px)/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.way p { margin: 10px 0 0; font: 400 var(--fs-p)/1.55 var(--font); color: var(--ink-2); }
.way__demo { margin-top: 24px; min-height: 92px; display: grid; align-content: end; }
.way__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.way__chips span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 7px; border-radius: var(--r-pill); background: #fff; font: 600 13px/1 var(--font); color: var(--ink); box-shadow: 0 1px 2px rgba(23, 23, 43, .06); }
.way__chips span img, .way__chips span svg { width: 20px; height: 20px; }
.way__chips span .icon { font-size: 18px; color: var(--accent); }
.way__code { margin: 0; padding: 14px 16px; border-radius: 16px; background: #1B1A33; color: #CFD4FF; font: 500 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: hidden; }
.way__code b { color: #8EF0C4; font-weight: 500; }
.way__code i { color: #FFB58A; font-style: normal; }
.way__mcp { position: relative; height: 92px; }
.way__mcp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* --- Shopify and the custom API ------------------------------------------- */
.shop .ppanel__head .pav { background: #95BF47; }
.shop__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 2px; }
.shop__track span { position: relative; padding-top: 14px; font: 600 11px/1.25 var(--font); color: var(--muted); text-align: center; }
.shop__track span::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: #E6E8EE; }
.shop__track span.is-on { color: var(--ink); }
.shop__track span.is-on::before { background: #22C08F; }
.shop__card { justify-self: end; width: min(270px, 88%); padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.shop__card b { display: block; font: 700 13.5px/1.3 var(--font); color: var(--ink); }
.shop__card small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font); color: var(--muted); }

.api { position: relative; z-index: 2; width: min(460px, 100%); display: grid; gap: 14px; }
.api__code { margin: 0; padding: 18px 20px; border-radius: 20px; background: #1B1A33; color: #CFD4FF; font: 500 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(21, 20, 43, .55); }
.api__code b { color: #8EF0C4; font-weight: 500; }
.api__code i { color: #FFB58A; font-style: normal; }
.api__code u { color: #9AA5FF; text-decoration: none; }
.api__sys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.api__sys span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .96); font: 700 14px/1.2 var(--font); color: var(--ink); box-shadow: 0 16px 34px -22px rgba(21, 20, 43, .45); transition: box-shadow .4s, transform .4s var(--ease-out); }
.api__sys span .icon { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); font-size: 20px; flex: none; }
.api__sys span.is-on { transform: translateY(-3px); box-shadow: 0 0 0 2px #4857C2, 0 20px 40px -22px rgba(72, 87, 194, .8); }

/* --- 40+ integrations over MCP: a directory by category ------------------- */
.mcp__tabs { margin: clamp(36px, 5vw, 56px) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1040px; }
.mcp__tab { height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14px/1 var(--font); color: var(--ink-2); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.mcp__tab:hover { box-shadow: inset 0 0 0 1px var(--accent-soft); color: var(--ink); }
.mcp__tab[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.mcp__tab span { margin-left: 6px; font-weight: 700; color: var(--muted); }
.mcp__tab[aria-pressed="true"] span { color: rgba(255, 255, 255, .6); }
/* One stage for both views, edge to edge. While it changes between them it
   clips, and its height eases from one view to the other. */
.mcp__stage { position: relative; margin: 28px calc(50% - 50vw) 0; }
.mcp__stage.is-changing { overflow: hidden; }
.mcp__grid { list-style: none; margin: 0 auto; padding: 6px var(--gutter) 4px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: calc(1260px + 2 * var(--gutter)); }
.mcp__grid[hidden], .mcp__belt[hidden] { display: none; }
.mcp__grid .mcp__item { width: min(300px, 100%); animation: mcpIn .45s var(--ease-out) both; }
.mcp__grid .mcp__item:nth-child(2n) { animation-delay: .04s; }
.mcp__grid .mcp__item:nth-child(3n) { animation-delay: .08s; }
@keyframes mcpIn { from { opacity: 0; transform: translateY(14px); } }
/* All: two rows of cards moving in opposite directions, edge to edge, with
   soft fades at the sides. Each row holds its cards twice, so moving it by
   half its length loops without a seam. */
.mcp__belt { display: grid; gap: 14px; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.mcp__row { overflow: hidden; padding-block: 4px; }
.mcp__track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; }
.mcp__track .mcp__item { flex: none; width: 300px; margin-right: 14px; }
.mcp__track .mcp__item:hover { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .is-live-section .mcp__row--l .mcp__track { animation: mcpL 120s linear infinite; }
  .is-live-section .mcp__row--r .mcp__track { animation: mcpR 130s linear infinite; }
  .mcp__row:hover .mcp__track { animation-play-state: paused; }
}
@keyframes mcpL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mcpR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.page-sub #mcp { overflow: hidden; }
.mcp__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); transition: box-shadow .3s, transform .3s var(--ease-out); }
.mcp__item:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--accent-soft), 0 22px 44px -26px rgba(21, 20, 43, .35); }
.mcp__item[hidden] { display: none; }
.mcp__logo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--paper); color: var(--ink); transition: background-color .3s, color .3s; }
.mcp__logo svg { width: 24px; height: 24px; }
.mcp__logo i { font: 800 19px/1 var(--font); font-style: normal; letter-spacing: -.02em; }
.mcp__item:hover .mcp__logo { background: color-mix(in srgb, var(--bc, #4857C2) 12%, #fff); color: var(--bc, var(--accent)); }
.mcp__item b { display: block; font: 700 15.5px/1.25 var(--font); color: var(--ink); }
.mcp__item small { display: block; margin-top: 3px; font: 600 11px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mcp__item p { grid-column: 1 / -1; margin: 0; font: 400 14px/1.5 var(--font); color: var(--body); }

/* --- A customer story card -------------------------------------------------- */
.pcase { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 36px; background: radial-gradient(90% 120% at 0% 0%, #FFF5EE 0%, transparent 55%), linear-gradient(160deg, #FFFFFF 0%, #F3F4FA 100%); box-shadow: 0 1px 2px rgba(23, 23, 43, .05), 0 40px 80px -60px rgba(21, 20, 43, .4); }
.pcase__logo { display: block; height: 44px; width: auto; }
.pcase__k { margin: 22px 0 0; font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pcase__text { margin: 14px 0 0; font: 500 clamp(17px, 1.45vw, 20px)/1.6 var(--font); color: var(--ink-2); }
.pcase__out { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pcase__out li { display: grid; gap: 4px; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); font: 700 16px/1.3 var(--font); color: var(--ink); }
.pcase__out .icon { margin-bottom: 12px; width: 42px; height: 42px; padding: 9px; border-radius: 13px; background: var(--ct, var(--accent-tint)); color: var(--cc, var(--accent)); font-size: 24px; }

.pcase__out b { display: block; font: 700 clamp(26px, 2.3vw, 34px)/1 var(--font); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pcase__out span { display: block; font: 600 14px/1.35 var(--font); color: var(--muted); }
.pcase__cta { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(26px, 3.2vw, 40px) clamp(24px, 4vw, 56px); border-radius: 32px; background: radial-gradient(90% 140% at 0% 0%, #F4F5FF 0%, transparent 60%), linear-gradient(165deg, #EEF0FF 0%, #E2E5FF 100%); }
.pcase__ctaTitle { margin: 0; font: 600 clamp(24px, 2.4vw, 34px)/1.15 var(--font); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.pcase__ctaTitle em { font-style: normal; color: var(--accent); }
.pcase__cta p { margin: 10px 0 0; max-width: 36em; font: 400 var(--fs-lede)/1.6 var(--font); color: var(--body); }
.pcase__cta .btn { flex: none; }

/* --- Kiosk display: the kiosk itself, its screen working ------------------- */
.kiosk { position: relative; z-index: 2; display: grid; justify-items: center; }
.kiosk__body { width: min(330px, 100%); padding: 14px 14px 22px; border-radius: 36px; background: linear-gradient(165deg, #FFFFFF 0%, #EEF0F7 100%); box-shadow: 0 34px 60px -30px rgba(21, 20, 43, .5), inset 0 -3px 0 rgba(155, 123, 255, .55); }
.kiosk__screen { padding: 7px; border-radius: 26px; background: #15142B; }
.kiosk__ui { display: grid; gap: 10px; padding: 12px 10px 8px; border-radius: 20px; background: linear-gradient(180deg, #F2F3FF 0%, #FFFFFF 46%); }
.kiosk__top { display: flex; align-items: center; gap: 8px; }
.kiosk__top .pav { width: 26px; height: 26px; }
.kiosk__top .pav svg { width: 14px; height: 9px; }
.kiosk__top b { font: 700 13px/1 var(--font); color: var(--ink); }
.kiosk__lang { margin-left: auto; padding: 4px 8px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 700 10.5px/1 var(--font); color: var(--ink-2); }
.kiosk__hi { margin: 2px 0 0; font: 700 20px/1.15 var(--font); letter-spacing: -.02em; color: var(--ink); }
.kiosk__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kiosk__opts span { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .08); font: 600 11.5px/1.2 var(--font); color: var(--ink); }
.kiosk__opts .icon { flex: none; font-size: 15px; color: var(--accent); }
.kiosk__chat { height: 214px; padding: 4px 0 2px; }
.kiosk__chat .zb { font-size: 13px; }
.zb small.zb__tag .icon { font-size: 12px; }
.kiosk__neck { width: 70px; height: 26px; margin-top: -2px; background: linear-gradient(90deg, #26253F, #3A3958 50%, #26253F); }
.kiosk__base { width: 168px; height: 16px; border-radius: 10px 10px 8px 8px; background: #1F1E36; box-shadow: 0 14px 22px -10px rgba(21, 20, 43, .6); }
.kmap { justify-self: stretch; padding: 8px 10px 9px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.kmap svg { display: block; width: 100%; height: auto; }
.kmap__aisle { fill: #EEF0F7; }
.kmap__aisle--on { fill: #FFE1D2; stroke: #FF7A45; stroke-width: 1.6; }
.kmap text { font: 700 13px/1 var(--font); fill: #9A9CAE; text-anchor: middle; dominant-baseline: middle; }
.kmap text.kmap__on { fill: #D24E1A; }
.kmap__path { fill: none; stroke: #4857C2; stroke-width: 2.4; stroke-dasharray: 5 5; stroke-linecap: round; }
.is-live-section .kmap__path { animation: kPath 1.2s linear infinite; }
@keyframes kPath { to { stroke-dashoffset: -20; } }
.kmap__you { fill: #4857C2; stroke: #fff; stroke-width: 3; }
.kmap small { display: block; margin-top: 4px; font: 600 11px/1.2 var(--font); color: var(--muted); }

/* --- The contact form on an inner page ------------------------------------ */
.page-sub .s10 .h2 { max-width: 13ch; }
/* The form's dark band sits on the dark footer: a quiet line between them. */
.page-sub .footer { border-top: 1px solid var(--line-deep); }

/* "Book a demo" has no page yet, so its buttons go nowhere for now. */
a.btn:not([href]) { cursor: default; }

/* --- Small Businesses and Trust: the agent getting ready, and the checks
       behind one protected answer ------------------------------------------ */
.ptrain { list-style: none; margin: 4px 0 2px; padding: 0 4px; display: grid; gap: 6px; }
.ptrain li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: 14px; background: var(--paper); }
.ptrain li > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #22C08F; color: #fff; font-size: 14px; font-style: normal; }
.ptrain li > i svg { width: 15px; height: 15px; }
.ptrain b { display: block; font: 700 14px/1.3 var(--font); color: var(--ink); }
.ptrain small { display: block; margin-top: 2px; font: 500 12.5px/1.4 var(--font); color: var(--muted); }
.ptrain__st { transition: background-color .3s, color .3s; }
.ptrain__st .icon { display: none; }
.ptrain__st span::before { content: 'Setting up'; }
.ptrain__st span { font-size: 0; }
.ptrain__st span::before { font-size: 11.5px; }
.ptrain__st.is-on { background: var(--green-tint); color: var(--green-ink); }
.ptrain__st.is-on .icon { display: inline; }
.ptrain__st.is-on span::before { content: 'Ready'; }
.ptrain__live { display: flex; align-items: center; gap: 10px; margin: 6px 4px 4px; padding: 10px 12px; border-radius: 14px; background: var(--ink); color: #fff; font: 700 13px/1 var(--font); }
.ptrain__live img, .ptrain__live .icon { width: 20px; height: 20px; font-size: 19px; }
.ptrain__live .icon { color: #8E9BFF; }
.ptrain__live span { margin-right: auto; }
.ponboard, .ptrustc { min-height: 0; padding: 48px 26px 64px; }
.ponboard .ppanel, .ptrustc .ppanel { width: min(440px, 100%); }
.ptrustc .ptrain__st span::before { content: 'Checking'; }
.ptrustc .ptrain__st.is-on span::before { content: 'Protected'; }
.ptrust__q { margin: 4px 4px 2px; }
.ptrustc .ptrain li > i { background: #4857C2; }
.ptrustc .ptrain li > i svg { width: 16px; height: 16px; }
.ptrust__done { margin: 8px auto 2px; }

/* --- Badges: three facts at a glance ------------------------------------ */
.page-sub #compliance.section--pad { padding-block: clamp(56px, 6vw, 80px); }
.pbadges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pbadges li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 26px; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); }
.pbadges__ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--ct); color: var(--cc); font-size: 28px; }
.pbadges__ic svg:not(.icon) { width: 28px; height: 28px; }
.pbadges h3 { margin: 4px 0 0; font: 700 clamp(19px, 1.55vw, 22px)/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.pbadges p { margin: 8px 0 0; font: 400 15px/1.55 var(--font); color: var(--body); }

/* --- Feature cards (day-one benefits, accuracy) --------------------------- */
.pfeat { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pfeat li { display: grid; align-content: start; padding: 28px; border-radius: 28px; background: var(--sand); }
.section--sand .pfeat li { background: #fff; }
.pfeat__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--ct); color: var(--cc); font-size: 26px; }
.pfeat h3 { margin: 20px 0 0; font: 700 clamp(19px, 1.55vw, 22px)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); }
.pfeat p { margin: 8px 0 0; font: 400 var(--fs-p)/1.55 var(--font); color: var(--body); }

/* --- A slim ask between sections (and under the story card) ------------- */
.pstrip { margin-top: clamp(32px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(26px, 3.2vw, 40px) clamp(24px, 4vw, 56px); border-radius: 32px; background: radial-gradient(90% 140% at 0% 0%, #F4F5FF 0%, transparent 60%), linear-gradient(165deg, #EEF0FF 0%, #E2E5FF 100%); }
.pstrip__title { margin: 0; font: 600 clamp(24px, 2.4vw, 34px)/1.15 var(--font); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.pstrip__title em { font-style: normal; color: var(--accent); }
.pstrip p { margin: 10px 0 0; max-width: 36em; font: 400 var(--fs-lede)/1.6 var(--font); color: var(--body); }
.pstrip .btn { flex: none; }

/* --- Little demos inside the colour cards -------------------------------- */
.way__prod { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .06); }
.way__prod .pprod__img { width: 44px; height: 44px; flex: none; }
.way__prod .pav { flex: none; }
.way__prod b { display: block; font: 700 13.5px/1.3 var(--font); color: var(--ink); }
.way__prod small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font); color: var(--muted); }
.way__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.way__rules li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fff; font: 500 13px/1.35 var(--font); color: var(--ink-2); box-shadow: 0 1px 2px rgba(23, 23, 43, .06); }
.way__rules b { flex: none; min-width: 78px; font: 700 11px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #C23A70; }
.way__ic svg:not(.icon) { width: 26px; height: 26px; }
.way__chips span svg:not(.icon) { width: 18px; height: 18px; }

/* --- Channels, as tiles ------------------------------------------------- */
.pchan { list-style: none; margin: clamp(40px, 5vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.pchan li { display: grid; justify-items: center; gap: 14px; padding: 26px 12px 22px; border-radius: 26px; background: var(--sand); text-align: center; transition: transform .3s var(--ease-out), box-shadow .3s; }
.pchan li:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--cc, var(--accent)); }
.pchan__ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--cc, var(--accent)); font-size: 27px; box-shadow: 0 14px 26px -18px rgba(21, 20, 43, .4); }
.pchan__ic img { width: 30px; height: 30px; }
.pchan b { font: 700 15px/1.2 var(--font); color: var(--ink); }
.pchan__more { background: var(--accent-tint) !important; }
.pchan__more a { display: grid; justify-items: center; gap: 14px; color: inherit; text-decoration: none; }
.pchan__more .pchan__ic { background: var(--accent); color: #fff; }
.pchan__more b { color: var(--accent); }

/* --- Guided setup: four steps along one line ------------------------------- */
.psteps { list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.psteps::before { content: ''; position: absolute; left: 8%; right: 8%; top: 54px; height: 2px; background: repeating-linear-gradient(90deg, #A9B1EC 0 6px, transparent 6px 12px); }
.psteps li { position: relative; display: grid; align-content: start; justify-items: start; padding: 24px; border-radius: 26px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); }
.psteps__n { font: 700 12px/1 var(--font); letter-spacing: .14em; color: var(--muted); }
.psteps__ic { width: 52px; height: 52px; margin-top: 14px; border-radius: 16px; display: grid; place-items: center; background: var(--ct); color: var(--cc); font-size: 26px; }
.psteps h3 { margin: 18px 0 0; font: 700 clamp(18px, 1.5vw, 21px)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); }
.psteps p { margin: 8px 0 0; font: 400 15px/1.55 var(--font); color: var(--body); }

/* --- Room to expand: what a month looks like ------------------------------- */
.pgrow { margin: 0; width: min(420px, 100%); }
.pgrow__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 4px 0; }
.pgrow__kpis div { padding: 12px; border-radius: 14px; background: var(--paper); }
.pgrow__kpis small { display: block; font: 600 11.5px/1.3 var(--font); color: var(--muted); }
.pgrow__kpis b { display: block; margin-top: 6px; font: 700 22px/1 var(--font); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pgrow__top { margin: 8px 4px 0; padding: 12px; border-radius: 14px; background: var(--paper); display: grid; gap: 9px; }
.pgrow__top small { font: 600 11.5px/1.3 var(--font); color: var(--muted); }
.pgrow__top p { margin: 0; display: grid; gap: 5px; font: 600 13px/1.3 var(--font); color: var(--ink); }
.pgrow__top i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #4857C2, #8E9BFF); width: var(--w); }
.pgrow__add { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 4px 4px; }
.pgrow__add span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--accent-soft); font: 700 12.5px/1 var(--font); color: var(--accent); }
.pgrow__add .icon { font-size: 16px; }
.chs__list a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.chs__list li span b { color: var(--ink); }
.chs__cta { margin-top: 30px; }

/* The last ask, with two buttons. */
.pfinal__card .kicker { justify-content: center; margin-bottom: 16px; }
.pfinal__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.pfinal__ctas .btn { margin-top: 0; }

/* --- A still wall of logos ------------------------------------------------ */
.plogos { list-style: none; margin: clamp(40px, 5vw, 60px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1080px; }
.plogos li { display: grid; place-items: center; height: 120px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); }
.plogos img { width: auto; height: calc(30px * var(--s, 1)); max-width: 80%; object-fit: contain; opacity: .85; }

/* --- Who can see what ------------------------------------------------------ */
.paccess { width: min(430px, 100%); }
.paccess__rows { list-style: none; margin: 4px 0 0; padding: 0 4px; display: grid; gap: 6px; }
.paccess__rows li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--paper); }
.paccess__rows b { display: block; font: 700 14px/1.25 var(--font); color: var(--ink); }
.paccess__rows small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--font); color: var(--muted); }
.paccess__lvl { display: flex; gap: 3px; }
.paccess__lvl i { width: 8px; height: 18px; border-radius: 3px; background: #D9DCE5; }
.paccess__lvl[style*="--n:1"] i:nth-child(-n+1), .paccess__lvl[style*="--n:2"] i:nth-child(-n+2), .paccess__lvl[style*="--n:3"] i:nth-child(-n+3) { background: #4857C2; }
.paccess__locks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 4px 4px; }
.paccess__locks span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 9px; border-radius: var(--r-pill); background: var(--green-tint); font: 700 12.5px/1 var(--font); color: var(--green-ink); }
.paccess__locks svg { width: 16px; height: 16px; }

/* --- The security pack ----------------------------------------------------- */
.pdocs { position: relative; z-index: 2; width: min(420px, 100%); display: grid; gap: 10px; }
.pdocs__file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 36px -24px rgba(21, 20, 43, .45); }
.pdocs__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--cc) 13%, #fff); color: var(--cc); }
.pdocs__ic svg { width: 22px; height: 22px; }
.pdocs__file b { display: block; font: 700 14px/1.3 var(--font); color: var(--ink); }
.pdocs__file small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--font); color: var(--muted); }
.pdocs__type { padding: 5px 8px; border-radius: 8px; background: var(--paper); font: 800 10.5px/1 var(--font); letter-spacing: .06em; color: var(--ink-2); }
.pdocs .zb--done { justify-self: center; margin-top: 4px; }

/* --- AI Workforce: the team on shift ------------------------------------- */
.pteam { min-height: 0; padding: 48px 26px 56px; }
.pteam .ppanel { width: min(450px, 100%); min-width: 0; }
/* This page's headline is long: a size down keeps it to four lines. */
.page-ai-customer-service-agents .phero__title { font-size: clamp(36px, 3.9vw, 54px); }
.pteam__shift { display: inline-flex; align-items: center; gap: 6px; background: var(--green-tint); color: var(--green-ink); }
.pteam__shift i { width: 7px; height: 7px; border-radius: 50%; background: #22C08F; box-shadow: 0 0 0 3px rgba(34, 192, 143, .2); }
.pteam__rows { list-style: none; margin: 4px 0 0; padding: 0 4px; display: grid; gap: 6px; }
.pteam__rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px 8px 6px; border-radius: 14px; background: var(--paper); }
.pteam__m { display: block; width: 44px; height: 44px; }
.pteam__rows b { display: block; font: 700 14px/1.3 var(--font); color: var(--ink); }
.pteam__rows small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--font); color: var(--muted); }
.pteam__tag { padding: 5px 9px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 700 11px/1 var(--font); color: var(--ink-2); white-space: nowrap; }
.pteam__new { box-shadow: 0 0 0 2px #9B7BFF; background: #F6F2FF !important; }
.pteam__tag--new { background: #9B7BFF; color: #fff; box-shadow: none; }
.pteam .zb--done { margin: 8px auto 2px; }

/* --- The three levels, row by row across three cards ----------------------- */
.plevels { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 16px; }
.plevel { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 8px 24px 12px; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); }
.plevel header { padding: 18px 0 16px; }
.plevel__n { font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.plevel h3 { margin: 10px 0 0; font: 700 clamp(20px, 1.7vw, 24px)/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.plevel > div { padding: 14px 0; border-top: 1px solid var(--line); }
.plevel small { display: block; font: 700 11.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plevel p { margin: 6px 0 0; font: 500 15.5px/1.5 var(--font); color: var(--ink-2); }
.plevel--us { background: linear-gradient(165deg, #3B3484 0%, #2A2464 55%, #1B1742 100%); box-shadow: 0 30px 60px -34px rgba(42, 36, 100, .7); }
.plevel--us .plevel__n { color: #B9C0FF; }
.plevel--us h3, .plevel--us p { color: #fff; }
.plevel--us small { color: rgba(255, 255, 255, .62); }
.plevel--us > div { border-top-color: rgba(255, 255, 255, .14); }

/* --- Specialists by industry --------------------------------------------- */
.mcp__tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.mcp__tab[aria-selected="true"] span { color: rgba(255, 255, 255, .6); }
.mcp__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pagents { margin-top: 28px; }
.pagents:not([hidden]) { animation: mcpIn .45s var(--ease-out) both; }
.pagents__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1100px; }
.pagents__grid li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); font: 600 15px/1.3 var(--font); color: var(--ink); }
.pagents__ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-size: 21px; }
.pagents__more { margin: 24px 0 0; text-align: center; font: 500 15px/1.5 var(--font); color: var(--body); }
.pagents__more a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* The journey's stages each carry a line a customer might say. */
.psteps__q { margin-top: 14px; padding: 8px 12px; border-radius: 12px; background: var(--paper); font: 500 13.5px/1.4 var(--font); color: var(--ink-2); }

/* --- How to hire: the steps down one line ---------------------------------- */
.phire { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.phire__head { position: sticky; top: calc(var(--header-h, 72px) + 32px); }
.phire__head .h2 { text-wrap: balance; }
.phire__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.phire__steps::before { content: ''; position: absolute; left: 41px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, #A9B1EC 0 6px, transparent 6px 12px); }
.phire__steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 24px 22px 14px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 43, .05); }
.phire__n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 20px/1 var(--font); box-shadow: 0 0 0 6px #fff; }
.phire__steps h3 { margin: 4px 0 0; font: 700 clamp(19px, 1.6vw, 22px)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); }
.phire__steps p { margin: 8px 0 0; font: 400 var(--fs-p)/1.6 var(--font); color: var(--body); }

/* --- Small screens ---------------------------------------------------------- */

@media (max-width: 960px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr); }
  /* As on the homepage: the picture first, the words under it. */
  .phero__visual { order: -1; }
  .chs, .chs--flip, .iflow, .pcase { grid-template-columns: minmax(0, 1fr); }
  .chs--flip .pcard, .chs--flip .chs__media { order: 0; }
  .chs__text { max-width: 640px; }
  .relay__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbadges, .pfeat { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .plevels { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 14px; max-width: 560px; margin-inline: auto; }
  .plevel { grid-row: auto; grid-template-rows: none; }
  .pagents__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phire { grid-template-columns: minmax(0, 1fr); }
  .phire__head { position: static; }
  .psteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psteps::before { display: none; }
  .pchan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .relay__track::before { display: none; }
  .ways { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .ihub { max-width: 520px; }
}
@media (max-width: 600px) {
  .pcard { min-height: 0; padding: 28px 12px 36px; border-radius: 26px; }
  .pcard__bot { width: 76px; right: 10px; bottom: 6px; }
  .ppanel { padding: 8px; }
  .pchat { height: 280px; }
  .uinbox .pchat { height: 252px; }
  .wbrw__page { padding-bottom: 150px; }
  .wwid { left: 10px; right: 10px; width: auto; }
  .relay__track { grid-template-columns: minmax(0, 1fr); }
  .mcp__tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .mcp__tabs::-webkit-scrollbar { display: none; }
  .mcp__tab { flex: none; }
  /* On a phone the directory is two compact columns: the mark and the name. */
  .mcp__grid { gap: 10px; }
  .mcp__grid .mcp__item { width: calc(50% - 5px); grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .mcp__grid .mcp__item p { display: none; }
  .mcp__grid .mcp__logo { width: 40px; height: 40px; border-radius: 12px; }
  .mcp__item b { font-size: 14.5px; }
  .mcp__track .mcp__item { width: 250px; margin-right: 10px; padding: 16px; }
  .mcp__belt { gap: 10px; }
  .istep.is-on { transform: translateY(-2px); }
  .pcase__out { gap: 10px; }
  .pcase__out li { padding: 16px; }
  .pcase__cta { flex-direction: column; align-items: flex-start; border-radius: 26px; }
  .pstrip { flex-direction: column; align-items: flex-start; border-radius: 26px; }
  .pteam { padding: 30px 12px 40px; }
  .pteam__tag { display: none; }
  .pteam__shift > span { display: none; }
  .pagents__grid li { min-height: 56px; padding: 8px 10px 8px 8px; font-size: 13.5px; gap: 10px; }
  .pagents__ic { width: 36px; height: 36px; font-size: 18px; border-radius: 11px; }
  .phire__steps::before { left: 33px; }
  .phire__steps li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 16px 18px 12px; }
  .phire__n { width: 40px; height: 40px; font-size: 16px; }
  .pstrip .btn { width: 100%; }
  .pchan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plogos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plogos li { height: 96px; }
  .ponboard, .ptrustc { padding: 30px 12px 44px; }
  .pfinal__ctas .btn { width: 100%; }
  .pcase__cta .btn { width: 100%; }
  .kiosk__chat { height: 236px; }
  .ihub__tile { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 18px; }
  .ihub__tile svg, .ihub__tile img { width: 26px; height: 26px; }
  .ihub__tile span { display: none; }
  .ihub__core { width: 46%; padding: 18px 10px 16px; border-radius: 20px; }
  .ihub__core svg { width: 40px; }
  .phero__ctas .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .zb--typing i, .vcall.is-talking .vcall__wave i, .ihub__tile { animation: none; }
}

/* ==========================================================================
   7 OCT 2026 ROUND (inner pages only; the homepage does not load this file)
   ========================================================================== */
/* Every sub-page hero title at 48px (smaller only where a phone needs it). */
.page-sub .phero__title, .page-ai-customer-service-agents .phero__title { font-size: 48px; line-height: 1.08; letter-spacing: -.04em; }
@media (max-width: 600px) {
  .page-sub .phero__title, .page-ai-customer-service-agents .phero__title { font-size: clamp(34px, 9.4vw, 48px); }
}
/* No orphans: titles balance their lines, text avoids a lone last word. */
.page-sub main h2, .page-sub main h3 { text-wrap: balance; }
.page-sub main p, .page-sub main li, .page-sub main small, .page-sub .faq__a p { text-wrap: pretty; }
/* The kiosk keeps one width while its screen fills (no side jerk). */
.kiosk { width: 100%; }
.kiosk__body { flex: none; }
/* Voice waves: rounded bars, tallest in the middle, moved by pages.js. */
.vcall__wave.is-smooth { gap: 4px; height: 52px; justify-content: center; }
.vcall__wave.is-smooth i { flex: 0 0 4px; height: 100%; border-radius: 4px; background: linear-gradient(180deg, #B9A6FF, #7B5CF0); opacity: 1; animation: none !important; transform: scaleY(.1); will-change: transform; }
/* Trust's contact title has one long word: a size that lets it share a line. */
.page-trust-security #s10-title { font-size: clamp(28px, 7.4vw, 40px); max-width: none; }
/* The colour cards carry no icon: the title sits under the number. */
.way__n + h3 { margin-top: 14px; }

/* Trust panels (7 Oct): the character walks down beside the rows as they fill. */
.pcard__bot--follow { top: 0; bottom: auto; right: 8px; width: 76px; }