/* home-v2: Melius-language landing on Porcelain & Gold.
   Free scroll only. No section pinning. */
:root {
    --hv-paper: #F6F4EE;
    --hv-deep:  #091A28;
    --hv-note:  #F3E9C9;
    --hv-max:   1240px;
}
* { box-sizing: border-box; }
/* No scroll-behavior:smooth here: Lenis owns programmatic scrolling and the
   two smoothing systems fight (rubber-band anchor jumps). */
html { overflow-x: hidden; }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--text);
    background: var(--hv-paper);
    -webkit-font-smoothing: antialiased;
}
.hv-cream-continuum {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #F4F2ED;
}
.hv-cream-continuum-silk {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: #F4F2ED;
    opacity: 0;
}
.hv-cream-continuum-silk.is-rendered { opacity: 1; }
.hv-cream-continuum > .hv-pricing,
.hv-cream-continuum > .hv-faq,
.hv-cream-continuum > .hv-footer {
    position: relative;
    z-index: 0;
    background: transparent;
    background-image: none;
}
.hv-skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--card); color: var(--text); padding: 0.5rem 1rem; z-index: 100;
}
.hv-skip:focus { left: 8px; top: 8px; }

/* Display type */
.hv-display {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
}
.hv-eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Floating chrome */
.hv-chrome {
    position: fixed; top: 14px; left: 14px; right: 14px;
    display: flex; justify-content: space-between; align-items: flex-start;
    z-index: 50; pointer-events: none;
}
.hv-chrome > * { pointer-events: auto; }
.hv-pill {
    background: var(--primary); color: var(--hv-paper);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 0.25rem;
    padding: 0.55rem 0.7rem 0.55rem 0.9rem;
    position: relative;
}
.hv-pill-brand {
    display: inline-flex; align-items: center; color: inherit; text-decoration: none;
}
/* Same wordmark used in the authenticated platform's shared navbar. */
.hv-platform-logo {
    border: 1.5px solid var(--accent); border-radius: 3px;
    padding: 0.22rem 0.6rem;
    font-family: var(--sans); font-size: 0.65rem; font-weight: 700;
    color: var(--accent); letter-spacing: 0.18em; line-height: 1;
    white-space: nowrap;
}
.hv-pill-menu {
    background: none; border: 0; color: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border-radius: var(--radius);
}
.hv-pill-menu:hover { background: rgba(246,244,238,0.12); }
.hv-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px;
    background: var(--primary); border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl); padding: 0.4rem; display: grid;
}
.hv-menu[hidden] { display: none; }
.hv-menu a {
    color: var(--hv-paper); text-decoration: none;
    font-size: 0.85rem; padding: 0.5rem 0.7rem; border-radius: var(--radius);
}
.hv-menu a:hover { background: rgba(246,244,238,0.12); }
.hv-chrome-cta { display: flex; gap: 0.5rem; }
.hv-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius); border: 0; cursor: pointer;
    font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
    min-height: 44px; padding: 0.62rem 1.05rem; text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.3s ease;
}
.hv-btn:active { transform: scale(0.97); }
.hv-btn-gold { background: var(--accent); color: var(--primary); }
.hv-btn-gold:hover { background: var(--accent-dark); }
.hv-btn-quiet { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.hv-btn-quiet:hover { background: #fffdf7; }
@media (max-width: 480px) { .hv-btn-quiet { display: none; } }
/* Past the hero the pill compacts and lifts - the chrome acknowledging that
   the opening act is over. State toggled by JS at scrollY > 48. */
.hv-pill { transition: box-shadow 0.3s ease, padding 0.3s ease; }
.hv-chrome.is-scrolled .hv-pill {
    padding: 0.45rem 0.6rem 0.45rem 0.8rem;
    box-shadow: 0 12px 32px -12px rgba(9,26,40,0.5), var(--shadow-lg);
}
.hv-chrome.is-scrolled .hv-btn-gold { box-shadow: 0 6px 20px -6px rgba(201,168,76,0.55); }
@media (prefers-reduced-motion: reduce) { .hv-pill { transition: none; } }

/* Shared section shell */
.hv-inner { max-width: var(--hv-max); margin: 0 auto; padding: 4.4rem 1.25rem; }

/* Reveal-on-scroll hook (observer added in Task 3) */
.hv-reveal { opacity: 0; transform: translateY(22px); }
.hv-reveal.hv-in {
    opacity: 1; transform: none;
    transition: opacity 0.9s var(--spring), transform 0.9s var(--spring);
}
/* Sequenced reveal: the container is observed like .hv-reveal, but its
   children cascade in 90ms apart instead of the section arriving as one
   slab. JS indexes children with CBMotion.stagger (--i). */
.hv-reveal-seq > * { opacity: 0; transform: translateY(18px); }
.hv-reveal-seq.hv-in > * {
    opacity: 1; transform: none;
    transition: opacity 0.8s var(--spring), transform 0.8s var(--spring);
    transition-delay: calc(var(--i, 0) * 110ms);
}
/* Gold thread: a hairline of the hero's line-draw motif that draws open
   (centre outward, matching the hero line's origin) across the top of the
   dark act and the founder section as each scrolls into view. */
.hv-thread::before {
    content: ''; position: absolute; top: 0; left: 50%; z-index: 1;
    width: min(var(--hv-max), calc(100% - 2.5rem)); height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.6) 30%, #e8d07a 50%, rgba(201,168,76,0.6) 70%, transparent);
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.9s var(--spring) 0.1s;
    pointer-events: none;
}
.hv-thread.hv-in::before { transform: translateX(-50%) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .hv-reveal,
    .hv-reveal.hv-in { opacity: 1; transform: none; transition: none; }
    .hv-reveal-seq > * { opacity: 1; transform: none; transition: none; }
    .hv-thread::before { transform: translateX(-50%) scaleX(1); transition: none; }
}

/* Hero */
.hv-hero {
    position: relative;
    isolation: isolate;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hv-hero-silk {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    background: var(--hv-paper);
    opacity: 0;
}
.hv-hero-silk.is-rendered { opacity: 1; }
.hv-hero > .hv-hero-inner { max-height: 100vh; }
.hv-hero-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 5.5rem 1.25rem 2rem; text-align: center; }
/* 440 not 400: Libre Baskerville is a 400-700 variable face, so this is a real
   ~10% heavier stem rather than synthetic emboldening. Applied to the em too,
   which sets its own weight, so the gold phrase matches the navy. */
.hv-hero-title { font-size: clamp(2.25rem, min(6.4vw, 8vh), 4.25rem); margin: 0 0 clamp(2rem, 3.6vh, 2.5rem); color: var(--text); font-weight: 440; }
.hv-hero-title em { font-weight: 440; }
/* Accent phrase: the shimmering gold ripple. Shared by every gold em phrase
   on the page - hero headline, slogan, showcase title and walkthrough title -
   so they all ripple in step. */
.hv-hero-title em,
.hv-platform-slogan em,
.hv-heroclose-sub em,
.hv-sc-title em,
.hv-wt-title em {
    background: linear-gradient(100deg, #b8943f 0%, #C9A84C 25%, #e8d07a 50%, #C9A84C 75%, #b8943f 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Shimmer waits for the hero journey to settle, so it does not compete
       with entrance motion. The active-tool border uses this same epoch. */
    animation: hvShimmer 4s linear 3.2s infinite;
    will-change: background-position;
    display: inline-block;
    /* background-clip:text paints inside the element box, and the line box
       excludes the italic descender (the j in "job"), so pad and pull back. */
    padding-right: 0.12em;
    margin-right: -0.06em;
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
}
@keyframes hvShimmer {
    from { background-position: 200% 0; }
    to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hv-hero-title em,
    .hv-platform-slogan em,
    .hv-heroclose-sub em,
    .hv-sc-title em,
    .hv-wt-title em { animation: none; background-position: 50% 0; }
}
/* Mask-reveal headline: each line is a clip window, the inner span rises out
   of it. The padding/negative-margin pair keeps descenders (y, j) inside the
   clip without changing the layout height. */
.hv-hero-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hv-hero-linein { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    /* A display serif needs room to arrive. The second line follows after the
       first has established its baseline, rather than reading as a fast wipe. */
    html.hv-motion .hv-hero-linein {
        transform: translateY(115%);
        animation: hvMaskRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    html.hv-motion .hv-hero-line:nth-child(2) .hv-hero-linein { animation-delay: 0.18s; }
}
@keyframes hvMaskRise { to { transform: translateY(0); } }
/* ---- Hero: the seven steps ----
   Ported from hero-tabs-proto.html (the browser/tab sequence was dropped;
   only the rail survives). The line draws left to right and each dot blooms
   at the moment the tip reaches it, then the Offer ring closes and the tick
   draws strictly after it.

   Only .cb-rail-armed on <html> hides anything, and it is stamped before
   first paint by the inline script in <head> - so no JS, a failed GSAP fetch,
   reduced motion or a phone all render the rail already finished rather than
   blank. It plays on every visit; there is no play-once flag. */
.hv-steps {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(10px, 2.6vw, 44px);
    min-height: 96px;
    margin: 0 auto 1.25rem;
}
.hv-rail {
    position: absolute;
    top: 23px; left: 24px; right: 30px;
    height: 2px;
    background: var(--accent);
    transform-origin: left center;
    /* GSAP-driven when armed; no CSS transition to fight it */
}
.cb-rail-armed .hv-rail { transform: scaleX(0); }
.hv-mobile-journey { display: none; }
.hv-step {
    position: relative; z-index: 1;
    width: clamp(64px, 8.5vw, 118px);
    display: flex; flex-direction: column; align-items: center;
    gap: 9px;
}
.cb-rail-armed .hv-step { opacity: 0; }
.hv-dot {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #FDFCF9;
    border: 2px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(9,26,40,0.08);
}
.hv-step small {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--text-light); text-align: center; line-height: 1.45;
}
.hv-step.is-pulsing .hv-dot { animation: hvStepPulse 1.1s ease 2; }
@keyframes hvStepPulse {
    0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(201,168,76,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
.hv-finish svg { display: block; }
.hv-finish circle {
    fill: #FDFCF9;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-dasharray: 139;
    transform: rotate(-90deg);
    transform-origin: center;
}
.hv-finish .hv-tick {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3.2;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 26;
}
.cb-rail-armed .hv-finish circle { stroke-dashoffset: 139; }
.cb-rail-armed .hv-finish .hv-tick { stroke-dashoffset: 26; }
.cb-rail-armed .hv-steps.is-ringed .hv-finish circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s ease-in-out;
}
.cb-rail-armed .hv-steps.is-ringed .hv-finish .hv-tick {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
}
.hv-finish small { color: var(--accent-dark); }

.hv-heroclose {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    margin-top: clamp(1rem, 2vw, 1.35rem);
}
/* The armed state lives on <html>, stamped by an inline script in <head>
   BEFORE first paint. home-v2.js runs at the end of body, which is after the
   browser has already painted - arming there flashed the finished rail and
   then blanked it. No JS at all means no class, which is the visible state. */
.cb-rail-armed .hv-heroclose-sub,
.cb-rail-armed .hv-heroclose { opacity: 0; transform: translateY(12px); }
.cb-rail-armed .hv-heroclose-sub.is-shown,
.cb-rail-armed .hv-heroclose.is-shown {
    opacity: 1; transform: none;
    transition: opacity 0.55s ease, transform 0.55s var(--spring);
}
.hv-heroclose-sub {
    font-size: clamp(1.25rem, 1.8vw, 1.45rem);
    color: var(--primary);
    text-align: center; max-width: 760px; line-height: 1.2;
    margin: clamp(1rem, 2vw, 1.35rem) auto 0;
}
.hv-heroclose-sub em { font-style: italic; color: #A8882E; }
/* Phones keep the shortened five-stop journey in one chronological row. The
   connector measures and joins each actual marker, so no turn, loop, or label
   reversal is needed. */
@media (max-width: 700px) {
    /* The hero owns the primary conversion action on phones. Chrome is for
       orientation and navigation, not a second visual headline. */
    .hv-chrome-cta { display: none; }
    .hv-chrome { position: absolute; }
    .hv-pill {
        background: transparent;
        padding: 0;
        box-shadow: none;
        gap: 8px;
    }
    .hv-pill-brand {
        min-height: 44px;
        padding: 0 0.58rem;
        background: var(--primary);
        border-radius: 10px;
        box-shadow: 0 10px 22px -14px rgba(9,26,40,.62);
    }
    .hv-platform-logo { padding: 0.19rem 0.48rem; font-size: 0.58rem; letter-spacing: 0.16em; }
    .hv-pill-menu {
        width: 44px;
        height: 44px;
        background: var(--primary);
        color: var(--hv-paper);
        border-radius: 10px;
        box-shadow: 0 10px 22px -14px rgba(9,26,40,.62);
    }
    .hv-pill-menu:hover { background: #102A3B; }
    .hv-menu { top: 52px; min-width: 176px; }
    .hv-chrome.is-scrolled .hv-pill { padding: 0; box-shadow: none; }
    .hv-hero-inner { padding-top: 4rem; }
    .hv-hero-title { font-size: clamp(1.75rem, 8.75vw, 2.5rem); line-height: 1.06; }
    .hv-hero-linein { white-space: nowrap; }
    .hv-heroclose-sub { font-size: clamp(1.1rem, 4.75vw, 1.32rem); line-height: 1.25; }
    .hv-steps { flex-wrap: nowrap; gap: 4px; min-height: 72px; }
    .hv-rail { display: none; }
    /* If the motion script never runs, fall back to the same straight rail used
       on desktop instead of leaving five disconnected stages. */
    html:not(.hv-motion) .hv-rail {
        display: block;
        top: clamp(18px, 5.375vw, 21px);
        left: calc(10% - 2px);
        right: calc(10% - 2px);
        width: auto;
    }
    .hv-mobile-journey {
        display: block; position: absolute; inset: 0; z-index: 0;
        width: 100%; height: 100%; overflow: visible; pointer-events: none;
    }
    .hv-mobile-journey path {
        fill: none; stroke: var(--accent); stroke-width: 2;
        vector-effect: non-scaling-stroke;
    }
    .hv-step { width: calc(20% - 3px); }
    .hv-dot { width: clamp(36px, 10.75vw, 42px); height: clamp(36px, 10.75vw, 42px); font-size: clamp(12px, 2.8vw, 13px); }
    .hv-finish svg { width: clamp(36px, 10.75vw, 42px); height: clamp(36px, 10.75vw, 42px); }
    .hv-step small { font-size: clamp(0.625rem, 2.5vw, 0.7rem); letter-spacing: 0.01em; line-height: 1.25; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
    /* Match the desktop hero timeline exactly while retaining the mobile-only
       connector geometry: immediate 1.6s draw and 0.4s stage arrivals
       positioned evenly along that draw. The inline/main-script handshake adds
       hv-motion before paint and removes it if the main script cannot start. */
    html.hv-motion .hv-mobile-journey path {
        stroke-dasharray: var(--hv-journey-length, 620); stroke-dashoffset: var(--hv-journey-length, 620);
        animation: hvMobileJourneyDraw 1.6s linear 0s forwards;
    }
    html.hv-motion .hv-step {
        opacity: 0;
        transform: translateY(10px) scale(0.85);
        animation: hvMobileStageIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    html.hv-motion .hv-step:nth-of-type(2) { animation-delay: 0s; }
    html.hv-motion .hv-step:nth-of-type(3) { animation-delay: 0.4s; }
    html.hv-motion .hv-step:nth-of-type(4) { animation-delay: 0.8s; }
    html.hv-motion .hv-step:nth-of-type(5) { animation-delay: 1.2s; }
    html.hv-motion .hv-step:nth-of-type(6) { animation-delay: 1.6s; }
    html.hv-motion .hv-finish circle {
        stroke-dashoffset: 139;
        animation: hvMobileOfferRing 0.6s ease-in-out 2s forwards;
    }
    html.hv-motion .hv-finish .hv-tick {
        stroke-dashoffset: 26;
        animation: hvMobileOfferTick 0.4s cubic-bezier(0.22, 1, 0.36, 1) 2.65s forwards;
    }
    /* The slogan already uses the shared desktop span timing below. */
    html.hv-motion .hv-heroclose-sub,
    html.hv-motion .hv-heroclose {
        opacity: 0; transform: translateY(10px);
        animation:
            hvMobileSupportOpacity 0.55s ease 0.9s forwards,
            hvMobileSupportTransform 0.55s var(--spring) 0.9s forwards;
    }
    html.hv-motion:not(.hv-fonts) .hv-mobile-journey path,
    html.hv-motion:not(.hv-fonts) .hv-step,
    html.hv-motion:not(.hv-fonts) .hv-finish circle,
    html.hv-motion:not(.hv-fonts) .hv-finish .hv-tick,
    html.hv-motion:not(.hv-fonts) .hv-heroclose-sub,
    html.hv-motion:not(.hv-fonts) .hv-heroclose { animation-play-state: paused; }
    html.hv-motion.hv-hero-settled .hv-mobile-journey path,
    html.hv-motion.hv-hero-settled .hv-step,
    html.hv-motion.hv-hero-settled .hv-finish circle,
    html.hv-motion.hv-hero-settled .hv-finish .hv-tick,
    html.hv-motion.hv-hero-settled .hv-heroclose-sub,
    html.hv-motion.hv-hero-settled .hv-heroclose { animation: none; }
    html.hv-motion.hv-hero-settled .hv-mobile-journey path {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
    html.hv-motion.hv-hero-settled .hv-finish circle,
    html.hv-motion.hv-hero-settled .hv-finish .hv-tick { stroke-dashoffset: 0; }
    html.hv-motion.hv-hero-settled .hv-step,
    html.hv-motion.hv-hero-settled .hv-heroclose-sub,
    html.hv-motion.hv-hero-settled .hv-heroclose { opacity: 1; transform: none; }
}
@keyframes hvMobileJourneyDraw { to { stroke-dashoffset: 0; } }
@keyframes hvMobileStageIn { to { opacity: 1; transform: none; } }
@keyframes hvMobileOfferRing { to { stroke-dashoffset: 0; } }
@keyframes hvMobileOfferTick { to { stroke-dashoffset: 0; } }
@keyframes hvMobileSupportOpacity { to { opacity: 1; } }
@keyframes hvMobileSupportTransform { to { transform: none; } }

/* Fonts gate: the headline holds masked at frame zero until JS stamps
   hv-fonts on <html> once the display faces
   are loaded. A web font swapping in mid-mask-rise reads as the headline
   changing size. Under reduced motion these elements have no animation, so
   the paused play-state is inert there. */
html.hv-motion:not(.hv-fonts) .hv-hero-linein { animation-play-state: paused; }

/* Dark act: chapters */
.hv-h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin: 0.5rem 0 0.8rem; }

/* Founder walkthrough (imported from Claude Design: Walkthrough Section).
   Values are the design's own literals; they match the casebuddy DS tokens. */
.hv-wt {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--hv-paper);
    padding: 3.5rem 1.5rem 3.25rem;
}
.hv-wt-silk {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
    display: block; pointer-events: none; opacity: 0; transition: opacity 0.45s ease;
}
.hv-wt-silk.is-rendered { opacity: 1; }
.hv-wt-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.hv-wt-head { text-align: center; margin-bottom: 2.75rem; }
.hv-wt-title {
    font-family: var(--serif, 'Libre Baskerville', Georgia, serif);
    font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700;
    line-height: 1.16; letter-spacing: -0.02em; color: #0E2535;
    text-wrap: pretty; margin: 0;
}
.hv-wt-title em { color: #A8882E; }
.hv-wt-grid { display: grid; align-items: start; gap: 2.5rem; grid-template-columns: 1.18fr 1fr; }
.hv-wt-shell {
    overflow: hidden; border: 1px solid rgba(14,37,53,0.14); border-radius: 14px; background: #0E2535;
    box-shadow: 0 18px 48px rgba(5,28,44,0.22);
}
.hv-wt-stage { position: relative; background: #0E2535; aspect-ratio: 16/10; }
.hv-wt-stage video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    cursor: pointer; background: #0E2535;
}
.hv-wt-poster {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center; cursor: pointer;
    /* Do not depend on the native <video poster>: iOS can leave it blank until
       media metadata arrives. This layer paints the same still immediately. */
    background-image: url('landing-assets/vsl-poster.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.25s ease, visibility 0.25s;
}
/* Fade rather than display:none - the poster dissolving into the playing
   video, instead of popping off. visibility carries the click-through. */
.hv-wt-poster.is-hidden { opacity: 0; visibility: hidden; }
.hv-wt-poster-grad {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,37,53,0.30) 0%, rgba(14,37,53,0.08) 45%, rgba(9,26,40,0.76) 100%);
}
.hv-wt-play {
    position: relative; width: 88px; height: 88px; border-radius: 50%;
    border: none; cursor: pointer; background: #C9A84C;
    display: flex; align-items: center; justify-content: center;
    animation: hvWtBreath 4s ease-in-out infinite;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s;
}
.hv-wt-play:hover { transform: scale(1.06); background: #D4B45A; }
.hv-wt-play:active { transform: scale(0.96); }
@keyframes hvWtBreath {
    0%, 100% { box-shadow: 0 6px 26px rgba(201,168,76,0.30); }
    50%      { box-shadow: 0 8px 34px rgba(201,168,76,0.48); }
}
@media (prefers-reduced-motion: reduce) { .hv-wt-play { animation: none; } }
.hv-wt-poster-tag { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 0.6rem; }
.hv-wt-poster-dot { width: 7px; height: 7px; border-radius: 50%; background: #C9A84C; }
.hv-wt-poster-tag span:last-child {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.hv-wt-dur {
    position: absolute; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 0.4rem;
    background: rgba(9,26,40,0.72); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 100px;
    padding: 0.3rem 0.75rem; font-size: 0.74rem; font-weight: 600; color: #fff;
    font-variant-numeric: tabular-nums;
}
.hv-wt-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.6rem 0.9rem 0.6rem;
    background: linear-gradient(180deg, transparent, rgba(9,26,40,0.82));
    display: flex; flex-direction: column; gap: 0.15rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
}
.hv-wt-bar.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .hv-wt-poster, .hv-wt-bar { transition: none; }
}
.hv-wt-seek { width: 100%; height: 16px; margin: 0; cursor: pointer; accent-color: #C9A84C; }
.hv-wt-seek:focus-visible { outline: 2px solid #C9A84C; outline-offset: 3px; }
.hv-wt-ctls { display: flex; align-items: center; gap: 0.85rem; }
.hv-wt-ctl {
    width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s; background: transparent;
}
.hv-wt-ctl-play { background: rgba(255,255,255,0.12); }
.hv-wt-ctl-play:hover { background: #C9A84C; }
.hv-wt-ctl-ghost:hover { background: rgba(255,255,255,0.14); }
.hv-wt-ctl-cc { color: rgba(255,255,255,0.85); }
.hv-wt-ctl-cc.is-on { background: #C9A84C; color: #0E2535; }
.hv-wt-clock {
    font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.8);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hv-wt-sp { flex: 1; }
.hv-wt-ctarow { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-top: 1.4rem; }
.hv-wt-cta {
    background: #C9A84C; color: #0E2535; font-weight: 700; border-radius: 6px;
    box-shadow: 0 4px 20px rgba(201,168,76,0.3);
    transition: background 0.15s, box-shadow 0.2s;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; padding: 0.8rem 1.5rem; text-decoration: none;
}
.hv-wt-cta:hover { background: #A8882E; color: #0E2535; box-shadow: 0 6px 28px rgba(201,168,76,0.4); }
.hv-wt-card {
    background: #fff; border: 1px solid #D4DAE3; border-radius: 14px;
    padding: 1.75rem; box-shadow: 0 2px 10px rgba(5,28,44,0.06);
}
.hv-wt-who { display: flex; align-items: center; gap: 1.35rem; margin-bottom: 1.4rem; }
.hv-wt-who > div { min-width: 0; }
.hv-wt-name {
    font-family: var(--serif, 'Libre Baskerville', Georgia, serif);
    font-size: 1.85rem; font-weight: 700; line-height: 1.1;
    letter-spacing: -0.01em; color: #0E2535; margin-bottom: 0.55rem;
}
.hv-wt-role {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em;
    text-transform: uppercase; color: #A8882E; line-height: 1.4;
}
.hv-wt-bio { border-top: 1px solid #E4E8EE; padding-top: 1.5rem; }
.hv-wt-bio p { font-size: 1.02rem; line-height: 1.65; color: #0E2535; text-wrap: pretty; margin: 0; }
.hv-wt-bio strong { font-weight: 700; }
/* Entrance: the video shell rises first, its shadow blooming a beat after it
   lands (a shadow is evidence of arrival - it should be cast, not baked in);
   the bio card follows 250ms later. */
.hv-wt .hv-reveal:not(.hv-in) { transform: translateY(22px); }
.hv-wt .hv-reveal.hv-in { transition-duration: 0.72s; }
.hv-wt-card.hv-reveal.hv-in { transition-delay: 0.18s; }
.hv-wt .hv-reveal .hv-wt-shell { transition: box-shadow 0.55s ease 0.48s; }
.hv-wt .hv-reveal:not(.hv-in) .hv-wt-shell { box-shadow: 0 4px 14px rgba(5,28,44,0.10); }
@media (prefers-reduced-motion: reduce) {
    .hv-wt .hv-reveal .hv-wt-shell { transition: none; }
}
@media (max-width: 960px) {
    .hv-wt { padding: 2.75rem 1.15rem 3.25rem; }
    .hv-wt-head { text-align: left; margin-bottom: 1.5rem; }
    .hv-wt-title { font-size: 1.62rem; }
    .hv-wt-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .hv-wt-stage { aspect-ratio: 4/3; }
    .hv-wt-play { width: 66px; height: 66px; }
    .hv-wt-poster-tag { display: none; }
    .hv-wt-name { font-size: 1.5rem; }
    .hv-wt-card { border-radius: 12px; padding: 1.15rem; }
    .hv-wt-ctarow { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0.7rem; margin-top: 1.1rem; }
    .hv-wt-cta { font-size: 1rem; padding: 0.95rem 1.25rem; min-height: 48px; }
    .hv-wt-ctl { width: 40px; height: 40px; }
    .hv-wt-bar { padding: 1.4rem 0.6rem 0.5rem; }
}

/* Pricing */
/* Tightened against the walkthrough section above - the shared 4.4rem
   .hv-inner top pad plus the section's own tail read as a dead band. */
.hv-pricing .hv-inner { padding-top: 2.75rem; }
@media (max-width: 700px) {
    /* Pricing and FAQ share the continuous cream region. The default section
       tails stacked to 8.8rem on phones, creating an empty band after coaching. */
    .hv-pricing .hv-inner { padding-bottom: 1rem; }
    .hv-faq .hv-inner { padding-top: 1.5rem; }
}
/* One plan, billed monthly or annually - the toggle swaps price and terms
   rather than showing two near-identical cards. */
.hv-price-single { max-width: 520px; margin: 0 auto; }
/* the amount is a span too now, so exempt it from the "/mo" suffix styling */
.hv-price-amount [data-plan-amount] { font-size: inherit; font-weight: inherit; color: inherit; }
.hv-plan-toggle {
    display: flex; gap: 4px; margin: 0 auto 1.5rem; width: fit-content;
    background: var(--card); border-radius: 999px; padding: 4px;
    border: 1px solid rgba(14,37,53,0.12);
    box-shadow: 0 1px 3px rgba(9,26,40,0.08), 0 6px 24px rgba(201,168,76,0.18);
}
.hv-plan-opt {
    display: inline-flex; align-items: center; gap: 0.45rem;
    border: 0; cursor: pointer; background: transparent;
    font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
    min-height: 44px; color: var(--text-light); padding: 0.55rem 1.25rem; border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.hv-plan-opt:hover { color: var(--text); }
.hv-plan-opt.is-on {
    background: var(--hv-deep); color: var(--hv-paper);
    box-shadow: 0 2px 10px rgba(9,26,40,0.35);
}
.hv-plan-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hv-plan-save {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--hv-deep); background: var(--accent); border-radius: 999px; padding: 0.18rem 0.5rem;
}
/* annual-only lines, revealed by the toggle. Selector must outrank
   `.hv-price-feats li { display: flex }` or they never hide. They rise in
   rather than popping - cbmRise is emptied by the kit under reduced motion. */
.hv-price-feats li.hv-feat-annual { display: none; }
.hv-price-single.is-annual .hv-price-feats li.hv-feat-annual {
    display: flex;
    animation: cbmRise 0.45s var(--spring) both;
}
.hv-price-single.is-annual .hv-feat-annual + .hv-feat-annual { animation-delay: 70ms; }
.hv-price-card {
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: 2rem 1.75rem; display: flex; flex-direction: column; position: relative;
}
.hv-rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 40px rgba(201,168,76,0.25); }
.hv-price-name { font-size: 1.6rem; margin: 0 0 0.2rem; color: var(--text); }
.hv-price-tag { color: var(--text-light); font-size: 0.88rem; margin: 0 0 1.4rem; }
.hv-price-amount { font-size: 2.6rem; font-weight: 700; color: var(--text); font-family: var(--sans); }
.hv-price-amount span { font-size: 1rem; font-weight: 500; color: var(--text-light); }
.hv-price-sub { color: var(--text-light); font-size: 0.8rem; margin-bottom: 1.2rem; }
.hv-price-note {
    background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-md);
    font-size: 0.8rem; color: var(--text-light); line-height: 1.5; padding: 0.75rem 0.9rem; margin-bottom: 1.2rem;
}
.hv-price-feats { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 0.55rem; flex: 1; }
.hv-price-feats li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.86rem; color: var(--text); }
/* Checklist cascade: lines land 70ms apart, each gold tick drawing in a beat
   behind its line - the offer stacking up rather than a wall appearing. */
.hv-price-feats.hv-reveal-seq > li::before { opacity: 0; transition: opacity 0.3s ease; }
.hv-price-feats.hv-reveal-seq.hv-in > li::before {
    opacity: 1;
    transition-delay: calc(var(--i, 0) * 90ms + 0.25s);
}
@media (prefers-reduced-motion: reduce) {
    .hv-price-feats.hv-reveal-seq > li::before { opacity: 1; transition: none; }
}
.hv-price-feats li::before {
    content: ''; flex: none; width: 15px; height: 15px; margin-top: 0.12rem;
    background-color: var(--accent);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>') center/contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>') center/contain no-repeat;
}
.hv-price-cta { width: 100%; }
.hv-price-reassurance {
    margin: 0.75rem 0 0;
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}
/* Coaching sits apart from the two self-serve tiers: it's the human,
   premium offer, so it goes navy rather than reading as a third card. */
.hv-coach-card {
    position: relative; overflow: hidden;
    margin: 1.75rem auto 0; max-width: 860px;
    background: var(--primary);
    background-image: radial-gradient(rgba(246,244,238,0.05) 1px, transparent 1px);
    background-size: 14px 14px;
    border: 1px solid rgba(201,168,76,0.34);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 46px -20px rgba(9,26,40,0.6), 0 2px 6px rgba(9,26,40,0.18);
    padding: 2.1rem 1.75rem; display: grid; gap: 1.2rem; align-items: center;
    color: var(--hv-paper);
}
/* gold filament along the top edge - draws in left-to-right as the card
   reveals, announcing the premium human offer */
.hv-coach-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent) 18%, #e8d07a 50%, var(--accent) 82%, transparent);
    transform-origin: left;
    transition: transform 1.1s var(--spring) 0.25s;
}
.hv-coach-card.hv-reveal:not(.hv-in)::before { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
    .hv-coach-card::before { transition: none; }
}
@media (min-width: 900px) {
    .hv-coach-card { grid-template-columns: 1fr 1.5fr auto; padding: 2.4rem 2.5rem; }
}
.hv-coach-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.55rem;
    font-family: var(--sans); font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
    background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.32);
    border-radius: 999px; padding: 0.3rem 0.7rem;
}
.hv-coach-card .hv-price-name { color: var(--hv-paper); }
.hv-coach-card .hv-price-tag { color: rgba(246,244,238,0.6); }
.hv-coach-copy { color: rgba(246,244,238,0.8); line-height: 1.6; margin: 0; }

/* FAQ */
.hv-faq-list { border-top: 1px solid var(--border); margin-top: 2.5rem; }
.hv-faq-item { border-bottom: 1px solid var(--border); }
.hv-faq-q {
    width: 100%; background: none; border: 0; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--text);
    padding: 1.3rem 0.2rem; text-align: left;
    transition: color 0.15s ease;
}
.hv-faq-q:hover { color: #A8882E; }
.hv-faq-q:hover svg { color: var(--accent); }
/* 0.4s matches the panel's --cbm-slow grid-rows open, so plus and panel
   finish together */
.hv-faq-q svg { flex: none; transition: transform 0.4s var(--spring), color 0.15s ease; color: var(--text-light); }
.hv-faq-item.open .hv-faq-q svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
    .hv-faq-q svg { transition: color 0.15s ease; }
}
.hv-faq-a { padding: 0 0.2rem; }
.hv-faq-a p { margin: 0 0 1.4rem; color: var(--text-light); line-height: 1.65; max-width: 640px; }

/* Footer */
.hv-footer { position: relative; overflow: hidden; padding-bottom: 2rem; }
.hv-footer-wm {
    position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%);
    font-size: clamp(6rem, 22vw, 20rem); line-height: 1; white-space: nowrap;
    color: rgba(14,37,53,0.05); pointer-events: none; user-select: none;
}
/* The ghost watermark surfaces from below the fold as the footer arrives -
   a quiet editorial sign-off. The footer element itself is observed (hv-in). */
@media (prefers-reduced-motion: no-preference) {
    .hv-footer-wm {
        transform: translateX(-50%) translateY(0.28em); opacity: 0;
        transition: transform 1.1s var(--spring), opacity 0.9s ease;
    }
    .hv-footer.hv-in .hv-footer-wm { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.hv-footer-card {
    position: relative; background: var(--primary); color: var(--hv-paper);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
    padding: 2.5rem; display: grid; gap: 2.5rem;
}
@media (min-width: 900px) { .hv-footer-card { grid-template-columns: 1.2fr 1fr; } }
.hv-footer-cols { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.hv-footer-cols h4 {
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(246,244,238,0.5); margin: 0 0 0.9rem; font-weight: 600;
}
.hv-footer-cols a {
    display: block; color: rgba(246,244,238,0.8); text-decoration: none;
    font-size: 0.86rem; padding: 0.28rem 0;
    transition: color 0.15s ease;
}
.hv-footer-cols a:hover { color: var(--hv-paper); }
.hv-footer-base {
    grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
    border-top: 1px solid rgba(246,244,238,0.15); padding-top: 1.4rem;
    font-size: 0.78rem; color: rgba(246,244,238,0.55);
}
.hv-status { display: inline-flex; align-items: center; gap: 0.45rem; }
.hv-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* ============================================================
   Interactive feature showcase (imported from Claude Design)
   Left: clickable tool categories. Right: live preview
   composited into a higgsfield-generated laptop shell.
   ============================================================ */
.hv-showcase {
    position: relative;
    isolation: isolate;
    scroll-margin-top: 2rem;
    overflow: hidden;
    overflow: clip; /* the tile strip's 100vw breakout must not create a scrollbar */
    background-color: var(--hv-deep);
}
.hv-showcase-silk {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: var(--hv-deep);
    opacity: 0;
}
.hv-showcase-silk.is-rendered { opacity: 1; }

/* Left column re-coloured for the navy ground. The browser preview on the
   right keeps its own light chrome - it's meant to read as a real window. */
.hv-showcase .hv-sc-title { color: var(--hv-paper); }
.hv-showcase .hv-sc-title em { color: var(--accent); }
.hv-showcase .hv-sc-sub { color: rgba(246,244,238,0.62); }
.hv-showcase .hv-sc-lead { color: rgba(246,244,238,0.62); }
.hv-showcase .hv-sc-eyebrow {
    background: rgba(201,168,76,0.10);
    border-color: rgba(201,168,76,0.32);
    color: var(--accent);
}
.hv-showcase .hv-sc-catname { color: var(--hv-paper); }
.hv-showcase .hv-sc-catcount { color: rgba(246,244,238,0.42); }
.hv-showcase .hv-sc-cathd { border-bottom-color: rgba(246,244,238,0.16); }
/* Tool fills are the same translucent tints as before, but composited over an
   opaque --hv-deep base rather than left see-through. Identical colour, except
   the cursor dot-glow no longer reads through the tiles as it passes under. */
.hv-showcase .hv-sc-tool {
    background: linear-gradient(rgba(246,244,238,0.05), rgba(246,244,238,0.05)), var(--hv-deep);
    border-color: rgba(246,244,238,0.12);
}
.hv-showcase .hv-sc-tool svg { color: rgba(246,244,238,0.45); }
.hv-showcase .hv-sc-tname { color: rgba(246,244,238,0.78); }
.hv-showcase .hv-sc-tool:hover {
    background: linear-gradient(rgba(201,168,76,0.12), rgba(201,168,76,0.12)), var(--hv-deep);
    border-color: rgba(201,168,76,0.45);
    box-shadow: none;
}
/* Active tool: the border itself carries the gold ripple. The border is
   transparent and a border-box gradient layer shows through it (the two
   padding-box layers rebuild the fill), so the rounded corners survive -
   border-image would ignore the radius. Same gradient and 4s pace as the
   text shimmer, so the page's golds ripple in step. */
.hv-showcase .hv-sc-tool.is-active {
    border-color: transparent;
    background:
        linear-gradient(rgba(201,168,76,0.14), rgba(201,168,76,0.14)) padding-box,
        linear-gradient(var(--hv-deep), var(--hv-deep)) padding-box,
        linear-gradient(100deg, #b8943f 0%, #C9A84C 25%, #e8d07a 50%, #C9A84C 75%, #b8943f 100%) border-box;
    background-size: auto, auto, 200% 100%;
    animation: hvBorderShimmer 4s linear infinite;
    box-shadow: 0 2px 12px rgba(201,168,76,0.22);
}
@keyframes hvBorderShimmer {
    from { background-position: 0 0, 0 0, 200% 0; }
    to   { background-position: 0 0, 0 0, 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hv-showcase .hv-sc-tool.is-active { animation: none; }
}
.hv-showcase .hv-sc-tool.is-active svg { color: var(--accent); }
.hv-showcase .hv-sc-tool.is-active .hv-sc-tname { color: var(--hv-paper); }
/* Side by side: intro + tool groups on the left, the browser preview on the
   right, so clicking a tool and seeing it load happen in one field of view. */
.hv-sc-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(28px, 3.4vw, 54px);
    align-items: center;
    padding-block: clamp(46px, 6vh, 72px);
}
.hv-sc-left { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hv-sc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border: 1px solid #D4DAE3; border-radius: 100px;
    background: #fff; color: #5A6B7B; font-size: 10px; letter-spacing: 0.18em;
}
.hv-sc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.hv-sc-title { font-size: clamp(25px, 2.6vw, 38px); line-height: 1.16; color: var(--primary); margin: 14px 0 6px; }
.hv-sc-title em { font-style: italic; color: #A8882E; }
.hv-sc-sub { font-size: 0.95rem; line-height: 1.6; color: #5A6B7B; margin: 4px 0 10px; max-width: 48ch; }
.hv-sc-lead { font-size: 13.5px; line-height: 1.5; color: #5A6B7B; margin: 0; }

/* Multi-column rather than grid: groups of different heights pack into each
   other's leftover space instead of every group restarting at a shared row
   baseline and leaving holes under the short ones. */
.hv-sc-cats {
    columns: 2;
    column-gap: 20px;
    /* cancels the trailing padding-bottom of the last group in each column -
       the 18px is wanted BETWEEN stacked groups, not under the whole strip */
    margin-bottom: -18px;
}
.hv-sc-cat { break-inside: avoid; padding-bottom: 18px; }
.hv-sc-tool {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 11px; border-radius: 8px; cursor: pointer;
    /* 1.5px in every state - see the width note on .hv-sc-view-badge below */
    border: 1.5px solid #E2E7EE; background: #fff; text-align: left;
    font: inherit; color: #5A6B7B;
    transition: border-color .2s, background .2s, box-shadow .2s, transform 0.15s ease;
}
.hv-sc-tool:active { transform: scale(0.98); }
/* One-shot overshoot on the Viewing dot each time a tool activates - the
   page's single spent use of the overshoot curve. */
.hv-sc-tool.is-active .hv-sc-view-badge span { animation: cbmBump 0.45s var(--cbm-overshoot); }
.hv-sc-tool svg { width: 16px; height: 16px; flex: none; color: #93A0AE; }
.hv-sc-tname { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: #5A6B7B; }

/* Group heading: a name and a count over a hairline rule. No box, so a short
   column just ends rather than leaving an empty container behind. */
.hv-sc-cathd {
    display: flex; align-items: baseline; gap: 8px;
    padding: 0 2px 7px;
    border-bottom: 1px solid #D4DAE3;
    margin-bottom: 9px;
}
.hv-sc-catname {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--primary);
}
.hv-sc-catcount {
    margin-left: auto; font-size: 10px; font-weight: 700;
    color: #93A0AE; font-variant-numeric: tabular-nums;
}
.hv-sc-tools { display: flex; flex-direction: column; gap: 6px; }
.hv-sc-tool:hover { border-color: var(--accent); background: #FBF8EF; box-shadow: 0 2px 8px rgba(5,28,44,.06); }
.hv-sc-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hv-sc-tool.is-active { border-color: var(--accent); background: #FBF8EF; box-shadow: 0 2px 8px rgba(201,168,76,.18); }
.hv-sc-tool.is-active svg { color: #A8882E; }
.hv-sc-tool.is-active .hv-sc-tname { color: var(--primary); }
/* Activating a tool must not change its width. The rail below 900px is a
   `width: max-content` row, so a single pixel gained here shunts that group and
   every group after it sideways at the exact moment of the click. So: the badge
   is always laid out and merely hidden, the name keeps one weight in all
   states, and the border keeps one width and only changes colour. The gold
   border, gold icon and dot carry the active state on their own. */
.hv-sc-view-badge { display: inline-flex; visibility: hidden; margin-left: auto; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; color: #A8882E; text-transform: uppercase; }
.hv-sc-view-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hv-sc-tool.is-active .hv-sc-view-badge { visibility: visible; }

/* ---- Browser stage (right column) ---- */
.hv-sc-stage { position: relative; width: 100%; }
/* Entrance choreography, built to stack anticipation: intro copy cascades
   first, then every heading and tile drops in individually (55ms wave down
   the rails), and only once the wave has landed does the browser - the
   payoff, the object that IS the product - fade up from behind with its
   shadow blooming. Tiles use a one-shot keyframe with `backwards` fill, NOT
   a lingering transition: a transition left on .hv-sc-tool would hijack its
   hover/press timing forever after. */
/* The learning map opens as six complete stage groups, not as sixteen
   independent pills. Each column folds down from its rail marker together,
   making the path read as one composed object. */
.hv-tilecascade .hv-sc-cat {
    opacity: 0;
    transform: translateY(-14px) scaleY(0.72);
    transform-origin: top center;
}
.hv-tilecascade.hv-in .hv-sc-cat {
    opacity: 1;
    transform: none;
    animation: hvStageFoldOut 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}
@keyframes hvStageFoldOut {
    from { opacity: 0; transform: translateY(-14px) scaleY(0.72); }
    to   { opacity: 1; transform: none; }
}
.hv-sc-stage.hv-reveal { transform: translateY(18px) scale(0.97); }
.hv-sc-stage.hv-reveal.hv-in {
    /* Gentle S-curve, not the spring: the spring spends ~80% of its change
       in the first beat, which reads as a flash on a fade this long. */
    transition: opacity 1.6s cubic-bezier(0.45, 0.05, 0.25, 1) 1.55s,
                transform 1.6s cubic-bezier(0.45, 0.05, 0.25, 1) 1.55s;
}
.hv-sc-stage.hv-reveal .hv-sc-browser { transition: box-shadow 0.9s ease 2.6s; }
.hv-sc-stage.hv-reveal:not(.hv-in) .hv-sc-browser { box-shadow: 0 1px 1px rgba(9,26,40,.04); }
@media (prefers-reduced-motion: reduce) {
    .hv-tilecascade .hv-sc-cat { opacity: 1; transform: none; animation: none; }
    .hv-sc-stage.hv-reveal { transform: none; }
    .hv-sc-stage.hv-reveal .hv-sc-browser { transition: none; }
}
/* Below 900px the browser sits under the rails and is scrolled to on its
   own - the desktop "wait for the wave" delay would just read as dead time
   staring at empty space. */
@media (max-width: 900px) {
    .hv-sc-stage.hv-reveal.hv-in {
        transition: opacity 1.4s cubic-bezier(0.45, 0.05, 0.25, 1) 0.2s, transform 1.4s cubic-bezier(0.45, 0.05, 0.25, 1) 0.2s;
    }
    .hv-sc-stage.hv-reveal .hv-sc-browser { transition: box-shadow 0.7s ease 0.9s; }
}
/* Realistic browser window, sitting on the cream page */
.hv-sc-browser {
    position: relative; width: 100%; aspect-ratio: 480 / 306;
    border-radius: 12px; overflow: hidden; background: #fff;
    border: 1px solid rgba(9,26,40,0.09);
    box-shadow:
        0 1px 1px rgba(9,26,40,.04),
        0 10px 20px -8px rgba(9,26,40,.14),
        0 30px 54px -14px rgba(9,26,40,.22);
}
@media (min-width: 901px) {
    .hv-showcase .hv-sc-browser { max-width: 820px; margin-inline: auto; }
}
/* fixed 480x348 design canvas, scaled to fill the window (keeps previews crisp) */
.hv-sc-canvas {
    position: absolute; top: 0; left: 0;
    width: 480px; height: 306px;
    transform-origin: top left;
    transform: scale(var(--hv-sc-scale, 0.4));
    display: flex; flex-direction: column;
    background: #F4F6F9;
    font-family: var(--sans);
}

/* browser chrome: tab strip + toolbar */
.hv-sc-tabsrow { height: 15px; flex: none; background: #DEE1E6; display: flex; align-items: center; gap: 9px; padding: 0 11px; }
.hv-sc-traffic { display: flex; gap: 6px; }
.hv-sc-traffic span { width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.hv-sc-traffic .is-red { background: #FF5F57; }
.hv-sc-traffic .is-amber { background: #FEBC2E; }
.hv-sc-traffic .is-green { background: #28C840; }
.hv-sc-tab { align-self: flex-end; height: 12px; min-width: 64px; max-width: 100px; display: flex; align-items: center; gap: 4px; padding: 0 5px; background: #fff; border-radius: 9px 9px 0 0; }
.hv-sc-favicon { width: 6.5px; height: 6.5px; color: var(--accent); flex: none; }
.hv-sc-tab > span { font-size: 5.5px; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-sc-tabx { width: 6px; height: 6px; color: #93A0AE; flex: none; margin-left: auto; }
.hv-sc-newtab { width: 10px; height: 10px; border: none; background: none; color: #5A6B7B; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; }
.hv-sc-nav { height: 17px; flex: none; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 12px; box-shadow: 0 1px 0 rgba(9,26,40,.07); position: relative; z-index: 1; }
.hv-sc-navbtns { display: flex; align-items: center; gap: 7px; color: #5A6B7B; flex: none; }
.hv-sc-navbtns svg { width: 7.5px; height: 7.5px; }
.hv-sc-navbtns svg.is-dim { color: #C0C8D0; }
.hv-sc-omni { flex: 1; min-width: 0; height: 12px; border-radius: 100px; background: #F1F3F4; display: flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 5.5px; color: #3C4A57; font-weight: 500; }
.hv-sc-omni .hv-sc-lock { width: 5.5px; height: 5.5px; color: #5A6B7B; flex: none; }
.hv-sc-omni > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-sc-omni .hv-sc-star { width: 7px; height: 7px; color: #93A0AE; flex: none; margin-left: auto; }
.hv-sc-navicons { display: flex; align-items: center; gap: 11px; color: #5A6B7B; flex: none; }
.hv-sc-navicons svg { width: 7.5px; height: 7.5px; }
.hv-sc-avatar { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(160deg, #D8B45A, var(--accent)); display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }

/* preview viewport */
.hv-sc-view { position: relative; flex: 1; min-height: 0; }
.hv-sc-panel { position: absolute; inset: 0; padding: 16px; display: none; }
.hv-sc-panel.is-on { display: flex; }
.hv-sc-panel[data-panel="video"] { gap: 14px; }
.hv-sc-panel[data-panel="library"] { flex-direction: column; gap: 12px; }
.hv-sc-panel[data-panel="math"] { flex-direction: column; align-items: center; gap: 12px; }
.hv-sc-panel[data-panel="struct"] { gap: 12px; }
.hv-sc-panel[data-panel="cvbuild"] { gap: 12px; }
.hv-sc-panel[data-panel="cvanalyse"] { gap: 12px; }
.hv-sc-panel[data-panel="fit"] { gap: 12px; }
.hv-sc-panel[data-panel="tests"] { flex-direction: column; gap: 11px; }
.hv-sc-panel[data-panel="network"] { flex-direction: column; gap: 11px; }
.hv-sc-panel[data-panel="app"] { flex-direction: column; gap: 11px; }

/* live tool screenshot panel */
.hv-sc-panel[data-panel="shot"] { padding: 0; overflow: hidden; }
.hv-sc-panel[data-panel="shot"] img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
/* Crossfade ghost: the outgoing shot laid over the incoming one for ~320ms,
   so switching tools reads as the browser navigating, not a hard cut. */
.hv-sc-ghost {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: top left;
    opacity: 1; transition: opacity 0.32s ease; pointer-events: none;
}
/* Omnibox path does a tiny settle on each navigation */
#hv-sc-path.hv-navved { display: inline-block; animation: cbmRise 0.2s var(--spring); }
.hv-sc-tabs { display: flex; gap: 6px; }
.hv-sc-tabs span { padding: 6px 13px; border-radius: 8px 8px 0 0; background: #EEF1F5; color: #93A0AE; font-size: 10.5px; font-weight: 600; }
.hv-sc-tabs span.is-on { background: var(--primary); color: #fff; font-weight: 700; }

/* ---- Responsive ---- */
/* Below 900 the two columns can't both hold their content, so the browser drops
   under the tool list and the six groups become ONE horizontal row, wider than
   the viewport by design. The row is a scroll container the user can drag,
   wheel or swipe; home-v2.js also drifts it slowly, pausing the moment it is
   touched and resuming once the user has been idle. */
@media (max-width: 900px) {
    .hv-sc-grid { grid-template-columns: 1fr; gap: 34px; }
    /* A real scroll container, so the row can be dragged, wheeled or swiped.
       The drift in home-v2.js moves scrollLeft, so hand and drift share one
       coordinate system and never fight. Scrollbar hidden - the row is short
       and a bar under it would sit awkwardly against the browser preview. */
    .hv-sc-catswrap {
        display: block;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: -1.25rem;
        padding-inline: 1.25rem;
        /* The row runs to both edges, so fade it out there rather than letting
           tools be sliced off mid-word by the viewport. */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    }
    .hv-sc-catswrap::-webkit-scrollbar { display: none; }
    /* max-content so the row keeps its natural width and the wrap scrolls it,
       rather than the groups compressing to fit. home-v2.js appends a second
       copy of the set after these, which is what makes the loop seamless. */
    .hv-sc-cats {
        columns: auto;
        display: flex;
        gap: 16px;
        width: max-content;
        margin-bottom: 0;
    }
    /* Each group sizes to its own longest tool name rather than sharing one
       fixed width - CV Suite needs ~123px where Networking needs ~171px, and a
       common width would pad every short group out to the widest. */
    .hv-sc-cat { width: max-content; flex: none; padding-bottom: 0; }
    .hv-sc-tname { white-space: nowrap; }
    /* The word "Viewing" is what forced the tiles wide. The gold border and dot
       already carry the active state, so drop the label to its dot and leave
       the text in place for screen readers. */
    .hv-sc-view-badge { font-size: 0; gap: 0; }
}
/* Under reduced motion the JS skips the drift entirely and the row is left as
   the plain horizontal scroller it now already is - no extra rule needed. */
@media (prefers-reduced-motion: reduce) {
    .hv-sc-tool { transition: none; }
    .hv-sc-tool:active { transform: none; }
    .hv-sc-ghost { transition: none; }
    #hv-sc-path.hv-navved { animation: none; }
}

/* ============================================================
   WAITLIST MODAL
   "Join waitlist" on the Coaching card opens waitlist.html in
   embed mode inside this dialog rather than a mailto link.
   ============================================================ */
/* ============================================================
   PLATFORM LEARNING MAP
   The same tools and browser preview are retained, but the desktop structure
   now reads as one staged path. The explicit tablet and phone layouts keep the
   path usable without the old auto-scrolling tool rail. */
.hv-showcase .hv-sc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 1240px;
    padding-block: clamp(58px, 7vw, 88px);
}
/* The Platform has its own stage rail. The generic section thread repositions
   as the map unfolds and would otherwise cut through the first tool row. */
.hv-showcase.hv-thread::before { display: none; }
.hv-showcase .hv-sc-left { display: contents; }

/* Live social proof sits in the cream continuum as a quiet, factual bridge. */
.hv-proof-rail { position: relative; z-index: 1; padding: 1.25rem 1.25rem 0; }
.hv-proof-rail-inner {
    max-width: 1040px; margin: 0 auto; min-height: 104px;
    display: flex; align-items: center; justify-content: center; gap: clamp(1.4rem, 5vw, 4.5rem);
    padding: 1.2rem clamp(1.25rem, 4vw, 3rem);
    border-top: 1px solid rgba(14,37,53,.18); border-bottom: 1px solid rgba(14,37,53,.18);
}
.hv-proof-stat { display: flex; align-items: baseline; gap: .65rem; }
.hv-proof-stat strong { font-family: var(--serif); color: var(--text); font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hv-proof-stat span { max-width: 13rem; color: rgba(14,37,53,.72); font-size: .75rem; font-weight: 650; line-height: 1.35; letter-spacing: .02em; }
.hv-proof-divider { width: 1px; height: 36px; background: rgba(14,37,53,.22); }
.hv-hero-proof { margin-top: 1.5rem; padding: 0; opacity: .78; }
.hv-hero-proof .hv-proof-rail-inner {
    max-width: 680px; min-height: 0; gap: 2rem;
    padding: .82rem 1.35rem; border-color: rgba(14,37,53,.13);
}
.hv-hero-proof .hv-proof-stat { flex-direction: column; align-items: center; gap: .22rem; }
.hv-hero-proof .hv-proof-stat strong {
    font-family: var(--serif); font-size: 1.42rem; font-weight: 400;
    letter-spacing: -.025em; line-height: 1;
}
.hv-hero-proof .hv-proof-stat span {
    max-width: none; white-space: nowrap; color: rgba(14,37,53,.63);
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase;
}
.hv-hero-proof .hv-proof-divider { height: 28px; background: rgba(14,37,53,.16); }
@media (max-width: 620px) {
    .hv-proof-rail { padding-top: .75rem; }
    .hv-proof-rail-inner { min-height: 0; gap: 1rem; padding: 1rem; }
    .hv-proof-stat { flex-direction: column; gap: .25rem; align-items: flex-start; }
    .hv-proof-stat span { max-width: 8.5rem; font-size: .67rem; }
    .hv-proof-divider { height: 48px; }
    .hv-hero-proof .hv-proof-rail-inner { gap: .8rem; padding: .65rem .75rem; }
    .hv-hero-proof .hv-proof-stat { flex-direction: column; align-items: center; gap: .2rem; }
    .hv-hero-proof .hv-proof-stat strong { font-size: clamp(1.18rem, 4.6vw, 1.35rem); }
    .hv-hero-proof .hv-proof-stat span { max-width: clamp(7.5rem, 28vw, 8.25rem); white-space: normal; text-align: center; font-size: clamp(0.7rem, 2.7vw, 0.78rem); }
    .hv-hero-proof .hv-proof-divider { height: 20px; }
}
.hv-showcase .hv-sc-intro {
    max-width: 880px;
    margin: 0 auto clamp(42px, 5vw, 66px);
    text-align: center;
}
.hv-showcase .hv-sc-eyebrow { margin-inline: auto; }
.hv-showcase .hv-sc-sub { margin-inline: auto; }
.hv-showcase .hv-sc-lead { margin-top: 12px; }
.hv-showcase .hv-sc-catswrap { width: 100%; }
.hv-showcase .hv-sc-cats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    columns: unset;
    column-gap: 0;
    gap: clamp(10px, 1.2vw, 18px);
    margin: 0;
    padding-top: 2px;
}
.hv-showcase .hv-sc-cats::before {
    content: '';
    position: absolute;
    top: 69px;
    left: calc(100% / 12);
    right: calc(100% / 12);
    height: 1px;
    background: linear-gradient(90deg, rgba(201,168,76,0.82) 0 var(--hv-stage-progress, 20%), rgba(246,244,238,0.22) var(--hv-stage-progress, 20%) 100%);
}
.hv-showcase .hv-sc-cat {
    position: relative;
    z-index: 0;
    break-inside: unset;
    min-width: 0;
    padding: 0;
    order: var(--hv-stage-order);
}
.hv-showcase .hv-sc-cat[data-hv-stage="1"] { --hv-stage-order: 1; --hv-stage-label: 'Stage 01'; --hv-stage-number: '01'; }
.hv-showcase .hv-sc-cat[data-hv-stage="2"] { --hv-stage-order: 2; --hv-stage-label: 'Stage 02'; --hv-stage-number: '02'; }
.hv-showcase .hv-sc-cat[data-hv-stage="3"] { --hv-stage-order: 3; --hv-stage-label: 'Stage 03'; --hv-stage-number: '03'; }
.hv-showcase .hv-sc-cat[data-hv-stage="4"] { --hv-stage-order: 4; --hv-stage-label: 'Stage 04'; --hv-stage-number: '04'; }
.hv-showcase .hv-sc-cat[data-hv-stage="5"] { --hv-stage-order: 5; --hv-stage-label: 'Stage 05'; --hv-stage-number: '05'; }
.hv-showcase .hv-sc-cat[data-hv-stage="6"] { --hv-stage-order: 6; --hv-stage-label: 'Stage 06'; --hv-stage-number: '06'; }
/* The mobile rail appends one inert copy of each stage. It must follow the
   full real sequence, rather than interleaving stage-one clones with stage-one. */
.hv-showcase .hv-sc-cat.is-hv-stage-clone { order: calc(var(--hv-stage-order) + 6); }
.hv-showcase .hv-sc-cathd {
    position: relative;
    display: block;
    min-height: 98px;
    margin: 0;
    padding: 9px 4px 52px;
    border: 0;
    text-align: center;
}
.hv-showcase .hv-sc-cathd::before {
    display: block;
    margin-bottom: 5px;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: rgba(246,244,238,0.40);
    text-transform: uppercase;
}
.hv-showcase .hv-sc-cathd::before { content: var(--hv-stage-label); }
.hv-showcase .hv-sc-cathd::after {
    position: absolute;
    left: 50%;
    top: 58px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(246,244,238,0.30);
    border-radius: 50%;
    background: var(--hv-deep);
    color: rgba(246,244,238,0.54);
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 800;
    transform: translateX(-50%);
}
.hv-showcase .hv-sc-cathd::after { content: var(--hv-stage-number); }
.hv-showcase .hv-sc-catname {
    display: block;
    font-family: var(--display);
    font-size: clamp(0.9rem, 1.2vw, 1.08rem);
    letter-spacing: 0;
    text-transform: none;
    color: rgba(246,244,238,0.66);
}
.hv-showcase .hv-sc-cat.is-current .hv-sc-cathd::before { color: var(--accent); }
.hv-showcase .hv-sc-cat.is-current .hv-sc-cathd::after {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--hv-deep);
    box-shadow: 0 0 0 7px rgba(201,168,76,0.13);
}
.hv-showcase .hv-sc-cat.is-current .hv-sc-catname { color: var(--hv-paper); }
.hv-showcase .hv-sc-catcount { display: none; }
.hv-showcase .hv-sc-tools { gap: 7px; }
.hv-showcase .hv-sc-tool { min-height: 36px; padding: 8px 10px; }
.hv-showcase .hv-sc-tool svg { display: none; }
.hv-showcase .hv-sc-tool::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: rgba(246,244,238,0.34);
}
.hv-showcase .hv-sc-tool.is-active::before { background: var(--accent); }
.hv-showcase .hv-sc-stage {
    isolation: isolate;
    margin-top: clamp(24px, 3vw, 36px);
}
.hv-showcase .hv-sc-preview-label {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 auto 24px;
    padding: 0;
    background: transparent;
    color: var(--accent);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}
.hv-showcase .hv-sc-preview-label::before,
.hv-showcase .hv-sc-preview-label::after {
    content: '';
    height: 1px;
    flex: 1 1 0;
    background: rgba(201,168,76,0.65);
}
.hv-showcase .hv-sc-preview-label span { color: var(--hv-paper); }
.hv-showcase .hv-sc-preview-label span::before { content: '·'; margin-right: 14px; color: var(--accent); }
.hv-showcase .hv-sc-stage::after { display: none; }
.hv-showcase .hv-sc-preview-label { justify-content: center; position: relative; z-index: 1; }

@media (max-width: 900px) {
    .hv-showcase .hv-sc-grid { padding-block: 54px; }
    .hv-showcase .hv-sc-intro { margin-bottom: 40px; }
    .hv-showcase .hv-sc-catswrap {
        overflow: visible;
        margin: 0;
        padding: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .hv-showcase .hv-sc-cats {
        display: grid;
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 16px;
    }
    .hv-showcase .hv-sc-cats::before { display: none; }
    .hv-showcase .hv-sc-cathd { min-height: 86px; }
    .hv-showcase .hv-sc-stage { margin-top: 50px; }
}
/* The Platform tells the same three proof moments at every viewport. The old
   stage catalogue remains in the document for its existing JS wiring, but the
   customer-facing composition is this focused proof story. */
.hv-showcase .hv-sc-grid { display: none; }
.hv-sc-story { display: block; max-width: 1120px; margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) 1.25rem clamp(4rem, 8vw, 7rem); }
.hv-sc-story-intro { max-width: 43rem; margin: 0 auto clamp(2.75rem, 5vw, 4.5rem); text-align: center; }
.hv-platform-slogan {
    font-size: clamp(1.25rem, 1.8vw, 1.45rem);
    line-height: 1.2;
    color: var(--hv-paper);
    margin: clamp(4rem, 7vw, 6rem) 0 0;
    text-align: center;
}
.hv-platform-slogan em { font-style: italic; color: var(--accent); }
.hv-sc-story-intro h2 { margin: 0; color: var(--hv-paper); font-size: clamp(2.1rem, 4vw, 3.45rem); line-height: 1.08; letter-spacing: -0.035em; }
.hv-sc-story-intro > p:not(.hv-platform-slogan) { margin: 1rem auto 0; color: rgba(246,244,238,0.70); font-size: 1rem; line-height: 1.6; }
.hv-sc-story-proofs { display: grid; gap: 2.75rem; }
.hv-sc-story-shot { overflow: hidden; aspect-ratio: 1307 / 746; border: 1px solid rgba(246,244,238,0.22); border-radius: 14px; background: #F6F4EE; box-shadow: 0 18px 44px rgba(0,0,0,0.22); }
.hv-sc-story-shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hv-sc-story-copy { padding-top: 1.1rem; }
.hv-sc-story-copy h3 { margin: 0; color: var(--accent); font-family: var(--display); font-size: 1.35rem; line-height: 1.18; letter-spacing: -0.02em; }
.hv-sc-story-copy > p:not(.hv-sc-story-includes) { margin: 0.7rem 0 0; color: rgba(246,244,238,0.72); font-size: 0.95rem; line-height: 1.6; }
.hv-sc-story-includes { margin: 0.9rem 0 0; color: rgba(246,244,238,0.88); font-size: 0.78rem; font-weight: 700; line-height: 1.45; }
.hv-sc-story-more { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.75rem, 5vw, 4rem); border-top: 1px solid rgba(201,168,76,0.6); }
.hv-sc-story-more h3 { margin: 0; color: var(--hv-paper); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.15; letter-spacing: -0.025em; }
.hv-sc-story-more > p { margin: 0.75rem 0 0; color: rgba(246,244,238,0.7); font-size: 0.95rem; line-height: 1.6; }
.hv-sc-story-more ul { display: grid; gap: 0; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.hv-sc-story-more li { display: grid; gap: 0.35rem; padding: 1.1rem 0; border-top: 1px solid rgba(246,244,238,0.14); }
.hv-sc-story-more li:last-child { border-bottom: 1px solid rgba(246,244,238,0.14); }
.hv-sc-story-more strong { color: var(--hv-paper); font-size: 0.94rem; }
.hv-sc-story-more span { color: rgba(246,244,238,0.66); font-size: 0.86rem; line-height: 1.5; }
/* The three proof cards use a deliberately slower read: 30% longer than the
   original 720ms rise and 180ms stagger. */
.hv-showcase .hv-reveal:not(.hv-in) { transform: translateY(22px); }
.hv-showcase .hv-reveal.hv-in { transition-duration: 0.72s; }
.hv-sc-story-proofs.hv-reveal-seq.hv-in > * {
    transition-duration: 0.936s;
    transition-delay: calc(var(--i, 0) * 0.234s);
}
@media (min-width: 1024px) {
    .hv-sc-story-proofs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.6vw, 2.5rem); }
    .hv-sc-story-proof { min-width: 0; }
    .hv-sc-story-more ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
    .hv-sc-story-more li { padding-block: 1.25rem 0; }
    .hv-sc-story-more li:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
    .hv-platform-slogan { font-size: clamp(1.1rem, 4.75vw, 1.32rem); line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
    .hv-sc-story * { transition: none; }
    .hv-sc-story .hv-sc-story-proofs.hv-reveal-seq.hv-in > * {
        transition: none;
        transition-delay: 0s;
    }
}
.hv-wl-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: rgba(5, 20, 32, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: hvWlFade 0.22s ease both;
}
.hv-wl-overlay[hidden] { display: none; }

.hv-wl-dialog {
    position: relative;
    width: min(680px, 100%);
    /* The form is a constant ~583px tall - .steps-wrap is fixed to its tallest
       step - so the dialog is sized to hug it rather than leaving dead space. */
    height: min(620px, 100%);
    background: transparent;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(5, 20, 32, 0.42);
    overflow: hidden;
    animation: hvWlRise 0.28s var(--spring) both;
}

.hv-wl-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.hv-wl-close:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.hv-wl-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@keyframes hvWlFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hvWlRise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .hv-wl-overlay { padding: 0; align-items: flex-end; }
    .hv-wl-dialog { height: 92%; border-radius: 18px 18px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hv-wl-overlay, .hv-wl-dialog { animation: none; }
}