/* ==========================================================================
   LP02 · UNIT 11 · FINAL CTA BLOCK — the relationship, strengthened
   --------------------------------------------------------------------------
   A Transmission-gradient panel (allowed for the final CTA). The hero's
   two portraits return — advisor and client — now connected THROUGH the
   pixel-F: Fatorly sits in the middle of the relationship, carrying it.
   • Visual on top, centred; copy + CTAs below (different from LP01's
     side-by-side CTA panel).
   • pcta.js drives one progress value from a LIVE getBoundingClientRect()
     (this section sits below the FAQ accordion): portraits glide in from
     the sides, the two arcs draw, the F's pixels assemble.
   • A navy scrim rises under the copy so white text keeps AA contrast on
     every part of the gradient.
   Static fallback: everything in place.
   ========================================================================== */

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

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

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

/* Scrim: light at the top (visual), deep navy under the copy */
.pcta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 35% at 50% 18%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(2, 17, 58, 0) 15%, rgba(2, 17, 58, 0.72) 48%, rgba(2, 17, 58, 0.9) 100%);
  pointer-events: none;
}

/* Concentric rings centred behind the F */
.pcta__rings {
  position: absolute;
  inset-block-start: 4%;
  inset-inline-start: 50%;
  z-index: -1;
  inline-size: 36rem;
  block-size: 36rem;
  translate: -50% -30%;
  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;
}

[dir="rtl"] .pcta__rings {
  translate: 50% -30%;
}

/* ---------------------------------------------------------------------------
   Relationship visual (portrait · arc · F · arc · portrait)
   Shares one 300 × 120 box with the SVG; portraits are %-positioned.
   --------------------------------------------------------------------------- */
.pcta__visual {
  position: relative;
  inline-size: min(100%, 34rem);
  aspect-ratio: 300 / 120;
  direction: ltr;                /* advisor ↔ client composition is fixed */
}

.pcta__svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.pcta__arc {
  fill: none;
  stroke: #7FDCE3;
  stroke-width: 2;
  stroke-linecap: round;
}

.pcta__arc-glow {
  fill: none;
  stroke: rgba(0, 169, 182, 0.45);
  stroke-width: 6;
  stroke-linecap: round;
  filter: blur(2px);
}

.pcta__pix {
  fill: #FFFFFF;
}

.pcta__pix--frag {
  fill: #7FDCE3;
}

.pcta__person {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--x);  /* the visual box is direction: ltr, so this is stable */
  inline-size: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55), 0 0 0 8px rgba(0, 169, 182, 0.18);
}

.pcta__person img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Copy + actions
   --------------------------------------------------------------------------- */
.pcta__copy {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  max-inline-size: 42rem;
}

.pcta__copy h2 {
  color: var(--c-on-dark);
}

.pcta__copy p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.84);
}

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

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

@media (min-width: 30rem) {
  .pcta__actions {
    inline-size: auto;
    justify-content: center;
  }
}