/* =============================================================================
   AI CX OS · Landing V2 polish layer
   Loaded after app.css on v2.html only. Overrides, no redefinitions.
   Interaction rules: controls change colour, border and shadow, never geometry;
   media inside clipped figures may drift slowly. Everything respects
   prefers-reduced-motion.
   ============================================================================= */

/* ---- cards: lift with light, not movement ---------------------------------- */
.card {
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover {
  border-color: rgba(79, 70, 229, 0.28);
  box-shadow:
    0 1px 2px rgba(18, 20, 43, 0.04),
    0 24px 48px -24px rgba(79, 70, 229, 0.18);
}
.card .bg-brand-wash { transition: background-color 260ms ease; }
.card:hover .bg-brand-wash { background-color: rgba(79, 70, 229, 0.16); }

/* ---- demo module tabs: animated accent spine ------------------------------- */
#demoModules > button {
  position: relative;
  overflow: hidden;
  transition: border-color 240ms ease, background-color 240ms ease;
}
#demoModules > button::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#demoModules > button:hover { border-color: rgba(79, 70, 229, 0.3); }
#demoModules > button:hover::before { opacity: 0.45; transform: scaleY(0.7); }
#demoModules > button[aria-selected="true"]::before { opacity: 1; transform: scaleY(1); }

/* ---- chips and channel pills ------------------------------------------------ */
.chip {
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.chip:not(.chip-on):hover {
  border-color: rgba(79, 70, 229, 0.4);
  color: var(--s-ink);
  background-color: rgba(79, 70, 229, 0.06);
}

/* ---- primary button: glow deepens, arrow leans ----------------------------- */
.btn-primary { transition: background-color 220ms ease, box-shadow 320ms ease; }
.btn-primary:hover { box-shadow: 0 12px 40px rgba(79, 70, 229, 0.38); }
.btn svg { transition: translate 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover svg { translate: 3px 0; }
html[dir="rtl"] .btn:hover svg { translate: -3px 0; }

/* ---- editorial media: slow drift inside clipped frames ---------------------- */
figure.v2-media { overflow: hidden; }
figure.v2-media img {
  transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
figure.v2-media:hover img { transform: scale(1.035); }

/* ---- section washes introduced in V2 ---------------------------------------- */
.v2-wash { position: absolute; inset: 0; z-index: -10; }
.v2-wash img { height: 100%; width: 100%; object-fit: cover; }

/* ---- governance / checklist rows -------------------------------------------- */
#trust li, .v2-row { transition: background-color 220ms ease; border-radius: 12px; }

/* ---- steps: number chip warms on hover -------------------------------------- */
.step-card { transition: border-color 240ms ease, box-shadow 300ms ease; }
.step-card:hover {
  border-color: rgba(79, 70, 229, 0.26);
  box-shadow: 0 20px 44px -26px rgba(18, 20, 43, 0.22);
}

/* ---- reduced motion: everything settles instantly --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card, .chip, .btn svg, figure.v2-media img,
  #demoModules > button, #demoModules > button::before, .step-card {
    transition: none !important;
  }
  figure.v2-media:hover img { transform: none; }
}

/* ============================================================================
   Persistent "Book a Demo" ticker - desktop/tablet. The mobile sticky bar
   already owns <sm. Slides in after the hero, retires while the booking
   section is on screen.
   ============================================================================ */
#demoTicker {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 22px 8px 16px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4f46e5, #6d5ae8);
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.55), 0 24px 56px -18px rgba(30, 27, 75, 0.45);
  transform: translateY(calc(100% + 30px));
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease, box-shadow 240ms ease;
}
html[dir="rtl"] #demoTicker { padding: 8px 16px 8px 22px; }
#demoTicker:hover { box-shadow: 0 12px 28px -10px rgba(79, 70, 229, 0.7), 0 28px 64px -18px rgba(30, 27, 75, 0.55); }
#demoTicker .dt-dot { position: relative; display: inline-flex; height: 8px; width: 8px; flex: none; }
#demoTicker .dt-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #fff; opacity: 0.75;
  animation: dtPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
#demoTicker .dt-dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #fff; }
@keyframes dtPing { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@media (min-width: 1024px) { #demoTicker { display: inline-flex; } }
#demoTicker.dt-in { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #demoTicker { transition: opacity 200ms ease; transform: none; }
  #demoTicker .dt-dot::before { animation: none; }
}

/* ============================================================================
   Exit-intent popup - once per visit, every page. Desktop pointer only.
   ============================================================================ */
#exitPop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 12, 26, 0.62);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
#exitPop.ep-in { opacity: 1; pointer-events: auto; }
#exitPop .ep-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 40px 120px -30px rgba(10, 12, 26, 0.6);
  transform: translateY(14px) scale(0.985);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
#exitPop.ep-in .ep-card { transform: translateY(0) scale(1); }
#exitPop .ep-head {
  padding: 28px 28px 6px;
  text-align: center;
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(129, 140, 248, 0.14), transparent 55%),
    linear-gradient(180deg, #f6f6fe, #ffffff);
}
#exitPop .ep-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.1);
  color: #4338ca;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#exitPop .ep-badge .dt-dot { height: 7px; width: 7px; position: relative; display: inline-flex; }
#exitPop .ep-badge .dt-dot::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #4f46e5; opacity: .6; animation: dtPing 1.8s cubic-bezier(0,0,.2,1) infinite; }
#exitPop .ep-badge .dt-dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #4f46e5; }
#exitPop h2 { margin-top: 14px; font-size: clamp(21px, 3vw, 26px); font-weight: 650; line-height: 1.25; color: #12142b; }
#exitPop .ep-sub { margin: 10px auto 0; max-width: 44ch; font-size: 14.5px; line-height: 1.6; color: #4b5169; }
#exitPop .ep-cal { min-height: 420px; }
#exitPop .ep-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: grid;
  place-items: center;
  height: 40px;
  width: 40px;
  border-radius: 9999px;
  border: 1px solid rgba(18, 20, 43, 0.1);
  background: #fff;
  color: #4b5169;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
#exitPop .ep-close:hover { color: #12142b; border-color: rgba(79, 70, 229, 0.4); box-shadow: 0 6px 16px -8px rgba(79, 70, 229, 0.4); }
@media (prefers-reduced-motion: reduce) {
  #exitPop, #exitPop .ep-card { transition: none; }
  #exitPop .ep-badge .dt-dot::before { animation: none; }
}

/* ============================================================================
   contact cards + legal article typography
   ============================================================================ */
.cu-card {
  display: block;
  transition: border-color 240ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cu-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 24px 52px -24px rgba(79, 70, 229, 0.35);
}
.cu-ic {
  display: grid;
  place-items: center;
  height: 46px;
  width: 46px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c, #4f46e5) 10%, #fff);
  color: var(--c, #4f46e5);
}
.cu-ic svg { height: 21px; width: 21px; }
@media (prefers-reduced-motion: reduce) { .cu-card:hover { transform: none; } }

.legal { font-size: 15px; line-height: 1.75; color: var(--color-ink-soft, #4b5169); }
.legal h2 {
  margin-top: 2.25rem;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--color-ink, #12142b);
}
.legal h3 { margin-top: 1.25rem; font-size: 15.5px; font-weight: 600; color: var(--color-ink, #12142b); }
.legal p { margin-top: 0.875rem; }
.legal ul { margin-top: 0.875rem; padding-inline-start: 1.25rem; list-style: disc; }
.legal li { margin-top: 0.5rem; padding-inline-start: 0.25rem; }
.legal a { color: var(--color-brand, #4f46e5); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--color-brand-deep, #3730a3); }
.legal strong { color: var(--color-ink, #12142b); font-weight: 600; }
.legal .legal-note { margin-top: 2rem; font-size: 13px; color: var(--color-ink-muted, #6b7280); }

/* contact page: QR tiles + slim method cards */
.cu-qr {
  display: grid;
  place-items: center;
  height: 190px;
  width: 190px;
  border-radius: 20px;
  border: 1px solid var(--color-hairline, #e8e9f1);
  background: #fff;
  box-shadow: 0 10px 28px -16px rgba(16, 18, 35, 0.18);
}
.cu-qr img { height: 158px; width: 158px; }
.cu-slim {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 240ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cu-slim:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 22px 48px -24px rgba(79, 70, 229, 0.35);
}
@media (prefers-reduced-motion: reduce) { .cu-slim:hover { transform: none; } }

/* ============================================================================
   team page: founder photo treatment + function cards
   ============================================================================ */
.team-photo { position: relative; isolation: isolate; padding: 24px 12px 0; }
.team-photo img { position: relative; display: block; width: 100%; height: auto; }
.team-blob {
  position: absolute;
  inset: 8% 2% 0 6%;
  z-index: -2;
  background: linear-gradient(150deg, #6366f1 0%, #4f46e5 55%, #3730a3 100%);
  border-radius: 42% 58% 54% 46% / 44% 42% 58% 56%;
  box-shadow: 0 40px 90px -40px rgba(79, 70, 229, 0.55);
}
.team-ring {
  position: absolute;
  inset: 3% -3% -5% 1%;
  z-index: -1;
  border: 1.5px dashed rgba(79, 70, 229, 0.28);
  border-radius: 46% 54% 50% 50% / 48% 46% 54% 52%;
}
.team-photo::after {
  content: "";
  position: absolute;
  inset-inline: 6% 2%;
  bottom: 0;
  height: 26%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(55, 48, 163, 0) 0%, rgba(55, 48, 163, 0.16) 100%);
  border-radius: 0 0 44% 50% / 0 0 58% 56%;
}
.team-fn {
  transition: border-color 240ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.team-fn:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 24px 52px -24px rgba(79, 70, 229, 0.3);
}
.team-fn-ic {
  display: grid;
  place-items: center;
  height: 46px;
  width: 46px;
  border-radius: 14px;
  background: var(--color-brand-wash, #f2f2fe);
  color: var(--color-brand, #4f46e5);
}
.team-fn-ic svg { height: 21px; width: 21px; }
@media (prefers-reduced-motion: reduce) { .team-fn:hover { transform: none; } }

/* ============================================================================
   footer social icons: white on the dark footer, equal size and spacing
   ============================================================================ */
.foot-social { display: flex; align-items: center; gap: 10px; }
.foot-social a {
  display: grid;
  place-items: center;
  height: 38px;
  width: 38px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #c9cde3;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.foot-social a:hover { color: #fff; border-color: rgba(129, 140, 248, 0.6); background: rgba(79, 70, 229, 0.25); transform: translateY(-2px); }
.foot-social svg { height: 16px; width: 16px; }
@media (prefers-reduced-motion: reduce) { .foot-social a:hover { transform: none; } }

/* ============================================================================
   WhatsApp float — same size/inset as agent-george Chat/Call FABs (56×56, right 24).
   Stack sits above the dual FABs (bottom 24 + 2×56 + 10 gap ≈ 146px).
   !important beats leftover ElevenLabs widget CSS on industry pages.
   ============================================================================ */
#waFloat {
  position: fixed;
  right: 24px;
  bottom: max(158px, calc(env(safe-area-inset-bottom) + 146px)) !important;
  z-index: 2147483000;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, #2bd067, #1faf55);
  box-shadow: 0 10px 24px -10px rgba(31, 175, 85, 0.65), 0 24px 56px -18px rgba(16, 60, 34, 0.4);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, box-shadow 200ms ease;
}
#waFloat:hover { transform: scale(1.05); box-shadow: 0 12px 28px -10px rgba(31, 175, 85, 0.8), 0 28px 64px -18px rgba(16, 60, 34, 0.5); }
#waFloat svg { width: 24px; height: 24px; }

/* ============================================================================
   WhatsApp FOMO nudge - slides in from the inline-start edge once per session.
   ============================================================================ */
#waNudge {
  position: fixed;
  inset-inline-start: 16px;
  inset-block-end: max(96px, calc(env(safe-area-inset-bottom) + 80px));
  z-index: 58;
  width: min(300px, calc(100vw - 110px));
  padding: 14px 16px 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(31, 175, 85, 0.35);
  box-shadow: 0 18px 44px -18px rgba(16, 18, 35, 0.35), 0 6px 18px -8px rgba(31, 175, 85, 0.25);
  transform: translateX(calc(-100% - 24px));
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}
html[dir="rtl"] #waNudge { transform: translateX(calc(100% + 24px)); }
#waNudge.wn-in { transform: translateX(0); opacity: 1; }
#waNudge .wn-line {
  margin: 0 22px 10px 0;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
  color: #14162e;
}
html[dir="rtl"] #waNudge .wn-line { margin: 0 0 10px 22px; }
#waNudge .wn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(140deg, #2bd067, #1faf55);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
#waNudge .wn-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(31, 175, 85, 0.7); }
#waNudge .wn-close {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #8b90ad;
  background: transparent;
  border: none;
  cursor: pointer;
}
#waNudge .wn-close:hover { background: #eef0fb; color: #14162e; }
@media (max-width: 639px) {
  #waNudge { inset-block-end: max(160px, calc(env(safe-area-inset-bottom) + 148px)); }
}
@media (prefers-reduced-motion: reduce) {
  #waNudge { transition: opacity 200ms ease; transform: none; }
  html[dir="rtl"] #waNudge { transform: none; }
}

/* ============================================================================
   Calendly inline embed - phones need more height than the fixed 700px inline
   style or the widget double-scrolls at the booking step.
   ============================================================================ */
@media (max-width: 639px) {
  #exitPop .ep-cal { min-height: 480px; }
}

/* ============================================================================
   Promo ticker bar - fixed above the header on the three funnel pages.
   Header sits at top-10 (40px) on those pages.
   ============================================================================ */
#promoBar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 14px;
  background: linear-gradient(100deg, #312e81, #4f46e5 45%, #6d5ae8);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow: hidden;
  white-space: nowrap;
}
#promoBar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 48%, transparent 62%);
  transform: translateX(-100%);
  animation: pbShine 5.5s ease-in-out infinite;
  pointer-events: none;
}
html[dir="rtl"] #promoBar::after { animation-name: pbShineRtl; }
@keyframes pbShine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
@keyframes pbShineRtl { 0%, 55% { transform: translateX(100%); } 85%, 100% { transform: translateX(-100%); } }
#promoBar .pb-dot { position: relative; display: inline-flex; height: 8px; width: 8px; flex: none; }
#promoBar .pb-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #7ef0b0; opacity: 0.8;
  animation: dtPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
#promoBar .pb-dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #7ef0b0; }
#promoBar .pb-text { overflow: hidden; text-overflow: ellipsis; }
#promoBar .pb-text-sm { display: none; overflow: hidden; text-overflow: ellipsis; }
#promoBar .pb-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 14px;
  border-radius: 9999px;
  background: #fff;
  color: #3730a3;
  font-size: 12.5px;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
#promoBar .pb-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4); }
@media (max-width: 767px) {
  #promoBar { font-size: 12px; gap: 8px; }
  #promoBar .pb-text { display: none; }
  #promoBar .pb-text-sm { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  #promoBar::after, #promoBar .pb-dot::before { animation: none; }
}

/* ============================================================================
   Offer banner + 24h countdown above every Calendly embed.
   ============================================================================ */
.offer-banner {
  margin: 10px 10px 12px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(79, 70, 229, 0.25);
  background: linear-gradient(120deg, rgba(79, 70, 229, 0.08), rgba(109, 90, 232, 0.05));
}
.offer-banner { text-align: center; }
.offer-banner .ob-line { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: #14162e; }
.offer-banner .ob-line b { color: #4f46e5; }
.offer-banner .ob-timer {
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: #dc2626;
}
.offer-banner .ob-ic { width: 16px; height: 16px; color: #dc2626; flex: none; }
.offer-banner .ob-digits {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 800;
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.09);
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 8px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   Hero offer line - concise version of the demo offer under the hero subtext.
   ============================================================================ */
.hero-offer {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(79, 70, 229, 0.28);
  background: rgba(79, 70, 229, 0.07);
  color: #3730a3;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}
.hero-offer::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  flex: none;
}
.hero-offer-center { margin-inline: auto; display: flex; max-width: fit-content; text-align: center; }
@media (max-width: 640px) { .hero-offer { font-size: 12.5px; padding: 7px 13px; } }


/* ============================================================================
   Clickable hero + offer elements (Clarity dead-click recovery)
   ============================================================================ */
.hero-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a#promoBar { text-decoration: none; cursor: pointer; }
a.offer-banner { display: block; text-decoration: none; cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease; }
a.offer-banner:hover { border-color: rgba(79, 70, 229, 0.45); box-shadow: 0 10px 26px -16px rgba(79, 70, 229, 0.45); }
a.hero-offer { text-decoration: none; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
a.hero-offer:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(79, 70, 229, 0.45); }

/* land booking jumps ON the calendar, clear of the fixed promo bar + header */
.calendly-inline-widget { scroll-margin-top: 118px; }

/* ============================================================================
   Video CTA overlay - shows on pause/end of the hero VSLs
   ============================================================================ */
.vsl-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(5, 6, 12, 0.12), rgba(5, 6, 12, 0.55));
  pointer-events: none;
  z-index: 5;
}
.vsl-cta[hidden] { display: none; }
.vsl-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  margin-top: -36px;
  padding: 0 16px;
}
.vsl-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(140deg, #2bd067, #1faf55);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.vsl-wa-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(31, 175, 85, 0.7); }

/* header links never wrap internally */
header nav a { white-space: nowrap; }

/* ---- mobile live-preview accordion (phones only) -----------------------------
   The transcript card docks under the selected use-case tab; the move is done by
   mobileTabPanel() in app.js. It bleeds across the console card's padding so the
   chat keeps its full width. Tablet and up never get these classes. */
@media (max-width: 767px) {
  .lp-anchor-off { overflow-anchor: none; }
  .lp-docked {
    margin-block: 0.5rem 1rem !important;
    margin-inline: calc(-1 * var(--lp-bleed, 1.5rem));
    border-radius: 0 !important;
    border-inline-width: 0 !important;
    box-shadow: none !important;
  }
  .lp-docked-in { animation: lp-dock-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  /* docked card is trimmed: no "Live transcript" pill (.lp-live), no channel icon
     strip, no in-thread CTA. The context line, "Scripted scenario" and the
     footer CTA stay. New pages: put .lp-live on the pill to get the same trim. */
  .lp-docked .lp-live,
  .lp-docked .v4-channels,
  .lp-docked .lp-flow-cta { display: none !important; }
}
@keyframes lp-dock-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-docked-in { animation: none; } }