/* ─────────────────────────────────────────────────────────────────
   CRO Block 7 — Pain Tabs (final override)
   Loaded last via base.html.twig 1..17 loop. Token-bound rebuild
   for tabbed problem/solution layout. Critical: caps SVG sizing
   and constrains the trust gallery placeholder so the green check
   never blows up to viewport.
   ───────────────────────────────────────────────────────────── */

.section.cro-pain-tabs,
.section.block-cro-block-7 {
  background: var(--ds-paper-2) !important;
  color: var(--ds-ink) !important;
  overflow: hidden;
  /* Section padding handled by .section.section-lg in design-system.css (W3-A24). */
}

/* Tab navigation */
.cro-pain-tabs .pain-tabs-nav, .block-cro-block-7 .pain-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-6);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ds-rule);
}
.cro-pain-tabs .tab-link, .block-cro-block-7 .tab-link {
  /* SWEEP-C2 (2026-05-08): ≥48px tap-target height for 45-70+ ICP and
     explicit text label inside (template ships labels — never icon-only). */
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.85rem var(--ds-space-4);
  min-height: var(--ds-touch-target); /* 48px */
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 600;
  color: var(--ds-ink-soft);
  cursor: pointer;
  transition: color var(--ds-duration-fast) var(--ds-ease),
              border-color var(--ds-duration-fast) var(--ds-ease),
              background var(--ds-duration-fast) var(--ds-ease),
              font-weight var(--ds-duration-fast) var(--ds-ease);
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.cro-pain-tabs .tab-link:hover, .block-cro-block-7 .tab-link:hover { color: var(--ds-ink); background: rgba(255,255,255,0.4); }
.cro-pain-tabs .tab-link:focus-visible, .block-cro-block-7 .tab-link:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}
/* SWEEP-C2 (2026-05-08): multi-channel active cue — color (ink + cta
   underline) PLUS weight bump to 700 PLUS solid bg. Three independent
   channels so colorblind / low-contrast users still detect selection. */
.cro-pain-tabs .tab-link.active, .block-cro-block-7 .tab-link.active {
  /* P-A11Y-CONTRAST 2026-05-08: was `background: var(--scheme-card-bg, #fff)`,
     which in the default light scheme resolves --scheme-fg to --ds-ink ⇒
     ink-bg + ink-color = 1.00 ratio (text invisible). Pin to literal #fff
     (matches --scheme-card-bg in every scheme) for ~19.3:1 ink-on-white AAA. */
  color: var(--ds-ink);
  border-bottom-color: var(--ds-cta);
  border-bottom-width: 4px;
  background: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ds-cta);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (max-width: 600px) {
  .cro-pain-tabs .pain-tabs-nav, .block-cro-block-7 .pain-tabs-nav { gap: 0; }
  .cro-pain-tabs .tab-link, .block-cro-block-7 .tab-link {
    flex: 1 1 50%;
    padding: 0.85rem var(--ds-space-2);
    min-height: var(--ds-touch-target); /* keep 48px on mobile */
    font-size: var(--ds-fs-body-sm);
    text-align: center;
  }
}

/* Tab panes */
.cro-pain-tabs .pain-tabs-content, .block-cro-block-7 .pain-tabs-content { position: relative; }
.cro-pain-tabs .tab-pane, .block-cro-block-7 .tab-pane { display: none; }
.cro-pain-tabs .tab-pane.active, .block-cro-block-7 .tab-pane.active { display: block; animation: croPainTabsFade 0.4s var(--ds-ease) both; }
@keyframes croPainTabsFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Two-column layout */
.cro-pain-tabs .tab-grid, .block-cro-block-7 .tab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-5);
  align-items: stretch;
}
@media (min-width: 992px) {
  .cro-pain-tabs .tab-grid, .block-cro-block-7 .tab-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ds-space-7);
  }
}

/* Text content */
.cro-pain-tabs .tab-text-content, .block-cro-block-7 .tab-text-content { display: flex; flex-direction: column; }
.cro-pain-tabs .tab-title, .block-cro-block-7 .tab-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ds-ink) !important;
  margin: 0 0 var(--ds-space-3);
  letter-spacing: 0.005em;
}
.cro-pain-tabs .tab-description, .block-cro-block-7 .tab-description {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  color: var(--ds-ink-soft) !important;
  line-height: 1.55;
  margin: 0 0 var(--ds-space-5);
}

/* Testimonial */
.cro-pain-tabs .tab-testimonial, .block-cro-block-7 .tab-testimonial {
  background: var(--scheme-card-bg, #fff) !important;
  border: 1px solid var(--ds-rule) !important;
  border-left: 4px solid var(--ds-cta) !important;
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4);
  margin: 0 0 var(--ds-space-5);
}
.cro-pain-tabs .tab-testimonial blockquote, .block-cro-block-7 .tab-testimonial blockquote {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: var(--ds-fs-body-lg);
  color: var(--ds-ink) !important;
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.cro-pain-tabs .tab-testimonial cite, .block-cro-block-7 .tab-testimonial cite {
  font-family: var(--ds-font-body);
  font-style: normal;
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-mute) !important;
  font-weight: 600;
}

/* Solution box */
.cro-pain-tabs .solution-box, .block-cro-block-7 .solution-box {
  background: color-mix(in srgb, var(--ds-trust) 8%, white) !important;
  border: 1.5px solid color-mix(in srgb, var(--ds-trust) 30%, transparent) !important;
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  margin-top: auto;
}
.cro-pain-tabs .solution-header, .block-cro-block-7 .solution-header {
  display: flex; align-items: center; gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
}
.cro-pain-tabs .solution-icon, .block-cro-block-7 .solution-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-trust);
  color: #fff;
  border-radius: var(--ds-radius-pill);
  font-size: 0;
}
.cro-pain-tabs .solution-icon .icon-preset,
.block-cro-block-7 .solution-icon .icon-preset,
.cro-pain-tabs .solution-icon .icon-svg,
.block-cro-block-7 .solution-icon .icon-svg,
.cro-pain-tabs .solution-icon .icon-custom, .block-cro-block-7 .solution-icon .icon-custom {
  display: inline-flex !important;
  width: 20px !important; height: 20px !important;
  background: transparent !important; border: none !important;
  align-items: center; justify-content: center;
  color: #fff;
}
.cro-pain-tabs .solution-icon svg, .block-cro-block-7 .solution-icon svg {
  width: 20px !important; height: 20px !important;
  max-width: 100%; max-height: 100%;
  stroke: var(--scheme-fg, #fff) !important;
  fill: none;
}
.cro-pain-tabs .solution-title, .block-cro-block-7 .solution-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  text-transform: uppercase;
  color: var(--ds-trust) !important;
  margin: 0;
  letter-spacing: 0.005em;
}
.cro-pain-tabs .solution-text, .block-cro-block-7 .solution-text {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--ds-ink) !important;
  margin: 0 0 var(--ds-space-3);
  line-height: 1.55;
}
.cro-pain-tabs .solution-guarantee, .block-cro-block-7 .solution-guarantee {
  display: inline-flex;
  background: var(--ds-trust) !important;
  color: #fff !important;
  text-decoration: none;
  padding: 0.55rem 1rem;
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  transition: background var(--ds-duration-fast) var(--ds-ease);
}
.cro-pain-tabs a.solution-guarantee:hover, .block-cro-block-7 a.solution-guarantee:hover { background: var(--ds-trust-dk) !important; }

/* Visual content column */
.cro-pain-tabs .tab-visual-content, .block-cro-block-7 .tab-visual-content {
  display: flex;
  align-items: stretch;
  min-height: auto;
  position: relative;
}
.cro-pain-tabs .tab-visual-content > div, .block-cro-block-7 .tab-visual-content > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Trust gallery — turn placeholder into a clean static card */
.cro-pain-tabs .trust-gallery, .block-cro-block-7 .trust-gallery {
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  box-shadow: var(--ds-shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cro-pain-tabs .gallery-container, .block-cro-block-7 .gallery-container { position: relative; flex: 1; display: flex; flex-direction: column; }
.cro-pain-tabs .gallery-slides, .block-cro-block-7 .gallery-slides { position: relative; flex: 1; }
.cro-pain-tabs .gallery-slide, .block-cro-block-7 .gallery-slide { display: none; height: 100%; flex-direction: column; }
.cro-pain-tabs .gallery-slide.active, .block-cro-block-7 .gallery-slide.active { display: flex; }
.cro-pain-tabs .gallery-image-wrapper, .block-cro-block-7 .gallery-image-wrapper {
  position: relative;
  aspect-ratio: 4/3;
  max-height: 360px;
  background: var(--ds-paper-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: 1;
}
.cro-pain-tabs .gallery-image-wrapper img, .block-cro-block-7 .gallery-image-wrapper img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cro-pain-tabs .gallery-placeholder, .block-cro-block-7 .gallery-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ds-space-3);
  color: var(--ds-ink-mute);
  background: linear-gradient(135deg, var(--ds-paper-2), var(--ds-paper));
}
.cro-pain-tabs .gallery-placeholder svg, .block-cro-block-7 .gallery-placeholder svg {
  width: 56px !important; height: 56px !important;
  stroke: var(--ds-ink-mute);
  opacity: 0.5;
}
.cro-pain-tabs .gallery-placeholder span, .block-cro-block-7 .gallery-placeholder span {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-mute);
  text-align: center;
  padding: 0 var(--ds-space-4);
}
.cro-pain-tabs .gallery-caption, .block-cro-block-7 .gallery-caption {
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--scheme-card-bg, #fff);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink);
}
.cro-pain-tabs .gallery-dots, .block-cro-block-7 .gallery-dots {
  display: flex; gap: 0.4rem;
  padding: var(--ds-space-3);
  justify-content: center;
  background: var(--scheme-card-bg, #fff);
  border-top: 1px solid var(--ds-rule);
}
.cro-pain-tabs .gallery-dot, .block-cro-block-7 .gallery-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ds-rule);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--ds-duration-fast) var(--ds-ease);
  position: relative;
  overflow: hidden;
}
.cro-pain-tabs .gallery-dot.active, .block-cro-block-7 .gallery-dot.active { background: var(--ds-cta-aa, var(--ds-cta-dk)); }
.cro-pain-tabs .gallery-dot .dot-progress, .block-cro-block-7 .gallery-dot .dot-progress { display: none; }

/* Trust proof card (tab 2 default) */
.cro-pain-tabs .trust-proof-card, .block-cro-block-7 .trust-proof-card {
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-sm);
  height: 100%;
  display: flex; flex-direction: column;
  gap: var(--ds-space-4);
}
.cro-pain-tabs .trust-header, .block-cro-block-7 .trust-header { display: flex; align-items: center; gap: var(--ds-space-3); padding-bottom: var(--ds-space-3); border-bottom: 1px solid var(--ds-rule); }
.cro-pain-tabs .trust-badge-icon, .block-cro-block-7 .trust-badge-icon { font-size: 1.6rem; }
.cro-pain-tabs .trust-badge-text, .block-cro-block-7 .trust-badge-text { font-family: var(--ds-font-body); font-weight: 700; color: var(--ds-ink); }
.cro-pain-tabs .trust-stats-grid, .block-cro-block-7 .trust-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ds-space-3); }
.cro-pain-tabs .trust-stat, .block-cro-block-7 .trust-stat { text-align: center; padding: var(--ds-space-3); background: var(--ds-paper-2); border-radius: var(--ds-radius); }
.cro-pain-tabs .trust-stat .stat-number, .block-cro-block-7 .trust-stat .stat-number { display: block; font-family: var(--ds-font-display); font-size: var(--ds-fs-display-md); color: var(--ds-cta); line-height: 1; }
.cro-pain-tabs .trust-stat .stat-label, .block-cro-block-7 .trust-stat .stat-label { display: block; font-size: var(--ds-fs-body-sm); color: var(--ds-ink-soft); margin-top: 0.3rem; }

/* Quote form card (tab 3) */
.cro-pain-tabs .quote-form-card, .block-cro-block-7 .quote-form-card {
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-md);
  height: 100%;
  display: flex; flex-direction: column;
}
.cro-pain-tabs .quote-form-header, .block-cro-block-7 .quote-form-header {
  display: flex; align-items: center; gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
}
.cro-pain-tabs .quote-form-icon, .block-cro-block-7 .quote-form-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ds-cta) 12%, white);
  color: var(--ds-cta);
  border-radius: var(--ds-radius-pill);
}
.cro-pain-tabs .quote-form-icon svg, .block-cro-block-7 .quote-form-icon svg { width: 24px !important; height: 24px !important; stroke: var(--ds-cta); }
.cro-pain-tabs .quote-form-title, .block-cro-block-7 .quote-form-title { font-family: var(--ds-font-display); font-size: var(--ds-fs-display-sm); text-transform: uppercase; color: var(--ds-ink); margin: 0; }
.cro-pain-tabs .quote-form-subtitle, .block-cro-block-7 .quote-form-subtitle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--ds-fs-body-sm); color: var(--ds-ink-mute); margin: 4px 0 0; }
.cro-pain-tabs .quote-form-subtitle svg, .block-cro-block-7 .quote-form-subtitle svg { width: 14px !important; height: 14px !important; }

.cro-pain-tabs .quote-form-modern .form-field, .block-cro-block-7 .quote-form-modern .form-field { margin-bottom: var(--ds-space-3); }
.cro-pain-tabs .quote-form-modern .form-label, .block-cro-block-7 .quote-form-modern .form-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 0.4rem;
}
.cro-pain-tabs .quote-form-modern .form-label svg, .block-cro-block-7 .quote-form-modern .form-label svg { width: 16px !important; height: 16px !important; stroke: var(--ds-ink-mute); }
.cro-pain-tabs .quote-form-modern .form-input,
.block-cro-block-7 .quote-form-modern .form-input,
.cro-pain-tabs .quote-form-modern .form-select, .block-cro-block-7 .quote-form-modern .form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--scheme-card-bg, #fff);
  border: 1.5px solid var(--ds-rule);
  border-radius: var(--ds-radius);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--ds-ink);
  transition: border-color var(--ds-duration-fast) var(--ds-ease),
              box-shadow var(--ds-duration-fast) var(--ds-ease);
  appearance: none;
}
.cro-pain-tabs .quote-form-modern .form-input:focus,
.block-cro-block-7 .quote-form-modern .form-input:focus,
.cro-pain-tabs .quote-form-modern .form-select:focus, .block-cro-block-7 .quote-form-modern .form-select:focus {
  outline: none;
  border-color: var(--ds-cta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-cta) 22%, transparent);
}
.cro-pain-tabs .quote-form-modern .form-submit-btn, .block-cro-block-7 .quote-form-modern .form-submit-btn {
  width: 100%;
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  border: none;
  border-radius: var(--ds-radius);
  padding: 0.95rem 1.25rem;
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: var(--ds-fs-body);
  cursor: pointer;
  box-shadow: var(--ds-shadow-cta);
  transition: background var(--ds-duration-fast) var(--ds-ease), transform var(--ds-duration-fast) var(--ds-ease);
}
.cro-pain-tabs .quote-form-modern .form-submit-btn:hover, .block-cro-block-7 .quote-form-modern .form-submit-btn:hover { background: var(--ds-cta-dk); transform: translateY(-1px); }
.cro-pain-tabs .quote-form-modern .form-submit-btn .btn-content, .block-cro-block-7 .quote-form-modern .form-submit-btn .btn-content { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.cro-pain-tabs .quote-form-modern .form-submit-btn .btn-arrow, .block-cro-block-7 .quote-form-modern .form-submit-btn .btn-arrow { width: 18px !important; height: 18px !important; }

.cro-pain-tabs .form-trust-badges, .block-cro-block-7 .form-trust-badges {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem;
  justify-content: center;
  margin-top: var(--ds-space-4);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-rule);
}
.cro-pain-tabs .form-trust-badges .trust-badge, .block-cro-block-7 .form-trust-badges .trust-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
.cro-pain-tabs .form-trust-badges .trust-badge svg, .block-cro-block-7 .form-trust-badges .trust-badge svg { width: 16px !important; height: 16px !important; stroke: var(--ds-trust); }

/* Services card (tab 3 fallback) */
.cro-pain-tabs .services-card, .block-cro-block-7 .services-card {
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-sm);
  height: 100%;
  display: flex; flex-direction: column;
  text-align: center;
}
.cro-pain-tabs .services-card-icon, .block-cro-block-7 .services-card-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-trust) 12%, white) !important;
  color: var(--ds-trust);
  border-radius: var(--ds-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
}
.cro-pain-tabs .services-card-icon svg, .block-cro-block-7 .services-card-icon svg {
  width: 32px !important; height: 32px !important;
  stroke: var(--ds-trust);
}
.cro-pain-tabs .services-card-title, .block-cro-block-7 .services-card-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  text-transform: uppercase;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-space-3);
}
.cro-pain-tabs .services-list, .block-cro-block-7 .services-list { display: flex; flex-direction: column; gap: var(--ds-space-3); text-align: left; }
.cro-pain-tabs .service-item, .block-cro-block-7 .service-item { display: flex; gap: var(--ds-space-3); align-items: flex-start; }
.cro-pain-tabs .service-check, .block-cro-block-7 .service-check {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  background: var(--ds-trust);
  color: #fff;
  border-radius: var(--ds-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.cro-pain-tabs .service-check svg, .block-cro-block-7 .service-check svg { width: 14px !important; height: 14px !important; stroke: var(--scheme-fg, #fff); }
.cro-pain-tabs .service-text strong, .block-cro-block-7 .service-text strong { display: block; color: var(--ds-ink); font-weight: 700; }
.cro-pain-tabs .service-text span, .block-cro-block-7 .service-text span { display: block; color: var(--ds-ink-soft); font-size: var(--ds-fs-body-sm); }

/* Advantage card (tab 4) */
.cro-pain-tabs .advantage-card, .block-cro-block-7 .advantage-card {
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-sm);
  height: 100%;
  display: flex; flex-direction: column;
  text-align: center;
}
.cro-pain-tabs .advantage-card-icon, .block-cro-block-7 .advantage-card-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-cta) 12%, white) !important;
  color: var(--ds-cta);
  border-radius: var(--ds-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
}
.cro-pain-tabs .advantage-card-icon svg, .block-cro-block-7 .advantage-card-icon svg { width: 32px !important; height: 32px !important; stroke: var(--ds-cta); }
.cro-pain-tabs .advantage-card-title, .block-cro-block-7 .advantage-card-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  text-transform: uppercase;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-space-4);
}
.cro-pain-tabs .advantage-metrics, .block-cro-block-7 .advantage-metrics {
  display: grid; grid-template-columns: 1fr; gap: var(--ds-space-3);
  text-align: left;
}
.cro-pain-tabs .metric-item, .block-cro-block-7 .metric-item {
  display: flex; align-items: center; gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  background: var(--ds-paper-2);
  border-radius: var(--ds-radius);
}
.cro-pain-tabs .metric-icon-wrapper, .block-cro-block-7 .metric-icon-wrapper {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  background: var(--scheme-card-bg, #fff);
  border-radius: var(--ds-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ds-trust);
}
.cro-pain-tabs .metric-icon-wrapper svg, .block-cro-block-7 .metric-icon-wrapper svg { width: 22px !important; height: 22px !important; stroke: var(--ds-trust); }
.cro-pain-tabs .metric-value, .block-cro-block-7 .metric-value { font-family: var(--ds-font-display); font-size: var(--ds-fs-display-sm); color: var(--ds-ink); line-height: 1; }
.cro-pain-tabs .metric-label, .block-cro-block-7 .metric-label { font-family: var(--ds-font-body); font-size: var(--ds-fs-body-sm); color: var(--ds-ink-soft); }

/* Bottom CTA — F-CONTRAST 2026-05-08: paint bg with literal hex
   instead of var(--ds-ink) because the Pattern B rebind below
   re-binds --ds-ink to #fff on this same selector for descendants;
   that feedback would turn the bg white. Literal hex is unaffected. */
.cro-pain-tabs .section-cta-container, .block-cro-block-7 .section-cta-container {
  margin-top: var(--ds-space-7);
  padding: var(--ds-space-6);
  background: #0e0f0c;
  border-radius: var(--ds-radius-lg);
  text-align: center;
  color: #fff;
}
.cro-pain-tabs .section-cta-container h3, .block-cro-block-7 .section-cta-container h3 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 var(--ds-space-3);
  letter-spacing: 0.005em;
}
.cro-pain-tabs .section-cta-container p, .block-cro-block-7 .section-cta-container p {
  font-family: var(--ds-font-body);
  color: rgba(255,247,227,.85);
  margin: 0 0 var(--ds-space-4);
  max-width: 60ch;
  margin-left: auto; margin-right: auto;
}
.cro-pain-tabs .section-cta-container .btn-primary, .block-cro-block-7 .section-cta-container .btn-primary {
  background: var(--ds-cta-aa, var(--ds-cta-dk)) !important;
  color: #fff !important;
  display: inline-flex !important;
  flex-direction: column;
  padding: var(--ds-space-3) var(--ds-space-5) !important;
  border-radius: var(--ds-radius) !important;
  text-decoration: none;
  box-shadow: var(--ds-shadow-cta);
}
.cro-pain-tabs .section-cta-container .btn-primary .btn-main-text, .block-cro-block-7 .section-cta-container .btn-primary .btn-main-text { font-size: var(--ds-fs-body); font-weight: 700; }
.cro-pain-tabs .section-cta-container .btn-primary .btn-sub-text, .block-cro-block-7 .section-cta-container .btn-primary .btn-sub-text { font-size: var(--ds-fs-body-sm); font-weight: 400; opacity: 0.92; margin-top: 2px; }

/* Hard fallback: any rogue SVG inside this section is constrained */
.cro-pain-tabs svg, .block-cro-block-7 svg { max-width: 100%; height: auto; }

/* Responsive nudges */
@media (max-width: 768px) {
  .cro-pain-tabs .tab-title, .block-cro-block-7 .tab-title { font-size: 1.6rem; }
  .cro-pain-tabs .solution-box, .block-cro-block-7 .solution-box { padding: var(--ds-space-4); }
  .cro-pain-tabs .quote-form-card,
  .block-cro-block-7 .quote-form-card,
  .cro-pain-tabs .services-card,
  .block-cro-block-7 .services-card,
  .cro-pain-tabs .advantage-card,
  .block-cro-block-7 .advantage-card,
  .cro-pain-tabs .trust-proof-card, .block-cro-block-7 .trust-proof-card { padding: var(--ds-space-4); }
  .cro-pain-tabs .section-cta-container, .block-cro-block-7 .section-cta-container { padding: var(--ds-space-5) var(--ds-space-4); }
  .cro-pain-tabs .section-cta-container h3, .block-cro-block-7 .section-cta-container h3 { font-size: 1.6rem; }
}

/* ─────────────────────────────────────────────────────────────────
   Merged from block-cro-block-7.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-7 { 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-7 .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-7 .section-header-divider { background: var(--scheme-rule); }

/* Trust badges — pill row above the form/headline. */
.block-cro-block-7 .trust-badges-inline { gap: var(--ds-space-2); margin-bottom: var(--ds-space-5); }
.block-cro-block-7 .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-7 .trust-icon-svg svg { stroke: var(--ds-trust); }

/* Live activity dot. */
.block-cro-block-7 .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-7 .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-7 .btn-cta,
.block-cro-block-7 .btn-orange,
.block-cro-block-7 .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-7 .btn-cta:hover,
.block-cro-block-7 .btn-orange:hover,
.block-cro-block-7 .btn-gradient:hover { background: var(--ds-cta-dk); color: #fff; }

/* Form fields shared across CRO blocks (lead-form / hero-form / calculator). */
.block-cro-block-7 input[type="text"],
.block-cro-block-7 input[type="email"],
.block-cro-block-7 input[type="tel"],
.block-cro-block-7 input[type="number"],
.block-cro-block-7 select,
.block-cro-block-7 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-7 input:focus,
.block-cro-block-7 select:focus,
.block-cro-block-7 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-7 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-7 .pain-tab,
.block-cro-block-7 .pain-card,
.block-cro-block-7 .timeline-step,
.block-cro-block-7 .stat-card,
.block-cro-block-7 .calculator-result {
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
}

/* Floating CTA bar (mobile). */
.block-cro-block-7 .floating-cta-bar {
  font-family: var(--ds-font-body);
  background: var(--ds-ink);
  border-top: 1px solid var(--ds-rule-dark);
}
.block-cro-block-7 .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-7 .float-cta-btn.phone { background: var(--ds-trust); color: #fff; }
.block-cro-block-7 .float-cta-btn.quote { background: var(--ds-cta-aa, var(--ds-cta-dk));   color: #fff; }

/* ── Validate-2026-05-08 fixes ── */
/* Group B: gallery-dot width (was 8px). Use invisible padding to grow hit area without changing visual. */
.cro-pain-tabs .gallery-dot,
.block-cro-block-7 .gallery-dot {
  min-width: var(--ds-touch-target, 48px) !important;
  position: relative;
}
.cro-pain-tabs .gallery-dot::before,
.block-cro-block-7 .gallery-dot::before {
  content: "";
  position: absolute;
  inset: -16px -16px;  /* expand hit area */
}
/* Group D: prefers-reduced-motion for tab autoswitching */
@media (prefers-reduced-motion: reduce) {
  .cro-pain-tabs *,
  .block-cro-block-7 * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   T2-CRO-PAIN-TABS polish (2026-05-08, wave 6 fix-team)
   First visible module above the fold; tighten section rhythm,
   modernise tab nav to pill style with proper active treatment,
   add card surface to tab panels and a 16/9 image wrapper. All
   colors token-bound. Overrides above legacy (no !important
   beyond what the section already carries).
   ───────────────────────────────────────────────────────────── */

/* Section padding + background (per A-FRONT spec).
   Use logical padding-block / padding-inline so design-system's
   .section-lg vertical pad is replaced cleanly and the container's
   default 15px gutter is augmented to ≥16px on narrowest viewports.
   !important on the bg overrides the legacy paper-2 declaration above
   in this same file (line ~11) which carried !important for scheme parity. */
.section.cro-pain-tabs.block-cro-block-7,
.section.block-cro-block-7 {
  padding-block: clamp(80px, 12vh, 120px);
  padding-inline: clamp(16px, 5vw, 32px);
  background: var(--ds-paper) !important;
}

/* Neutralise Bootstrap container side padding (we own padding-inline now)
   and let the inner row breathe to the section edge. */
.section.block-cro-block-7 > .container,
.section.block-cro-block-7 > .container-fluid {
  padding-inline: 0;
  max-width: 1200px;
}
.section.block-cro-block-7 .row {
  margin-inline: 0;
}
.section.block-cro-block-7 .col-lg-12 {
  padding-inline: 0;
}

/* Section header (eyebrow + h2 + intro) — rendered via twig override. */
.block-cro-block-7 .cro-pt-header {
  max-width: 65ch;
  margin: 0 0 clamp(32px, 5vw, 48px);
}
/* Eyebrow — !important on font-size to defeat the design-system
   `[class*="-eyebrow"]` rule that sets var(--ds-fs-eyebrow) → 14px.
   Color uses --ds-cta-aa (cta-dk #bb4d0d) which is the AA-safe variant
   of the CTA orange — yields 4.91:1 against --ds-paper, vs. 3.26:1 for
   the bright ember --ds-cta which fails AA at 13px body text. */
.section.block-cro-block-7 .cro-pt-eyebrow,
.block-cro-block-7 .cro-pt-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ds-cta-aa, var(--ds-cta-dk));
  font-family: var(--ds-font-body);
  margin: 0 0 12px;
}
.block-cro-block-7 .cro-pt-h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  color: var(--ds-ink);
  margin: 0 0 16px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.block-cro-block-7 .cro-pt-intro {
  font-family: var(--ds-font-body);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.55;
  color: var(--ds-ink-soft);
  max-width: 65ch;
  margin: 0;
}

/* Tab nav — modern pill style (replaces underline-row spec).
   Selectors mirror legacy `.section.block-cro-block-7 .cro-pain-tabs .tab-link`
   specificity (0,3,0) so this final-loaded file wins the cascade without !important. */
.section.block-cro-block-7 .cro-pain-tabs .pain-tabs-nav,
.section.block-cro-block-7 .pain-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0 0 clamp(32px, 5vw, 48px);
  border-bottom: 0;
  grid-template-columns: none;
  -webkit-overflow-scrolling: touch;
}

/* Tab link — !important on the visual properties to defeat the
   T3-BUTTON-SYSTEM global rule in design-system.css which carries
   specificity (0,8,2) via 8 chained :not() pseudo-classes. We scope
   strictly to .pain-tabs-nav .tab-link inside this section so no
   bleed-through to other components. */
.section.block-cro-block-7 .cro-pain-tabs .tab-link,
.section.block-cro-block-7 .pain-tabs-nav .tab-link {
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: var(--ds-paper-2) !important;
  border: 1px solid var(--ds-rule) !important;
  font-family: var(--ds-font-body);
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2;
  color: var(--ds-ink) !important;
  /* TEAM-POLISH 2026-05-08: bump touch target 44→48 to match site-wide token
     and AARP guidance. Keeps the visual pill height (1.2 line-height + 12px
     padding ≈ 42px text box) — the extra 4px is invisible buffer. */
  min-height: var(--ds-touch-target, 48px);
  margin-bottom: 0;
  text-decoration: none;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* TEAM-POLISH: explicit transition on the only properties that change on
     hover/active so we never get jitter from box-shadow recomputation. */
  transition: background-color var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease),
              border-color var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease),
              color var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease);
}
/* TEAM-POLISH: explicit focus ring for keyboard users on the pill nav. */
.section.block-cro-block-7 .cro-pain-tabs .tab-link:focus-visible,
.section.block-cro-block-7 .pain-tabs-nav .tab-link:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring, 0 0 0 3px var(--ds-cta)) !important;
}
.section.block-cro-block-7 .cro-pain-tabs .tab-link:hover:not(.active),
.section.block-cro-block-7 .pain-tabs-nav .tab-link:hover:not(.active) {
  background: var(--ds-paper) !important;
  border-color: var(--ds-ink-mute) !important;
  color: var(--ds-ink) !important;
}
.section.block-cro-block-7 .cro-pain-tabs .tab-link.active,
.section.block-cro-block-7 .pain-tabs-nav .tab-link.active {
  background: var(--ds-ink) !important;
  color: var(--ds-paper) !important;
  border-color: var(--ds-ink) !important;
  font-weight: 700 !important;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(14, 15, 12, 0.12) !important;
}

/* Tab content panel — white card with shadow */
.section.block-cro-block-7 .pain-tabs-content {
  background: #fff;
  border: 1px solid var(--ds-rule);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(14, 15, 12, 0.06);
  padding: clamp(24px, 3vw, 32px);
  margin-bottom: clamp(32px, 5vw, 48px);
}
/* Defuse legacy tab-pane card-in-card styling so the outer panel is the card. */
.section.block-cro-block-7 .cro-pain-tabs .tab-pane.active,
.section.block-cro-block-7 .pain-tabs-content .tab-pane.active {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Gallery image wrapper — 16/9 with cover img (per A-FRONT spec) */
.section.block-cro-block-7 .cro-pain-tabs .gallery-image-wrapper,
.section.block-cro-block-7 .gallery-image-wrapper {
  aspect-ratio: 16 / 9;
  max-height: none;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ds-paper-2);
}
.section.block-cro-block-7 .cro-pain-tabs .gallery-image-wrapper img,
.section.block-cro-block-7 .gallery-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Trust gallery surrounding chrome — tighten radius to match new card */
.section.block-cro-block-7 .cro-pain-tabs .trust-gallery,
.section.block-cro-block-7 .trust-gallery {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(14, 15, 12, 0.04);
}

/* Mobile pills — let them wrap naturally; on very narrow widths allow horizontal scroll. */
@media (max-width: 600px) {
  .section.block-cro-block-7 .cro-pain-tabs .pain-tabs-nav,
  .section.block-cro-block-7 .pain-tabs-nav {
    gap: 8px;
    flex-wrap: wrap;
    grid-template-columns: none;
  }
  .section.block-cro-block-7 .cro-pain-tabs .tab-link,
  .section.block-cro-block-7 .pain-tabs-nav .tab-link {
    flex: 0 1 auto;
    padding: 12px 18px;
    font-size: 14px;
    /* TEAM-POLISH 2026-05-08: 44→48 touch target floor for mobile parity. */
    min-height: var(--ds-touch-target, 48px);
    width: auto;
  }
  .section.block-cro-block-7 .pain-tabs-content {
    padding: 20px;
  }
}
@media (max-width: 360px) {
  /* Last-resort: horizontal scroll when even wrapping can't fit four pills. */
  .section.block-cro-block-7 .cro-pain-tabs .pain-tabs-nav,
  .section.block-cro-block-7 .pain-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .section.block-cro-block-7 .cro-pain-tabs .pain-tabs-nav::-webkit-scrollbar,
  .section.block-cro-block-7 .pain-tabs-nav::-webkit-scrollbar { display: none; }
}

/* Bottom CTA card — tighten margin to header rhythm */
.section.block-cro-block-7 .cro-pain-tabs .section-cta-container,
.section.block-cro-block-7 .section-cta-container {
  margin-top: clamp(32px, 5vw, 48px);
}

/* ─────────────────────────────────────────────────────────────────
   FIX-B7-20260508-163000: contrast bug — h3.text-white invisible and
   .solution-guarantee link ink-on-moss. Root cause: these callout
   surfaces hardcode dark/colored backgrounds without sitting inside
   a .scheme-ink/.scheme-trust parent, so the design-system guardrail
   that rebinds --ds-ink → var(--scheme-fg) doesn't fire. Local fix:
   rebind --scheme-fg / --scheme-bg / --ds-ink on these surfaces so
   any descendant that reads any of those tokens resolves to white.
   ───────────────────────────────────────────────────────────── */

/* Bottom dark CTA card — rebind scheme tokens locally so the h3.text-white
   inside (and any descendant using var(--ds-ink) for color) becomes white. */
.section.block-cro-block-7 .cro-pain-tabs .section-cta-container,
.section.block-cro-block-7 .section-cta-container {
  --scheme-fg: #fff;
  --scheme-bg: var(--ds-ink);
  --ds-ink: #fff; /* defensive — any descendant ink-color usage maps to white */
}
/* Belt-and-braces: ensure h3.text-white actually paints white on the dark card. */
.section.block-cro-block-7 .section-cta-container h3.text-white,
.block-cro-block-7 .section-cta-container h3.text-white {
  color: #fff !important;
}

/* .solution-guarantee link sits on moss-green (--ds-trust) bg. Its existing
   `color: #fff` resolves --scheme-fg → --ds-ink in the
   default light scheme (ratio 2.73, FAIL). Pin to paper-cream which yields
   ~7+ on moss-green for AAA. */
.cro-pain-tabs .solution-guarantee,
.block-cro-block-7 .solution-guarantee {
  color: var(--ds-paper, #fff7e3) !important;
}

/* Gallery dots: keep a comfortable tap target without painting it as the dot. */
.section.block-cro-block-7 .trust-gallery .gallery-dot,
.section.block-cro-block-7 .cro-pain-tabs .trust-gallery .gallery-dot {
  display: inline-grid;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              opacity var(--ds-duration-fast) var(--ds-ease) !important;
}

.section.block-cro-block-7 .trust-gallery .gallery-dot::before,
.section.block-cro-block-7 .cro-pain-tabs .trust-gallery .gallery-dot::before {
  content: "";
  position: static;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              transform var(--ds-duration-fast) var(--ds-ease);
}

.section.block-cro-block-7 .trust-gallery .gallery-dot:hover::before,
.section.block-cro-block-7 .cro-pain-tabs .trust-gallery .gallery-dot:hover::before {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.15);
}

.section.block-cro-block-7 .trust-gallery .gallery-dot.active::before,
.section.block-cro-block-7 .cro-pain-tabs .trust-gallery .gallery-dot.active::before {
  background: #fff;
}

.section.block-cro-block-7 .trust-gallery .gallery-dot::after,
.section.block-cro-block-7 .cro-pain-tabs .trust-gallery .gallery-dot::after {
  content: none;
}

.section.block-cro-block-7 .trust-gallery .gallery-dot .dot-progress,
.section.block-cro-block-7 .cro-pain-tabs .trust-gallery .gallery-dot .dot-progress {
  top: 50% !important;
  left: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin: -9px 0 0 -9px !important;
  border-width: 2px !important;
}