/* ==========================================================================
   UNIT 11a · FINAL CTA BLOCK
   --------------------------------------------------------------------------
   A Transmission-gradient panel (one of the places the brand guide allows
   the gradient) on a calm cloud surface.
   • Visual: the pixel-F mark. Its blocks start scattered and assemble as
     the panel scrolls into view — driven by a LIVE getBoundingClientRect()
     reading (this section sits below the FAQ accordion, so no cached
     ScrollTrigger positions are used).
   • Copy + both CTAs on the navy end of the gradient for contrast.
   Static fallback: the mark is fully assembled.
   ========================================================================== */

.cta {
  background: linear-gradient(180deg, var(--c-cloud) 0%, #E9F1F4 100%);
}

.cta__panel {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 4.5rem);
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 2rem);
  background: var(--g-transmission);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

[dir="rtl"] .cta__panel {
  background: linear-gradient(225deg, #00A9B6 0%, #013E6A 48%, #02113A 100%);
}

@media (min-width: 48rem) {
  .cta__panel {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

/* Soft light + orbit rings inside the panel */
.cta__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Mobile: copy sits below the mark → navy scrim rises from the bottom */
  background:
    radial-gradient(ellipse 50% 40% at 20% 15%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(2, 17, 58, 0) 20%, rgba(2, 17, 58, 0.7) 45%, rgba(2, 17, 58, 0.9) 100%);
  pointer-events: none;
}

/* Desktop: copy sits at inline-end → scrim runs along the inline axis */
@media (min-width: 48rem) {
  .cta__glow {
    background:
      radial-gradient(ellipse 45% 60% at 18% 25%, rgba(255, 255, 255, 0.14), transparent 70%),
      linear-gradient(90deg, rgba(2, 17, 58, 0) 25%, rgba(2, 17, 58, 0.65) 50%, rgba(2, 17, 58, 0.85) 100%);
  }
}

[dir="rtl"] .cta__glow {
  scale: -1 1;
}

.cta__ring {
  position: absolute;
  inset-block-start: -10rem;
  inset-inline-start: -10rem;
  z-index: -1;
  inline-size: 34rem;
  block-size: 34rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4rem rgba(255, 255, 255, 0.03), 0 0 0 8rem rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Pixel-F mark
   --------------------------------------------------------------------------- */
.cta__mark {
  inline-size: min(100%, 15rem);
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .cta__mark {
    inline-size: min(100%, 19rem);
  }
}

.cta__mark svg {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 30px rgba(2, 17, 58, 0.35));
}

[dir="rtl"] .cta__mark svg {
  scale: -1 1;
}

.cta__pix {
  fill: #FFFFFF;
}

.cta__pix--teal {
  fill: #7FDCE3;
}

/* ---------------------------------------------------------------------------
   Copy + actions
   --------------------------------------------------------------------------- */
.cta__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .cta__copy {
    justify-items: start;
    text-align: start;
  }
}

.cta__copy h2 {
  max-inline-size: 22ch;
  color: var(--c-on-dark);
}

.cta__copy p {
  max-inline-size: 34rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.82);
}

.cta__copy .cta__strong {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-on-dark);
}

.cta__actions {
  margin-block-start: var(--space-xs);
  inline-size: 100%;
}

@media (min-width: 30rem) {
  .cta__actions {
    inline-size: auto;
  }
}

@media (min-width: 48rem) {
  .cta__actions {
    justify-content: flex-start;
  }
}

/* Primary button on the gradient: white-lifted for contrast */
.cta__actions .btn--primary {
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
}