/* ==========================================================================
 * Theme layer — loaded last, site-wide.
 *
 * Shared components built on the tokens in main.css: page heroes, the
 * block-editor content layout (normal / wide / full), core block styles,
 * cards, pricing, FAQ, footer, back-to-top and the reveal utility.
 *
 * Plain CSS on purpose: no build step is needed to adjust it, and every value
 * comes from a token, so the Customizer can restyle it.
 * ======================================================================= */

/* ------------------------------------------------------------ page hero */

.vpf-hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 96px) clamp(40px, 6vw, 72px);
  background:
    radial-gradient(60% 120% at 85% -20%, rgb(var(--vpf-accent-rgb) / .10), transparent 60%),
    linear-gradient(180deg, var(--vpf-cloud), #fff);
  border-bottom: 1px solid var(--vpf-line);
}

.vpf-hero .vpf-title {
  margin-top: 16px;
}

.vpf-landing-intro,
.vpf-hero-grid-single > * {
  max-width: 760px;
}

.vpf-lead {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--vpf-muted);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
}

.vpf-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

body.vpf-page-title-align-center .vpf-landing-intro {
  margin-inline: auto;
  text-align: center;
}

body.vpf-page-title-align-center .vpf-landing-intro .vpf-lead {
  margin-inline: auto;
}

body.vpf-page-title-align-center .vpf-landing-intro .vpf-hero-buttons {
  justify-content: center;
}

/* --------------------------------------------- block editor content flow */
/*
 * The landing template prints editor content straight into the page, so the
 * wrapper does what WordPress's "constrained" layout does: children get the
 * reading width, .alignwide the container width, .alignfull the viewport.
 * Without this, blocks ran edge to edge, flush against the left of the window.
 */

.vpf-landing-body {
  padding: clamp(40px, 6vw, 72px) var(--vpf-gutter);
}

.vpf-landing-body > * {
  max-width: var(--vpf-content);
  margin-inline: auto;
}

.vpf-landing-body > * + * {
  margin-top: 1.5rem;
}

.vpf-landing-body > .alignwide {
  max-width: var(--vpf-wide);
}

.vpf-landing-body > .alignfull {
  max-width: none;
  margin-inline: calc(-1 * var(--vpf-gutter));
}

/* Full-bleed sections stack without gaps; they bring their own padding. */
.vpf-landing-body > .alignfull + .alignfull {
  margin-top: 0;
}

.vpf-landing-body > .alignfull:first-child {
  margin-top: calc(-1 * clamp(40px, 6vw, 72px));
}

.vpf-landing-body > .alignfull:last-child {
  margin-bottom: calc(-1 * clamp(40px, 6vw, 72px));
}

.vpf-landing-body h2 {
  margin-top: 3rem;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
}

.vpf-landing-body h3 {
  margin-top: 2rem;
  font-size: clamp(19px, 1.6vw, 22px);
}

.vpf-landing-body > :first-child {
  margin-top: 0;
}

.vpf-landing-body > p,
.vpf-landing-body > ul,
.vpf-landing-body > ol {
  color: rgb(var(--vpf-ink-rgb) / .86);
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* Inside a container (default page, content page, posts): break out to the
   viewport for full-width blocks, without negative-margin guesswork. */
.vpf-page-content > .alignfull,
.vpf-single-content > .alignfull,
.vpf-prose > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

.vpf-page-content > .alignwide,
.vpf-single-content > .alignwide {
  max-width: var(--vpf-wide);
}

/* Content page: one centred reading column, header included. */
.vpf-content-page {
  max-width: calc(var(--vpf-content) + 40px);
  margin-inline: auto;
}

.vpf-content-page-header {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vpf-line);
}

.vpf-content-page .vpf-page-content > * {
  max-width: none;
}

.vpf-page-content > p:first-of-type {
  color: rgb(var(--vpf-ink-rgb) / .8);
  font-size: 1.1875rem;
}

/* ------------------------------------------------------- core blocks --- */

.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--vpf-primary);
  border-radius: var(--vpf-radius-btn);
  background: var(--vpf-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--vpf-dur-fast) var(--vpf-ease), border-color var(--vpf-dur-fast) var(--vpf-ease), color var(--vpf-dur-fast) var(--vpf-ease), box-shadow var(--vpf-dur) var(--vpf-ease);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  border-color: var(--vpf-primary-dark);
  background: var(--vpf-primary-dark);
  color: #fff;
}

.wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: var(--vpf-ring);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: var(--vpf-line);
  background: #fff;
  color: var(--vpf-ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: rgb(var(--vpf-ink-rgb) / .25);
  background: var(--vpf-cloud);
}

.wp-block-button.is-style-vpf-accent > .wp-block-button__link {
  border-color: var(--vpf-accent);
  background: var(--vpf-accent);
  color: var(--vpf-primary);
}

.wp-block-buttons {
  gap: 12px;
}

.wp-block-image img,
.wp-block-media-text__media img,
.wp-block-cover {
  border-radius: var(--vpf-radius);
}

.wp-block-image figcaption,
.wp-element-caption {
  margin-top: 10px;
  color: var(--vpf-muted);
  font-size: 14px;
  text-align: center;
}

.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--vpf-line);
  opacity: 1;
}

.wp-block-quote,
.wp-block-pullquote blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--vpf-accent);
  background: none;
  color: var(--vpf-ink);
  font-size: 1.1875rem;
  font-style: normal;
  line-height: 1.6;
}

.wp-block-quote cite {
  display: block;
  margin-top: 12px;
  color: var(--vpf-muted);
  font-size: 14px;
  font-style: normal;
}

.wp-block-group.has-background {
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--vpf-radius-lg);
}

.wp-block-group.alignfull.has-background {
  border-radius: 0;
  padding-inline: var(--vpf-gutter);
}

.wp-block-group.is-style-vpf-card {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius-lg);
  background: #fff;
  box-shadow: var(--vpf-shadow-sm);
}

.wp-block-columns {
  gap: clamp(20px, 3vw, 40px);
}

.wp-block-details {
  padding: 18px 20px;
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius);
  background: #fff;
}

.wp-block-details + .wp-block-details {
  margin-top: 10px;
}

.wp-block-details summary {
  cursor: pointer;
  color: var(--vpf-ink);
  font-weight: 600;
}

.wp-block-details[open] summary {
  margin-bottom: 10px;
}

.wp-block-table table {
  border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--vpf-line);
  text-align: left;
}

.wp-block-table thead th {
  background: none;
  color: var(--vpf-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.wp-block-code,
.wp-block-preformatted {
  padding: 20px;
  border-radius: var(--vpf-radius);
  background: var(--vpf-primary);
  color: #e6edf5;
  font-size: 14px;
}

/* ------------------------------------------------------------- cards --- */

.vpf-card {
  transition: border-color var(--vpf-dur) var(--vpf-ease), box-shadow var(--vpf-dur) var(--vpf-ease), transform var(--vpf-dur) var(--vpf-ease);
}

a.vpf-card:hover,
.vpf-card:has(.vpf-card-link:hover),
.vpf-feature-card:hover {
  border-color: rgb(var(--vpf-ink-rgb) / .14);
  box-shadow: var(--vpf-shadow-md);
}

.vpf-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
  color: var(--vpf-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.vpf-card-link [aria-hidden="true"] {
  color: var(--vpf-accent-dark);
  transition: transform var(--vpf-dur) var(--vpf-ease);
}

.vpf-card-link:hover {
  color: var(--vpf-ink);
}

.vpf-card-link:hover [aria-hidden="true"],
.vpf-card:hover .vpf-card-link [aria-hidden="true"] {
  transform: translateX(3px);
}

.vpf-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.vpf-feature-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.vpf-feature-card h2,
.vpf-feature-card h3 {
  margin: 12px 0 8px;
  color: var(--vpf-ink);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.vpf-feature-card h2 a {
  color: inherit;
  text-decoration: none;
}

.vpf-feature-card p {
  margin: 0;
  color: var(--vpf-muted);
  font-size: 15px;
  line-height: 1.6;
}

.vpf-feature-card .vpf-feature-card-top {
  margin-top: 0;
}

.vpf-feature-thumb {
  display: block;
  min-height: 0;
  margin: -8px -8px 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: var(--vpf-cloud);
}

.vpf-feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--vpf-ease);
}

.vpf-feature-card:hover .vpf-feature-thumb img {
  transform: scale(1.03);
}

/*
 * No featured image: a small monogram tile instead of a large navy slab that
 * repeated the card title in 28px type.
 */
.vpf-feature-thumb.vpf-feature-thumb-placeholder {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 16px;
  aspect-ratio: auto;
  border-radius: 12px;
  background: rgb(var(--vpf-accent-rgb) / .12);
  box-shadow: inset 0 0 0 1px rgb(var(--vpf-accent-rgb) / .25);
}

.vpf-feature-thumb.vpf-feature-thumb-placeholder span {
  position: static;
  display: block;
  padding: 0;
  color: color-mix(in srgb, var(--vpf-accent-dark) 60%, var(--vpf-ink));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

/* --------------------------------------------------------- pricing --- */

.vpf-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  align-items: stretch;
}

.vpf-price-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  text-align: left;
}

.vpf-price-card h3 {
  margin: 0;
  color: var(--vpf-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}

.vpf-price-card .vpf-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
  color: var(--vpf-ink);
  font-size: clamp(36px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.vpf-amount-billing {
  color: var(--vpf-muted);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

.vpf-price-card > p {
  min-height: 3.2em;
  margin-top: 10px;
  color: var(--vpf-muted);
  font-size: 15px;
  line-height: 1.55;
}

.vpf-price-features {
  display: grid;
  gap: 10px;
  margin: 20px 0 28px;
  padding: 20px 0 0;
  border-top: 1px solid var(--vpf-line);
  list-style: none;
}

.vpf-price-features li {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px;
  color: rgb(var(--vpf-ink-rgb) / .86);
  font-size: 15px;
  line-height: 1.5;
}

.vpf-price-features li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgb(var(--vpf-accent-rgb) / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230a8f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.vpf-price-card .vpf-btn-primary,
.vpf-price-card .vpf-btn-secondary {
  width: 100%;
  margin-top: auto;
}

.vpf-price-card.featured {
  border-color: var(--vpf-primary);
  box-shadow: 0 0 0 1px var(--vpf-primary), var(--vpf-shadow-lg);
}

.vpf-tag {
  position: absolute;
  top: -12px;
  left: 28px;
  transform: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--vpf-accent);
  color: var(--vpf-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

/* ------------------------------------------------------------ FAQ --- */

.vpf-faq {
  display: grid;
  gap: 10px;
  max-width: 820px;
}

.vpf-faq details {
  padding: 0;
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius);
  background: #fff;
  transition: border-color var(--vpf-dur) var(--vpf-ease), box-shadow var(--vpf-dur) var(--vpf-ease);
}

.vpf-faq details[open] {
  border-color: rgb(var(--vpf-ink-rgb) / .14);
  box-shadow: var(--vpf-shadow-sm);
}

.vpf-faq summary {
  position: relative;
  padding: 18px 56px 18px 20px;
  color: var(--vpf-ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.vpf-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%2312233e' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform var(--vpf-dur) var(--vpf-ease);
}

.vpf-faq details[open] summary::after {
  transform: rotate(45deg);
}

.vpf-faq details > p,
.vpf-faq details > div {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--vpf-muted);
  line-height: 1.65;
}

/* --------------------------------------------------- lists & checks --- */

.vpf-check {
  background: rgb(var(--vpf-accent-rgb) / .14);
  color: color-mix(in srgb, var(--vpf-accent-dark) 60%, var(--vpf-ink));
  font-weight: 700;
}

.vpf-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(var(--vpf-accent-rgb) / .28), transparent 60%),
    radial-gradient(50% 90% at 0% 100%, rgb(var(--vpf-accent-rgb) / .12), transparent 60%),
    var(--vpf-primary);
  box-shadow: var(--vpf-shadow-lg);
  color: #fff;
  text-align: center;
}

.vpf-cta h2 {
  margin-inline: auto;
  max-width: 22ch;
  color: #fff;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.12;
}

.vpf-cta p {
  margin-inline: auto;
  max-width: 54ch;
  color: rgb(255 255 255 / .76);
  font-size: 18px;
}

.vpf-cta .vpf-btn-primary {
  border-color: var(--vpf-accent);
  background: var(--vpf-accent);
  color: var(--vpf-primary);
  box-shadow: 0 8px 24px rgb(var(--vpf-accent-rgb) / .3);
}

.vpf-cta .vpf-btn-primary:hover {
  border-color: #fff;
  background: #fff;
  color: var(--vpf-primary);
}

.vpf-cta .vpf-btn-secondary {
  border-color: rgb(255 255 255 / .22);
  background: rgb(255 255 255 / .06);
  box-shadow: none;
  color: #fff;
}

.vpf-cta .vpf-btn-secondary:hover {
  border-color: rgb(255 255 255 / .4);
  background: rgb(255 255 255 / .12);
  color: #fff;
}

/* ------------------------------------------------------------ footer --- */

.vpf-site-footer {
  padding: clamp(56px, 7vw, 88px) 0 32px;
  font-size: 15px;
}

.vpf-site-footer--dark {
  --vpf-footer-fg: rgb(255 255 255 / .92);
  --vpf-footer-muted: rgb(255 255 255 / .62);
  --vpf-footer-line: rgb(255 255 255 / .1);
  background: var(--vpf-primary);
  color: var(--vpf-footer-fg);
}

.vpf-site-footer--light {
  --vpf-footer-fg: var(--vpf-ink);
  --vpf-footer-muted: var(--vpf-muted);
  --vpf-footer-line: var(--vpf-line);
  border-top: 1px solid var(--vpf-line);
  background: var(--vpf-cloud);
  color: var(--vpf-footer-fg);
}

.vpf-site-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: 40px;
  align-items: start;
}

.vpf-site-footer .vpf-site-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vpf-footer-fg);
  text-decoration: none;
}

.vpf-site-footer-logo strong {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.vpf-site-footer-logo-img {
  display: block;
  width: auto;
  max-height: 40px;
}

.vpf-site-footer--dark .vpf-site-footer-logo-img {
  filter: brightness(0) invert(1);
}

.vpf-site-footer .vpf-brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--vpf-accent);
  color: var(--vpf-primary);
  font-weight: 800;
}

.vpf-site-footer--light .vpf-brand-mark {
  background: var(--vpf-primary);
  color: #fff;
}

.vpf-site-footer-brand p {
  max-width: 32ch;
  margin: 16px 0 0;
  color: var(--vpf-footer-muted);
  line-height: 1.6;
}

.vpf-site-footer h2,
.vpf-site-footer .vpf-site-footer-title {
  margin: 0 0 16px;
  color: var(--vpf-footer-fg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.vpf-site-footer ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vpf-site-footer li {
  margin: 0;
}

.vpf-site-footer a {
  color: var(--vpf-footer-muted);
  text-decoration: none;
}

.vpf-site-footer a:hover {
  color: var(--vpf-footer-fg);
}

.vpf-site-footer .vpf-site-footer-logo:hover {
  color: var(--vpf-footer-fg);
}

/* A footer menu with sub-menus becomes columns: the top level items are the
   headings. A flat menu stays a single list. */
.vpf-site-footer-menu {
  grid-column: span 3;
}

.vpf-site-footer-menu > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
}

.vpf-site-footer-menu > ul > li.menu-item-has-children > a {
  display: block;
  margin-bottom: 14px;
  color: var(--vpf-footer-fg);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.vpf-site-footer-menu .sub-menu {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.vpf-site-footer-cta {
  padding: 24px;
  border: 1px solid var(--vpf-footer-line);
  border-radius: var(--vpf-radius-lg);
  background: rgb(255 255 255 / .04);
}

.vpf-site-footer--light .vpf-site-footer-cta {
  background: #fff;
}

.vpf-site-footer-cta .vpf-site-footer-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.vpf-site-footer--dark .vpf-site-footer-cta .vpf-btn-primary {
  border-color: var(--vpf-accent);
  background: var(--vpf-accent);
  color: var(--vpf-primary);
  box-shadow: none;
}

.vpf-site-footer--dark .vpf-site-footer-cta .vpf-btn-primary:hover {
  border-color: #fff;
  background: #fff;
}

.vpf-site-footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--vpf-footer-line);
}

.vpf-site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--vpf-footer-line);
  color: var(--vpf-footer-muted);
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 960px) {
  .vpf-site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .vpf-site-footer-brand,
  .vpf-site-footer-menu {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .vpf-site-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------- back to top --- */

.vpf-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--vpf-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--vpf-shadow-md);
  color: var(--vpf-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--vpf-dur) var(--vpf-ease), transform var(--vpf-dur) var(--vpf-ease), visibility 0s linear var(--vpf-dur), background-color var(--vpf-dur-fast) var(--vpf-ease);
}

.vpf-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.vpf-to-top:hover {
  background: var(--vpf-cloud);
  color: var(--vpf-ink);
}

/* ------------------------------------------------------------ reveal --- */
/* Only hides content once JS has confirmed it can reveal it again. */

.vpf-js-reveal .vpf-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--vpf-ease), transform .6s var(--vpf-ease);
}

.vpf-js-reveal .vpf-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------- utilities --- */

.vpf-section-alt {
  background: var(--vpf-cloud);
}

.vpf-section-title {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.vpf-section-title p {
  margin-top: 16px;
  max-width: 60ch;
  color: var(--vpf-muted);
  font-size: 18px;
  line-height: 1.6;
}

.vpf-section-title.is-center {
  margin-inline: auto;
  text-align: center;
}

.vpf-section-title.is-center p {
  margin-inline: auto;
}

.vpf-empty-hint {
  padding: 16px 20px;
  border: 1px dashed rgb(var(--vpf-ink-rgb) / .25);
  border-radius: var(--vpf-radius);
  background: var(--vpf-cloud);
  color: var(--vpf-muted);
  font-size: 14px;
  text-align: left;
}

.vpf-inline-filters {
  gap: 8px;
}

.vpf-filter-chip {
  min-height: 36px;
  font-weight: 500;
}

.vpf-filter-chip:hover {
  border-color: rgb(var(--vpf-ink-rgb) / .3);
  color: var(--vpf-ink);
}

/* Pagination (the_posts_pagination). */
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 48px;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius-sm);
  color: var(--vpf-ink);
  font-weight: 500;
  text-decoration: none;
}

.navigation.pagination .page-numbers.current {
  border-color: var(--vpf-primary);
  background: var(--vpf-primary);
  color: #fff;
}

/* Elementor: a page built with it gets the whole canvas. */
.vpf-elementor-canvas {
  width: 100%;
}

/* List block style "Check marks". */
ul.is-style-vpf-checks {
  padding-left: 0;
  list-style: none;
}

ul.is-style-vpf-checks li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 30px;
}

ul.is-style-vpf-checks li::before {
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgb(var(--vpf-accent-rgb) / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230a8f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ------------------------------------------------- catalog entry page --- */

.vpf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--vpf-muted);
  font-size: 14px;
}

.vpf-breadcrumb a {
  color: var(--vpf-muted);
  text-decoration: none;
}

.vpf-breadcrumb a:hover {
  color: var(--vpf-ink);
}

.vpf-breadcrumb [aria-current] {
  color: var(--vpf-ink);
}

.vpf-product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.vpf-product-hero-grid > :only-child {
  max-width: 760px;
}

.vpf-product-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--vpf-radius-lg);
  box-shadow: var(--vpf-shadow-lg);
}

.vpf-product-spec {
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(60% 60% at 100% 0%, rgb(var(--vpf-accent-rgb) / .22), transparent 70%),
    var(--vpf-primary);
  box-shadow: var(--vpf-shadow-lg);
  color: #fff;
}

.vpf-product-spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgb(255 255 255 / .08);
  font-weight: 700;
}

.vpf-product-spec-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--vpf-accent);
  box-shadow: 0 0 0 4px rgb(var(--vpf-accent-rgb) / .2);
}

.vpf-product-spec ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 18px;
  list-style: none;
}

.vpf-product-spec li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 12px;
  background: rgb(255 255 255 / .04);
  color: rgb(255 255 255 / .86);
  font-size: 15px;
}

.vpf-product-spec li i {
  width: 38%;
  height: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / .12);
}

.vpf-product-spec li.is-active {
  border-color: rgb(var(--vpf-accent-rgb) / .5);
  background: rgb(var(--vpf-accent-rgb) / .1);
  color: #fff;
}

.vpf-product-spec li.is-active i {
  background: var(--vpf-accent);
}

.vpf-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vpf-chip-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius);
  background: #fff;
  color: var(--vpf-ink);
  font-weight: 600;
}

.vpf-chip-grid svg,
.vpf-product-list svg {
  flex: none;
  color: var(--vpf-accent-dark);
}

.vpf-product-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.vpf-product-details .vpf-card {
  padding: 28px;
}

.vpf-product-details-title {
  margin: 0 0 18px;
  color: var(--vpf-ink);
  font-size: 18px;
  letter-spacing: -.01em;
}

.vpf-product-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vpf-product-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: rgb(var(--vpf-ink-rgb) / .86);
  line-height: 1.5;
}

.vpf-product-list svg {
  margin-top: 3px;
}

.vpf-product-prose {
  max-width: var(--vpf-content);
}

.vpf-section-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: none;
}

.vpf-section-title-row .vpf-card-link {
  padding-top: 0;
}

.vpf-section-cta {
  padding-top: 0;
}

@media (max-width: 900px) {
  .vpf-product-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Native <details> marker replaced by the FAQ plus icon. */
.wp-block-details summary {
  position: relative;
  padding-right: 36px;
  list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%2312233e' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform var(--vpf-dur) var(--vpf-ease);
}

.wp-block-details[open] summary::after {
  transform: rotate(45deg);
}

/* Archive cards: titles are h2 for outline, sized like card titles. */
.vpf-home-page-demo-card h2 {
  margin: 12px 0 0;
  color: var(--vpf-ink);
  font-size: 20px;
  letter-spacing: -.015em;
}

.vpf-related-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* ==========================================================================
 * Interaction states — hover, press, focus.
 *
 * Kept together, at the end of the last stylesheet, so every component
 * reacts the same way and there is one place to tune it:
 *
 * 1. Buttons: colour change you can see (primary moves to the hover shade,
 *    not to a near-identical dark), a 1px lift and a deeper shadow; pressing
 *    drops it back.
 * 2. Whole-element links (cards): border, shadow and lift; the title takes
 *    the accent text colour and the arrow slides.
 * 3. Text links and nav: colour + tint, never layout shift.
 * 4. Movement only for devices that really hover — no "stuck" hover after a
 *    tap on a phone — and none at all under reduced motion (see main.css).
 * ======================================================================= */

/* ---------------------------------------------------------- 1. buttons */

.vpf-btn-primary:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:not([class*="vp"]):hover,
input[type="submit"]:hover {
  border-color: var(--vpf-primary-dark);
  background: var(--vpf-primary-dark);
  color: #fff;
}

.vpf-btn-primary:hover {
  box-shadow: 0 2px 4px rgb(var(--vpf-primary-rgb) / .16), 0 12px 28px rgb(var(--vpf-primary-rgb) / .22);
}

.vpf-btn-secondary:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: var(--vpf-ink);
  background: #fff;
  color: var(--vpf-ink);
  box-shadow: 0 0 0 1px var(--vpf-ink), var(--vpf-shadow-sm);
}

.vpf-btn-accent:hover,
.wp-block-button.is-style-vpf-accent > .wp-block-button__link:hover {
  border-color: var(--vpf-accent-dark);
  background: var(--vpf-accent-dark);
  color: var(--vpf-primary);
  box-shadow: 0 10px 24px rgb(var(--vpf-accent-rgb) / .28);
}

@media (hover: hover) {
  .vpf-btn-primary:hover,
  .vpf-btn-secondary:hover,
  .vpf-btn-accent:hover,
  .wp-block-button__link:hover {
    transform: translateY(-1px);
  }
}

.vpf-btn-primary:active,
.vpf-btn-secondary:active,
.vpf-btn-accent:active,
.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 60ms;
}

/* Header ghost button: reads as a link — colour only. */
.vp-site-header .vpf-header-actions > .vpf-btn-ghost:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
  color: var(--vpf-accent-text);
}

/* Buttons on dark surfaces: CTA band, footer, showcase. */
.vpf-cta .vpf-btn-primary:hover,
.vpf-site-footer--dark .vpf-site-footer-cta .vpf-btn-primary:hover {
  border-color: #fff;
  background: #fff;
  color: var(--vpf-primary);
  box-shadow: 0 10px 28px rgb(0 0 0 / .25);
}

.vpf-cta .vpf-btn-secondary:hover {
  border-color: rgb(255 255 255 / .45);
  background: var(--vpf-hover-on-dark);
  color: #fff;
  box-shadow: none;
}

/* ----------------------------------------------------- 2. card targets */

.vpf-feature-card,
.vpf-home-page-demo-card,
.vpf-home-band-card,
.vpf-price-card,
.vpf-home-step-card,
.vpf-chip-grid li {
  transition: border-color var(--vpf-dur) var(--vpf-ease), box-shadow var(--vpf-dur) var(--vpf-ease), transform var(--vpf-dur) var(--vpf-ease), background-color var(--vpf-dur) var(--vpf-ease);
}

.vpf-feature-card:hover,
.vpf-home-page-demo-card:hover,
.vpf-home-band-card:hover,
.vpf-card:has(.vpf-card-link:hover) {
  border-color: rgb(var(--vpf-accent-rgb) / .55);
  box-shadow: 0 1px 2px rgb(var(--vpf-ink-rgb) / .04), 0 18px 40px -14px rgb(var(--vpf-accent-dark-rgb) / .35);
}

@media (hover: hover) {
  .vpf-feature-card:hover,
  .vpf-home-page-demo-card:hover,
  .vpf-home-band-card:hover {
    transform: var(--vpf-lift);
  }
}

.vpf-feature-card:hover h2 a,
.vpf-feature-card:hover h3 a,
.vpf-home-page-demo-card:hover h2,
.vpf-home-page-demo-card:hover h3,
.vpf-home-band-card:hover h3 a {
  color: var(--vpf-accent-text);
}

.vpf-feature-card:hover .vpf-feature-thumb-placeholder {
  background: rgb(var(--vpf-accent-rgb) / .2);
}

/* Keyboard users get the same card feedback as mouse users. */
.vpf-home-page-demo-card:focus-visible {
  outline: none;
  border-color: var(--vpf-accent-dark);
  box-shadow: var(--vpf-ring);
}

.vpf-feature-card:focus-within,
.vpf-home-band-card:focus-within {
  border-color: var(--vpf-accent-dark);
}

/* Pricing: the cards themselves are not links — only the featured one is
   lifted, permanently, and the others answer with a border. */
.vpf-price-card:not(.featured):hover {
  border-color: var(--vpf-hover-border);
}

.vpf-chip-grid li:hover {
  border-color: rgb(var(--vpf-accent-rgb) / .5);
  background: rgb(var(--vpf-accent-rgb) / .05);
}

/* ------------------------------------------------- 3. links and menus */

.vpf-card-link:hover,
.vpf-card-link:focus-visible {
  color: var(--vpf-accent-text);
}

/* Inline links in written content. */
.vpf-page-content a:not([class]),
.vpf-single-content a:not([class]),
.vpf-prose a:not([class]),
.vpf-landing-body a:not([class]),
.vpf-doc-content a:not([class]) {
  color: var(--vpf-accent-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(var(--vpf-accent-rgb) / .45);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--vpf-dur-fast) var(--vpf-ease), text-decoration-color var(--vpf-dur-fast) var(--vpf-ease);
}

.vpf-page-content a:not([class]):hover,
.vpf-single-content a:not([class]):hover,
.vpf-prose a:not([class]):hover,
.vpf-landing-body a:not([class]):hover,
.vpf-doc-content a:not([class]):hover {
  color: var(--vpf-ink);
  text-decoration-color: currentColor;
}

/* Desktop nav hover and current page: accent underline, see header.css. */

/* Mega menu entries. */
.vp-mega-link,
.vp-type-link {
  position: relative;
}

.vp-mega-link:hover,
.vp-mega-link:focus-visible,
.vp-type-link:hover,
.vp-type-link:focus-visible {
  background: rgb(var(--vpf-accent-rgb) / .08);
  outline: none;
}

.vp-mega-link:hover b,
.vp-mega-link:focus-visible b,
.vp-type-link:hover,
.vp-type-link:focus-visible {
  color: var(--vpf-accent-text);
}

.vp-mega-link:focus-visible,
.vp-type-link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--vpf-accent-dark);
}

.vp-mega-highlight a:hover {
  color: #fff;
}

/* Mobile panel. */
.vp-mobile-list a:hover,
.vp-mobile-list a:focus-visible {
  background: rgb(var(--vpf-accent-rgb) / .07);
  color: var(--vpf-accent-text);
}

.vp-mobile-list .current-menu-item > a {
  color: var(--vpf-accent-text);
  font-weight: 600;
}

.vp-mobile-toggle:hover {
  border-color: var(--vpf-hover-border);
  background: var(--vpf-cloud);
}

/* Breadcrumb, filters, pagination. */
.vpf-breadcrumb a:hover {
  color: var(--vpf-accent-text);
}

.vpf-filter-chip:hover,
.vpf-feature-filter:hover {
  border-color: rgb(var(--vpf-accent-rgb) / .55);
  background: rgb(var(--vpf-accent-rgb) / .06);
  color: var(--vpf-ink);
}

.navigation.pagination a.page-numbers:hover {
  border-color: var(--vpf-accent-dark);
  background: rgb(var(--vpf-accent-rgb) / .07);
}

/* FAQ: the whole summary row is the target. */
.vpf-faq summary,
.wp-block-details summary {
  border-radius: inherit;
  transition: background-color var(--vpf-dur-fast) var(--vpf-ease), color var(--vpf-dur-fast) var(--vpf-ease);
}

.vpf-faq summary:hover {
  background: transparent;
}

.vpf-faq summary:hover,
.wp-block-details summary:hover {
  color: var(--vpf-accent-text);
}

.vpf-faq summary:focus-visible,
.wp-block-details summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--vpf-accent-dark);
}

/* Footer: links brighten to full white with a short underline. */
.vpf-site-footer a:not(.vpf-btn-primary):not(.vpf-site-footer-logo) {
  transition: color var(--vpf-dur-fast) var(--vpf-ease);
}

.vpf-site-footer a:not(.vpf-btn-primary):not(.vpf-site-footer-logo):hover {
  color: var(--vpf-footer-fg);
  text-decoration: underline;
  text-decoration-color: var(--vpf-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.vpf-site-footer a:focus-visible {
  outline: 2px solid var(--vpf-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Showcase (dark band) link. */
.vpf-home-link:hover {
  color: #fff;
}

.vpf-home-link:hover [aria-hidden="true"] {
  transform: translateX(3px);
}

.vpf-home-link [aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--vpf-dur) var(--vpf-ease);
}

/* Back to top. */
.vpf-to-top:hover {
  box-shadow: 0 10px 28px rgb(var(--vpf-primary-rgb) / .3);
  border-color: var(--vpf-primary);
  background: var(--vpf-primary);
  color: #fff;
}

/* Form fields: hovering previews the focus colour. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):hover,
select:hover,
textarea:hover {
  border-color: var(--vpf-hover-border);
}

/* Selection uses the brand, not the browser blue. */
::selection {
  background: rgb(var(--vpf-accent-rgb) / .3);
  color: var(--vpf-ink);
}

/* Demo cards: the placeholder "screen" lights up, like a sign switching on. */
.vpf-home-page-demo-card::before {
  transition: filter var(--vpf-dur) var(--vpf-ease);
}

.vpf-home-page-demo-card:hover::before {
  filter: brightness(1.25) saturate(1.2);
}


/* ---------------------------------------------------- highlight (*text*) */

.vpf-hl {
  background: linear-gradient(100deg, var(--vpf-accent-dark) 0%, var(--vpf-accent) 55%, #5ee6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* On light surfaces the bright end of the gradient is too pale to read. */
.vpf-hl {
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--vpf-accent-dark) 70%, var(--vpf-ink)) 0%, var(--vpf-accent-dark) 100%);
}

.vpf-hero-dark .vp-home-hero .vpf-hl,
.vpf-home-showcase .vpf-hl,
.vpf-cta .vpf-hl,
.vpf-site-footer--dark .vpf-hl {
  background-image: linear-gradient(100deg, var(--vpf-accent) 0%, #7af0d9 50%, #6fdcff 100%);
}

/* ------------------------------------------------------ staggered reveal */

.vpf-js-reveal .vpf-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--vpf-ease), transform .6s var(--vpf-ease), border-color var(--vpf-dur) var(--vpf-ease), box-shadow var(--vpf-dur) var(--vpf-ease);
}

.vpf-js-reveal .vpf-stagger.is-revealed > * {
  opacity: 1;
  transform: none;
}

.vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(2) { transition-delay: 70ms, 70ms, 0s, 0s; }
.vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(3) { transition-delay: 140ms, 140ms, 0s, 0s; }
.vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(4) { transition-delay: 210ms, 210ms, 0s, 0s; }
.vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(5) { transition-delay: 280ms, 280ms, 0s, 0s; }
.vpf-js-reveal .vpf-stagger.is-revealed > *:nth-child(n+6) { transition-delay: 340ms, 340ms, 0s, 0s; }

/* Once revealed, hover lift must win over the reveal transform. */
@media (hover: hover) {
  .vpf-js-reveal .vpf-stagger.is-revealed > .vpf-feature-card:hover,
  .vpf-js-reveal .vpf-stagger.is-revealed > .vpf-home-page-demo-card:hover,
  .vpf-js-reveal .vpf-stagger.is-revealed > .vpf-home-band-card:hover {
    transform: var(--vpf-lift);
    transition-delay: 0s;
  }
}

/* A thin lit edge where the dark footer begins. */
.vpf-site-footer--dark {
  position: relative;
}

.vpf-site-footer--dark::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--vpf-accent-rgb) / .7), transparent);
}

/* ==========================================================================
 * Composed pages — sections written by VPF AI → Page composer.
 * Block editor output (.vpf-ai-sec, .vpf-section-head, .vpf-card-grid) and
 * Elementor output (.vpf-el-*) share the same look.
 * ======================================================================= */

.vpf-section-head {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.vpf-section-head > * {
  max-width: 760px;
}

.vpf-section-head.is-center > * {
  margin-inline: auto;
  text-align: center;
}

.vpf-section-head .vpf-eyebrow {
  margin-bottom: 12px;
  color: var(--vpf-accent-text);
  font-size: 13px;
  font-weight: 600;
}

.vpf-section-head .vpf-display {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: var(--vpf-heading-weight);
  letter-spacing: -.025em;
  line-height: 1.12;
}

.vpf-section-head .vpf-lead-text {
  margin-top: 16px;
  color: var(--vpf-muted);
  font-size: 18px;
  line-height: 1.6;
}

.vpf-landing-body > .vpf-ai-sec {
  margin-top: 0;
}

.vpf-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 20px;
}

.vpf-card-grid > .is-style-vpf-card {
  margin: 0;
  transition: border-color var(--vpf-dur) var(--vpf-ease), box-shadow var(--vpf-dur) var(--vpf-ease);
}

.vpf-card-grid > .is-style-vpf-card:hover {
  border-color: rgb(var(--vpf-accent-rgb) / .5);
  box-shadow: 0 18px 40px -14px rgb(var(--vpf-accent-dark-rgb) / .35);
}

.vpf-card-grid h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.vpf-card-grid p {
  margin: 0;
  color: var(--vpf-muted);
  font-size: 15px;
  line-height: 1.6;
}

.vpf-card-grid .vpf-step-number {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--vpf-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.vpf-card-grid .vpf-stat {
  padding: 24px;
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius-lg);
  background: #fff;
  text-align: center;
}

.vpf-stat-value {
  margin: 0;
  color: var(--vpf-ink);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.vpf-stat-label {
  margin: 8px 0 0;
  color: var(--vpf-muted);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Dark sections: cards turn to glass. */
.vpf-bg-navy .is-style-vpf-card,
.vpf-bg-navy .vpf-card-grid .vpf-stat,
.vpf-bg-navy .wp-block-details {
  border-color: rgb(255 255 255 / .12);
  background: rgb(255 255 255 / .05);
  box-shadow: none;
}

.vpf-bg-navy .vpf-card-grid h3,
.vpf-bg-navy .vpf-stat-value,
.vpf-bg-navy .wp-block-details summary {
  color: #fff;
}

.vpf-bg-navy .vpf-section-head .vpf-eyebrow {
  color: var(--vpf-accent);
}

.vpf-bg-navy .vpf-section-head .vpf-lead-text,
.vpf-bg-navy .vpf-card-grid p,
.vpf-bg-navy .vpf-stat-label {
  color: rgb(255 255 255 / .72);
}

.vpf-bg-navy .vpf-card-grid .vpf-step-number {
  background: var(--vpf-accent);
  color: var(--vpf-primary);
}

.vpf-bg-navy .wp-block-details summary::after {
  filter: invert(1);
}

.vpf-ai-sec .wp-block-details {
  max-width: 820px;
  margin-inline: auto;
}

/* The CTA box sits on a light band. */
.vpf-ai-cta .vpf-cta {
  padding-block: clamp(48px, 7vw, 88px);
}

.vpf-cta .wp-block-buttons {
  justify-content: center;
  margin-top: 28px;
}

.vpf-cta .wp-block-button.is-style-vpf-accent > .wp-block-button__link:hover {
  border-color: #fff;
  background: #fff;
  color: var(--vpf-primary);
}

.vpf-cta .wp-block-button.is-style-outline > .wp-block-button__link,
.vpf-bg-navy .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: rgb(255 255 255 / .25);
  background: rgb(255 255 255 / .06);
  color: #fff;
}

.vpf-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.vpf-bg-navy .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: rgb(255 255 255 / .5);
  background: rgb(255 255 255 / .12);
  box-shadow: none;
  color: #fff;
}

.vpf-ai-sec .vpf-sc {
  margin-top: 8px;
}

/* ------------------------------------------------- Elementor output --- */

.vpf-el-sec .vpf-el-eyebrow .elementor-heading-title {
  color: var(--vpf-accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vpf-el-sec .vpf-el-title .elementor-heading-title {
  max-width: 22ch;
  color: var(--vpf-ink);
  font-family: var(--vpf-font-heading);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: var(--vpf-heading-weight);
  letter-spacing: -.025em;
  line-height: 1.12;
}

.vpf-el-sec .vpf-el-h1 .elementor-heading-title {
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.05;
}

.vpf-el-sec .vpf-el-lead {
  max-width: 62ch;
  color: var(--vpf-muted);
  font-size: 18px;
  line-height: 1.6;
}

.vpf-el-sec .elementor-widget-heading[style*="center"] .elementor-heading-title,
.vpf-el-cta .vpf-el-title .elementor-heading-title,
.vpf-el-cta .vpf-el-lead {
  margin-inline: auto;
}

.vpf-el-dark .vpf-el-title .elementor-heading-title,
.vpf-el-dark .elementor-heading-title,
.vpf-el-cta .vpf-el-title .elementor-heading-title {
  color: #fff;
}

.vpf-el-dark .vpf-el-eyebrow .elementor-heading-title {
  color: var(--vpf-accent);
}

.vpf-el-dark .vpf-el-lead,
.vpf-el-dark .elementor-widget-text-editor,
.vpf-el-cta .vpf-el-lead {
  color: rgb(255 255 255 / .74);
}

.vpf-el-hero {
  background:
    radial-gradient(45% 60% at 80% 20%, rgb(var(--vpf-accent-rgb) / .28), transparent 70%),
    var(--vpf-primary) !important;
}

.vpf-el-grid > .e-con-inner,
.vpf-el-grid.e-con-full {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 20px;
}

.vpf-el-card {
  padding: 24px !important;
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius-lg);
  background: #fff;
  box-shadow: var(--vpf-shadow-sm);
  transition: border-color var(--vpf-dur) var(--vpf-ease), box-shadow var(--vpf-dur) var(--vpf-ease);
}

.vpf-el-card:hover {
  border-color: rgb(var(--vpf-accent-rgb) / .5);
  box-shadow: 0 18px 40px -14px rgb(var(--vpf-accent-dark-rgb) / .35);
}

.vpf-el-card h3.elementor-heading-title {
  color: var(--vpf-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.vpf-el-card .elementor-widget-text-editor {
  color: var(--vpf-muted);
  font-size: 15px;
}

.vpf-el-dark .vpf-el-card {
  border-color: rgb(255 255 255 / .12);
  background: rgb(255 255 255 / .05);
  box-shadow: none;
}

.vpf-el-dark .vpf-el-card .elementor-widget-text-editor {
  color: rgb(255 255 255 / .72);
}

.vpf-el-step .elementor-heading-title {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--vpf-primary);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
}

.vpf-el-btn .elementor-button {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius-btn);
  background: #fff;
  color: var(--vpf-ink);
  font-family: var(--vpf-font-body);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: background-color var(--vpf-dur-fast) var(--vpf-ease), border-color var(--vpf-dur-fast) var(--vpf-ease), color var(--vpf-dur-fast) var(--vpf-ease);
}

.vpf-el-btn-accent .elementor-button {
  border-color: var(--vpf-accent);
  background: var(--vpf-accent);
  color: var(--vpf-primary);
}

.vpf-el-btn .elementor-button:hover {
  border-color: var(--vpf-ink);
  color: var(--vpf-ink);
}

.vpf-el-btn-accent .elementor-button:hover {
  border-color: #fff;
  background: #fff;
  color: var(--vpf-primary);
}

.vpf-el-dark .vpf-el-btn:not(.vpf-el-btn-accent) .elementor-button,
.vpf-el-cta .vpf-el-btn:not(.vpf-el-btn-accent) .elementor-button {
  border-color: rgb(255 255 255 / .25);
  background: rgb(255 255 255 / .06);
  color: #fff;
}

.vpf-el-checks .elementor-icon-list-icon i,
.vpf-el-checks .elementor-icon-list-icon svg {
  color: var(--vpf-accent-dark);
  fill: var(--vpf-accent-dark);
}

.vpf-el-checks .elementor-icon-list-text {
  color: var(--vpf-ink);
  font-size: 16px;
}

.vpf-el-faq .elementor-toggle-item {
  margin-bottom: 10px;
  border: 1px solid var(--vpf-line);
  border-radius: var(--vpf-radius);
  background: #fff;
}

.vpf-el-faq .elementor-tab-title {
  padding: 18px 20px !important;
  border: 0 !important;
  color: var(--vpf-ink);
  font-weight: 600;
}

.vpf-el-faq .elementor-tab-content {
  padding: 0 20px 20px !important;
  border: 0 !important;
  color: var(--vpf-muted);
}

.vpf-section-head.is-center {
  text-align: center;
}

.vpf-section-head.is-center > * {
  margin-right: auto !important;
  margin-left: auto !important;
}

.vpf-el-dark .vpf-el-card h3.elementor-heading-title,
.vpf-el-dark .vpf-el-card .elementor-heading-title {
  color: #fff;
}

.vpf-el-dark .vpf-el-step .elementor-heading-title {
  background: var(--vpf-accent);
  color: var(--vpf-primary) !important;
}

.e-con.vpf-el-cta {
  --padding-top: clamp(48px, 7vw, 88px);
  --padding-bottom: clamp(48px, 7vw, 88px);
  --padding-left: 32px;
  --padding-right: 32px;
  border-radius: 28px;
  text-align: center;
}

/* ---------------------------------------------------- generated images --- */

.vpf-landing-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.vpf-landing-hero-figure,
.vpf-ai-figure {
  margin: 0;
}

.vpf-landing-hero-figure img,
.vpf-ai-figure img,
.vpf-el-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--vpf-radius-lg);
  box-shadow: 0 30px 70px -24px rgb(var(--vpf-primary-rgb) / .45), 0 0 0 1px rgb(var(--vpf-ink-rgb) / .06);
  object-fit: cover;
}

.vpf-landing-hero-figure img {
  aspect-ratio: 3 / 2;
}

.vpf-ai-media img {
  aspect-ratio: 16 / 9;
}

.vpf-ai-media figcaption {
  margin-top: 14px;
  color: var(--vpf-muted);
  font-size: 15px;
  text-align: center;
}

.vpf-bg-navy .vpf-ai-figure img {
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .1);
}

@media (max-width: 900px) {
  .vpf-landing-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.elementor .vpf-el-image img,
.elementor .vpf-el-figure img {
  border-radius: var(--vpf-radius-lg);
  box-shadow: 0 30px 70px -24px rgb(var(--vpf-primary-rgb) / .45), 0 0 0 1px rgb(var(--vpf-ink-rgb) / .06);
}

.elementor .vpf-el-dark .vpf-el-image img {
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .1);
}