/* ── Base resets ───────────────────────────────────────────────── */
.zv-widget-root { box-sizing: border-box; }
.zv-widget-root *, .zv-widget-root *::before, .zv-widget-root *::after { box-sizing: border-box; }
.zv-widget-root a, .zv-widget-root button { cursor: pointer; }

/* ── Counter Strip ─────────────────────────────────────────────── */
.zv-counter-wrap {
    border-top: 1px solid var(--line-on-dark, rgba(255,255,255,.08));
    border-bottom: 1px solid var(--line-on-dark, rgba(255,255,255,.08));
}
.zv-counter-cell {
    padding: 32px 24px;
    border-left: 1px solid var(--line-on-dark, rgba(255,255,255,.08));
}
.zv-counter-cell:first-child { border-left: none; }
.zv-counter-val {
    font-family: var(--f-display,'Inter', sans-serif);
    font-weight: 700;
    font-size: clamp(40px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--paper, #F7F5F0);
}
.zv-counter-label {
    margin-top: 10px;
    font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-on-dark, rgba(255,255,255,.58));
}

/* ── Logo Row ──────────────────────────────────────────────────── */
.zvlr-wrap {
    overflow: hidden;
    padding: 24px 0;
    border-top: 1px solid var(--line-on-light, rgba(10,11,15,.10));
    border-bottom: 1px solid var(--line-on-light, rgba(10,11,15,.10));
    background: var(--paper, #F7F5F0);
}
.zvlr-scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink, #000) 8%, var(--ink, #000) 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--ink, #000) 8%, var(--ink, #000) 92%, transparent);
}
.zvlr-track { display: flex; gap: 72px; width: max-content; }
.zvlr-item {
    font-family: var(--f-display,'Inter', sans-serif);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .04em;
    color: var(--ink, #0A0B0F);
    opacity: .55;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.zvlr-item img { height: 22px; width: auto; filter: grayscale(1); display: block; }
.zvlr-label {
    text-align: center;
    font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute-on-dark, rgba(247,245,240,.45));
    margin-bottom: 18px;
}

/* ── Pricing Table ─────────────────────────────────────────────── */
.zvp-wrap { background: var(--ink, #0A0B0F); overflow: visible; }
.zvp-grid {
    display: grid;
    gap: 18px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px 40px 20px;
}
.zvp-card {
    position: relative;
    padding: 36px 32px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--paper, #F7F5F0) 3%, transparent);
    color: var(--paper, #F7F5F0);
    border: 1px solid var(--line-2-on-dark, rgba(255,255,255,.12));
    transition: box-shadow .2s;
}
.zvp-card.is-pop {
    background: var(--paper, #F7F5F0);
    color: var(--ink, #0A0B0F);
    border-color: transparent;
    transform: translateY(-16px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.zvp-badge {
    position: absolute;
    top: -12px; left: 32px;
    padding: 4px 12px;
    background: var(--lime, #0848FF);
    color: var(--lime-ink, #FFFFFF);
    border-radius: 999px;
    font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.zvp-plan {
    font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .6;
}
.zvp-price-row { margin-top: 16px; display: flex; align-items: baseline; gap: 4px; }
.zvp-currency { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 22px; font-weight: 700; align-self: flex-start; margin-top: 8px; }
.zvp-price {
    font-family: var(--f-display,'Inter', sans-serif);
    font-weight: 700;
    font-size: 84px;
    line-height: .9;
    letter-spacing: -.04em;
}
.zvp-period { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 12px; opacity: .6; }
.zvp-tagline { margin-top: 10px; font-size: 14.5px; opacity: .7; }
.zvp-divider { height: 1px; background: var(--line-on-dark, rgba(255,255,255,.08)); margin: 24px 0; }
.zvp-card.is-pop .zvp-divider { background: var(--line-2-on-light, rgba(10,11,15,.12)); }
.zvp-features { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.zvp-feat { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.zvp-check {
    width: 18px; height: 18px; border-radius: 999px;
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
    display: grid; place-items: center; flex-shrink: 0;
}
.zvp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 18px;
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
    border-radius: 10px;
    font-family: var(--f-body,'Plus Jakarta Sans', sans-serif); font-size: 14px; font-weight: 500;
    text-decoration: none; border: 1px solid transparent;
    transition: transform .2s, box-shadow .2s;
}
.zvp-card.is-pop .zvp-btn { background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0); }

/* ── FAQ ───────────────────────────────────────────────────────── */
.zvfaq-wrap { max-width: 820px; margin: 0 auto; background: var(--ink, #0A0B0F); padding: 48px; border-radius: 16px; }
.zvfaq-item { border-bottom: 1px solid var(--line-on-dark, rgba(255,255,255,.08)); }
.zvfaq-btn {
    width: 100%; display: flex; align-items: center;
    justify-content: space-between; gap: 24px;
    padding: 24px 0; background: transparent; border: 0;
    color: var(--paper, #F7F5F0); cursor: pointer;
    font-family: var(--f-display,'Inter', sans-serif);
    font-weight: 700; font-size: 22px; letter-spacing: -.02em;
    text-align: left;
}
.zvfaq-icon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px;
    border: 1px solid var(--line-2-on-dark, rgba(255,255,255,.14));
    display: grid; place-items: center;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.zvfaq-body {
    overflow: hidden; max-height: 0;
    transition: max-height .4s cubic-bezier(.2,.7,.3,1);
}
.zvfaq-body p {
    padding-bottom: 24px; margin: 0;
    font-size: 15.5px; line-height: 1.6;
    color: var(--mute-on-dark, rgba(255,255,255,.58)); max-width: 640px;
}

/* ── Testimonial ───────────────────────────────────────────────── */
.zvtest-card {
    margin: 0; padding: 36px 36px 32px;
    background: var(--ink-2, #15171D);
    border: 1px solid var(--line-on-dark, rgba(255,255,255,.08));
    border-radius: 16px;
    max-width: 520px;
}
.zvtest-stars { display: flex; gap: 4px; color: var(--lime, #0848FF); }
.zvtest-quote {
    margin: 20px 0 0;
    font-family: var(--f-display,'Inter', sans-serif);
    font-weight: 500; font-size: 22px; line-height: 1.35;
    letter-spacing: -.015em; color: var(--paper, #F7F5F0);
}
.zvtest-cap { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.zvtest-avatar {
    width: 40px; height: 40px; border-radius: 999px;
    background: var(--ink, #0A0B0F); color: var(--lime, #0848FF);
    display: grid; place-items: center;
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-weight: 600; font-size: 12px;
    flex-shrink: 0;
}
.zvtest-name { font-size: 14px; font-weight: 500; color: var(--paper, #F7F5F0); }
.zvtest-role { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .04em; color: var(--mute-on-dark, rgba(255,255,255,.58)); margin-top: 1px; }

/* ── CTA Banner ────────────────────────────────────────────────── */
.zvcta-wrap {
    position: relative; padding: 120px 48px;
    background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0);
    border-radius: 16px; overflow: hidden; text-align: center;
}
.zvcta-orb {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 50% at 50% 30%, var(--zvcta-glow-1, oklch(0.55 0.20 295 / 0.35)), transparent 60%),
                radial-gradient(40% 40% at 70% 90%, var(--zvcta-glow-2, color-mix(in srgb, var(--lime,#0848FF) 18%, transparent)), transparent 60%);
    filter: blur(40px);
}
.zvcta-inner { position: relative; }
.zvcta-eyebrow {
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--mute-on-dark, rgba(247,245,240,.5)); margin-bottom: 20px;
}
.zvcta-title {
    font-family: var(--f-display,'Inter', sans-serif); font-weight: 700;
    font-size: clamp(56px, 9vw, 132px); line-height: .92;
    letter-spacing: -.035em; margin: 0 0 36px; color: var(--paper, #F7F5F0);
}
.zvcta-title .muted { font-weight: 500; color: var(--mute-on-dark, rgba(247,245,240,.5)); }
.zvcta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.zvcta-btn1 {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px;
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
    border-radius: 10px; font-family: var(--f-body,'Plus Jakarta Sans', sans-serif);
    font-weight: 500; font-size: 14px; text-decoration: none;
    border: 1px solid transparent; transition: transform .2s;
}
.zvcta-btn2 {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px;
    background: transparent; color: var(--paper, #F7F5F0);
    border: 1px solid var(--line-2-on-dark, rgba(255,255,255,.22)); border-radius: 10px;
    font-family: var(--f-body,'Plus Jakarta Sans', sans-serif); font-weight: 500; font-size: 14px;
    text-decoration: none; transition: transform .2s;
}

/* ── Button ────────────────────────────────────────────────────── */
.zvb-btn {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; transition: transform .2s, box-shadow .2s;
    border: 1px solid transparent;
}
.zvb-btn.variant-primary { background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF); box-shadow: 0 6px 22px -10px color-mix(in srgb, var(--lime, #0848FF) 60%, transparent); }
.zvb-btn.variant-dark    { background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0); }
.zvb-btn.variant-light   { background: var(--paper, #F7F5F0); color: var(--ink, #0A0B0F); }
.zvb-btn.variant-ghost   { background: transparent; color: var(--paper, #F7F5F0); border-color: var(--line-2-on-dark, rgba(255,255,255,.14)); }
.zvb-btn.size-sm { padding: 9px 14px; font-size: 13px; }
.zvb-btn.size-md { padding: 14px 22px; font-size: 14px; }
.zvb-btn.size-lg { padding: 18px 28px; font-size: 16px; }
.zvb-btn.shape-sharp   { border-radius: 0; }
.zvb-btn.shape-rounded { border-radius: 10px; }
.zvb-btn.shape-pill    { border-radius: 999px; }

/* ── Animated Title ────────────────────────────────────────────── */
.zvat-wrap { }
.zvat-eyebrow {
    font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--mute-on-dark, rgba(255,255,255,.55)); margin-bottom: 24px;
}
.zvat-wrap .zvat-title {
    margin: 0; font-family: var(--f-display,'Inter', sans-serif);
    /* Reads the token rather than naming a weight. A number here outranks the
       h1 rule the Design System writes, so the heading weight in the settings
       moved every heading on the site except the ones in these widgets — the
       large ones, which is where it is most visible. */
    font-weight: var(--f-display-weight, 700); line-height: 1.15; letter-spacing: -.04em;
}
/* Default colors at LOW specificity (0,1,0) — Elementor's {{WRAPPER}} .zvat-title (0,2,0) always wins */
.zvat-title { color: var(--ink, #0A0B0F); }
.zvat-title .zvat-em { color: var(--mute-on-light, rgba(10,11,15,.45)); opacity: 1; }
.zvat-eyebrow { color: var(--mute-on-light, rgba(10,11,15,.55)); opacity: 1; }
.zvat-text { display: inline; }

/* ── Hover Index ───────────────────────────────────────────────── */
.zvhi-wrap { position: relative; padding: 48px; cursor: crosshair; background: var(--ink, #0A0B0F); border-radius: 16px; }
.zvhi-header { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line-on-dark, rgba(255,255,255,.08)); }
.zvhi-eyebrow { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute-on-dark, rgba(255,255,255,.58)); }
.zvhi-heading { margin: 0; font-family: var(--f-display,'Inter', sans-serif); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--paper, #F7F5F0); }
.zvhi-list { list-style: none; margin: 0; padding: 0; }
.zvhi-item { border-bottom: 1px solid var(--line-on-dark, rgba(255,255,255,.08)); }
.zvhi-link { display: grid; align-items: center; gap: 24px; padding: 26px 0; text-decoration: none; color: inherit; }
.zvhi-num { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 12px; letter-spacing: .08em; color: var(--mute-on-dark, rgba(255,255,255,.58)); }
.zvhi-label { font-family: var(--f-display,'Inter', sans-serif); font-weight: 700; font-size: clamp(28px,3.6vw,56px); line-height: 1.0; letter-spacing: -.03em; color: var(--paper, #F7F5F0); transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s; }
.zvhi-meta { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-on-dark, rgba(255,255,255,.58)); }

/* ── Spiral Gallery ────────────────────────────────────────────── */
.zvsg-wrap { position: relative; width: 100%; background: var(--ink, #0A0B0F); border-radius: 16px; overflow: hidden; isolation: isolate; }

/* ── CTA Inline ────────────────────────────────────────────────── */
.zvcti-wrap {
    display: grid; grid-template-columns: 1fr auto; gap: 40px;
    align-items: center; padding: 40px 48px;
    border-radius: 16px; border: 1px solid var(--line-on-dark, rgba(255,255,255,.10));
}
.zvcti-wrap.surface-dark  { background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0); border-color: var(--line-on-dark, rgba(255,255,255,.10)); }
.zvcti-wrap.surface-light { background: var(--paper, #F7F5F0); color: var(--ink, #0A0B0F); border-color: var(--line-on-light, rgba(10,11,15,.10)); }
/* The accent, whatever it is on this site. The class used to be named after
   the colour it happened to ship with, which stopped being true the moment
   anyone changed it. The old name stays as an alias so pages built before this
   do not lose their surface. */
.zvcti-wrap.surface-accent,
.zvcti-wrap.surface-lime  { background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF); border-color: var(--line-2-on-light, rgba(10,11,15,.18)); }

/* A colour chosen per instance. The text falls back to whichever pole reads on
   it rather than to a fixed one — a dark custom colour with dark text is the
   mistake this saves. */
.zvcti-wrap.surface-custom {
    background: var(--zvcti-bg, var(--lime, #0848FF));
    color: var(--zvcti-fg, var(--lime-ink, #FFFFFF));
    border-color: var(--line-2-on-light, rgba(10,11,15,.18));
}

/* Full page width.
   100vw alone includes the scrollbar, which pushes the block a few pixels off
   centre and leaves a sliver of horizontal overflow — measured at 7px on a
   1718px window. The scrollbar width is published as a custom property and
   subtracted. */
.zvcti-wrap.is-full {
    width: calc(100vw - var(--zv-sbw, 0px));
    margin-left: calc(50% - (100vw - var(--zv-sbw, 0px)) / 2);
    margin-right: calc(50% - (100vw - var(--zv-sbw, 0px)) / 2);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding-left: clamp(20px, 5vw, 64px);
    padding-right: clamp(20px, 5vw, 64px);
}

/* Colour to the edges, content still in the column.
   Done with padding rather than an inner wrapper: the wrap is the flex row
   that lays out the headline against the buttons, and putting a box inside it
   would mean rebuilding that. max() keeps the ordinary edge padding on a
   screen narrower than the column, where the centring maths would otherwise
   go negative and push the content outwards. */
.zvcti-wrap.is-full.is-boxed {
    padding-left: max(clamp(20px, 5vw, 64px), calc((100% - var(--zvcti-box, 1140px)) / 2));
    padding-right: max(clamp(20px, 5vw, 64px), calc((100% - var(--zvcti-box, 1140px)) / 2));
}
.zvcti-eyebrow {
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-bottom: 8px;
}
.zvcti-headline {
    margin: 0; font-family: var(--zv-font-heading, 'Inter', sans-serif);
    font-weight: 700; font-size: clamp(28px,3vw,42px);
    line-height: 1.1; letter-spacing: -0.025em; max-width: 720px;
    color: inherit;
}
.zvcti-wrap.surface-dark   .zvcti-headline { color: var(--paper, #F7F5F0); }
.zvcti-wrap.surface-light  .zvcti-headline { color: var(--ink,   #0A0B0F); }
.zvcti-wrap.surface-accent .zvcti-headline,
.zvcti-wrap.surface-lime   .zvcti-headline { color: var(--lime-ink, #FFFFFF); }
.zvcti-wrap.surface-custom .zvcti-headline { color: inherit; }
.zvcti-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.zvcti-btn1 {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px;
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
    border-radius: 10px; font-family: var(--f-body,'Plus Jakarta Sans', sans-serif);
    font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
    transition: transform .2s;
}
/* On the accent itself the accent button would vanish — invert it. On a
   custom surface nobody knows how the accent reads against it, so the button
   takes the surface's own text colour and shows the surface through it. */
.zvcti-wrap.surface-accent .zvcti-btn1,
.zvcti-wrap.surface-lime   .zvcti-btn1 { background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0); }
.zvcti-wrap.surface-custom .zvcti-btn1 { background: var(--zvcti-fg, var(--lime-ink, #FFFFFF)); color: var(--zvcti-bg, var(--lime, #0848FF)); }
.zvcti-btn2 {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px;
    background: transparent; color: inherit;
    border: 1px solid currentColor; border-radius: 10px;
    font-family: var(--f-body,'Plus Jakarta Sans', sans-serif); font-weight: 500; font-size: 14px;
    text-decoration: none; white-space: nowrap;
    transition: transform .2s, background-color .2s, color .2s, border-color .2s;
}

/* ── Feature Card ──────────────────────────────────────────────── */
.zvfc-wrap {
    position: relative; border-radius: 16px; overflow: hidden;
    padding: 32px 36px; display: flex; flex-direction: column;
    border: 1px solid var(--line-on-dark, rgba(255,255,255,.08));
}
.zvfc-wrap.surface-dark  { background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0); }
.zvfc-wrap.surface-light { background: var(--paper, #F7F5F0); color: var(--ink, #0A0B0F); border-color: var(--line-on-light, rgba(10,11,15,.10)); }
.zvfc-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.zvfc-eyebrow {
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; opacity: .55;
}
.zvfc-badge {
    padding: 5px 12px; border-radius: 999px;
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-weight: 600;
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    background: var(--line-on-dark, rgba(255,255,255,.08)); color: inherit;
}
.zvfc-wrap.surface-light .zvfc-badge { background: var(--line-on-light, rgba(10,11,15,.08)); }
.zvfc-headline {
    margin: 24px 0 0; font-family: var(--f-display,'Inter', sans-serif);
    font-weight: 700; font-size: clamp(36px,4vw,56px);
    line-height: 1.04; letter-spacing: -0.03em; max-width: 480px;
}
.zvfc-em { font-weight: 500; opacity: .55; display: block; }
.zvfc-cta-wrap { margin-top: 20px; }
.zvfc-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 999px;
    font-family: var(--f-body,'Plus Jakarta Sans', sans-serif); font-size: 13px; font-weight: 500;
    color: inherit; text-decoration: none;
    background: color-mix(in srgb, var(--paper, #F7F5F0) 6%, transparent); border: 1px solid var(--line-on-dark, rgba(255,255,255,.08));
    transition: background .2s;
}
.zvfc-wrap.surface-light .zvfc-cta { background: var(--line-on-light, rgba(10,11,15,.06)); border-color: var(--line-on-light, rgba(10,11,15,.10)); }
.zvfc-cta:hover { background: var(--line-2-on-dark, rgba(255,255,255,.12)); }
.zvfc-cta-icon {
    width: 18px; height: 18px; border-radius: 4px; display: grid;
    place-items: center; opacity: .8; border: 1px solid var(--line-on-dark, rgba(255,255,255,.08));
}
.zvfc-wrap.surface-light .zvfc-cta-icon { border-color: var(--line-on-light, rgba(10,11,15,.10)); }
.zvfc-visual {
    position: absolute; left: 8%; right: -6%; bottom: -12%; height: 54%;
    transform: perspective(1400px) rotateX(8deg) rotateY(-6deg) rotateZ(-2deg);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.35));
}
.zvfc-visual-img {
    width: 100%; height: 100%; border-radius: 12px;
    background-size: cover; background-position: center;
    border: 1px solid var(--line-on-dark, rgba(255,255,255,.08));
}
/* Browser mock */
.zvfc-browser {
    width: 100%; height: 100%; background: var(--paper, #F7F5F0); border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08); overflow: hidden;
    display: flex; flex-direction: column;
}
.zvfc-browser-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.zvfc-dots { display: flex; gap: 6px; }
.zvfc-dots span {
    width: 10px; height: 10px; border-radius: 999px; display: block;
}
.zvfc-dots span:nth-child(1) { background: #FF5F56; }
.zvfc-dots span:nth-child(2) { background: #FFBD2E; }
.zvfc-dots span:nth-child(3) { background: #27C93F; }
.zvfc-browser-url {
    flex: 1; padding: 4px 12px; background: var(--paper-2, #EFECE4); border-radius: 6px;
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 10.5px; color: var(--mute-on-light, rgba(10,11,15,.6));
}
.zvfc-browser-body { padding: 20px 24px; color: var(--ink, #0A0B0F); display: flex; flex-direction: column; gap: 14px; }
.zvfc-browser-title { font-family: var(--f-display,'Inter', sans-serif); font-weight: var(--f-display-weight, 700); font-size: 26px; letter-spacing: -0.02em; }
.zvfc-browser-sub { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px; color: var(--mute-on-light, rgba(10,11,15,.55)); letter-spacing: .04em; }
.zvfc-browser-swatches { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 6px; }
.zvfc-browser-swatches .swatch { height: 36px; background: var(--paper-2, #EFECE4); border-radius: 8px; }
.zvfc-browser-swatches .swatch.dark { background: var(--ink, #0A0B0F); }

/* ── Hover Index (extended) ────────────────────────────────────── */
.zvhi-float {
    position: absolute; top: 0; left: 0; width: 360px; height: 240px;
    pointer-events: none; opacity: 0;
    transition: opacity .35s cubic-bezier(.2,.7,.3,1);
    z-index: 5; will-change: transform;
}
.zvhi-float.is-visible { opacity: 1; }
.zvhi-float-inner {
    width: 100%; height: 100%; border-radius: 8px; overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); background: var(--ink-2, #15171D);
    transform: scale(.92) rotate(-2deg);
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.zvhi-float-inner.is-visible { transform: scale(1) rotate(0deg); }
.zvhi-float-content { width: 100%; height: 100%; }
.zvhi-float-placeholder {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg,color-mix(in srgb, var(--paper, #F7F5F0) 6%, transparent) 0 12px,transparent 12px 24px),var(--ink-2, #15171D);
    display: grid; place-items: center;
    color: var(--mute-on-dark, rgba(255,255,255,.45)); font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.zvhi-float-badge {
    position: absolute; bottom: -10px; left: -10px;
    padding: 4px 10px; background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
    border-radius: 999px; font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    opacity: 0; transition: opacity .35s .1s;
}
.zvhi-float-badge.is-visible { opacity: 1; }
.zvhi-row {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 24px; padding: 26px 0;
    text-decoration: none; color: inherit; transition: opacity .3s;
}
.zvhi-row.has-counter { grid-template-columns: 64px 1fr auto; }
.zvhi-counter {
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 12px;
    letter-spacing: .08em; color: var(--mute-on-dark, rgba(255,255,255,.58)); transition: color .25s;
}
.zvhi-counter.is-active { color: var(--lime, #0848FF); }
.zvhi-label {
    font-family: var(--f-display,'Inter', sans-serif); font-weight: 700;
    font-size: clamp(28px,3.6vw,56px); line-height: 1.0;
    letter-spacing: -0.03em; color: var(--paper, #F7F5F0);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s;
}
.zvhi-meta {
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--mute-on-dark, rgba(255,255,255,.58)); transition: opacity .35s;
}

/* ── Logo Row (extended) ───────────────────────────────────────── */
.zvlr-wrap { background-color: var(--ink, #0A0B0F); }
.zvlr-wrap.has-border {
    border-top: 1px solid var(--line-2-on-dark, rgba(247,245,240,.12));
    border-bottom: 1px solid var(--line-2-on-dark, rgba(247,245,240,.12));
}
.zvlr-label {
    text-align: center; font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 11px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mute-on-dark, rgba(247,245,240,.45)); margin-bottom: 18px;
}
.zvlr-mask {
    -webkit-mask-image: linear-gradient(90deg,transparent,var(--ink, #000) 8%,var(--ink, #000) 92%,transparent);
    mask-image: linear-gradient(90deg,transparent,var(--ink, #000) 8%,var(--ink, #000) 92%,transparent);
}
.zvlr-item {
    font-family: var(--f-display,'Inter', sans-serif);
    white-space: nowrap; flex-shrink: 0; display: flex; align-items: center;
}
.zvlr-item img { width: auto; filter: grayscale(1); display: block; }

/* ── Pricing Table (extended) ──────────────────────────────────── */
.zvp-wrap { background: var(--ink, #0A0B0F); }
.zvp-grid {
    display: grid; gap: 18px; align-items: center;
    max-width: 1240px; margin: 0 auto; padding: 30px 40px 20px;
}
.zvp-card {
    position: relative; padding: 36px 32px; border-radius: 16px;
    background: color-mix(in srgb, var(--paper, #F7F5F0) 3%, transparent); color: var(--paper, #F7F5F0);
    border: 1px solid var(--line-2-on-dark, rgba(255,255,255,.12));
}
.zvp-card.is-pop {
    background: var(--paper, #F7F5F0); color: var(--ink, #0A0B0F);
    border-color: transparent;
    transform: translateY(-16px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.zvp-badge {
    position: absolute; top: -12px; left: 32px;
    padding: 4px 12px; border-radius: 999px;
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px;
    font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF); white-space: nowrap;
}
.zvp-plan {
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-weight: 700;
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .7;
}
.zvp-price-row { margin-top: 16px; display: flex; align-items: baseline; gap: 4px; }
.zvp-currency { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 22px; font-weight: 700; align-self: flex-start; margin-top: 8px; }
.zvp-price { font-family: var(--f-display,'Inter', sans-serif); font-size: clamp(52px,6vw,80px); font-weight: 700; line-height: .9; }
.zvp-period { font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 12px; opacity: .6; }
.zvp-tagline { margin-top: 10px; font-size: 14.5px; opacity: .7; }
.zvp-divider { height: 1px; background: var(--line-on-dark, rgba(255,255,255,.08)); margin: 24px 0; }
.zvp-card.is-pop .zvp-divider { background: var(--line-2-on-light, rgba(10,11,15,.12)); }
.zvp-feats { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.zvp-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.zvp-check {
    width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0;
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
    display: grid; place-items: center;
}
.zvp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 18px; border-radius: 10px;
    font-family: var(--f-body,'Plus Jakarta Sans', sans-serif); font-size: 14px; font-weight: 500;
    text-decoration: none; border: 1px solid transparent;
    transition: transform .2s, box-shadow .2s;
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
}
.zvp-card.is-pop .zvp-btn { background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0); }

/* ── ZV Button (extended) ──────────────────────────────────────── */
.zvb-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-body,'Plus Jakarta Sans', sans-serif); font-weight: 500; letter-spacing: -.005em;
    text-decoration: none; transition: transform .2s, box-shadow .2s;
    border: 1px solid transparent;
}
.zvb-btn.is-full { display: flex; width: 100%; justify-content: center; }
/* Sizes */
.zvb-btn.size-sm { padding: 9px 14px; font-size: 13px; border-radius: 8px; }
.zvb-btn.size-md { padding: 14px 22px; font-size: 14px; border-radius: 10px; }
.zvb-btn.size-lg { padding: 18px 28px; font-size: 16px; border-radius: 12px; }
/* Variants */
.zvb-btn.variant-primary {
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
    box-shadow: 0 6px 22px -10px color-mix(in srgb, var(--lime,#0848FF) 60%, transparent);
}
.zvb-btn.variant-dark    { background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0); }
.zvb-btn.variant-light   { background: var(--paper, #F7F5F0); color: var(--ink, #0A0B0F); }
.zvb-btn.variant-ghost   { background: transparent; color: var(--paper, #F7F5F0); border-color: var(--line-2-on-dark, rgba(255,255,255,.14)); }
/* The Style tab defaults to the ZERONIQ button roles. What a role means
   depends on the variant, so each variant redefines them on the button — one
   set of defaults, correct for all four variants and on every surface. */
.zvb-btn.variant-primary { --e-global-color-zeroniq_button: var(--lime); --e-global-color-zeroniq_button_text: var(--lime-ink); --e-global-color-zeroniq_button_hover: var(--lime-hover); --e-global-color-zeroniq_button_border: var(--lime); }
.zvb-btn.variant-dark    { --e-global-color-zeroniq_button: var(--ink); --e-global-color-zeroniq_button_text: var(--paper); --e-global-color-zeroniq_button_hover: var(--ink-2); --e-global-color-zeroniq_button_border: var(--ink); }
.zvb-btn.variant-light   { --e-global-color-zeroniq_button: var(--paper); --e-global-color-zeroniq_button_text: var(--ink); --e-global-color-zeroniq_button_hover: var(--paper-2); --e-global-color-zeroniq_button_border: var(--paper); }
.zvb-btn.variant-ghost   { --e-global-color-zeroniq_button: transparent; --e-global-color-zeroniq_button_text: var(--e-global-color-zeroniq_text); --e-global-color-zeroniq_button_hover: var(--e-global-color-zeroniq_line); --e-global-color-zeroniq_button_border: var(--e-global-color-zeroniq_text_muted); }

/* ── Spiral Gallery (extended) ─────────────────────────────────── */
.zvsg-wrap {
    position: relative; width: 100%; background: var(--ink, #0A0B0F);
    border-radius: 16px; overflow: hidden; isolation: isolate;
}
.zvsg-orb {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 55%,oklch(0.30 0.02 270 / 0.65),transparent 60%),
                radial-gradient(ellipse at 80% 20%,color-mix(in srgb, var(--lime,#0848FF) 10%, transparent),transparent 55%);
}
.zvsg-eyebrow {
    position: absolute; top: 20px; left: 24px; z-index: 3;
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--paper, #F7F5F0) 70%, transparent);
}
.zvsg-caption {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    padding: 7px 14px; font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lime-ink, #FFFFFF); background: var(--lime, #0848FF); border-radius: 999px;
    z-index: 3; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--lime,#0848FF) 60%, transparent);
}
.zvsg-stage {
    position: absolute; inset: 0; perspective: 1400px;
    cursor: grab; user-select: none; touch-action: none;
}
.zvsg-helix {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0;
    transform-style: preserve-3d; will-change: transform;
}
.zvsg-card {
    position: absolute; transform-style: preserve-3d; backface-visibility: hidden;
}
.zvsg-card-inner {
    position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
    background: var(--ink-2, #15171D);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--paper, #F7F5F0) 4%, transparent);
}
.zvsg-card-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zvsg-card-placeholder {
    width: 100%; height: 100%; display: grid; place-items: center;
    color: var(--mute-on-dark, rgba(255,255,255,.5)); font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.zvsg-card-num {
    position: absolute; top: 8px; left: 10px;
    font-family: var(--f-mono,'JetBrains Mono', monospace); font-size: 9px;
    letter-spacing: .14em; color: color-mix(in srgb, var(--paper, #F7F5F0) 85%, transparent);
    text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   SPLIT SECTION WIDGET
   ═══════════════════════════════════════════════════════════ */

/* Strip Elementor wrapper interference.
   Both class names are listed: the widget's stored name is still `zerova_*`
   (it lives in saved Elementor data), while the printed wrapper class is
   `zeroniq_*`. Keeping the old selector costs nothing and covers cached
   markup or a buyer's own CSS. */
.elementor-widget-zerova_split_section,
.elementor-widget-zeroniq_split_section,
.elementor-widget-zerova_split_section > .elementor-widget-container,
.elementor-widget-zeroniq_split_section > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Use table layout — guaranteed side-by-side, no flexbox/grid needed */
.zvss-wrap {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    border-collapse: separate; /* needed for border-radius to work */
    border-radius: var(--zvss-radius, 0px);
    border: var(--zvss-border-width, 0px) solid var(--zvss-border-color, transparent);
}

/* Presets */
.zvss-preset-dark  { background: var(--ink, #0A0B0F); color: var(--paper, #F7F5F0); }
.zvss-preset-light { background: var(--paper, #F7F5F0); color: var(--ink, #0A0B0F); }
.zvss-preset-split { color: var(--ink, #0A0B0F); }
.zvss-preset-custom {}

/* Image Column */
.zvss-image-col {
    display: table-cell !important;
    position: relative;
    overflow: hidden;
    vertical-align: top;
}
.zvss-image-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.zvss-image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Elementor placeholder image (before real image is set) */
.zvss-image-inner .elementor-placeholder,
.zvss-image-inner img[src*="placeholder"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zvss-image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.zvss-preset-split .zvss-image-col { background: var(--ink, #0A0B0F); }

/* Image Badge */
.zvss-img-badge {
    position: absolute;
    top: 24px; right: 24px;
    background: color-mix(in srgb, var(--lime, #0848FF) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lime, #0848FF) 30%, transparent);
    color: var(--lime, #0848FF);
    font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
    backdrop-filter: blur(8px);
    z-index: 2;
}

/* Content Column */
.zvss-content-col {
    display: table-cell !important;
    vertical-align: middle;
    padding: 60px 80px;
    position: relative;
    z-index: 1;
}
.zvss-preset-split .zvss-content-col {
    background: var(--paper, #F7F5F0);
    color: var(--ink, #0A0B0F);
}

/* Eyebrow */
.zvss-eyebrow {
    font-family: var(--f-mono,'JetBrains Mono', monospace);
    font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--lime, #0848FF);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.zvss-eyebrow::before {
    content: ''; display: inline-block;
    width: 20px; height: 1.5px;
    background: currentColor; flex-shrink: 0;
}

/* Headline */
.zvss-headline {
    font-family: var(--zv-font-heading, 'Inter', sans-serif);
    font-size: clamp(28px, 3.5vw, 52px);
    font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
    margin: 0 0 16px; color: inherit;
}

/* Sub */
.zvss-sub {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.5; opacity: 1;
    margin: 0 0 20px; max-width: 480px;
    color: inherit;
}

/* Body text */
.zvss-desc {
    font-size: 15px; line-height: 1.7;
    opacity: 1; margin-bottom: 24px; max-width: 480px;
    color: inherit;
}

/* Bullets */
.zvss-bullets {
    list-style: none; padding: 0; margin: 0 0 28px;
}
.zvss-bullets li {
    display: flex; align-items: flex-start;
    gap: 10px; font-size: 14px; line-height: 1.5;
    opacity: .8; margin-bottom: 10px;
}
.zvss-bullets li::before {
    content: ''; width: 16px; height: 16px;
    background: var(--lime, #0848FF); border-radius: 50%; flex-shrink: 0; margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230A0B0F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 10px;
}

/* Buttons */
.zvss-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.zvss-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: var(--r-btn, 10px);
    font-size: 14px; font-weight: 600; letter-spacing: .01em;
    text-decoration: none; transition: transform .2s, box-shadow .2s; cursor: pointer;
    font-family: var(--zv-font-body, 'Plus Jakarta Sans', sans-serif);
}
.zvss-btn:hover { transform: translateY(-2px); }
.zvss-btn--primary {
    background: var(--lime, #0848FF); color: var(--lime-ink, #FFFFFF);
    box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--lime, #0848FF) 50%, transparent);
}
.zvss-btn--primary:hover { box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--lime, #0848FF) 65%, transparent); }
.zvss-btn--primary:hover { background: var(--lime-hover, var(--lime, #0848FF)); }
/* Muted by colour, not by opacity: opacity also fades a background someone
   sets in the Style tab, which turned a white button pale blue on an accent. */
.zvss-btn--outline { background: transparent; color: inherit; border: 1.5px solid color-mix(in srgb, currentColor 58%, transparent); }
.zvss-btn--outline:hover { border-color: currentColor; }
.zvss-btn--ghost { background: transparent; color: color-mix(in srgb, currentColor 70%, transparent); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; }
.zvss-btn--ghost:hover { color: inherit; }

/* Mobile — stack vertically */
@media (max-width: 900px) {
    .zvss-wrap { display: block !important; }
    .zvss-image-col { display: block !important; min-height: 360px; }
    .zvss-image-inner { position: absolute; }
    .zvss-content-col { display: block !important; padding: 40px 28px !important; }
}

/* ═══════════════════════════════════════════════════════════
   ELEMENTOR EDITOR — form button fixes
   (Elementor injects its own button styles in the editor
    which break third-party form plugin styling)
   ═══════════════════════════════════════════════════════════ */
.elementor-editor-active .wpcf7 input[type="submit"],
.elementor-editor-active .wpforms-submit,
.elementor-editor-active .elementor-field-type-submit button,
.elementor-editor-active .zvss-content-col input[type="submit"],
.elementor-editor-active .zvss-content-col button[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ═══════════════════════════════════════════════════════════ */

/* ── Counter Strip ────────────────────────────────────────── */
@media (max-width: 640px) {
    .zv-counter-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .zv-counter-cell {
        padding: 20px 16px;
    }
    .zv-counter-cell:nth-child(2n+1) { border-left: none; }
    .zv-counter-cell:nth-child(n+3) { border-top: 1px solid var(--line-on-dark, rgba(255,255,255,.08)); }
    .zv-counter-val { font-size: clamp(32px, 8vw, 44px); }
    .zv-counter-label { font-size: 9.5px; letter-spacing: .1em; }
}

/* ── CTA Inline ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .zvcti-wrap {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 28px 24px !important;
    }
    .zvcti-btns { justify-content: flex-start; }
    .zvcti-headline { font-size: clamp(22px, 6vw, 32px) !important; }
}

/* ── Hover Index ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .zvhi-wrap { padding: 24px 16px; border-radius: 12px; }
    .zvhi-header { padding-bottom: 18px; flex-direction: column; gap: 8px; }
    .zvhi-link {
        grid-template-columns: 32px 1fr auto;
        gap: 12px;
        padding: 18px 0;
    }
    .zvhi-label { font-size: clamp(20px, 5vw, 28px); }
    .zvhi-meta { font-size: 9px; letter-spacing: .08em; text-align: right; }
    .zvhi-num { font-size: 10px; }
    .zvhi-float { display: none !important; }
}

/* ── Split Section ────────────────────────────────────────── */
@media (max-width: 900px) {
    .zvss-image-col {
        width: 100% !important;
        min-height: 240px !important;
    }
    .zvss-content-col {
        padding: 32px 24px !important;
    }
    .zvss-btns { justify-content: flex-start; }
    .zvss-btn { white-space: nowrap; }
}

/* ── Pricing (Carousel on tablet) ─────────────────────────── */
@media (max-width: 860px) and (min-width: 541px) {
    .zvp-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding-bottom: 12px !important;
        scrollbar-width: none;
    }
    .zvp-grid::-webkit-scrollbar { display: none; }
    .zvp-card {
        flex: 0 0 280px !important;
        scroll-snap-align: center !important;
    }
    .zvp-card.is-pop {
        order: -1;
        transform: none !important;
    }
}
@media (max-width: 540px) {
    .zvp-grid {
        grid-template-columns: 1fr !important;
        padding: 20px 16px !important;
        gap: 14px !important;
    }
    .zvp-card { padding: 28px 24px !important; }
    .zvp-card.is-pop { transform: none !important; }
    .zvp-badge { top: -11px; left: 24px; }
    .zvp-price { font-size: clamp(48px, 14vw, 72px) !important; }
}

/* ── Feature Comparison (mobile: sticky features col + snap scroll + dots) ── */
.zvct-dots {
    display: none; /* hidden on desktop */
}
@media (max-width: 768px) {
    .zvct-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: relative;
    }
    .zvct-wrap::-webkit-scrollbar { display: none; }
    /* Shadow hint on right edge */
    .zv-widget-root[class*="zvct-"] {
        position: relative;
    }
    .zv-widget-root[class*="zvct-"]::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 40px;
        width: 40px;
        background: linear-gradient(90deg, transparent, var(--ink, #0A0B0F));
        pointer-events: none;
        z-index: 3;
        transition: opacity .3s;
    }
    .zv-widget-root[class*="zvct-"].scrolled-end::after { opacity: 0; }
    .zvct-pricing {
        min-width: 580px !important;
    }
    /* ── Split layout: fixed labels left + scrollable tiers right ── */
    /* Mobile labels strip — hidden on desktop, shown on mobile */
    .zvct-mob-labels { display: none; }

    /* Hide original first column in table on mobile, show labels strip instead */
    .zvct-pricing th:first-child,
    .zvct-pricing td:first-child { /* no sticky needed anymore */ }

    .zvct-scroll { /* scrolls on mobile */ }

    @media (max-width: 768px) {
        .zvct-wrap {
            display: flex !important;
            overflow: hidden;
        }
        /* Fixed feature labels on the left */
        .zvct-mob-labels {
            display: flex !important;
            flex-direction: column;
            flex-shrink: 0;
            width: 110px;
            z-index: 3;
            box-shadow: 4px 0 8px -2px rgba(0,0,0,0.4);
        }
        .zvct-mob-label {
            padding: 0 10px;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.3;
            color: var(--zvct-paper, #F7F5F0);
            border-bottom: 1px solid var(--zvct-border, rgba(255,255,255,0.07));
            display: flex;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
        }
        .zvct-mob-label:nth-child(odd) {
            background: var(--zvct-row-a, #0D0E11);
        }
        .zvct-mob-label:nth-child(even) {
            background: var(--zvct-row-b, #111316);
        }
        .zvct-mob-label--head {
            background: var(--zvct-ink2, #15171D) !important;
            font-family: var(--f-mono,'JetBrains Mono', monospace);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--zvct-muted, rgba(247,245,240,0.38));
            min-height: 0;
        }
        .zvct-mob-label--cat {
            background: var(--zvct-ink3, #22252E) !important;
            font-family: var(--f-mono,'JetBrains Mono', monospace);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--zvct-muted, rgba(247,245,240,0.38));
        }
        /* Scrollable tiers area on the right */
        .zvct-scroll {
            flex: 1;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .zvct-scroll::-webkit-scrollbar { display: none; }
        /* Hide original feature column in the table */
        .zvct-pricing th:first-child,
        .zvct-pricing td:first-child {
            display: none !important;
        }
        /* Category rows in table: keep visible, span full width */
        .zvct-pricing tr.zvct-cat td {
            text-indent: -9999px; /* hide text (shown in labels strip instead) */
            padding: 0 !important;
            height: 30px;
            background: var(--zvct-ink3, #22252E) !important;
        }
        /* Table needs min-width so tiers don't crush */
        .zvct-pricing {
            min-width: 420px !important;
        }
        .zvct-pricing thead th { padding: 14px 12px !important; }
        .zvct-num { font-size: 28px !important; }
        .zvct-desc { font-size: 11px !important; }
        .zvct-btn { padding: 8px 12px !important; font-size: 11px !important; white-space: nowrap !important; }
        .zvct-tier-lbl { font-size: 8px !important; }
    }
    /* Smaller text on mobile */
    .zvct-pricing thead th { padding: 16px 12px 14px !important; }
    .zvct-num { font-size: 30px !important; }
    .zvct-desc { font-size: 11px !important; }
    .zvct-btn { padding: 8px 12px !important; font-size: 11px !important; white-space: nowrap !important; }
    .zvct-tier-lbl { font-size: 8px !important; }
    /* Dot indicators */
    .zvct-dots {
        display: flex !important;
        justify-content: center;
        gap: 6px;
        padding: 4px 0 12px;
    }
    .zvct-dot {
        appearance: none; -webkit-appearance: none;
        border: none; outline: none;
        background: color-mix(in srgb, var(--paper, #F7F5F0) 8%, transparent);
        width: auto; height: auto;
        padding: 5px 12px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .2s, color .2s;
    }
    .zvct-dot-label {
        font-family: var(--f-mono,'JetBrains Mono', monospace);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--paper, #F7F5F0) 35%, transparent);
        transition: color .2s;
    }
    .zvct-dot.is-active {
        background: var(--zvct-lime, var(--lime,#0848FF));
    }
    .zvct-dot.is-active .zvct-dot-label {
        color: var(--zvct-ink, #0A0B0F);
    }
}