/* Phase 5C-03 — CTA and forward-panel cohesion
   Purpose: make conversion panels feel like one reusable component, not page-specific afterthoughts. */
:root {
  --td-cta-bg: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px), linear-gradient(135deg, #071A32 0%, #0B2545 62%, #12355D 100%);
  --td-cta-size: 24px 24px, 24px 24px, auto;
  --td-cta-border: rgba(44, 166, 164, 0.34);
}

.framework-forward-panel,
.home-software-diagnostics__cta-panel,
.article-cta-panel,
.article-forward__panel,
.footer-cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--td-cta-border) !important;
  border-radius: var(--telstar-radius-lg) !important;
  background: var(--td-cta-bg) !important;
  background-size: var(--td-cta-size) !important;
  color: #FFFFFF;
  box-shadow: 0 22px 58px rgba(0, 16, 38, 0.16);
}

.framework-forward-panel::before,
.home-software-diagnostics__cta-panel::before,
.article-cta-panel::before,
.article-forward__panel::before,
.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--telstar-teal), rgba(134, 244, 241, 0.14));
}

.framework-forward-panel h2,
.home-software-diagnostics__cta-copy h3,
.article-cta-panel h2,
.article-forward__panel h2,
.footer-cta h2 {
  color: #FFFFFF;
  letter-spacing: -0.052em;
}

.framework-forward-panel p,
.home-software-diagnostics__cta-copy p,
.article-cta-panel p,
.article-forward__panel p,
.footer-cta p {
  color: rgba(244, 246, 248, 0.80);
  line-height: 1.58;
}

.framework-forward-panel__grid,
.home-software-diagnostics__cta-panel,
.article-cta-panel {
  gap: clamp(1rem, 3vw, 2.2rem);
}

.framework-forward-panel__eyebrow,
.article-section-eyebrow,
.home-software-diagnostics__cta-copy .method-chip {
  color: var(--telstar-teal-soft) !important;
}

.framework-forward-panel .telstar-btn--primary,
.home-software-diagnostics__cta-panel .telstar-btn--primary,
.article-cta-panel .telstar-btn--primary,
.article-forward__panel .telstar-btn--primary,
.footer-cta .telstar-btn--primary {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--telstar-primary);
}

.framework-forward-panel .telstar-btn--primary:hover,
.framework-forward-panel .telstar-btn--primary:focus-visible,
.home-software-diagnostics__cta-panel .telstar-btn--primary:hover,
.home-software-diagnostics__cta-panel .telstar-btn--primary:focus-visible,
.article-cta-panel .telstar-btn--primary:hover,
.article-cta-panel .telstar-btn--primary:focus-visible,
.article-forward__panel .telstar-btn--primary:hover,
.article-forward__panel .telstar-btn--primary:focus-visible,
.footer-cta .telstar-btn--primary:hover,
.footer-cta .telstar-btn--primary:focus-visible {
  background: var(--telstar-surface-low);
  border-color: var(--telstar-surface-low);
  color: var(--telstar-primary);
}

.framework-forward-panel .telstar-btn--secondary,
.home-software-diagnostics__cta-panel .telstar-btn--secondary,
.article-cta-panel .telstar-btn--secondary,
.article-forward__panel .telstar-btn--secondary,
.footer-cta .telstar-btn--secondary {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.34);
  color: #FFFFFF;
}

.framework-forward-panel .telstar-btn--secondary:hover,
.framework-forward-panel .telstar-btn--secondary:focus-visible,
.home-software-diagnostics__cta-panel .telstar-btn--secondary:hover,
.home-software-diagnostics__cta-panel .telstar-btn--secondary:focus-visible,
.article-cta-panel .telstar-btn--secondary:hover,
.article-cta-panel .telstar-btn--secondary:focus-visible,
.article-forward__panel .telstar-btn--secondary:hover,
.article-forward__panel .telstar-btn--secondary:focus-visible,
.footer-cta .telstar-btn--secondary:hover,
.footer-cta .telstar-btn--secondary:focus-visible {
  background: rgba(255,255,255,0.11);
  border-color: rgba(134,244,241,0.72);
  color: #FFFFFF;
}

.footer-cta {
  margin-top: 1.35rem;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.footer-cta .telstar-cta-group {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .framework-forward-panel__grid,
  .home-software-diagnostics__cta-panel,
  .article-cta-panel {
    grid-template-columns: 1fr !important;
  }

  .framework-forward-panel__actions,
  .article-cta-panel__actions,
  .home-software-diagnostics__cta-actions .telstar-cta-group {
    justify-content: flex-start;
  }
}