/* ==========================================================================
   VuloForm – Kadence patterns (patterns/*.php, Inserter → Patterns → VuloForm).
   The patterns are plain Kadence blocks (Row Layout, Section/column, Advanced Text,
   Buttons) plus [vf_graphic] shortcodes. Their look comes from the class names in
   Advanced → Additional CSS class(es), so you can use these classes on any Kadence block.

   Anything you set in Kadence's own panels (font size, colour, padding…) still wins,
   because Kadence prints more specific CSS for that one block.

    1. Rows            vf-k (every pattern row), vf-k-full, vf-cols-hero / -40 / -2
    2. Columns         vf-row (+ vf-row-center, vf-nowrap), vf-grid-2 / -2-lg / -3 / -4 / -bento (+ vf-span-2/3/4/6), vf-gap-*
    3. Text            vf-t-display, -h2, -h2-md, -h2-sm, -h3, -h4, -lead, -body, -15, -17, -sm, -xs,
                       -kicker, -stat, -band, -cta · colours vf-c-* · marks vf-mark-navy / -mint / -soft
    4. Pieces          vf-eyebrow (+ -navy), vf-badge, vf-pill (+ -glass / -white / -outline),
                       vf-chip, vf-check, vf-card (+ -sm, -lift), vf-bg-*, vf-border, vf-glass
    5. Buttons         vf-btn + vf-btn-primary / -light / -sm / -lg, vf-btn-tile, vf-btn-pill, vf-card-link
    6. Spacing         vf-mt-* / vf-mb-* / vf-pt-32 (Tailwind steps: 1 = .25rem), vf-w-*, vf-center
    7. Sections        hero, privacy bands, sticky steps, accordion, tabs, CTA, get-it card, backgrounds
    8. Editor
   ========================================================================== */

/* 1. Rows ------------------------------------------------------------------ */
.vf-k { position: relative; isolation: isolate; color: var(--ink); }
.vf-k, .vf-k *, .vf-k ::before, .vf-k ::after { box-sizing: border-box; }
.kb-row-layout-wrap.vf-k { line-height: 1.5; }
.vf-k :is(b, strong) { font-weight: bolder; }
/* Width = --container-6xl (set from Customize → VuloForm → Content width, or Astra's Container Width). !important beats Kadence's own row width. */
.kb-row-layout-wrap.vf-k > .kt-row-column-wrap { box-sizing: border-box; width: 100%; max-width: var(--container-6xl, 72rem) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .kb-row-layout-wrap.vf-k > .kt-row-column-wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }
.kb-row-layout-wrap.vf-k.vf-k-cta > .kt-row-column-wrap { max-width: calc(var(--container-6xl, 72rem) + 3rem) !important; } /* the CTA card itself is 72rem wide */
.kb-row-layout-wrap.vf-k.vf-k-full > .kt-row-column-wrap { max-width: none !important; padding-left: 0; padding-right: 0; }
/* Two-column rows stack below 1024px, like the original lg: grids. */
.kb-row-layout-wrap:is(.vf-cols-hero, .vf-cols-40, .vf-cols-2) > .kt-row-column-wrap { grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 2.5rem; row-gap: 4rem; }
.kb-row-layout-wrap.vf-cols-2 > .kt-row-column-wrap { column-gap: 3rem; row-gap: 3rem; }
.kb-row-layout-wrap.vf-k-faq > .kt-row-column-wrap { column-gap: 3rem; row-gap: 3rem; }
@media (min-width: 1024px) {
	.kb-row-layout-wrap.vf-cols-hero > .kt-row-column-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	.kb-row-layout-wrap.vf-cols-40 > .kt-row-column-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
	.kb-row-layout-wrap.vf-cols-2 > .kt-row-column-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.vf-k-top > .kt-row-column-wrap { align-items: start !important; }

/* 2. Columns ---------------------------------------------------------------- */
.vf-k .wp-block-kadence-column > .kt-inside-inner-col { row-gap: 0; }
.vf-k .wp-block-kadence-column { min-width: 0; }
.wp-block-kadence-column.vf-row > .kt-inside-inner-col { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--vf-gap, .5rem); }
.wp-block-kadence-column.vf-between > .kt-inside-inner-col { justify-content: space-between; align-items: flex-end; gap: 1rem; }
.wp-block-kadence-column.vf-row-center > .kt-inside-inner-col { justify-content: center; }
.wp-block-kadence-column.vf-row.vf-nowrap > .kt-inside-inner-col { flex-wrap: nowrap; align-items: stretch; } /* one line, long words wrap inside each item */
.vf-gap-1 { --vf-gap: .375rem; } .vf-gap-2 { --vf-gap: .5rem; } .vf-gap-3 { --vf-gap: .75rem; }
.vf-gap-4 { --vf-gap: 1rem; } .vf-gap-6 { --vf-gap: 1.5rem; }
.vf-stats > .kt-inside-inner-col { column-gap: 2.5rem !important; row-gap: 1rem !important; align-items: flex-start !important; }

.wp-block-kadence-column:is(.vf-grid-2, .vf-grid-2-lg, .vf-grid-3, .vf-grid-4, .vf-grid-bento) > .kt-inside-inner-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.wp-block-kadence-column.vf-grid-2-lg > .kt-inside-inner-col { gap: 1.5rem; }
.wp-block-kadence-column.vf-gap-4.vf-gap-4 > .kt-inside-inner-col { gap: 1rem; }
/* vf-fill: the card inside takes the full height of the column (cards in a row end up the same height). */
.wp-block-kadence-column.vf-fill > .kt-inside-inner-col { height: 100%; }
.vf-fill > .kt-inside-inner-col > .wp-block-vuloform-graphic, .vf-fill > .kt-inside-inner-col > .wp-block-vuloform-graphic > .vf-graphic { height: 100%; }
@media (min-width: 640px) { .wp-block-kadence-column.vf-grid-4 > .kt-inside-inner-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
	.wp-block-kadence-column.vf-grid-2 > .kt-inside-inner-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-block-kadence-column.vf-grid-3 > .kt-inside-inner-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wp-block-kadence-column.vf-grid-bento > .kt-inside-inner-col { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.vf-grid-bento .vf-span-2 { grid-column: span 2; } .vf-grid-bento .vf-span-3 { grid-column: span 3; }
	.vf-grid-bento .vf-span-4 { grid-column: span 4; } .vf-grid-bento .vf-span-6 { grid-column: span 6; }
}
@media (min-width: 1024px) {
	.wp-block-kadence-column.vf-grid-2-lg > .kt-inside-inner-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-block-kadence-column.vf-grid-4 > .kt-inside-inner-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 3. Text ------------------------------------------------------------------- */
/* Doubled class = beats Astra's h1–h6 rules, loses to Kadence's own per-block settings. */
.vf-k .wp-block-kadence-advancedheading { margin: 0; font-family: inherit; }
.vf-k .wp-block-kadence-advancedheading a { color: inherit; }
.vf-k mark.kt-highlight { background: none; color: inherit; padding: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vf-t-display.vf-t-display { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.vf-t-h2.vf-t-h2 { font-size: 2.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.vf-t-h2-md.vf-t-h2-md { font-size: 1.875rem; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
@media (min-width: 640px) { .vf-t-h2.vf-t-h2 { font-size: 3rem; } .vf-t-h2-md.vf-t-h2-md { font-size: 2.25rem; } }
.vf-t-h2-sm.vf-t-h2-sm { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--ink); }
.vf-t-h3.vf-t-h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: inherit; }
.vf-t-h4.vf-t-h4 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: inherit; }
.vf-t-bold.vf-t-bold { font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--ink); }
.vf-t-lead.vf-t-lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--ink-soft); }
.vf-t-lead.vf-t-relaxed { line-height: 1.625; }
.vf-t-body.vf-t-body { font-size: 1rem; line-height: 1.625; color: var(--ink-soft); }
.vf-t-15.vf-t-15 { font-size: 15px; line-height: 1.625; }
.vf-lh-normal.vf-lh-normal { line-height: 1.5; } .vf-lh-snug.vf-lh-snug { line-height: 1.375; } .vf-lh-relaxed.vf-lh-relaxed { line-height: 1.625; }
.vf-t-17.vf-t-17 { font-size: 17px; line-height: 1.625; color: var(--ink-soft); }
.vf-t-sm.vf-t-sm { font-size: .875rem; line-height: 1.25rem; color: var(--ink-soft); }
.vf-t-sm.vf-t-relaxed { line-height: 1.625; }
.vf-t-xs.vf-t-xs { font-size: .75rem; line-height: 1.625; color: var(--ink-soft); }
.vf-t-kicker.vf-t-kicker { font-size: .875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--ink-soft); }
.vf-t-stat.vf-t-stat { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--ink); }
.vf-t-band.vf-t-band { font-size: clamp(5rem, 14vw, 12rem); line-height: 1; font-weight: 700; white-space: nowrap; }
.vf-t-cta.vf-t-cta { font-size: clamp(2.4rem, 5.5vw, 4.5rem); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }

.vf-c-ink.vf-c-ink { color: var(--ink); } .vf-c-soft.vf-c-soft { color: var(--ink-soft); }
.vf-c-soft strong { color: var(--ink); }
.vf-c-navy.vf-c-navy { color: var(--navy); } .vf-c-mint.vf-c-mint { color: var(--mint); }
.vf-c-green.vf-c-green { color: #0f7a53; } .vf-c-white.vf-c-white { color: #fff; }
.vf-c-skysoft.vf-c-skysoft { color: var(--sky-soft); } .vf-c-mintsoft.vf-c-mintsoft { color: var(--mint-soft); }
.vf-mark-navy mark.kt-highlight { color: var(--navy); }
.vf-mark-mint mark.kt-highlight { color: var(--mint); }
.vf-mark-soft mark.kt-highlight { color: var(--ink-soft); }
.vf-k a.vf-link, .vf-k .vf-links a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.vf-k .vf-crumbs a { color: var(--ink-soft); text-decoration: none; }
.vf-k .vf-crumbs a:hover { color: var(--ink); }

/* 4. Pieces ----------------------------------------------------------------- */
/* Eyebrow: small rounded label with a dot (mint by default, vf-eyebrow-navy for blue). */
.vf-eyebrow.vf-eyebrow { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; max-width: 100%; padding: .375rem .875rem; border: 1px solid rgba(25, 179, 123, .3); border-radius: 99px; background: var(--mint-soft); color: #0f7a53; font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.vf-eyebrow::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 99px; background: var(--mint); }
.vf-eyebrow.vf-eyebrow-navy { border-color: rgba(0, 75, 242, .15); background: var(--sky-soft); color: var(--navy); }
.vf-eyebrow-navy::before { background: var(--navy); }
.vf-center .vf-eyebrow, .vf-eyebrow.vf-center { margin-left: auto; margin-right: auto; }

/* Hero badge: "Free | No account · …  →" */
.wp-block-kadence-column.vf-badge { width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .7); padding: .375rem 1rem .375rem .375rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wp-block-kadence-column.vf-badge > .kt-inside-inner-col { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .5rem; }
.vf-badge .wp-block-kadence-advancedheading { min-width: 0; }
.vf-badge :is(.vf-badge-tag, .vf-badge-arrow) { flex: none; }
.vf-badge .wp-block-kadence-advancedheading { font-size: .875rem; line-height: 1.25rem; color: var(--ink-soft); }
.vf-badge .vf-badge-tag.vf-badge-tag { padding: .125rem .625rem; border-radius: 99px; background: var(--mint); color: #fff; font-size: .75rem; line-height: 1rem; font-weight: 700; }
.vf-badge:hover .vf-badge-arrow { transform: translateX(.125rem); }
.vf-badge-arrow { transition: transform .2s; }

/* Pills and chips. */
.vf-pill.vf-pill { display: inline-block; width: fit-content; padding: .25rem .75rem; border-radius: 99px; font-size: .75rem; line-height: 1rem; font-weight: 500; }
.vf-pill-glass.vf-pill-glass { background: rgba(255, 255, 255, .1); color: #fff; }
.vf-pill-white.vf-pill-white { padding: .375rem .75rem; background: #fff; font-weight: 600; color: var(--ink); }
.vf-pill-outline.vf-pill-outline { padding: .5rem 1rem; border: 1px solid var(--line); font-size: .875rem; line-height: 1.25rem; color: var(--ink); }
.vf-chip.vf-chip { display: flex; align-items: center; gap: .75rem; flex: none; padding: 1rem 1.25rem !important; border-radius: 1rem !important; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; white-space: nowrap; color: var(--ink); }
.vf-chip em { font-style: normal; font-size: 1.5rem; line-height: 2rem; }
.vf-check.vf-check { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 99px; background: var(--mint); color: #fff; font-size: 1.125rem; font-weight: 700; }

/* Cards and backgrounds. */
.wp-block-kadence-column.vf-card { position: relative; overflow: hidden; border-radius: 28px; padding: 1.75rem; }
.wp-block-kadence-column.vf-card-8 { padding: 1.75rem; }
@media (min-width: 640px) { .wp-block-kadence-column.vf-card-8 { padding: 2rem; } }
.wp-block-kadence-column.vf-card-sm { position: relative; height: 100%; border-radius: 24px; padding: 1.5rem; }
.vf-card-lift > .kt-inside-inner-col { height: 100%; transition: transform .45s var(--vf-spring, ease); }
.vf-card-lift:hover > .kt-inside-inner-col { transform: translateY(-.25rem); }
.vf-bg-white { background-color: #fff !important; } .vf-bg-cream { background-color: var(--cream) !important; }
.vf-bg-sky { background-color: var(--sky-soft) !important; } .vf-bg-sky70 { background-color: rgba(233, 238, 255, .7) !important; }
.vf-bg-mint { background-color: var(--mint-soft) !important; } .vf-bg-peach { background-color: var(--peach-soft) !important; }
.vf-bg-butter { background-color: var(--butter-soft) !important; } .vf-bg-lilac { background-color: var(--lilac-soft) !important; }
.vf-bg-navy { background-color: var(--navy) !important; color: #fff; } .vf-bg-ink { background-color: var(--ink) !important; color: #fff; }
.vf-bg-navy .vf-t-body.vf-t-body { color: rgba(255, 255, 255, .7); }
.vf-border { border: 1px solid var(--line); }
.vf-glass { background-color: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vf-list > .kt-inside-inner-col > * + * { margin-top: .75rem !important; }

/* 5. Buttons (Kadence Buttons block → each button → Additional CSS class) ------ */
.kb-buttons-wrap a.kb-button.vf-btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid transparent; border-radius: 99px; padding: 1rem 1.75rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; text-decoration: none; box-shadow: none; transition: transform .2s, background-color .2s, border-color .2s, color .2s; }
.kb-buttons-wrap a.kb-button.vf-btn-primary { border-width: 0; background: var(--navy); color: #fff; box-shadow: 0 18px 40px -16px rgba(0, 75, 242, .7); }
.kb-buttons-wrap a.kb-button.vf-btn-primary:is(:hover, :focus) { background: var(--navy-light); color: #fff; transform: translateY(-.125rem); }
.kb-buttons-wrap a.kb-button.vf-btn-light { padding-left: 1.5rem; padding-right: 1.5rem; border-color: var(--line); background: #fff; color: var(--ink); }
.kb-buttons-wrap a.kb-button.vf-btn-light:is(:hover, :focus) { border-color: rgba(0, 75, 242, .3); background: #fff; color: var(--ink); }
.kb-buttons-wrap a.kb-button.vf-btn-lg { padding-left: 2rem; padding-right: 2rem; }
.kb-buttons-wrap a.kb-button.vf-btn-md { padding: .875rem 1.75rem; }
.kb-buttons-wrap a.kb-button.vf-btn-sm { padding: .625rem 1.25rem; font-size: .875rem; line-height: 1.25rem; box-shadow: none; }
.kb-buttons-wrap .kb-button.vf-btn .kb-svg-icon-wrap { font-size: .875em; }
.kb-buttons-wrap.kb-buttons-wrap:has(> .vf-btn) { gap: .75rem; } /* gap-3 of the original */
/* Link tiles ("VuloForm vs WPForms →") in a grid. */
.vf-link-grid .kb-buttons-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
@media (min-width: 640px) { .vf-link-grid .kb-buttons-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vf-link-grid .kb-buttons-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kb-buttons-wrap a.kb-button.vf-btn-tile { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; border: 1px solid var(--line); border-radius: 1rem; padding: .75rem 1rem; background: transparent; color: var(--ink); font-size: .875rem; line-height: 1.25rem; font-weight: 600; text-decoration: none; box-shadow: none; transition: border-color .2s, background-color .2s; }
.kb-buttons-wrap a.kb-button.vf-btn-tile::after { content: "→"; color: var(--navy); }
.kb-buttons-wrap a.kb-button.vf-btn-tile:is(:hover, :focus) { border-color: rgba(0, 75, 242, .3); background: var(--sky-soft); color: var(--ink); }
.kb-buttons-wrap a.kb-button.vf-btn-pill { border: 1px solid var(--line); border-radius: 99px; padding: .5rem 1rem; background: #fff; color: var(--ink); font-size: .875rem; line-height: 1.25rem; font-weight: 600; text-decoration: none; box-shadow: none; }
.kb-buttons-wrap a.kb-button.vf-btn-pill:is(:hover, :focus) { border-color: rgba(0, 75, 242, .3); background: var(--sky-soft); color: var(--ink); }
/* Card link: the whole card is clickable ("Pick a head-to-head"). */
.wp-block-kadence-column.vf-link-card { position: relative; height: 100%; border: 1px solid var(--line); border-radius: 24px; background: #fff; padding: 1.5rem; transition: transform .2s, border-color .2s, box-shadow .2s; }
.wp-block-kadence-column.vf-link-card:hover { transform: translateY(-.125rem); border-color: rgba(0, 75, 242, .3); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.vf-link-card .kb-buttons-wrap { display: block; }
.kb-buttons-wrap a.kb-button.vf-card-link { position: static; display: flex; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; text-decoration: none; box-shadow: none; }
.kb-buttons-wrap a.kb-button.vf-card-link::after { content: "→"; color: var(--navy); transition: transform .2s; }
.kb-buttons-wrap a.kb-button.vf-card-link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kb-buttons-wrap a.kb-button.vf-card-link:is(:hover, :focus) { background: none; color: var(--ink); }
.vf-link-card:hover .vf-card-link::after { transform: translateX(.25rem); }

/* 6. Spacing and width ------------------------------------------------------- */
.vf-mt-1.vf-mt-1 { margin-top: .25rem; } .vf-mt-1h.vf-mt-1h { margin-top: .375rem; } .vf-mt-2.vf-mt-2 { margin-top: .5rem; }
.vf-mt-3.vf-mt-3 { margin-top: .75rem; } .vf-mt-4.vf-mt-4 { margin-top: 1rem; } .vf-mt-5.vf-mt-5 { margin-top: 1.25rem; }
.vf-mt-6.vf-mt-6 { margin-top: 1.5rem; } .vf-mt-7.vf-mt-7 { margin-top: 1.75rem; } .vf-mt-8.vf-mt-8 { margin-top: 2rem; }
.vf-mt-9.vf-mt-9 { margin-top: 2.25rem; } .vf-mt-10.vf-mt-10 { margin-top: 2.5rem; } .vf-mt-12.vf-mt-12 { margin-top: 3rem; }
.vf-mt-14.vf-mt-14 { margin-top: 3.5rem; } .vf-mt-16.vf-mt-16 { margin-top: 4rem; }
.vf-mb-4.vf-mb-4 { margin-bottom: 1rem; } .vf-mb-5.vf-mb-5 { margin-bottom: 1.25rem; } .vf-mb-8.vf-mb-8 { margin-bottom: 2rem; }
.vf-pl-2.vf-pl-2 { padding-left: .5rem; } .vf-pt-32.vf-pt-32 { padding-top: 8rem; }
.vf-w-md.vf-w-md { max-width: 28rem; } .vf-w-lg.vf-w-lg { max-width: 32rem; } .vf-w-xl.vf-w-xl { max-width: 36rem; }
.vf-w-2xl.vf-w-2xl { max-width: 42rem; } .vf-w-3xl.vf-w-3xl { max-width: 48rem; }
.vf-center.vf-center { margin-left: auto; margin-right: auto; text-align: center; }
.vf-center .wp-block-kadence-advancedheading { margin-left: auto; margin-right: auto; }
.vf-space-12 > .kt-inside-inner-col > * + * { margin-top: 3rem !important; }

/* 7. Sections --------------------------------------------------------------- */
/* Soft colour blobs behind a section, drawn as backgrounds of the Row itself (same size and place as the
   blurred circles of the original: solid core, 64px soft edge). vf-blobs-hero, -logic, -features, -compare. */
.kb-row-layout-wrap.vf-blobs-hero {
	overflow: hidden;
	background-image:
		radial-gradient(circle at 164px 132px, var(--sky-soft) 196px, rgba(233, 238, 255, 0) 324px),
		radial-gradient(circle at calc(100% - 110px) 310px, var(--mint-soft) 166px, rgba(227, 246, 238, 0) 294px),
		radial-gradient(circle at calc(33.33% + 210px) calc(100% - 50px), var(--peach-soft) 146px, rgba(255, 238, 227, 0) 274px),
		radial-gradient(ellipse at center, rgba(251, 249, 244, 0) 30%, var(--cream) 75%),
		radial-gradient(rgba(13, 26, 69, .09) 1px, transparent 1px);
	background-size: auto, auto, auto, auto, 22px 22px;
}
.kb-row-layout-wrap.vf-blobs-logic { background-image: radial-gradient(ellipse 576px 364px at 50% 396px, rgba(241, 235, 255, .7) 72%, rgba(241, 235, 255, 0) 100%); background-repeat: no-repeat; }
.kb-row-layout-wrap.vf-blobs-compare { background-image: radial-gradient(ellipse 576px 314px at 50% 410px, rgba(233, 238, 255, .6) 70%, rgba(233, 238, 255, 0) 100%); background-repeat: no-repeat; }
.kb-row-layout-wrap.vf-blobs-features {
	background-image:
		radial-gradient(circle at 64px 304px, var(--mint-soft) 80px, rgba(227, 246, 238, 0) 208px),
		radial-gradient(circle at calc(100% - 160px) calc(100% - 240px), var(--peach-soft) 96px, rgba(255, 238, 227, 0) 224px);
}

/* Hero headline: "simple" (in <em>) gets the green hand-drawn underline. */
.vf-hero-title.vf-hero-title { --vf-delay: .15s; }
.vf-hero-title .vf-w { padding-bottom: .5rem; margin-bottom: 0; }
.vf-hero-title mark { display: block; padding-bottom: .5rem; }
.vf-hero-title mark.vf-w-line { padding-bottom: .5rem; margin-bottom: 0; }
.vf-hero-title em { position: relative; display: inline-block; vertical-align: bottom; font-style: normal; white-space: nowrap; }
.vf-hero-title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.25rem; height: .75rem; pointer-events: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'><path d='M2 14 C 60 4, 140 4, 298 12' fill='none' stroke='%2319b37b' stroke-width='6' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") no-repeat 0 0 / 100% 100%;
	clip-path: inset(0 0 0 0); transition: clip-path 1s var(--vf-ease, ease) 1.2s; }
html.vf-js:not(.vf-noanim) .vf-hero-title:not(.is-in) em::after { clip-path: inset(0 100% 0 0); }
.vf-k-hero .vf-graphic-hero-visual { position: relative; }
/* Hero timing of the original: badge 12px/.6s, text .9s, buttons 1.05s, stats fade 1s after 1.3s. */
.vf-k-hero .vf-badge.vf-reveal { --vf-t: .6s; }
html.vf-js:not(.vf-noanim) .vf-k-hero .vf-badge.vf-reveal:not(.is-in) { transform: translate3d(0, .75rem, 0); }
html.vf-js:not(.vf-noanim) .vf-k-hero :is(.vf-delay-9, .vf-delay-10).vf-reveal:not(.is-in) { transform: translate3d(0, 1rem, 0); }
.vf-k-hero .vf-delay-10.vf-reveal { --vf-delay: 1.05s; }
.vf-k-hero .vf-stats.vf-reveal-fade { --vf-t: 1s; }

/* Privacy: giant faded words behind the section, sliding sideways with the scroll. */
.vf-k-privacy { overflow: hidden; }
.kb-row-layout-wrap.vf-k-privacy > .kt-row-column-wrap,
.vf-k-privacy > .kt-row-column-wrap > .wp-block-kadence-column,
.vf-k-privacy > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col { position: static; }
.wp-block-kadence-column.vf-bands { position: absolute; top: 2.5rem; left: 0; right: 0; z-index: -1; pointer-events: none; user-select: none; }
.vf-bands > .kt-inside-inner-col > * + * { margin-top: .5rem !important; }

/* Builder: sticky steps (the row is tall; its inside sticks). */
.kb-row-layout-wrap.vf-sticky-steps > .kt-row-column-wrap { position: sticky; top: 0; min-height: 100vh; align-content: center; overflow: hidden; }
.vf-sticky-steps .vf-steps-k > .kt-inside-inner-col { display: grid; gap: .5rem; counter-reset: vfstep; }
.wp-block-kadence-column.vf-step { margin: 0; padding: 1rem; border-radius: 1rem; opacity: .45; transition: all .5s var(--vf-ease, ease); }
.wp-block-kadence-column.vf-step.is-active { opacity: 1; background: #fff; box-shadow: 0 16px 40px -24px rgba(13, 26, 69, .4); }
.vf-step .vf-step-name.vf-step-name { display: flex; align-items: center; gap: .75rem; font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--ink); counter-increment: vfstep; }
.vf-step-name::before { content: counter(vfstep); display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 99px; font-size: .875rem; background: var(--line); color: var(--ink-soft); transition: background-color .3s, color .3s; }
.vf-step.is-done .vf-step-name::before { background: var(--navy); color: #fff; }
.vf-step .vf-step-text.vf-step-text { overflow: hidden; max-height: 0; opacity: 0; padding-left: 2.5rem; font-size: .875rem; line-height: 1.625; color: var(--ink-soft); transition: max-height .45s var(--vf-ease, ease), opacity .45s var(--vf-ease, ease), padding-top .45s; }
.vf-step.is-active .vf-step-text.vf-step-text { max-height: 10rem; opacity: 1; padding-top: .5rem; }
.wp-block-kadence-column.vf-step-bar { display: none; }
@media (min-width: 640px) { .wp-block-kadence-column.vf-step-bar { display: block; } }

/* FAQ accordion: column vf-accordion > columns vf-acc-item > question (vf-acc-q) + answer (vf-acc-a). */
.wp-block-kadence-column.vf-accordion { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vf-accordion .wp-block-kadence-column.vf-acc-item + .wp-block-kadence-column.vf-acc-item { border-top: 1px solid var(--line); }
.vf-acc-item .vf-acc-q.vf-acc-q { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.vf-acc-item .vf-acc-q::after { content: "+"; display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 99px; font-size: 1.25rem; background: var(--sky-soft); color: var(--navy); transition: transform .35s var(--vf-ease, ease), background-color .35s, color .35s; }
.vf-acc-item.is-open .vf-acc-q::after { transform: rotate(45deg); background: var(--mint); color: #fff; }
.vf-acc-item .vf-acc-a.vf-acc-a { display: block; max-width: 36rem; max-height: 0; overflow: hidden; opacity: 0; font-size: 1rem; line-height: 1.625; color: var(--ink-soft); transition: max-height .4s var(--vf-ease, ease), opacity .4s, padding-bottom .4s; }
.vf-acc-item.is-open .vf-acc-a.vf-acc-a { max-height: 20rem; opacity: 1; padding-bottom: 1.5rem; }

/* Tabs built from Kadence text blocks (vf-tab-list column, one heading per tab). */
.vf-tab-list > .kt-inside-inner-col { display: none !important; }
.vf-tabs .vf-tab[hidden], .vf-k [hidden] { display: none !important; }
.wp-block-kadence-column.vf-tab-list { flex-direction: row; }
.wp-block-kadence-column.vf-tab-list.vf-tab-list-plain { margin-bottom: 0; }

/* Final call to action card (vf-scroll-zoom grows it while it scrolls in). */
.wp-block-kadence-column.vf-cta-card { position: relative; overflow: hidden; padding: 6rem 1.5rem; text-align: center; background: linear-gradient(to bottom right, var(--sky-soft), #fff, var(--mint-soft)); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 640px) { .wp-block-kadence-column.vf-cta-card { padding-top: 8rem; padding-bottom: 8rem; } }
.wp-block-kadence-column.vf-cta-card > .kt-inside-inner-col { position: static; } /* the notes sit in the card corners, not inside its padding */
.vf-cta-card .vf-t-cta, .vf-cta-card .vf-t-lead { margin-left: auto; margin-right: auto; }
.vf-cta-note.vf-cta-note { position: absolute; display: none; padding: .75rem 1rem; border-radius: 1rem; background: #fff; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--ink); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
@media (min-width: 640px) { .vf-cta-note.vf-cta-note { display: block; } }
.vf-cta-note-1 { top: 2.5rem; left: 8%; rotate: -8deg; --vf-from: 120px; --vf-to: -20px; }
.vf-cta-note-2 { right: 8%; bottom: 3.5rem; rotate: 6deg; --vf-from: 200px; --vf-to: 10px; }

/* "Try VuloForm free" card. */
.wp-block-kadence-column.vf-getit-card { border-radius: 32px; padding: 3.5rem 1.5rem; text-align: center; background: linear-gradient(to bottom right, var(--sky-soft), #fff, var(--mint-soft)); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 640px) { .wp-block-kadence-column.vf-getit-card { padding-top: 4rem; padding-bottom: 4rem; } }

/* Move distances for vf-exit-* / vf-parallax on Kadence blocks (no inline styles there). */
.vf-move-60 { --vf-move: 60px; } .vf-move-120 { --vf-move: 120px; } .vf-move-140 { --vf-move: 140px; } .vf-move-240 { --vf-move: 240px; }

/* 8. Editor: show everything, no stickiness, no motion ------------------------ */
.editor-styles-wrapper .vf-sticky-steps > .kt-row-column-wrap { position: static !important; min-height: 0 !important; }
.editor-styles-wrapper .wp-block-kadence-column.vf-step { opacity: 1; }
.editor-styles-wrapper .vf-step .vf-step-text.vf-step-text { max-height: none; opacity: 1; padding-top: .5rem; }
.editor-styles-wrapper .vf-acc-item .vf-acc-a.vf-acc-a { max-height: none; opacity: 1; padding-bottom: 1.5rem; }
.editor-styles-wrapper .vf-tab-list > .kt-inside-inner-col { display: flex !important; flex-wrap: wrap; gap: .5rem; }
.editor-styles-wrapper .vf-cta-note.vf-cta-note { position: static; display: inline-block; margin: .25rem; }
.editor-styles-wrapper .wp-block-kadence-column.vf-bands { position: static; }
.editor-styles-wrapper :is(.vf-drift-left, .vf-drift-right, .vf-scroll-zoom, .vf-enter-up, .vf-exit-up, .vf-exit-down) { transform: none !important; }