/* ─────────────────────────────────────────────────────────────────
   CRO Block 1 — FAQ (final override)
   Loaded last via base.html.twig 1..17 loop. Token-bound rebuild
   that overrides legacy cro-faq.css cosmetic rules and guarantees
   correct icon sizing + responsive layout.
   ───────────────────────────────────────────────────────────── */

/* ── Section shell — paper surface for the FAQ ───────────────── */
.section.cro-faq,
.section.block-cro-block-1 {
  background: var(--ds-paper) !important;
  color: var(--ds-ink) !important;
  position: relative;
  overflow: hidden;
  /* Section padding handled by .section.section-lg in design-system.css (W3-A24). */
}

/* Kill any legacy decorative halos. */
.section.cro-faq::before,
.section.cro-faq::after { display: none !important; }

/* ── Container reset ─────────────────────────────────────────── */
.cro-faq .container > .row, .block-cro-block-1 .container > .row { gap: 0; }
.cro-faq .col-12, .block-cro-block-1 .col-12 { padding: 0; }

/* ── Section header (eyebrow + title + trust pills) ──────────── */
.cro-faq .section-header,
.block-cro-block-1 .section-header,
.section.cro-faq .section-header {
  text-align: center;
  margin-bottom: var(--ds-space-7);
}
.cro-faq .section-header h2,
.block-cro-block-1 .section-header h2,
.section.cro-faq .section-header h2,
.cro-faq h2.section-title, .block-cro-block-1 h2.section-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-lg);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--ds-ink) !important;
  margin: 0 0 var(--ds-space-3);
  text-transform: uppercase;
}
.cro-faq .section-subtitle,
.block-cro-block-1 .section-subtitle,
.section.cro-faq .section-subtitle {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  color: var(--ds-ink-soft);
  margin: 0 auto var(--ds-space-5);
  max-width: 640px;
}

/* Trust badges row (eyebrow above title) */
.cro-faq .trust-badges-inline,
.block-cro-block-1 .trust-badges-inline,
.cro-faq .hero-badges, .block-cro-block-1 .hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-2);
  margin: 0 auto var(--ds-space-4);
}
.cro-faq .trust-badge,
.block-cro-block-1 .trust-badge,
.cro-faq .hero-badge, .block-cro-block-1 .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  background: var(--scheme-card-bg, #fff);
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-pill);
  padding: 0.4rem 0.85rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  box-shadow: var(--ds-shadow-sm);
}

/* ── Filter pills ────────────────────────────────────────────── */
.cro-faq .faq-filter-container, .block-cro-block-1 .faq-filter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-2);
  margin: 0 auto var(--ds-space-6) !important;
  max-width: 720px;
}
.cro-faq .faq-filter, .block-cro-block-1 .faq-filter {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 600;
  color: var(--ds-ink-soft);
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  padding: 0.72rem 1.15rem;
  cursor: pointer;
  min-width: 9.5rem;
  transition: background var(--ds-duration) var(--ds-ease-out),
              color var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out);
}
.cro-faq .faq-filter:hover, .block-cro-block-1 .faq-filter:hover {
  border-color: var(--ds-cta);
  color: var(--ds-cta);
  transform: translateY(-1px);
}
.cro-faq .faq-filter.active, .block-cro-block-1 .faq-filter.active {
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  border-color: var(--ds-cta);
  box-shadow: var(--ds-shadow-cta);
}

/* ── FAQ container ───────────────────────────────────────────── */
.cro-faq .faq-container-wrapper,
.block-cro-block-1 .faq-container-wrapper,
.cro-faq #faq-container, .block-cro-block-1 #faq-container {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  max-width: 880px;
  margin: 0 auto var(--ds-space-7);
  /* W3-A28: <ul> semantic conversion — reset UA defaults. */
  list-style: none;
  padding-left: 0;
}

/* ── FAQ Item (card) ─────────────────────────────────────────── */
.cro-faq .faq-item, .block-cro-block-1 .faq-item {
  background: var(--scheme-card-bg, #fff) !important;
  border: 1px solid var(--ds-rule) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out);
}
.cro-faq .faq-item:hover, .block-cro-block-1 .faq-item:hover { box-shadow: var(--ds-shadow-md); }
.cro-faq .faq-item.active, .block-cro-block-1 .faq-item.active {
  border-color: var(--ds-cta) !important;
  box-shadow: var(--ds-shadow-md);
}

.cro-faq .faq-button, .block-cro-block-1 .faq-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-5) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  text-align: left;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-display-sm);
  font-weight: 700;
  color: var(--ds-ink) !important;
  line-height: 1.3;
  transition: color var(--ds-duration) var(--ds-ease-out);
}
.cro-faq .faq-button:hover, .block-cro-block-1 .faq-button:hover { color: var(--ds-cta) !important; }
.cro-faq .faq-button > span:first-child, .block-cro-block-1 .faq-button > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
  min-width: 0;
  padding-right: var(--ds-space-3);
}

/* Plus/minus icon — explicit sized, never auto. */
.cro-faq .faq-icon, .block-cro-block-1 .faq-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--ds-fs-body-lg);
  font-weight: 700;
  color: var(--ds-cta);
  background: color-mix(in srgb, var(--ds-cta) 10%, transparent);
  border-radius: var(--ds-radius-pill);
  transition: transform var(--ds-duration) var(--ds-ease-out),
              background var(--ds-duration) var(--ds-ease-out);
  line-height: 1;
}
.cro-faq .faq-item.active .faq-icon, .block-cro-block-1 .faq-item.active .faq-icon {
  transform: rotate(45deg);
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
}

/* Hard-cap any inline svg/img inside the icon. */
.cro-faq .faq-icon svg,
.block-cro-block-1 .faq-icon svg,
.cro-faq .faq-icon img, .block-cro-block-1 .faq-icon img {
  width: 18px !important;
  height: 18px !important;
}

/* Verified / popular badges in the question line */
.cro-faq .verified-badge,
.block-cro-block-1 .verified-badge,
.cro-faq .popular-badge, .block-cro-block-1 .popular-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--ds-radius-pill);
  margin-left: var(--ds-space-2);
}
.cro-faq .verified-badge, .block-cro-block-1 .verified-badge { background: color-mix(in srgb, var(--ds-trust) 18%, white); color: var(--ds-trust-dk); }
.cro-faq .popular-badge, .block-cro-block-1 .popular-badge { background: color-mix(in srgb, var(--ds-cta) 18%, white);   color: var(--ds-cta-dk); }

/* ── FAQ content (answer) ────────────────────────────────────── */
.cro-faq .faq-content, .block-cro-block-1 .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ds-duration-slow) var(--ds-ease-out);
  background: var(--ds-paper-2);
  border-top: 1px solid transparent;
}
.cro-faq .faq-content[hidden],
.block-cro-block-1 .faq-content[hidden] {
  display: block;
  visibility: hidden;
}
.cro-faq .faq-item.active .faq-content, .block-cro-block-1 .faq-item.active .faq-content {
  max-height: 1200px;
  border-top-color: var(--ds-rule);
  visibility: visible;
}
.cro-faq .faq-content-inner, .block-cro-block-1 .faq-content-inner {
  padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5) !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.65;
  color: var(--ds-ink-soft);
}
.cro-faq .faq-content-inner p, .block-cro-block-1 .faq-content-inner p { margin: 0 0 var(--ds-space-3); }
.cro-faq .faq-content-inner strong, .block-cro-block-1 .faq-content-inner strong { color: var(--ds-ink); }
.cro-faq .faq-content-inner ul, .block-cro-block-1 .faq-content-inner ul {
  margin: 0 0 var(--ds-space-3);
  padding-left: var(--ds-space-5);
}
.cro-faq .faq-content-inner li, .block-cro-block-1 .faq-content-inner li { margin-bottom: var(--ds-space-2); }

/* Proof box */
.cro-faq .faq-proof-box, .block-cro-block-1 .faq-proof-box {
  margin: var(--ds-space-4) 0;
  padding: var(--ds-space-3) var(--ds-space-4);
  background: color-mix(in srgb, var(--ds-trust) 10%, white);
  border-left: 3px solid var(--ds-trust);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
}
.cro-faq .faq-proof-box strong, .block-cro-block-1 .faq-proof-box strong { color: var(--ds-trust-dk); }
.cro-faq .faq-proof-box p, .block-cro-block-1 .faq-proof-box p { margin: 0; }

/* Buttons inside the answer */
.cro-faq .faq-content-inner .btn-gradient,
.block-cro-block-1 .faq-content-inner .btn-gradient,
.cro-faq .faq-content-inner .btn-secondary,
.block-cro-block-1 .faq-content-inner .btn-secondary,
.cro-faq .faq-content-inner a[class^="btn-"], .block-cro-block-1 .faq-content-inner a[class^="btn-"] {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.65rem 1.2rem;
  margin-top: var(--ds-space-3);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}
.cro-faq .faq-content-inner .btn-gradient, .block-cro-block-1 .faq-content-inner .btn-gradient {
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  box-shadow: var(--ds-shadow-cta);
}
.cro-faq .faq-content-inner .btn-gradient:hover, .block-cro-block-1 .faq-content-inner .btn-gradient:hover {
  background: var(--ds-cta-dk);
  transform: translateY(-1px);
}
.cro-faq .faq-content-inner .btn-secondary, .block-cro-block-1 .faq-content-inner .btn-secondary {
  background: var(--scheme-card-bg, #fff);
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
}
.cro-faq .faq-content-inner .btn-secondary:hover, .block-cro-block-1 .faq-content-inner .btn-secondary:hover {
  border-color: var(--ds-cta);
  color: var(--ds-cta);
}

/* ── CTA box (Still Have Questions?) ─────────────────────────── */
/* FIX-FAQ-20260508: this card hardcodes a dark bg (var(--ds-ink)) WITHOUT
   sitting inside a .scheme-ink parent, so the design-system guardrail that
   rebinds --scheme-fg → #fff inside dark schemes doesn't apply. Locally
   rebind the scheme tokens here so every descendant that resolves
   var(--scheme-fg) (title, .secondary button, .cta-btn-text) lands on
   #fff over the dark surface instead of inheriting --ds-ink. */
.cro-faq .faq-cta-box, .block-cro-block-1 .faq-cta-box {
  --scheme-bg: var(--ds-ink);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.92);
  --scheme-fg-mute: rgba(255,247,227,.65);
  --scheme-card-bg: rgba(255,255,255,.08);
  --scheme-card-fg: #fff;
  --scheme-rule: rgba(255,255,255,.18);
  /* WAVE3-F07 (2026-05-08) — defensive fortification of FIX-FAQ-20260508
     Pattern-B rebind. Doctrine §B (lines 78–80) mandates the --ds-ink
     triplet so any descendant that wrongly reads var(--ds-ink) directly
     still resolves to white. Today no descendant does, but this prevents
     a future-edit regression. The literal `background: var(--ds-ink)` on
     this same selector resolves correctly because cascade order: the
     rebind takes effect ON this element AND descendants; the bg uses the
     rebound value (#fff) so we pin background to literal hex below. */
  --ds-ink: #fff;
  --ds-ink-soft: rgba(255,247,227,.92);
  --ds-ink-mute: rgba(255,247,227,.65);
  max-width: 880px;
  margin: var(--ds-space-7) auto 0 !important;
  padding: var(--ds-space-6) var(--ds-space-5) !important;
  /* literal hex — local --ds-ink rebind would otherwise re-paint white */
  background: #0e0f0c !important;
  color: #fff !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg);
  text-align: center;
}
.cro-faq .faq-cta-header, .block-cro-block-1 .faq-cta-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-5);
}
.cro-faq .faq-cta-icon, .block-cro-block-1 .faq-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-cta) 22%, transparent);
  color: var(--ds-cta);
}
.cro-faq .faq-cta-icon svg,
.block-cro-block-1 .faq-cta-icon svg,
.cro-faq .faq-cta-icon img, .block-cro-block-1 .faq-cta-icon img {
  width: 28px !important;
  height: 28px !important;
}
.cro-faq .faq-cta-title, .block-cro-block-1 .faq-cta-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  letter-spacing: 0.005em;
  /* FIX-FAQ-20260508: was var(--scheme-fg, #fff) — fallback never fired
     because --scheme-fg was inherited as --ds-ink. Hardcode #fff on this
     dark surface; .faq-cta-box rebinds tokens for sibling elements. */
  color: #fff !important;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.1;
}
.cro-faq .faq-cta-subtitle, .block-cro-block-1 .faq-cta-subtitle {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: rgba(255,247,227,.78) !important;
  margin: 0;
}

.cro-faq .faq-cta-buttons, .block-cro-block-1 .faq-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
}
.cro-faq .faq-cta-button, .block-cro-block-1 .faq-cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.85rem 1.4rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 700;
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
  border: none;
}
.cro-faq .faq-cta-button.primary, .block-cro-block-1 .faq-cta-button.primary {
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  box-shadow: var(--ds-shadow-cta);
}
.cro-faq .faq-cta-button.primary:hover, .block-cro-block-1 .faq-cta-button.primary:hover {
  background: var(--ds-cta-dk);
  transform: translateY(-1px);
}
.cro-faq .faq-cta-button.secondary, .block-cro-block-1 .faq-cta-button.secondary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.cro-faq .faq-cta-button.secondary:hover, .block-cro-block-1 .faq-cta-button.secondary:hover {
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
/* FIX-FAQ-20260508: ensure the inner label span on every CTA button (primary
   AND secondary) inherits the white surface text — was resolving to --ds-ink
   via inherited --scheme-fg leak. */
.cro-faq .faq-cta-box .cta-btn-text,
.block-cro-block-1 .faq-cta-box .cta-btn-text,
.cro-faq .faq-cta-button .cta-btn-text,
.block-cro-block-1 .faq-cta-button .cta-btn-text {
  color: inherit;
}
.cro-faq .faq-cta-button .cta-btn-icon, .block-cro-block-1 .faq-cta-button .cta-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.cro-faq .faq-cta-button .cta-btn-icon svg,
.block-cro-block-1 .faq-cta-button .cta-btn-icon svg,
.cro-faq .faq-cta-button .cta-btn-icon img,
.block-cro-block-1 .faq-cta-button .cta-btn-icon img,
.cro-faq .faq-cta-button svg,
.block-cro-block-1 .faq-cta-button svg,
.cro-faq .faq-cta-button img, .block-cro-block-1 .faq-cta-button img {
  width: 18px !important;
  height: 18px !important;
}

/* Trust strip below CTA buttons */
.cro-faq .faq-cta-trust, .block-cro-block-1 .faq-cta-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-4);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.72);
}
.cro-faq .faq-cta-trust span, .block-cro-block-1 .faq-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}
.cro-faq .faq-cta-trust svg,
.block-cro-block-1 .faq-cta-trust svg,
.cro-faq .faq-cta-trust img, .block-cro-block-1 .faq-cta-trust img {
  width: 16px !important;
  height: 16px !important;
  color: var(--ds-cta);
  stroke: var(--ds-cta);
}

/* ── Floating mobile CTA bar ─────────────────────────────────── */
.cro-faq .floating-cta-bar,
.block-cro-block-1 .floating-cta-bar,
.section.cro-faq .floating-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--ds-ink);
  border-top: 1px solid var(--ds-rule-dark);
  box-shadow: var(--ds-shadow-md);
  padding: var(--ds-space-2);
  gap: var(--ds-space-2);
}
@media (max-width: 768px) {
  .cro-faq .floating-cta-bar,
  .block-cro-block-1 .floating-cta-bar,
  .section.cro-faq .floating-cta-bar {
    display: flex;
  }
}
.cro-faq .float-cta-btn, .block-cro-block-1 .float-cta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 0.85rem 1rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  color: #fff;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-faq .float-cta-btn.phone, .block-cro-block-1 .float-cta-btn.phone {
  background: var(--ds-trust);
}
.cro-faq .float-cta-btn.phone:hover, .block-cro-block-1 .float-cta-btn.phone:hover { background: var(--ds-trust-dk); }
.cro-faq .float-cta-btn.quote, .block-cro-block-1 .float-cta-btn.quote {
  background: var(--ds-cta-aa, var(--ds-cta-dk));
}
.cro-faq .float-cta-btn.quote:hover, .block-cro-block-1 .float-cta-btn.quote:hover { background: var(--ds-cta-dk); }
.cro-faq .float-cta-btn .cta-icon,
.block-cro-block-1 .float-cta-btn .cta-icon,
.cro-faq .float-cta-btn .cta-icon svg,
.block-cro-block-1 .float-cta-btn .cta-icon svg,
.cro-faq .float-cta-btn .cta-icon img, .block-cro-block-1 .float-cta-btn .cta-icon img {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile responsive tightening ────────────────────────────── */
@media (max-width: 575px) {
  .cro-faq .faq-button, .block-cro-block-1 .faq-button {
    padding: var(--ds-space-3) var(--ds-space-4) !important;
    font-size: var(--ds-fs-body-lg);
  }
  .cro-faq .faq-content-inner, .block-cro-block-1 .faq-content-inner {
    padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4) !important;
  }
  .cro-faq .faq-cta-box, .block-cro-block-1 .faq-cta-box {
    padding: var(--ds-space-5) var(--ds-space-4) !important;
  }
  .cro-faq .faq-cta-buttons, .block-cro-block-1 .faq-cta-buttons { flex-direction: column; }
  .cro-faq .faq-cta-button, .block-cro-block-1 .faq-cta-button { width: 100%; justify-content: center; }
  .cro-faq h2.section-title,
  .block-cro-block-1 h2.section-title,
  .cro-faq .section-header h2, .block-cro-block-1 .section-header h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}

/* Hard-cap any stray icon/image inside the FAQ block. */
.cro-faq svg,
.block-cro-block-1 svg,
.cro-faq img, .block-cro-block-1 img {
  max-width: 100%;
}
.cro-faq .ds-icon,
.block-cro-block-1 .ds-icon,
.cro-faq .ds-icon svg,
.block-cro-block-1 .ds-icon svg,
.cro-faq .ds-icon img, .block-cro-block-1 .ds-icon img {
  width: 24px !important;
  height: 24px !important;
}

/* ─────────────────────────────────────────────────────────────────
   Merged from block-cro-block-1.css (deleted in W1-A7 cleanup).
   Shared utility rules: .btn-cta/.btn-orange/.btn-gradient buttons,
   input[type] / select / textarea form fields, label, .pain-tab /
   .pain-card / .timeline-step / .stat-card / .calculator-result
   surfaces, .floating-cta-bar / .float-cta-btn mobile bar.
   ───────────────────────────────────────────────────────────── */
.block-cro-block-1 { font-family: var(--ds-font-body); color: var(--scheme-fg); }

/* Section header tag/eyebrow (legacy class — design-system .ds-eyebrow recipe values). */
.block-cro-block-1 .section-tag {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-cta);
  margin-bottom: var(--ds-space-3);
}
.block-cro-block-1 .section-header-divider { background: var(--scheme-rule); }

/* Trust badges — pill row above the form/headline. */
.block-cro-block-1 .trust-badges-inline { gap: var(--ds-space-2); margin-bottom: var(--ds-space-5); }
.block-cro-block-1 .trust-badge {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  background: var(--scheme-card-bg);
  color: var(--scheme-card-fg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-2) var(--ds-space-3);
  gap: var(--ds-space-2);
}
.block-cro-block-1 .trust-icon-svg svg { stroke: var(--ds-trust); }

/* Live activity dot. */
.block-cro-block-1 .live-activity {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scheme-fg-soft);
}
.block-cro-block-1 .pulse-dot { background: var(--ds-cta-aa, var(--ds-cta-dk)); }

/* Legacy CTA button aliases (cro-*.css uses btn-cta, btn-orange, btn-gradient). */
.block-cro-block-1 .btn-cta,
.block-cro-block-1 .btn-orange,
.block-cro-block-1 .btn-gradient {
  font-family: var(--ds-font-body);
  font-weight: 700;
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  border: none;
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-cta);
  transition: background var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}
.block-cro-block-1 .btn-cta:hover,
.block-cro-block-1 .btn-orange:hover,
.block-cro-block-1 .btn-gradient:hover { background: var(--ds-cta-dk); color: #fff; }

/* Form fields shared across CRO blocks (lead-form / hero-form / calculator). */
.block-cro-block-1 input[type="text"],
.block-cro-block-1 input[type="email"],
.block-cro-block-1 input[type="tel"],
.block-cro-block-1 input[type="number"],
.block-cro-block-1 select,
.block-cro-block-1 textarea {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--scheme-fg);
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-3);
  transition: border-color var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}
.block-cro-block-1 input:focus,
.block-cro-block-1 select:focus,
.block-cro-block-1 textarea:focus {
  outline: none;
  border-color: var(--ds-cta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-cta) 22%, transparent);
}
.block-cro-block-1 label {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: var(--scheme-fg);
}

/* Surface tokens for legacy non-.card cards (calculator/pain/timeline). */
.block-cro-block-1 .pain-tab,
.block-cro-block-1 .pain-card,
.block-cro-block-1 .timeline-step,
.block-cro-block-1 .stat-card,
.block-cro-block-1 .calculator-result {
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
}

/* Floating CTA bar (mobile). */
.block-cro-block-1 .floating-cta-bar {
  font-family: var(--ds-font-body);
  background: var(--ds-ink);
  border-top: 1px solid var(--ds-rule-dark);
}
.block-cro-block-1 .float-cta-btn {
  font-family: var(--ds-font-body);
  font-weight: 700;
  border-radius: var(--ds-radius-sm);
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.block-cro-block-1 .float-cta-btn.phone { background: var(--ds-trust); color: #fff; }
.block-cro-block-1 .float-cta-btn.quote { background: var(--ds-cta-aa, var(--ds-cta-dk));   color: #fff; }

/* ─────────────────────────────────────────────────────────────────
   SENIOR-UX team-08 (2026-05-07) — AARP / WCAG AAA pass for
   45-70+ HVAC / cleaning / trades audiences.
   - Question rows ≥48 px tap; expanded answer ≥18 px / 1.6 lh.
   - Filter pills ≥48 px. Floating mobile CTAs ≥56 px (primary).
   - Focus rings 3 px CTA + halo per design-system token.
   ───────────────────────────────────────────────────────────── */

/* Filter pills — bump from ~36-40 px to 48 px tap floor. */
.cro-faq .faq-filter,
.block-cro-block-1 .faq-filter {
  min-height: var(--ds-touch-target);     /* 48 px */
  padding: 0.7rem 1.2rem;
  font-size: var(--ds-fs-body);           /* 18 px — was body-sm 16 px */
  line-height: 1.2;
}
.cro-faq .faq-filter:focus-visible,
.block-cro-block-1 .faq-filter:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* FAQ question rows — guarantee ≥48 px tap target on every viewport
   (existing padding renders ~56-72 px on desktop; this ensures floor). */
.cro-faq .faq-button,
.block-cro-block-1 .faq-button {
  min-height: var(--ds-touch-target-primary);  /* 56 px — primary tap */
  font-size: var(--ds-fs-body-lg);             /* 20 px — was display-sm; sentence-case body */
  line-height: 1.35;
}
.cro-faq .faq-button:focus-visible,
.block-cro-block-1 .faq-button:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius);
}

/* Expand chevron paired with text-equivalent + 48 px hit (button wraps it). */
.cro-faq .faq-icon,
.block-cro-block-1 .faq-icon {
  width: 36px;
  height: 36px;
  font-size: var(--ds-fs-h3);
}

/* Answer copy — enforce ≥18 px and 1.6 line-height (AARP). */
.cro-faq .faq-content-inner,
.block-cro-block-1 .faq-content-inner {
  font-size: var(--ds-fs-body);   /* 18 px */
  line-height: var(--ds-lh-body); /* 1.6 */
  color: var(--ds-ink);           /* was ink-soft — bump for ≥7:1 AAA */
}
.cro-faq .faq-content-inner p,
.block-cro-block-1 .faq-content-inner p {
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
}
.cro-faq .faq-proof-box,
.block-cro-block-1 .faq-proof-box {
  font-size: var(--ds-fs-body-sm); /* 16 px floor for callout */
  line-height: var(--ds-lh-body);
  color: var(--ds-ink);
}

/* Buttons inside answer — bump to ≥48 px tap, ≥18 px label. */
.cro-faq .faq-content-inner a[class^="btn-"],
.block-cro-block-1 .faq-content-inner a[class^="btn-"] {
  min-height: var(--ds-touch-target);
  padding: 0.75rem 1.4rem;
  font-size: var(--ds-fs-body);
}
.cro-faq .faq-content-inner a[class^="btn-"]:focus-visible,
.block-cro-block-1 .faq-content-inner a[class^="btn-"]:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* CTA box "Still Have Questions" buttons — primary ≥56 px, ≥1.25rem label. */
.cro-faq .faq-cta-button,
.block-cro-block-1 .faq-cta-button {
  min-height: var(--ds-touch-target-primary); /* 56 px */
  padding: 1rem 1.5rem;
  font-size: var(--ds-fs-body-lg);            /* 20 px */
}
.cro-faq .faq-cta-button:focus-visible,
.block-cro-block-1 .faq-cta-button:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring-dark); /* on dark cta-box bg */
}
.cro-faq .faq-cta-subtitle,
.block-cro-block-1 .faq-cta-subtitle {
  font-size: var(--ds-fs-body) !important;   /* 18 px on dark surface */
  color: rgba(255,247,227,.92) !important;   /* lifted from .78 → .92 for AAA */
  line-height: var(--ds-lh-body);
}
.cro-faq .faq-cta-trust,
.block-cro-block-1 .faq-cta-trust {
  font-size: var(--ds-fs-body-sm);      /* 16 px floor */
  color: rgba(255,247,227,.92);         /* lifted from .72 for ≥4.5:1 */
  gap: var(--ds-space-3);
}
.cro-faq .faq-cta-trust svg,
.block-cro-block-1 .faq-cta-trust svg,
.cro-faq .faq-cta-trust img,
.block-cro-block-1 .faq-cta-trust img {
  width: 18px !important;  /* was 16 — readable at arm's length */
  height: 18px !important;
}

/* Floating mobile CTA bar — primary tap ≥56 px, gap ≥8 px. */
.cro-faq .floating-cta-bar,
.block-cro-block-1 .floating-cta-bar {
  gap: var(--ds-touch-spacing);   /* 8 px */
  padding: var(--ds-space-2) var(--ds-space-2) calc(var(--ds-space-2) + env(safe-area-inset-bottom));
}
.cro-faq .float-cta-btn,
.block-cro-block-1 .float-cta-btn {
  min-height: var(--ds-touch-target-primary); /* 56 px */
  font-size: var(--ds-fs-body);               /* 18 px — was body-sm 16 */
  padding: 0.85rem 1rem;
}
.cro-faq .float-cta-btn:focus-visible,
.block-cro-block-1 .float-cta-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* Section subtitle — ensure 20 px / 1.55 lh for older readers. */
.cro-faq .section-subtitle,
.block-cro-block-1 .section-subtitle {
  font-size: var(--ds-fs-body-lg);
  line-height: 1.55;
  color: var(--ds-ink); /* was ink-soft — bump for AAA on paper */
}

/* Trust pill row — ≥48 px hit + 16 px text. */
.cro-faq .trust-badge,
.block-cro-block-1 .trust-badge,
.cro-faq .hero-badge,
.block-cro-block-1 .hero-badge {
  min-height: var(--ds-touch-target);
  font-size: var(--ds-fs-body-sm);
  padding: 0.55rem 1rem;
}

/* ─────────────────────────────────────────────────────────────────
   BUG-T8 (2026-05-07) — overlap fix: defer to global #acme-sticky-cta
   on mobile so the duplicate module-level .floating-cta-bar does not
   stack on top of the global CTA bar (was producing 13 mobile overlap
   reports against faq-button + acme-cta-call/quote at viewport 375).
   The global bar (acme-polish.css/acme-enhance.js) supplies the same
   call+quote actions and already adds body padding-bottom.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cro-faq .floating-cta-bar,
  .block-cro-block-1 .floating-cta-bar,
  .section.cro-faq .floating-cta-bar {
    display: none !important;
  }
}
/* Ensure FAQ rows clear the global bottom CTA on small viewports. */
@media (max-width: 900px) {
  .block-cro-block-1 { padding-bottom: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────
   SWEEP-B4 (2026-05-08) — three defensive shims for the 45-70+ ICP:

   1. Sticky-CTA bottom clearance: reserve space below the FAQ list /
      CTA box on mobile so the last row is never tucked under the
      global #acme-sticky-cta fixed bar (paired with sister modules
      via the wave-coord token --ds-sticky-cta-clearance, default 96px).

   2. Equal-height columns at ≥1024 px when this block is composed
      next to an "Audit includes" / lead-form panel (.cro-block-1-grid
      or .row containing .lead-form + .audit-panel). Keeps the right
      panel from out-running the left form row on long-question pages.

   3. Defensive checkmark-leak guard: scope li::before resets so the
      unscoped #features ul li::before rule in theme.min.css cannot
      paint a stray green check on the FAQ list (.faq-items-list is
      a <ul>, so it sits exactly in the leak-prone selector path).
   ───────────────────────────────────────────────────────────── */

/* (1) Sticky-CTA clearance — mobile. */
@media (max-width: 768px) {
  .cro-faq,
  .block-cro-block-1 {
    padding-bottom: var(--ds-sticky-cta-clearance, 96px);
  }
}

/* (2) Equal-height side-by-side columns on desktop ≥1024 px. */
@media (min-width: 1024px) {
  .cro-faq .cro-block-1-grid,
  .block-cro-block-1 .cro-block-1-grid,
  .cro-faq .row.faq-with-audit,
  .block-cro-block-1 .row.faq-with-audit {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--ds-space-6);
    align-items: stretch;
  }
  .cro-faq .cro-block-1-grid > *,
  .block-cro-block-1 .cro-block-1-grid > *,
  .cro-faq .row.faq-with-audit > *,
  .block-cro-block-1 .row.faq-with-audit > * {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /* When .audit-panel sits beside .lead-form, both stretch to the
     taller of the two — no more dangling whitespace under the form. */
  .cro-faq .audit-panel,
  .block-cro-block-1 .audit-panel,
  .cro-faq .lead-form,
  .block-cro-block-1 .lead-form {
    height: 100%;
  }
}

/* (3) Defensive checkmark-leak guard — scope li::before resets.
   Pattern shipped by wave-coord on icons-text / hero / hero2 /
   cro-lead-form / cro-testimonials / creators-showcase.            */
.cro-faq .faq-items-list li::before,
.block-cro-block-1 .faq-items-list li::before,
.cro-faq .faq-container-wrapper li::before,
.block-cro-block-1 .faq-container-wrapper li::before,
.cro-faq #faq-container li::before,
.block-cro-block-1 #faq-container li::before,
.cro-faq .faq-cta-trust span::before,
.block-cro-block-1 .faq-cta-trust span::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ── Validate-2026-05-08: cro-faq Show/Hide chevron pair (matches faq module pattern) ── */
.cro-faq .faq-toggle,
.block-cro-block-1 .faq-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 0.5rem);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm, 1rem);
  font-weight: 600;
  color: var(--ds-cta);
  flex: 0 0 auto;
  min-width: 5.9rem;
  justify-content: flex-end;
}
.cro-faq .faq-toggle-label,
.block-cro-block-1 .faq-toggle-label {
  font-size: var(--ds-fs-body-sm, 1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cro-faq .faq-button[aria-expanded="false"] .faq-toggle-label--hide,
.block-cro-block-1 .faq-button[aria-expanded="false"] .faq-toggle-label--hide,
.cro-faq .faq-button[aria-expanded="true"] .faq-toggle-label--show,
.block-cro-block-1 .faq-button[aria-expanded="true"] .faq-toggle-label--show {
  display: none;
}
.cro-faq .faq-button[aria-expanded="true"] .faq-icon,
.block-cro-block-1 .faq-button[aria-expanded="true"] .faq-icon {
  transform: none;
  display: inline-flex;
}
.cro-faq .faq-icon,
.block-cro-block-1 .faq-icon {
  font-family: var(--ds-font-body);
  line-height: 1;
  text-align: center;
  transition: background 200ms ease-out, color 200ms ease-out, transform 200ms ease-out;
  display: inline-flex;
}

/* FAQ UX polish — predictable controls for older local-business users. */
.cro-faq .faq-filter-container,
.block-cro-block-1 .faq-filter-container {
  align-items: stretch;
  padding: var(--ds-space-2);
  background: color-mix(in srgb, var(--ds-paper-2) 74%, white);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius);
  box-shadow: 0 10px 26px rgba(14, 15, 12, .06);
}
.cro-faq .faq-filter,
.block-cro-block-1 .faq-filter {
  min-height: 52px;
  box-shadow: 0 1px 0 rgba(14, 15, 12, .04);
  outline-offset: 3px;
}
.cro-faq .faq-filter.active,
.block-cro-block-1 .faq-filter.active {
  color: #fff;
}
.cro-faq .faq-filter:focus-visible,
.block-cro-block-1 .faq-filter:focus-visible,
.cro-faq .faq-button:focus-visible,
.block-cro-block-1 .faq-button:focus-visible,
.cro-faq .faq-cta-button:focus-visible,
.block-cro-block-1 .faq-cta-button:focus-visible,
.cro-faq .float-cta-btn:focus-visible,
.block-cro-block-1 .float-cta-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-cta) 62%, white);
  outline-offset: 3px;
}
.cro-faq .faq-container-wrapper,
.block-cro-block-1 .faq-container-wrapper,
.cro-faq #faq-container,
.block-cro-block-1 #faq-container {
  gap: var(--ds-space-4);
}
.cro-faq .faq-item,
.block-cro-block-1 .faq-item {
  box-shadow: 0 8px 22px rgba(14, 15, 12, .055);
}
.cro-faq .faq-item:hover,
.block-cro-block-1 .faq-item:hover {
  border-color: color-mix(in srgb, var(--ds-cta) 42%, var(--ds-rule)) !important;
}
.cro-faq .faq-button,
.block-cro-block-1 .faq-button {
  min-height: 72px;
}
.cro-faq .faq-button > span:first-child,
.block-cro-block-1 .faq-button > span:first-child {
  row-gap: var(--ds-space-2);
}
.cro-faq .verified-badge,
.block-cro-block-1 .verified-badge,
.cro-faq .popular-badge,
.block-cro-block-1 .popular-badge {
  line-height: 1;
  min-height: 1.7rem;
  border: 1px solid currentColor;
}
.cro-faq .faq-toggle,
.block-cro-block-1 .faq-toggle {
  min-width: 6.6rem;
  min-height: 42px;
  padding: .25rem .32rem .25rem .75rem;
  background: #fff;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-pill);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
  transition: background 200ms ease-out,
              border-color 200ms ease-out,
              color 200ms ease-out,
              box-shadow 200ms ease-out;
}
.cro-faq .faq-button:hover .faq-toggle,
.block-cro-block-1 .faq-button:hover .faq-toggle,
.cro-faq .faq-button[aria-expanded="true"] .faq-toggle,
.block-cro-block-1 .faq-button[aria-expanded="true"] .faq-toggle {
  border-color: var(--ds-cta);
  box-shadow: 0 6px 16px rgba(169, 82, 27, .12);
}
.cro-faq .faq-button[aria-expanded="true"] .faq-toggle,
.block-cro-block-1 .faq-button[aria-expanded="true"] .faq-toggle {
  background: color-mix(in srgb, var(--ds-cta) 12%, white);
  color: var(--ds-cta-dk);
}
.cro-faq .faq-item.active .faq-content,
.block-cro-block-1 .faq-item.active .faq-content {
  visibility: visible;
}
.cro-faq .faq-proof-box,
.block-cro-block-1 .faq-proof-box {
  border-left-width: 4px;
}
.cro-faq .faq-cta-box,
.block-cro-block-1 .faq-cta-box {
  border: 1px solid rgba(255, 255, 255, .16);
}

@media (max-width: 575px) {
  .cro-faq .faq-filter-container,
  .block-cro-block-1 .faq-filter-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-2);
    width: min(100%, 340px);
    margin-bottom: var(--ds-space-6) !important;
  }

  .cro-faq .faq-filter,
  .block-cro-block-1 .faq-filter {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: .8rem .7rem;
    justify-content: center;
    white-space: normal;
    line-height: 1.15;
  }

  .cro-faq .faq-button,
  .block-cro-block-1 .faq-button {
    align-items: flex-start;
    gap: var(--ds-space-2);
  }

  .cro-faq .faq-button > span:first-child,
  .block-cro-block-1 .faq-button > span:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-2);
  }

  .cro-faq .verified-badge,
  .block-cro-block-1 .verified-badge,
  .cro-faq .popular-badge,
  .block-cro-block-1 .popular-badge {
    margin-left: 0;
  }

  .cro-faq .faq-toggle,
  .block-cro-block-1 .faq-toggle {
    min-width: 5.7rem;
    min-height: 40px;
    padding-left: .6rem;
    gap: .35rem;
  }

  .cro-faq .faq-toggle-label,
  .block-cro-block-1 .faq-toggle-label {
    font-size: .875rem;
  }

  .cro-faq .faq-container-wrapper,
  .block-cro-block-1 .faq-container-wrapper,
  .cro-faq #faq-container,
  .block-cro-block-1 #faq-container {
    margin-bottom: calc(var(--ds-space-7) + var(--ds-sticky-cta-clearance, 96px));
  }

  .cro-faq .faq-cta-box,
  .block-cro-block-1 .faq-cta-box {
    margin-bottom: var(--ds-sticky-cta-clearance, 96px) !important;
  }
}

@media (max-width: 900px) {
  body.cro-faq-in-view #acme-sticky-cta {
    display: none !important;
  }
}