/* =========================================================================
   PAYMENT PROVIDERS — page-specific styles
   Pixel-built from the Figma "Payment Providers" frame (node 2618:4528).
   Sections:
     1. Hero         — full-bleed cinematic image, headline overlaid (reuses the
                       eng-hero pattern)
     2. Highlights   — light section, two dark "visual panel + text" cards on the
                       shared .static-cards-grid (bento-2-cols)
     3. Provider     — fiat/PIX + institutional-crypto feature grids (icon-chip cards on the
        feature grids   shared bento-4-cols grid)
     4. Providers    — three comparison cards (fiat/PIX + crypto = both)
     5. FAQ + CTA    — shared .accordion + .cta.accent-background
   Colours, gradients, sizes and copy are pulled verbatim from the design.
   Lives on top of the shared tokens in variables.css / layout.css.
   ========================================================================= */

.pp-arc {
  --pp-ink: #ffffff;
  --pp-muted: #8e8e93;           /* Figma body/subtitle colour */
  --pp-bg: #0a0a0d;              /* near-black dark sections     */
}

/* Flat near-black arcs (theme-dark would otherwise paint a diagonal wash) */
.story-arc.pp-arc {
  background-image: none;
  background-color: var(--pp-bg);
}
.story-arc.pp-arc--providers {
  background-color: #0a0c12;
  background-image: radial-gradient(120% 80% at 50% 0%, rgba(36, 64, 140, 0.18) 0%, rgba(10, 12, 18, 0) 60%);
}

/* ── Gradient text helpers (clip a brand gradient through the glyphs) ── */
.pp-grad-cyan,
.pp-grad-blue {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 100% 100%;
}
.pp-grad-cyan { background-image: linear-gradient(90deg, #00e7e0 0%, #ff00d4 100%); }  /* hero "Payment" */
.pp-grad-blue { background-image: linear-gradient(90deg, #5aa4fc 0%, #8081fb 100%); }  /* section titles */

/* =========================================================================
   1 — HERO  (full-bleed cinematic, headline overlaid left)
   ========================================================================= */
.story-arc.pp-arc--hero {
  padding-top: 0;
  padding-bottom: 0;
}
.pp-hero {
  position: relative;
  width: 100%;
  min-height: clamp(460px, 40vw, 660px);   /* Figma 1725 x 688 ratio */
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #09090c;                       /* Figma frame fill */
}
.pp-hero__media { position: absolute; inset: 0; z-index: 0; }
.pp-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;               /* keep the subject (right) in frame */
}
.pp-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 9, 12, 0.95) 0%, rgba(9, 9, 12, 0.82) 28%, rgba(9, 9, 12, 0.32) 58%, rgba(9, 9, 12, 0.02) 100%),
    linear-gradient(180deg, rgba(9, 9, 12, 0.4) 0%, rgba(9, 9, 12, 0) 22%, rgba(9, 9, 12, 0) 72%, var(--pp-bg) 100%);
}
.pp-hero__inner { position: relative; z-index: 2; width: 100%; }
.pp-hero__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 900;                          /* Satoshi Black */
  font-size: clamp(2.4rem, 4vw, 3.5rem);     /* Figma 56px */
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--pp-ink);
  text-wrap: balance;
}
.pp-hero__line { display: block; }
.pp-hero__lead {
  margin: var(--space-lg) 0 0;
  max-width: 33em;
  font-size: clamp(1rem, 1.25vw, 1.25rem);   /* Figma 20px */
  line-height: 1.5;
  color: var(--pp-muted);
}

/* =========================================================================
   2 — HIGHLIGHTS  (light arc · two visual-panel + text cards)
   Uses the shared .static-cards-grid (bento-2-cols) for the responsive grid;
   the cards themselves are page-specific (a dark visual panel + text below,
   on the light section background — not the dark bento card surface).
   ========================================================================= */
.pp-highlights { padding-top: var(--space-3xl); padding-bottom: var(--space-4xl); }
.pp-highlights__head { margin-bottom: var(--space-2xl); }
.pp-highlights__head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pp-highlights__grid {
  max-width: 1120px;
  margin: 0 auto;
  gap: 28px;
}

.pp-highlight { display: flex; flex-direction: column; }

/* ── the dark visual panel ── */
.pp-highlight__visual {
  position: relative;
  min-height: 310px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.pp-highlight__visual--blue  { background: linear-gradient(180deg, #0d1520 0%, #0a1628 100%); }
.pp-highlight__visual--green { background: linear-gradient(180deg, #07210f 0%, #04130b 100%); }

/* left accent bar (Figma: 3px vertical gradient at the panel's left edge) */
.pp-highlight__accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2;
}
.pp-highlight__visual--blue  .pp-highlight__accent { background: linear-gradient(180deg, rgba(90,164,252,0) 0%, #5aa4fc 50%, rgba(90,164,252,0) 100%); }
.pp-highlight__visual--green .pp-highlight__accent { background: linear-gradient(180deg, rgba(52,211,153,0) 0%, #34d399 50%, rgba(52,211,153,0) 100%); }

/* radial glow behind the icon (mix-blend screen, like the Figma ellipse) */
.pp-highlight__glow {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  top: 18%; left: 50%; transform: translateX(-50%);
  mix-blend-mode: screen; pointer-events: none; z-index: 0;
}
.pp-highlight__visual--blue  .pp-highlight__glow { background: radial-gradient(circle, rgba(90,164,252,0.55) 0%, rgba(90,164,252,0) 68%); }
.pp-highlight__visual--green .pp-highlight__glow { background: radial-gradient(circle, rgba(34,197,94,0.5) 0%, rgba(34,197,94,0) 68%); }

/* glassy icon chip */
.pp-highlight__chip {
  position: relative; z-index: 1;
  width: 96px; height: 96px;
  border-radius: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pp-highlight__visual--blue  .pp-highlight__chip { background: linear-gradient(90deg, rgba(90,164,252,0.15) 0%, rgba(128,129,251,0.15) 100%); color: #9cc4ff; }
.pp-highlight__visual--green .pp-highlight__chip { background: linear-gradient(90deg, rgba(52,211,153,0.15) 0%, rgba(16,185,129,0.15) 100%); color: #6ee7a8; }
.pp-highlight__chip svg { width: 44px; height: 44px; display: block; }

.pp-highlight__mock { position: relative; z-index: 1; margin-top: 24px; display: flex; flex-direction: column; align-items: center; }

/* card 1 — pills + lines */
.pp-highlight__pills,
.pp-highlight__lines { display: flex; gap: 8px; align-items: flex-start; justify-content: center; }
.pp-highlight__lines { margin-top: 8px; }
.pp-highlight__pills span { height: 28px; border-radius: 6px; background: rgba(90,164,252,0.09); border: 1px solid rgba(90,164,252,0.19); }
.pp-highlight__pills span.is-alt { background: rgba(128,129,251,0.09); border-color: rgba(128,129,251,0.19); }
.pp-highlight__lines span { height: 6px; border-radius: 3px; background: rgba(90,164,252,0.25); }
.pp-highlight__lines span.is-alt { background: rgba(128,129,251,0.25); }

/* card 2 — bar chart + uptime */
.pp-highlight__mock--chart { margin-top: 20px; }
.pp-highlight__bars { display: flex; gap: 6px; align-items: flex-end; height: 80px; }
.pp-highlight__bars span { width: 18px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%); }
.pp-highlight__uptime { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #5fe39a; }
.pp-highlight__dot { width: 6px; height: 6px; border-radius: 50%; background: #2bd17e; box-shadow: 0 0 0 0 rgba(43,209,126,0.5); animation: pp-pulse 2.4s infinite; }
@keyframes pp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(43,209,126,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(43,209,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,209,126,0); }
}

/* ── text below the panel (on the light section bg) ── */
.pp-highlight__body { padding: 26px 6px 0; }
.pp-highlight__tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase;
  color: #4a86e8;
  background: rgba(90,164,252,0.10);
  border: 1px solid rgba(90,164,252,0.30);
}
.pp-highlight__tag--green { color: #15a34a; background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.32); }
.pp-highlight__title {
  margin: 16px 0 0;
  font-size: clamp(1.3rem, 1.9vw, 1.5rem);   /* Figma 24px */
  font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  background: linear-gradient(90deg, #a02be1 0%, #ff4905 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-wrap: balance;
}
.pp-highlight__desc {
  margin: 14px 0 0;
  font-size: 15px; line-height: 1.6;
  color: #3f3f46;
  max-width: 36em;
}

/* =========================================================================
   Centred section header (fiat/PIX / crypto)
   ========================================================================= */
.pp-features { padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); }
.pp-features--alt { padding-top: var(--space-2xl); }

.pp-head { max-width: 820px; margin: 0 auto var(--space-2xl); text-align: center; }
.pp-head__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);   /* Figma 32px */
  line-height: 1.2; letter-spacing: -0.01em;
}
.pp-head__sub {
  margin: var(--space-md) auto 0;
  max-width: 60ch;
  font-size: 1rem; line-height: 1.5;
  color: var(--pp-muted);
}

/* =========================================================================
   3 — PROVIDER FEATURE GRIDS  (icon-chip cards on the shared bento grid)
   ========================================================================= */
.pp-features__grid { gap: 24px; max-width: 1520px; margin: 0 auto; }

.pp-feature {
  background: #252527;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: clip;
}

/* gradient icon chip — 120px rounded square, Lucide glyph centred (white) */
.pp-feature__icon {
  width: 120px; height: 120px;
  border-radius: 32px;
  display: grid; place-items: center;
  flex: none;
  color: #fff;
}
.pp-feature__icon svg { width: 48px; height: 48px; display: block; }

/* radial gradients — bright point top-right (Figma matrix → ~76% 8%) */
.pp-ico--purple { background: radial-gradient(125% 125% at 76% 8%, #f8afff 0%, #cd85f1 25%, #a25be4 50%, #7632d6 75%, #4b08c8 100%); }
.pp-ico--cyan   { background: radial-gradient(125% 125% at 76% 8%, #62e5ff 0%, #3ab4f1 50%, #1382e4 100%); }
.pp-ico--green  { background: radial-gradient(125% 125% at 76% 8%, #62ff89 0%, #31d34d 50%, #00a711 100%); }
.pp-ico--blue   { background: radial-gradient(125% 125% at 76% 8%, #62e5ff 0%, #3a7df1 50%, #1316e4 100%); }

.pp-feature__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);  /* Figma 24px */
  font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
  color: #fff;
}
.pp-feature__desc { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--pp-muted); }

/* =========================================================================
   4 — TWO WORLD-CLASS PROVIDERS  (comparison cards with + / = separators)
   ========================================================================= */
.pp-providers { padding-top: var(--space-3xl); padding-bottom: var(--space-4xl); }
.pp-providers__head { margin-bottom: var(--space-2xl); }
.pp-providers__head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.01em; color: #fff;
}

.pp-providers__grid {
  display: flex;
  align-items: stretch;
  gap: 14px;
  max-width: 1520px;
  margin: 0 auto;
}
.pp-provider {
  flex: 1 1 0; min-width: 0;
  border-radius: 20px;
  overflow: clip;
  display: flex;
  flex-direction: column;
}
.pp-provider--blue    { background: #0d1829; --pp-pv-accent: #4a9eff; --pp-pv-chip: rgba(23,86,192,0.13); --pp-pv-name: #c4d9fe; }
.pp-provider--cyan    { background: #0a0f1e; --pp-pv-accent: #00c8ff; --pp-pv-chip: rgba(15,58,144,0.13); --pp-pv-name: #00c8ff; }
.pp-provider--neutral { background: #101014; --pp-pv-accent: rgba(255,255,255,0.55); --pp-pv-chip: rgba(255,255,255,0.04); --pp-pv-name: #ffffff; }

.pp-provider__header {
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.pp-provider--blue    .pp-provider__header { background: linear-gradient(135deg, #1a3a6a 0%, #0d1829 62%); }
.pp-provider--cyan    .pp-provider__header { background: linear-gradient(135deg, #0f1f4a 0%, #0a0f1e 62%); }
.pp-provider--neutral .pp-provider__header { background: linear-gradient(135deg, #1c1c22 0%, #101014 62%); }

.pp-provider__eyebrow {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--pp-pv-accent);
  background: color-mix(in srgb, var(--pp-pv-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--pp-pv-accent) 31%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pp-pv-accent) 18%, transparent);
}
.pp-provider__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pp-pv-accent); }
.pp-provider__name {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 900; font-size: 1.5rem; line-height: 1.33; letter-spacing: -0.01em;
  color: var(--pp-pv-name);
}
.pp-provider__tagline { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }

/* divider */
.pp-provider__rows { position: relative; }
.pp-provider__rows::before {
  content: ''; display: block; height: 1px; width: 100%;
}
.pp-provider--blue    .pp-provider__rows::before { background: linear-gradient(90deg, rgba(23,86,192,0.5) 0%, rgba(23,86,192,0.13) 100%); }
.pp-provider--cyan    .pp-provider__rows::before { background: linear-gradient(90deg, rgba(26,106,255,0.5) 0%, rgba(26,106,255,0.13) 100%); }
.pp-provider--neutral .pp-provider__rows::before { background: linear-gradient(90deg, rgba(255,255,255,0.19) 0%, rgba(255,255,255,0.03) 100%); }

.pp-provider__row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pp-provider__row:last-child { border-bottom: 0; }
.pp-provider__ico {
  flex: none; width: 36px; height: 36px;
  border-radius: 10px; display: grid; place-items: center;
  background: var(--pp-pv-chip);
  color: var(--pp-pv-accent);
}
.pp-provider__ico svg { width: 18px; height: 18px; display: block; }
.pp-provider__rowtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-provider__rowtext strong { font-size: 14px; font-weight: 700; color: #fff; }
.pp-provider__rowtext em { font-size: 13px; font-style: normal; color: var(--pp-muted); }

.pp-provider__summary {
  margin: 0 0 0; margin-top: auto;
  padding: 20px 28px;
  font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.78);
}
.pp-provider--blue    .pp-provider__summary { background: rgba(23,86,192,0.06); }
.pp-provider--cyan    .pp-provider__summary { background: rgba(15,58,144,0.06); }
.pp-provider--neutral .pp-provider__summary { background: rgba(255,255,255,0.02); }

/* + / = separators */
.pp-provider-sep {
  flex: none; align-self: center;
  font-family: var(--font-family);
  font-size: 2rem; font-weight: 300; line-height: 1;
  color: rgba(255, 255, 255, 0.3);
  padding: 0 2px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  /* feature grids → 2-up (bento-4-cols keeps 4 cols by default) */
  .pp-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-feature { padding: 32px; border-radius: 24px; gap: 24px; }
  .pp-feature__icon { width: 96px; height: 96px; border-radius: 24px; }
  .pp-feature__icon svg { width: 40px; height: 40px; }

  /* providers → stack; separators turn horizontal */
  .pp-providers__grid { flex-direction: column; gap: 0; max-width: 560px; }
  .pp-provider-sep { padding: 14px 0; font-size: 1.75rem; }
}

@media (max-width: 900px) {
  .pp-highlights__grid { gap: 36px; }
  .pp-highlight__visual { min-height: 260px; }
}

@media (max-width: 600px) {
  .pp-features__grid { grid-template-columns: 1fr; }
  .pp-feature { padding: 28px; }
  .pp-hero__inner { text-align: center; }
  .pp-hero__lead { margin-left: auto; margin-right: auto; }
  .pp-hero__media img { object-position: 64% center; }
  .pp-hero__scrim {
    background: linear-gradient(180deg, rgba(9,9,12,0.45) 0%, rgba(9,9,12,0.2) 36%, rgba(9,9,12,0.72) 78%, var(--pp-bg) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-highlight__dot { animation: none; }
}