/* ══════════════════════════════════════════════════════════════════════════
   MID-PAGE CTA — grid-width split card (.mcta-)  ·  shared across products
   ──────────────────────────────────────────────────────────────────────────
   Single source for the .mcta component. clarity-core.css @imports this; pages
   that don't link core can link this file directly:
     <link rel="stylesheet" href="…/_clarity-design-system/core/css/mcta.css">
   Assets resolve relative to this file → ../assets/ (core/assets/).

   NOTE: inner selectors are scoped as `.mcta .mcta-*` (specificity 0,2,0) ON
   PURPOSE — so page-level base rules like `.cpf-wrap h2` / `.iec-section p`
   (0,1,1) can't bleed in and recolor/resize the CTA. Keep them scoped.
   ══════════════════════════════════════════════════════════════════════════ */
.mcta, .mcta * { box-sizing: border-box; }
.mcta {
  position: relative; isolation: isolate;
  max-width: 1180px; margin: 48px auto;
  border-radius: 22px; overflow: hidden; color: #fff;
  display: grid; grid-template-columns: 1.04fr 0.96fr; min-height: 360px;
  box-shadow: 0 26px 50px -26px rgba(14,35,48,0.45);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mcta .mcta-left {
  position: relative; z-index: 1; overflow: hidden;
  padding: 52px 48px; display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(120% 120% at 0% 120%, rgba(0,196,170,0.5) 0%, rgba(0,196,170,0) 55%),
    linear-gradient(158deg, #1a3450 0%, #184058 22%, #135c6c 42%, #169f57 70%, #22c050 86%, #28c856 100%);
}
.mcta .mcta-h {
  position: relative; z-index: 1;
  color: #fff; font-size: 36px; line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 18px; font-weight: 600; text-transform: none;
}
.mcta .mcta-h span, .mcta .mcta-h b { display: block; color: inherit; }
.mcta .mcta-h b { font-weight: 800; }
.mcta .mcta-sub {
  position: relative; z-index: 1;
  color: rgba(255,255,255,0.85); font-size: 16.5px; line-height: 1.55;
  margin: 0 0 30px; max-width: 40ch; font-weight: 400;
}
.mcta .mcta-btn {
  position: relative; z-index: 1;
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  background: #13243a; color: #fff; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5); transition: background 0.2s, transform 0.15s;
}
.mcta .mcta-btn:hover { background: #1d3350; transform: translateY(-1px); color: #fff; }
.mcta .mcta-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
/* dot swirl on the LEFT panel, right-aligned toward the seam, behind copy */
.mcta .mcta-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../assets/cta-dots.png) no-repeat center / cover; opacity: .6; }
.mcta .mcta-right { position: relative; z-index: 1; overflow: hidden; min-height: 360px;
  background: #0e2330 url(../assets/cta-team.jpg) center / cover no-repeat; }
.mcta .mcta-right::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(16,53,72,0.92) 0%, rgba(16,53,72,0.42) 24%, rgba(8,20,26,0.12) 58%, rgba(8,20,26,0.28) 100%); }
.mcta .mcta-logo { position: absolute; left: 34px; bottom: 30px; z-index: 3; display: flex; align-items: center; gap: 14px; margin: 0; }
.mcta .mcta-logo-tile { width: 54px; height: 54px; border-radius: 15px; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px -8px rgba(0,0,0,0.5); flex: 0 0 54px; }
/* SVG already contains the rounded tile + swirl — fill the tile so it renders at
   native proportions (matches the banner logo), not shrunk inside a second tile */
.mcta .mcta-logo-tile svg { width: 100%; height: 100%; display: block; }
.mcta .mcta-logo-name { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.mcta .mcta-logo-name sup { font-size: 0.55em; font-weight: 600; opacity: 0.85; }
@media (max-width: 760px) {
  .mcta { grid-template-columns: 1fr; }
  .mcta .mcta-h { font-size: 28px; }
  .mcta .mcta-left { padding: 40px 28px; }
  .mcta .mcta-right { min-height: 240px; }
}