/* ==========================================================================
   PINVOICE — LANDING PAGE BASE
   Typography scale and section rhythm, per the design spec.
   Applied through each block's "Additional CSS class".
   ========================================================================== */

/* ---- Dark canvas -------------------------------------------------------- */
.pv-dark {
  background: var(--pv-page);
  color: var(--pv-text);
}

.pv-dark h1,
.pv-dark h2 {
  color: var(--pv-text);
  font-family: var(--pv-font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pv-dark h3,
.pv-dark h4 {
  color: var(--pv-text);
  font-family: var(--pv-font-body);
}

/* Hero H1 — clamp(38px, 5.2vw, 58px) on a 920px measure.
   Kadence emits no rule for the block's maxWidth attribute, so the measure
   and the auto margins it needs live here. */
.pv-dark h1.wp-block-kadence-advancedheading {
  max-width: 920px;
  margin: auto !important;
  font-size: clamp(38px, 5.2vw, 58px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Hero H1 lime text highlight — ensures pure Signal Lime without being overshadowed by white text */
.pv-hero-highlight,
.pv-dark h1 .pv-hero-highlight,
.pv-dark h1 mark.pv-hero-highlight,
.wp-block-kadence-advancedheading .pv-hero-highlight {
  color: var(--pv-secondary) !important;
  -webkit-text-fill-color: var(--pv-secondary) !important;
  background: transparent !important;
  font-weight: inherit !important;
  text-decoration: none !important;
}

/* Section H2 — clamp(28px, 3.4vw, 40px) */
.pv-dark h2.wp-block-kadence-advancedheading {
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}

/* CTA band H2 — clamp(28px, 3.6vw, 42px) */
.pv-cta-card h2.wp-block-kadence-advancedheading {
  font-size: clamp(28px, 3.6vw, 42px) !important;
}

/* ---- Eyebrow ------------------------------------------------------------ */
.pv-eyebrow {
  display: block;
  margin-bottom: 14px !important;
  color: var(--pv-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px;
  line-height: 1 !important;
  text-transform: uppercase;
}

/* H2 sits 14px under the eyebrow; intro paragraph 16px under the H2 */
.pv-eyebrow + .wp-block-kadence-advancedheading {
  margin-top: 14px;
}

/* ---- Section intro ------------------------------------------------------
   A centred eyebrow → heading → paragraph stack on a shared measure.
   Sections that need a different measure add a pv-intro-* modifier.
   ------------------------------------------------------------------------ */
.pv-intro {
  --pv-intro-measure: 680px;
  text-align: center;
}

.pv-intro-640 { --pv-intro-measure: 640px; }
.pv-intro-660 { --pv-intro-measure: 660px; }

.pv-intro h2.wp-block-kadence-advancedheading,
.pv-intro .pv-lede {
  max-width: var(--pv-intro-measure);
  margin-inline: auto;
}

/* content that follows a centred intro reverts to its natural alignment */
.pv-intro .wp-block-details {
  text-align: left;
}

/* ---- Intro / lede ------------------------------------------------------- */
.pv-lede {
  max-width: 680px;
  margin-top: 16px !important;
  margin-inline: auto;
  color: var(--pv-text-2) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

/* hero subtitle: 18px on a 640px measure */
.pv-hero-lede {
  max-width: 640px;
  font-size: 18px !important;
}

/* ---- Hero pill ---------------------------------------------------------- */
.pv-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--pv-r-pill);
  background: var(--pv-brand-tint);
  border: 1px solid var(--pv-brand-border);
  color: var(--pv-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  line-height: 1 !important;
  text-transform: uppercase;
}

/* ---- Hero --------------------------------------------------------------- */
.pv-hero {
  position: relative;
  isolation: isolate;
}

/* single soft aubergine glow */
.pv-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: 100%;
  height: 500px;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(62, 38, 105, 0.45), transparent 65%);
  pointer-events: none;
}

/* Hero spacing (top padding and the rhythm between pill / H1 / lede /
   buttons / checklist / mockup) lives on the block attributes, not here —
   it stays editable and generates no override CSS. */

/* ---- Buttons ------------------------------------------------------------
   Kadence emits no size CSS for its presets here, so both hero buttons fall
   back to global em padding and the bordered one ends up taller. Pin them to
   the design-system box: md = 150x40, sm = 140x34.
   ------------------------------------------------------------------------ */
.pv-dark .wp-block-kadence-advancedbtn .kb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--pv-r-btn);
  font-family: var(--pv-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

/* secondary "default" variant: card surface + hairline border */
.pv-dark .wp-block-kadence-advancedbtn .kb-btn10_hb2.kb-button {
  border: 1px solid var(--pv-border-2);
}

/* the button row itself */
.pv-dark .kb-buttons-wrap {
  align-items: center;
}

/* ---- Trust / logo strip -------------------------------------------------
   Names are spans in one paragraph so they can flex evenly without the
   separator characters the reference does not use.
   ------------------------------------------------------------------------ */
.pv-trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 44px;
  margin: 0 !important;
  color: var(--pv-text) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.2 !important;
  opacity: 0.7;
}

@media (max-width: 767px) {
  .pv-trust-logos {
    gap: 12px 24px;
    font-size: 16px !important;
  }
}

/* ---- Icon lists (hero trust points, CTA reassurance row) ----------------
   Kadence's listStyles size drives the icon, not the label, so set the
   label size once here for every icon list on a dark section.
   ------------------------------------------------------------------------ */
.pv-dark .kt-svg-icon-list-text {
  font-size: 13px;
  line-height: 1.4;
}

.pv-dark .kt-svg-icon-list-item-wrap {
  gap: 6px;
}

/* ---- Section rhythm -----------------------------------------------------
   .pv-section ONLY draws the separating hairline. Vertical padding belongs to
   each row block's own attributes — Kadence puts that on the inner
   .kt-row-column-wrap, so adding padding here too would silently double it.
   ------------------------------------------------------------------------ */
/* .pv-section:not(.pv-hero) {
  border-top: 1px solid var(--pv-border);
} */

@media (prefers-reduced-motion: reduce) {
  .pv-dark a,
  .pv-dark button {
    transition: none;
  }
}