/* Voice assistant page (/chatbot-ia/). Its own layout in the Carem palette and font, on top of the shared
   stylesheets that still draw the footer, the booking panel and the privacy panel. Load after brand-kit.css. */
.cb-page {
  --cb-ink: #0F172A;
  --cb-text: #1E293B;
  --cb-muted: #4F5B69;
  --cb-subtle: #64748B;
  --cb-border: #E3E7EE;
  --cb-border-strong: #D9DFE7;
  --cb-accent: #007A3D;
  --cb-accent-hover: #00652F;
  --cb-bright: #00B359;
  --cb-soft: #E8F8EF;
  --cb-surface: #F6F8FA;
  --cb-night: #05080F;
  --cb-gutter: clamp(16px, 5vw, 28px);
  --cb-ease: cubic-bezier(.2, .8, .2, 1);
  background: #fff;
}
.cb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Line icons come from the sprite; brand logos carry their own colours and a viewBox. */
.cb-header svg:not([viewBox]), .cb svg:not([viewBox]), .cb-launcher svg:not([viewBox]) {
  flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cb-ico { width: 18px; height: 18px; }
.cb-ico-sm { width: 16px; height: 16px; }
.cb-ico-xs { width: 14px; height: 14px; }

/* Buttons */
.cb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 12px; font-family: Jakarta, Arial, sans-serif; font-size: 15px;
  font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cb-btn-dark { background: var(--cb-ink); border-color: var(--cb-ink); color: #fff; }
.cb-btn-dark:hover { background: #24324A; border-color: #24324A; }
.cb-btn-accent { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; }
.cb-btn-accent:hover { background: var(--cb-accent-hover); border-color: var(--cb-accent-hover); }
.cb-btn-outline { background: #fff; border-color: var(--cb-border-strong); color: var(--cb-ink); }
.cb-btn-outline:hover { background: var(--cb-surface); }
.cb-btn-sm { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.cb-btn-block { width: 100%; }
.cb-center { display: flex; justify-content: center; margin-top: 40px; }
.cb-text-btn { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--cb-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Header */
.cb-header {
  position: sticky; top: 0; z-index: 40; font-family: Jakarta, Arial, sans-serif;
  background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--cb-border);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.cb-header-inner { display: flex; align-items: center; gap: 28px; height: 72px; padding: 0 var(--cb-gutter); }
.cb-brand { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; flex: none; }
.cb-brand-logo img { display: block; width: 124px; height: auto; }
.cb-brand-xem { display: inline-flex; align-items: center; min-height: 32px; font-size: 12px; color: #56635D; white-space: nowrap; }
.cb-brand-xem:hover { color: var(--cb-accent); text-decoration: underline; }
.cb-brand .cb-brand-payoff {
  grid-column: 1 / -1; margin-top: -9px; padding-left: 4px; font-size: 11px; line-height: 1.3;
  letter-spacing: .015em; color: #56635D; white-space: nowrap;
}
.cb-nav { display: flex; align-items: center; gap: 2px; }
.cb-nav > a:not(.cb-btn), .cb-menu-trigger {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; font-size: 15px; font-weight: 400; color: var(--cb-ink); transition: background-color .15s;
}
.cb-nav > a:not(.cb-btn):hover, .cb-menu-trigger:hover, .cb-menu-trigger[aria-expanded=true] { background: #F1F5F9; }
.cb-menu-trigger svg { color: var(--cb-subtle); transition: transform .2s; }
.cb-menu-trigger[aria-expanded=true] svg { transform: rotate(180deg); }
.cb-menu { position: relative; }
.cb-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; display: grid; min-width: 220px; padding: 6px;
  background: #fff; border: 1px solid var(--cb-border); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .18);
}
.cb-dropdown a { padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--cb-text); }
.cb-dropdown a:hover, .cb-dropdown a:focus-visible { background: var(--cb-surface); color: var(--cb-accent); }
.cb-nav-demo { display: none; }
.cb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cb-burger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none;
}
.cb-burger span { display: block; width: 20px; height: 1.6px; border-radius: 2px; background: var(--cb-ink); transition: transform .2s, opacity .2s; }
.cb-burger[aria-expanded=true] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.cb-burger[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.cb-burger[aria-expanded=true] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Page rhythm */
.cb { font-family: Jakarta, Arial, sans-serif; color: var(--cb-ink); line-height: 1.5; }
.cb-section { padding: 80px var(--cb-gutter); }
.cb-container { max-width: 1152px; margin: 0 auto; }
.cb-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.cb-head-pad { padding: 0 var(--cb-gutter); }
.cb .cb-h2 { font-size: 38px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; color: var(--cb-ink); white-space: normal; text-wrap: balance; }
.cb .cb-h2-xl { font-size: 48px; line-height: 1.15; letter-spacing: -.02em; }
.cb .cb-h2-faq { margin-bottom: 24px; font-size: 36px; line-height: 1.1; letter-spacing: -.025em; text-align: center; }
.cb .cb-lead { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--cb-muted); text-wrap: pretty; }

/* Hero with the voice trial */
.cb-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  min-height: calc(95vh - 72px); padding: 72px var(--cb-gutter) 48px;
}
.cb-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cb-ring {
  position: absolute; width: 640px; height: 640px; border-radius: 50%; opacity: .8; filter: blur(20px);
  background: conic-gradient(from 210deg, rgba(0, 179, 89, 0), rgba(0, 179, 89, .55) 70deg, rgba(110, 231, 183, .75) 130deg, rgba(56, 189, 248, .35) 205deg, rgba(186, 230, 253, .25) 260deg, rgba(0, 179, 89, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 56%, #000 60%, #000 76%, transparent 80%);
  mask: radial-gradient(closest-side, transparent 56%, #000 60%, #000 76%, transparent 80%);
}
.cb-ring-l { left: -390px; top: 22%; transform: rotate(-28deg) scaleY(.6); }
.cb-ring-r { right: -400px; top: -12%; opacity: .6; transform: rotate(32deg) scaleY(.68); }
.cb-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; max-width: 768px; margin: 0 auto; text-align: center; }
.cb .cb-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; background: #fff;
  border: 1px solid rgba(203, 213, 225, .85); border-radius: 10px; font-size: 16px; font-weight: 400; line-height: 1.2;
  letter-spacing: 0; color: var(--cb-ink); white-space: normal;
}
.cb-badge .cb-ico { width: 17px; height: 17px; color: var(--cb-accent); }
.cb .cb-hero-title { max-width: 13em; margin-top: 24px; font-size: 48px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; color: var(--cb-ink); text-wrap: balance; }

/* The orb: a soft sphere that breathes while waiting and pulses while Carem speaks */
/* The voice mark: Carem's opposed triangles on a flat disc, at the symbol's own proportions and gap.
   Waiting, the rings breathe; connecting, the hourglass turns; talking, the triangles part with the
   voice and the rings move out like sound. Flat planes only: no blur, gloss or gradient. */
.cb-orb { --orb: 220px; position: relative; flex: none; display: grid; place-items: center; width: var(--orb); height: var(--orb); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--cb-border-strong), 0 18px 40px -28px rgba(15, 23, 42, .45); isolation: isolate; }
/* Always on: a green point goes round the outer ring, like a clock's hand; it rests during a call */
.cb-orb::before { content: ''; position: absolute; inset: -9%; border-radius: 50%; background: radial-gradient(circle at 50% 0, var(--cb-bright) 0 3px, transparent 3.5px); animation: cb-orbit 14s linear infinite; pointer-events: none; transition: opacity .3s; }
.cb-orb-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 179, 89, .38); pointer-events: none; animation: cb-ring 6s ease-in-out infinite; }
.cb-orb-ring:nth-child(1) { inset: 11%; border-color: rgba(15, 23, 42, .09); }
.cb-orb-ring:nth-child(2) { inset: -9%; animation-delay: -2s; }
.cb-orb-ring:nth-child(3) { inset: -19%; border-color: rgba(0, 179, 89, .18); animation-delay: -4s; }
.cb-orb-mark { position: relative; width: 58%; height: 58%; overflow: visible; }
.cb-orb-glass { transform-box: fill-box; transform-origin: 50% 50%; }
.cb-orb-top, .cb-orb-bottom { transform-box: view-box; transition: transform .35s var(--cb-ease), fill .3s; }
.cb-orb-top { fill: #0F172A; }
.cb-orb-bottom { fill: #00B359; }
@keyframes cb-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.035); opacity: .5; } }
@keyframes cb-turn { 0%, 25% { transform: rotate(0); } 50%, 75% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes cb-part-top { 0%, 100% { transform: translateY(-1px); } 22% { transform: translateY(-4px); } 48% { transform: translateY(-1.5px); } 74% { transform: translateY(-3.5px); } }
@keyframes cb-part-bottom { 0%, 100% { transform: translateY(1px); } 22% { transform: translateY(4px); } 48% { transform: translateY(1.5px); } 74% { transform: translateY(3.5px); } }
@keyframes cb-orbit { to { transform: rotate(1turn); } }
@keyframes cb-sound { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.cb-orb-hero { margin: 36px 0 32px; }
.cb-orb-hero:hover .cb-orb-top { transform: translateY(-1.5px); }
.cb-orb-hero:hover .cb-orb-bottom { transform: translateY(1.5px); }
/* Connecting: the hourglass is turned, as one does while waiting */
.cb-voice[data-state=connecting] .cb-orb-glass, .cg[data-state=connecting] .cb-orb-glass { animation: cb-turn 2.4s var(--cb-ease) infinite; }
/* On the call: a small opening while listening, the voice's rhythm while speaking, sound moving out */
.cb-voice[data-state=active] .cb-orb-top, .cg[data-state=active] .cb-orb-top { transform: translateY(-1px); }
.cb-voice[data-state=active] .cb-orb-bottom, .cg[data-state=active] .cb-orb-bottom { transform: translateY(1px); }
.cb-voice[data-speaking=true] .cb-orb-top, .cg[data-speaking=true] .cb-orb-top { animation: cb-part-top .9s ease-in-out infinite; }
.cb-voice[data-speaking=true] .cb-orb-bottom, .cg[data-speaking=true] .cb-orb-bottom { animation: cb-part-bottom .9s ease-in-out infinite; }
.cb-voice[data-state=active] .cb-orb-ring:nth-child(n+2), .cg[data-state=active] .cb-orb-ring:nth-child(n+2) { inset: 0; border-width: 2px; animation: cb-sound 2.4s ease-out infinite; }
.cb-voice[data-state=active] .cb-orb-ring:nth-child(3), .cg[data-state=active] .cb-orb-ring:nth-child(3) { animation-delay: -1.2s; }
.cb-voice[data-state=active] .cb-orb::before, .cg[data-state=active] .cb-orb::before { opacity: 0; }
.cb-voice[data-state=error] .cb-orb-bottom { fill: #94A3B8; }

.cb-voice { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cb-voice-controls { display: flex; justify-content: center; }
.cb-call {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 1px solid var(--cb-ink); border-radius: 999px;
  background: var(--cb-ink); font-family: Jakarta, Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1; color: #fff;
  box-shadow: 0 16px 32px -16px rgba(15, 23, 42, .6); transition: background-color .15s, transform .15s;
}
.cb-call:hover:not(:disabled) { background: #24324A; transform: translateY(-1px); }
.cb-call:disabled { opacity: .6; cursor: default; }
.cb-call .cb-ico { color: #6EE7B7; }
.cb-call-stop { background: #fff; border-color: #F3C7C3; box-shadow: none; color: #B42318; }
.cb-call-stop:hover:not(:disabled) { background: #FEF3F2; }
.cb .cb-voice-status { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--cb-text); }
.cb-voice[data-state=idle] .cb-voice-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb .cb-voice-suggestion { margin-top: 14px; font-size: 14px; color: var(--cb-muted); }
.cb-voice:not([data-state=idle]) .cb-voice-suggestion { margin-top: 4px; }
.cb-voice-suggestion q { color: var(--cb-text); quotes: '«' '»'; }
.cb .cb-voice-error { max-width: 460px; margin-top: 6px; font-size: 14px; color: #B42318; }
.cb-voice-followup { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 12px; }
.cb .cb-voice-followup p { font-size: 15px; color: var(--cb-text); }
.cb-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--cb-muted); }
.cb-checks li { display: inline-flex; align-items: center; gap: 6px; }
.cb .cb-voice-notice { max-width: 600px; margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--cb-subtle); }
.cb-voice-notice a { text-decoration: underline; text-underline-offset: 2px; }

/* Personalized demo, in the hero: the site's address */
.cb-cg { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 640px; }
.cb .cb-cg-label { max-width: 30em; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--cb-text); text-align: center; text-wrap: balance; }
.cb-cg-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 6px 6px 18px; border: 1.5px solid var(--cb-border-strong);
  border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -20px rgba(15, 23, 42, .4);
  transition: border-color .15s, box-shadow .15s;
}
.cb-cg-row:focus-within { border-color: var(--cb-accent); box-shadow: 0 0 0 4px var(--cb-soft), 0 14px 34px -20px rgba(15, 23, 42, .4); }
.cb-cg-globe { color: var(--cb-subtle); }
.cb-cg-input { flex: 1; min-width: 0; height: 48px; padding: 0 2px; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--cb-ink); outline: none; }
.cb-cg-input::placeholder { color: #94A3B8; }
.cb .cb-cg-input:focus-visible { outline: none; } /* the whole row shows the focus */
.cb-cg-row .cb-call { flex: none; height: 50px; padding: 0 24px; font-size: 15px; box-shadow: none; }
.cb .cb-cg-error { max-width: 520px; font-size: 14px; color: #B42318; text-align: center; }
.cb-cg-error[hidden] { display: none; }
.cb .cb-cg-note { margin: 0; font-size: 12px; color: var(--cb-muted); text-align: center; }
.cb .cb-cg-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cb-cg-link { font-size: 14px; }
@media (max-width: 560px) {
  .cb-cg-row { flex-wrap: wrap; padding: 6px 6px 8px 16px; border-radius: 22px; }
  .cb-cg-input { flex-basis: calc(100% - 40px); }
  .cb-cg-row .cb-call { width: 100%; justify-content: center; }
}

/* The stage: a full-screen dialog. One orchestrated moment, the scan, then the receptionist's card.
   Only opacity and transform move, so the browser composites every frame without layout work. */
html.cg-lock { overflow: hidden; }
/* While the stage is open, the page behind it stops animating */
html.cg-lock .cb-orb-hero, html.cg-lock .cb-orb-hero *, html.cg-lock .cb-hero-bg *, html.cg-lock .cb-marquee-track { animation-play-state: paused; }
.cg {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #fff; color: var(--cb-ink); font-family: Jakarta, Arial, sans-serif; line-height: 1.5; text-align: left; overflow: hidden auto; overscroll-behavior: contain;
}
/* The soft light behind, on its own layer: painted once, never again while things move in front of it */
.cg::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; will-change: transform;
  background: radial-gradient(60vmax 60vmax at 0% 100%, rgba(110, 231, 208, .22), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60vmax 60vmax at 100% 0%, rgba(139, 184, 255, .2), rgba(255, 255, 255, 0) 70%);
}
.cg::backdrop { background: #fff; }
.cg[open] { display: flex; flex-direction: column; }
.cg-top, .cg-scan, .cg-ready, .cg-failed { position: relative; z-index: 1; }
.cg-top { display: flex; flex: none; align-items: center; justify-content: space-between; height: 72px; padding: 0 clamp(16px, 3vw, 32px); }
.cg-mark { width: 104px; height: auto; }
.cg-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cb-ink); cursor: pointer; }
.cg-close:hover { background: rgba(15, 23, 42, .06); }
.cg-close .cb-ico { width: 22px; height: 22px; stroke-width: 1.4; }
.cg [hidden] { display: none !important; }

/* Scan: the address types itself, rises like a browser bar, and the site is read under a moving line */
.cg-scan { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 0 clamp(16px, 3vw, 40px); }
.cg-url {
  position: absolute; left: 50%; top: -59px; z-index: 3; display: flex; align-items: center; gap: 10px;
  width: min(560px, calc(100% - 200px)); height: 46px; padding: 0 18px; border: 1px solid var(--cb-border-strong); border-radius: 12px;
  background: #fff; color: var(--cb-subtle); box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .3);
  transform: translate(-50%, calc(50dvh - 60px)); transition: transform .8s cubic-bezier(.22, 1, .36, 1); will-change: transform;
}
.cg-url-text { min-width: 0; overflow: hidden; font-size: 17px; color: var(--cb-ink); text-overflow: ellipsis; white-space: nowrap; }
.cg-caret { flex: none; width: 1.5px; height: 22px; margin-left: -8px; background: var(--cb-ink); animation: cg-blink 1s steps(1) infinite; }
.cg.is-up .cg-url { transform: translate(-50%, 0); }
.cg.is-up .cg-caret { display: none; }

.cg-stagebox {
  display: grid; flex: 1; grid-template-columns: minmax(190px, 1fr) minmax(0, 860px) minmax(190px, 1fr); grid-template-rows: repeat(3, auto);
  align-content: center; align-items: center; gap: 28px 32px; padding: 20px 0 150px;
  opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .6s var(--cb-ease) .15s, transform .8s cubic-bezier(.22, 1, .36, 1) .15s;
  will-change: transform, opacity;
}
.cg.is-up .cg-stagebox { opacity: 1; transform: none; }
.cg-window {
  grid-column: 2; grid-row: 1 / span 3; overflow: hidden; border: 1px solid var(--cb-border-strong); border-radius: 16px; background: #fff;
  box-shadow: 0 34px 70px -34px rgba(15, 23, 42, .45), 0 10px 22px -12px rgba(15, 23, 42, .2);
}
.cg-window-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--cb-border); background: #FBFCFD; }
.cg-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.cg-window-bar i:nth-child(2) { background: #FEBC2E; }
.cg-window-bar i:nth-child(3) { background: #28C840; }
.cg-window-bar span { min-width: 0; margin: 0 auto; padding-right: 50px; overflow: hidden; font-size: 13px; color: var(--cb-subtle); text-overflow: ellipsis; white-space: nowrap; }
.cg-window-view { position: relative; height: min(58dvh, 560px); overflow: hidden; background: #F6F8FA; }
/* Until the screenshot arrives: the name over a sketch of a page */
.cg-sketch { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; }
.cg-sketch b { max-width: 90%; font-size: clamp(22px, 3vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; text-align: center; text-wrap: balance; }
.cg-sketch i { display: block; width: min(420px, 72%); height: 10px; border-radius: 6px; background: linear-gradient(90deg, #E6EBF1, #F2F5F8); }
.cg-sketch i:nth-of-type(2) { width: min(360px, 62%); }
.cg-sketch i:nth-of-type(3) { width: min(400px, 68%); }
.cg-sketch i:nth-of-type(4) { width: min(280px, 48%); }
.cg-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .7s ease-out; will-change: opacity; }
.cg.is-shot .cg-shot { opacity: 1; }
.cg-scanline { position: absolute; inset: 0 -28px; height: 100%; pointer-events: none; animation: cg-scan 2.8s ease-in-out infinite; will-change: transform; }
.cg-scanline i { display: block; height: 4px; background: var(--cb-bright); box-shadow: 0 0 18px 4px rgba(0, 179, 89, .45); }
.cg.is-done .cg-scanline { opacity: 0; transition: opacity .4s; }

/* What it learns, around the window. The six places exist from the start, so nothing moves when one appears. */
.cg-finds { display: contents; }
.cg-find {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 290px; padding: 12px 16px; border: 1px solid var(--cb-border);
  border-radius: 14px; background: #fff; box-shadow: 0 16px 36px -16px rgba(15, 23, 42, .28);
  opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .4s ease-out, transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}
.cg-find.is-on { opacity: 1; transform: none; }
.cg-find > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cb-bright); box-shadow: 0 0 0 4px var(--cb-soft); }
.cg-find p { display: grid; gap: 1px; min-width: 0; }
.cg-find b { font-size: 13px; font-weight: 500; color: var(--cb-muted); }
.cg-find span { display: -webkit-box; min-height: 1.3em; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--cb-ink); overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* A slot that is still waiting for the data shimmers */
.cg-find.is-pending span { width: 120px; border-radius: 6px; background: linear-gradient(90deg, #EEF2F6 0%, #F8FAFC 50%, #EEF2F6 100%) 0 0 / 200% 100%; animation: cg-shimmer 1.2s linear infinite; }
.cg-find:nth-child(-n+3) { grid-column: 1; justify-self: end; }
.cg-find:nth-child(n+4) { grid-column: 3; justify-self: start; }
.cg-find:nth-child(1), .cg-find:nth-child(4) { grid-row: 1; }
.cg-find:nth-child(2), .cg-find:nth-child(5) { grid-row: 2; }
.cg-find:nth-child(3), .cg-find:nth-child(6) { grid-row: 3; }

.cg-status {
  position: fixed; left: 50%; bottom: 22px; z-index: 2; width: min(520px, calc(100% - 32px)); padding: 16px 20px 18px;
  border: 1px solid var(--cb-border); border-radius: 12px; background: #fff; box-shadow: 0 20px 44px -20px rgba(15, 23, 42, .35);
  transform: translateX(-50%); will-change: transform;
}
.cg-status-line { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--cb-ink); }
.cg-status-text { transition: opacity .18s ease; }
.cg-status-text.is-swap { opacity: 0; }
/* The status dot pulses with a ring that scales and fades: nothing is repainted on each frame */
.cg-pulse { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-bright); }
.cg-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--cb-bright); animation: cg-ping 1.4s ease-out infinite; }
.cg.is-done .cg-pulse::after { animation: none; opacity: 0; }
.cg-eta { min-height: 1.45em; margin-top: 2px; padding-left: 18px; font-size: 14px; color: var(--cb-muted); }
.cg-progress { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 4px; background: #E9EEF3; }
/* One long transition instead of a step every second */
.cg-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00B359, #38BDF8); transform: scaleX(var(--p, .04)); transform-origin: left; transition: transform var(--t, .6s) cubic-bezier(.25, .8, .35, 1); }

@media (max-width: 1099px) {
  .cg-stagebox { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; align-content: start; gap: 12px; padding: 76px 0 160px; }
  .cg-window { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 760px; justify-self: center; }
  .cg-window-view { height: clamp(150px, 34dvh, 340px); }
  .cg-find:nth-child(n) { grid-column: auto; grid-row: auto; justify-self: stretch; max-width: none; }
  .cg-url { top: 4px; width: min(560px, calc(100% - 32px)); }
}
@media (max-width: 560px) {
  .cg-window-view { height: clamp(150px, 31dvh, 300px); }
  .cg-find { gap: 10px; padding: 10px 12px; }
  .cg-find span { font-size: 14px; }
  .cg-status { bottom: 12px; padding: 14px 16px 16px; }
}

/* The receptionist's card: the site on top, the receptionist, one button */
.cg-ready { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 8px clamp(16px, 3vw, 32px) 40px; animation: cg-rise .7s cubic-bezier(.22, 1, .36, 1) both; }
.cg-card {
  width: min(520px, 100%); overflow: hidden; border: 1px solid var(--cb-border); border-radius: 24px; background: #fff;
  box-shadow: 0 44px 90px -44px rgba(15, 23, 42, .45), 0 12px 28px -16px rgba(15, 23, 42, .18);
}
.cg-band { position: relative; height: 168px; overflow: hidden; background: linear-gradient(120deg, #C6F6E4, #9ADBFF 58%, #8BB8FF); }
.cg-band[style*="--cg-brand"] { background: var(--cg-brand); }
.cg-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 35%, rgba(15, 23, 42, .3)); }
.cg-band-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cg-band-logo { position: absolute; right: 16px; top: 16px; z-index: 1; display: none; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .45); }
.cg-band-logo:has(img:not([hidden])) { display: block; }
.cg-band-logo img { display: block; max-width: 120px; max-height: 40px; object-fit: contain; }
.cg-body { display: flex; flex-direction: column; align-items: center; padding: 0 32px 32px; text-align: center; }
.cg-avatar { position: relative; z-index: 2; display: grid; place-items: center; width: 120px; height: 120px; margin-top: -60px; border-radius: 50%; background: #fff; box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .4); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.cg-orb { --orb: 104px; box-shadow: none; }
.cg-orb::before { display: none; }
.cg-orb .cb-orb-ring:nth-child(3) { display: none; }
.cg[data-state=active] .cg-orb .cb-orb-ring:nth-child(3) { display: block; }
.cg[data-state=active] .cg-avatar, .cg[data-state=connecting] .cg-avatar { transform: scale(1.12); }
.cg-name { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; color: var(--cb-ink); text-wrap: balance; }
.cg-verified { flex: none; width: 24px; height: 24px; }
.cg-role { margin-top: 6px; font-size: 16px; color: var(--cb-muted); text-wrap: balance; }
.cg-panel { width: 100%; }
.cg-title { margin-top: 26px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; line-height: 1.14; letter-spacing: -.04em; color: var(--cb-ink); text-wrap: balance; }
.cg-lead { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--cb-muted); text-wrap: pretty; }
.cg-talk {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px;
  margin-top: 26px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--cb-ink); color: #fff; font: 500 17px/1.2 Jakarta, Arial, sans-serif;
  text-align: center; cursor: pointer; box-shadow: 0 18px 36px -16px rgba(15, 23, 42, .7); transition: background-color .15s, transform .15s;
}
.cg-talk .cb-ico { color: #6EE7B7; }
.cg-talk:hover { background: #24324A; transform: translateY(-1px); }
/* A slow halo on the single next step */
.cg-talk::before { content: ''; position: absolute; inset: -5px; z-index: -1; border: 2px solid rgba(0, 179, 89, .5); border-radius: inherit; animation: cg-halo 2.4s ease-out infinite; }
.cg-body .cb-voice-error { margin-top: 12px; }
/* A trial link of the CRM: the minutes left, and talking again after a call */
.cg-trial-left { display: inline-flex; margin-top: 22px; padding: 6px 14px; border-radius: 999px; background: #E8F5EE; color: #007A3D; font-size: 13px; font-weight: 600; }
.cg-trial-left + .cg-talk { margin-top: 14px; }
.cg-again { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 12px; padding: 0 24px; border: 1px solid var(--cb-line, #E2E8F0); border-radius: 999px; background: transparent; color: var(--cb-ink); font: 500 16px/1.2 Jakarta, Arial, sans-serif; cursor: pointer; transition: border-color .15s, background-color .15s; }
.cg-again:hover { border-color: var(--cb-ink); }
/* The trial's card opens at once: the name and the minutes keep their place until they arrive, then fade in */
.cg.is-waiting .cg-verified, .cg-trial-left.is-blank { visibility: hidden; }
.cg-name span:not(:empty), .cg-face b:not(:empty) { animation: cg-fade .45s ease-out both; }
/* The card is the centre's: its logo or initials in the middle, Carem small at the top */
.cg-face { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--cb-border-strong); color: var(--cg-face, var(--cb-ink)); transition: color .4s; }
.cg-face b { font-size: calc(var(--orb) * .38); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.cg-face img { width: 74%; height: 74%; object-fit: contain; animation: cg-fade .45s ease-out both; }
.cg-face.has-logo b { display: none; }
.cg[data-state=connecting] .cg-face, .cg[data-speaking=true] .cg-face { animation: cg-voice .9s ease-in-out infinite alternate; }
@keyframes cg-voice { to { transform: scale(1.05); } }
.cg-mark { transition: width .3s, opacity .3s; }
.cg:is([data-state=ready], [data-state=connecting], [data-state=active], [data-state=ended]) .cg-mark { width: 72px; opacity: .5; }
.cg-ready .cg-name { min-height: 1.15em; font-size: clamp(30px, 3.4vw, 38px); font-weight: 600; }
/* The site's picture fades in on the card, whenever it arrives */
.cg-band-shot:not([hidden]) { animation: cg-fade .6s ease-out both; }
/* A trial link, before the script runs: the stage's white instead of a glimpse of the landing.
   It lifts by itself if the script never comes. */
html.cg-boot body::after { content: ''; position: fixed; inset: 0; z-index: 2147483647; background: #fff; animation: cg-boot .3s 5s both; }
@keyframes cg-boot { to { opacity: 0; visibility: hidden; } }
.cg-again[hidden] { display: none; }
.cg-note { margin-top: 16px; font-size: 12px; line-height: 1.55; color: var(--cb-subtle); text-wrap: pretty; }
.cg-note a { text-decoration: underline; text-underline-offset: 2px; }
.cg-callstatus { margin-top: 24px; font-size: 17px; font-weight: 500; color: var(--cb-ink); }
.cg-timer { margin-top: 4px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--cb-muted); }
.cg-live .cb-call-stop { margin-top: 18px; }

.cg-failed { display: grid; flex: 1; place-items: center; padding: 24px; }
.cg-failbox { width: min(460px, 100%); padding: 36px 32px; border: 1px solid var(--cb-border); border-radius: 24px; background: #fff; box-shadow: 0 30px 70px -40px rgba(15, 23, 42, .45); text-align: center; }
.cg-failbox .cg-title { margin-top: 0; }

@media (max-width: 560px) {
  .cg-ready { justify-content: flex-start; padding-top: 12px; }
  .cg-band { height: 136px; }
  .cg-body { padding: 0 20px 26px; }
  .cg-avatar { width: 100px; height: 100px; margin-top: -50px; }
  .cg-orb { --orb: 86px; }
}

/* Short screens: the status follows the finds instead of floating over them */
@media (max-height: 700px) {
  .cg-status { position: static; margin: 0 auto 16px; transform: none; }
  .cg-stagebox { padding-bottom: 16px; }
}

@keyframes cg-fade { from { opacity: 0; } }
@keyframes cg-blink { 50% { opacity: 0; } }
@keyframes cg-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(100% - 4px)); } }
@keyframes cg-shimmer { to { background-position: -200% 0; } }
@keyframes cg-ping { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes cg-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes cg-halo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06, 1.22); } }

@media (prefers-reduced-motion: reduce) {
  .cg-pulse::after, .cg-caret, .cg-talk::before, .cg-orb, .cg-find.is-pending span { animation: none; }
  .cg-scanline { display: none; }
  .cg-url, .cg-stagebox, .cg-shot, .cg-find, .cg-progress i { transition: none; }
  .cg[open], .cg-ready { animation: none; }
}
.cb-platforms { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin-top: 26px; }
.cb-platform { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #1F2937; }
.cb-platform svg { width: 20px; height: 20px; }

/* Customer logos, moving */
.cb-marquee {
  margin: 40px calc(-1 * var(--cb-gutter)) 0; overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cb-marquee-track {
  display: flex; width: max-content;
  animation: cb-marquee 55s linear infinite;
  will-change: transform;
}
.cb-marquee-list { display: flex; align-items: center; gap: 44px; padding: 0 22px; }
.cb-logo-chip {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 120px; height: 40px; padding: 0 10px;
  background: transparent; border: none;
  box-shadow: none; box-sizing: border-box;
}
.cb-logo-chip img { width: auto; max-width: 100%; height: auto; max-height: 28px; object-fit: contain; display: block; }
.cb-logo-chip.is-dark { background: transparent; border: none; }
@keyframes cb-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* The film: a muted video, 16:9 on desktop and 4:5 on phones */
.cb-showcase { padding: 24px var(--cb-gutter) 80px; }
.cb-frame {
  position: relative; max-width: 1152px; margin: 0 auto; padding: 40px 56px; overflow: hidden; border-radius: 16px;
  background:
    radial-gradient(70% 90% at 10% 6%, #F0FFF7 0%, rgba(240, 255, 247, 0) 60%),
    radial-gradient(60% 80% at 94% 100%, #0B4436 0%, rgba(11, 68, 54, 0) 70%),
    linear-gradient(135deg, #CFF5E2 0%, #82D9B0 36%, #1E9A68 70%, #0E3B33 100%);
}
.cb-film {
  position: relative; isolation: isolate; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cb-night); border-radius: 14px; color: #fff;
  box-shadow: 0 40px 80px -30px rgba(2, 24, 18, .75), 0 0 0 1px rgba(255, 255, 255, .06);
}
.cb-film-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: var(--cb-night); }
.cb-play { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--cb-ink); color: #fff; }
.cb-film-play {
  position: absolute; right: 16px; bottom: 16px; z-index: 5; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cb .cb-play-icon { fill: currentColor; stroke: none; }
.cb .cb-pause-icon { display: none; stroke-width: 2.6; }
.is-playing .cb-play-icon { display: none; }
.cb .is-playing .cb-pause-icon { display: block; }

/* Features & Benefits carousel (Fonio style) */
.cb-track-features {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.cb-track-features::-webkit-scrollbar { display: none; }
.cb-track-features:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 4px; border-radius: 14px; }
.cb-card-feat {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 24px; background: #fff; border: 1px solid var(--cb-border); border-radius: 20px;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, .04), 0 2px 4px -2px rgba(15, 23, 42, .02);
  scroll-snap-align: start; transition: transform .3s var(--cb-ease), box-shadow .3s var(--cb-ease), border-color .3s var(--cb-ease);
}
.cb-card-feat:hover {
  transform: translateY(-4px); border-color: var(--cb-border-strong);
  box-shadow: 0 20px 36px -16px rgba(15, 23, 42, .1);
}
.cb-feat-visual {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 180px; padding: 18px 14px; background: #F8FAFC; border: 1px solid #F1F5F9; border-radius: 14px;
}
.cb-feat-mock {
  display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 270px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--cb-border); border-radius: 12px; box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .06); text-align: left;
}
.cb-feat-badge-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cb-feat-badge-row b { font-size: 14px; font-weight: 600; color: var(--cb-ink); }
.cb-feat-badge-row small { font-size: 11px; color: var(--cb-subtle); }
.cb-feat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.cb-feat-badge.is-amber { background: #FEF3C7; color: #92400E; }
.cb-feat-badge.is-indigo { background: #EEF2FF; color: #4338CA; }
.cb-feat-badge.is-green { background: var(--cb-soft); color: #0B5A33; }
.cb-feat-dot { width: 6px; height: 6px; border-radius: 50%; background: #F59E0B; }
.cb-feat-mock b { font-size: 14px; font-weight: 600; color: var(--cb-ink); }
.cb-feat-meta { font-size: 12px; color: var(--cb-muted); }
.cb-feat-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--cb-accent); }
.cb-feat-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 12px; margin-top: 4px;
  background: var(--cb-accent); border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff;
}
.cb-feat-slots { display: flex; gap: 6px; margin: 2px 0; }
.cb-feat-slots span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: #F1F5F9; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--cb-ink); }
.cb-feat-slots span.is-selected { background: var(--cb-ink); color: #fff; font-weight: 600; }
.cb-feat-slots span.is-selected svg { color: #34D399; }
.cb-feat-box { padding: 6px 10px; background: #F8FAFC; border: 1px solid #F1F5F9; border-radius: 6px; font-size: 11px; color: var(--cb-muted); }
.cb-feat-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--cb-subtle); }
.cb-feat-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--cb-accent); animation: cb-pulse 1.8s ease-in-out infinite; }
@keyframes cb-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.cb-feat-copy { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cb .cb-feat-copy h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--cb-ink); text-wrap: balance; }
.cb .cb-feat-copy p { font-size: 14.5px; line-height: 1.6; color: var(--cb-muted); }

/* Activation steps */
.cb-steps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.cb-steps { margin-top: 28px; }
.cb-step:not(:last-child) { border-bottom: 1px solid var(--cb-border); }
.cb .cb-step h3 { font: inherit; letter-spacing: 0; }
.cb-step-head {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 0; border: 0; background: none;
  font-size: 16px; font-weight: 500; color: var(--cb-ink); text-align: left;
}
.cb-step-num { font-weight: 400; color: var(--cb-subtle); font-variant-numeric: tabular-nums; }
.cb-step-head svg { margin-left: auto; color: var(--cb-subtle); transition: transform .2s; }
.cb-step-head[aria-expanded=true] svg { transform: rotate(180deg); }
.cb .cb-step-body p { padding: 0 32px 20px 37px; font-size: 15px; line-height: 1.6; color: var(--cb-muted); }
.cb-frame-steps { display: grid; place-items: center; min-height: 380px; margin: 0; padding: 40px; }
.cb-visual { grid-area: 1 / 1; width: 100%; max-width: 400px; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s var(--cb-ease), transform .35s var(--cb-ease); }
.cb-visual.is-active { opacity: 1; transform: none; }
.cb-panel { overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 30px 60px -25px rgba(2, 24, 18, .6); }
.cb-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--cb-border); }
.cb-panel-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.cb-tag { padding: 3px 8px; background: var(--cb-soft); border-radius: 6px; font-size: 11px; font-weight: 600; color: #0B5A33; }
.cb-progress { height: 4px; margin: 14px 18px 0; overflow: hidden; border-radius: 99px; background: #E9EDF2; }
.cb-progress i { display: block; width: 100%; height: 100%; background: var(--cb-accent); transform-origin: left; }
.cb-visual.is-active .cb-progress i { animation: cb-fill 1.6s var(--cb-ease) both; }
@keyframes cb-fill { from { transform: scaleX(0); } }
.cb-rows { margin: 0; padding: 4px 18px 8px; list-style: none; }
.cb-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F1F3F6; font-size: 13px; }
.cb-rows li:last-child { border-bottom: 0; }
.cb-rows span { color: var(--cb-muted); }
.cb-rows em { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-weight: 500; color: var(--cb-ink); text-align: right; }
.cb-rows .cb-ok { gap: 4px; color: var(--cb-accent); }
.cb-switch { position: relative; display: inline-block; flex: none; width: 30px; height: 18px; vertical-align: middle; border-radius: 99px; background: var(--cb-accent); }
.cb-switch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.cb-panel-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.cb-panel-body b { font-size: 15px; font-weight: 600; }
.cb-panel-body small { margin-bottom: 4px; font-size: 12px; color: var(--cb-muted); }
.cb-mini-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; background: #fff; border: 1px solid var(--cb-border-strong); border-radius: 10px; font-size: 12px; font-weight: 500; color: var(--cb-ink); }
.cb-mini-btn.is-primary { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; }

/* Pricing */
.cb .cb-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 12px 6px 8px; background: #fff;
  border: 1px solid var(--cb-border); border-radius: 10px; font-size: 15px; color: var(--cb-ink);
}
.cb-pill-ico { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cb-accent); color: #fff; }
.cb .cb-pill-ico svg { width: 11px; height: 11px; stroke-width: 2.8; }
.cb-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.cb .cb-pills .cb-pill { margin-top: 0; }
.cb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cb-plan { position: relative; display: flex; flex-direction: column; padding: 32px 24px 24px; background: #fff; border: 1px solid var(--cb-border-strong); border-radius: 12px; }
.cb-plan.is-featured { border-color: var(--cb-accent); box-shadow: 0 16px 40px -18px rgba(0, 122, 61, .35); }
.cb-plan-badge { position: absolute; top: 12px; right: 12px; padding: 4px 9px; background: var(--cb-accent); border-radius: 6px; font-size: 12px; font-weight: 600; color: #fff; }
.cb .cb-plan h3 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; color: var(--cb-ink); }
.cb .cb-plan-desc { min-height: 48px; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--cb-muted); }
.cb .cb-plan-price { margin-top: 18px; font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--cb-ink); }
.cb .cb-plan-price small { margin-right: 2px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--cb-muted); }
.cb .cb-plan-note { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--cb-muted); }
.cb-plan .cb-btn { margin-top: 20px; }
.cb-plan-sep { margin: 24px 0 20px; border: 0; border-top: 1px solid var(--cb-border); }
.cb .cb-plan-label { margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--cb-ink); }
.cb-list { display: grid; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.cb-list:last-child { margin-bottom: 0; }
.cb-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--cb-text); }
.cb-list li.is-off { color: var(--cb-subtle); }
.cb .cb-list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--cb-accent); stroke-width: 2.2; }
.cb .cb-list li.is-off svg { color: #A0AAB8; }
.cb-code { padding: 1px 6px; background: #F1F3F6; border-radius: 5px; font-size: 13px; font-weight: 600; color: var(--cb-ink); }

/* Integrations */
.cb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 640px; margin: 0 auto; padding: 0; list-style: none; }
.cb-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 130 / 80; padding: 16px 12px;
  background: #fff; border: 1px solid var(--cb-border); border-radius: 12px; text-align: center; transition: border-color .15s, box-shadow .15s;
}
.cb-tile:hover { border-color: var(--cb-border-strong); box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .35); }
.cb-tile > span:last-child { font-size: 14px; font-weight: 600; color: var(--cb-ink); }
.cb-brand-svg { width: 36px; height: 36px; }
.cb-tile-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cb-ink); color: #fff; }
.cb .cb-tile-ico svg { width: 18px; height: 18px; }
.cb-tile-ico-site { background: var(--cb-accent); }

/* Why businesses trust Carem, in our own words */
.cb-section-wide { padding-left: 0; padding-right: 0; }
.cb-section-wide .cb-center { padding: 0 var(--cb-gutter); }
.cb-wide { max-width: calc(1376px + 2 * var(--cb-gutter)); margin: 0 auto; padding: 0 var(--cb-gutter); }
.cb-track-quotes { grid-auto-columns: calc((100% - 32px) / 3); }
.cb .cb-pillola {
  position: relative; margin: 0; padding: 28px 26px;
  background: #fff; border: 1px solid var(--cb-border); border-radius: 16px;
  box-shadow: 0 4px 14px -4px rgba(15, 23, 42, .04), 0 2px 4px -2px rgba(15, 23, 42, .02);
  font-size: 15px; line-height: 1.6; color: var(--cb-muted); scroll-snap-align: start;
  transition: transform .25s var(--cb-ease), box-shadow .25s var(--cb-ease), border-color .25s var(--cb-ease);
}
.cb .cb-pillola::before {
  content: ''; display: block; width: 24px; height: 3px; border-radius: 2px;
  background: var(--cb-accent); margin-bottom: 16px;
}
.cb .cb-pillola:hover {
  transform: translateY(-2px);
  border-color: var(--cb-border-strong);
  box-shadow: 0 12px 24px -6px rgba(15, 23, 42, .08);
}
.cb-pillola b { display: block; margin-bottom: 8px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; color: var(--cb-ink); }

/* Carousels */
.cb-carousel { position: relative; }
.cb-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; margin: -2px; padding: 2px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.cb-track::-webkit-scrollbar { display: none; }
.cb-track:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 4px; border-radius: 14px; }
.cb-carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.cb-arrow {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cb-border-strong);
  border-radius: 50%; background: #fff; color: var(--cb-ink); transition: background-color .15s, opacity .15s;
}
.cb-arrow:hover:not(:disabled) { background: var(--cb-surface); }
.cb-arrow:disabled { opacity: .4; cursor: default; }

/* FAQ */
.cb-faq { max-width: 640px; margin: 0 auto; }
.cb-faq-item:not(:last-of-type) { border-bottom: 1px solid var(--cb-border); }
.cb-faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 0; cursor: pointer;
  list-style: none; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--cb-ink);
}
.cb-faq-item summary::-webkit-details-marker { display: none; }
.cb-faq-item summary:hover span { text-decoration: underline; text-underline-offset: 4px; }
.cb-faq-item summary svg { margin-top: 4px; color: var(--cb-subtle); transition: transform .2s; }
.cb-faq-item[open] summary svg { transform: rotate(180deg); }
.cb .cb-faq-item p { padding: 0 32px 18px 0; font-size: 15px; line-height: 1.6; color: var(--cb-muted); }

/* Closing call to action */
.cb-cta {
  position: relative; margin: 0 8px; padding: 88px var(--cb-gutter) 104px; overflow: hidden; border-radius: 0 0 28px 28px; text-align: center;
  background: radial-gradient(130% 100% at 50% 118%, #00A653 0%, #3DC481 22%, #9EE3BF 42%, #DDF6E9 58%, rgba(255, 255, 255, 0) 74%), #fff;
}
.cb-cta-inner { max-width: 760px; margin: 0 auto; }
.cb-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* The button that stays in the corner */
.cb-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: 50; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--cb-accent); color: #fff; box-shadow: 0 14px 30px -10px rgba(0, 122, 61, .7);
  transition: transform .2s var(--cb-ease), background-color .15s, opacity .2s, visibility .2s;
}
.cb-launcher:hover { background: var(--cb-accent-hover); transform: translateY(-2px); }
.cb-launcher.is-away { opacity: 0; visibility: hidden; transform: translateY(12px); }
.cb-launcher svg { width: 24px; height: 24px; }

@media (max-width: 1080px) {
  .cb-nav, .cb-actions-demo { display: none; }
  .cb-burger { display: inline-flex; }
  .cb-header.is-open .cb-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100dvh - 72px); padding: 8px var(--cb-gutter) 20px; overflow-y: auto; background: #fff;
    border-bottom: 1px solid var(--cb-border); box-shadow: 0 24px 40px -24px rgba(15, 23, 42, .25);
  }
  .cb-header.is-open .cb-nav > a:not(.cb-btn), .cb-header.is-open .cb-menu-trigger { width: 100%; height: 48px; padding: 0 4px; border-radius: 0; font-size: 16px; }
  .cb-header.is-open .cb-nav > a:not(.cb-btn):hover, .cb-header.is-open .cb-menu-trigger:hover, .cb-header.is-open .cb-menu-trigger[aria-expanded=true] { background: none; color: var(--cb-accent); }
  .cb-dropdown { position: static; min-width: 0; padding: 0 0 8px 12px; border: 0; box-shadow: none; }
  .cb-nav-demo { display: inline-flex; margin-top: 14px; }
}
@media (max-width: 960px) {
  .cb-steps-grid { grid-template-columns: 1fr; gap: 40px; }
  .cb-plans { grid-template-columns: minmax(0, 520px); justify-content: center; }
  .cb-track, .cb-track-quotes, .cb-track-features { grid-auto-columns: calc((100% - 16px) / 2); }
  .cb-frame { padding: 28px; }
}
@media (max-width: 640px) {
  .cb-header-inner { gap: 10px; height: 64px; }
  .cb-brand-logo img { width: 104px; }
  .cb-brand .cb-brand-payoff { margin-top: -8px; font-size: 10px; }
  .cb-header .cb-btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
  .cb-header.is-open .cb-nav { max-height: calc(100dvh - 64px); }
  .cb-section { padding-top: 56px; padding-bottom: 56px; }
  .cb .cb-h2, .cb .cb-h2-faq { font-size: 28px; line-height: 1.2; }
  .cb .cb-h2-xl { font-size: 36px; }
  .cb-head { margin-bottom: 32px; }
  .cb-hero { min-height: 0; padding-top: 20px; padding-bottom: 24px; }
  .cb .cb-badge { font-size: 13px; padding: 6px 10px; }
  .cb .cb-hero-title { font-size: 30px; margin-top: 14px; }
  .cb-orb-hero { --orb: 140px; margin: 18px 0 18px; }
  .cb-call { width: 100%; justify-content: center; height: 50px; font-size: 16px; }
  .cb-voice-controls { width: 100%; }
  .cb-marquee { margin-top: 32px; }
  .cb-marquee-list { gap: 24px; padding: 0 10px; }
  .cb-logo-chip { width: 96px; height: 34px; padding: 0 4px; }
  .cb-logo-chip img { max-height: 22px; }
  .cb-showcase { padding-bottom: 56px; }
  .cb-frame { padding: 12px; border-radius: 14px; }
  .cb-film { aspect-ratio: 4 / 5; border-radius: 12px; }
  .cb-card-feat { min-height: 0; padding: 20px 18px; border-radius: 18px; }
  .cb .cb-feat-copy h3 { font-size: 18px; }
  .cb-frame-steps { min-height: 330px; padding: 24px 16px; }
  .cb .cb-step-body p { padding-right: 0; }
  .cb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cb-track, .cb-track-quotes, .cb-track-features { grid-auto-columns: 86%; }
  .cb .cb-pillola { padding: 22px 20px; font-size: 14px; }
  .cb-pillola b { font-size: 17px; }
  .cb-cta { margin: 0 6px; padding: 64px var(--cb-gutter) 84px; }
  .cb-launcher { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
@media (max-width: 370px) {
  .cb-brand-logo img { width: 96px; }
  .cb-header .cb-btn-sm { padding: 0 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-orb, .cb-orb *, .cb-feat-pulse { animation: none !important; }
  .cb-track { scroll-behavior: auto; }
  .cb-visual, .cb-launcher, .cb-call, .cb-card-feat { transition: none; }
}

/* Homepage: the same demo in the hero's right column, the customer logos under both columns */
.home-demo { position: relative; }
.home-demo-trial, .home-demo-logos { min-width: 0; background: transparent; }
.home-demo-trial { position: relative; display: flex; justify-content: center; }
/* Made in Italy above the orb, on the column's top right: it takes no height from the field below */
.home-demo-badges { position: absolute; top: 0; right: 0; margin: 0; z-index: 1; }
.home-demo-trial .cb-voice { max-width: 560px; }
.home-demo-trial .cb-orb-hero { --orb: 190px; margin: 0 0 30px; }
.home-demo-logos { grid-column: 1 / -1; }
.home-demo-logos .cb-marquee { margin: 4px 0 0; }
@media (max-width: 960px) {
  .home-demo-trial { margin-top: 36px; }
  .home-demo-trial .cb-orb-hero { --orb: 120px; margin: 0 0 18px; }
  .home-demo-logos .cb-marquee { margin-top: 36px; }
}
@media (max-width: 640px) {
  /* On a phone the address field must be on the first screen */
  .home-demo .hero-note { display: none; }
  .home-demo-trial { margin-top: 22px; }
  .home-demo-trial .cb-orb-hero { --orb: 72px; margin: 0 0 12px; }
}

/* Homepage: the text chat in a section of its own, the same widget as /prova-carem/ */
.home-chat { border-top: 1px solid var(--line, #E3E7EE); }
.home-chat h2 { margin-top: 12px; }
.home-chat .home-chat-note { margin-top: 18px; max-width: 46ch; font-size: 13px; line-height: 1.6; color: #64748B; }
.home-chat .home-chat-note a { color: inherit; text-decoration: underline; }