/**
 * /latest-zoho-updates/ page-specific overlay shipped from the
 * 2026-05-28 implementation brief. Scoped via `.page-id-59755` so
 * nothing leaks into other pages. Enqueued by zoho-updates-loader.php
 * only on this URL.
 */

/* ---------- Design tokens (locally-scoped CSS vars) ---------- */
.page-id-59755 {
  --cx-orange:        #ff6b35;
  --cx-orange-soft:   rgba(255, 107, 53, 0.12);
  --cx-ink:           #0e1726;
  --cx-ink-2:         #2d3748;
  --cx-muted:         #6b7280;
  --cx-peach:         #fff7f2;
  --cx-border:        #f3d6c8;
}

/* Hero right column: grow the subscribe form / consult card vertically
   so its bottom edge extends into the "Teams we've shipped Zoho systems
   for" logo strip below. Adds ~80px of bottom padding to the widget
   wrapper and sets a min-height on the consult card so both variants
   feel substantial. Desktop only — on tablet/mobile the right col
   stacks below the left so extra height would be awkward. */
/* "Get Zoho updates in your inbox" subscribe form widget — match the
   consult card's WIDTH (480px). Height is the form's natural ~660px
   so the heading, sub, name, email, Subscribe button, perks, and
   footer all stay visible. The form overflows past the right
   column's 460px cap and paints over the marquee below
   (z-index: 30). The Zoho embed has an inline `max-width: 580px` on
   its `.quick_form_4_css` inner card so the !important override is
   required to actually cap the form width. */
@media (min-width: 1024px) {
  .page-id-59755 .elementor-element.elementor-element-fd2226c,
  .page-id-59755 .elementor-element.elementor-element-fd2226c > .elementor-widget-container {
    max-width: 480px;
  }
  .page-id-59755 .elementor-element.elementor-element-fd2226c .quick_form_4_css {
    max-width: 480px !important;
    min-height: 450px !important;
  }
}
/* Outer sizing + layering for the subscribe wrapper — bg/border/
   padding intentionally NOT set, so the Zoho embed's own dark card
   chrome stays untouched. Just box-model + z-index so the marquee
   logos slide behind, matching the consult card behavior. */
.cx-hero-subscribe {
  max-width: 480px;
  /* Center within the parent column to match .cx-hero-consult — was
     previously margin:0 which left-aligned. */
  margin: 0 auto;
  position: relative;
  /* z-index 100 (was 30) lifts the Zoho subscribe form above the
     fixed audit widget (z-index 90) in the right gutter on ≥1280px
     viewports, so the Subscribe button hit-test wins. Without this,
     the audit widget was eating clicks on the right portion of the
     button (Enter still worked because keyboard submit bypasses
     pointer hit-testing). */
  z-index: 100;
}

/* ---------- 1. Hero consult card (UTM-aware swap target) ----------
   Bigger, taller, more presence. The card's larger footprint extends
   down into the "Teams we've shipped Zoho systems for" logo strip
   below the hero, and z-index 30 (card) vs z-index 1 (marquee section)
   means logos slide behind the card as they scroll leftward. No
   margin-top hacks on the marquee — purely a layering trick. */
/* Mobile + tablet: the hero's right column (0ff68cf) has Elementor-
   set `justify-content: flex-end` on its widget-wrap (configured for
   desktop-side alignment but inherited on smaller viewports). That
   pins the card flush against the right edge of the column. Center
   it instead so the consult / subscribe card sits in the middle of
   the stacked layout. */
@media (max-width: 1024px) {
  .page-id-59755 .elementor-element.elementor-element-0ff68cf > .elementor-widget-wrap {
    justify-content: center !important;
  }
}

.cx-hero-consult {
  background: var(--cx-ink);
  color: #fff;
  border-radius: 20px;
  padding: 44px 38px;
  max-width: 480px;
  min-height: 450px;
  box-shadow: 0 32px 70px rgba(14, 23, 38, 0.32);
  position: relative;
  /* z-index 100 ensures the card visually + hit-test sits above the
     fixed 33d07ce audit widget (z-index 90) in the right gutter on
     ≥1280px viewports. Belt-and-suspenders with the audit widget's
     pointer-events:none in site-wide.css. */
  z-index: 100;
  /* Center the card within its column (right-col on desktop, full
     width on mobile). Was previously margin:0 which left-aligned
     it and left empty space on the right of the column. */
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.cx-hero-consult__eyebrow {
  display: inline-block;
  background: rgba(255, 107, 53, 0.18);
  color: var(--cx-orange);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.cx-hero-consult__title,
h3.cx-hero-consult__title,
body.page .cx-hero-consult h3.cx-hero-consult__title {
  font-size: 28px !important;
  line-height: 1.22 !important;
  margin: 0 0 22px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.cx-hero-consult__list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cx-hero-consult__list li {
  font-size: 15px;
  line-height: 1.5;
  color: #e2e8f1;
  padding: 0 0 0 30px;
  position: relative;
  margin: 0;
}
.cx-hero-consult__list li::before {
  content: "✓";
  color: var(--cx-orange);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 16px;
}
/* Full-width, full-height clickable target — display:block + width:100%
   means the whole orange button is a hit area, not just the text.
   Position + z-index lift the button above any sibling/overlay
   (Elementor gradients, the consult card's own pseudo-elements,
   marquee z-index conflicts) so the ENTIRE orange box stays clickable
   not just whichever portion sits visually on top. */
.cx-hero-consult .cx-btn--primary {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  background: var(--cx-orange);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.cx-hero-consult .cx-btn--primary:hover {
  /* keep the transform but ensure the hover state doesn't shift the
     hit area outside the element's box */
  transform: translateY(-1px);
}
.cx-hero-consult__small {
  font-size: 13px;
  color: #8a93a3;
  margin-top: 18px;
  text-align: center;
}

/* Marquee strip — stays in natural document flow below the hero;
   z-index:1 puts it behind the card so logos slide under as they
   pan left. Grayscale + opacity dim them to match the "trusted by"
   visual weight while keeping the hero card the focal point. */
section.elementor-element-35230b7 {
  position: relative;
  z-index: 1;
}
section.elementor-element-35230b7 img {
  filter: grayscale(1) !important;
  opacity: 0.55 !important;
  transition: filter 0.25s ease, opacity 0.25s ease !important;
}
section.elementor-element-35230b7 img:hover {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}

/* Elementor's widget/element wrappers default to overflow:hidden.
   Force overflow visible around BOTH hero variants so the taller
   card content can paint past its container's box.
   Critical: we do NOT set `height: auto !important` here — that
   would auto-grow the column → grow the hero section → push the
   marquee section down off-screen. We want the hero box to keep
   its layout-defined height while the card visually spills over. */
.elementor-widget-container:has(.cx-hero-consult),
.elementor-widget-container:has(.cx-hero-subscribe),
.elementor-widget:has(.cx-hero-consult),
.elementor-widget:has(.cx-hero-subscribe),
.elementor-element:has(.cx-hero-consult),
.elementor-element:has(.cx-hero-subscribe) {
  overflow: visible !important;
}

/* Cap the hero's right column at 460px so its content can't expand
   the section. The taller boxes (consult ~660px, subscribe ~660px)
   overflow past the column's bottom edge and paint into the
   marquee strip below — z-index: 30 on the cards vs z-index: 1 on
   the marquee means logos slide behind. Desktop only. */
@media (min-width: 1024px) {
  .page-id-59755 .elementor-element.elementor-element-0ff68cf {
    max-height: 460px;
    overflow: visible !important;
  }
}

@media (max-width: 1024px) {
  .cx-hero-consult { padding: 30px 24px; max-width: 100%; min-height: auto; }
  .cx-hero-consult__title,
  body.page .cx-hero-consult h3.cx-hero-consult__title { font-size: 24px !important; }
}
@media (max-width: 640px) {
  .cx-hero-consult { padding: 24px 20px; border-radius: 14px; }
  .cx-hero-consult__title,
  body.page .cx-hero-consult h3.cx-hero-consult__title { font-size: 21px !important; }
  .cx-hero-consult__list li { font-size: 14px; }
}

/* ---------- 2. Hero meta line (Updated · X min read · N updates) ---------- */
.page-id-59755 .cx-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--cx-muted);
  margin: 6px 0 4px;
  flex-wrap: wrap;
}
.page-id-59755 .cx-hero-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-id-59755 .cx-hero-meta__item svg {
  stroke: var(--cx-orange);
  flex-shrink: 0;
}
.page-id-59755 .cx-hero-meta__sep { color: #cbd5e0; }
.page-id-59755 .cx-hero-meta__badge {
  background: var(--cx-orange-soft);
  color: #c2410c;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .page-id-59755 .cx-hero-meta { font-size: 12px; gap: 8px; }
  .page-id-59755 .cx-hero-meta__sep { display: none; }
}

/* ---------- 3. Jump-to chip row ---------- */
.page-id-59755 .cx-jump-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 14px 0 6px;
}
.page-id-59755 .cx-jump-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cx-muted);
  margin-right: 4px;
}
.page-id-59755 .cx-jump-chip {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  border: 1px solid var(--cx-border);
  text-decoration: none;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.page-id-59755 .cx-jump-chip:hover {
  background: var(--cx-orange);
  color: #fff;
  border-color: var(--cx-orange);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .page-id-59755 .cx-jump-row { gap: 6px 8px; margin-top: 12px; }
  .page-id-59755 .cx-jump-label { width: 100%; margin-bottom: 2px; }
  .page-id-59755 .cx-jump-chip { font-size: 12px; padding: 5px 10px; }
}

/* ---------- 4. Trust strip (own section below hero) ---------- */
.page-id-59755 .cx-trust-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 18px auto 6px;
  padding: 0 24px;
  box-sizing: border-box;
}
.page-id-59755 .cx-trust-strip--v2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 22px;
  font-size: 13px;
  color: #4a5568;
  line-height: 1.5;
}
.page-id-59755 .cx-trust-strip--v2 .cx-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.page-id-59755 .cx-trust-strip--v2 .cx-trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cx-orange);
  display: inline-block;
  flex-shrink: 0;
}
.page-id-59755 .cx-trust-strip--v2 .cx-trust-text {
  color: var(--cx-ink-2);
  font-weight: 500;
}
@media (max-width: 768px) {
  .page-id-59755 .cx-trust-wrap { padding: 0 16px; margin: 14px auto 4px; }
  .page-id-59755 .cx-trust-strip--v2 { justify-content: flex-start; gap: 6px 16px; font-size: 12px; }
  .page-id-59755 .cx-trust-strip--v2 .cx-trust-item { white-space: normal; }
}
/* In-hero variant (trust strip lives inside hero left column, below
   jump chips). Left-align rather than center, kill the auto-margin,
   reduce vertical breathing room since it sits next to other meta
   widgets in the hero stack. */
.page-id-59755 .cx-trust-wrap--inhero {
  margin: 14px 0 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.page-id-59755 .cx-trust-wrap--inhero .cx-trust-strip--v2 {
  justify-content: flex-start;
  gap: 6px 18px;
  font-size: 12px;
}
.page-id-59755 .cx-trust-wrap--inhero .cx-trust-strip--v2 .cx-trust-item {
  white-space: normal;
}

/* ---------- 5. May card anchor scroll offset ---------- */
.page-id-59755 #cx-may-quickbooks,
.page-id-59755 #cx-may-zia,
.page-id-59755 #cx-may-salestax {
  scroll-margin-top: 90px;
}

/* ---------- 6. Per-card inline CTAs ---------- */
.page-id-59755 .cx-card-cta {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--cx-orange);
  background: var(--cx-peach);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.page-id-59755 .cx-card-cta__text {
  font-size: 14px;
  color: var(--cx-ink-2);
  line-height: 1.5;
  flex: 1 1 60%;
  min-width: 240px;
}
.page-id-59755 .cx-card-cta-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--cx-orange);
  text-decoration: none;
  white-space: nowrap;
}
.page-id-59755 .cx-card-cta-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .page-id-59755 .cx-card-cta { flex-direction: column; align-items: flex-start; padding: 12px 14px; }
  .page-id-59755 .cx-card-cta__text { min-width: 0; }
  .page-id-59755 .cx-card-cta-link { font-size: 13px; }
}

/* ============================================================
   7. CPT-driven sidebar TOC + card feed (Phase 5)
   ============================================================
   Replaces the previously hardcoded Elementor widgets. Cards
   come from the zoho_update CPT via [cx_zoho_updates_loop];
   sidebar comes from [cx_zoho_chapter_sidebar]. Both auto-pop. */

/* Sidebar — sticky, internal-scroll layout. The CTA sits at the
   bottom of the sidebar regardless of TOC length so it never falls
   off-screen as more months are added. */
.cx-zoho-tocbar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 100px);
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 14px;
  padding: 18px 16px 16px;
  box-shadow: 0 8px 24px rgba(14, 23, 38, 0.05);
  font-family: Cabin, sans-serif;
}
.cx-zoho-tocbar__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cx-muted, #6b7280);
  flex: 0 0 auto;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f2f6;
}
.cx-zoho-tocbar__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}
.cx-zoho-tocbar__list::-webkit-scrollbar { width: 6px; }
.cx-zoho-tocbar__list::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }
.cx-zoho-tocbar__cta { flex: 0 0 auto; padding-top: 4px; border-top: 1px solid #f0f2f6; }
.cx-zoho-tocbar__cta .cx-btn {
  display: block;
  text-align: center;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
}

/* Collapsible month group */
.cx-zoho-tocgroup { display: flex; flex-direction: column; }
.cx-zoho-tocgroup__toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 8px 6px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.cx-zoho-tocgroup__toggle:hover { background: #f7f8fb; }
.cx-zoho-tocgroup__name { flex: 1 1 auto; }
.cx-zoho-tocgroup__count {
  background: #f3d6c8;
  color: #c2410c;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.cx-zoho-tocgroup__chev {
  display: inline-block;
  color: #9aa3b2;
  font-size: 11px;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
.cx-zoho-tocgroup[data-expanded="true"] .cx-zoho-tocgroup__chev { transform: rotate(0deg); }

.cx-zoho-tocgroup__items {
  list-style: none;
  margin: 0;
  padding: 0 0 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.cx-zoho-tocgroup[data-expanded="true"] .cx-zoho-tocgroup__items {
  max-height: 800px;  /* generous cap — flex column inside scrolling parent handles overflow */
}

.cx-zoho-tocitem { margin: 0; }
.cx-zoho-tocitem__link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #2d3748;
  font-size: 13px;
  line-height: 1.35;
  transition: background 0.15s ease, color 0.15s ease;
}
.cx-zoho-tocitem__link:hover {
  background: #fff4ed;
  color: var(--cx-orange, #ff6b35);
}
.cx-zoho-tocitem__link.is-active {
  background: var(--cx-orange, #ff6b35);
  color: #fff;
}
.cx-zoho-tocitem__link.is-active .cx-zoho-tocitem__num { color: rgba(255, 255, 255, 0.7); }
.cx-zoho-tocitem__num {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #9aa3b2;
  flex: 0 0 auto;
  padding-top: 1px;
}
.cx-zoho-tocitem__label {
  flex: 1 1 auto;
  /* Soft truncation — never let a long chip label overflow the sidebar. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Card feed (CPT-rendered cards) */
.cx-zoho-feed { display: flex; flex-direction: column; gap: 28px; }
.cx-zoho-month-heading {
  font-family: Cabin, sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 24px 0 0;
  padding: 14px 0 8px;
  /* Hairline underline — 1px in a muted color sits behind the type
     without competing with the orange accent used elsewhere. */
  border-bottom: 1px solid #e5e7eb;
  color: var(--cx-ink, #0e1726);
  letter-spacing: -0.01em;
}
.cx-zoho-feed .clx-zoho-card.cx-zoho-card-cpt {
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 6px 18px rgba(14, 23, 38, 0.04);
  scroll-margin-top: 90px;
}
.cx-card-inner { display: flex; gap: 22px; align-items: flex-start; }
.cx-card-image { flex: 0 0 120px; }
.cx-card-image img { display: block; max-width: 100%; height: auto; }
/* When no featured image is set, keep the 120px slot reserved so
   the body column (heading, content, CTA box) stays aligned with
   cards that DO have images. Without this, CTAs land at different
   x-offsets and look inconsistent across the feed. */
.cx-card-image--placeholder { min-height: 120px; }
.cx-card-body { flex: 1 1 auto; min-width: 0; }
.cx-card-title {
  font-family: Cabin, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--cx-ink, #0e1726);
  margin: 6px 0 14px;
  /* Truncation safety net at 2 lines so a too-long title can't break layout. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.cx-card-content { font-size: 15px; line-height: 1.6; color: #2d3748; }
.cx-card-content p { margin: 0 0 12px; }
.cx-card-source { font-size: 13px; text-align: right; margin: 6px 0 14px; }
.cx-card-source a.clx-lc { color: var(--cx-orange, #ff6b35); text-decoration: none; font-weight: 600; }
.cx-card-source a.clx-lc:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .cx-card-inner { flex-direction: column; gap: 12px; }
  .cx-card-image { flex: 0 0 auto; }
  .cx-card-image img { max-width: 88px; }
  .cx-zoho-feed .clx-zoho-card.cx-zoho-card-cpt { padding: 20px 18px; }
  .cx-card-title { font-size: 19px; }
}

/* Truncation safety nets — soft warnings in admin won't stop a
   determined editor, so make sure the layout never breaks. */
.cx-jump-chip { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-card-cta-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 8. Sticky bottom CTA bar (page-scoped via parent body class via JS) ---------- */
.cx-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: linear-gradient(90deg, #0e1726 0%, #1a2436 100%);
  color: #fff;
  padding: 12px 90px 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.35s;
}
.cx-sticky-cta.cx-visible { transform: translateY(0); }
.cx-sticky-cta__text {
  font-size: 14px;
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
}
.cx-sticky-cta__text strong { color: var(--cx-orange, #ff6b35); }
.cx-sticky-cta__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cx-sticky-cta a.cx-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cx-btn--primary { background: #ff6b35; color: #fff !important; }
.cx-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(255, 107, 53, 0.35); }
.cx-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff !important; }
.cx-sticky-cta__close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: #fff;
  opacity: 0.6;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
/* Only push the body up when the sticky CTA is actually on-screen.
   Without the `:has(.cx-visible)` scope, the reserved padding shows
   as a blank gap below the footer when the bar is dismissed or
   hasn't appeared yet. */
@media (min-width: 641px) {
  body.page-id-59755.cx-sticky-cta-visible { padding-bottom: 70px; }
}

/* SalesIQ chat launcher collides with the sticky CTA in the bottom-
   right corner. Lift it above the bar only while the bar is visible
   — natural corner position otherwise.
   Body class `cx-sticky-cta-visible` is toggled by zoho-updates.js
   (replaces the previous `:has(.cx-visible)` approach which silently
   no-ops in Safari < 15.4). The JS also force-sets these elements'
   inline `bottom` style as belt-and-suspenders, because SalesIQ
   sometimes re-applies its own inline `bottom: 10px` after the page
   loads (async widget init). */
body.page-id-59755.cx-sticky-cta-visible #zsiq_float,
body.page-id-59755.cx-sticky-cta-visible #zsiq_floatmain,
body.page-id-59755.cx-sticky-cta-visible .zsiq_floatmain,
body.page-id-59755.cx-sticky-cta-visible .zsiq-float,
body.page-id-59755.cx-sticky-cta-visible .zsiq_theme1,
body.page-id-59755.cx-sticky-cta-visible [id^="siq"],
body.page-id-59755.cx-sticky-cta-visible [id^="zsiq"] {
  bottom: 96px !important;
  transition: bottom 0.35s ease !important;
}
@media (max-width: 640px) {
  body.page-id-59755.cx-sticky-cta-visible #zsiq_float,
  body.page-id-59755.cx-sticky-cta-visible #zsiq_floatmain,
  body.page-id-59755.cx-sticky-cta-visible .zsiq_floatmain,
  body.page-id-59755.cx-sticky-cta-visible .zsiq-float,
  body.page-id-59755.cx-sticky-cta-visible .zsiq_theme1,
  body.page-id-59755.cx-sticky-cta-visible [id^="siq"],
  body.page-id-59755.cx-sticky-cta-visible [id^="zsiq"] {
    bottom: 190px !important;  /* mobile bar is ~160px tall + 30px gap */
  }
}
@media (max-width: 640px) {
  .cx-sticky-cta {
    flex-direction: column;
    align-items: stretch;
    /* Bottom padding previously was 80px as SalesIQ-clearance hack;
       no longer needed since liftSiq() JS bumps SalesIQ above the
       bar when it's visible. iOS safe-area inset still respected
       so the bar's content doesn't sit under the home indicator. */
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0));
    gap: 8px;
  }
  .cx-sticky-cta__text { font-size: 13px; padding-right: 24px; }
  .cx-sticky-cta__actions { width: 100%; }
  .cx-sticky-cta__actions a.cx-btn { flex: 1; text-align: center; font-size: 12px; padding: 9px 10px; }
  .cx-btn--ghost { display: none; }
  body.page-id-59755.cx-sticky-cta-visible { padding-bottom: 160px; }
}