/* Homepage preview only. All selectors remain inside .home-v2 or use hv2-* names. */

.home-v2 {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: clip;
    background: var(--bg);
    color: var(--ink-2);
}

/* Dashboard fidelity: mirrors Vornin Dashboard Mockup.html. */
.hv2-dashboard-frame::after {
    display: none !important;
}

.hv2-mock-shell {
    --mock-bg: #0A0F24;
    --mock-panel: #151B33;
    --mock-head: #0C1329;
    --mock-teal: #00BFFF;
    --mock-ice: #4D94FF;
    --mock-white: #fff;
    --mock-steel: #B0B8C4;
    --mock-muted: rgba(176, 184, 196, 0.75);
    --mock-border: rgba(46, 58, 89, 0.70);
    --mock-hairline: rgba(46, 58, 89, 0.50);
    --mock-critical: #F95C66;
    --mock-high: #FF8A3D;
    --mock-medium: #E0B341;
    --mock-low: #4CAD7E;
    min-width: 1000px;
    color: var(--mock-white);
    background: var(--mock-bg);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hv2-mock-shell *,
.hv2-mock-shell *::before,
.hv2-mock-shell *::after {
    box-sizing: border-box;
}

.hv2-mock-shell svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hv2-mock-topbar {
    display: flex;
    align-items: center;
    height: 56px;
    gap: 14px;
    padding: 0 22px 0 16px;
    border-bottom: 1px solid var(--mock-border);
    background: var(--mock-bg);
}

.hv2-mock-hamburger {
    display: grid;
    gap: 4px;
    padding: 6px;
}

.hv2-mock-hamburger i {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--mock-steel);
}

.hv2-mock-logo {
    display: block;
    width: auto;
    height: 21px;
}

.hv2-mock-spacer {
    flex: 1;
}

.hv2-mock-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--mock-steel);
}

.hv2-mock-icon svg {
    width: 18px;
    height: 18px;
}

.hv2-mock-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px 5px 5px;
    font-size: 0.85rem;
}

.hv2-mock-user b {
    display: grid;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    place-items: center;
    color: var(--mock-bg);
    background: linear-gradient(145deg, var(--mock-teal), var(--mock-ice));
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
}

.hv2-mock-user svg {
    width: 14px;
    height: 14px;
    color: var(--mock-steel);
    stroke-width: 2;
}

.hv2-mock-body {
    display: flex;
    align-items: stretch;
}

.hv2-mock-sidebar {
    flex: none;
    width: 222px;
    padding: 14px 12px 24px;
    border-right: 1px solid var(--mock-border);
    background: var(--mock-bg);
}

.hv2-mock-nav-section {
    margin-top: 18px;
}

.hv2-mock-nav-section:first-child {
    margin-top: 2px;
}

.hv2-mock-nav-section p {
    margin: 0 0 7px;
    padding: 0 10px;
    color: var(--mock-muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hv2-mock-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--mock-steel);
    font-size: 0.87rem;
    transition: background 0.12s ease, color 0.12s ease;
}

.hv2-mock-nav-link:not(.is-active):hover {
    color: var(--mock-white);
    background: rgba(0, 191, 255, 0.06);
}

.hv2-mock-nav-link > svg {
    flex: none;
    width: 17px;
    height: 17px;
    opacity: 0.85;
}

.hv2-mock-nav-link.is-active {
    color: var(--mock-teal);
    background: rgba(0, 191, 255, 0.10);
}

.hv2-mock-nav-link .is-chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    opacity: 0.6;
}

.hv2-mock-badge {
    margin-left: auto;
    padding: 1px 7px;
    border: 1px solid rgba(255, 138, 61, 0.32);
    border-radius: 100px;
    color: var(--mock-high);
    background: rgba(255, 138, 61, 0.12);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
}

.hv2-mock-main {
    flex: 1;
    min-width: 0;
    padding: 22px 24px 26px;
    background: var(--mock-bg);
}

.hv2-mock-pagehead {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mock-border);
    border-radius: 12px;
    background: var(--mock-head);
}

.hv2-mock-pagehead::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(63deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 58px),
        repeating-linear-gradient(-63deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 58px);
    content: "";
    opacity: 0.7;
}

.hv2-mock-pagehead-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 20px;
}

.hv2-mock-pagehead-top > strong {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

.hv2-mock-scan-button {
    display: inline-flex;
    align-items: center;
    height: 38px;
    gap: 8px;
    padding: 0 16px;
    border-radius: 6px;
    color: var(--mock-bg);
    background: var(--mock-teal);
    box-shadow: 0 0 18px rgba(0, 191, 255, 0.28);
    font-size: 0.86rem;
    font-weight: 600;
}

.hv2-mock-scan-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.hv2-mock-scan-button svg path {
    fill: currentColor;
    stroke: none;
}

.hv2-mock-kpis {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--mock-hairline);
}

.hv2-mock-kpis > div {
    padding: 18px 28px 20px;
    border-right: 1px solid var(--mock-hairline);
}

.hv2-mock-kpis > div:last-child {
    border-right: 0;
}

.hv2-mock-kpis small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hv2-mock-kpis strong {
    display: block;
    margin-top: 12px;
    font-size: 2.1rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.hv2-mock-kpis strong.is-alert {
    color: var(--mock-high);
}

.hv2-mock-kpis strong.is-accent {
    color: var(--mock-teal);
}

.hv2-mock-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}

.hv2-mock-panel {
    overflow: hidden;
    border: 1px solid var(--mock-border);
    border-radius: 12px;
    background: var(--mock-panel);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.hv2-mock-panel:hover {
    border-color: rgba(0, 191, 255, 0.40);
    transform: translateY(-2px);
}

.hv2-mock-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mock-hairline);
}

.hv2-mock-panel-head span {
    color: var(--mock-steel);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hv2-mock-panel-head b {
    margin-left: auto;
    padding: 2px 9px;
    border: 1px solid rgba(0, 191, 255, 0.22);
    border-radius: 100px;
    color: var(--mock-steel);
    background: rgba(0, 191, 255, 0.07);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
}

.hv2-mock-severity-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(46, 58, 89, 0.30);
}

.hv2-mock-severity-row:last-child {
    border-bottom: 0;
}

.hv2-mock-severity {
    display: inline-flex;
    align-items: center;
    min-width: 92px;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid;
    border-radius: 6px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hv2-mock-severity svg {
    flex: none;
    width: 12px;
    height: 12px;
}

.hv2-mock-severity.is-critical { color: var(--mock-critical); border-color: rgba(249, 92, 102, 0.38); background: rgba(249, 92, 102, 0.16); }
.hv2-mock-severity.is-high { color: var(--mock-high); border-color: rgba(255, 138, 61, 0.32); background: rgba(255, 138, 61, 0.12); }
.hv2-mock-severity.is-medium { color: var(--mock-medium); border-color: rgba(224, 179, 65, 0.30); background: rgba(224, 179, 65, 0.10); }
.hv2-mock-severity.is-low { color: var(--mock-low); border-color: rgba(76, 173, 126, 0.28); background: rgba(76, 173, 126, 0.10); }
.hv2-mock-severity.is-critical svg,
.hv2-mock-severity.is-high svg { fill: currentColor; stroke: none; }

.hv2-mock-severity-row > i {
    display: block;
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(46, 58, 89, 0.40);
}

.hv2-mock-severity-row > i > b {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.hv2-mock-severity-row > strong {
    min-width: 30px;
    text-align: right;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.85rem;
}

.hv2-mock-severity-row > i > .is-critical { background-color: var(--mock-critical); }
.hv2-mock-severity-row > i > .is-high { background-color: var(--mock-high); }
.hv2-mock-severity-row > i > .is-medium { background-color: var(--mock-medium); }
.hv2-mock-severity-row > i > .is-low { background-color: var(--mock-low); }
.hv2-mock-severity-row .is-w14 { width: 14%; }
.hv2-mock-severity-row .is-w38 { width: 38%; }
.hv2-mock-severity-row .is-w71 { width: 71%; }
.hv2-mock-severity-row .is-w100 { width: 100%; }

.hv2-mock-scans {
    width: 100%;
    border-collapse: collapse;
}

.hv2-mock-scans th {
    padding: 11px 18px;
    border-bottom: 1px solid var(--mock-hairline);
    color: var(--mock-steel);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-align: left;
    text-transform: uppercase;
}

.hv2-mock-scans td {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(46, 58, 89, 0.24);
    font-size: 0.86rem;
    vertical-align: middle;
}

.hv2-mock-scans tr:last-child td {
    border-bottom: 0;
}

.hv2-mock-scans td:first-child {
    color: var(--mock-teal);
    font-size: 0.85rem;
}

.hv2-mock-scans td:last-child {
    color: var(--mock-muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    white-space: nowrap;
}

.hv2-mock-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid rgba(76, 173, 126, 0.28);
    border-radius: 100px;
    color: var(--mock-low);
    background: rgba(76, 173, 126, 0.10);
    font-size: 0.7rem;
    white-space: nowrap;
}

.hv2-mock-chip.is-running {
    border-color: rgba(0, 191, 255, 0.35);
    color: var(--mock-teal);
    background: rgba(0, 191, 255, 0.07);
}

.hv2-mock-chip i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.hv2-mock-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.hv2-mock-tile {
    overflow: hidden;
    padding: 16px 18px 14px;
    border: 1px solid var(--mock-border);
    border-radius: 12px;
    background: var(--mock-panel);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.hv2-mock-tile:hover {
    border-color: rgba(0, 191, 255, 0.40);
    transform: translateY(-2px);
}

.hv2-mock-tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mock-steel);
}

.hv2-mock-tile-head svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.hv2-mock-tile-head span {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hv2-mock-tile > strong {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 10px;
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.hv2-mock-tile > strong.is-success { color: var(--mock-low); }
.hv2-mock-tile > strong.is-posture { color: var(--mock-medium); }

.hv2-mock-tile > strong em {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
}

.hv2-mock-tile > small {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    color: var(--mock-low);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
}

.hv2-mock-tile > small svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.2;
}

.hv2-mock-spark {
    position: relative;
    height: 24px;
    margin-top: 10px;
}

.hv2-mock-spark svg {
    width: 100%;
    height: 24px;
}

.hv2-mock-spark path {
    fill: rgba(0, 191, 255, 0.12);
    stroke: none;
}

.hv2-mock-spark polyline {
    fill: none;
    stroke: var(--mock-teal);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.hv2-mock-spark span {
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--mock-muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
}

.hv2-mock-evidence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--mock-hairline);
    color: var(--mock-low);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.04em;
}

.hv2-mock-evidence svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 1080px) {
    .hv2-dashboard-frame {
        overflow: hidden;
    }

    .hv2-mock-shell {
        min-width: 0;
    }

    .hv2-mock-sidebar {
        display: none;
    }

    .hv2-mock-main {
        width: 100%;
        padding: 14px;
        overflow: hidden;
    }

    .hv2-mock-grid2 {
        grid-template-columns: 1fr;
    }

    .hv2-mock-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .hv2-mock-topbar {
        height: 48px;
        padding-inline: 10px;
    }

    .hv2-mock-icon,
    .hv2-mock-user > span,
    .hv2-mock-user > svg {
        display: none;
    }

    .hv2-mock-pagehead-top {
        padding: 18px;
    }

    .hv2-mock-pagehead-top > strong {
        font-size: 1.25rem;
    }

    .hv2-mock-scan-button {
        height: 34px;
        padding-inline: 12px;
        font-size: 0.75rem;
    }

    .hv2-mock-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .hv2-mock-kpis > div {
        padding: 14px 16px;
        border-bottom: 1px solid var(--mock-hairline);
    }

    .hv2-mock-kpis > div:nth-child(2) {
        border-right: 0;
    }

    .hv2-mock-kpis > div:nth-child(n + 3) {
        border-bottom: 0;
    }

    .hv2-mock-kpis strong {
        margin-top: 8px;
        font-size: 1.55rem;
    }

    .hv2-mock-scans th:nth-child(3),
    .hv2-mock-scans td:nth-child(3) {
        display: none;
    }

    .hv2-mock-scans {
        table-layout: fixed;
    }

    .hv2-mock-scans th:first-child,
    .hv2-mock-scans td:first-child {
        width: 65%;
    }

    .hv2-mock-scans td {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hv2-mock-scans th,
    .hv2-mock-scans td {
        padding: 10px 12px;
    }

    .hv2-mock-severity-row {
        gap: 8px;
        padding-inline: 12px;
    }

    .hv2-mock-severity {
        min-width: 84px;
        padding-inline: 7px;
        font-size: 0.58rem;
    }

    .hv2-mock-tiles {
        gap: 12px;
    }

    .hv2-mock-tile {
        padding: 13px;
    }
}

.home-v2 h1,
.home-v2 h2,
.home-v2 h3,
.home-v2 p,
.home-v2 ol,
.home-v2 ul,
.home-v2 figure {
    margin: 0;
}

.home-v2 h1,
.home-v2 h2,
.home-v2 h3 {
    color: var(--ink);
    font-family: var(--font-display);
}

.home-v2 h1,
.home-v2 h2 {
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.home-v2 p {
    text-wrap: pretty;
}

.hv2-container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.hv2-section {
    position: relative;
    padding: var(--space-9) 0;
}

.hv2-section[id] {
    scroll-margin-top: 140px;
}

.hv2-section-head {
    max-width: 760px;
    margin-bottom: 56px;
}

.hv2-section-head-wide {
    max-width: 920px;
}

.hv2-section-head h2 {
    max-width: 19ch;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.03;
}

.hv2-section-head-wide h2 {
    max-width: 23ch;
}

.hv2-section-head > p {
    max-width: 68ch;
    margin-top: 24px;
    color: var(--ink-2);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.72;
}

/* One continuous hero field spans the whole intro stage (hero + dashboard), so
   the mockup sits inside the same environment as the headline, never on a
   separate colour band. The lattice canvas overlays this; it does not own the
   base colour. Centre lifted to 40% so the brightest navy sits behind the H1
   and the field settles darker behind the mockup. */
.hv2-intro-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(78% 90% at 62% 40%, #10172D 0%, #080E1D 55%, #050814 100%);
}

.hv2-intro-stage > .hv2-hero,
.hv2-intro-stage > .hv2-dashboard-section {
    position: relative;
    z-index: 1;
}

.hv2-hero {
    min-height: 720px;
    padding: 176px 0 260px;
    isolation: isolate;
    background: transparent;
}

.hv2-hero::after {
    position: absolute;
    z-index: -1;
    right: -9vw;
    bottom: 4%;
    width: min(43vw, 650px);
    aspect-ratio: 1;
    border: 1px solid var(--teal-10);
    clip-path: polygon(50% 0, 100% 100%, 73% 100%, 50% 49%, 27% 100%, 0 100%);
    content: "";
    opacity: 0.45;
}

.hv2-close-grid {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image: url('/img/blacktrianglegrid20.svg');
    background-position: center 18%;
    background-size: min(1160px, 110vw) auto;
    filter: invert(1);
    opacity: 0.16;
    mask-image: radial-gradient(ellipse 62% 55% at 50% 34%, black 0%, transparent 76%);
}

/* Signal Lattice hero overlay (replaces the WebGL mesh + triangular grid).
   Spans the full intro stage as a transparent overlay above the shared field
   but below the hero copy and the mockup. The composition is anchored to the
   hero region in home-signal-lattice.js (tuned as a set); the fade mask keeps
   the motion strongest around the H1 and lets it carry down subtly behind the
   mockup without a hard edge. */
.hv2-hero-lattice {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.16) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.16) 100%);
}

.hv2-hero-lattice::before {
    content: "";
    position: absolute;
    width: 95%;
    aspect-ratio: 1;
    left: 28%;
    top: -38%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 191, 255, 0.07) 0%, rgba(77, 148, 255, 0.035) 30%, rgba(10, 15, 36, 0) 68%);
    filter: blur(40px);
    will-change: transform;
    animation: hv2-lattice-drift 26s ease-in-out infinite alternate;
}

@keyframes hv2-lattice-drift {
    0% { transform: translate(-7%, -3%) scale(1); }
    35% { transform: translate(6%, 4%) scale(1.06); }
    70% { transform: translate(11%, 11%) scale(0.97); }
    100% { transform: translate(-2%, 7%) scale(1.04); }
}

.hv2-hero-lattice canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hv2-lattice-glow {
    filter: blur(3px);
    opacity: 0.6;
}

.hv2-lattice-protect {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(46% 42% at 50% 47%, rgba(4, 6, 13, 0.54) 0%, rgba(4, 6, 13, 0.355) 52%, rgba(4, 6, 13, 0.09) 78%, rgba(4, 6, 13, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .hv2-hero-lattice::before { animation: none; }
}

.hv2-hero-inner {
    position: relative;
    text-align: center;
}

.hv2-hero h1 {
    max-width: 1180px;
    margin-inline: auto;
    font-size: clamp(2.7rem, 6.3vw, 4.5rem);
    font-weight: 700;
    line-height: 1.02;
    text-wrap: balance;
}

.hv2-hero h1 strong {
    display: block;
    color: var(--teal);
    font-weight: inherit;
    line-height: 1.12;
    padding-bottom: 0.08em;
}

/* Gradient-clipped accent line: teal -> ice -> soft white, richer than flat teal.
   Solid teal above stays the fallback where background-clip: text is unsupported. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hv2-hero h1 strong {
        background: linear-gradient(100deg, var(--teal) 0%, var(--ice) 48%, rgba(243, 246, 250, 0.82) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.hv2-hero-copy {
    max-width: 760px;
    margin: 32px auto 0 !important;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.7vw, 1.26rem);
    line-height: 1.72;
}

.hv2-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

/* Hero ghost CTA ("See pricing") matches the Signal Lattice v5 ghost button:
   transparent fill, light ink text, thin teal outline, soft glow on hover.
   The pre-footer close section reuses the same treatment for its "See pricing". */
.hv2-hero .hv2-actions .btn-ghost,
.hv2-close .hv2-actions .btn-ghost {
    color: var(--ink, #F3F6FA);
    background: transparent;
    border: 1px solid rgba(0, 191, 255, 0.34);
}

.hv2-hero .hv2-actions .btn-ghost:hover,
.hv2-close .hv2-actions .btn-ghost:hover {
    color: var(--ink, #F3F6FA);
    border-color: rgba(0, 191, 255, 0.8);
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.18);
}

.hv2-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px !important;
    color: var(--ink-3);
    font-size: 0.79rem;
}

.hv2-trust span {
    color: var(--teal);
}

/* Lift the trust line off the shader when a bright pool orbits behind it. */
.hv2-hero .hv2-trust {
    text-shadow: 0 1px 2px rgba(6, 10, 26, 0.65), 0 0 6px rgba(6, 10, 26, 0.4);
}

/* On-load entrance: fade + rise, staggered per hero element. */
@keyframes hv2-hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hv2-hero-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hv2-hero-inner > h1,
.hv2-hero-inner > .hv2-hero-copy,
.hv2-hero-inner > .hv2-actions,
.hv2-hero-inner > .hv2-trust,
.hv2-dashboard-section {
    opacity: 0;
    animation: hv2-hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hv2-hero-inner > h1 { animation-delay: 0.1s; }
.hv2-hero-inner > .hv2-hero-copy { animation-delay: 0.25s; }
.hv2-hero-inner > .hv2-actions { animation-delay: 0.4s; }
.hv2-hero-inner > .hv2-trust { animation-delay: 0.55s; }

/* Dashboard settles in with a slow, pure fade so it reads as intentional, not a load-in. */
.hv2-dashboard-section {
    animation-name: hv2-hero-fade;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-delay: 0.65s;
}

@media (prefers-reduced-motion: reduce) {
    .hv2-hero-inner > h1,
    .hv2-hero-inner > .hv2-hero-copy,
    .hv2-hero-inner > .hv2-actions,
    .hv2-hero-inner > .hv2-trust,
    .hv2-dashboard-section {
        opacity: 1;
        animation: none;
    }
}

.hv2-dashboard-section {
    position: relative;
    z-index: 3;
    /* Tightened so the reassurance-to-mockup gap is ~95px at desktop widths.
       The lattice apex is re-anchored in home-signal-lattice.js to land a few
       px behind this top edge, responsively, so it tracks wherever the mockup
       sits. Hero copy, CTA position and dashboard size are unchanged; only this
       vertical offset moved. */
    margin-top: -145px;
    padding-bottom: 92px;
}

.hv2-dashboard-wrap {
    position: relative;
    min-width: 0;
    isolation: isolate;
}

.hv2-dashboard-wrap::after {
    position: absolute;
    z-index: -2;
    right: 8%;
    bottom: -22px;
    left: 8%;
    height: 70px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.76);
    filter: blur(34px);
    content: "";
}

.hv2-dashboard-aura {
    position: absolute;
    inset: -8% 9% 54%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--ice-dim), transparent 68%);
    filter: blur(52px);
    opacity: 0.42;
}

.hv2-dashboard-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--r-md);
    background: var(--bg);
    box-shadow:
        inset 0 0 0 1px var(--ice-border),
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 28px 58px -34px rgba(0,0,0,0.72),
        0 68px 130px -52px rgba(0,0,0,0.96);
}

@media (min-width: 1081px) {
    .hv2-dashboard-frame {
        box-sizing: border-box;
        border: 1px solid rgba(77,148,255,0.21);
        box-shadow:
            0 28px 58px -34px rgba(0,0,0,0.72),
            0 68px 130px -52px rgba(0,0,0,0.96);
    }
}

.hv2-dashboard-frame::after {
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(110deg, rgba(255,255,255,0.055), transparent 18% 82%, var(--teal-soft)),
        linear-gradient(180deg, var(--ice-dim), transparent 22%);
    content: "";
}

.hv2-dashboard-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px !important;
    color: var(--ink-3);
    font-size: 0.72rem;
}

.hv2-dashboard-caption > span {
    background: var(--teal);
}

/* Static in-page jump strip (NOT sticky). Sits once below the hero and scrolls
   away with the page — deliberately not pinned, to avoid a second stacked bar
   under the floating pill nav. */
.hv2-section-nav {
    border-block: 1px solid var(--border-soft);
    background: var(--bg-92);
    backdrop-filter: blur(14px);
}

.hv2-section-nav .hv2-container {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.hv2-section-nav .hv2-container::-webkit-scrollbar {
    display: none;
}

.hv2-section-nav a {
    position: relative;
    flex: 0 0 auto;
    padding: 15px 18px;
    color: var(--ink-3);
    font-size: 0.76rem;
    font-weight: 600;
}

.hv2-section-nav a::after {
    position: absolute;
    right: 18px;
    bottom: 8px;
    left: 18px;
    height: 1px;
    background: var(--teal);
    content: "";
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-in-out;
}

.hv2-section-nav a:hover,
.hv2-section-nav a:focus-visible {
    color: var(--ink);
}

.hv2-section-nav a:hover::after,
.hv2-section-nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

@media (prefers-reduced-motion: reduce) {
    .hv2-section-nav a::after {
        transition: none;
    }
}

.hv2-lifecycle {
    background:
        radial-gradient(circle at 15% 50%, var(--teal-05), transparent 30%),
        var(--bg);
}

.hv2-lifecycle-rail {
    --hv2-lifecycle-duration: 0ms;
    --hv2-lifecycle-line-length: calc(66.667% + 44px);
    --hv2-lifecycle-progress: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

.hv2-lifecycle-rail::before {
    position: absolute;
    z-index: 0;
    top: 24px;
    /* Anchor the line to the first and last badge centers. Badge 1 sits flush-left
       (center = 24px); badges 2-3 are indented 44px, so their center = 68px into
       their 1/3 column. Symmetric 15%/85% left the line floating right of badge 1. */
    left: 24px;
    width: var(--hv2-lifecycle-line-length);
    height: 1px;
    background: var(--border-soft);
    content: "";
}

.hv2-lifecycle-rail::after {
    position: absolute;
    z-index: 0;
    top: 24px;
    left: 24px;
    width: var(--hv2-lifecycle-line-length);
    height: 1px;
    background: linear-gradient(90deg, var(--teal-20), var(--teal), var(--ice-border));
    box-shadow: 0 0 14px var(--teal-20);
    content: "";
    transform: scaleX(var(--hv2-lifecycle-progress));
    transform-origin: left center;
    transition: transform var(--hv2-lifecycle-duration) linear;
}

.hv2-lifecycle.is-lifecycle-running .hv2-lifecycle-rail::after {
    will-change: transform;
}

.hv2-lifecycle-rail li {
    --hv2-step-fill: 0;
    --hv2-step-fill-duration: 0ms;
    position: relative;
    z-index: 1;
    padding: 0 44px 0 0;
}

.hv2-lifecycle-control {
    position: absolute;
    z-index: 4;
    inset: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    cursor: pointer;
}

.hv2-lifecycle-control:focus-visible {
    outline: 1px solid var(--teal);
    outline-offset: 8px;
}

.hv2-lifecycle-rail li + li {
    padding-left: 44px;
}

.hv2-lifecycle-rail li:last-child {
    padding-right: 0;
}

.hv2-lifecycle-rail li > span {
    position: relative;
    z-index: 3;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid var(--teal-30);
    border-radius: 50%;
    background: var(--bg);
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    transition: border-color 0.22s ease-out, color 0.22s ease-out, box-shadow 0.3s ease-out, background 0.22s ease-out;
}

.home-v2.is-motion-ready .hv2-lifecycle-rail li:not(.is-active) > span {
    border-color: var(--border);
    color: var(--ink-3);
}

.home-v2.is-motion-ready .hv2-lifecycle-rail li.is-active > span {
    border-color: var(--teal-30);
    color: var(--teal);
    background: color-mix(in srgb, var(--bg) 92%, var(--teal));
    box-shadow: 0 5px 20px var(--teal-10);
}

/* Vertical per-step progress line, left of each card's text block. A very subtle
   always-present track (::before) plus a teal fill (::after) that scales top->bottom
   over the active step's timer. The fill is driven from JS via --hv2-step-fill /
   --hv2-step-fill-duration, kept in lockstep with the horizontal rail's timing.
   Thin, square-ended, no glow/pulse — deliberately quieter than the main rail. */
.hv2-step-body {
    position: relative;
    padding-left: 18px;
}

.hv2-step-body::before,
.hv2-step-body::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    content: "";
}

.hv2-step-body::before {
    background: var(--border-soft);
}

.hv2-step-body::after {
    background: linear-gradient(180deg, var(--teal-20), var(--teal), var(--ice-border));
    transform: scaleY(var(--hv2-step-fill));
    transform-origin: top;
    transition: transform var(--hv2-step-fill-duration) linear;
}

.hv2-lifecycle-rail h3 {
    margin-top: 28px;
    color: var(--ink);
    font-size: 1.5rem;
    transition: color 0.22s ease-out;
}

.hv2-lifecycle-rail p {
    margin-top: 14px !important;
    color: var(--ink-2);
    line-height: 1.72;
    transition: color 0.22s ease-out;
}

/* Inactive state uses explicit, readable ink colours (never opacity) so every step
   stays comfortably above WCAG 1.4.3. Active text is only slightly brighter; the
   teal node + vertical fill carry the active-state signal, not dimming. */
.home-v2.is-motion-ready .hv2-lifecycle-rail li:not(.is-active) h3 {
    color: var(--ink-2);
}

.home-v2.is-motion-ready .hv2-lifecycle-rail li:not(.is-active) p {
    color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
    .home-v2.is-motion-ready .hv2-lifecycle-rail li:not(.is-active):hover h3 {
        color: var(--ink);
    }

    .home-v2.is-motion-ready .hv2-lifecycle-rail li:not(.is-active):hover p {
        color: var(--ink-2);
    }

    .home-v2.is-motion-ready .hv2-lifecycle-rail li:not(.is-active):hover > span {
        border-color: var(--teal-30);
        background: color-mix(in srgb, var(--bg) 95%, var(--teal));
        color: var(--teal);
        box-shadow: 0 4px 16px var(--teal-10);
    }
}

.hv2-workflows {
    background:
        radial-gradient(ellipse 60% 40% at 85% 42%, var(--ice-dim), transparent 65%),
        var(--surface);
}

.hv2-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 290px;
    gap: 20px;
}

.hv2-bento-card {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 38%),
        var(--card);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 18px 38px rgba(0,0,0,0.22);
    isolation: isolate;
}

.hv2-bento-card::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(10,15,36,0.82) 0%, rgba(10,15,36,0.34) 48%, transparent 70%);
    content: "";
}

.hv2-card-copy {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    max-width: 55%;
    padding: 30px;
}

.hv2-card-copy h3 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.14;
}

.hv2-card-copy p {
    margin-top: 13px !important;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.62;
}

.hv2-shot {
    position: absolute;
    z-index: 0;
    top: 23%;
    right: -20%;
    bottom: -16%;
    width: 78%;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 10px 0 0 0;
    background: var(--bg);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.hv2-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

.hv2-bento-attention {
    grid-column: 6 / -1;
    grid-row: 1 / span 2;
}

.hv2-bento-attention .hv2-card-copy {
    max-width: 60%;
}

.hv2-bento-attention .hv2-shot {
    top: 35%;
    right: -7%;
    bottom: -7%;
    width: 92%;
}

.hv2-bento-exposed {
    grid-column: 1 / span 5;
    grid-row: 1;
}

.hv2-bento-remediation {
    grid-column: 1 / span 5;
    grid-row: 2;
}

.hv2-bento-change,
.hv2-bento-evidence,
.hv2-bento-reporting {
    grid-column: span 4;
}

.hv2-bento-change::after,
.hv2-bento-evidence::after,
.hv2-bento-reporting::after {
    background: linear-gradient(180deg, rgba(10,15,36,0.88) 0%, rgba(10,15,36,0.42) 56%, transparent 84%);
}

.hv2-bento-change .hv2-card-copy,
.hv2-bento-evidence .hv2-card-copy,
.hv2-bento-reporting .hv2-card-copy {
    max-width: 100%;
    padding: 26px;
}

.hv2-bento-evidence .hv2-shot,
.hv2-bento-reporting .hv2-shot {
    top: 47%;
    right: -12%;
    bottom: -24%;
    width: 115%;
}

/* Change card: framed top panel keeps the "Attack surface" header and KPI band readable. */
.hv2-bento-change .hv2-shot {
    top: 24px;
    right: 24px;
    bottom: auto;
    left: 24px;
    width: auto;
    aspect-ratio: 1552 / 640;
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.38);
    -webkit-mask-image: linear-gradient(180deg, black 52%, transparent 94%);
    mask-image: linear-gradient(180deg, black 52%, transparent 94%);
}

/* Remediation composite: solution = SOLUTION panel (crisp, front, readable),
   badge = Critical pill anchored to the panel corner.
   Default (below desktop): front layers hidden, solution fills. */
.hv2-shot-stack .hv2-layer-front {
    display: none;
}

.hv2-bento-remediation .hv2-layer-badge {
    position: absolute;
    z-index: 4;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 166, 181, 0.62);
    border-radius: 999px;
    background: #f08093;
    box-shadow: 0 10px 24px rgba(0,0,0,0.44), 0 0 18px rgba(240,128,147,0.14);
    color: #10152b;
    font-size: 0.72rem;
    font-weight: 780;
    line-height: 1;
    white-space: nowrap;
}

.hv2-bento-remediation .hv2-shot img {
    object-position: center;
}

/* Alternating-card entrance: proof layers lift into place on first view.
   Initial states gate on .is-motion-ready (JS, skipped under reduced motion). */
/* Transition lives on the active state only: the initial hide applies
   instantly, and only the reveal animates. */
.home-v2.is-motion-ready .hv2-anim.is-motion-active .hv2-shot img {
    transition:
        opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        translate 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        rotate 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-v2.is-motion-ready .hv2-anim.is-motion-active .hv2-layer-front {
    transition-delay: 0.24s;
}

.home-v2.is-motion-ready .hv2-anim:not(.is-motion-active) .hv2-shot img {
    filter: blur(9px);
    translate: 0 30px;
}

.home-v2.is-motion-ready .hv2-bento-attention.hv2-anim:not(.is-motion-active) .hv2-shot img {
    translate: 44px 0;
}

.home-v2.is-motion-ready .hv2-anim:not(.is-motion-active) .hv2-layer-front {
    opacity: 0;
    translate: 0 46px;
}

.home-v2.is-motion-ready .hv2-bento-reporting.hv2-anim:not(.is-motion-active) .hv2-layer-front {
    rotate: 0deg;
}

.hv2-text-link {
    margin-top: 30px;
    text-align: right;
}

.hv2-text-link a,
.hv2-framework-line a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-weight: 600;
}

.hv2-text-link a span,
.hv2-framework-line a span {
    color: var(--teal);
    transition: transform var(--dur-quick) ease-out;
}

.hv2-text-link a:hover span,
.hv2-framework-line a:hover span {
    transform: translateX(4px);
}

.hv2-coverage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--bg);
    background-image:
        linear-gradient(90deg, rgba(10, 15, 36, 0.9) 0%, rgba(10, 15, 36, 0.62) 46%, rgba(10, 15, 36, 0.28) 100%),
        url("/img/brand/signal-field-spine-teal-left-2880x1620.webp");
    background-repeat: no-repeat;
    background-position: center, 22% center;
    background-size: cover, 116% auto;
}

.hv2-coverage > .hv2-container {
    position: relative;
    z-index: 1;
}

.hv2-coverage .hv2-section-head {
    max-width: none;
    margin-bottom: 42px;
}

.hv2-coverage .hv2-section-head h2 {
    max-width: none;
}

.hv2-coverage .hv2-section-head > p {
    margin-top: 20px;
}

.hv2-coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.hv2-coverage-grid article {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(3.25rem, auto) auto;
    align-content: start;
    margin: 0;
    padding: 34px clamp(26px, 3vw, 44px) 38px;
}

.hv2-coverage-grid article + article {
    border-left: 1px solid var(--border-soft);
}

.hv2-coverage-pill {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 9px;
    min-height: 36px;
    padding: 4px 12px 4px 5px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 52%, transparent);
}

.hv2-coverage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: transparent;
    color: var(--teal);
    opacity: 0.76;
}

.hv2-coverage-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hv2-coverage-index {
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.hv2-coverage-grid h3 {
    max-width: 18ch;
    min-height: 2.3em;
    margin-top: 17px;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.15;
}

.hv2-coverage-summary {
    max-width: 34ch;
    margin-top: 18px;
    color: var(--ink-2);
    font-size: 0.9rem;
    line-height: 1.7;
}

.hv2-evidence {
    background:
        radial-gradient(circle at 76% 43%, var(--teal-10), transparent 30%),
        var(--surface);
}

.hv2-evidence-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(470px, 1.2fr);
    align-items: center;
    gap: 76px;
}

.hv2-evidence-copy .hv2-section-head {
    margin-bottom: 42px;
}

.hv2-proof-list {
    list-style: none;
}

.hv2-proof-list li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 13px;
    padding: 20px 0;
    border-top: 1px solid var(--border-soft);
}

.hv2-proof-list li:last-child {
    border-bottom: 1px solid var(--border-soft);
}

.hv2-proof-list span {
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 0.64rem;
}

.hv2-proof-list .hv2-proof-icon {
    display: inline-flex;
    align-self: start;
    margin-top: 3px;
    color: var(--teal);
}

.hv2-proof-list .hv2-proof-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.hv2-proof-list p {
    color: var(--ink-soft);
    line-height: 1.65;
}

.hv2-evidence-visual {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 38%),
        var(--card);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 54px rgba(0,0,0,0.3);
    transform: translateY(-16px);
}

.hv2-evidence-visual figcaption {
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.hv2-event-chain {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 34px;
    list-style: none;
}

/* Line ends land on the first/last node centres. With 5 equal columns and a
   8px gap, each outer column centre sits at calc(10% - 3.2px) from its edge
   (not 10%), so the line stops exactly under the outer dots instead of
   overshooting them. */
.hv2-event-chain::before {
    position: absolute;
    top: 7px;
    right: calc(10% - 3.2px);
    left: calc(10% - 3.2px);
    height: 1px;
    background: var(--border-soft);
    content: "";
}

.hv2-event-chain::after {
    position: absolute;
    top: 7px;
    right: calc(10% - 3.2px);
    left: calc(10% - 3.2px);
    height: 1px;
    background: linear-gradient(90deg, var(--teal-20), var(--teal), var(--green));
    box-shadow: 0 0 14px var(--teal-20);
    content: "";
    transform-origin: left center;
}

.home-v2.is-motion-ready .hv2-event-chain::after {
    transform: scaleX(0);
}

.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-event-chain::after {
    transform: scaleX(1);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.hv2-event-chain li {
    position: relative;
    padding-top: 25px;
    color: var(--ink-2);
    font-size: 0.68rem;
    text-align: center;
}

.home-v2.is-motion-ready .hv2-event-chain li {
    opacity: 0.24;
    transform: translateY(10px);
}

.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-event-chain li {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.28s ease-out, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-event-chain li:nth-child(1) { transition-delay: 0.08s; }
.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-event-chain li:nth-child(2) { transition-delay: 0.24s; }
.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-event-chain li:nth-child(3) { transition-delay: 0.4s; }
.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-event-chain li:nth-child(4) { transition-delay: 0.56s; }
.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-event-chain li:nth-child(5) { transition-delay: 0.72s; }

.hv2-event-chain li::before {
    position: absolute;
    top: 2px;
    left: calc(50% - 5px);
    z-index: 1;
    width: 10px;
    height: 10px;
    border: 2px solid var(--card);
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 2px 12px var(--teal-30);
    content: "";
}

.hv2-event-chain li.is-verified {
    color: var(--green);
}

.hv2-event-chain li.is-verified::before {
    background: var(--green);
    box-shadow: 0 2px 12px var(--green-dim);
}

.hv2-event-chain span,
.hv2-event-chain time {
    display: block;
}

.hv2-event-chain time {
    margin-top: 4px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.56rem;
}

.hv2-hash {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 16px;
    margin-top: 30px;
    padding: 18px;
    border: 1px solid var(--teal-20);
    border-radius: var(--r-md);
    background: var(--bg);
}

.home-v2.is-motion-ready .hv2-hash {
    opacity: 0.2;
    clip-path: inset(0 100% 0 0 round var(--r-md));
}

.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-hash {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--r-md));
    transition: opacity 0.3s ease-out 0.82s, clip-path 0.54s cubic-bezier(0.16, 1, 0.3, 1) 0.82s;
}

.hv2-hash small {
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
}

.hv2-hash code {
    color: var(--teal);
    font-size: 0.78rem;
}

.hv2-hash strong {
    grid-row: 1 / 3;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--green);
    font-size: 0.72rem;
}

.hv2-evidence-output {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.hv2-evidence-output > div {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--surface);
}

.home-v2.is-motion-ready .hv2-evidence-output > div {
    opacity: 0.2;
    transform: translateY(10px);
}

.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-evidence-output > div {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-evidence-output > div:first-child {
    transition-delay: 1.02s;
}

.home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-evidence-output > div:last-child {
    transition-delay: 1.14s;
}

.hv2-evidence-output small {
    display: block;
    margin-bottom: 10px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
}

.hv2-evidence-output > div:first-child span {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 7px;
    border: 1px solid var(--ice-border);
    border-radius: 100px;
    color: var(--ink-soft);
    font-size: 0.6rem;
}

.hv2-pack strong,
.hv2-pack span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hv2-pack strong {
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.hv2-pack span {
    margin-top: 5px;
    color: var(--ink-3);
    font-size: 0.57rem;
}

.hv2-framework-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 64px;
    padding-block: 22px;
    border-block: 1px solid var(--border);
}

.hv2-framework-line p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.hv2-framework-line p a {
    color: var(--teal);
    font-family: var(--font-display);
    font-size: 0.95rem;
    transition: color var(--dur-quick) ease-out;
}

.hv2-framework-line p a:hover,
.hv2-framework-line p a:focus-visible {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--teal);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.hv2-framework-line p span {
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

.hv2-framework-line p .hv2-fw {
    color: var(--ink-3);
    font-family: var(--font-display);
    font-size: 0.85rem;
}

.hv2-why {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 19%, var(--teal-05), transparent 28%),
        var(--bg);
}

.hv2-why > .hv2-container {
    position: relative;
    z-index: 1;
}

/* Oversized ghosted Vornin apex geometry spanning the whole section. Kept
   at ~4-5% opacity and masked so it never fights the headline or card text. */
.hv2-why-crop {
    position: absolute;
    top: -6%;
    left: 50%;
    z-index: 0;
    width: 128%;
    height: 118%;
    opacity: 0.05;
    pointer-events: none;
    transform: translateX(-50%);
    -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 58%, #000 0%, rgba(0, 0, 0, 0.55) 52%, transparent 80%);
    mask-image: radial-gradient(ellipse 62% 66% at 50% 58%, #000 0%, rgba(0, 0, 0, 0.55) 52%, transparent 80%);
}

.hv2-why-crop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Why Vornin section-head. Head stays in .hv2-container (global grid), left
   edge on the grid. H2-to-lede gap matches the other sections (global 24px);
   only the lede-to-cards gap is tightened. */
.hv2-why .hv2-section-head {
    margin-bottom: 44px;
    max-width: none;
}

/* Two deliberate lines: "Vulnerability management" / "built for evidence,
   not just detection". The second line is wider than the 4.5rem cap can fit in
   the 1180px grid, so the H2 spans the full grid width and the top of the cap
   is trimmed just enough (only engages at the largest sizes). */
.hv2-why #why-title {
    max-width: none;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    letter-spacing: -0.012em;
}

.hv2-why-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.hv2-why-list article {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-column: auto;
    margin: 0;
    padding: 32px 34px 34px;
    border: 1px solid var(--border);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 34%),
        linear-gradient(105deg, var(--card) 0%, color-mix(in srgb, var(--card) 55%, transparent) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    transition:
        border-color var(--dur-quick) ease-out,
        box-shadow var(--dur-quick) ease-out,
        transform var(--dur-quick) ease-out;
}

/* Right column fades further to transparent so the enlarged logo crop bleeds through. */
.hv2-why-list article:nth-child(2),
.hv2-why-list article:nth-child(4) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 34%),
        linear-gradient(105deg, color-mix(in srgb, var(--card) 60%, transparent) 0%, color-mix(in srgb, var(--card) 10%, transparent) 100%);
}

.hv2-why-list article:hover,
.hv2-why-list article:focus-within {
    border-color: color-mix(in srgb, var(--teal) 45%, var(--border));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 44px rgba(0, 0, 0, 0.34),
        0 0 0 1px var(--teal-10);
    transform: translateY(-2px);
}

.hv2-why-list article > span {
    display: block;
    max-width: 24ch;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
}

/* Nested apex/core brand glyph replaces the generic diamond bullet. Sized so
   the nested geometry reads (not a bullet), aspect-ratio preserved via viewBox.
   Flows inline with the heading's first line and is nudged to sit optically on
   its cap-height (top ~2-3px below the first capital). Static with a restrained
   cold-light glow; pulses once on hover/focus. */
.hv2-why-glyph {
    display: inline-block;
    width: auto;
    height: clamp(14px, 0.68em, 16px);
    margin-right: 11px;
    overflow: visible;
    vertical-align: -0.07em;
    filter: drop-shadow(0 0 3px var(--teal-30));
}

.hv2-why-glyph .apex {
    fill: var(--teal);
}

.hv2-why-glyph .core {
    fill: var(--teal);
    opacity: 0.86;
}

@keyframes hv2-glyph-pulse {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 3px var(--teal-30));
    }
    50% {
        opacity: 0.32;
        filter: drop-shadow(0 0 7px var(--teal)) drop-shadow(0 0 12px rgba(77, 148, 255, 0.18));
    }
}

/* One brief pulse on interaction, and one synchronized pulse on section entry
   (class added then removed by JS). Never continuous across the four cards. */
.hv2-why-list article:hover .hv2-why-glyph,
.hv2-why-list article:focus-within .hv2-why-glyph,
.hv2-why-list.is-glyph-pulse .hv2-why-glyph {
    animation: hv2-glyph-pulse 1.2s ease-in-out 1;
}

.hv2-why-list p {
    max-width: 60ch;
    margin-top: 15px;
    color: var(--ink-2);
    line-height: 1.66;
}

/* Compact evidence line, quieter than the copy and no divider chrome. Pushed to
   the card foot (margin-top:auto) so proof rows bottom-align across each pair,
   with a clear gap above it (padding-top) so it never reads as attached to the
   preceding sentence. */
.hv2-why-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: auto 0 0;
    padding: 22px 0 0;
    list-style: none;
}

.hv2-why-proof li {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: var(--ink-3);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Very subtle 1px separator between proof groups, no enclosing shape. The 12px
   flex column-gap plus 12px padding sit the rule in ~24px of clear space. */
.hv2-why-proof li + li {
    padding-left: 12px;
    border-left: 1px solid rgba(220, 229, 246, 0.14);
}

.hv2-why-proof strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
}

.hv2-why-proof strong.is-mono {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
    .hv2-why-list article:hover .hv2-why-glyph,
    .hv2-why-list article:focus-within .hv2-why-glyph,
    .hv2-why-list.is-glyph-pulse .hv2-why-glyph {
        animation: none;
    }
}

/* Inline links inside body prose: clickability comes from a quiet teal underline,
   not teal text. Text sits close to the surrounding copy (inherits its colour);
   teal fills in on hover/focus. Scoped to prose paragraphs only, so nav, CTAs,
   standalone text-links, use-case chips and framework lines keep their own styling. */
.hv2-lifecycle .hv2-section-head p a,
.hv2-coverage-summary a,
.hv2-why-list p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--teal-40);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--dur-quick) ease-out, text-decoration-color var(--dur-quick) ease-out;
}

.hv2-lifecycle .hv2-section-head p a:hover,
.hv2-lifecycle .hv2-section-head p a:focus-visible,
.hv2-coverage-summary a:hover,
.hv2-coverage-summary a:focus-visible,
.hv2-why-list p a:hover,
.hv2-why-list p a:focus-visible {
    color: var(--teal);
    text-decoration-color: var(--teal);
}

.hv2-lifecycle .hv2-section-head p a:focus-visible,
.hv2-coverage-summary a:focus-visible,
.hv2-why-list p a:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Section-level continuation link: sits at the right edge of the card grid
   (inherited text-align), spaced away so it does not attach to the corner card. */
.hv2-why .hv2-text-link {
    margin-top: 44px;
}

.hv2-use-case-links {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 32px 72px;
    margin-top: 76px;
    color: var(--ink-3);
    font-size: 0.75rem;
}

.hv2-use-case-links > span {
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.hv2-use-case-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
}

.hv2-use-case-links a {
    position: relative;
    color: var(--ink-3);
}

.hv2-use-case-links a::after {
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 1px;
    background: var(--teal);
    content: "";
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-in-out;
}

.hv2-use-case-links a:hover,
.hv2-use-case-links a:focus-visible {
    color: var(--ink);
}

.hv2-use-case-links a:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
}

.hv2-use-case-links a:hover::after,
.hv2-use-case-links a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

@media (prefers-reduced-motion: reduce) {
    .hv2-use-case-links a::after {
        transition: none;
    }
}

.hv2-faq {
    background:
        radial-gradient(ellipse 40% 36% at 12% 22%, var(--ice-dim), transparent 76%),
        var(--surface);
}

.hv2-faq-layout {
    display: grid;
    grid-template-columns: minmax(270px, 0.65fr) minmax(0, 1.35fr);
    align-items: start;
    column-gap: 86px;
    row-gap: 0;
}

.hv2-faq-layout .hv2-section-head {
    position: sticky;
    top: 160px;
    margin-bottom: 0;
}

.hv2-faq-layout .hv2-section-head h2 {
    font-size: clamp(2.1rem, 4vw, 3.7rem);
}

.hv2-faq-layout .hv2-text-link {
    grid-column: 2;
    text-align: right;
}

/* Animated section eyebrow — teal-brand adaptation of the reference "Signal FAQ" pill.
   Shared across every section head; label carries the band name for that section. */
.hv2-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 7px 15px;
    border: 1px solid var(--teal-10);
    border-radius: 999px;
    background: var(--teal-05);
    color: var(--ink-2);
}

.hv2-eyebrow-beam {
    position: absolute;
    inset: -120%;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 160deg, var(--teal-30), transparent 32%, var(--ice-dim) 58%, transparent 80%, var(--teal-20));
    opacity: 0.5;
    animation: hv2-eyebrow-beam 22s linear infinite;
}

.hv2-eyebrow-label {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.hv2-eyebrow-meter {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 45%, transparent);
    opacity: 0.5;
    transform-origin: left;
    animation: hv2-eyebrow-meter 8s ease-in-out infinite;
}

.hv2-eyebrow-tick {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-05);
    animation: hv2-eyebrow-tick 5s ease-in-out infinite;
}

@keyframes hv2-eyebrow-beam {
    to { transform: rotate(360deg); }
}

@keyframes hv2-eyebrow-meter {
    0%, 20% { transform: scaleX(0); transform-origin: left; }
    45%, 60% { transform: scaleX(1); transform-origin: left; }
    80%, 100% { transform: scaleX(0); transform-origin: right; }
}

@keyframes hv2-eyebrow-tick {
    0%, 30% { transform: translateX(-5px); opacity: 0.4; }
    50% { transform: translateX(2px); opacity: 1; }
    100% { transform: translateX(16px); opacity: 0; }
}

/* Card accordion — reference monochrome cards, rendered in the abyss/teal system. */
.hv2-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hv2-faq-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.028), transparent 60%),
        var(--surface);
    transition: transform var(--dur-quick) ease-out, border-color var(--dur-quick) ease-out, box-shadow var(--dur-quick) ease-out;
}

.hv2-faq-item::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: radial-gradient(220px circle at var(--faq-x, 50%) var(--faq-y, 15%), var(--teal-10), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-quick) ease-out;
}

.hv2-faq-item:hover {
    transform: translateY(-2px);
    border-color: var(--teal-20);
    box-shadow: 0 22px 60px -40px rgba(0, 0, 0, 0.9);
}

.hv2-faq-item:hover::before,
.hv2-faq-item[open]::before {
    opacity: 1;
}

.hv2-faq-item[open] {
    border-color: var(--teal-20);
}

.hv2-faq-item summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
}

.hv2-faq-item summary::-webkit-details-marker {
    display: none;
}

.hv2-faq-item summary:focus-visible {
    outline: 2px solid var(--teal-30);
    outline-offset: -4px;
    border-radius: 18px;
}

.hv2-faq-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--teal-10);
    border-radius: 999px;
    background: var(--teal-05);
    color: var(--teal);
    transition: transform var(--dur-quick) ease-out, background var(--dur-quick) ease-out;
}

.hv2-faq-item:hover .hv2-faq-icon {
    transform: scale(1.05);
}

.hv2-faq-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    transition: transform var(--dur-slow, 0.4s) cubic-bezier(0.22, 0.68, 0, 1);
}

.hv2-faq-item[open] .hv2-faq-icon {
    background: var(--teal-10);
}

.hv2-faq-item[open] .hv2-faq-icon svg {
    transform: rotate(45deg);
}

.hv2-faq-qrow {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.hv2-faq-question {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color var(--dur-quick) ease-out;
}

.hv2-faq-item:hover .hv2-faq-question,
.hv2-faq-item[open] .hv2-faq-question {
    color: var(--ink);
}

.hv2-faq-meta {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur-quick) ease-out, border-color var(--dur-quick) ease-out;
}

.hv2-faq-item[open] .hv2-faq-meta {
    border-color: var(--teal-20);
    color: var(--teal);
}

.hv2-faq-answer {
    padding: 0 26px 24px 80px;
    animation: hv2-faq-reveal 0.5s cubic-bezier(0.22, 0.68, 0, 1);
}

.hv2-faq-answer p {
    max-width: 68ch;
    margin: 0;
    color: var(--ink-2);
    line-height: 1.75;
}

@keyframes hv2-faq-reveal {
    from { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hv2-eyebrow-beam,
    .hv2-eyebrow-meter,
    .hv2-eyebrow-tick,
    .hv2-faq-answer,
    .hv2-faq-icon svg {
        animation: none;
        transition: none;
    }
}

.hv2-close {
    position: relative;
    isolation: isolate;
    padding: var(--space-9) 0;
    background:
        radial-gradient(circle at 50% 60%, var(--teal-10), transparent 34%),
        var(--bg);
}

.hv2-close-grid {
    background-position: center;
    opacity: 0.12;
    -webkit-mask-image: radial-gradient(ellipse 55% 75% at 50% 48%, black 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 55% 75% at 50% 48%, black 0%, transparent 80%);
}

.hv2-close-inner {
    text-align: center;
}

.hv2-close h2 {
    max-width: 850px;
    margin-inline: auto;
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    line-height: 1.02;
}

.hv2-close-inner > p:not(.hv2-trust) {
    margin-top: 24px !important;
    color: var(--ink-2);
    font-size: 1.1rem;
}

@media (min-width: 821px) and (max-height: 900px) {
    .hv2-hero {
        min-height: 620px;
        padding: 110px 0 190px;
    }

    .hv2-hero h1 {
        font-size: clamp(2.7rem, 5.4vw, 4.8rem);
    }

    .hv2-hero-copy {
        margin-top: 24px !important;
    }

    .hv2-actions {
        margin-top: 28px;
    }

    .hv2-trust {
        margin-top: 16px !important;
    }

    .hv2-dashboard-section {
        margin-top: -30px;
    }
}

@media (max-width: 1080px) {
    .hv2-dashboard-frame {
        overflow-x: auto;
    }


    .hv2-bento {
        grid-auto-rows: 280px;
    }

    .hv2-bento-attention {
        grid-column: span 12;
        grid-row: auto;
    }

    .hv2-bento-attention .hv2-shot {
        top: 16%;
        right: -5%;
        bottom: -30%;
        width: 69%;
    }

    .hv2-bento-exposed,
    .hv2-bento-remediation {
        grid-column: span 12;
        grid-row: auto;
    }

    .hv2-evidence-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hv2-evidence-copy {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 52px;
    }

    .hv2-evidence-copy .hv2-section-head {
        margin-bottom: 0;
    }

}

@media (max-width: 820px) {
    .hv2-container {
        width: min(100% - 36px, 680px);
    }

    .hv2-intro-stage {
        background:
            radial-gradient(ellipse 112% 31% at 50% 23%, rgba(0, 191, 255, 0.12), transparent 72%),
            radial-gradient(ellipse 118% 34% at 50% 76%, rgba(77, 148, 255, 0.10), transparent 74%),
            var(--bg);
    }

    .hv2-close {
        background:
            radial-gradient(ellipse 112% 62% at 50% 52%, rgba(0, 191, 255, 0.12), transparent 72%),
            radial-gradient(ellipse 92% 46% at 50% 62%, rgba(77, 148, 255, 0.08), transparent 78%),
            var(--bg);
    }

    .hv2-close-grid {
        opacity: 0.15;
        -webkit-mask-image: radial-gradient(ellipse 108% 78% at 50% 48%, #000 0%, rgba(0, 0, 0, 0.88) 50%, transparent 100%);
        mask-image: radial-gradient(ellipse 108% 78% at 50% 48%, #000 0%, rgba(0, 0, 0, 0.88) 50%, transparent 100%);
    }

    .hv2-section {
        padding: 96px 0;
    }

    .hv2-section[id] {
        scroll-margin-top: 116px;
    }

    .hv2-hero {
        min-height: 650px;
        padding: 145px 0 220px;
    }

    .hv2-hero::after {
        width: 68vw;
        opacity: 0.3;
    }

    .hv2-dashboard-section {
        margin-top: -90px;
        padding-bottom: 70px;
    }

    /* Mobile: the app-shell border is drawn as an inset box-shadow below <1081px,
       which the opaque mock-shell paints over, so the navbar reads as detached.
       Reuse desktop's real border (same colour/thickness/radius as the
       min-width:1081px rule) so one continuous frame encloses navbar + dashboard.
       The horizontal divider under the navbar (topbar border-bottom) is untouched. */
    .hv2-dashboard-frame {
        box-sizing: border-box;
        border: 1px solid rgba(77,148,255,0.21);
    }

    /* The height crop + bottom fade live on this OUTER wrapper, not on the
       bordered frame, so the mask never clips or fades the shell border itself.
       Keeps app nav, Dashboard header, New scan, KPI grid and the top of
       "Active by severity" readable; lower content is cropped. No scaling —
       width, proportions and horizontal position are preserved. */
    .hv2-dashboard-crop {
        position: relative;
        max-height: 600px;
        overflow: hidden;
    }

    /* Soft bottom-only fade over the final ~110px so the crop reads as
       "the product continues below", blending into the hero background.
       Above the frame (z-index 2); anchored to the bottom so it never
       crosses the middle of the dashboard. */
    .hv2-dashboard-crop::before {
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: 0;
        left: 0;
        height: 110px;
        background: linear-gradient(to bottom, transparent, var(--bg));
        pointer-events: none;
        content: "";
    }

    .hv2-section-nav .hv2-container {
        justify-content: flex-start;
        width: 100%;
        padding-inline: 14px;
    }

    .hv2-section-nav a {
        padding: 13px 14px;
    }

    .hv2-lifecycle-rail {
        --hv2-lifecycle-line-length: calc(100% - 150px);
        grid-template-columns: 1fr;
    }

    .hv2-lifecycle-rail::before {
        top: 25px;
        bottom: auto;
        left: 23px;
        right: auto;
        width: 1px;
        height: var(--hv2-lifecycle-line-length);
        background: var(--border-soft);
    }

    .hv2-lifecycle-rail::after {
        top: 25px;
        right: auto;
        bottom: auto;
        left: 23px;
        width: 1px;
        height: var(--hv2-lifecycle-line-length);
        background: linear-gradient(180deg, var(--teal-20), var(--teal), var(--ice-border));
        transform: scaleY(var(--hv2-lifecycle-progress));
        transform-origin: center top;
    }

    .hv2-lifecycle-rail li,
    .hv2-lifecycle-rail li + li {
        min-height: 150px;
        padding: 0 0 40px 78px;
        border-left: 0;
    }

    .hv2-lifecycle-rail li > span {
        position: absolute;
        left: 0;
    }

    .hv2-lifecycle-rail h3 {
        margin-top: 0;
    }

    /* Hide the per-step vertical progress line on mobile; the badge + main
       rail already carry the active-state signal in the stacked layout. */
    .hv2-step-body {
        padding-left: 0;
    }

    .hv2-step-body::before,
    .hv2-step-body::after {
        display: none;
    }

    .hv2-bento {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 320px;
    }

    .hv2-bento-attention,
    .hv2-bento-exposed,
    .hv2-bento-remediation,
    .hv2-bento-change,
    .hv2-bento-evidence,
    .hv2-bento-reporting {
        grid-column: auto;
        grid-row: auto;
    }

    .hv2-bento-attention {
        grid-column: 1 / -1;
    }

    .hv2-bento-attention .hv2-shot {
        top: 32%;
        width: 83%;
    }

    .hv2-card-copy,
    .hv2-bento-attention .hv2-card-copy {
        max-width: 100%;
        padding: 25px;
    }

    .hv2-bento-card::after {
        background: linear-gradient(180deg, rgba(10,15,36,0.9), rgba(10,15,36,0.42) 58%, transparent 85%);
    }

    .hv2-bento-card .hv2-shot {
        top: 48%;
        right: -12%;
        bottom: -23%;
        width: 116%;
    }

    .hv2-coverage-grid {
        grid-template-columns: 1fr;
    }

    .hv2-coverage-grid article,
    .hv2-coverage-grid article + article {
        grid-template-rows: auto;
        width: 100%;
        margin-top: 0;
        padding: 28px 0 31px;
        border-left: 0;
    }

    .hv2-coverage-grid article + article {
        border-top: 1px solid var(--border-soft);
    }

    .hv2-coverage {
        background-image:
            linear-gradient(180deg, rgba(10, 15, 36, 0.7) 0%, rgba(10, 15, 36, 0.5) 50%, rgba(10, 15, 36, 0.7) 100%),
            url("/img/brand/signal-field-spine-teal-center-1290x1612.webp");
        background-position: center;
        background-size: cover;
    }

    .hv2-coverage-grid h3 {
        min-height: 0;
    }

    .hv2-coverage-h2br {
        display: none;
    }

    .hv2-coverage-grid article:nth-child(2) {
        width: 100%;
        margin-left: 0;
    }

    .hv2-coverage-grid article:nth-child(3) {
        width: 100%;
        margin-left: 0;
    }

    .hv2-evidence-copy {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hv2-evidence-copy .hv2-section-head {
        margin-bottom: 38px;
    }

    .hv2-framework-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .hv2-why-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hv2-why-list article:nth-child(n) {
        grid-column: 1;
        width: 100%;
        margin-top: 0;
    }

    .hv2-why-list article:nth-child(2),
    .hv2-why-list article:nth-child(4) {
        width: 100%;
        margin-left: 0;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 34%),
            linear-gradient(105deg, var(--card) 0%, color-mix(in srgb, var(--card) 55%, transparent) 100%);
    }

    .hv2-why-list article > span {
        min-height: 0;
    }

    .hv2-why-crop {
        top: 2%;
        width: 168%;
        height: 108%;
        opacity: 0.056;
    }

    .hv2-faq-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hv2-faq-layout .hv2-section-head {
        position: static;
    }

    .hv2-faq-layout .hv2-text-link {
        grid-column: 1;
        margin-top: -26px;
    }
}

@media (max-width: 580px) {
    .hv2-container {
        width: calc(100% - 28px);
    }

    .hv2-section {
        padding: 80px 0;
    }

    .hv2-section-head {
        margin-bottom: 38px;
    }

    .hv2-why-h2-break {
        display: none;
    }

    /* Mobile proof rows: drop the separators (and their spacing), let each
       value+descriptor wrap as an independent item, stacking when both cannot
       sit cleanly on one line. */
    .hv2-why-proof {
        gap: 14px;
    }

    .hv2-why-proof li {
        white-space: nowrap;
    }

    .hv2-why-proof li + li {
        padding-left: 0;
        border-left: 0;
    }

    .hv2-section-head h2 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    /* Coverage H2 wraps cleanly instead of clipping. Its max-width is none (so
       the desktop 3-line <br> layout can go wide), the mobile container is only
       calc(100% - 28px), and the section clips overflow -- so the long word
       "infrastructure," grazed the viewport edge at the 11vw scale. Ease the
       vw term (words never break) and pin max/min-width so it always fits. */
    .hv2-coverage .hv2-section-head h2 {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: normal;
        white-space: normal;
        font-size: clamp(1.8rem, 9.5vw, 3rem);
    }

    .hv2-hero {
        min-height: 610px;
        padding: 128px 0 205px;
    }

    .hv2-hero h1 {
        font-size: clamp(2.45rem, 12.4vw, 3.5rem);
    }

    .hv2-hero-copy {
        font-size: 1rem;
    }

    .hv2-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hv2-actions .btn {
        width: 100%;
    }

    /* Compact mobile CTA: stacked, centered, ~85% of the content width, with a
       comfortable 47px touch target. Shared by the hero and the pre-footer close
       section so both CTA pairs align to the same size.
       Rail convergence needs no change here: the lattice re-anchors its apex
       to the dashboard top at runtime (ResizeObserver on the stage), so the
       tighter CTA block just reflows and the rails follow. */
    .hv2-hero .hv2-actions,
    .hv2-close .hv2-actions {
        align-items: center;
    }

    .hv2-hero .hv2-actions .btn,
    .hv2-close .hv2-actions .btn {
        width: 85%;
        max-width: 380px;
        min-height: 47px;
    }

    .hv2-trust {
        display: block;
        line-height: 1.9;
    }

    .hv2-trust span {
        margin-inline: 4px;
    }

    .hv2-dashboard-section {
        margin-top: -135px;
    }

    .hv2-dashboard-frame {
        border-radius: 10px;
    }

    .hv2-dashboard-caption {
        font-size: 0.65rem;
        text-align: center;
    }

    .hv2-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: 330px;
    }

    .hv2-bento-attention {
        grid-column: auto;
    }

    .hv2-bento-attention .hv2-shot,
    .hv2-bento-card .hv2-shot {
        top: 49%;
        right: -14%;
        bottom: -18%;
        width: 121%;
    }

    .hv2-card-copy,
    .hv2-bento-attention .hv2-card-copy,
    .hv2-bento-change .hv2-card-copy,
    .hv2-bento-evidence .hv2-card-copy,
    .hv2-bento-reporting .hv2-card-copy {
        padding: 24px;
    }

    .hv2-evidence-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hv2-evidence-visual {
        padding: 20px 14px;
    }

    .hv2-event-chain {
        grid-template-columns: 1fr;
        gap: 0;
        /* Slight breathing room under the "Finding ..." caption before the
           first node. */
        margin-top: 12px;
    }

    /* Vertical line spans first node -> last node. Rows 1-4 are 42px, the last
       row is trimmed (see below), so the last node sits at calc(100% - 26px)
       from the top of the chain; height matches that (from top:7px) to stop the
       line exactly on it. Trimming only the last row keeps node-to-node spacing
       even (that's set by rows 1-4) while cutting the empty space beneath it. */
    .hv2-event-chain::before {
        top: 7px;
        bottom: auto;
        left: 5px;
        width: 1px;
        height: calc(100% - 26px);
    }

    .hv2-event-chain::after {
        top: 7px;
        right: auto;
        bottom: auto;
        left: 5px;
        width: 1px;
        height: calc(100% - 26px);
        background: linear-gradient(180deg, var(--teal-20), var(--teal), var(--green));
        transform-origin: center top;
    }

    .home-v2.is-motion-ready .hv2-event-chain::after {
        transform: scaleY(0);
    }

    .home-v2.is-motion-ready .hv2-evidence.is-motion-active .hv2-event-chain::after {
        transform: scaleY(1);
    }

    .hv2-event-chain li {
        display: flex;
        justify-content: space-between;
        min-height: 42px;
        padding: 0 0 0 24px;
        text-align: left;
    }

    .hv2-event-chain li::before {
        top: 2px;
        left: 0;
    }

    /* Last node has no following node, so its full 42px row is wasted space
       before the verification card. Trim it (node rhythm is unaffected — that
       comes from rows 1-4) and pair with the line height above. */
    .hv2-event-chain li:last-child {
        min-height: 26px;
    }

    .hv2-event-chain time {
        margin-top: 0;
    }

    .hv2-hash {
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .hv2-hash strong {
        grid-row: auto;
        grid-column: auto;
        margin-top: 6px;
    }

    .hv2-evidence-output {
        grid-template-columns: 1fr;
    }

    .hv2-framework-line p {
        gap: 12px 17px;
    }

    .hv2-use-case-links {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 56px;
    }

    .hv2-use-case-list {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .hv2-faq-list {
        gap: 10px;
    }

    .hv2-faq-item summary {
        gap: 14px;
        padding: 16px 16px;
    }

    /* Expand control moves to the far right and stays vertically centred in
       the card (summary keeps align-items:center) regardless of how many
       lines the question wraps to. */
    .hv2-faq-icon {
        order: 2;
        position: relative;
        width: 27px;
        height: 27px;
    }

    .hv2-faq-icon svg {
        width: 12px;
        height: 12px;
    }

    /* The whole summary row is the real toggle target, but keep the control's
       own hit area >=44px via an invisible centred box around the shrunk
       circle (paint unchanged). */
    .hv2-faq-icon::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* Stack the metadata above the question; question keeps the full left
       width for the strongest visual priority. */
    .hv2-faq-qrow {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    /* Category label -> subtle tertiary metadata above the question. Pill
       treatment removed (no border / background / radius); uppercase and the
       existing letter-spacing are inherited from the base rule. */
    .hv2-faq-meta {
        order: -1;
        margin-left: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--ink-3);
        font-size: 0.52rem;
        letter-spacing: 0.2em;
    }

    /* Pill is gone on mobile, so keep the label tertiary when open rather than
       inheriting the desktop teal recolor. */
    .hv2-faq-item[open] .hv2-faq-meta {
        border-color: transparent;
        color: var(--ink-3);
    }

    .hv2-faq-question {
        font-size: 1rem;
        line-height: 1.3;
    }

    .hv2-faq-answer {
        padding: 0 16px 18px 16px;
        font-size: 0.92rem;
    }

    .hv2-close {
        padding: 100px 0 112px;
    }
}

/* Desktop art direction: one grid, six deliberately different product crops. */
@media (min-width: 1081px) {
    .hv2-bento {
        grid-template-rows: repeat(2, minmax(330px, auto)) repeat(2, minmax(350px, auto));
        grid-auto-rows: auto;
    }

    .hv2-bento-exposed {
        grid-column: 1 / span 5;
        grid-row: 1;
    }

    .hv2-bento-attention {
        grid-column: 6 / -1;
        grid-row: 1 / span 2;
    }

    .hv2-bento-evidence {
        grid-column: 1 / span 6;
        grid-row: 3 / span 2;
    }

    .hv2-bento-remediation {
        grid-column: 7 / -1;
        grid-row: 3;
    }

    .hv2-bento-change {
        grid-column: 1 / span 5;
        grid-row: 2;
    }

    .hv2-bento-reporting {
        grid-column: 7 / -1;
        grid-row: 4;
    }

    .hv2-bento-exposed .hv2-card-copy {
        max-width: 92%;
        padding: 28px 30px;
    }

    .hv2-bento-exposed::after {
        background: linear-gradient(180deg, rgba(10,15,36,0.97) 0 34%, rgba(10,15,36,0.46) 54%, transparent 78%);
    }

    .hv2-bento-exposed .hv2-shot {
        top: 44%;
        right: auto;
        bottom: auto;
        left: 4%;
        width: 101%;
        aspect-ratio: 1615 / 637;
        border-radius: 10px;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, transparent, black 13% 76%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent, black 13% 76%, transparent 100%);
    }

    .hv2-bento-exposed .hv2-shot img {
        object-fit: contain;
        object-position: left top;
    }

    .hv2-bento-attention .hv2-card-copy {
        align-self: center;
        max-width: 43%;
        padding: 34px 0 34px 34px;
    }

    .hv2-bento-attention::after {
        background:
            linear-gradient(90deg, rgba(10,15,36,0.98) 0 28%, rgba(10,15,36,0.42) 42%, transparent 61%),
            linear-gradient(180deg, rgba(10,15,36,0.28), transparent 55%);
    }

    /* Left-anchored past the copy column so the "Vulnerabilities" header and
       priority chips sit in clear space instead of being cropped off-frame. */
    .hv2-bento-attention .hv2-shot {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 30%;
        width: 118%;
        aspect-ratio: 1440 / 900;
        border-radius: 10px;
        transform: translateY(-50%);
        box-shadow: 0 28px 44px -12px rgba(0,0,0,0.8);
    }

    .hv2-bento-attention .hv2-shot img {
        -webkit-mask-image: linear-gradient(90deg, transparent, black 6% 86%, transparent);
        mask-image: linear-gradient(90deg, transparent, black 6% 86%, transparent);
    }

    .hv2-bento-evidence::after {
        background:
            linear-gradient(0deg, rgba(10,15,36,0.98) 0 24%, rgba(10,15,36,0.72) 38%, transparent 65%),
            linear-gradient(90deg, rgba(10,15,36,0.3), transparent 58%);
    }

    .hv2-bento-evidence .hv2-card-copy {
        z-index: 4;
        align-self: flex-end;
        max-width: 92%;
        padding: 32px;
    }

    .hv2-bento-evidence .hv2-shot {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 30px 46px rgba(0,0,0,0.6));
        transform: none;
        mask-image: none;
    }

    /* Back layer stays crisp where the "Compliance" header lives; the diagonal
       mask recedes it only toward the overlap with the framework grid. */
    /* Zoomed crops: header block and framework tiles read at full size;
       the right-hand overflow clips inside the card. */
    .hv2-bento-evidence .hv2-layer-back {
        top: 26px;
        left: 26px;
        width: 176%;
        transform: scale(1.56);
        transform-origin: left top;
        z-index: 1;
        border: 1px solid var(--border-soft);
        border-top-color: rgba(255,255,255,0.32);
        border-left-color: rgba(255,255,255,0.18);
        border-radius: 12px;
        box-shadow: none;
        opacity: 1;
        -webkit-mask-image: linear-gradient(180deg, black 0 42%, rgba(0,0,0,0.24) 100%);
        mask-image: linear-gradient(180deg, black 0 42%, rgba(0,0,0,0.24) 100%);
    }

    .hv2-bento-evidence .hv2-layer-front {
        display: block;
        top: 54%;
        left: 8%;
        right: auto;
        width: 172%;
        transform: scale(1.872);
        transform-origin: left bottom;
        z-index: 3;
        border: 1px solid rgba(255,255,255,0.14);
        border-top-color: rgba(255,255,255,0.44);
        border-left-color: rgba(255,255,255,0.24);
        border-radius: 12px;
        box-shadow: none;
        -webkit-mask-image: linear-gradient(180deg, black 0 75%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 75%, transparent 100%);
    }

    .hv2-bento-remediation .hv2-card-copy,
    .hv2-bento-reporting .hv2-card-copy {
        max-width: 94%;
        padding: 28px;
    }

    .hv2-bento-remediation::after {
        background: linear-gradient(180deg, rgba(10,15,36,0.97) 0 37%, rgba(10,15,36,0.55) 55%, transparent 84%);
    }

    .hv2-bento-remediation .hv2-shot {
        top: 50%;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        transform: none;
        mask-image: none;
    }

    .hv2-shot-stack img {
        position: absolute;
        display: block;
        height: auto;
        object-fit: unset;
    }

    .hv2-bento-remediation .hv2-layer-solution {
        top: 24%;
        left: 6%;
        width: 88%;
        z-index: 2;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 10px;
        box-shadow: 0 22px 46px rgba(0,0,0,0.6);
    }

    /* Badge overlaps the solution panel's top edge so the pairing reads as one artifact. */
    .hv2-bento-remediation .hv2-layer-badge {
        top: 15%;
        left: 4%;
    }

    .hv2-bento-change::after {
        background: linear-gradient(0deg, rgba(10,15,36,0.97) 0 30%, rgba(10,15,36,0.48) 46%, transparent 70%);
    }

    .hv2-bento-change .hv2-card-copy {
        align-self: flex-end;
        max-width: 88%;
        padding: 28px;
    }

    /* Copy top-left, config panel (with its "Reports" header clear of the
       gradient) mid-card, generated cover overlapping lower-right: the stack
       reads configure -> generate. */
    .hv2-bento-reporting::after {
        background: linear-gradient(180deg, rgba(10,15,36,0.97) 0 22%, rgba(10,15,36,0.45) 38%, transparent 62%);
    }

    .hv2-bento-reporting .hv2-card-copy {
        z-index: 4;
        max-width: 92%;
        padding: 28px;
    }

    .hv2-bento-reporting .hv2-shot {
        inset: 0;
        width: auto;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 24px 42px rgba(0,0,0,0.58));
        transform: none;
        mask-image: none;
    }

    .hv2-bento-reporting .hv2-layer-back {
        top: 56%;
        left: 4%;
        width: 92%;
        z-index: 1;
        border: 1px solid var(--border-soft);
        border-top-color: rgba(255,255,255,0.3);
        border-left-color: rgba(255,255,255,0.16);
        border-radius: 10px;
        box-shadow: none;
        opacity: 0.88;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, black 0 60%, transparent 96%);
        mask-image: linear-gradient(180deg, black 0 60%, transparent 96%);
    }

    .hv2-bento-reporting .hv2-layer-front {
        display: block;
        top: auto;
        bottom: -13%;
        right: 6%;
        left: auto;
        width: 41%;
        z-index: 3;
        border: 1px solid rgba(255,255,255,0.14);
        border-top-color: rgba(255,255,255,0.44);
        border-left-color: rgba(255,255,255,0.24);
        border-radius: 8px;
        box-shadow: none;
        rotate: 0deg;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, black 0 78%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 78%, transparent 100%);
    }
}

@media (min-width: 821px) and (max-width: 1080px) {
    .hv2-bento {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(2, minmax(300px, auto)) minmax(330px, auto) minmax(360px, auto);
        grid-auto-rows: auto;
    }

    .hv2-bento-exposed {
        grid-column: 1 / span 5;
        grid-row: 1;
    }

    .hv2-bento-attention {
        grid-column: 6 / -1;
        grid-row: 1;
    }

    .hv2-bento-change {
        grid-column: 1 / span 5;
        grid-row: 2;
    }

    .hv2-bento-evidence {
        grid-column: 6 / -1;
        grid-row: 2 / span 2;
    }

    .hv2-bento-remediation {
        grid-column: 1 / span 5;
        grid-row: 3;
    }

    .hv2-bento-reporting {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .hv2-bento-exposed .hv2-card-copy,
    .hv2-bento-remediation .hv2-card-copy {
        max-width: 100%;
        padding: 24px;
    }

    .hv2-bento-exposed::after,
    .hv2-bento-remediation::after {
        background: linear-gradient(180deg, rgba(10,15,36,0.97) 0 39%, rgba(10,15,36,0.5) 58%, transparent 86%);
    }

    .hv2-bento-exposed .hv2-shot {
        top: 49%;
        right: auto;
        bottom: auto;
        left: 4%;
        width: 108%;
        aspect-ratio: 1615 / 637;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, transparent, black 14% 78%, transparent);
        mask-image: linear-gradient(180deg, transparent, black 14% 78%, transparent);
    }

    .hv2-bento-attention .hv2-card-copy {
        align-self: center;
        max-width: 45%;
        padding: 28px 0 28px 28px;
    }

    .hv2-bento-attention::after {
        background: linear-gradient(90deg, rgba(10,15,36,0.98) 0 31%, rgba(10,15,36,0.4) 46%, transparent 67%);
    }

    .hv2-bento-attention .hv2-shot {
        top: 50%;
        right: -16%;
        bottom: auto;
        width: 76%;
        aspect-ratio: 1440 / 900;
        transform: translateY(-50%);
        box-shadow: 0 24px 40px -12px rgba(0,0,0,0.8);
    }

    .hv2-bento-attention .hv2-shot img {
        -webkit-mask-image: linear-gradient(90deg, transparent, black 8% 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, black 8% 88%, transparent);
    }

    .hv2-bento-change::after {
        background: linear-gradient(0deg, rgba(10,15,36,0.97) 0 36%, rgba(10,15,36,0.55) 58%, transparent 86%);
    }

    .hv2-bento-change .hv2-card-copy {
        align-self: flex-end;
        max-width: 92%;
        padding: 24px;
    }

    .hv2-shot-stack img {
        position: absolute;
        display: block;
        height: auto;
        object-fit: unset;
    }

    .hv2-bento-evidence .hv2-card-copy {
        z-index: 4;
        align-self: flex-end;
        max-width: 66%;
        padding: 30px;
    }

    .hv2-bento-evidence::after {
        background: linear-gradient(0deg, rgba(10,15,36,0.98) 0 27%, rgba(10,15,36,0.65) 42%, transparent 68%);
    }

    .hv2-bento-evidence .hv2-shot {
        inset: 0;
        width: auto;
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 26px 40px rgba(0,0,0,0.6));
        transform: none;
        mask-image: none;
    }

    .hv2-bento-evidence .hv2-layer-back {
        top: 5%;
        left: 4%;
        width: 112%;
        opacity: 0.9;
        border: 1px solid var(--border-soft);
        border-top-color: rgba(255,255,255,0.32);
        border-left-color: rgba(255,255,255,0.18);
        border-radius: 12px;
        -webkit-mask-image: linear-gradient(165deg, black 0 46%, rgba(0,0,0,0.22) 90%);
        mask-image: linear-gradient(165deg, black 0 46%, rgba(0,0,0,0.22) 90%);
    }

    .hv2-bento-evidence .hv2-layer-front {
        display: block;
        top: 37%;
        right: -8%;
        width: 112%;
        border: 1px solid rgba(255,255,255,0.14);
        border-top-color: rgba(255,255,255,0.44);
        border-left-color: rgba(255,255,255,0.24);
        border-radius: 10px;
        box-shadow: 0 22px 46px rgba(0,0,0,0.58);
    }

    .hv2-bento-remediation .hv2-shot {
        top: 51%;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        overflow: hidden;
        border: 0;
        background: none;
        box-shadow: none;
        transform: none;
        mask-image: none;
    }

    .hv2-bento-remediation .hv2-layer-solution {
        top: 22%;
        left: 7%;
        width: 102%;
    }

    .hv2-bento-remediation .hv2-layer-badge {
        top: 15%;
        left: 4%;
    }

    .hv2-bento-reporting::after {
        background: linear-gradient(90deg, rgba(10,15,36,0.98) 0 30%, rgba(10,15,36,0.45) 46%, transparent 66%);
    }

    .hv2-bento-reporting .hv2-card-copy {
        z-index: 4;
        max-width: 38%;
        padding: 30px;
    }

    .hv2-bento-reporting .hv2-shot {
        inset: 0;
        width: auto;
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 22px 40px rgba(0,0,0,0.58));
        transform: none;
    }

    .hv2-bento-reporting .hv2-layer-back {
        top: 22%;
        left: 46%;
        width: 70%;
        opacity: 0.85;
        border: 1px solid var(--border-soft);
        border-top-color: rgba(255,255,255,0.3);
        border-left-color: rgba(255,255,255,0.16);
        border-radius: 10px;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, black 0 78%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 78%, transparent 100%);
    }

    .hv2-bento-reporting .hv2-layer-front {
        display: block;
        top: 10%;
        right: 4%;
        width: 36%;
        border: 1px solid rgba(255,255,255,0.14);
        border-top-color: rgba(255,255,255,0.44);
        border-left-color: rgba(255,255,255,0.24);
        border-radius: 8px;
        box-shadow: 0 22px 46px rgba(0,0,0,0.6);
        rotate: 0deg;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, black 0 84%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 84%, transparent 100%);
    }
}

/* Narrow bento art direction. Keep anchors, foreground proof and distinct crops. */
@media (max-width: 820px) {
    .hv2-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .hv2-bento-exposed,
    .hv2-bento-attention,
    .hv2-bento-change,
    .hv2-bento-evidence,
    .hv2-bento-remediation,
    .hv2-bento-reporting {
        grid-column: 1;
        grid-row: auto;
        min-height: 330px;
    }

    .hv2-bento-attention,
    .hv2-bento-evidence { min-height: 460px; }
    .hv2-bento-remediation { min-height: 370px; }
    .hv2-bento-reporting { min-height: 390px; }

    .hv2-bento-exposed .hv2-card-copy,
    .hv2-bento-remediation .hv2-card-copy {
        max-width: 100%;
        padding: 26px;
    }

    .hv2-bento-exposed .hv2-shot {
        top: 46%;
        right: auto;
        bottom: auto;
        left: 4%;
        width: 102%;
        aspect-ratio: 1615 / 637;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, transparent, black 14% 78%, transparent);
        mask-image: linear-gradient(180deg, transparent, black 14% 78%, transparent);
    }

    .hv2-bento-exposed .hv2-shot img {
        object-fit: contain;
        object-position: left top;
    }

    .hv2-bento-attention .hv2-card-copy {
        align-self: center;
        max-width: 44%;
        padding: 30px 0 30px 30px;
    }

    .hv2-bento-attention::after {
        background: linear-gradient(90deg, rgba(10,15,36,0.98) 0 30%, rgba(10,15,36,0.4) 46%, transparent 67%);
    }

    .hv2-bento-attention .hv2-shot {
        top: 36%;
        right: -14%;
        bottom: auto;
        width: 88%;
        aspect-ratio: 1440 / 900;
        transform: translateY(-50%);
        rotate: 0deg;
        border-top: 1px solid rgba(255,255,255,0.4);
        filter: drop-shadow(0 24px 40px rgba(0,0,0,0.72));
    }

    .hv2-bento-attention .hv2-shot img {
        -webkit-mask-image: linear-gradient(180deg, black 0 78%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 78%, transparent 100%);
    }

    .hv2-bento-change::after {
        background: linear-gradient(0deg, rgba(10,15,36,0.97) 0 34%, rgba(10,15,36,0.58) 54%, transparent 84%);
    }

    .hv2-bento-change .hv2-card-copy {
        align-self: flex-end;
        max-width: 82%;
        padding: 26px;
    }

    /* Re-declared so the framed top panel beats the older generic shot rules. */
    .hv2-bento-change .hv2-shot {
        top: 24px;
        right: 24px;
        bottom: auto;
        left: 24px;
        width: auto;
        aspect-ratio: 1552 / 640;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        box-shadow: 0 16px 36px rgba(0,0,0,0.38);
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, black 52%, transparent 94%);
        mask-image: linear-gradient(180deg, black 52%, transparent 94%);
    }

    .hv2-bento-change .hv2-shot img { object-position: left top; }

    .hv2-shot-stack img {
        position: absolute;
        display: block;
        height: auto;
        object-fit: unset;
    }

    .hv2-bento-evidence::after {
        background: linear-gradient(0deg, rgba(10,15,36,0.98) 0 27%, rgba(10,15,36,0.66) 43%, transparent 70%);
    }

    .hv2-bento-evidence .hv2-card-copy {
        z-index: 4;
        align-self: flex-end;
        max-width: 62%;
        padding: 30px;
    }

    .hv2-bento-evidence .hv2-shot,
    .hv2-bento-reporting .hv2-shot {
        inset: 0;
        width: auto;
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 24px 40px rgba(0,0,0,0.58));
        transform: none;
        mask-image: none;
    }

    .hv2-bento-evidence .hv2-layer-back {
        top: 4%;
        left: 4%;
        width: 130%;
        opacity: 0.9;
        border: 1px solid var(--border-soft);
        border-top-color: rgba(255,255,255,0.32);
        border-left-color: rgba(255,255,255,0.18);
        border-radius: 12px;
        -webkit-mask-image: linear-gradient(180deg, black 0 70%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 70%, transparent 100%);
    }

    .hv2-bento-evidence .hv2-layer-front {
        display: block;
        top: 24%;
        right: -6%;
        width: 185%;
        border: 1px solid rgba(255,255,255,0.14);
        border-top-color: rgba(255,255,255,0.44);
        border-left-color: rgba(255,255,255,0.24);
        border-radius: 10px;
        box-shadow: 0 22px 46px rgba(0,0,0,0.58);
    }

    .hv2-bento-remediation .hv2-shot {
        top: 51%;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 16px 26px rgba(0,0,0,0.6));
        transform: none;
        mask-image: none;
    }

    .hv2-bento-remediation .hv2-layer-solution {
        top: 22%;
        left: 7%;
        width: 98%;
        transform: scale(1.3);
        transform-origin: left bottom;
        -webkit-mask-image: linear-gradient(180deg, black 0 58%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 58%, transparent 100%);
    }

    .hv2-bento-remediation .hv2-layer-badge {
        top: -10%;
        left: 4%;
        transform: scale(1.3);
        transform-origin: left bottom;
    }

    /* Top-copy layout: "Reports" header surfaces mid-card, cover overlaps lower-right. */
    .hv2-bento-reporting::after {
        background: linear-gradient(180deg, rgba(10,15,36,0.88) 0 22%, rgba(10,15,36,0.46) 46%, transparent 76%);
    }

    .hv2-bento-reporting .hv2-card-copy {
        z-index: 4;
        max-width: 100%;
        padding: 26px;
    }

    .hv2-bento-reporting .hv2-layer-back {
        top: 46%;
        left: 4%;
        width: 100%;
        opacity: 0.88;
        border: 1px solid var(--border-soft);
        border-top-color: rgba(255,255,255,0.3);
        border-left-color: rgba(255,255,255,0.16);
        border-radius: 10px;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, black 0 62%, transparent 96%);
        mask-image: linear-gradient(180deg, black 0 62%, transparent 96%);
    }

    .hv2-bento-reporting .hv2-layer-front {
        display: block;
        top: auto;
        bottom: -8%;
        right: 6%;
        width: 52%;
        border: 1px solid rgba(255,255,255,0.14);
        border-top-color: rgba(255,255,255,0.44);
        border-left-color: rgba(255,255,255,0.24);
        border-radius: 8px;
        box-shadow: 0 22px 46px rgba(0,0,0,0.6);
        rotate: 0deg;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, black 0 80%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 80%, transparent 100%);
    }
}

@media (max-width: 580px) {
    .hv2-bento-exposed,
    .hv2-bento-change { min-height: 340px; }
    .hv2-bento-attention,
    .hv2-bento-evidence { min-height: 440px; }
    .hv2-bento-remediation { min-height: 390px; }
    .hv2-bento-reporting { min-height: 410px; }

    .hv2-bento-attention .hv2-card-copy {
        align-self: flex-start;
        max-width: 100%;
        padding: 24px;
    }

    .hv2-bento-attention::after,
    .hv2-bento-reporting::after {
        background: linear-gradient(180deg, rgba(10,15,36,0.9) 0 16%, rgba(10,15,36,0.35) 28%, transparent 38%);
    }

    .hv2-bento-reporting::after {
        background: linear-gradient(180deg, rgba(10,15,36,0.88) 0 28%, rgba(10,15,36,0.46) 52%, transparent 82%);
    }

    .hv2-bento-attention .hv2-shot {
        top: 34%;
        right: -12%;
        width: 139%;
        /* Push the image block down so the text->image gap matches the 20px used
           by the "Keep stakeholders informed" card. Shifts position only — crop,
           scale, card height and internal layout are untouched. */
        transform: translateY(68px);
        rotate: 0deg;
        border-top: 1px solid rgba(255,255,255,0.4);
        filter: drop-shadow(0 24px 40px rgba(0,0,0,0.72));
    }

    .hv2-bento-attention .hv2-shot img {
        -webkit-mask-image: linear-gradient(180deg, black 0 78%, transparent 100%);
        mask-image: linear-gradient(180deg, black 0 78%, transparent 100%);
    }

    .hv2-bento-change .hv2-card-copy,
    .hv2-bento-remediation .hv2-card-copy,
    .hv2-bento-reporting .hv2-card-copy { padding: 24px; }

    .hv2-bento-evidence .hv2-card-copy {
        max-width: 82%;
        padding: 24px;
    }

    .hv2-bento-evidence .hv2-layer-back {
        top: 6%;
        width: 158%;
    }

    .hv2-bento-evidence .hv2-layer-front {
        top: 28%;
        right: -8%;
        width: 194%;
    }

    .hv2-bento-remediation .hv2-layer-solution {
        top: 23%;
        left: 5%;
        width: 112%;
    }

    /* Match the 20px text->image gap from the "Keep stakeholders informed" card.
       Shifts the whole shot composite down only — crop, scale, card height and
       internal layout are untouched. */
    .hv2-bento-remediation .hv2-shot {
        transform: translateY(23px);
    }

}

/* Viewport-gate the always-on ambient animations. An IntersectionObserver in
   Index.cshtml adds .is-anim-paused to each host while it is scrolled out of
   view, so the hero glow drift, the two hero/close CTA glow rings and every
   section-eyebrow beam/meter/tick stop consuming paint + compositor off-screen.
   Class-absent = running, so no-JS / older browsers keep the original motion,
   and reduced-motion already disables these below. Scoped to .hv2-actions so
   the always-visible nav CTA ring is untouched. */
.hv2-hero-lattice.is-anim-paused::before,
.hv2-actions.is-anim-paused .btn-primary::before,
.hv2-eyebrow.is-anim-paused .hv2-eyebrow-beam,
.hv2-eyebrow.is-anim-paused .hv2-eyebrow-meter,
.hv2-eyebrow.is-anim-paused .hv2-eyebrow-tick {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .home-v2 *,
    .home-v2 *::before,
    .home-v2 *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}