/* ─────────────────────────────────────────────────────────────────
   CRO Block 2 — Hero Form (final override)
   Loaded last via base.html.twig 1..17 loop. Token-bound rebuild
   that overrides legacy cro-hero-form.css cosmetic rules.
   Scheme: ink (dark) so the form-card pops as paper-on-dark.
   ───────────────────────────────────────────────────────────── */

/* ── Section shell — ink (dark) surface ──────────────────────── */
.section.cro-hero-form,
.section.block-cro-block-2,
.section.hero-leadgen-fixed {
  background: var(--ds-ink) !important;
  color: #fff !important;
  padding: var(--ds-section-py-lg) 0 !important;
  position: relative;
  overflow: hidden;
}
.section.cro-hero-form .hero-bg-image-fixed,
.section.cro-hero-form .hero-bg-overlay-fixed { display: none !important; }
@media (max-width: 768px) {
  .section.cro-hero-form,
  .section.block-cro-block-2 {
    padding: var(--ds-section-py-sm) 0 !important;
  }
}

/* Two-column responsive grid */
.cro-hero-form .container > .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-6);
  align-items: start;
}
@media (min-width: 992px) {
  .cro-hero-form .container > .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ds-space-7);
  }
}
.cro-hero-form .col-lg-6 {
  width: 100%; max-width: 100%; flex: none; padding: 0;
}

/* ── Left column: Problem / Solution form / Trust ────────────── */
.cro-hero-form .hero-problem-section { margin-bottom: var(--ds-space-5); }
.cro-hero-form .hero-headline-fixed {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-xl);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: #fff !important;
  margin: 0 0 var(--ds-space-4);
  text-transform: uppercase;
}
.cro-hero-form .hero-subheadline-fixed {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  color: rgba(255,247,227,.82) !important;
  margin: 0 0 var(--ds-space-5);
  line-height: 1.5;
}
.cro-hero-form .subheadline-text {
  display: none;
  margin: 0;
}
.cro-hero-form .subheadline-text.active { display: block; }

/* ── Solution form card ─────────────────────────────────────── */
.cro-hero-form .hero-solution-combined {
  background: var(--ds-paper) !important;
  color: var(--ds-ink) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-space-5) !important;
  border: 1px solid var(--ds-rule);
}
@media (min-width: 768px) {
  .cro-hero-form .hero-solution-combined { padding: var(--ds-space-6) !important; }
}

.cro-hero-form .solution-header-section { margin-bottom: var(--ds-space-4); }
.cro-hero-form .solution-headline-combined {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-md);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--ds-ink) !important;
  text-transform: uppercase;
  margin: 0 0 var(--ds-space-2);
}
.cro-hero-form .solution-sub-combined {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--ds-ink-soft) !important;
  margin: 0;
}

/* Qualifier pills */
.cro-hero-form .qualifier-section-pills {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  margin: var(--ds-space-4) 0;
}
.cro-hero-form .qualifier-group { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.cro-hero-form .qualifier-label-pill {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  color: var(--ds-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cro-hero-form .qualifier-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.cro-hero-form .qualifier-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.55rem 1rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  background: #fff;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-form .qualifier-pill:hover {
  border-color: var(--ds-cta);
  color: var(--ds-cta);
  transform: translateY(-1px);
}
.cro-hero-form .qualifier-pill.active,
.cro-hero-form .qualifier-pill[aria-pressed="true"] {
  background: var(--ds-cta);
  color: #fff;
  border-color: var(--ds-cta);
  box-shadow: var(--ds-shadow-cta);
}
.cro-hero-form .qualifier-pill.popular::after {
  content: "★";
  color: var(--ds-cta);
  margin-left: 0.25rem;
  font-size: 0.85em;
}
.cro-hero-form .qualifier-pill .pill-icon,
.cro-hero-form .qualifier-pill .pill-icon svg,
.cro-hero-form .qualifier-pill .pill-icon img,
.cro-hero-form .qualifier-pill .pill-star,
.cro-hero-form .qualifier-pill .pill-star svg {
  width: 14px !important;
  height: 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cro-hero-form .qualifier-pill .pill-badge {
  background: color-mix(in srgb, var(--ds-cta) 18%, white);
  color: var(--ds-cta-dk);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.25rem;
}

/* CTA primary button */
.cro-hero-form .cta-primary-combined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  width: 100%;
  padding: 1rem 1.4rem !important;
  margin-top: var(--ds-space-4);
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: var(--ds-fs-body-lg);
  background: var(--ds-cta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-cta);
  cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out);
}
.cro-hero-form .cta-primary-combined:hover {
  background: var(--ds-cta-dk) !important;
  transform: translateY(-1px);
}
.cro-hero-form .cta-primary-combined svg,
.cro-hero-form .cta-primary-combined img {
  width: 22px !important;
  height: 22px !important;
}
.cro-hero-form .cta-text-combined {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.cro-hero-form .cta-main-combined {
  font-size: var(--ds-fs-body-lg);
  font-weight: 700;
  line-height: 1.2;
}
.cro-hero-form .cta-sub-combined {
  font-size: var(--ds-fs-body-sm);
  font-weight: 400;
  opacity: 0.92;
  line-height: 1.2;
}

/* Email form section */
.cro-hero-form .email-form-section {
  margin-top: var(--ds-space-4);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-rule);
}
.cro-hero-form .email-form-divider { display: none; }
.cro-hero-form .email-input-label {
  display: block;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: var(--ds-ink-soft);
  margin-bottom: var(--ds-space-2);
}
.cro-hero-form .leadmagnet-input-email {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  background: #fff;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  transition: border-color var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-form .leadmagnet-input-email:focus {
  outline: none;
  border-color: var(--ds-cta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-cta) 22%, transparent);
}
.cro-hero-form .submit-button-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  margin-top: var(--ds-space-3);
  padding: 0.85rem 1.2rem;
  font-family: var(--ds-font-body);
  font-weight: 700;
  background: var(--ds-trust);
  color: #fff;
  border: none;
  border-radius: var(--ds-radius);
  cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-form .submit-button-final:hover { background: var(--ds-trust-dk); }
.cro-hero-form .submit-button-text { font-size: var(--ds-fs-body-lg); }
.cro-hero-form .submit-button-sub { font-size: var(--ds-fs-body-sm); font-weight: 400; opacity: 0.9; }

/* Trust section */
.cro-hero-form .trust-section-standalone {
  margin-top: var(--ds-space-5) !important;
  padding-top: var(--ds-space-4);
}
.cro-hero-form .trust-text-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: rgba(255,247,227,.82);
  margin: 0 0 var(--ds-space-3);
}
.cro-hero-form .trust-sparkle,
.cro-hero-form .trust-sparkle svg {
  width: 14px !important;
  height: 14px !important;
}
.cro-hero-form .trust-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.cro-hero-form .trust-badge-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  background: rgba(255,255,255,.06);
  color: rgba(255,247,227,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
}
.cro-hero-form .trust-badge-compact svg,
.cro-hero-form .trust-badge-compact img {
  width: 14px !important;
  height: 14px !important;
}

/* ── Right column: Value props / Pain checklist / Phone CTA ─── */
.cro-hero-form .value-props-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-3);
}
@media (min-width: 576px) {
  .cro-hero-form .value-props-grid { grid-template-columns: 1fr 1fr; }
}
.cro-hero-form .value-item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4);
  color: #fff;
}
.cro-hero-form .value-title {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--ds-space-3);
}
.cro-hero-form .value-title svg,
.cro-hero-form .value-title img {
  width: 20px !important;
  height: 20px !important;
  color: var(--ds-cta);
  stroke: var(--ds-cta);
}
.cro-hero-form .value-list {
  list-style: none;
  margin: 0 0 var(--ds-space-3);
  padding: 0;
}
.cro-hero-form .value-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  padding: 0.25rem 0;
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.88);
}
.cro-hero-form .value-list li svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
  color: var(--ds-trust);
  stroke: var(--ds-trust);
  margin-top: 0.25rem;
}
.cro-hero-form .value-cta-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.5rem 0.9rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  color: var(--ds-cta);
  background: color-mix(in srgb, var(--ds-cta) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-cta) 35%, transparent);
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-form .value-cta-compact:hover {
  background: var(--ds-cta);
  color: #fff;
  border-color: var(--ds-cta);
}
.cro-hero-form .value-cta-compact svg,
.cro-hero-form .value-cta-compact img {
  width: 14px !important;
  height: 14px !important;
}

/* Pain checklist */
.cro-hero-form .pain-checklist-dark {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-5) !important;
  margin-bottom: var(--ds-space-4) !important;
}
.cro-hero-form .checklist-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-3);
}
.cro-hero-form .checklist-icon {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
  color: var(--ds-cta);
  stroke: var(--ds-cta);
}
.cro-hero-form .checklist-title-dark {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  letter-spacing: 0.005em;
  color: #fff !important;
  margin: 0;
  text-transform: uppercase;
}
.cro-hero-form .checklist-items-dark {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--ds-space-3) 0;
}
.cro-hero-form .checklist-item-dark {
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.cro-hero-form .checklist-item-dark:last-child { border-bottom: none; }
.cro-hero-form .checklist-item-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.65rem 0;
  cursor: pointer;
  font-family: var(--ds-font-body);
}
.cro-hero-form .checklist-item-header .check-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  color: var(--ds-trust);
  stroke: var(--ds-trust);
}
.cro-hero-form .checklist-item-header .expand-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  margin-left: auto;
  color: rgba(255,247,227,.62);
  stroke: rgba(255,247,227,.62);
  transition: transform var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-form .checklist-item-dark.active .expand-icon { transform: rotate(180deg); }
.cro-hero-form .checkbox-label-dark {
  flex: 1;
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.92);
  font-weight: 500;
}
.cro-hero-form .checklist-item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ds-duration-slow) var(--ds-ease-out);
}
.cro-hero-form .checklist-item-dark.active .checklist-item-content { max-height: 240px; }
.cro-hero-form .checklist-item-text {
  padding: 0 0 var(--ds-space-3) 1.5rem;
  margin: 0;
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.72);
  line-height: 1.5;
}
.cro-hero-form .checklist-footer {
  margin-top: var(--ds-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}
.cro-hero-form .checklist-question-dark {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.82);
  margin: 0;
  font-weight: 600;
}
.cro-hero-form .checklist-cta-tiny {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.5rem 0.9rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  background: var(--ds-cta);
  color: #fff !important;
  border-radius: var(--ds-radius-sm);
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-form .checklist-cta-tiny:hover { background: var(--ds-cta-dk); }
.cro-hero-form .checklist-cta-tiny svg {
  width: 14px !important;
  height: 14px !important;
}

/* Phone CTA */
.cro-hero-form .hero-cta-secondary-fixed {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4);
  text-decoration: none !important;
  color: #fff !important;
  transition: background var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-form .hero-cta-secondary-fixed:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--ds-trust);
}
.cro-hero-form .cta-secondary-main {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}
.cro-hero-form .cta-secondary-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--ds-trust) 28%, transparent);
  color: var(--ds-trust);
  border-radius: 999px;
  flex-shrink: 0;
}
.cro-hero-form .cta-phone-svg,
.cro-hero-form .cta-secondary-icon-wrapper svg,
.cro-hero-form .cta-secondary-icon-wrapper img {
  width: 22px !important;
  height: 22px !important;
}
.cro-hero-form .cta-secondary-text { display: flex; flex-direction: column; }
.cro-hero-form .cta-secondary-number {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  letter-spacing: 0.005em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
}
.cro-hero-form .cta-secondary-hours {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.72);
}
.cro-hero-form .cta-secondary-footer {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-3);
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.72);
}
.cro-hero-form .cta-chat-svg,
.cro-hero-form .cta-secondary-footer svg {
  width: 16px !important;
  height: 16px !important;
}

/* Testimonial */
.cro-hero-form .testimonial-transparent {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4);
}
.cro-hero-form .testimonial-slide-transparent {
  display: none;
}
.cro-hero-form .testimonial-slide-transparent.active { display: block; }
.cro-hero-form .testimonial-quote-transparent {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-fs-body-lg);
  line-height: 1.5;
  font-style: italic;
  color: rgba(255,247,227,.92);
  margin: 0 0 var(--ds-space-3);
}
.cro-hero-form .testimonial-quote-transparent strong { color: var(--ds-cta); font-style: normal; }
.cro-hero-form .testimonial-author-transparent {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: rgba(255,247,227,.72);
  margin: 0;
}
.cro-hero-form .testimonial-nav-transparent {
  display: flex;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-3);
}
.cro-hero-form .testimonial-dot-transparent {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.20);
  cursor: pointer;
  padding: 0;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-form .testimonial-dot-transparent.active { background: var(--ds-cta); }

/* Hard cap any stray icons */
.cro-hero-form svg, .cro-hero-form img { max-width: 100%; }

/* Mobile tightening */
@media (max-width: 575px) {
  .cro-hero-form .hero-headline-fixed { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cro-hero-form .hero-solution-combined,
  .cro-hero-form .pain-checklist-dark { padding: var(--ds-space-4) !important; }
  .cro-hero-form .checklist-footer { flex-direction: column; align-items: flex-start; }
  .cro-hero-form .checklist-cta-tiny { width: 100%; justify-content: center; }
}