/* ============================================================
   Vertical Landing Page — Shared Visual System
   Extends the block CSS system for /for/{route_slug} pages
   rendered by shared/js/vertical-page/index.js. All styles are
   category-agnostic; per-vertical copy lives in the page config.
   ============================================================ */

/* Type scale — named classes + selector aliases for every
   kicker / speaker / metric / mono-meta variant on the page.
   See vertical-typography.css for the full scale + which
   existing classes it absorbs. */
@import url('./vertical-typography.css?v=acf242a3');

/* ============================================================
   Mobile foundation — safe-area + dynamic viewport tokens.
   Used by any vertical-page section that needs notch awareness
   or mobile-browser-chrome-aware viewport heights. Vars default
   to safe values on desktop/non-notched devices (env() returns
   0px when unsupported, so nothing changes visually there).
   ============================================================ */
:root {
    /* Device safe-area insets (notch, Dynamic Island, home bar).
       Falls back to 0px automatically on devices without notches. */
    --vp-safe-t: env(safe-area-inset-top, 0px);
    --vp-safe-r: env(safe-area-inset-right, 0px);
    --vp-safe-b: env(safe-area-inset-bottom, 0px);
    --vp-safe-l: env(safe-area-inset-left, 0px);

    /* Dynamic viewport units — shrink/grow with mobile browser chrome.
       Use --vp-vh for "current visible height", --vp-vh-small for the
       smallest it will ever be (URL bar shown), --vp-vh-large for the
       largest (URL bar hidden). Equivalent to 100vh on desktop. */
    --vp-vh: 100dvh;
    --vp-vh-small: 100svh;
    --vp-vh-large: 100lvh;
}

/* Fallback for older browsers without dvh/svh/lvh support (pre-2022). */
@supports not (height: 100dvh) {
    :root {
        --vp-vh: 100vh;
        --vp-vh-small: 100vh;
        --vp-vh-large: 100vh;
    }
}

/* Cross-document View Transitions — Chrome 126+, Safari 18+. Marketing
   pages all share the same site-chrome (nav + footer), so when the user
   navigates between /, /pricing, /contact, /call-forwarding-guide,
   /privacy, /terms the chrome should feel persistent and the body should
   cross-fade rather than the whole page reloading visibly. The browser
   captures snapshots of the named transition elements before navigation
   and morphs them into the new page's matching elements after. Browsers
   without support fall back to a normal navigation. */
@view-transition {
    navigation: auto;
}

/* Persistent chrome across navigations: nav and footer have the same
   identity on every marketing page, so we name them so the View
   Transitions engine pairs them up and morphs (rather than fades). The
   body content uses the default (root) transition — a smooth cross-fade. */
.vp-nav,
.vp-nav-root {
    view-transition-name: site-chrome-nav;
}
.footer-a {
    view-transition-name: site-chrome-footer;
}
/* The default cross-document fade is a touch sluggish (~250ms each side).
   Tighten it so navigations feel snappy; reuse the same animation for
   both old and new view sides. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(site-chrome-nav),
::view-transition-new(site-chrome-nav),
::view-transition-old(site-chrome-footer),
::view-transition-new(site-chrome-footer) {
    /* The chrome is identical pre/post — no need to fade it. Skip the
       opacity animation so it feels truly persistent. */
    animation: none;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

/* --- Page-level resets (standalone page, not in showcase shell) --- */
body {
    font-family: var(--pk-font-sans);
    background: var(--pk-bg-deep, #0c0c0e);
    color: var(--pk-fg, #F9FAFB);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* --- Section spacing --- */
/* Sections are full-width (backgrounds span viewport); content is centered via padding */
.hero-o, .proof-p, .hero-k2, .explain-d, .explain-q, .aud10, .aud9, .faq-d, .cta-b, .vp-ctk, .vp-proof-e, .vp-aud7, .vp-pricing, .vp-hero-k2, .vp-roi {
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
}

/* --- Graveyard header (aud10, matches aud9 headline style, centered) --- */
.vp-graveyard-header {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}


.vp-graveyard-header .aud9-title {
    color: var(--pk-fg);
    max-width: 800px;
    margin: 0 auto;
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}

.vp-graveyard-sub {
    font-size: 16px;
    color: var(--pk-fg-muted);
    line-height: 1.65;
    max-width: 750px;
    margin: 12px auto 0;
}

/* --- Graveyard scroll viewport — shows ~4 cards, scrolls via page scroll --- */
.vp-graveyard-viewport {
    max-height: 340px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 85%, transparent 100%);
}

.vp-graveyard-viewport .aud10-stack {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* Graveyard — loss zone. Subtle red-on-deep wash (~4% mix) signals
   "missed calls pile up here" in both themes. Light-mode scope below
   rebases onto bg-base since light cadence puts aud10 on the white track. */
.aud10 {
    background: color-mix(in srgb, var(--pk-bg-deep) 96%, #ef4444);
    position: relative;
    overflow: hidden;
}

/* Featured live-call — gain zone. blocks-audio.css sets .aud9 bg to
   --pk-bg-base; vertical.css overrides both themes with a subtle green
   tint. Light-mode rule further below uses its own deep-track tint. */
.aud9 {
    background: color-mix(in srgb, var(--pk-bg-base) 97%, #10b981);
}

.aud10-divider-text {
    font-size: 18px;
}

/* Audio demos grid embedded inside graveyard — match parent bg, no double padding */
.aud10 .aud10-demos {
    padding: 40px 0 0;
    background: transparent;
}

/* --- Logo (matches echoroute.ai brand mark) --- */
.vp-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vp-logo-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.vp-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.vp-logo-brand {
    /* Size snapped 17 → 18 to land on the nominal 18px scale tier. */
    font-size: 18px;
    font-weight: 700;
    color: var(--pk-fg, #F9FAFB);
}

/* Override block CSS span accent rules for brand name */
.nav-a .nva-logo .vp-logo-brand,
.footer-a .fta-brand-name .vp-logo-brand {
    color: var(--pk-fg, #F9FAFB);
}

.vp-logo-sub {
    /* Weight collapsed 500 → 600; 500 is an orphan weight on this
       page and 600 reads the same at 11px. Leading snapped to 1.4
       (parent .vp-logo-text sets 1.15 for multi-line stack; this
       single-line chrome label overrides to the chrome-default 1.4). */
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pk-accent, #7c3aed);
    letter-spacing: 0.02em;
}

/* --- Sticky Nav --- */
.vp-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: background 0.3s, backdrop-filter 0.3s;
    /* Extend into status-bar / notch area on iOS (0 on other devices). */
    padding-top: var(--vp-safe-t);
}

.vp-nav .nva-bar {
    padding: 16px max(48px, calc((100vw - 1100px) / 2));
    /* Respect left/right safe area on landscape notched devices.
       max() picks the larger of safe-area or normal bar padding. */
    padding-left: max(var(--vp-safe-l), 48px, calc((100vw - 1100px) / 2));
    padding-right: max(var(--vp-safe-r), 48px, calc((100vw - 1100px) / 2));
}

.vp-nav-sticky {
    background: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

[data-pk-theme="light"] .vp-nav-sticky {
    background: rgba(255, 255, 255, 0.85);
}

/* Root-standard chrome (`/`, `/pricing`, `/contact`, `/call-forwarding-guide`,
   `/privacy`, `/terms`) keeps the blurred nav background at all scroll
   positions. Vertical-legacy pages (/for/*) are deep-hero designs where the
   transparent default is intentional — the hero owns the top of the viewport.
   The simple root pages don't have that hero, so without a permanent backdrop
   the body content scrolls through the fixed nav and reads as a layering bug. */
.vp-nav-root {
    background: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Surface above any hero/section that uses position: relative + isolated
       stacking contexts. */
    z-index: 1100;
}

[data-pk-theme="light"] .vp-nav-root {
    background: rgba(255, 255, 255, 0.85);
}

/* Logo wrap: when nav/footer brand is rendered as <a>, it inherits link
   defaults (underline, blue). Scrub them so the logo reads as a logo. */
.vp-logo-link {
    text-decoration: none;
    color: inherit;
}
@media (hover: hover) {
    .vp-logo-link:hover .vp-logo-brand {
        color: var(--pk-accent);
    }
}

/* "Sign in" text link in root-standard nav — sits between Call Us and
   Try for Free as a quiet utility link (matches .nva-phone weight/color). */
.nav-a .nva-signin {
    color: var(--pk-fg, #fff);
    text-decoration: none;
    font-size: var(--pk-text-sm);
    font-weight: var(--pk-weight-semibold);
    white-space: nowrap;
    padding: 8px 4px;
    transition: color var(--pk-duration-fast) var(--pk-ease-out);
    border-radius: var(--pk-radius-sm);
}
@media (hover: hover) {
    .nav-a .nva-signin:hover {
        color: var(--pk-accent, #fff);
    }
}
.nav-a .nva-signin:focus-visible {
    outline: 2px solid var(--pk-accent);
    outline-offset: 2px;
}
@media (max-width: 720px) {
    .nav-a .nva-signin { display: none; }
}

/* Legal links live in the footer's bottom bar on root-standard pages
   (Legal column was removed because, with 5 columns at common viewport
   widths, "Legal" wrapped under the brand and looked broken). */
.footer-a .fta-legal {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.footer-a .fta-legal-link {
    font-size: 13px;
    color: var(--pk-fg-subtle);
    text-decoration: none;
    transition: color 0.15s;
}
@media (hover: hover) {
    .footer-a .fta-legal-link:hover {
        color: var(--pk-fg);
    }
}
@media (max-width: 640px) {
    .footer-a .fta-legal { gap: 12px; }
}

/* Graveyard / missed-calls rows (.aud10-ghost) — in dark mode the 3% red on
   a near-black base already reads as "dark red"; on white, the same alpha
   washes out to pale pink and the "missed calls = red" signal is lost.
   Light mode needs much higher red alpha to hold the same emotional weight. */
[data-pk-theme="light"] .aud10-ghost {
    background: rgba(239, 68, 68, 0.07);
    border-color: rgba(239, 68, 68, 0.28);
}
[data-pk-theme="light"] .aud10-ghost::before {
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.09));
}
[data-pk-theme="light"] .aud10-ghost-icon svg {
    opacity: 0.85;
}
[data-pk-theme="light"] .aud10-ghost-name {
    opacity: 0.85;
}
[data-pk-theme="light"] .aud10-ghost-x {
    background: rgba(239, 68, 68, 0.14);
    opacity: 0.95;
}

/* Spam-comparison rows (.vp-spam "Your phone today") — same alpha-on-white
   problem as .aud10-ghost: 4% red row bg + 12% red SPAM badge read clearly
   in dark mode but wash to beige-pink on white, so the "spam = waste of
   mental energy" signal collapses. Bump row bg alpha and SPAM-badge bg so
   the badge pops against the row and the row reads as a red warning zone. */
[data-pk-theme="light"] .spam-col.spam-before .spam-entry.is-spam {
    background: rgba(239, 68, 68, 0.08);
}
[data-pk-theme="light"] .spam-tag.st-spam {
    background: rgba(239, 68, 68, 0.18);
}

/* Light-mode elevation: dark mode creates depth via a luminance staircase
   (deep → base → elevated → card). In light mode those all collapse toward
   white, so cards that use --pk-bg-elevated disappear into sections that
   use --pk-bg-base. Fix: flip section bg to off-white (--pk-bg-deep, same
   as <body>) and give the floating cards real shadows + a firmer border.
   Dark mode is untouched — luminance already carries elevation there. */
[data-pk-theme="light"] .aud1,
[data-pk-theme="light"] .aud9 {
    background: var(--pk-bg-deep);
}
[data-pk-theme="light"] .aud1-card {
    box-shadow: var(--pk-shadow-md);
    border-color: var(--pk-border);
}
/* Featured call: .aud9-right is the unified floating card (phase card +
   transcript feed share one bordered container — see rule above). The inner
   .aud9-revenue-card / .aud9-feed have their chrome stripped, so shadow
   goes on the parent. */
[data-pk-theme="light"] .aud9 .aud9-right {
    box-shadow: var(--pk-shadow-md);
    border-color: var(--pk-border);
}

/* Light-mode section cadence: dark mode separates adjacent sections via a
   luminance staircase; in light mode all sections collapse toward the same
   off-white so the page reads as one flat slab. Fix: alternate sections
   between --pk-bg-deep (off-white) and --pk-bg-base (pure white) in DOM
   order. Card-heavy sections (.aud1, .aud9) are pinned off-white above so
   their white cards float — we flip the sections *between* them instead.
   Dark-scoped sections (.vp-aud7, .vp-booking-mode) naturally break runs
   and aren't touched. */
[data-pk-theme="light"] .aud10,
[data-pk-theme="light"] .vp-ctk,
[data-pk-theme="light"] .vp-proof-e {
    background: var(--pk-bg-base);
}

/* Narrative color tint (light mode only): give the two emotional zones of
   the page a very subtle hue shift so they feel thematically distinct, not
   just luminance-distinct. ~3% mix — enough to register when scrolling past,
   faint enough that content sits undisturbed. Floating cards stay neutral
   white so they still read as "document" on "panel". Dark mode relies on
   .aud9-aurora + section luminance for the same effect and is untouched. */
[data-pk-theme="light"] .aud10 {
    /* Loss zone — missed patients, warm red wash */
    background: color-mix(in srgb, var(--pk-bg-base) 97%, #ef4444);
}
[data-pk-theme="light"] .aud9 {
    /* Gain zone — revenue captured, cool green wash */
    background: color-mix(in srgb, var(--pk-bg-deep) 97%, #10b981);
}
[data-pk-theme="light"] .vp-roi {
    /* Gain-zone reinforcement — ROI stats, matches aud9 green */
    background: color-mix(in srgb, var(--pk-bg-base) 97%, #10b981);
}

/* Light-mode token tuning scoped to #vertical-root:
   1. Borders — in dark mode, --pk-border-muted (#1f1f23) sits ~5pts above
      bg-base (#111113) — a visible edge. In light mode the equivalent
      (#E8EAEF) is only ~2pts darker than bg-base (#FFFFFF) and reads as a
      ghost line. Upgrade to --pk-border (#E2E4E9) for a real edge.
   2. Muted/subtle text — --pk-fg-subtle (#9CA3AF) on white is ~3:1 contrast
      (borderline-invisible) but the same token on dark bg is ~7:1. Bump
      both one step darker so secondary text carries the same perceptual
      weight as dark mode without needing font-weight changes.
   The 100+ var(--pk-border-muted) and 50+ var(--pk-fg-subtle) uses across
   block CSS inherit these without per-class overrides. Admin/portal are
   unaffected (different wrapper). Dark-scoped descendants (.vp-aud7,
   .vp-booking-mode) redefine the tokens at their own scope and win. */
[data-pk-theme="light"] #vertical-root {
    --pk-border-muted: var(--pk-border);
    --pk-fg-muted: #475569;   /* slate-600 (was slate-500 #64748B) */
    --pk-fg-subtle: #64748B;  /* slate-500 (was #9CA3AF) */
}
/* Raw white-alpha borders + text (no token) that live in light-scoped
   content — authored for dark mode, turn invisible on white bg. */
[data-pk-theme="light"] .vp-persona-more {
    border-color: var(--pk-border);
}
[data-pk-theme="light"] .vp-plan-cta {
    border-color: var(--pk-border);
}
@media (hover: hover) {
    [data-pk-theme="light"] .vp-plan-cta:hover {
        border-color: var(--pk-border-hover);
        background: var(--pk-surface);
    }
    /* Nav "Book a Call" ghost CTA — hover hardcodes color:#fff + white-alpha
       wash/border, so in light mode the text turns white-on-white on hover. */
    [data-pk-theme="light"] .nav-a .nva-cta.nva-cta-ghost:hover {
        background: var(--pk-surface);
        border-color: var(--pk-border-hover);
        color: var(--pk-fg);
    }
}
[data-pk-theme="light"] .vp-persona-more-count {
    /* Flip watermark "+N" count from 15% white to 15% black so it stays
       decoratively faint but visible. */
    color: rgba(0, 0, 0, 0.15);
}

/* Push page content below fixed nav */
.hero-o {
    padding-top: 140px;
}

/* --- Hero beam pill (beam-c at top of hero) --- */
.vp-hero-beam {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.vp-hero-beam .beam-border {
    text-decoration: none;
}

.vp-beam-content {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px 12px 12px;
    background: transparent;
    color: var(--pk-fg, #F9FAFB);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 999px;
}

.vp-beam-text {
    line-height: 1.4;
    text-align: left;
}

/* --- Kicker shared dot + color override --- */
.vp-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pk-error);
    animation: ha-pulse 2s infinite;
    flex-shrink: 0;
}

/* --- Kicker color override — warm amber across all sections --- */
.hero-o .ha-kicker,
.vp-aud1 .aud1-label,
.aud9-kicker,
.vp-proof-a .pa-label,
.vp-ctk .ctk-label,
.vp-comparison-kicker,
.explain-q .exq-kicker,
.vp-hero-k2 .vp-kicker,
.vp-compound .vp-kicker,
.vp-hero-r .hr-kicker,
.vp-proof-e .pre-label,
.vp-aud7 .aud7-label,
.faq-d .fqd-label,
.vp-pricing .vp-kicker,
.vp-roi .vp-kicker,
.vp-spam .vp-kicker,
.vp-persona .vp-kicker,
.vp-aftercall .exq-kicker,
.vp-origin-story .vp-kicker,
.ab-section .vp-kicker {
    color: rgb(245, 158, 11);
}

/* --- Hero kicker (red flashing dot, matches hero-a ha-kicker) ---
   Typography (13/600/uppercase/0.08em) comes from .vp-t-kicker via
   the selector alias in vertical-typography.css. */
.hero-o .ha-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgb(245, 158, 11);
    /* margin-bottom from .vp-t-kicker (--vp-space-kicker-gap) */
}

.hero-o .ha-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pk-error);
    animation: ha-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes ha-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* --- hero-k2: widen content to keep headline on fewer lines --- */
.hero-k2 .hk-content {
    max-width: 900px;
}

/* --- hero-k2: static gradient background with dither to prevent banding --- */
.hero-k2 .hk-bg {
    animation: none;
    background: radial-gradient(ellipse at 50% 80%, rgba(139, 92, 246, 0.15) 0%, rgba(217, 70, 239, 0.06) 40%, var(--pk-bg-deep) 80%);
    background-size: 100% 100%;
}

.hero-k2 .hk-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    pointer-events: none;
}

/* --- Hero checkmark list (matches hero-b hb-points) --- */
.vp-hero-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
    margin-bottom: 40px;
    align-items: flex-start;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.vp-hero-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--pk-fg);
}

.vp-hero-points li::before {
    content: '✓';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pk-success-bg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--pk-success);
    font-weight: 700;
}


/* --- Headline word emphasis — 4-color semantic system ---
   Every colored word in a headline maps to one of four narrative roles:
     .vp-danger  — loss / pain / wasted time (red)
     .vp-resolve — gain / revenue / resolution / speed (green)
     .vp-trust   — trust / compliance / attention / testimonial (amber)
     .vp-accent  — Echo brand / product name / brand promise (purple)
   All four use PageKit tokens so light & dark themes adapt automatically.

   The shared base rule below cancels any gradient text-fill inherited from
   parent headline styles — blocks-audio.css sets a green gradient on
   `.aud9-title em` and a purple one on `.vp-compound-title em`, which would
   otherwise repaint our solid-color emphasis as transparent gradient text. */
em.vp-danger,  h1 em.vp-danger,  h2 em.vp-danger,  h3 em.vp-danger,
em.vp-resolve, h1 em.vp-resolve, h2 em.vp-resolve, h3 em.vp-resolve,
em.vp-trust,   h1 em.vp-trust,   h2 em.vp-trust,   h3 em.vp-trust,
em.vp-accent,  h1 em.vp-accent,  h2 em.vp-accent,  h3 em.vp-accent {
    font-style: normal;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: currentColor;
}

em.vp-danger,
h1 em.vp-danger,
h2 em.vp-danger,
h3 em.vp-danger {
    color: var(--pk-error-bright);
}

em.vp-resolve,
h1 em.vp-resolve,
h2 em.vp-resolve,
h3 em.vp-resolve {
    color: var(--pk-success);
}

em.vp-trust,
h1 em.vp-trust,
h2 em.vp-trust,
h3 em.vp-trust {
    color: var(--pk-warning);
}

em.vp-accent,
h1 em.vp-accent,
h2 em.vp-accent,
h3 em.vp-accent {
    color: var(--pk-accent);
}

/* --- Line-wrap control ---
   Use <span class="vp-line">...</span> to group a phrase that should own a
   line on desktop. On mobile the span collapses to inline so the browser
   can repack words using text-wrap: balance. Prefer this over <br>. */
.vp-line {
    display: block;
}

@media (max-width: 768px) {
    .vp-line {
        display: inline;
    }
    /* Any headline/paragraph that uses .vp-line opts into balanced wrap. */
    :is(h1, h2, h3, p):has(.vp-line) {
        text-wrap: balance;
    }
}

/* --- Hero CTA cluster --- */
.vp-hero-ctas {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 40px;
    justify-content: center;
}

.vp-hero-primary-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vp-hero-cta-note {
    font-size: 12px;
    color: var(--pk-fg-muted);
    margin: 10px 0 0;
}

.vp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--pk-accent, #7c3aed);
    color: var(--pk-accent-fg, #fff);
    font-family: var(--pk-font-sans);
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .vp-btn-primary:hover {
        background: var(--pk-accent-hover, #6D28D9);
        transform: translateY(-1px);
    }
}

.vp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--pk-bg-elevated, #111113);
    color: var(--pk-fg, #F9FAFB);
    font-family: var(--pk-font-sans);
    font-size: 15px;
    font-weight: 600;
    border-radius: 14px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}

.vp-beam-cta {
    display: inline-flex;
    margin-top: 0;
}

@media (hover: hover) {
    .vp-btn-secondary:hover {
        transform: translateY(-2px);
    }
}

/* --- Tighten desc-to-checklist gap in explain-q --- */
.explain-q .exq-desc {
    margin-bottom: 20px;
}

/* --- Checklist (unscoped — reusable outside cta-k) --- */
.ctk-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--pk-space-3);
    margin-bottom: var(--pk-space-8);
}
.ctk-checklist li {
    display: flex;
    align-items: center;
    gap: var(--pk-space-3);
    font-size: var(--pk-text-sm);
    color: var(--pk-fg);
}
.ctk-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pk-success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--pk-success);
    font-size: 11px;
}

/* --- Proof strip --- */
.vp-proof-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    font-size: 13px;
    color: var(--pk-fg-muted, #94a3b8);
    font-weight: 500;
}

.vp-proof-sep {
    opacity: 0.4;
}

/* --- Kicker line — matches hero ha-kicker.
   Typography (13/600/uppercase/0.08em) comes from .vp-t-kicker in
   vertical-typography.css; this rule supplies only the red-dot flex
   layout that the kicker family shares. --- */
.vp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- Listen Section (aud1 Conversation Spotlight + Tabs) --- */
.vp-aud1 {
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
    background: var(--pk-bg-base);
}

.vp-aud1 .aud1-header { margin-bottom: 32px; }
.vp-aud1 .aud1-title { line-height: 1.1; }

/* Call-type card grid (replaces tabs) */
.vp-call-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.vp-call-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--pk-bg-elevated, #111113);
    border: 1px solid var(--pk-border-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--pk-font-sans);
    text-align: left;
    color: var(--pk-fg);
}

@media (hover: hover) {
    .vp-call-card:hover {
        border-color: var(--pk-border-hover);
        transform: translateY(-2px);
    }
}

.vp-call-card.active {
    border-color: transparent;
    background: transparent;
    position: relative;
    overflow: hidden;
}
.vp-call-card.active::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: -100%;
    background-image: conic-gradient(
        from 0deg at 50% 50%,
        rgba(147, 51, 234, 0) 20%,
        rgba(16, 185, 129, 0.15) 28%,
        rgba(16, 185, 129, 0.4) 36%,
        var(--success-bright, #34d399) 44%,
        rgba(16, 185, 129, 0) 52%,
        rgba(147, 51, 234, 0) 68%,
        rgba(147, 51, 234, 0.15) 76%,
        rgba(147, 51, 234, 0.5) 86%,
        var(--accent-bright, #A855F7) 94%,
        rgba(147, 51, 234, 0) 100%
    );
    animation: beam-spin 3s linear infinite;
    border-radius: 14px;
}
.vp-call-card.active::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: var(--pk-bg-elevated, #111113);
    border-radius: 12.5px;
}
.vp-call-card.active > * {
    position: relative;
    z-index: 1;
}

.dcc-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pk-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dcc-play svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

.dcc-play-icon { margin-left: 2px; }
.dcc-pause-icon { display: none; }
.vp-call-card.playing .dcc-play-icon { display: none; }
.vp-call-card.playing .dcc-pause-icon { display: block; }

.dcc-info {
    flex: 1;
    min-width: 0;
}

.dcc-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-fg);
    line-height: 1.3;
}

.dcc-sub {
    font-size: 12px;
    color: var(--pk-fg-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dcc-dur {
    /* font-family (mono) + font-size (12) + tabular-nums
       from .vp-t-mono-meta-sm in vertical-typography.css. */
    color: var(--pk-fg-muted);
    flex-shrink: 0;
}

/* --- Inline Callouts (dark theme, a1 pattern) --- */
.vp-aud1 .dl-callout {
    margin: 4px 0;
    padding: 10px 14px;
    border: 1.5px dashed var(--pk-border-muted);
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    opacity: 0;
    transform: translateY(4px) scale(0.97);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.vp-aud1 .dl-callout.aud1-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.vp-aud1 .dl-callout-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.vp-aud1 .dl-callout-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
}

.vp-aud1 .dl-callout-detail {
    display: block;
    font-size: 12px;
    color: var(--pk-fg-muted);
    line-height: 1.5;
}

/* Callout category colors */
.vp-aud1 .dl-callout.dl-cat-tool      { border-color: #3b82f6; background: rgba(59,130,246,0.08); }
.vp-aud1 .dl-callout.dl-cat-intel      { border-color: #f59e0b; background: rgba(245,158,11,0.08); }
.vp-aud1 .dl-callout.dl-cat-notif      { border-color: #10b981; background: rgba(16,185,129,0.08); }
.vp-aud1 .dl-callout.dl-cat-context    { border-color: #8b5cf6; background: rgba(139,92,246,0.08); }
.vp-aud1 .dl-callout.dl-cat-spam       { border-color: #ef4444; background: rgba(239,68,68,0.08); }

.vp-aud1 .dl-cat-tool   .dl-callout-title { color: #60a5fa; }
.vp-aud1 .dl-cat-intel  .dl-callout-title { color: #fbbf24; }
.vp-aud1 .dl-cat-notif  .dl-callout-title { color: #34d399; }
.vp-aud1 .dl-cat-context .dl-callout-title { color: #a78bfa; }
.vp-aud1 .dl-cat-spam   .dl-callout-title { color: #f87171; }

/* Single-column layout override */
.vp-aud1-single {
    display: flex;
    flex-direction: column;
    max-width: 680px;
    padding: 28px 32px 32px;
}

.vp-aud1-wave-row {
    margin-bottom: 24px;
    cursor: pointer;
}

.vp-aud1-wave-row .aud1-wave {
    height: 32px;
}

.vp-aud1-single .aud1-transcript {
    max-height: 380px;
    /* Override the admin-blocks fade mask — spotlight feed should clip
       cleanly at the top/bottom edges rather than fading cards out. */
    mask-image: none;
    -webkit-mask-image: none;
}

/* The whole spotlight card (waveform + transcript) stays hidden until the
   user hits play for the first time — only the tab grid is visible up top.
   VAP adds .vap-has-played to the card on first play() and it fades in. */
.vp-aud1-single:not(.vap-has-played) {
    display: none;
}

.vp-aud1-single.vap-has-played {
    animation: vp-aud1-card-in 0.45s ease-out;
}

@keyframes vp-aud1-card-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Lines start fully hidden — reveal only on playback */
.vp-aud1 .aud1-line {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease, border-left-color 0.3s ease;
}

.vp-aud1 .aud1-line.aud1-revealed {
    opacity: 1;
    transform: translateY(0);
}

.vp-aud1 .aud1-line.aud1-past {
    opacity: 0.5;
}

/* ════════════════════════════════════════════════════════════════
 * SPOTLIGHT BOTTOM SHEET (.sp-sheet-*)
 * Mobile-only: tapping a .vp-call-card opens a slide-up sheet that
 * holds the existing #vpListenCard (waveform + transcript).
 * The JS teleports the real card node into .sp-sheet-body on open
 * and back on close, so VerticalAudioPlayer's refs stay valid and
 * audio state persists through the transition.
 * ════════════════════════════════════════════════════════════════ */
.sp-sheet-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(2, 2, 4, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}
.sp-sheet-overlay[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}
.sp-sheet {
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    background: var(--pk-bg-elevated, #111113);
    border-top: 1px solid var(--pk-border-muted, rgba(255, 255, 255, 0.08));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-sheet-overlay[data-open="true"] .sp-sheet {
    transform: translateY(0);
}
.sp-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--pk-fg-subtle);
    opacity: 0.4;
    margin: 10px auto 0;
    flex-shrink: 0;
}
.sp-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 8px;
    flex-shrink: 0;
}
.sp-sheet-title {
    /* Leading snapped 1.3 → 1.5 to match body-prose leading;
       the title is single-line via ellipsis so leading is only
       visible in the rare multi-line overflow case, but the token
       unification kills the orphan value. */
    font-size: 15px;
    font-weight: 600;
    color: var(--pk-fg, #F9FAFB);
    line-height: 1.5;
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-sheet-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pk-surface);
    border: 1px solid var(--pk-border-muted);
    border-radius: 8px;
    color: var(--pk-fg);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
    .sp-sheet-close:hover {
        background: var(--pk-surface-hover);
        color: var(--pk-fg);
    }
}
.sp-sheet-close svg {
    width: 14px;
    height: 14px;
}
.sp-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 24px;
    -webkit-overflow-scrolling: touch;
}
/* The teleported audio card loses its in-flow frame (border/bg/max-width)
   since the sheet already supplies those, and the transcript expands to
   fill the available scroll area. Higher specificity beats the default
   .vp-aud1-single:not(.vap-has-played) { display: none } hide-rule so the
   card is visible inside the sheet even before first play. */
.sp-sheet-overlay .sp-sheet-body .vp-aud1-single {
    display: flex;
    max-width: none;
    padding: 12px 0 0;
    border: none;
    background: transparent;
    animation: none;
}
.sp-sheet-overlay .sp-sheet-body .aud1-transcript {
    max-height: none;
}
/* Featured (.aud9) teleport overrides. When .aud9-player and .aud9-right
   are moved into the sheet body, strip cascade-reveal opacity/transform
   defaults (in case the IntersectionObserver hasn't fired yet), clear any
   inherited rest-state collapse from .aud9[data-state="rest"] (which no
   longer applies outside .aud9), and give the feed more vertical room
   inside the focused view. */
.sp-sheet-overlay .sp-sheet-body .aud9-player,
.sp-sheet-overlay .sp-sheet-body .aud9-right {
    opacity: 1;
    transform: none;
    animation: none;
    max-height: none;
    pointer-events: auto;
    transition: none;
}
.sp-sheet-overlay .sp-sheet-body .aud9-player {
    margin-bottom: 16px;
}
.sp-sheet-overlay .sp-sheet-body .aud9-feed {
    max-height: 280px;
}
@media (prefers-reduced-motion: reduce) {
    .sp-sheet-overlay,
    .sp-sheet {
        transition: none;
    }
}

/* --- Shared VAP module overrides for vertical-page Spotlight (.vp-aud1)
   and Featured (.aud9) contexts. Both sections render agent cards +
   callouts with identical styling so the two transcript blocks read as
   one consistent design. --- */
.vp-aud1 .vap-line,
.aud9 .vap-line {
    padding: 6px 12px;
    border-left: 3px solid transparent;
}

.vp-aud1 .vap-line-agent .vap-speaker,
.vp-aud1 .vap-line-ai .vap-speaker,
.aud9 .vap-line-agent .vap-speaker,
.aud9 .vap-line-ai .vap-speaker {
    color: #a78bfa;
}

.vp-aud1 .vap-line.vap-active,
.aud9 .vap-line.vap-active {
    border-left-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.06);
}

/* Speaker label + em-dash separator + ✨ AI prefix come from
   .vp-t-speaker in vertical-typography.css (aliased to
   .vp-aud1 .vap-speaker and .aud9 .vap-speaker). */

.vp-aud1 .vap-callout,
.aud9 .vap-callout {
    border: 1.5px dashed var(--pk-border-muted);
    /* Share the same width rail as the transcript lines so callouts and
       speech turns align on a single column. Copy is tightened to fit
       on one line — detail clips with an ellipsis rather than wrapping. */
    margin: 6px 0;
    padding: 8px 12px;
    gap: 8px;
    border-radius: 8px;
}
.vp-aud1 .vap-callout-body,
.aud9 .vap-callout-body {
    /* Single-line layout — title + detail share one row so the callout
       reads as a one-line annotation rather than a stacked card. */
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.vp-aud1 .vap-callout-title,
.aud9 .vap-callout-title {
    font-size: 12px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.vp-aud1 .vap-callout-detail,
.aud9 .vap-callout-detail {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.vp-aud1 .vap-callout-icon,
.aud9 .vap-callout-icon {
    font-size: 14px;
    /* Desaturate emoji glyphs so callouts read as monochrome annotations —
       category color comes from the border + title, not the icon. */
    filter: grayscale(1);
}

.vp-aud1 .vap-cat-tool,
.aud9 .vap-cat-tool       { border-color: #3b82f6; }
.vp-aud1 .vap-cat-intel,
.aud9 .vap-cat-intel      { border-color: #f59e0b; }
.vp-aud1 .vap-cat-notif,
.aud9 .vap-cat-notif      { border-color: #10b981; }
.vp-aud1 .vap-cat-context,
.aud9 .vap-cat-context    { border-color: #8b5cf6; }
.vp-aud1 .vap-cat-spam,
.aud9 .vap-cat-spam       { border-color: #ef4444; }
.vp-aud1 .vap-cat-revenue,
.aud9 .vap-cat-revenue    { border-color: #10b981; }

/* --- Cost Comparison Section --- */
.vp-comparison {
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
}

.vp-comparison-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vp-comparison-sub {
    font-size: 16px;
    color: var(--pk-fg-muted);
    line-height: 1.7;
    margin-top: 16px;
    max-width: 480px;
}

.vp-comparison-sub strong {
    color: var(--pk-fg);
}

.vp-comparison-title {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 700;
    color: var(--pk-fg);
    letter-spacing: -0.02em;
    margin-bottom: 48px;
}

.vp-comparison-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: center;
}

.vp-comparison-table-wrap {
    overflow-x: auto;
}

.vp-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.vp-comparison-table th,
.vp-comparison-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--pk-border-muted);
}

.vp-comparison-table th {
    /* font-family/size/weight/tracking/uppercase from .vp-t-kicker-sm.
       Previously 12/600/0.04em — snapped to 11/700/0.08em. */
    color: var(--pk-fg-subtle);
}

.vp-comparison-table td {
    color: var(--pk-fg-muted);
}

.vp-comparison-table td:first-child {
    font-weight: 600;
    color: var(--pk-fg);
}

.vp-highlight-col {
    color: #10B981 !important;
    font-weight: 600 !important;
    background: rgba(16, 185, 129, 0.06);
}

.vp-comparison-reframe { /* legacy — kept for reference */
    padding: 32px;
    background: var(--pk-bg-elevated, #111113);
    border: 1px solid var(--pk-border-muted);
    border-radius: 14px;
}

.vp-comparison-reframe p {
    font-size: 16px;
    color: var(--pk-fg-muted);
    line-height: 1.7;
}

.vp-comparison-reframe strong {
    color: var(--pk-fg);
}

/* --- Spam Block (call log before/after) --- */
/* Spam = waste zone. Mirrors aud10's loss-zone red tint. Previous
   gradient (inset → deep) had a ~2-unit delta — imperceptible, doing
   no work. Now: flat red-on-deep wash, consistent with the graveyard. */
.vp-spam {
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
    background: color-mix(in srgb, var(--pk-bg-deep) 96%, #ef4444);
}

.vp-spam-header {
    text-align: center;
    margin-bottom: 56px;
}
.vp-spam-header .spam-sub {
    margin: 0 auto;
    font-size: 16px;
    color: var(--pk-fg-muted);
    line-height: 1.65;
    max-width: 640px;
}

.spam-title {
    color: var(--pk-fg);
    margin-bottom: 16px;
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}
.spam-title em { font-style: normal; }

/* "ringing." word jitters on multiple axes to suggest a buzzing phone.
   Scoped to the spam headline; respects reduced-motion preferences. */
.spam-ring-word {
    display: inline-block;
    transform-origin: 50% 50%;
    will-change: transform;
    animation: spam-ring-jitter 0.144s infinite;
}
@keyframes spam-ring-jitter {
    0%   { transform: translate( 0.8px, -0.8px) rotate(-0.48deg); }
    25%  { transform: translate(-0.8px,  0.8px) rotate( 0.48deg); }
    50%  { transform: translate( 0.8px,  0.8px) rotate(-0.24deg); }
    75%  { transform: translate(-0.8px, -0.8px) rotate( 0.24deg); }
    100% { transform: translate( 0.8px, -0.8px) rotate(-0.48deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spam-ring-word { animation: none; }
}

.spam-split {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    max-width: 940px;
    margin: 0 auto;
}

.spam-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.spam-col-header {
    /* Typography from .vp-t-kicker (13/600/uppercase/0.08em).
       Previously 13/700/0.06em — unified to kicker weight/tracking;
       red/green color still carries before/after emphasis. */
    padding: 0 0 12px;
    text-align: center;
}
.spam-col.spam-before .spam-col-header { color: var(--pk-error-bright); }
.spam-col.spam-after .spam-col-header { color: var(--pk-success); }

.spam-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.spam-vs-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pk-bg-deep);
    border: 1px solid var(--pk-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--pk-fg-muted);
    z-index: 2;
    letter-spacing: 0.05em;
}

.spam-panel {
    background: var(--pk-surface);
    border: 1px solid var(--pk-border-muted);
    border-radius: 16px;
    overflow: hidden;
}

/* Winner glow on "after" panel */
.spam-col.spam-after .spam-panel {
    border-color: rgba(34, 197, 94, 0.3);
    animation: spam-winner-pulse 4s ease-in-out infinite;
}
@keyframes spam-winner-pulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(34, 197, 94, 0.07),
            0 0 60px rgba(34, 197, 94, 0.04),
            inset 0 0 20px rgba(34, 197, 94, 0.02);
    }
    50% {
        box-shadow:
            0 0 35px rgba(34, 197, 94, 0.13),
            0 0 90px rgba(34, 197, 94, 0.07),
            inset 0 0 35px rgba(34, 197, 94, 0.04);
    }
}

.spam-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--pk-border-muted);
}
.spam-entry:last-child { border-bottom: none; }

.spam-bar {
    width: 3px;
    min-height: 36px;
    border-radius: 0 3px 3px 0;
    flex-shrink: 0;
    align-self: stretch;
}
.spam-bar.bar-spam { background: var(--pk-error-bright, #EF4444); }
.spam-bar.bar-real { background: var(--pk-success, #22C55E); }
.spam-bar.bar-blocked { background: rgba(107, 114, 128, 0.3); }

.spam-entry-info { flex: 1; min-width: 0; padding-left: 4px; }
.spam-entry-name {
    /* Snapped 500→600: weight 500 was the lone odd-ball on the page.
       600 preserves the name-vs-meta hierarchy (meta is 11/muted). */
    font-weight: 600;
    color: var(--pk-fg);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spam-entry-meta {
    font-size: 11px;
    color: var(--pk-fg-muted);
    margin-top: 1px;
}

.spam-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.spam-tag.st-spam { background: rgba(239, 68, 68, 0.12); color: var(--pk-error-bright); }
.spam-tag.st-real { background: rgba(34, 197, 94, 0.06); color: var(--pk-fg-muted); }
.spam-tag.st-blocked { background: rgba(107, 114, 128, 0.08); color: rgba(156, 163, 175, 0.5); }
.spam-tag.st-answered { background: rgba(34, 197, 94, 0.12); color: var(--pk-success); }

.spam-wasted {
    text-align: center;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pk-fg-muted);
    border-top: 1px solid var(--pk-border-muted);
}
.spam-wasted strong { color: var(--pk-error-bright); }
.spam-wasted.spam-saved strong { color: var(--pk-success); }

.spam-col.spam-before .spam-entry.is-spam { background: rgba(239, 68, 68, 0.04); }
.spam-col.spam-before .spam-entry.is-spam .spam-entry-name { color: var(--pk-fg-muted); }
.spam-col.spam-after .spam-entry.is-blocked { opacity: 0.25; }
.spam-col.spam-after .spam-entry.is-blocked .spam-entry-name { text-decoration: line-through; }

@media (max-width: 768px) {
    .spam-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .spam-vs {
        display: flex;
        padding: 16px 0;
    }
}

/* --- ROI Calculator (split layout) --- */
/* ROI = gain zone. Subtle green-on-base wash mirrors featured's
   "revenue captured" story. Light-mode scope below uses its own
   override for the white-track equivalent. */
.vp-roi {
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
    background: color-mix(in srgb, var(--pk-bg-base) 97%, #10b981);
}

.vp-roi-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.vp-roi-copy h2 {
    color: var(--pk-fg);
    margin-bottom: 16px;
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale.
       margin-top removed — kicker above sets gap via .vp-t-kicker. */
}

.vp-roi-desc {
    font-size: 16px;
    color: var(--pk-fg-muted);
    line-height: 1.65;
    margin-bottom: 8px;
}

.vp-roi-calc {
    background: var(--pk-bg-elevated, #111113);
    border: 1px solid var(--pk-border-muted);
    border-radius: 20px;
    padding: 36px 32px;
}

.vp-roi-calc-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--pk-fg-muted);
    margin-bottom: 28px;
}

.vp-roi-inputs {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.vp-roi-row label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--pk-fg-muted);
    margin-bottom: 10px;
}

.vp-roi-val {
    /* font-family (mono) + font-size (14) + tabular-nums
       from .vp-t-mono-meta-md in vertical-typography.css. */
    font-weight: 600;
    color: var(--pk-fg);
}

.vp-roi-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--pk-border-muted);
    outline: none;
    cursor: pointer;
}

.vp-roi-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pk-accent);
    border: 3px solid var(--pk-bg-deep);
    box-shadow: 0 0 0 2px var(--pk-accent);
    cursor: grab;
    transition: transform 0.15s;
}

@media (hover: hover) {
    .vp-roi-range::-webkit-slider-thumb:hover {
        transform: scale(1.15);
    }
}

.vp-roi-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pk-accent);
    border: 3px solid var(--pk-bg-deep);
    box-shadow: 0 0 0 2px var(--pk-accent);
    cursor: grab;
}

.vp-roi-result {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.vp-roi-result-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--pk-error-bright, #EF4444);
    margin-bottom: 6px;
}

.vp-roi-result-amount {
    font-size: 40px;
    font-weight: 800;
    color: var(--pk-error-bright, #EF4444);
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.vp-roi-result-sub {
    font-size: 13px;
    color: var(--pk-fg-muted);
    margin-top: 4px;
}

.vp-roi-vs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.vp-roi-vs-label {
    font-size: 13px;
    color: #10B981;
    font-weight: 600;
}

.vp-roi-vs-val {
    font-size: 18px;
    font-weight: 800;
    color: #10B981;
    font-variant-numeric: tabular-nums;
}

/* --- ROI falling dollars --- */
.vp-roi-copy {
    position: relative;
}
.vp-roi-dollars {
    position: absolute;
    top: -60px;
    left: -20px;
    right: -20px;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}
.vp-roi-copy > *:not(.vp-roi-dollars) {
    position: relative;
    z-index: 1;
}
.vp-roi-dollar {
    position: absolute;
    font-family: var(--pk-font-mono);
    font-weight: 700;
    color: rgba(239, 68, 68, 0.18);
    top: 0;
    animation: roiDollarFall linear forwards;
    will-change: transform, opacity;
}
@keyframes roiDollarFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(var(--fall-dist, 420px)) rotate(var(--rot, 30deg)); opacity: 0; }
}

@media (max-width: 768px) {
    .vp-roi-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* --- How It Works subtitle --- */
.vp-ea-sub {
    font-size: 16px;
    color: var(--pk-fg-muted);
    text-align: center;
    margin-top: 8px;
}

/* --- Setup section: override deep → base for alternation --- */
.explain-q {
    background: var(--pk-bg-base);
    padding-bottom: 260px;
}
.explain-q .exq-content {
    position: relative;
}
.explain-q .exq-accordion {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
}


/* --- Call forwarding inline accordion (explain-q) --- */
.exq-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.exq-acc-item {
    border: 1px solid var(--pk-border-muted);
    border-radius: 12px;
    overflow: hidden;
    background: var(--pk-surface);
    transition: border-color 0.2s;
}
.exq-acc-item.open {
    border-color: rgba(124, 58, 237, 0.2);
}
.exq-acc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    color: inherit;
    font-family: var(--pk-font-sans);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
@media (hover: hover) {
    .exq-acc-head:hover {
        background: var(--pk-surface-hover);
    }
}
.exq-acc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.exq-acc-dot.green { background: var(--pk-success, #22c55e); }
.exq-acc-dot.red { background: var(--pk-error-bright, #ef4444); }
.exq-acc-dot.blue { background: #3B82F6; }
.exq-acc-label { flex: 1; }
.exq-acc-chevron {
    width: 16px;
    height: 16px;
    stroke: var(--pk-fg-subtle);
    transition: transform 0.2s;
}
.exq-acc-item.open .exq-acc-chevron {
    transform: rotate(180deg);
}
.exq-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.exq-acc-item.open .exq-acc-body {
    max-height: 200px;
}
.exq-acc-inner {
    padding: 8px 16px 16px;
}
.exq-acc-inner p {
    font-size: 13px;
    color: var(--pk-fg-muted);
    line-height: 1.6;
}
.exq-acc-code {
    /* font-family (mono) + font-size (14) + tabular-nums
       from .vp-t-mono-meta-md in vertical-typography.css.
       Previously 15px — snapped down one step to match scale. */
    display: inline-block;
    font-weight: 700;
    color: var(--pk-accent, #7c3aed);
    background: rgba(124, 58, 237, 0.08);
    padding: 2px 8px;
    border-radius: 5px;
}
.exq-acc-code.muted {
    color: var(--pk-fg-muted);
    background: var(--pk-surface);
}

/* --- FAQ subtitle --- */
.vp-faq-sub {
    font-size: 16px;
    color: var(--pk-fg-muted);
    text-align: center;
    margin-top: 8px;
}

/* Increase max-height for longer vertical-page FAQ answers */
.faq-d .fqd-item.open .fqd-answer {
    max-height: 400px;
}

/* --- Case study body --- */
.vp-case-body {
    max-width: 700px;
    margin: 32px auto 0;
    text-align: center;
}

.vp-case-body p {
    font-size: 15px;
    color: var(--pk-fg-muted);
    line-height: 1.7;
}

/* --- Demo section subtitle --- */
.vp-demo-sub {
    font-size: 17px;
    color: var(--pk-fg-muted);
    max-width: 560px;
    margin: 12px auto 0;
    text-align: center;
    line-height: 1.6;
}

/* --- Final CTA / Pricing --- */
.vp-final-cta {
    padding: 0;
}

/* Child blocks handle their own centering — backgrounds span full width */
.vp-final-cta .cta-j,
.vp-final-cta .cta-g {
    padding-left: max(48px, calc((100vw - 1100px) / 2));
    padding-right: max(48px, calc((100vw - 1100px) / 2));
}

.vp-final-cta .cta-j {
    margin-bottom: 60px;
}

.vp-trial-callout {
    padding: 24px;
    background: var(--pk-accent-subtle, rgba(124,58,237,0.08));
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.vp-trial-callout p {
    font-size: 15px;
    color: var(--pk-fg-muted);
    line-height: 1.6;
}

.vp-trial-callout strong {
    color: var(--pk-fg);
}

.vp-closing {
    font-size: 15px;
    color: var(--pk-fg-subtle);
    line-height: 1.6;
}

/* Pricing headline — match other section titles */
.vp-pricing-title {
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}

/* Pricing card */
.vp-pricing-beam {
    width: 100%;
}

.vp-pricing-card {
    background: var(--pk-bg-elevated, #111113);
    padding: 36px 32px;
    border-radius: 12px;
    width: 100%;
}

.vp-pricing-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--pk-fg);
    margin-bottom: 8px;
}

.vp-pricing-included {
    font-size: 14px;
    color: var(--pk-fg-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.vp-pricing-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.vp-pricing-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--pk-fg-muted);
}

.vp-pricing-feature svg {
    color: var(--pk-success-bright, #10b981);
    flex-shrink: 0;
}

.vp-pricing-fine {
    font-size: 13px;
    color: var(--pk-fg-subtle);
    margin-bottom: 20px;
}

.vp-pricing-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* --- Trust strip above footer --- */
.vp-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 48px;
    font-family: var(--pk-font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pk-fg-subtle);
}

/* ============================================================
   TYPOGRAPHY NORMALIZATION
   Canonical scale lives in vertical-typography.css (imported
   at the top of this file). That file aliases every existing
   kicker / speaker / metric / mono-meta class onto the scale,
   so the rules below only supply per-section color, margin,
   and layout — never font-size/weight/tracking/family.

   Summary (see vertical-typography.css for the full set):
     .vp-t-kicker     13 / 600 / 0.08em / uppercase   (section eyebrow)
     .vp-t-kicker-sm  11 / 700 / 0.08em / uppercase   (chrome label)
     .vp-t-display    clamp(36–52) / 800 / -0.03em    (section headline)
     .vp-t-speaker    15 / 600 / prose + em-dash + ✨  (transcript)
     .vp-t-prose      15 / 400 / 1.55                 (transcript body)
     .vp-t-mono-meta  mono + tabular-nums             (duration/scrub)
   ============================================================ */

/* #2 Hero — bump title weight to 800, tighten leading to 1.1 to match
   .vp-t-display + .vp-t-h2, tighten sub→checklist gap */
.hero-o h1 {
    font-weight: 800;
    line-height: 1.1;
}

.hero-o .ho-sub {
    /* font-size + line-height come from .vp-t-subhead scale (18/1.5). */
    margin-bottom: 16px;
}

/* #3 Stats — remove uppercase from title */
.proof-p .prp-title {
    text-transform: none;
}

/* #4 Gradient Poster — weight 800 */
.hero-k2 h1 {
    font-weight: 800;
}

/* #5 Audio Demo Grid — weight 800, tighten line-height */
.ed-title {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* #9 Testimonials (proof-a) — match vertical-page section typography */
.vp-proof-a {
    background: var(--pk-bg-deep);
}
.vp-proof-a .pa-title {
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}

/* #6 Featured Call (aud9) — flip columns: visual left, text right */
.aud9 .aud9-layout {
    direction: rtl;
}
.aud9 .aud9-layout > * {
    direction: ltr;
}

/* aud9 play button — beam border wrapper */
.aud9-play-beam {
    flex-shrink: 0;
    border-radius: 50%;
    transition: transform 0.2s;
}
.aud9-play-beam .beam-border-ray {
    border-radius: 50%;
    /* wider arcs — default dual arcs are ~30° each, too subtle on a small circle */
    background-image: conic-gradient(
        from 0deg at 50% 50%,
        rgba(147, 51, 234, 0) 20%,
        rgba(16, 185, 129, 0.15) 28%,
        rgba(16, 185, 129, 0.4) 36%,
        var(--success-bright, #34d399) 44%,
        rgba(16, 185, 129, 0) 52%,
        rgba(147, 51, 234, 0) 68%,
        rgba(147, 51, 234, 0.15) 76%,
        rgba(147, 51, 234, 0.5) 86%,
        var(--accent-bright, #A855F7) 94%,
        rgba(147, 51, 234, 0) 100%
    );
}
.aud9-play-beam .beam-border-track {
    border-radius: 50%;
    padding: 5px;
    background: var(--pk-bg-base, #111113);
}
.aud9-play-beam .aud9-play {
    flex-shrink: 0;
    box-shadow: none;
}
@media (hover: hover) {
    .aud9-play-beam:hover {
        transform: scale(1.06);
    }
}

/* aud9 rest/play motion (E3 Horizontal Glide) — at rest the block is a
   centered hero with an oversized play button; on click, the right column
   (revenue card + feed) glides in from the left (visually right, because of
   the .aud9-layout RTL flip) as the grid expands to its 2-column play state. */
:root {
    --aud9-dur-layout: 0.7s;
    --aud9-dur-player: 0.5s;
    --aud9-dur-enter: 0.85s;
}
.aud9 .aud9-layout {
    transition:
        grid-template-columns var(--aud9-dur-layout) cubic-bezier(0.22, 1, 0.36, 1),
        max-width var(--aud9-dur-layout) ease,
        gap var(--aud9-dur-layout) ease;
}
.aud9 .aud9-right {
    min-width: 0;
    overflow: hidden;
    /* Unified card — the phase card + transcript feed share a single
       bordered container so the block reads as one surface. Child
       backgrounds/borders are stripped below. */
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border-muted);
    border-radius: 16px;
    gap: 0;
    transition:
        transform var(--aud9-dur-enter) cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.55s ease,
        max-height var(--aud9-dur-enter) cubic-bezier(0.16, 1, 0.3, 1);
}
/* Strip per-card chrome off the children now that the parent is the card. */
.aud9 .aud9-right .aud9-revenue-card,
.aud9 .aud9-right .aud9-feed {
    background: transparent;
    border: none;
    border-radius: 0;
}
/* Subtle divider between the phase card and the transcript feed. */
.aud9 .aud9-right .aud9-feed {
    border-top: 1px solid var(--pk-border-muted);
}
.aud9 .aud9-play {
    transition: width var(--aud9-dur-player) cubic-bezier(0.22, 1, 0.36, 1),
                height var(--aud9-dur-player) cubic-bezier(0.22, 1, 0.36, 1);
}
.aud9 .aud9-play svg {
    transition: width var(--aud9-dur-player) ease,
                height var(--aud9-dur-player) ease;
}
.aud9 .aud9-wave {
    transition: height var(--aud9-dur-player) cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
}
.aud9 .aud9-title {
    transition: margin-bottom var(--aud9-dur-layout) ease;
}
.aud9 .aud9-sub {
    transition: margin-bottom var(--aud9-dur-layout) ease,
                font-size var(--aud9-dur-layout) ease,
                max-width var(--aud9-dur-layout) ease;
}

/* Rest state — collapsed grid + hidden right column + enlarged player.
   The right column stays in-flow (max-height:0 + overflow:hidden) so the
   browser captures starting transform/opacity values for the glide-in;
   display:none would prevent the transition from firing.
   NOTE: grid track order follows DOM order (.aud9-left is track 1,
   .aud9-right is track 2). .aud9 .aud9-layout uses direction:rtl to flip
   the *visual* order — but the tracks themselves stay in DOM order, so
   we collapse track 2 (1fr → 0fr) to hide the revenue card. */
.aud9[data-state="rest"] .aud9-layout {
    grid-template-columns: 1fr 0fr;
    max-width: 720px;
    gap: 0;
}
.aud9[data-state="rest"] .aud9-right {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-180px);
}
.aud9[data-state="rest"] .aud9-left { text-align: center; }
.aud9[data-state="rest"] .aud9-kicker { justify-content: center; }
.aud9[data-state="rest"] .aud9-sub {
    /* font-size from .vp-t-subhead scale (18px). */
    margin-inline: auto;
    margin-bottom: 36px;
    max-width: 520px;
}
.aud9[data-state="rest"] .aud9-title { margin-bottom: 20px; }
.aud9[data-state="rest"] .aud9-player { justify-content: center; gap: 20px; }
.aud9[data-state="rest"] .aud9-play { width: 80px; height: 80px; }
.aud9[data-state="rest"] .aud9-play svg { width: 30px; height: 30px; }
.aud9[data-state="rest"] .aud9-wave { height: 52px; cursor: default; }
.aud9[data-state="rest"] .aud9-proof-row { justify-content: center; }

/* Play state — full 2-column layout with right column glided into place */
.aud9[data-state="play"] .aud9-right {
    max-height: 900px;
    opacity: 1;
    transform: translateX(0);
}

/* Legacy class — retained for back-compat with the audio player's existing
   classList toggles. data-state="play" is the source of truth for rest/play. */
.aud9.aud9-playing .aud9-right { opacity: 1; }

/* aud9 revenue — pulse while counting up */
.aud9 .aud9-rev-amount.counting {
    animation: aud9RevPulse 1.2s ease-in-out infinite;
}
@keyframes aud9RevPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ------------------------------------------------------------------
   C1 "Live Call Status" phased revenue card.
   Three phases cross-fade inside .aud9-revenue-card. The revenue
   counter ($aud9Revenue) lives inside phase 2 so the existing audio
   player tick loop drives it unchanged once we reach that phase.
   ------------------------------------------------------------------ */
.aud9 .aud9-revenue-card {
    position: relative;
    min-height: 188px;
}
.aud9 .aud9-phase {
    position: absolute;
    inset: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    text-align: center;
}
.aud9 .aud9-revenue-card[data-phase="0"] .aud9-phase[data-p="0"],
.aud9 .aud9-revenue-card[data-phase="1"] .aud9-phase[data-p="1"],
.aud9 .aud9-revenue-card[data-phase="2"] .aud9-phase[data-p="2"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.aud9 .aud9-phase-label {
    /* Typography from .vp-t-kicker (13/600/uppercase/0.08em).
       Was 12/600 — bumped one step to sit in the kicker family. */
    color: var(--pk-fg-muted);
}
.aud9 .aud9-phase-headline {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pk-fg);
    line-height: 1.1;
}
.aud9 .aud9-phase-sub {
    font-size: 13px;
    color: var(--pk-fg-muted);
}

/* Lottie-style bouncing "..." after "Calculating value" during phase 1.
   All three dots are always rendered so the label stays stationary —
   only opacity + translateY animate, staggered per dot. */
.aud9 .aud9-phase-dots {
    display: inline-block;
    letter-spacing: 0.05em;
    vertical-align: baseline;
}
.aud9 .aud9-phase-dots > span {
    display: inline-block;
    opacity: 0.25;
    animation: aud9PhaseDotBounce 1.4s ease-in-out infinite;
}
.aud9 .aud9-phase-dots > span::before {
    content: ".";
}
.aud9 .aud9-phase-dots > span:nth-child(2) { animation-delay: 0.16s; }
.aud9 .aud9-phase-dots > span:nth-child(3) { animation-delay: 0.32s; }
@keyframes aud9PhaseDotBounce {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-2px); }
}

/* Live red dot with outward pulse */
.aud9 .aud9-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: aud9LivePulse 1.4s ease-out infinite;
}
@keyframes aud9LivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Mobile — single column at all times; rest state hides the right column
   vertically instead of horizontally so the motion reads correctly below
   the player. */
@media (max-width: 860px) {
    .aud9[data-state="rest"] .aud9-layout,
    .aud9[data-state="play"] .aud9-layout {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 32px;
    }
    .aud9[data-state="rest"] .aud9-right,
    .aud9[data-state="play"] .aud9-right {
        transform: none;
    }
    .aud9[data-state="rest"] .aud9-sub { max-width: 100%; }
    .aud9[data-state="rest"] .aud9-play { width: 64px; height: 64px; }
    .aud9[data-state="rest"] .aud9-play svg { width: 24px; height: 24px; }
    .aud9[data-state="rest"] .aud9-wave { height: 40px; }
}

/* ------------------------------------------------------------------
   Featured feed — merged transcript + callout timeline.
   createRevenueWidget builds all DOM up front, hidden. The tick loop
   adds .vap-revealed as each event's timestamp passes, marks the
   current speech line .vap-active (demotes the prior to .vap-past),
   and auto-scrolls so the active item stays centered. Column height
   stays bounded — the feed itself scrolls internally. Transcript +
   callout styles are shared with Spotlight (see .vp-aud1, .aud9
   overrides above).
   ------------------------------------------------------------------ */
.aud9 .aud9-feed {
    max-height: 420px;
    padding: 14px 16px;
    gap: 16px;
    scroll-behavior: smooth;
    /* position: relative ensures child offsetTop is measured relative to
       this scroll container, not a distant positioned ancestor. */
    position: relative;
    /* Disable scroll anchoring — reveal-class transitions on siblings can
       otherwise push scrollTop unexpectedly, clipping the first line. */
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: var(--pk-border-muted) transparent;
}
/* Subtle scrollbar — 4px thumb, transparent track, muted color */
.aud9 .aud9-feed::-webkit-scrollbar {
    width: 4px;
}
.aud9 .aud9-feed::-webkit-scrollbar-track { background: transparent; }
.aud9 .aud9-feed::-webkit-scrollbar-thumb {
    background: var(--pk-border-muted);
    border-radius: 3px;
}

/* Transcript + callout styling lives in the shared .vap-* rules
   (shared/css/vertical-audio-player.css) and the combined
   ".vp-aud1, .aud9" overrides above, so Spotlight and Featured render
   agent cards + callouts identically. */

/* Mobile — allow a generous but bounded feed; single-column layout already
   stacks the revenue card above the feed, so the scroll is the natural
   way to read through the conversation. */
@media (max-width: 860px) {
    .aud9 .aud9-feed {
        max-height: 360px;
        min-height: 240px;
    }
}

/* #8d Booking Mode (explain-q variant) — uses the page's existing "night sky"
   #0c0c18 (shared with Live Sim and Compound), which reads as distinct from
   Seamless Setup (--pk-bg-base) above and Demo CTA (--pk-bg-deep) below. */
/* Was hardcoded #0c0c18 (inherited from aud7's night-sky palette).
   Booking-mode has no night-sky metaphor — just a settings card demo.
   Token'd to bg-deep for rhythm cohesion with the rest of the page. */
.vp-booking-mode {
    background: var(--pk-bg-deep);
}

/* The three "night sky" sections (aud7 / booking-mode / compound) scope their
   children to dark-mode tokens via [data-pk-theme="dark"] on the section.
   Setting `color` explicitly here ensures elements that inherit from `color`
   (like .exq-acc-head which uses `color: inherit`) pick up the dark-scoped
   --pk-fg value instead of inheriting light-mode color from <body>. */
.vp-aud7,
.vp-booking-mode,
.vp-compound,
.vp-aftercall {
    color: var(--pk-fg);
}
/* Flip the column order: copy on the left, settings card on the right. */
.vp-booking-mode .exq-layout > .exq-content { order: 1; }
.vp-booking-mode .exq-layout > .exq-card-wrap { order: 2; }

/* Booking Mode settings card — shared bk-mode-* primitives, scoped to
   this block (not declared anywhere else in shared CSS). */
.vp-booking-mode .bk-mode-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vp-booking-mode .bk-mode-row:last-child { border-bottom: none; }
.vp-booking-mode .bk-mode-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.vp-booking-mode .bk-mode-icon.cal  { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.vp-booking-mode .bk-mode-icon.link { background: rgba(139, 92, 246, 0.18); color: #a78bfa; }
.vp-booking-mode .bk-mode-icon.dim,
.vp-booking-mode .bk-mode-icon.cal.dim,
.vp-booking-mode .bk-mode-icon.link.dim { background: rgba(255, 255, 255, 0.04); color: var(--pk-fg-subtle); }
.vp-booking-mode .bk-mode-icon svg { width: 18px; height: 18px; }
.vp-booking-mode .bk-mode-icon.dim svg { stroke: var(--pk-fg-subtle); color: var(--pk-fg-subtle); }
.vp-booking-mode .bk-mode-body { flex: 1; min-width: 0; }
.vp-booking-mode .bk-mode-label { font-size: 14px; color: var(--pk-fg); font-weight: 600; }
.vp-booking-mode .bk-mode-label.dim { color: var(--pk-fg-subtle); }
.vp-booking-mode .bk-mode-dest { font-size: 12px; color: var(--pk-fg-muted); margin-top: 2px; }
.vp-booking-mode .bk-mode-dest.mono { font-family: var(--pk-font-mono, monospace); }
.vp-booking-mode .bk-mode-dest.dim { color: var(--pk-fg-subtle); }
.vp-booking-mode .bk-mode-status.active {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.12);
    color: var(--pk-success, #22c55e);
    flex-shrink: 0;
}
.vp-booking-mode .exq-card-body { padding: 0; }

/* ============================================================
   Interactive settings-card preview (#how-it-works + #booking-mode)
   Shared state machine driven by:
   - .vp-interactive-card[data-state="on"|"off"] on the card
   - .row-on on the currently-active row (exactly 0 or 1 row)
   JS: shared/js/vertical-page/index.js → wireInteractiveSettingsCards
   ============================================================ */
.vp-interactive-card { user-select: none; -webkit-user-select: none; }

/* Row cursor + hover highlight (both card variants). */
.vp-interactive-card .exq-forward-row,
.vp-interactive-card .bk-mode-row {
    cursor: pointer;
    transition: background 0.2s ease;
}
@media (hover: hover) {
    .vp-interactive-card .exq-forward-row:hover,
    .vp-interactive-card .bk-mode-row:hover {
        background: var(--pk-surface);
    }
}
/* Call Forwarding: card body has horizontal padding, so extend the row
   with negative margin + matching padding so the hover background (and
   the inter-row separator) reach the card edges. Booking Mode rows
   already span full width (its card body has padding: 0). */
.vp-interactive-card .exq-forward-row {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
}

/* Toggle track + knob animate with card state. */
.vp-interactive-card .exq-toggle {
    cursor: pointer;
    transition: background 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vp-interactive-card .exq-toggle-knob {
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vp-interactive-card[data-state="off"] .exq-toggle { background: var(--pk-fg-subtle); }
.vp-interactive-card[data-state="off"] .exq-toggle-knob { transform: translateX(0); }

/* Call Forwarding rows: dim when not active. */
.vp-interactive-card .exq-forward-row .exq-forward-icon,
.vp-interactive-card .exq-forward-row .exq-forward-icon svg,
.vp-interactive-card .exq-forward-row .exq-forward-label,
.vp-interactive-card .exq-forward-row .exq-forward-dest {
    transition: background 0.28s ease, color 0.28s ease, stroke 0.28s ease;
}
.vp-interactive-card .exq-forward-row:not(.row-on) .exq-forward-icon {
    background: var(--pk-surface);
}
.vp-interactive-card .exq-forward-row:not(.row-on) .exq-forward-icon svg {
    stroke: var(--pk-fg-subtle);
}
.vp-interactive-card .exq-forward-row:not(.row-on) .exq-forward-label,
.vp-interactive-card .exq-forward-row:not(.row-on) .exq-forward-dest {
    color: var(--pk-fg-subtle);
}

/* Booking Mode rows: dim when not active. Colored icon background (cal/link)
   drops to neutral; label and dest go subtle. */
.vp-interactive-card .bk-mode-row .bk-mode-icon,
.vp-interactive-card .bk-mode-row .bk-mode-icon svg,
.vp-interactive-card .bk-mode-row .bk-mode-label,
.vp-interactive-card .bk-mode-row .bk-mode-dest {
    transition: background 0.28s ease, color 0.28s ease, stroke 0.28s ease;
}
.vp-interactive-card .bk-mode-row:not(.row-on) .bk-mode-icon {
    background: rgba(255, 255, 255, 0.04);
    color: var(--pk-fg-subtle);
}
.vp-interactive-card .bk-mode-row:not(.row-on) .bk-mode-icon svg {
    stroke: var(--pk-fg-subtle);
    color: var(--pk-fg-subtle);
}
.vp-interactive-card .bk-mode-row:not(.row-on) .bk-mode-label,
.vp-interactive-card .bk-mode-row:not(.row-on) .bk-mode-dest {
    color: var(--pk-fg-subtle);
}

/* Status badge blooms in on the active row, hides on inactive rows. */
.vp-interactive-card .exq-forward-status,
.vp-interactive-card .bk-mode-status {
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 1.6, 0.3, 1);
    transform-origin: right center;
}
.vp-interactive-card .exq-forward-row:not(.row-on) .exq-forward-status,
.vp-interactive-card .bk-mode-row:not(.row-on) .bk-mode-status {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
}
.vp-interactive-card .exq-forward-row.row-on .exq-forward-status,
.vp-interactive-card .bk-mode-row.row-on .bk-mode-status {
    opacity: 1;
    transform: scale(1);
}

/* Footer follows card state — dims when card is off. */
.vp-interactive-card .exq-card-footer,
.vp-interactive-card .exq-card-footer svg {
    transition: background 0.28s ease, color 0.28s ease,
                border-color 0.28s ease, stroke 0.28s ease;
}
.vp-interactive-card[data-state="off"] .exq-card-footer {
    background: var(--pk-surface);
    border-top-color: var(--pk-border-muted);
    color: var(--pk-fg-subtle);
}
.vp-interactive-card[data-state="off"] .exq-card-footer svg {
    stroke: var(--pk-fg-subtle);
}

/* Nudge — tiny acknowledge animation when user clicks the already-active row. */
.vp-interactive-card .vp-card-nudge {
    animation: vp-card-nudge 0.35s cubic-bezier(0.2, 1.8, 0.3, 1);
}
@keyframes vp-card-nudge {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(3px); }
    70%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* Accessible focus ring on interactive parts. */
.vp-interactive-card .exq-toggle:focus-visible,
.vp-interactive-card .exq-forward-row:focus-visible,
.vp-interactive-card .bk-mode-row:focus-visible {
    outline: 2px solid var(--pk-accent, #10B981);
    outline-offset: 3px;
}

/* ============================================================
   Interactive switch panel (#full-control / control_toggles)
   Independent per-row toggles — unlike the either/or settings
   cards above, every row has its own on/off state. Default all-on.
   JS: shared/js/vertical-page/index.js → wireInteractiveSwitchPanels
   ============================================================ */
.vp-switch-panel { user-select: none; -webkit-user-select: none; }
.vp-switch-panel .hr-toggle-row {
    cursor: pointer;
}
/* Match the green "on" state used by the other interactive settings cards
   (.exq-toggle.active). The default .hr-toggle-switch.on uses --pk-accent,
   which is purple on dental — too close to the Scheduling row's icon color. */
.vp-switch-panel .hr-toggle-switch.on {
    background: var(--pk-success, #22c55e);
}
/* Dim state: when the row is off (.row-on absent), soften the icon
   background, icon stroke, and label colour. The switch itself already
   has an off-state via the absence of .hr-toggle-switch.on. */
.vp-switch-panel .hr-toggle-row .hr-toggle-icon,
.vp-switch-panel .hr-toggle-row .hr-toggle-icon svg,
.vp-switch-panel .hr-toggle-row .hr-toggle-label {
    transition: background 0.28s ease, color 0.28s ease, stroke 0.28s ease;
}
.vp-switch-panel .hr-toggle-row:not(.row-on) .hr-toggle-icon {
    background: rgba(255, 255, 255, 0.04);
}
.vp-switch-panel .hr-toggle-row:not(.row-on) .hr-toggle-icon svg {
    stroke: var(--pk-fg-subtle);
}
.vp-switch-panel .hr-toggle-row:not(.row-on) .hr-toggle-label {
    color: var(--pk-fg-subtle);
}
.vp-switch-panel .hr-toggle-row:focus-visible {
    outline: 2px solid var(--pk-accent, #10B981);
    outline-offset: 2px;
}

/* #9a Try the Demo (hero-k2) — gradient background + demo CTA */
.vp-hero-k2 { background: var(--pk-bg-deep); position: relative; overflow: hidden; padding-top: 72px; padding-bottom: 72px; min-height: auto; }
.vp-hero-k2 .hk-bg {
    background: radial-gradient(ellipse at 50% 80%, rgba(139, 92, 246, 0.15) 0%, rgba(217, 70, 239, 0.06) 40%, var(--pk-bg-deep) 80%);
}
/* .vp-hero-k2 .vp-kicker margin-bottom from .vp-t-kicker scale. */
.vp-hero-k2 h1 { font-size: clamp(36px, 5vw, 52px); }
.vp-hero-k2 .hk-play-btn {
    background: linear-gradient(135deg, #10B981, rgba(16,185,129,0.85));
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 20px rgba(16,185,129,0.30);
}
@media (hover: hover) {
    .vp-hero-k2 .hk-play-btn:hover {
        box-shadow: 0 6px 28px rgba(16,185,129,0.40);
    }
}
.vp-hero-k2 .hk-play-icon {
    background: rgba(255,255,255,0.2);
}
.vp-demo-hint {
    margin-top: 16px;
    font-size: 14px;
    color: var(--pk-fg-subtle);
}

/* #10c Compounding Intelligence — milestone cards */
/* Was hardcoded #0c0c18. The neural-net canvas animation is the star —
   a flat bg-deep lets the network pop without the navy shift. */
.vp-compound {
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
    background: var(--pk-bg-deep);
    position: relative;
    overflow: hidden;
}
.vp-compound-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.vp-compound-header {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
}
.vp-compound-title {
    color: var(--pk-fg);
    margin-bottom: 16px;
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}
.vp-compound-sub {
    /* font-size + line-height come from .vp-t-subhead scale (18/1.5). */
    color: var(--pk-fg-muted);
    max-width: 620px;
    margin: 0 auto;
}
.vp-compound-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}
.vp-compound-card {
    background: var(--pk-bg-elevated);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--pk-radius-lg, 12px);
    padding: 28px 24px;
    position: relative;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
    .vp-compound-card:hover {
        transform: translateY(-3px);
        border-color: var(--pk-border-hover);
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
}
.vp-compound-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, #10B981, rgba(16,185,129,0.2));
    border-radius: 1px;
}
.vp-compound-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    color: #10B981;
}
.vp-compound-icon svg {
    width: 100%;
    height: 100%;
}
.vp-compound-label {
    font-family: var(--pk-font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--pk-fg);
    margin-bottom: 8px;
}
.vp-compound-insight {
    font-size: 15px;
    color: var(--pk-fg-muted);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .vp-compound-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Explain-Q: on desktop .exq-accordion is position:absolute so it hangs
       below .exq-content without pushing the adjacent .exq-card-wrap column
       away. Once the grid collapses to a single column (<900px), the
       absolute accordion drops on top of the .exq-card-wrap sitting in the
       next row. Flow it inline so the stack becomes kicker → headline →
       sub → checklist → accordion → [grid gap] → settings card. Also kill
       the 260px bottom-padding that was reserving space for the floating
       desktop accordion. */
    .explain-q {
        padding-bottom: 64px;
    }
    .explain-q .exq-accordion {
        position: static;
        margin-top: 24px;
    }
}
@media (max-width: 540px) {
    .vp-compound-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        margin: 0 -20px;
        padding: 0 20px;
        scrollbar-width: none;
    }
    .vp-compound-grid::-webkit-scrollbar { display: none; }
    .vp-compound-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* #10d Voice Persona Block */
.vp-persona {
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
    background: var(--pk-bg-base, #111113);
}
.vp-persona-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}
.vp-persona-copy {
    padding-top: 16px;
}
.vp-persona-title {
    color: var(--pk-fg);
    margin-bottom: 12px;
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}
.vp-persona-sub {
    font-size: 16px;
    color: var(--pk-fg-muted);
    max-width: 560px;
    line-height: 1.65;
    margin-top: 12px;
}
.vp-persona-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.vp-persona-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vp-persona-more {
    grid-column: 1 / -1;
}
.vp-persona-card {
    background: var(--pk-bg-elevated, #18181b);
    border: 1px solid var(--pk-border-muted, rgba(255,255,255,0.06));
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.25s;
}
@media (hover: hover) {
    .vp-persona-card:hover {
        border-color: var(--card-accent, var(--pk-accent));
        background: rgba(255,255,255,0.02);
    }
}
.vp-persona-card .vp-persona-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
}
.vp-persona-info {
    flex: 1;
    min-width: 0;
}
.vp-persona-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--pk-fg);
}
.vp-persona-card .vp-persona-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--card-accent, var(--pk-accent));
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--card-accent, var(--pk-accent));
    flex-shrink: 0;
}
@media (hover: hover) {
    .vp-persona-card .vp-persona-play:hover {
        background: var(--card-accent, var(--pk-accent));
        color: #fff;
        transform: scale(1.08);
    }
}
.vp-persona-card .vp-persona-play[data-playing="true"] {
    background: var(--card-accent, var(--pk-accent));
    color: #fff;
}
.vp-persona-play svg { width: 12px; height: 12px; }
.vp-persona-play .dp-pause { display: none; }
.vp-persona-play[data-playing="true"] .dp-icon { display: none; }
.vp-persona-play[data-playing="true"] .dp-pause { display: block; }
.vp-persona-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 80px;
    height: 20px;
    flex-shrink: 0;
}
.vp-persona-wave .bar {
    flex: 1;
    background: var(--pk-border, rgba(255,255,255,0.06));
    border-radius: 2px;
    transition: background 0.15s;
    min-width: 2px;
}
.vp-persona-wave .bar.active {
    background: var(--card-accent, var(--pk-accent));
}
.vp-persona-dur {
    /* font-family (mono) + font-size (10) + tabular-nums
       from .vp-t-mono-meta-xs in vertical-typography.css. */
    color: var(--pk-fg-muted);
    flex-shrink: 0;
    width: 28px;
    text-align: right;
}
.vp-persona-more {
    border: 1.5px dashed rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vp-persona-more-count {
    font-size: 14px;
    font-weight: 800;
    color: rgba(255,255,255,0.15);
}
.vp-persona-more-label {
    font-size: 12px;
    color: var(--pk-fg-muted);
    opacity: 0.6;
}

@media (max-width: 768px) {
    .vp-persona-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .vp-persona-copy {
        position: static;
        padding-top: 0;
        order: -1;
    }
}

/* #10b Control Panel (hero-r) — match vertical-page section typography */
.vp-hero-r {
    background: var(--pk-bg-base);
}
.vp-hero-r h1 {
    font-size: clamp(36px, 5vw, 52px);
}

/* #9b Customer Journey (proof-e).
   Typography from .vp-t-kicker (13/sans/600/uppercase/0.08em)
   overrides the blocks-proof.css default of 12/mono/0.08em. */
.vp-proof-e .pre-event-day {
    color: rgb(245, 158, 11);
}

/* Journey headline: cap at 48px so each .vp-line phrase fits on a
   single line at desktop. At the shared 52px h2 size, line 1
   ("Every practice says the same thing after a week.") needs ~1240px
   but the 1100px content area wraps it, producing 3 lines instead of
   the intended 2. */
.vp-proof-e .pre-title {
    font-size: clamp(var(--vp-h2-size-min), 4vw, 48px);
}

/* #8b Live Call Simulation (aud7) — night sky bg with starfield */
/* Intentional raw hex: the starfield + moon SVGs make this a literal
   night sky, so the subtle navy cast earns its shift from bg-deep.
   This is the ONE section on the page that uses #0c0c18 — booking-mode
   and compound used to share it but have been tokenized back to deep. */
.vp-aud7 {
    position: relative;
    background: #0c0c18;
    overflow: hidden;
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
}
.vp-aud7 .aud7-title {
    line-height: 1.1;
}

/* aud7 answer button — styled as purple "play button" in vp-aud7 (matches aud9-play) */
.vp-aud7 .aud7-answer {
    animation: none;
    box-shadow: none;
    background: var(--pk-accent);
}
@media (hover: hover) {
    .vp-aud7 .aud7-answer:hover {
        background: var(--pk-accent);
    }
}
.vp-aud7 .aud7-answer.answered {
    pointer-events: auto;
    opacity: 1;
    background: var(--pk-accent);
}
.vp-aud7 .aud7-answer.ended {
    pointer-events: none;
    opacity: 0.5;
    background: #6B7280;
}

/* icon toggling: phone → pause → play */
.aud7-ico-pause, .aud7-ico-play { display: none; }
.aud7-answer.answered .aud7-ico-phone { display: none; }
.aud7-answer.answered .aud7-ico-pause { display: block; }
.aud7-answer.answered.paused .aud7-ico-pause { display: none; }
.aud7-answer.answered.paused .aud7-ico-play { display: block; }
.aud7-answer.ended .aud7-ico-pause,
.aud7-answer.ended .aud7-ico-play { display: none; }
.aud7-answer.ended .aud7-ico-phone { display: block; }

/* vp-aud7: swap phone icon for play triangle (matches aud9-play) */
.vp-aud7 .aud7-ico-phone { display: none; }
.vp-aud7 .aud7-ico-play { display: block; }
.vp-aud7 .aud7-answer.answered .aud7-ico-play { display: none; }
.vp-aud7 .aud7-answer.answered .aud7-ico-pause { display: block; }
.vp-aud7 .aud7-answer.answered.paused .aud7-ico-pause { display: none; }
.vp-aud7 .aud7-answer.answered.paused .aud7-ico-play { display: block; }
.vp-aud7 .aud7-answer.ended .aud7-ico-phone { display: none; }
.vp-aud7 .aud7-answer.ended .aud7-ico-play { display: block; }
.vp-aud7 .aud7-answer.ended .aud7-ico-pause { display: none; }
.aud7-answer-beam {
    border-radius: 50%;
}
.aud7-answer-beam .beam-border-ray {
    border-radius: 50%;
    background-image: conic-gradient(
        from 0deg at 50% 50%,
        rgba(147, 51, 234, 0) 20%,
        rgba(16, 185, 129, 0.15) 28%,
        rgba(16, 185, 129, 0.4) 36%,
        var(--success-bright, #34d399) 44%,
        rgba(16, 185, 129, 0) 52%,
        rgba(147, 51, 234, 0) 68%,
        rgba(147, 51, 234, 0.15) 76%,
        rgba(147, 51, 234, 0.5) 86%,
        var(--accent-bright, #A855F7) 94%,
        rgba(147, 51, 234, 0) 100%
    );
}
.aud7-answer-beam .beam-border-track {
    border-radius: 50%;
    padding: 5px;
    background: #0a0a0c;
}
.vp-aud7-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.vp-star {
    animation: aud7Twinkle 3.5s ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
    opacity: 0;
}
@keyframes aud7Twinkle {
    0% { opacity: 0; }
    50% { opacity: var(--o, 0.25); }
    100% { opacity: 0; }
}

/* Waxing crescent moon — top-right of the aud7 night sky. Paired
   with renderMoon() in shared/js/vertical-page/index.js. */
.vp-aud7-moon {
    position: absolute;
    top: 72px;
    right: 72px;
    width: 84px;
    height: 84px;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 18px rgba(255, 236, 200, 0.35));
}

/* #7 Listen — aud1 header is already normalized via blocks-audio.css */

/* #8 Before/After — tighten title line-height */
.aud3-title {
    line-height: 1.1;
}

/* #10 Comparison — weight 800, tighten line-height, add kicker spacing */
.vp-comparison-title {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}

/* .vp-comparison-kicker margin-bottom from .vp-t-kicker scale. */

/* #10b Seamless Setup — remove uppercase from headline */
.explain-q .exq-headline {
    text-transform: none;
}

/* #11 FAQ — weight 800, tighten line-height */
.fqd-title {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* #12 Case Study — size was 34px, way too small; normalize */
.proof-k h2 {
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}

/* #2b CTA-K — gradient poster background (matches hero-k2) */
.vp-ctk {
    position: relative;
    overflow: hidden;
}

.vp-ctk::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 80%, rgba(139, 92, 246, 0.15) 0%, rgba(217, 70, 239, 0.06) 40%, var(--pk-bg-deep) 80%);
    pointer-events: none;
}

.vp-ctk::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    pointer-events: none;
}

.vp-ctk .ctk-inner {
    position: relative;
    z-index: 1;
}

/* #2b CTA-K — normalize to vertical-page typography */
.vp-ctk h2 {
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}

/* #13 Pricing — weight 800, tighten line-height */
.cta-b .cb-left h2 {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* ============================================================
   BUTTON NORMALIZATION
   Primary:  15px / 600 / 14px 32px / 10px radius / solid accent
   Compact:  14px / 600 / 10px 24px / 10px radius (nav only)
   ============================================================ */

/* Nav CTA — match radius to primary */
.nav-a .nva-cta {
    border-radius: 10px;
}

/* Nav links — collapse weight 500 → 600 (blocks-nav default is 500;
   the page has no other 500 uses post-cohesion, so this is the last
   orphan to absorb for a single-weight-ladder page.) */
.nav-a .nva-links a {
    font-weight: 600;
}

/* #4 Poster play — normalize from gradient/oversized to standard primary */
.hero-k2 .hk-play-btn {
    background: var(--pk-accent);
    padding: 14px 32px;
    border-radius: 10px;
    font-size: 15px;
}

@media (hover: hover) {
    .hero-k2 .hk-play-btn:hover {
        background: var(--pk-accent-hover);
    }
}

/* #13 Pricing CTA — normalize from 16px/18px/12px to standard */
.cta-b .cb-cta-btn {
    font-size: 15px;
    padding: 14px 32px;
    border-radius: 10px;
}

/* ============================================================
   WIDTH NORMALIZATION
   Tier 1 — 1100px: full-width layouts (grids, split panels)
   Tier 2 — 800px:  centered content (headlines, card stacks)
   Tier 3 — 600px:  narrow subtitles
   ============================================================ */

/* Tier 1 → 1100px */
.aud9 .aud9-layout    { max-width: 1100px; margin-left: auto; margin-right: auto; }
.explain-d .ed-grid   { max-width: 1100px; margin-left: auto; margin-right: auto; }
.aud10 .aud10-demos .ed-grid { max-width: 1100px; margin-left: auto; margin-right: auto; }
.cta-b .cb-inner      { max-width: 1100px; }

/* Tier 2 → 800px */
.hero-k2 .hk-content         { max-width: 800px; }
.aud3 .aud3-split             { max-width: 800px; margin-left: auto; margin-right: auto; }
.hero-o h1                    { max-width: 1100px; }
.aud10 .aud10-content         { max-width: 800px; }
.faq-d .fqd-list              { max-width: 800px; margin-left: auto; margin-right: auto; }
.proof-k .vp-case-body    { max-width: 800px; }
.proof-k .prk-header          { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Tier 3 → 600px */
.vp-faq-sub     { max-width: 600px; margin-left: auto; margin-right: auto; }
.proof-k .prk-sub   { max-width: 600px; margin-left: auto; margin-right: auto; }

/* ============================================================
   PRICING CARDS
   ============================================================ */
.vp-pricing {
    background: var(--pk-bg-base);
    text-align: center;
}

.vp-pricing-header {
    margin-bottom: 16px;
}

.vp-pricing-header h2 {
    color: var(--pk-fg);
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale.
       margin-top removed — kicker above sets gap via .vp-t-kicker. */
}

.vp-pricing-allincl {
    font-size: 16px;
    color: var(--pk-fg-muted);
    margin-bottom: 40px;
}
/* Shared features block — hidden on desktop where per-card feature lists
   are visible. On mobile (<=640px) per-card lists hide and this shows. */
.vp-plan-shared-features {
    display: none;
}

.vp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.vp-plan-card {
    position: relative;
    background: var(--pk-bg-elevated, #111113);
    border: 1px solid var(--pk-border-muted);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, border-color 0.2s;
}

@media (hover: hover) {
    .vp-plan-card:hover {
        transform: translateY(-3px);
        border-color: var(--pk-border-hover);
    }
}

.vp-plan-featured {
    border-color: var(--pk-accent, #7c3aed);
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.15), 0 0 80px rgba(124, 58, 237, 0.06);
}

@media (hover: hover) {
    .vp-plan-featured:hover {
        border-color: var(--pk-accent, #7c3aed);
    }
}

.vp-plan-badge {
    /* Typography from .vp-t-kicker-sm (11/700/uppercase/0.08em).
       Previously missing uppercase; content is already "MOST POPULAR"
       so idempotent. */
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pk-accent, #7c3aed);
    color: #fff;
    padding: 5px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.vp-plan-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--pk-fg);
    line-height: 1.2;
}

.vp-plan-calls {
    font-size: 13px;
    color: var(--pk-fg-muted);
    margin-top: 4px;
}

.vp-plan-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 24px 0;
    font-size: 56px;
    font-weight: 800;
    color: var(--pk-fg);
    letter-spacing: -0.03em;
    line-height: 1;
}

.vp-plan-dollar {
    font-size: 22px;
    font-weight: 600;
    color: var(--pk-fg-muted);
    align-self: flex-start;
    margin-top: 8px;
}

.vp-plan-period {
    /* Weight collapsed 500 → 400. The period label is body-weight
       inline metadata ("/mo"), not emphasized — 400 matches other
       muted metadata on the page. */
    font-size: 15px;
    font-weight: 400;
    color: var(--pk-fg-muted);
    margin-left: 4px;
}

.vp-plan-overage {
    font-size: 13px;
    font-weight: 400;
    color: var(--pk-fg-muted);
    margin-top: -16px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--pk-border, rgba(255,255,255,.08));
}

.vp-plan-overage-price {
    color: var(--pk-green, #4ade80);
    font-weight: 500;
}

.vp-plan-cta {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    /* Explicit white-alpha border so the outline reads clearly against the
       lighter card bg (~rgb(26,26,30)), matching the pronounced look of the
       "Book a Call" ghost CTA in the nav. */
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: var(--pk-fg);
    font-family: var(--pk-font-sans);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 24px;
}

@media (hover: hover) {
    .vp-plan-cta:hover {
        border-color: rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.06);
    }
}

.vp-plan-cta-primary {
    background: var(--pk-accent, #7c3aed);
    border-color: var(--pk-accent, #7c3aed);
    color: #fff;
}

@media (hover: hover) {
    .vp-plan-cta-primary:hover {
        background: var(--pk-accent-hover, #6D28D9);
        border-color: var(--pk-accent-hover, #6D28D9);
    }
}

.vp-plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vp-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--pk-fg);
    line-height: 1.4;
}

.vp-plan-features li::before {
    content: '✓';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pk-success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--pk-success);
    font-weight: 700;
}

.vp-pricing-link {
    /* Weight collapsed 500 → 600 to match other body-sized CTA links
       on the page and eliminate the orphan 500 weight. */
    display: inline-block;
    margin-top: 40px;
    font-size: 14px;
    color: var(--pk-accent, #7c3aed);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

@media (hover: hover) {
    .vp-pricing-link:hover {
        color: var(--pk-accent-hover, #6D28D9);
    }
}

/* ============================================================
   BEYOND-SCALE BANNER — "Need more than 600 calls?" under grid
   ============================================================ */
.vp-beyond-banner {
    max-width: 1100px;
    margin: 24px auto 0;
    padding: 18px 24px;
    border-radius: 12px;
    background: var(--pk-bg-elevated, #111113);
    border: 1px solid var(--pk-border-muted);
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.vp-beyond-banner-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.14);
    color: var(--pk-accent, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vp-beyond-banner-text {
    flex: 1;
    font-size: 14px;
    color: var(--pk-fg);
    line-height: 1.5;
}

.vp-beyond-banner-text strong {
    font-weight: 600;
}

.vp-beyond-banner-muted {
    color: var(--pk-fg-muted);
}

.vp-beyond-banner-cta {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-accent, #7c3aed);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
}

@media (hover: hover) {
    .vp-beyond-banner-cta:hover {
        color: var(--pk-accent-hover, #6D28D9);
        text-decoration: underline;
    }
}

/* ============================================================
   COMPLIANCE CALLOUT — small trust block (e.g. HIPAA)
   ============================================================ */
.vp-pricing + .vp-compliance {
    margin-top: -70px;
}
.vp-compliance {
    padding: 40px 48px;
    background: var(--pk-bg-base);
    display: flex;
    justify-content: center;
}

.vp-compliance-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 760px;
    width: 100%;
    padding: 20px 24px;
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 14px;
    background: linear-gradient(
        180deg,
        rgba(16, 185, 129, 0.08) 0%,
        rgba(16, 185, 129, 0.03) 100%
    );
}

.vp-compliance-badge {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vp-compliance-badge svg {
    width: 22px;
    height: 22px;
}

.vp-compliance-body {
    flex: 1;
    min-width: 0;
}

.vp-compliance-title {
    /* Leading snapped 1.3 → 1.5 to match body-prose leading and
       match .vp-compliance-sub below (already 1.5). */
    font-size: 16px;
    font-weight: 600;
    color: var(--pk-fg);
    line-height: 1.5;
}

.vp-compliance-sub {
    margin-top: 4px;
    font-size: 14px;
    color: var(--pk-fg-muted);
    line-height: 1.5;
}

.vp-compliance-points {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.vp-compliance-point {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pk-fg-muted);
}

.vp-compliance-check {
    display: inline-flex;
    color: #34d399;
}

.vp-compliance-check svg {
    width: 14px;
    height: 14px;
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 1024px) {
    .vp-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vp-call-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vp-comparison-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Origin Story — pull-quote style (vp-os- prefix)
   ============================================================ */
.vp-origin-story {
    padding: 100px max(48px, calc((100vw - 1100px) / 2));
    background: var(--pk-bg-deep);
    position: relative;
}

.vp-os-inner {
    max-width: 900px;
    margin: 0 auto;
}

.vp-os-kicker {
    text-align: center;
}

.vp-os-flow {
    max-width: 900px;
}

.vp-os-beat {
    margin-bottom: 48px;
}

.vp-os-beat:last-of-type {
    margin-bottom: 0;
}

.vp-os-quote {
    font-family: var(--pk-font-sans);
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--pk-fg);
    margin-bottom: 16px;
}

.vp-os-context {
    font-size: 16px;
    line-height: 1.65;
    color: var(--pk-fg-muted);
    max-width: 700px;
    padding-left: 24px;
    border-left: 2px solid rgba(255,255,255,0.08);
}

.vp-os-divider {
    width: 48px;
    height: 2px;
    background: rgba(255,255,255,0.08);
    margin: 36px 0;
}

.vp-os-cta {
    text-align: center;
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.vp-os-cta-line {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--pk-fg);
    margin-bottom: 8px;
}

.vp-os-cta-sub {
    font-size: 16px;
    color: var(--pk-fg-muted);
}

.vp-os-btn {
    margin-top: 28px;
}

.vp-os-cta-note {
    font-size: 12px;
    color: var(--pk-fg-muted);
    margin-top: 10px;
}

/* Light-theme adjustments */
[data-pk-theme="light"] .vp-os-context {
    border-left-color: rgba(0,0,0,0.1);
}
[data-pk-theme="light"] .vp-os-divider {
    background: rgba(0,0,0,0.08);
}
[data-pk-theme="light"] .vp-os-cta {
    border-top-color: rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .vp-origin-story {
        padding: 80px 24px;
    }
    .vp-os-beat {
        margin-bottom: 48px;
    }
    .vp-os-divider {
        margin: 36px 0;
    }
    .vp-os-cta {
        margin-top: 48px;
        padding-top: 36px;
    }
}

@media (max-width: 640px) {
    .hero-o, .proof-p, .hero-k2, .explain-d, .explain-q, .aud10, .aud9, .faq-d, .cta-b, .vp-ctk, .vp-proof-e, .vp-pricing, .vp-hero-k2, .vp-spam, .vp-roi, .vp-hero-r, .vp-compound, .vp-persona, .vp-origin-story {
        padding: 64px 20px;
    }
    .vp-pricing + .vp-compliance {
        margin-top: -48px;
    }
    .vp-compliance {
        padding: 32px 20px;
    }
    .vp-compliance-card {
        padding: 16px 18px;
        gap: 14px;
    }
    /* Pricing — horizontal scroll of compact tier cards.
       Per-card features hidden (identical across tiers); a shared
       "Every plan includes" block shows below instead. */
    .vp-pricing-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        max-width: none;
        padding-bottom: 8px;
        /* Room for the "MOST POPULAR" badge that sits at top:-13px
           above the featured card's border. */
        padding-top: 16px;
        /* Extend scrollable area into section padding so first/last
           cards sit flush with the content edge. */
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        scrollbar-width: none;
    }
    .vp-pricing-grid::-webkit-scrollbar { display: none; }
    .vp-plan-card {
        flex: 0 0 240px;
        scroll-snap-align: start;
        padding: 24px 20px;
    }
    .vp-plan-card .vp-plan-features {
        display: none;
    }
    .vp-plan-card .vp-plan-cta {
        margin-bottom: 0;
    }
    .vp-plan-price {
        font-size: 44px;
        margin: 16px 0;
    }
    .vp-plan-dollar {
        font-size: 18px;
        margin-top: 6px;
    }
    .vp-plan-period {
        font-size: 13px;
    }
    .vp-plan-overage {
        margin-top: -10px;
        margin-bottom: 16px;
    }
    .vp-plan-shared-features {
        display: block;
        margin-top: 16px;
        margin-bottom: 32px;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        text-align: left;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .vp-plan-shared-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--pk-fg-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 16px;
    }
    .vp-beyond-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
    }
    .vp-aud7 {
        padding: 64px 20px;
    }
    .vp-aud7-moon {
        top: 36px;
        right: 24px;
        width: 60px;
        height: 60px;
    }
    .vp-aud1 {
        padding: 64px 20px;
    }
    .vp-call-grid {
        grid-template-columns: 1fr;
    }
    .vp-aud1-single {
        padding: 20px;
    }
    /* On mobile the audio card lives inside the bottom sheet only. The JS
       teleports #vpListenCard between .vp-aud1 and .sp-sheet-body on
       open/close. Hide the in-flow slot so the 6-card grid isn't pushed
       off-screen by the 380px transcript panel. The .sp-sheet-body
       specificity-override rule above keeps it visible inside the sheet. */
    .vp-aud1 > .vp-aud1-single {
        display: none;
    }
    .vp-comparison {
        padding: 64px 20px;
    }
    .vp-final-cta .cta-j,
    .vp-final-cta .cta-g {
        padding-left: 20px;
        padding-right: 20px;
    }
    .vp-hero-ctas {
        flex-direction: column;
        gap: 12px;
    }
    .vp-btn-primary, .vp-btn-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .vp-proof-strip {
        flex-wrap: wrap;
        gap: 8px;
    }
    .vp-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .vp-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .vp-trust-strip {
        flex-wrap: wrap;
        padding: 16px 20px;
        gap: 8px;
    }
    .ctg-inner {
        grid-template-columns: 1fr;
    }
    .vp-comparison-table {
        font-size: 12px;
    }
    .vp-calculator-controls {
        grid-template-columns: 1fr;
    }
    .vp-comparison-table th,
    .vp-comparison-table td {
        padding: 8px 10px;
    }

    /* Hero padding adjustments for fixed nav */
    .hero-o {
        padding-top: 100px;
    }
}

/* ============================================================
   Hero — mobile pattern (≤768px)
   Left-aligned kicker / headline / subhead / checklist, with
   full-width stacked CTAs of matching size. Desktop layout is
   unchanged — these rules only activate on tablet/phone widths.
   Placed after the 640px block so column-stack CTA rules apply
   at all mobile sizes consistently.
   ============================================================ */
@media (max-width: 768px) {
    .hero-o {
        text-align: left;
    }
    .hero-o .ha-kicker,
    .hero-o h1,
    .hero-o .ho-sub {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }
    .vp-hero-points {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        align-items: flex-start;
    }
    .vp-hero-ctas {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        margin-top: 32px;
    }
    .vp-hero-ctas > .vp-hero-primary-wrap {
        flex: 0 0 auto;
        min-width: 0;
    }
    .vp-hero-ctas > .vp-beam-cta {
        flex: 1 1 0;
        min-width: 0;
    }
    .vp-hero-ctas .vp-btn-primary,
    .vp-hero-ctas .vp-btn-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 14px 12px;
        font-size: 13px;
    }
    .vp-hero-ctas .vp-btn-secondary {
        white-space: nowrap;
    }
    .vp-hero-ctas .vp-beam-cta {
        display: flex;
    }
    .vp-hero-ctas .vp-beam-cta .beam-border-track {
        width: 100%;
    }

    /* ─── Universal kicker / headline / description left-align (mobile) ───
       Every section that renders the intro triplet uses one of the
       wrapper classes below. On mobile we left-anchor the whole block so
       the pattern reads like a paragraph instead of a centered stanza.
       Direct-child scope keeps structural divs (players, grids,
       accordions, checklists) untouched.

       A few wrappers get ancestor-qualified selectors (.proof-e, .faq-d,
       .aud9) to beat block-CSS defaults that set text-align:center at
       higher specificity. */
    .vp-graveyard-header,
    .aud1-header,
    .vp-comparison-header,
    .vp-spam-header,
    .aud7-header,
    .proof-e .pre-header,
    .vp-compound-header,
    .faq-d .fqd-header,
    .vp-pricing-header,
    .aud9[data-state] .aud9-left,
    .ctk-content,
    .exq-content,
    .hr-content,
    .vp-persona-copy {
        text-align: left;
    }
    /* vp-pricing's description is a sibling of .vp-pricing-header, not a
       child. Left-align it directly so the pricing intro triplet reads as
       one left-anchored block. */
    .vp-pricing-allincl {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }
    :is(
        .vp-graveyard-header, .aud1-header, .vp-comparison-header,
        .vp-spam-header, .aud7-header, .proof-e .pre-header,
        .vp-compound-header, .faq-d .fqd-header, .vp-pricing-header,
        .aud9[data-state] .aud9-left, .ctk-content, .exq-content, .hr-content,
        .vp-persona-copy
    ) > :is(h1, h2, h3, p, .vp-kicker, .ctk-label, .hr-kicker,
            .exq-kicker, .exq-headline, .exq-desc) {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }
    /* Footer — 3-column link row under the full-width brand block
       instead of everything stacking into a single column. */
    .footer-a .fta-inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding: 48px 24px 24px;
    }
    .footer-a .fta-inner > :first-child {
        grid-column: 1 / -1;
    }
}


/* ════════════════════════════════════════════════════════════════
 * BOOK-A-CALL MODAL (.bkm-*)
 * Reuses .aud9-kicker / .aud9-title / .vp-hero-points from
 * blocks-audio.css so it visually slots into the landing page.
 * Opened via window.VerticalPage.openBookCall() or any element
 * with data-vp-open-book-call.
 * ════════════════════════════════════════════════════════════════ */
.bkm-overlay {
    position: fixed; inset: 0;
    background: rgba(2, 2, 4, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    z-index: 2000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.bkm-overlay[data-open="true"] {
    opacity: 1; pointer-events: auto;
}

.bkm {
    position: relative;
    width: 100%;
    max-width: 580px;
    max-height: calc(100vh - 48px);
    background: var(--pk-bg-elevated, #111113);
    border: 1px solid var(--pk-border-muted, rgba(255,255,255,0.08));
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.55);
    overflow: hidden;
    transform: translateY(12px) scale(0.985);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.24s ease;
    display: flex; flex-direction: column;
}
.bkm-overlay[data-open="true"] .bkm {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.bkm-close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--pk-border-muted, rgba(255,255,255,0.08));
    border-radius: 10px;
    color: var(--pk-fg);
    cursor: pointer; z-index: 4;
    transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
    .bkm-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
}
.bkm-close svg { width: 16px; height: 16px; }

/* Header pane: flat bg matching the modal, reuses .aud9-kicker + .aud9-title */
.bkm-head {
    padding: 36px 36px 24px;
    border-bottom: 1px solid var(--pk-border-muted, rgba(255,255,255,0.08));
}
/* Override .aud9-kicker default violet so eyebrow reads as the landing page's amber */
.bkm-head .aud9-kicker {
    color: rgb(245, 158, 11);
    margin-bottom: 14px;
}
.bkm-head .aud9-kicker .aud9-kicker-dot {
    background: rgb(239, 68, 68);
}
/* Modal-scale headline: use same weights/tracking as .aud9-title, scaled down */
.bkm-head .aud9-title {
    /* Leading snapped 1.15 → 1.2 so 26px modal headline lands on
       --pk-leading-tight and we don't carry an orphan 1.15 value.
       The 1.1 display scale is reserved for the 52px section H2s;
       1.2 reads tighter-but-not-cramped at 26px. */
    font-family: var(--pk-font-sans);
    font-size: 26px;
    font-weight: 800;
    color: var(--pk-fg);
    letter-spacing: -0.022em;
    line-height: 1.2;
    margin: 0 0 14px;
}
.bkm-head .aud9-title em {
    font-style: normal;
    background: linear-gradient(135deg, #10B981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bkm-head .vp-hero-points {
    margin: 0;
    width: 100%;
    align-items: flex-start;
}
.bkm-head .vp-hero-points li { font-size: 14px; }

.bkm-body {
    padding: 28px 36px 32px;
    overflow-y: auto;
}
.bkm-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bkm-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.bkm-field { display: flex; flex-direction: column; gap: 8px; }
.bkm-field label {
    font-size: 12px; font-weight: 600; color: var(--pk-fg);
    letter-spacing: -0.005em;
}
.bkm-field input,
.bkm-field select {
    width: 100%;
    padding: 12px 14px;
    background-color: rgba(255,255,255,0.03);
    border: 1px solid var(--pk-border-muted, rgba(255,255,255,0.1));
    border-radius: 10px;
    color: var(--pk-fg);
    font: inherit; font-size: 14px;
    /* Only transition background-COLOR, not shorthand — otherwise the
       select chevron's background-position animates left→right on close. */
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.bkm-field input:focus,
.bkm-field select:focus {
    outline: none;
    border-color: rgba(124,58,237,0.55);
    background-color: rgba(124,58,237,0.04);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
.bkm-field select {
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}
.bkm-field select option { background: #1a1a1f; color: #fff; }
/* Light-mode chevron: the default uses white stroke which is invisible
   against the light modal body. Swap to a dark stroke at matching opacity. */
[data-pk-theme="light"] .bkm-field select {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(15,23,42,0.55)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-pk-theme="light"] .bkm-field select option { background: #fff; color: var(--pk-fg); }

.bkm-field:has(> input[required], > select[required], > .bkm-cell-wrap > input[required]) > label::after {
    content: "*";
    color: #ef4444;
    margin-left: 3px;
    font-weight: 700;
}

/* URL / phone cell prefix icons — mirrors admin cell conventions */
.bkm-cell-wrap { position: relative; }
.bkm-cell-wrap input { padding-left: 38px; }
.bkm-cell-wrap .bkm-cell-icon {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--pk-fg-muted);
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
}
.bkm-cell-wrap .bkm-cell-icon svg { width: 16px; height: 16px; }
.bkm-cell-wrap input:focus ~ .bkm-cell-icon {
    color: var(--pk-accent, #7c3aed);
}

.bkm-divider {
    height: 1px;
    border: 0;
    margin: 8px 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%);
}

.bkm-submit {
    margin-top: 8px;
    padding: 14px 20px;
    background: var(--pk-accent, #7c3aed);
    color: var(--pk-accent-fg, #fff);
    border: none;
    border-radius: 12px;
    font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
@media (hover: hover) {
    .bkm-submit:hover:not(:disabled) {
        background: var(--pk-accent-hover, #6D28D9);
        transform: translateY(-1px);
    }
}
.bkm-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.bkm-submit svg { width: 16px; height: 16px; }

/* Error banner inside the modal */
.bkm-error {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    font-size: 13px;
    display: none;
}
.bkm-error[data-show="true"] { display: block; }

/* ── Steps ── */
.bkm-step { display: flex; flex-direction: column; gap: 20px; }
.bkm-step[hidden] { display: none; }
.bkm-step-title {
    font-family: var(--pk-font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--pk-fg);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}
.bkm-step-title em {
    font-style: normal;
    background: linear-gradient(135deg, #10B981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Industry grid ── */
/* Recessed "well" background so the elevated tiles pop forward instead of
   blending into the modal surface (both share --pk-bg-elevated). */
.bkm-ind-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
}
.bkm-ind-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background: var(--pk-bg-elevated, #18181b);
    border: 1px solid var(--pk-border-muted, rgba(255,255,255,0.06));
    border-radius: 12px;
    color: var(--pk-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}
@media (hover: hover) {
    .bkm-ind-tile:hover {
        border-color: rgba(255,255,255,0.16);
        background: rgba(255,255,255,0.02);
    }
}
.bkm-ind-tile.is-selected {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.06);
    color: #34d399;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22);
}
.bkm-ind-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pk-fg-muted);
    transition: color 0.2s;
}
.bkm-ind-icon svg { width: 20px; height: 20px; }
@media (hover: hover) {
    .bkm-ind-tile:hover .bkm-ind-icon { color: var(--pk-fg); }
}
.bkm-ind-tile.is-selected .bkm-ind-icon { color: #34d399; }
.bkm-ind-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bkm-ind-tile-wide {
    grid-column: 1 / -1;
    justify-content: center;
    text-align: center;
}

/* ── Industry stages ── */
.bkm-ind-stage { display: flex; flex-direction: column; gap: 12px; }
.bkm-ind-stage[hidden] { display: none; }
.bkm-ind-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-left: -8px;
    align-self: flex-start;
    background: transparent;
    border: 0;
    color: var(--pk-fg-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.bkm-ind-back svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (hover: hover) {
    .bkm-ind-back:hover {
        color: var(--pk-fg);
        background: rgba(255,255,255,0.04);
    }
}
.bkm-ind-subs { display: contents; }
.bkm-ind-subgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
}
.bkm-ind-subgrid[hidden] { display: none; }
.bkm-ind-subtile {
    padding: 13px 14px;
    background: var(--pk-bg-elevated, #18181b);
    border: 1px solid var(--pk-border-muted, rgba(255,255,255,0.06));
    border-radius: 12px;
    color: var(--pk-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}
@media (hover: hover) {
    .bkm-ind-subtile:hover {
        border-color: rgba(255,255,255,0.16);
        background: rgba(255,255,255,0.02);
    }
}
.bkm-ind-subtile.is-selected {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.06);
    color: #34d399;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22);
}
.bkm-ind-subtile[data-sub="other"] {
    grid-column: 1 / -1;
    text-align: center;
}

/* ── Inline field error ── */
.bkm-field-error {
    font-size: 12px;
    color: #ef4444;
    margin-top: -4px;
}

/* Action group wrapping ghost + primary CTAs so they stay adjacent instead
   of being spread out by the parent's justify-content: space-between. */
.nav-a .nva-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* "Call Us: (949) ..." tel link — lives beside the ghost "Book a Call" button.
   Styled as a quiet text link so the two CTAs (Book a Call, Try for Free) still
   carry the primary visual weight. Weight 600 matches `.nav-a .nva-links a` to
   preserve the page's single-weight ladder (see rule above at line ~3059).
   Hidden on mobile where space is tight and the native dialer is one tap away
   from the primary CTA. */
.nav-a .nva-phone {
    color: var(--pk-fg, #fff);
    text-decoration: none;
    font-size: var(--pk-text-sm);
    font-weight: var(--pk-weight-semibold);
    white-space: nowrap;
    padding: 8px 4px;
    transition: color var(--pk-duration-fast) var(--pk-ease-out);
    border-radius: var(--pk-radius-sm);
}
@media (hover: hover) {
    .nav-a .nva-phone:hover {
        color: var(--pk-accent, #fff);
    }
}
.nav-a .nva-phone:focus-visible {
    outline: 2px solid var(--pk-accent);
    outline-offset: 2px;
}
@media (max-width: 860px) {
    .nav-a .nva-phone { display: none; }
}

/* Ghost variant of .nva-cta — same size/shape as the primary "Try for Free"
   button, but transparent with a muted outline. Used for "Book a Call". */
.nav-a .nva-cta.nva-cta-ghost {
    background: transparent;
    color: var(--pk-fg, #fff);
    border: 1px solid var(--pk-border-muted, rgba(255, 255, 255, 0.18));
    font-family: inherit;
    /* <button> defaults to line-height: normal; force an explicit value so
       total height (padding + border + line-height) equals the primary CTA's 42px */
    line-height: 22px;
    cursor: pointer;
    /* Primary is 10px 24px with no border; subtract 1px each side to match height/width */
    padding: 9px 23px;
}
@media (hover: hover) {
    .nav-a .nva-cta.nva-cta-ghost:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }
}
@media (max-width: 720px) {
    .nav-a .nva-cta.nva-cta-ghost { display: none; }
}

/* ─── Talk-to-Us dropdown (root-standard nav) ───
   Replaces "Call Us / Book a Call" — three contact CTAs collapse into a
   single ghost-button trigger. Hover or click opens the menu; tapping a
   menu item or pressing Escape closes it. JS click-toggle lives in
   shared/js/site-chrome/index.js (installTalkDropdown). */
.nav-a .nva-talk {
    position: relative;
    display: inline-flex;
}
/* Hover bridge — fills the 10px visual gap between trigger and menu so a
   downward mouse path stays inside .nva-talk:hover. Without this, the
   cursor leaves :hover during the gap and the menu flickers shut before
   the cursor reaches it. Width matches the menu's min-width so a
   diagonal cursor path (toward menu items on the left edge) is covered. */
.nav-a .nva-talk::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    height: 12px;
    pointer-events: auto;
}
.nav-a .nva-talk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nav-a .nva-talk-caret {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}
.nav-a .nva-talk.is-open .nva-talk-caret { transform: rotate(180deg); }
@media (hover: hover) {
    .nav-a .nva-talk:hover .nva-talk-caret { transform: rotate(180deg); }
}

.nav-a .nva-talk-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    padding: 8px;
    background: rgba(20, 20, 26, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 50;
}
.nav-a .nva-talk:focus-within .nva-talk-menu,
.nav-a .nva-talk.is-open .nva-talk-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
@media (hover: hover) {
    .nav-a .nva-talk:hover .nva-talk-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.nav-a .nva-talk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--pk-fg, #fff);
    border: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease;
}
@media (hover: hover) {
    .nav-a .nva-talk-item:hover { background: rgba(255, 255, 255, 0.06); }
}
.nav-a .nva-talk-item:focus-visible {
    outline: 2px solid var(--pk-accent);
    outline-offset: -2px;
}
.nav-a .nva-talk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.12);
    color: var(--pk-accent, #8b5cf6);
    flex-shrink: 0;
}
.nav-a .nva-talk-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-a .nva-talk-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.nav-a .nva-talk-title {
    font-size: 13px;
    font-weight: var(--pk-weight-semibold);
    color: var(--pk-fg, #fff);
}
.nav-a .nva-talk-sub {
    font-size: 12px;
    color: var(--pk-fg-muted, #9aa0a6);
    font-weight: var(--pk-weight-medium);
}
[data-pk-theme="light"] .nav-a .nva-talk-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
@media (hover: hover) {
    [data-pk-theme="light"] .nav-a .nva-talk-item:hover { background: rgba(0, 0, 0, 0.04); }
}
@media (max-width: 720px) {
    .nav-a .nva-talk { display: none; }
}

/* ─── Login circle / pill (root-standard nav) ───
   Desktop: round 38px circle with a person glyph + side-tooltip showing
   "Login" on hover or focus. Mobile (≤720px): collapses to an outline
   pill that shows the word "Login" inline next to Try for Free (M2). */
.nav-a .nva-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--pk-fg, #fff);
    text-decoration: none;
    position: relative;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.nav-a .nva-login:focus-visible {
    border-color: var(--pk-accent, #8b5cf6);
    color: var(--pk-accent, #8b5cf6);
}
@media (hover: hover) {
    .nav-a .nva-login:hover {
        border-color: var(--pk-accent, #8b5cf6);
        color: var(--pk-accent, #8b5cf6);
    }
}
.nav-a .nva-login-icon {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-a .nva-login-label {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    background: rgba(20, 20, 26, 0.96);
    color: var(--pk-fg, #fff);
    font-size: 12px;
    font-weight: var(--pk-weight-semibold);
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.nav-a .nva-login:focus-visible .nva-login-label { opacity: 1; }
@media (hover: hover) {
    .nav-a .nva-login:hover .nva-login-label { opacity: 1; }
}

[data-pk-theme="light"] .nav-a .nva-login { border-color: rgba(0, 0, 0, 0.16); }
[data-pk-theme="light"] .nav-a .nva-login-label {
    background: rgba(255, 255, 255, 0.98);
    color: #111;
    border-color: rgba(0, 0, 0, 0.1);
}

@media (max-width: 720px) {
    /* M2 pill — at mobile widths the circle expands into a labeled outline
       pill: drop the round shape, hide the icon, surface the text. */
    .nav-a .nva-login {
        width: auto;
        height: auto;
        border-radius: 8px;
        padding: 8px 14px;
    }
    .nav-a .nva-login-icon { display: none; }
    .nav-a .nva-login-label {
        position: static;
        transform: none;
        background: transparent;
        color: inherit;
        border: 0;
        padding: 0;
        border-radius: 0;
        font-size: 13px;
        font-weight: var(--pk-weight-semibold);
        opacity: 1;
        pointer-events: auto;
    }
}

/* Mobile nav — keep logo brand + primary CTA on single lines.
   Default .vp-nav .nva-bar enforces a 48px side floor to align with the
   1100px desktop gutter; on narrow screens that floor leaves too little
   room for "Echo Route" + "Try for Free", causing both to wrap. Shrink
   the side padding and pin both ends to `white-space: nowrap` so they
   stay on one line. (Safe-area inset still respected via max().) */
@media (max-width: 768px) {
    .vp-nav .nva-bar {
        padding-left: max(var(--vp-safe-l), 20px);
        padding-right: max(var(--vp-safe-r), 20px);
    }
    .vp-nav .vp-logo-brand,
    .vp-nav .vp-logo-sub { white-space: nowrap; }
    .vp-nav .nva-cta { white-space: nowrap; }
}

@media (max-width: 640px) {
    .bkm-head { padding: 28px 24px 20px; }
    .bkm-body { padding: 20px 24px 28px; }
    .bkm-row { grid-template-columns: 1fr; }
    .bkm-head .aud9-title { font-size: 22px; }
}

/* ─────────────────────────────────────────────
   AFTER THE CALL — owner-side view (phone + dashboard)
   ───────────────────────────────────────────── */
/* Dark-theater section (data-pk-theme="dark" on the section itself): stays
   dark in both themes so the phone + dashboard mockups read as product
   chrome in a theater. Narrative-wise this is a GAIN zone — AI handled
   the call and left a searchable record — so the bg carries the same
   subtle green tint as .aud9 / .vp-roi to tie it into the gain arc. */
.vp-aftercall {
    padding: 100px 48px;
    background: color-mix(in srgb, var(--pk-bg-deep) 97%, #10b981);
}
.vp-aftercall-header {
    max-width: 820px;
    margin: 0 auto 56px;
    text-align: center;
}
/* .vp-aftercall-header .exq-kicker margin-bottom from .vp-t-kicker scale. */
.vp-aftercall-header .exq-headline {
    color: var(--pk-fg);
    margin: 0 0 20px;
    /* font-*, letter-spacing, line-height from .vp-t-h2 scale. */
}
.vp-aftercall-header .exq-desc {
    margin: 0 auto;
    max-width: 580px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--pk-fg-muted);
}

/* Dual-column layout: iPhone thread (left) + full call record (right).
   Zoomed to 72% so the graphics read as an inline illustration rather
   than a full-stage hero — chosen from the size-test variants. */
.vp-aftercall-dual {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 48px;
    max-width: 1140px;
    margin: 0 auto;
    align-items: start;
    zoom: 0.72;
}
.vp-aftercall-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.vp-aftercall-col-label {
    /* Typography from .vp-t-kicker-sm (11/700/uppercase/0.08em).
       Previously 0.1em tracking — unified. */
    color: var(--pk-fg-subtle);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vp-aftercall-col-label::before,
.vp-aftercall-col-label::after {
    content: '';
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
}
.vp-aftercall-col-label::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
}

/* iPhone frame */
.vp-aftercall-phone {
    width: 330px;
    aspect-ratio: 330 / 680;
    background: linear-gradient(180deg, #1d2434 0%, #0d1220 45%, #141824 100%);
    border-radius: 46px;
    padding: 14px;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.08),
        0 0 0 10px #0b0b10,
        0 30px 60px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
}
.vp-aftercall-phone::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 98px;
    height: 28px;
    background: #0a0a0a;
    border-radius: 999px;
    z-index: 3;
}
/* iMessage light-theme screen: white bg, black chrome, gray received
   bubbles, iOS-blue latest bubble. This is the canonical look for the
   mockup in both light and dark page themes — the iPhone frame stays
   dark (hardware color) regardless of PageKit theme. */
.vp-aftercall-screen {
    height: 100%;
    background: #fff;
    border-radius: 34px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
.vp-aftercall-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px 4px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    height: 44px;
    flex-shrink: 0;
}
.vp-aftercall-statusbar-icons {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.vp-aftercall-statusbar-icons svg {
    width: 16px;
    height: 11px;
    fill: #000;
}

/* Messages header */
.vp-aftercall-imhead {
    padding: 6px 14px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.vp-aftercall-back {
    color: #0a84ff;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-35%);
}
.vp-aftercall-back-count {
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
}
.vp-aftercall-contact {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.vp-aftercall-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* Neutral glass chip — lets the logo's native purple→cyan gradient
       carry the brand color. A solid purple bg would drown the logo. */
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vp-aftercall-avatar img {
    width: 22px;
    height: 22px;
    display: block;
}
.vp-aftercall-contact-name {
    /* Weight collapsed 500 → 600 (iOS-realism waiver applied).
       Matches other 11px chrome labels on the page. */
    font-size: 11px;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    line-height: 1.4;
}

/* Thread body */
.vp-aftercall-thread {
    flex: 1;
    padding: 12px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}
.vp-aftercall-day {
    /* iMessage chrome day separator. Snapped 10.5 → 11 (half-pixel removed).
       Still reads as iOS system UI at 11/600/uppercase with 0.06em tracking. */
    text-align: center;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.42);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 8px 0 2px;
}
.vp-aftercall-msg {
    /* Leading snapped 1.38 → 1.4 to land on the chrome-default tier.
       Visually identical in-product; removes an orphan leading value. */
    max-width: 82%;
    background: #E5E5EA;
    color: #000;
    border-radius: 18px;
    padding: 9px 13px 10px;
    font-size: 13px;
    line-height: 1.4;
    align-self: flex-start;
}
.vp-aftercall-msg-muted { opacity: 0.6; }
.vp-aftercall-msg-title {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 13px;
}
.vp-aftercall-msg-body {
    /* Snapped 12.5 → 12 (half-pixel removed). */
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
}
.vp-aftercall-msg-time {
    /* Weight collapsed 500 → 400 (iOS-realism waiver applied).
       Timestamp chrome at 10/uppercase/0.02em reads fine at 400. */
    display: block;
    margin-top: 5px;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.vp-aftercall-msg-latest {
    background: linear-gradient(135deg, #5AC8FA 0%, #007AFF 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 122, 255, 0.3);
}
.vp-aftercall-msg-latest .vp-aftercall-msg-title,
.vp-aftercall-msg-latest .vp-aftercall-msg-body { color: #fff; }
.vp-aftercall-msg-latest .vp-aftercall-msg-body { opacity: 0.92; }
.vp-aftercall-msg-latest .vp-aftercall-msg-time { color: rgba(255, 255, 255, 0.78); }

/* Dashboard card (right column)
   ------------------------------
   Shell matches .exq-settings-card (Call Forwarding / Booking Mode) so
   the aftercall dashboard reads as the same client app as the feature
   cards on the page: elevated bg, 20px radius, ambient shadow + rim
   light. Sections are separated by 1px dividers rather than a flex
   gap, which gives the "stacked rows inside a settings panel" feel. */
.vp-aftercall-card {
    width: 100%;
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border-muted);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}
.vp-aftercall-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--pk-border-muted);
}
.vp-aftercall-card-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
/* Green status dot — "call ended, record saved". Replaces the old
   × close glyph, since the aftercall card is a read-only record,
   not a dismissible panel. Matches the .ddb-head-dot indicator
   pattern and echoes the green footer band below. */
.vp-aftercall-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pk-success, #10B981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    flex-shrink: 0;
}
.vp-aftercall-phone-num {
    font-size: 16px;
    font-weight: 700;
    color: var(--pk-fg);
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.vp-aftercall-timestamp {
    /* Snapped 12.5 → 12 (half-pixel removed). */
    font-family: var(--pk-font-mono);
    font-size: 12px;
    color: var(--pk-fg-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* Sections inside the card: each direct child gets its own padding
   and a top divider, giving the "settings rows" rhythm. No flex gap
   — the dividers carry the separation. */
.vp-aftercall-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.vp-aftercall-card-body > * {
    padding: 20px 24px;
    border-top: 1px solid var(--pk-border-muted);
}
.vp-aftercall-card-body > *:first-child {
    border-top: none;
}

/* Section wrapper for Recording + Transcript.
   ---------------------------------------------
   Gives each non-summary section an 11px uppercase label row above
   the content ("RECORDING  0:52" / "TRANSCRIPT"). Matches the
   section rhythm in .exq-card-body on the feature cards and the
   .ddb-section-head pattern from the design-review test page. */
.vp-aftercall-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.vp-aftercall-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pk-fg-subtle);
}
.vp-aftercall-section-meta {
    margin-left: auto;
    font-family: var(--pk-font-mono);
    font-size: 11px;
    color: var(--pk-fg-muted);
    font-variant-numeric: tabular-nums;
}

/* Purple summary block (AI-generated summary).
   ---------------------------------------------
   Tints the summary with --pk-accent (purple), unifying it with the
   ✨ sparkle on Agent transcript turns and the Agent speaker label —
   the whole "this is synthesized by the AI" story reads in one color.
   .vp-aftercall-v-accent (the "· in-network" chip) stays green on
   purpose: it's a functional insurance-status signal, not a theme
   marker, and needs to contrast with the surrounding purple. */
.vp-aftercall-summary {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--pk-accent, #8B5CF6) 12%, transparent),
        color-mix(in srgb, var(--pk-accent, #8B5CF6) 6%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--pk-accent, #8B5CF6) 28%, transparent);
    border-radius: 12px;
    padding: 18px 20px;
}
.vp-aftercall-summary-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.vp-aftercall-spark {
    font-size: 11px;
    line-height: 1;
    color: var(--pk-accent, #8B5CF6);
}
/* Kept for backward compatibility with existing markup — the class
   name still says "-amber" but the color is now purple. Everything
   reads from --pk-accent so a future theme change carries through. */
.vp-aftercall-spark-amber {
    color: var(--pk-accent, #8B5CF6);
    font-size: 13px;
}
.vp-aftercall-summary-label {
    /* Typography from .vp-t-kicker-sm (11/700/uppercase/0.08em).
       Was 12 — pulled down one step to match col-label siblings. */
    color: var(--pk-accent, #8B5CF6);
}
.vp-aftercall-summary-rows {
    display: grid;
    grid-template-columns: 92px 1fr;
    row-gap: 6px;
    column-gap: 14px;
    margin-bottom: 14px;
}
.vp-aftercall-k {
    font-size: 13px;
    font-weight: 700;
    color: var(--pk-accent, #8B5CF6);
}
.vp-aftercall-v {
    /* Snapped 13.5 → 14 (half-pixel removed). */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.94);
    font-variant-numeric: tabular-nums;
}
.vp-aftercall-v-muted {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}
.vp-aftercall-v-accent {
    color: var(--pk-success, #10B981);
    font-weight: 600;
}
.vp-aftercall-narrative {
    /* Snapped 13.5 → 14 (half-pixel removed). */
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* Waveform player */
.vp-aftercall-player {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 2px 14px;
    position: relative;
}
/* Play button + bars tinted with --pk-accent — same convention as
   the Spotlight player (.aud1-wave .bar / .bar.active in
   admin/build/blocks/blocks-audio.css). Keeps the "AI call record"
   story in one color across the card. */
.vp-aftercall-play {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.14);
    color: var(--pk-accent, #8B5CF6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
}
.vp-aftercall-wave {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 40px;
}
.vp-aftercall-bar {
    flex: 1;
    background: var(--pk-border);
    border-radius: 2px;
    transition: background 0.15s;
}
.vp-aftercall-bar-played {
    background: var(--pk-accent, #8B5CF6);
}
.vp-aftercall-wave-head {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(-50%);
}
.vp-aftercall-wave-scrub {
    /* font-family (mono) + font-size (10) + tabular-nums
       from .vp-t-mono-meta-xs in vertical-typography.css.
       Previously 10.5px — snapped to 10 (half-pixels removed). */
    position: absolute;
    top: calc(100% - 4px);
    transform: translateX(-50%);
    background: #0a0a0c;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.vp-aftercall-wave-scrub::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: #0a0a0c;
}
.vp-aftercall-total {
    /* font-family (mono) + font-size (12) + tabular-nums
       from .vp-t-mono-meta-sm in vertical-typography.css. */
    color: var(--pk-fg-muted);
    flex-shrink: 0;
}

/* Transcript — 2-column grid layout. Each turn renders across a
   shared grid so the speaker labels sit in an auto-sized, right-
   aligned column (em-dashes line up across rows → eye scans down
   the gap between speakers and speech). Typography (15/600/sans +
   em-dash ::after + ✨ ::before on .vp-aftercall-turn-ai) still
   comes from .vp-t-speaker in vertical-typography.css.

   `display: contents` on each <p> promotes its two spans (who +
   said) into direct grid items so every row shares the same
   column tracks — that's what keeps the em-dashes aligned. */
.vp-aftercall-transcript {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    row-gap: 14px;
    padding-top: 4px;
}
.vp-aftercall-turn {
    display: contents;
    margin: 0;
}
.vp-aftercall-who {
    color: var(--pk-accent, #8B5CF6);
    text-align: right;
}
.vp-aftercall-who-caller {
    color: rgba(255, 255, 255, 0.5);
}
.vp-aftercall-said {
    color: rgba(255, 255, 255, 0.9);
}

/* Green confirmation footer — clone of .exq-card-footer on the
   Booking Mode / Call Forwarding cards. Anchors the aftercall card
   to the same "✅ synced · ready to answer" visual language as the
   rest of the settings-card family. Renders only when
   record.confirmation_label is set in config. */
.vp-aftercall-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: rgba(16, 185, 129, 0.08);
    border-top: 1px solid rgba(16, 185, 129, 0.18);
    font-size: 13px;
    font-weight: 600;
    color: var(--pk-success, #10B981);
}
.vp-aftercall-footer svg {
    width: 14px;
    height: 14px;
    stroke: var(--pk-success, #10B981);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Clickable link inside an iMessage bubble. Matches iOS Messages:
   iOS link blue on muted (gray) bubbles, white-with-translucent-
   underline on the iOS-blue latest bubble so contrast reads correctly.
   Rendered between body and timestamp when a message provides `link`. */
.vp-aftercall-sms-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #007AFF;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.vp-aftercall-msg-latest .vp-aftercall-sms-link {
    color: rgba(255, 255, 255, 0.96);
    text-decoration-color: rgba(255, 255, 255, 0.55);
}

/* Empty unread badge — when notif.unread_count is an empty string,
   the .vp-aftercall-back-count span renders as an empty red pill.
   Hide it rather than making the renderer conditional, so existing
   configs without unread_count still render cleanly. */
.vp-aftercall-back-count:empty {
    display: none;
}

@media (max-width: 900px) {
    .vp-aftercall-dual { grid-template-columns: 1fr; gap: 36px; }
    .vp-aftercall-phone { margin: 0 auto; }
}
@media (max-width: 640px) {
    .vp-aftercall { padding: 64px 16px; }
    .vp-aftercall-header { margin-bottom: 36px; text-align: left; }
    .vp-aftercall-header .exq-desc { margin-left: 0; }
    .vp-aftercall-summary { padding: 16px; }
    .vp-aftercall-summary-rows { grid-template-columns: 72px 1fr; }
    .vp-aftercall-card-body > * { padding: 18px; }
}