/* ============================================================
   Vaste prijs — wedge-pagina (/geen-prijs-per-gesprek)
   Layered op tokens.css + site.css + feature-page.css + compare-page.css.
   Enkel merk-tokens, geen hardgecodeerde kleuren of fonts.
   ============================================================ */

/* ---- Hero ---- */
.vp-hero h1 { max-width: 20ch; }

.vp-hero__kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
  letter-spacing: -0.01em;
  color: var(--brand-orange-700);
  margin-bottom: 14px;
}

.vp-hero__visual { margin-top: 8px; }

@media (max-width: 991px) {
  .vp-hero__visual { margin-top: 32px; }
}

/* ============================================================
   Twee-facturen-visual — het kernbeeld.
   Links = "prijs per gesprek" (variabel, waarschuwend),
   rechts = "Sarrai" (vast bedrag, navy, rustig).
   Het verschil hangt NIET enkel van kleur af: beide kaarten dragen
   een expliciet tekstlabel ("Variabel"/"Vast") én een eigen vorm
   (oplopende vs. vlakke balkjes), zodat het ook zonder kleur leesbaar is.
   ============================================================ */
.vp-bills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.vp-bill {
  position: relative;
  border-radius: var(--r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vp-bill__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vp-bill__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.vp-bill__badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.vp-bill__note {
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
  opacity: 0.78;
}

/* balkjes: oplopend (variabel) vs. vlak (vast) */
.vp-bill__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
}
.vp-bill__bars span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 5px;
}

.vp-bill__total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid;
}
.vp-bill__total b {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.vp-bill__total span { font-size: 12.5px; font-weight: 600; opacity: 0.7; }

.vp-bill__label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* --- Variabele kaart (waarschuwend) --- */
.vp-bill--variable {
  background: #fff;
  border: 1px solid var(--warning-bg);
  box-shadow: var(--shadow-sm);
  color: var(--fg-2);
}
.vp-bill--variable .vp-bill__name { color: var(--warning-fg); }
.vp-bill--variable .vp-bill__badge { background: var(--warning-bg); color: var(--warning-fg); }
.vp-bill--variable .vp-bill__bars span { background: color-mix(in oklch, var(--warning) 50%, #fff); }
.vp-bill--variable .vp-bill__bars span:nth-child(1) { height: 22%; }
.vp-bill--variable .vp-bill__bars span:nth-child(2) { height: 40%; }
.vp-bill--variable .vp-bill__bars span:nth-child(3) { height: 30%; }
.vp-bill--variable .vp-bill__bars span:nth-child(4) { height: 56%; }
.vp-bill--variable .vp-bill__bars span:nth-child(5) { height: 74%; }
.vp-bill--variable .vp-bill__bars span:nth-child(6) { height: 100%; background: var(--warning); }
.vp-bill--variable .vp-bill__total { border-top-color: var(--warning-bg); }
.vp-bill--variable .vp-bill__total b { color: var(--warning-fg); }
.vp-bill--variable .vp-bill__label { color: var(--warning-fg); }

/* --- Vaste kaart (navy, rustig) --- */
.vp-bill--fixed {
  background:
    radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-orange) 16%, transparent), transparent 60%),
    var(--brand-navy);
  border: 1px solid var(--brand-navy);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 40px -18px rgba(37, 43, 72, 0.5);
}
.vp-bill--fixed .vp-bill__name { color: #fff; }
.vp-bill--fixed .vp-bill__badge { background: rgba(255, 255, 255, 0.14); color: #fff; }
.vp-bill--fixed .vp-bill__bars span { background: rgba(255, 255, 255, 0.26); height: 58%; }
.vp-bill--fixed .vp-bill__total { border-top-color: rgba(255, 255, 255, 0.16); }
.vp-bill--fixed .vp-bill__total b { color: #fff; }
.vp-bill--fixed .vp-bill__total span { color: var(--brand-orange-300); opacity: 1; }
.vp-bill--fixed .vp-bill__label { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 479px) {
  .vp-bills { grid-template-columns: 1fr; }
}

/* ============================================================
   Prose-secties (dread, mechanism, answer, costly-signal)
   Tweekoloms-redactielayout: kop links, lopende tekst rechts.
   Neemt de volledige containerbreedte in (net als de hero),
   terwijl de tekstregels leesbaar kort blijven.
   ============================================================ */
.vp-prose { padding-block: clamp(48px, 5vw, 80px); }
.vp-prose__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.vp-prose h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--brand-navy-800);
  margin: 12px 0 0;
  max-width: 18ch;
}
.vp-prose__body p:not([class]) {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0;
  max-width: 62ch;
}
.vp-prose__body p:not([class]) + p:not([class]) { margin-top: 16px; }

@media (max-width: 860px) {
  .vp-prose__inner { grid-template-columns: 1fr; gap: 14px; }
  .vp-prose h2 { max-width: none; }
}

/* mechanism — bronvermelding + interne links */
.vp-mech__note {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-4);
}
.vp-mech__note svg { flex: none; margin-top: 2px; color: var(--fg-4); }
.vp-mech__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 16px;
  font-size: 14.5px;
}
.vp-mech__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-navy-700);
  font-weight: 600;
}
.vp-mech__links a svg { color: var(--brand-orange); transition: transform var(--dur-fast) var(--ease-out); }
.vp-mech__links a:hover svg { transform: translateX(3px); }

/* answer — vaste-prijs tier-strip (hergebruikt .cmp-tier uit compare-page.css) */
.vp-answer__tiers { margin-top: clamp(28px, 4vw, 48px); }
.vp-tiers-head {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-orange-700);
}
.vp-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 940px;
}
.vp-tiers__cta { margin-top: 22px; }
@media (max-width: 820px) {
  .vp-tiers { grid-template-columns: 1fr; }
}

/* ============================================================
   Reframe — het scharnierpunt, uitgelicht op navy
   ============================================================ */
.vp-reframe {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(56px, 6vw, 92px);
  background: var(--brand-navy);
  color: rgba(255, 255, 255, 0.9);
}
.vp-reframe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 90% at 82% 0%, color-mix(in oklch, var(--brand-orange) 20%, transparent), transparent 60%);
}
.vp-reframe__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.vp-reframe .eyebrow { color: var(--brand-orange-300); margin-bottom: 16px; justify-content: center; }
.vp-reframe .eyebrow .dot { background: var(--brand-orange); }
.vp-reframe h2 {
  color: #fff;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 auto 20px;
  max-width: 20ch;
}
.vp-reframe p {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  margin: 0 auto;
}

/* ============================================================
   Proof — smalle trust-strip
   ============================================================ */
.vp-proof {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  padding-block: 26px;
}
.vp-proof__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}
.vp-proof__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  background: var(--brand-orange-50);
  color: var(--brand-orange-700);
  flex: none;
}
.vp-proof p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 62ch;
}
.vp-proof p b { color: var(--brand-navy-800); font-weight: 700; }