/* ══════════════════════════════════════════════════════════════════════════
   CLARITY DESIGN SYSTEM — CORE
   Version 2.0  ·  Product-agnostic style system
   ──────────────────────────────────────────────────────────────────────────
   This file defines the SHARED patterns used across every Clarity product
   page (banner, V14 closer CTA, 2-column Key Takeaways, pain-points grid).
   It consumes palette tokens from :root that live in the sibling file:
     palettes/<product>.css   (loaded BEFORE this file)
   Swapping a product = swapping the palette file.

   Required palette tokens (see palettes/_template.css for the contract):
     Dark surface:   --cds-surface-deep-1, -2, -3       (nav gradient)
     Primary accent: --cds-accent, --cds-accent-2       (CTAs, highlights)
     Accent glow:    --cds-accent-glow-strong, -soft    (rgba forms of accent)
     Cool accent:    --cds-accent-cool                  (pain-point icons)
     Ink:            --cds-ink, --cds-ink-muted, --cds-ink-subtle
     Cool tints:     --cds-tint-cool, --cds-tint-cool-2, --cds-tint-cool-3
     Card border:    --cds-card-border

   Class-prefix legend (kept as historical names for back-compat across 60+
   existing Payment Hub HTML pages; safe to use on any product):
     .phb-*   Page banner at the top of feature/industry/how-to pages
     .pcc-*   Closer CTA (V14 fluid full-width split slice)
     .cpf-*   Core Page Features — Key Takeaways + Pain-points grid

   NOTE: class names NOT renamed to .cds-* to avoid churning existing pages.
         New products can adopt these same classes; they're fully palette-
         driven via CSS vars.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1. PAGE BANNER — .phb- (diagonal gradient + breadcrumbs + logo + H1)
   Usage: place <section class="phb-banner phb-a"> at top of page.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('mcta.css');

.phb-banner, .phb-banner * { box-sizing: border-box; }
.phb-banner {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  isolation: isolate;
}
.phb-crumbs-bar {
  background: rgba(14, 40, 54, 0.55);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 4;
}
.phb-crumbs {
  max-width: 1180px; margin: 0 auto;
  padding: 14px 32px;
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}
.phb-crumbs a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.15s; }
.phb-crumbs a:hover { color: #ffffff; }
.phb-crumbs .phb-crumbs-current { color: var(--cds-accent); font-weight: 600; }
.phb-crumbs-sep { color: rgba(255,255,255,0.3); }
.phb-inner {
  position: relative; z-index: 3;
  max-width: 1180px; margin: 0 auto;
  padding: 44px 32px 52px;
}
.phb-brand { display: inline-flex; align-items: center; margin: 0 0 18px; }
.phb-brand-logo { height: 40px; width: auto; display: block; }
.phb-h1 {
  font-size: 40px; line-height: 1.08; font-weight: 800;
  letter-spacing: -0.022em;
  margin: 0 0 14px; color: #ffffff;
}
.phb-h1 .phb-h1-accent { color: var(--cds-accent); }
.phb-h2 {
  font-size: 16.5px; line-height: 1.6; font-weight: 400;
  color: rgba(255,255,255,0.78);
  margin: 0 0 24px; max-width: 58ch;
}
.phb-buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 4px; }
.phb-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
  line-height: 1; white-space: nowrap;
}
.phb-btn:focus-visible { outline: 3px solid var(--cds-accent-focus, #b2f35a); outline-offset: 3px; }
.phb-btn-primary {
  background: var(--cds-accent); color: var(--cds-surface-deep-1);
  box-shadow: 0 6px 18px -4px var(--cds-accent-glow-strong), inset 0 -1px 0 rgba(0,0,0,0.08);
}
.phb-btn-primary:hover {
  background: var(--cds-accent-2); transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px var(--cds-accent-glow-strong);
}
.phb-btn-play { background: transparent; color: #ffffff; padding: 10px 6px; gap: 12px; }
.phb-btn-play:hover .phb-btn-play-icon { transform: scale(1.05); border-color: rgba(255,255,255,0.9); }
.phb-btn-play-icon {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s, border-color 0.2s;
  flex: 0 0 36px;
}
.phb-btn-play-icon svg { width: 12px; height: 12px; margin-left: 2px; }
.phb-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 72% 40%, var(--cds-accent-glow-soft) 0%, transparent 55%),
    radial-gradient(700px 420px at 30% 100%, var(--cds-cool-glow, rgba(42,122,138,0.32)) 0%, transparent 60%);
}
.phb-a {
  background: linear-gradient(160deg,
    var(--cds-surface-deep-3) 0%,
    var(--cds-surface-deep-1) 50%,
    var(--cds-surface-deep-3) 100%);
}
.phb-a .phb-inner {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 40px; align-items: center;
}
.phb-a-visual { position: relative; min-height: 240px; }
.phb-a-visual svg {
  width: 100%; max-width: 480px; height: auto;
  display: block; margin-left: auto;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,0.35));
}
@media (max-width: 900px) {
  .phb-a .phb-inner { grid-template-columns: 1fr; gap: 24px; padding: 36px 24px 40px; }
  .phb-a-visual { min-height: 180px; order: 2; }
  .phb-h1 { font-size: 30px; }
}

/* Variant B — full-bleed banner background image, single-column text.
   Products opt in by setting --cds-banner-bg to a `background` shorthand
   (e.g. url(...) center/cover no-repeat). Falls back to the default
   gradient when no image is supplied. The `.phb-glow` overlay is hidden
   so the supplied image dominates without competing radial accents.

   Two sizes are supported:
     .phb-b              — full / champion banner (tall, hero-page feel)
     .phb-b.phb-compact  — compact / detail banner (shorter, list-page feel)

   The compact variant rebinds --cds-banner-bg to --cds-banner-bg-compact
   (defined per-product in the palette) and tightens padding + H1 size. */
.phb-b {
  background: var(--cds-banner-bg, linear-gradient(160deg,
    var(--cds-surface-deep-3) 0%,
    var(--cds-surface-deep-1) 50%,
    var(--cds-surface-deep-3) 100%));
}
.phb-b .phb-inner {
  display: block;
  max-width: 1180px; margin: 0 auto;
  padding: 56px 32px 72px;
}
.phb-b .phb-h1 { max-width: 22ch; }
.phb-b .phb-h2 { max-width: 60ch; }
.phb-b .phb-glow { display: none; }
@media (max-width: 900px) {
  .phb-b .phb-inner { padding: 40px 24px 48px; }
  .phb-b .phb-h1 { font-size: 30px; }
}

/* Compact modifier — shorter banner for detail / how-to / sub-pages. */
.phb-b.phb-compact {
  --cds-banner-bg: var(--cds-banner-bg-compact);
}
.phb-b.phb-compact .phb-inner {
  padding: 36px 32px 44px;
}
.phb-b.phb-compact .phb-h1 { font-size: 32px; max-width: 26ch; }
.phb-b.phb-compact .phb-h2 { font-size: 15.5px; margin-bottom: 18px; }
@media (max-width: 900px) {
  .phb-b.phb-compact .phb-inner { padding: 28px 24px 32px; }
  .phb-b.phb-compact .phb-h1 { font-size: 26px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. KEY TAKEAWAYS — 2-column card grid   (.cpf-takeaways)
   Usage: <aside class="cpf-takeaways"> with <div class="cpf-takeaways-grid">
   ══════════════════════════════════════════════════════════════════════════ */

.cpf-takeaways {
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: 14px;
  padding: 36px 40px;
  margin: 32px 0 36px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}
.cpf-takeaways h2 {
  font-size: 22px; font-weight: 700;
  color: var(--cds-ink);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.cpf-takeaways-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 28px;
}
@media (max-width: 640px) { .cpf-takeaways-grid { grid-template-columns: 1fr; } }
.cpf-takeaway-card { display: flex; gap: 14px; align-items: flex-start; }
.cpf-takeaway-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--cds-tint-cool);
  color: var(--cds-accent-cool-2, #2563eb);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.cpf-takeaway-icon svg { width: 16px; height: 16px; display: block; }
.cpf-takeaway-card p {
  margin: 0;
  font-size: 14px; line-height: 1.55; color: var(--cds-ink-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   3. PAIN POINTS — aqua/navy card + cost callout   (.cpf-pain-*)
   Usage: .cpf-pain-card blocks inside a list, .cpf-cost-callout for summary
   ══════════════════════════════════════════════════════════════════════════ */

.cpf-pain-card {
  display: flex; gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--cds-card-border, #bae6fd);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cpf-pain-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--cds-tint-cool);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cds-accent-cool);
  font-size: 18px;
}
.cpf-pain-card strong {
  display: block;
  font-size: 15px;
  color: var(--cds-ink);
  margin-bottom: 2px;
}
.cpf-cost-callout {
  background: var(--cds-tint-cool-3, #f0f9ff);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 16px 0 32px;
  border: 1px solid var(--cds-card-border, #bae6fd);
}
.cpf-cost-callout strong { color: var(--cds-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   4. CLOSER CTA V14 — Fluid Full-Width Split Slice   (.pcc-*)
   Usage: <div class="pcc-cta pcc-v14"> — uses CSS break-out to reach 100vw
   ══════════════════════════════════════════════════════════════════════════ */

.pcc-cta, .pcc-cta * { box-sizing: border-box; }
.pcc-cta {
  position: relative; overflow: hidden;
  border-radius: 20px; color: #ffffff;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  margin: 56px 0 24px;
  isolation: isolate;
  box-shadow: 0 24px 48px -24px rgba(14,35,48,0.55);
}
.pcc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--cds-accent-glow-soft);
  color: var(--cds-accent);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--cds-accent-border, rgba(126,211,33,0.3));
}
.pcc-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cds-accent);
  box-shadow: 0 0 0 4px var(--cds-accent-glow-soft);
}
.pcc-title {
  font-size: 34px; line-height: 1.12; font-weight: 800;
  letter-spacing: -0.025em;
  margin: 16px 0 12px; color: #ffffff;
}
.pcc-title .pcc-accent { color: var(--cds-accent); }
/* Guard: the V14 CTA is often nested inside a .cpf-wrap article whose
   `h2{color:#1a3448}` (specificity 0,1,1) out-specifies the CTA's own
   `.pcc-title{color:#fff}` (0,1,0) and turns the headline dark navy on the
   dark CTA background. These 2-class selectors (0,2,0) win it back to white /
   accent regardless of the surrounding article's heading colors. */
.pcc-cta .pcc-title { color: #ffffff; }
.pcc-cta .pcc-title .pcc-accent { color: var(--cds-accent); }
.pcc-body {
  font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0 0 22px; max-width: 56ch;
}
.pcc-buttons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 4px; }
.pcc-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.2s, border-color 0.2s;
  line-height: 1; white-space: nowrap;
}
.pcc-btn:focus-visible { outline: 3px solid var(--cds-accent-focus, #b2f35a); outline-offset: 3px; }
.pcc-btn-primary {
  background: var(--cds-accent); color: var(--cds-surface-deep-1);
  box-shadow: 0 6px 20px -4px var(--cds-accent-glow-strong), inset 0 -1px 0 rgba(0,0,0,0.08);
}
.pcc-btn-primary:hover {
  background: var(--cds-accent-2); transform: translateY(-1px);
  box-shadow: 0 12px 26px -4px var(--cds-accent-glow-strong);
}
.pcc-btn-arrow { width: 16px; height: 16px; flex: 0 0 16px; transition: transform 0.18s; }
.pcc-btn:hover .pcc-btn-arrow { transform: translateX(3px); }
.pcc-btn-play {
  display: inline-flex; align-items: center; gap: 12px;
  color: #ffffff; font-weight: 700; font-size: 15px;
  text-decoration: none; padding: 10px 4px;
}
.pcc-btn-play-icon {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s, border-color 0.2s;
}
.pcc-btn-play-icon svg { width: 12px; height: 12px; margin-left: 2px; }
.pcc-btn-play:hover .pcc-btn-play-icon { transform: scale(1.05); border-color: rgba(255,255,255,0.9); }

.pcc-v14 {
  /* Full-bleed break-out: escape any constrained parent to span viewport. */
  position: relative; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: 100vw;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.25);
  background:
    radial-gradient(900px 480px at 92% 10%, var(--cds-accent-glow-soft) 0%, transparent 55%),
    radial-gradient(700px 500px at 8% 110%, var(--cds-cool-glow, rgba(42,122,138,0.32)) 0%, transparent 60%),
    linear-gradient(160deg,
      var(--cds-surface-deep-3) 0%,
      var(--cds-surface-deep-1) 50%,
      var(--cds-surface-deep-3) 100%);
  margin: 56px 0 0;
}
.pcc-v14-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 82% 12%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 82% 12%, #000 0%, transparent 72%);
}
.pcc-v14-inner {
  position: relative; z-index: 3;
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; padding: 64px 48px;
  align-items: center;
}
.pcc-v14-copy { display: flex; flex-direction: column; justify-content: center; }
.pcc-v14-copy .pcc-eyebrow { align-self: flex-start; width: fit-content; }
.pcc-v14-right { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.pcc-v14-visual { width: 100%; max-width: 380px; filter: drop-shadow(0 18px 44px rgba(0,0,0,0.45)); }
.pcc-v14-visual svg { width: 100%; height: auto; display: block; }
.pcc-v14-stats {
  display: flex; gap: 32px; justify-content: center;
  width: 100%; max-width: 420px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
}
.pcc-v14-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; min-width: 0;
}
.pcc-v14-stat b {
  font-size: 22px; font-weight: 800;
  color: var(--cds-accent);
  letter-spacing: -0.02em; line-height: 1;
}
.pcc-v14-stat span {
  font-size: 11.5px; color: rgba(255,255,255,0.55);
  line-height: 1.3; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600;
}
@media (max-width: 960px) {
  .pcc-v14-inner { grid-template-columns: 1fr; gap: 40px; padding: 48px 28px; }
  .pcc-v14-right { order: 2; }
  .pcc-v14-visual { max-width: 320px; }
  .pcc-title { font-size: 28px; }
}
@media (max-width: 560px) {
  .pcc-v14-stats { gap: 18px; }
  .pcc-v14-stat b { font-size: 19px; }
}

/* ── CVI hero-nav fix (2026-07-22): light nav + white logo + clearance over the phb-banner hero (PH + IE) ── */
body:has(.phb-banner) header.header:not(.headroom--not-top) .nav-link{color:#fff !important}
body:has(.phb-banner) header.header:not(.headroom--not-top) img[src*="clarity-logo-dark"]{display:none !important}
body:has(.phb-banner) header.header:not(.headroom--not-top) img[src*="clarity-logo-white"]{display:block !important}
.phb-banner{padding-top:70px}
.phb-banner .phb-crumbs{color:rgba(255,255,255,0.78)}