/* ==========================================================================
   Gloat Hero Video block — acf/gloat-hero-video
   Layers: bg video, headline/CTA, animated 3-scene overlay
   ========================================================================== */

.ghv {
    --ghv-navy: #121225;
    --ghv-cream: #f1dfdb;
    --ghv-cream-40: rgba(241, 223, 219, 0.40);
    --ghv-cream-15: rgba(241, 223, 219, 0.15);
    --ghv-red: #ff4848;
    --ghv-hr: #ff4848;
    --ghv-ai: #ffffff;
    --ghv-ai-text: #121225;
    --ghv-glow: rgba(255, 72, 72, 0.55);
    --ghv-glow-ai: rgba(241, 223, 219, 0.55);
    --ghv-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ghv-serif: 'Prata', 'Times New Roman', serif;

    /* Apple-Intelligence-style iridescent aura for AI responses */
    --ghv-ai-aura: conic-gradient(
        from 0deg,
        #ff4848 0%,
        #FF4800 12%,
        #FF4800 25%,
        #D9FF00 38%,
        #4b9bff 52%,
        #6d5cff 66%,
        #c44dff 78%,
        #ff4d8a 90%,
        #ff4848 100%
    );

    /* Master loop timing -------------------------------------------------- */
    --t-loop:  45s;        /* total loop */
    --t-s1:    0%;         /* scene 1 start */
    --t-s1e:   30%;        /* scene 1 fade-out start */
    --t-s2:    33%;        /* scene 2 fade-in start */
    --t-s2e:   63%;
    --t-s3:    66%;
    --t-s3e:   97%;

    position: relative;
    width: 100%;
    min-height: clamp(640px, 100vh, 940px);
    overflow: hidden;
    background-color: var(--ghv-navy);
    color: var(--ghv-cream);
    isolation: isolate;
    padding-top: 130px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

/* ----- Video layer ------------------------------------------------------- */
.ghv__video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ghv__video-el {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
.ghv__video-tint {
    position: absolute; inset: 0; pointer-events: none;
    /* Tint only the LEFT side (where the headline lives) so it stays
       readable; right side is clean video showing the scene through. */
    background:
        linear-gradient(90deg,
            rgba(18,18,37,0.85) 0%,
            rgba(18,18,37,0.70) 18%,
            rgba(18,18,37,0.40) 38%,
            rgba(18,18,37,0.10) 55%,
            rgba(18,18,37,0)    72%);
}

/* ----- Layout ----------------------------------------------------------- */
.ghv__inner {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
    gap: 64px;
    align-items: center;
    min-height: calc(100vh - 210px);
}

/* ----- Text block ------------------------------------------------------- */
.ghv__text {
    max-width: 640px;
    animation: ghv-fade-up 900ms cubic-bezier(.2,.6,.2,1) both;
}
.ghv__heading {
    font-family: var(--ghv-serif);
    font-weight: 400;
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 28px;
    text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.ghv__heading em, .ghv__heading i {
    font-style: italic;
    color: var(--ghv-cream);
}
.ghv__sub {
    font-family: var(--ghv-mono);
    font-weight: 400;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.6;
    color: var(--ghv-cream);
    margin: 0 0 40px;
    max-width: 540px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.ghv__buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.ghv__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px;
    border-radius: 2px;
    font-family: var(--ghv-mono);
    font-size: 15px; font-weight: 500; letter-spacing: 0.01em; line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
    box-shadow: 0 2px 24px rgba(0,0,0,0.20);
}
.ghv__btn span {
    font-family: var(--ghv-mono);

}
.ghv__btn--primary { background: var(--ghv-red); color: #fff; border: 1px solid var(--ghv-red); }
.ghv__btn--primary:hover { background: #e63d3d; border-color: #e63d3d; transform: translateY(-1px); }
.ghv__btn--ghost {
    background: rgba(241,223,219,0.06);
    color: var(--ghv-cream);
    border: 1px solid var(--ghv-cream-40);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ghv__btn--ghost:hover { background: var(--ghv-cream); color: var(--ghv-navy); border-color: var(--ghv-cream); }
.ghv__btn-arrow { width: 14px; height: 14px; flex-shrink: 0; transition: transform .18s ease; }
.ghv__btn:hover .ghv__btn-arrow { transform: translateX(3px); }

/* ----- Overlay frame ---------------------------------------------------- */
.ghv__chat {
    position: relative;
    width: 100%;
    max-width: 580px;
    min-height: 480px;
    justify-self: end;
}

/* Scenes are stacked. The .is-active class is toggled by JS on a fixed
   loop schedule defined in render.php (single source of truth). CSS only
   handles the crossfade transition. */
.ghv__scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    will-change: opacity, transform;
    transition:
        opacity 600ms cubic-bezier(.22,.7,.2,1),
        transform 700ms cubic-bezier(.22,.7,.2,1);
}
.ghv__scene.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================================
   SCENE 1: HR helpdesk chat bubbles
   ============================================================ */
.ghv__chat-thread {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 18px;
}
.ghv__bubble {
    position: relative;
    max-width: 86%;
    padding: 16px 22px;
    font-family: var(--ghv-serif);
    font-weight: 400;
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.35;
    letter-spacing: -0.005em;
    border-radius: 26px;
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    will-change: transform, opacity;
    animation-duration: var(--t-loop);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.2,.65,.2,1);
}
.ghv__bubble--hr {
    align-self: flex-end;
    background: var(--ghv-hr);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(255, 72, 72, 0.35),
        0 0 28px var(--ghv-glow),
        0 0 60px rgba(255, 72, 72, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.35);
}
.ghv__bubble--ai {
    align-self: flex-start;
    background: var(--ghv-ai);
    color: var(--ghv-ai-text);
    border-bottom-left-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(241, 223, 219, 0.30),
        0 0 28px var(--ghv-glow-ai),
        0 0 70px rgba(241, 223, 219, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.35);
}
/* Subtle iridescent border on AI bubbles */
.ghv__bubble--ai::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--ghv-ai-aura);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
/* Scene 1 visible window on the 44s loop: 23s..30s = 52.3%..68.2%.
   Stagger 4 bubbles: pop in at 53, 56, 59, 62%; hold to 67%. */
.ghv__b1-1 { animation-name: ghv-pop-1; }
.ghv__b1-2 { animation-name: ghv-pop-2; }
.ghv__b1-3 { animation-name: ghv-pop-3; }
.ghv__b1-4 { animation-name: ghv-pop-4; }

@keyframes ghv-pop-1 {
    0%, 52%    { opacity: 0; transform: translateY(14px) scale(.94); }
    54%, 67%   { opacity: 1; transform: translateY(0) scale(1); }
    68%, 100%  { opacity: 0; transform: translateY(-6px) scale(1); }
}
@keyframes ghv-pop-2 {
    0%, 55%    { opacity: 0; transform: translateY(14px) scale(.94); }
    57%, 67%   { opacity: 1; transform: translateY(0) scale(1); }
    68%, 100%  { opacity: 0; transform: translateY(-6px) scale(1); }
}
@keyframes ghv-pop-3 {
    0%, 58%    { opacity: 0; transform: translateY(14px) scale(.94); }
    60%, 67%   { opacity: 1; transform: translateY(0) scale(1); }
    68%, 100%  { opacity: 0; transform: translateY(-6px) scale(1); }
}
@keyframes ghv-pop-4 {
    0%, 61%    { opacity: 0; transform: translateY(14px) scale(.94); }
    63%, 67%   { opacity: 1; transform: translateY(0) scale(1); }
    68%, 100%  { opacity: 0; transform: translateY(-6px) scale(1); }
}

/* ============================================================
   SCENE 2: Microsoft Teams — sidebar + channel pane
   Layout mirrors actual Teams: dark left rail with iconography
   (Activity / Chat / Teams / Calendar / Calls / Files), then a
   light channel pane with a header (Teams logo + tabs) and a
   chat thread. No rotated messages. Each component animates in
   straight (slide + fade).
   ============================================================ */

.ghv__scene--2 { transform: none !important; }
@keyframes ghv-scene-2 {
    0%, 33%   { opacity: 0; }
    36%       { opacity: 1; }
    63%       { opacity: 1; }
    67%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* Sidebar (left rail) ---------------------------------------------------- */
.ghv__tm-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 64px;
    background: linear-gradient(180deg, #312f7a 0%, #2a2868 100%);
    border-radius: 14px 0 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 18px;
    gap: 6px;
    z-index: 2;
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.06),
        0 22px 50px rgba(0, 0, 0, 0.35);
    /* Sidebar is part of the static Teams chrome — no enter animation */
    opacity: 1;
    transform: none;
}
.ghv__tm-sidebar-logo {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2C2C4A;       /* Teams brand purple — logo glyph is white */
    border-radius: 6px;
    margin-bottom: 14px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 4px 12px rgba(0, 0, 0, 0.25);
}
.ghv__tm-sidebar-logo img {
    width: 22px; height: 22px;
    object-fit: contain;
    display: block;
}
.ghv__tm-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    align-items: center;
}
.ghv__tm-rail {
    position: relative;
    width: 52px;
    padding: 7px 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: rgba(255, 255, 255, 0.62);
    transition: color .2s, background .2s;
    border-radius: 4px;
}
.ghv__tm-rail svg {
    width: 18px; height: 18px;
    color: inherit;
    stroke: currentColor;
}
.ghv__tm-rail em {
    font-style: normal;
    font-family: var(--ghv-mono);
    font-size: 9px;
    color: inherit;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.ghv__tm-rail--active {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}
.ghv__tm-rail--active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: #5B5B92;
}
.ghv__tm-rail-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 99px;
    background: #ff4848;
    color: #fff;
    font-family: var(--ghv-mono);
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Channel pane (right) -------------------------------------------------- */
.ghv__tm-pane {
    position: absolute;
    top: 0;
    left: 64px;
    right: 0;
    bottom: 0;
    /* Subtle translucent pane — the dark hero video still shows through.
       The sidebar, outer border, and individual bubble backgrounds layer on top. */
    background: rgba(241, 223, 219, 0.04);
    border-radius: 0 14px 14px 0;
    color: #f1dfdb;
    font-family: var(--ghv-mono);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Static — no enter animation */
    opacity: 1;
    transform: none;
}
.ghv__tm-pane-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(241, 223, 219, 0.12);
    background: transparent;
    flex-wrap: wrap;
}
.ghv__tm-pane-icon {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: #2C2C4A;       /* Teams brand purple — logo glyph is white */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.ghv__tm-pane-icon img {
    width: 22px; height: 22px;
    object-fit: contain;
    display: block;
}
.ghv__tm-pane-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ghv__tm-pane-title {
    font-family: var(--ghv-mono);
    font-weight: 600;
    font-size: 17px;
    color: #f1dfdb;
}
.ghv__tm-pane-sub {
    font-family: var(--ghv-mono);
    font-size: 13px;
    color: rgba(241, 223, 219, 0.65);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ghv__tm-presence-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #D9FF00;
    box-shadow: 0 0 0 2px rgba(109, 240, 194, 0.30);
    flex-shrink: 0;
}
.ghv__tm-pane-tabs {
    width: 100%;
    display: flex;
    gap: 16px;
    margin-top: 6px;
    padding-top: 2px;
    border-top: 1px dashed rgba(241, 223, 219, 0.10);
}
.ghv__tm-tab {
    font-family: var(--ghv-mono);
    font-size: 13px;
    font-weight: 500;
    color: rgba(241, 223, 219, 0.55);
    padding: 6px 0;
    position: relative;
    cursor: default;
}
.ghv__tm-tab--active {
    color: #8F8FC4;
    font-weight: 600;
}
.ghv__tm-tab--active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -5px;
    height: 2px;
    background: #2C2C4A;
    border-radius: 1px;
}

/* Thread + rows -------------------------------------------------------- */
.ghv__tm-thread {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 24px 22px;
    background: transparent;
}
.ghv__tm-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    /* Straight, no rotation. Stagger via per-row keyframes. */
    opacity: 0;
    transform: translateY(8px);
    will-change: transform, opacity;
    animation-duration: var(--t-loop);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.22,.65,.2,1);
}
.ghv__tm-avatar {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ghv-mono);
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.02em;
    overflow: hidden;
}
.ghv__tm-avatar--user { background: linear-gradient(135deg, #ff4848, #FF4800); }
.ghv__tm-avatar--bot {
    background: linear-gradient(135deg, #2C2C4A, #5B5B92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    font-family: var(--ghv-mono);
}
.ghv__tm-msg-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Scene 2 mirrors scene 1: no avatars, no name/timestamp meta — just bubbles. */
.ghv__tm-avatar,
.ghv__tm-msg-meta {
    display: none;
}
/* Scene 2 bubbles match scene 1's visual treatment (rounded pills with
   glow + aura), in Segoe UI rather than the serif. */
.ghv__tm-msg-bubble {
    position: relative;
    font-family: var(--ghv-mono);
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.4;
    letter-spacing: 0;
    padding: 14px 20px;
    border-radius: 24px;
    max-width: 100%;
    width: fit-content;
}
/* User row → red HR-style bubble, right-aligned */
.ghv__tm-row--user .ghv__tm-msg-bubble {
    background: var(--ghv-hr);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(255, 72, 72, 0.35),
        0 0 28px var(--ghv-glow),
        0 0 60px rgba(255, 72, 72, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.35);
}
.ghv__tm-row--user { justify-content: flex-end; }
.ghv__tm-row--user .ghv__tm-msg-body { align-items: flex-end; }
/* Bot row → cream AI bubble with iridescent ring */
.ghv__tm-row--bot .ghv__tm-msg-bubble {
    background: var(--ghv-ai);
    color: var(--ghv-ai-text);
    border-bottom-left-radius: 6px;
    border: none;
    box-shadow:
        0 0 0 1px rgba(241, 223, 219, 0.30),
        0 0 28px var(--ghv-glow-ai),
        0 0 70px rgba(241, 223, 219, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.35);
}
.ghv__tm-row--bot .ghv__tm-msg-bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--ghv-ai-aura);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
/* (bot bubble styling now handled by the scene-1-matched rule above) */
.ghv__tm-row--bot .ghv__tm-msg-bubble em {
    font-style: normal;
    background: rgba(18, 18, 37, 0.10);
    color: inherit;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95em;
}

/* Attachment card (inline, in-thread) */
.ghv__tm-attach-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(241, 223, 219, 0.08);
    border: 1px solid rgba(241, 223, 219, 0.18);
    border-radius: 8px;
    padding: 10px 14px 10px 10px;
    width: fit-content;
}
.ghv__tm-file-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ghv__tm-file-icon svg { width: 28px; height: 30px; }
.ghv__tm-file-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
    min-width: 0;
}
.ghv__tm-file-name {
    font-family: var(--ghv-mono);
    font-weight: 600;
    font-size: 13px;
    color: #f1dfdb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.ghv__tm-file-size {
    font-family: var(--ghv-mono);
    font-size: 11px;
    color: rgba(241, 223, 219, 0.55);
}

/* Inline skill chips below the agent reply */
.ghv__tm-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.ghv__tm-chip {
    font-family: var(--ghv-mono);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(143, 143, 196, 0.15);
    color: #8F8FC4;
    border-radius: 99px;
    border: 1px solid rgba(143, 143, 196, 0.30);
    white-space: nowrap;
}

/* ----- Per-element animations (no rotation, all straight) ------------- */
@keyframes ghv-tm-sidebar {
    0%, 33%    { opacity: 0; transform: translateX(-30px); }
    36%        { opacity: 1; transform: translateX(0); }
    63%        { opacity: 1; transform: translateX(0); }
    67%, 100%  { opacity: 0; transform: translateX(-20px); }
}
@keyframes ghv-tm-pane {
    0%, 35%    { opacity: 0; transform: translateX(20px); }
    38%        { opacity: 1; transform: translateX(0); }
    63%        { opacity: 1; transform: translateX(0); }
    67%, 100%  { opacity: 0; transform: translateX(14px); }
}

.ghv__tm-r1 { animation-name: ghv-tm-r1; }
.ghv__tm-r2 { animation-name: ghv-tm-r2; }
.ghv__tm-r3 { animation-name: ghv-tm-r3; }
.ghv__tm-r4 { animation-name: ghv-tm-r4; }

/* Scene 2 bubbles. Visible window on the 44s loop: 31s..43s = 70.5%..97.7%.
   Stagger 4 rows: in @ 72, 75, 78, 81%; hold to 96%. */
@keyframes ghv-tm-r1 {
    0%, 70%    { opacity: 0; transform: translateY(10px); }
    72%, 96%   { opacity: 1; transform: translateY(0); }
    97%, 100%  { opacity: 0; transform: translateY(-4px); }
}
@keyframes ghv-tm-r2 {
    0%, 73%    { opacity: 0; transform: translateY(10px); }
    75%, 96%   { opacity: 1; transform: translateY(0); }
    97%, 100%  { opacity: 0; transform: translateY(-4px); }
}
@keyframes ghv-tm-r3 {
    0%, 76%    { opacity: 0; transform: translateY(10px); }
    78%, 96%   { opacity: 1; transform: translateY(0); }
    97%, 100%  { opacity: 0; transform: translateY(-4px); }
}
@keyframes ghv-tm-r4 {
    0%, 79%    { opacity: 0; transform: translateY(10px); }
    81%, 96%   { opacity: 1; transform: translateY(0); }
    97%, 100%  { opacity: 0; transform: translateY(-4px); }
}

/* ============================================================
   SCENE 3: Prompt + carousel of generated artifacts
   Layout: prompt panel pinned to top, then a single artifact slot that
   rotates through 3 artifacts. Each artifact slides in/out so only one
   is visible at a time.
   ============================================================ */

.ghv__scene--3 { transform: none !important; }
@keyframes ghv-scene-3 {
    0%, 66%   { opacity: 0; }
    69%       { opacity: 1; }
    97%       { opacity: 1; }
    100%      { opacity: 0; }
}

/* ----- Prompt input (no panel chrome) --------------------------------- */
.ghv__pp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: var(--ghv-cream, #f1dfdb);
    font-family: var(--ghv-mono);
    opacity: 0;
    animation: ghv-pp var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
    z-index: 2;
}
.ghv__pp-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(241, 223, 219, 0.06);
    border: 1px solid rgba(241, 223, 219, 0.18);
    border-radius: 14px;
    padding: 16px 16px 16px 22px;
    min-height: 56px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ghv__pp-text {
    /* Shrink-to-fit so the caret sits right after the last character.
       At narrow widths the long sentence will exceed the input — we let it
       scroll horizontally inside the clipped input rather than wrap, so the
       typewriter caret stays glued to the last typed character. */
    font-family: var(--ghv-mono);
    font-size: clamp(13px, 1.2vw, 18px);
    color: var(--ghv-cream, #f1dfdb);
    line-height: 1.35;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
}
.ghv__pp-text::before {
    content: "";
    animation: ghv-pp-typewriter var(--t-loop) infinite cubic-bezier(.22,.6,.2,1);
}
.ghv__pp-caret {
    display: inline-block;
    width: 2px;
    height: 18px;
    background: var(--ghv-cream, #f1dfdb);
    margin-left: 2px;
    transform: translateY(2px);
    animation: ghv-pp-caret 0.85s steps(2) infinite;
}
.ghv__pp-send {
    margin-left: auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ghv-hr, #ff4848);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 0 0 1px rgba(255, 72, 72, 0.55),
        0 0 24px rgba(255, 72, 72, 0.45),
        0 8px 22px rgba(0, 0, 0, 0.35);
    transition: background .2s, transform .2s;
    animation: ghv-pp-send var(--t-loop) infinite ease;
}
.ghv__pp-send svg {
    width: 18px; height: 18px;
    stroke: #fff;
}
/* Big macOS-style cursor that drifts down to the CTA and clicks it */
.ghv__pp-cursor {
    position: absolute;
    top: -10px;
    left: 56%;
    width: 28px;
    height: 32px;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
    animation: ghv-pp-cursor var(--t-loop) infinite cubic-bezier(.5,.05,.3,1);
}
.ghv__pp-cursor svg { width: 100%; height: 100%; display: block; }

@keyframes ghv-pp {
    0%, 16%    { opacity: 0; transform: translateY(-12px); }
    18%        { opacity: 1; transform: translateY(0); }
    49%        { opacity: 1; transform: translateY(0); }
    50%, 100%  { opacity: 0; transform: translateY(-8px); }
}
@keyframes ghv-pp-caret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes ghv-pp-send {
    0%, 30%    { transform: scale(1); }
    30.5%, 31.5% { transform: scale(0.88); }
    32%, 100%  { transform: scale(1); }
}
/* Cursor — enters at ~19%, drifts in 19-30%, click at 30.5%, exit by 32%. */
@keyframes ghv-pp-cursor {
    0%, 19%    { opacity: 0; left: 56%; top: -22px; transform: scale(1); }
    21%        { opacity: 1; left: 56%; top: -22px; transform: scale(1); }
    30%        { opacity: 1; left: calc(100% - 44px); top: 22px; transform: scale(1); }
    30.5%      { opacity: 1; left: calc(100% - 44px); top: 22px; transform: scale(0.85); }
    31.5%      { opacity: 1; left: calc(100% - 44px); top: 22px; transform: scale(1); }
    32%, 100%  { opacity: 0; left: calc(100% - 44px); top: 22px; transform: scale(1); }
}
/* Typewriter — types the prompt 22-29%, holds until exit. */
@keyframes ghv-pp-typewriter {
    0%, 22%   { content: ""; }
    23%   { content: "Bui"; }
    24%   { content: "Build"; }
    25%   { content: "Build me"; }
    25.5% { content: "Build me a"; }
    26%   { content: "Build me a workforce"; }
    27%   { content: "Build me a workforce readi"; }
    27.5% { content: "Build me a workforce readiness"; }
    28%   { content: "Build me a workforce readiness brief"; }
    29%, 49% { content: "Build me a workforce readiness brief"; }
    50%, 100% { content: ""; }
}

/* ----- Artifact stage ------------------------------------------------- */
.ghv__art-stage {
    position: absolute;
    top: 96px;       /* sits below the input field (no header in input now) */
    left: 0;
    right: 0;
    bottom: 0;
}
/* Glassmorphic artifact card — translucent navy/cream tint, frosted edge,
   AI-aura outer glow. Hero video tints through. */
.ghv__art {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(143, 143, 196, 0.18) 0%, transparent 55%),
        radial-gradient(120% 80% at 100% 100%, rgba(255, 72, 0, 0.16) 0%, transparent 55%),
        linear-gradient(160deg, rgba(241, 223, 219, 0.10) 0%, rgba(18, 18, 37, 0.55) 60%, rgba(18, 18, 37, 0.75) 100%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-radius: 18px;
    padding: 18px 20px 20px;
    color: var(--ghv-cream, #f1dfdb);
    font-family: 'Inter', system-ui, sans-serif;
    /* AI aura glow + crisp 1px frosted edge */
    box-shadow:
        0 0 0 1px rgba(241, 223, 219, 0.18),
        0 0 0 1px rgba(143, 143, 196, 0.20) inset,
        0 0 36px rgba(143, 143, 196, 0.30),
        0 0 80px rgba(255, 72, 72, 0.18),
        0 28px 64px rgba(0, 0, 0, 0.50),
        0 12px 22px rgba(0, 0, 0, 0.30);
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    will-change: transform, opacity;
    animation-duration: var(--t-loop);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.22,.7,.2,1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}
/* Iridescent gradient ring overlay — hairline rainbow edge */
.ghv__art::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 72, 72, 0.55) 0%,
        rgba(143, 143, 196, 0.35) 35%,
        rgba(255, 255, 255, 0.10) 65%,
        rgba(255, 72, 0, 0.40) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}
/* Hide the legacy artifact header chrome — markup may still be present in
   older instances; new artifacts have no head. */
.ghv__art-head { display: none; }

/* Each artifact gets ~9% of the loop on screen, with crossfade slides */
.ghv__art-1 { animation-name: ghv-art-1; z-index: 3; }
.ghv__art-2 { animation-name: ghv-art-2; z-index: 4; }
.ghv__art-3 { animation-name: ghv-art-3; z-index: 5; }

/* Scene 3 visible window on 44s loop: 7s..22s = 15.9%..50%.
   Cursor clicks at 30.5%. Three artifacts split the remaining 19% evenly. */
@keyframes ghv-art-1 {
    0%, 30%    { opacity: 0; transform: translateY(12px) scale(0.985); }
    32%        { opacity: 1; transform: translateY(0) scale(1); }
    37%        { opacity: 1; transform: translateY(0) scale(1); }
    38%, 100%  { opacity: 0; transform: translateY(-6px) scale(0.99); }
}
@keyframes ghv-art-2 {
    0%, 37%    { opacity: 0; transform: translateY(12px) scale(0.985); }
    38.5%      { opacity: 1; transform: translateY(0) scale(1); }
    43%        { opacity: 1; transform: translateY(0) scale(1); }
    44%, 100%  { opacity: 0; transform: translateY(-6px) scale(0.99); }
}
@keyframes ghv-art-3 {
    0%, 43%    { opacity: 0; transform: translateY(12px) scale(0.985); }
    44.5%      { opacity: 1; transform: translateY(0) scale(1); }
    49%        { opacity: 1; transform: translateY(0) scale(1); }
    50%, 100%  { opacity: 0; transform: translateY(-6px) scale(0.99); }
}

/* Shared head */
.ghv__art-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(18, 18, 37, 0.06);
    margin-bottom: 12px;
    flex-shrink: 0;
}
.ghv__art-icon {
    width: 22px; height: 22px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.ghv__art-icon svg { width: 14px; height: 14px; }
.ghv__art-icon--table { background: linear-gradient(135deg, #6d76e0, #2C2C4A); }
.ghv__art-icon--viz   { background: linear-gradient(135deg, #9EC400, #7AA000); }
.ghv__art-icon--deck  { background: linear-gradient(135deg, #FF4800, #FF4800); }
.ghv__art-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}
.ghv__art-badge {
    font-family: var(--ghv-mono);
    font-size: 10px;
    color: #6c6c80;
    background: rgba(18, 18, 37, 0.06);
    padding: 3px 8px;
    border-radius: 99px;
}
.ghv__art-badge--live {
    color: #7AA000;
    background: rgba(217, 255, 0, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ghv__art-badge--live span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #9EC400;
    box-shadow: 0 0 0 0 rgba(217, 255, 0, 0.5);
    animation: ghv-art-pulse 1.6s ease-out infinite;
}
@keyframes ghv-art-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(217, 255, 0, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(217, 255, 0, 0); }
    100% { box-shadow: 0 0 0 0   rgba(217, 255, 0, 0); }
}

/* ----- Artifact 1: glassy succession table -------------------------- */
.ghv__art--table {
    /* Inherit base glass styling, just tighten padding for table density */
    padding: 22px 24px 24px;
    color: var(--ghv-cream, #f1dfdb);
    font-family: var(--ghv-serif);
}
.ghv__art-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 2;
}
.ghv__art-tr {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 90px 70px;
    gap: 16px;
    align-items: center;
    padding: 13px 12px;
    font-family: var(--ghv-serif);
    font-size: 15px;
    font-weight: 400;
    color: var(--ghv-cream, #f1dfdb);
    border-bottom: 1px solid rgba(241, 223, 219, 0.12);
    /* Stagger row entry */
    opacity: 0;
    transform: translateY(6px);
    will-change: opacity, transform;
    animation: ghv-art-tr-in var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
}
.ghv__art-tr--head {
    font-family: var(--ghv-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(241, 223, 219, 0.60);
    font-weight: 500;
    border-bottom: 1px solid rgba(241, 223, 219, 0.22);
    padding: 10px 12px;
    /* Header is part of the chrome — no enter animation, no border-bottom doubled */
    animation: none;
    opacity: 1;
    transform: none;
}
.ghv__art-tr:not(.ghv__art-tr--head):last-child {
    border-bottom: none;
}
/* Stagger each non-head row by index */
.ghv__art-tr:nth-of-type(2)  { animation-delay: 0s; }
.ghv__art-tr:nth-of-type(3)  { animation-delay: .04s; }
.ghv__art-tr:nth-of-type(4)  { animation-delay: .08s; }
.ghv__art-tr:nth-of-type(5)  { animation-delay: .12s; }
.ghv__art-tr:nth-of-type(6)  { animation-delay: .16s; }
.ghv__art-tr:nth-of-type(7)  { animation-delay: .20s; }
@keyframes ghv-art-tr-in {
    0%, 31%   { opacity: 0; transform: translateY(8px); }
    33%, 37%  { opacity: 1; transform: translateY(0); }
    38%, 100% { opacity: 0; transform: translateY(-2px); }
}

/* Percentage badge */
.ghv__art-pct {
    font-family: var(--ghv-mono);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    text-align: center;
    min-width: 56px;
}
.ghv__art-pct--hi { background: rgba(217, 255, 0, 0.28); color: #D9FF00; }
.ghv__art-pct--md { background: rgba(255, 72, 0, 0.28); color: #FF4800; }
.ghv__art-pct--lo { background: rgba(241, 223, 219, 0.10); color: rgba(241, 223, 219, 0.45); }

/* Risk pill */
.ghv__art-pill {
    font-family: var(--ghv-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    text-align: center;
    text-transform: uppercase;
}
.ghv__art-pill--ok   { color: #D9FF00; background: rgba(217, 255, 0, 0.18); }
.ghv__art-pill--warn { color: #FF4800; background: rgba(255, 72, 0, 0.20); }
.ghv__art-pill--bad  { color: #FF9A9A; background: rgba(255, 72, 72, 0.22); }

/* ----- Artifact 2: animated skill-demand area chart ------------------- */
.ghv__art--chart {
    /* Inherit base glass; just retune padding + ensure cream text */
    color: var(--ghv-cream, #f1dfdb);
    padding: 22px 24px 22px;
    gap: 14px;
}
.ghv__art-chart-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.ghv__art-chart-eyebrow {
    font-family: var(--ghv-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ghv-accent, #ff4848);
}
.ghv__art-chart-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.ghv__art-chart-title {
    font-family: var(--ghv-serif);
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
    color: var(--ghv-cream, #f1dfdb);
}
.ghv__art-chart-trend {
    font-family: var(--ghv-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: #FF9A9A;
    background: rgba(255, 72, 72, 0.20);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.ghv__art-chart-legend {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}
.ghv__art-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ghv-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: rgba(241, 223, 219, 0.70);
}
.ghv__art-chart-legend-swatch {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #ff7a7a;
}
.ghv__art-chart-legend-item--supply .ghv__art-chart-legend-swatch {
    background: repeating-linear-gradient(90deg, #8F8FC4 0 6px, transparent 6px 10px);
}

/* Chart canvas */
.ghv__art-chart {
    position: relative;
    flex: 1;
    min-height: 220px;
}
.ghv__art-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.ghv__art-chart-grid line {
    stroke: rgba(241, 223, 219, 0.12);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}
/* Lines + areas draw in on artifact entry */
.ghv__art-chart-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: ghv-chart-draw var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
    filter: drop-shadow(0 4px 8px rgba(75, 83, 188, 0.20));
}
.ghv__art-chart-line--supply {
    stroke-dasharray: 3 4;
    /* dashed line draws differently — fade in instead */
    animation-name: ghv-chart-fade;
}
.ghv__art-chart-area {
    opacity: 0;
    animation: ghv-chart-area var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
}
.ghv__art-chart-area--demand { animation-delay: .05s; }
.ghv__art-chart-area--supply { animation-delay: .15s; }
.ghv__art-chart-marker {
    opacity: 0;
    animation: ghv-chart-marker var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
}
.ghv__art-chart-marker-pulse {
    opacity: 0;
    transform-origin: 600px 12px;
    animation: ghv-chart-pulse var(--t-loop) infinite ease-out;
}
/* Chart internals draw during artifact 2's window: 38.5%..43% on 44s loop */
@keyframes ghv-chart-draw {
    0%, 38%   { stroke-dashoffset: 1200; }
    41%       { stroke-dashoffset: 0; }
    44%, 100% { stroke-dashoffset: 0; }
}
@keyframes ghv-chart-fade {
    0%, 39%   { opacity: 0; }
    41%, 100% { opacity: 1; }
}
@keyframes ghv-chart-area {
    0%, 39%   { opacity: 0; }
    41.5%, 100% { opacity: 1; }
}
@keyframes ghv-chart-marker {
    0%, 41%   { opacity: 0; transform: scale(0.4); transform-origin: 600px 12px; }
    42%, 100% { opacity: 1; transform: scale(1); transform-origin: 600px 12px; }
}
@keyframes ghv-chart-pulse {
    0%, 41.5%  { opacity: 0; r: 5; }
    42%        { opacity: 0.7; r: 5; }
    43.5%, 100%  { opacity: 0; r: 18; }
}

.ghv__art-chart-x-axis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 8px;
    font-family: var(--ghv-mono);
    font-size: 11px;
    color: rgba(241, 223, 219, 0.55);
    letter-spacing: 0.10em;
}
.ghv__art-chart-x-axis span:not(:first-child) { text-align: center; }
.ghv__art-chart-x-axis span:last-child { text-align: right; }

.ghv__art-chart-kpi {
    position: absolute;
    top: 4px;
    right: 8px;
    background: rgba(255, 72, 72, 0.18);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 72, 72, 0.35);
    color: var(--ghv-cream, #f1dfdb);
    padding: 10px 14px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    box-shadow:
        0 0 24px rgba(255, 72, 72, 0.25),
        0 12px 28px rgba(0, 0, 0, 0.40);
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
    animation: ghv-chart-kpi var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
}
.ghv__art-chart-kpi-num {
    font-family: var(--ghv-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}
.ghv__art-chart-kpi-num small {
    font-family: var(--ghv-serif);
    font-size: 14px;
    margin-left: 1px;
    color: var(--ghv-accent, #ff4848);
}
.ghv__art-chart-kpi-label {
    font-family: var(--ghv-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(241, 223, 219, 0.65);
}
@keyframes ghv-chart-kpi {
    0%, 41.5%  { opacity: 0; transform: translateY(-6px) scale(0.95); }
    42%        { opacity: 1; transform: translateY(0) scale(1); }
    43%, 100%  { opacity: 0; transform: translateY(-4px) scale(0.97); }
}

.ghv__art-viz-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 6px;
}
.ghv__art-side-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 10px;
    align-items: center;
}
.ghv__art-side-label {
    font-family: var(--ghv-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: #1a1a2e;
    font-weight: 500;
}
.ghv__art-side-bar {
    display: block;
    height: 8px;
    background: rgba(18, 18, 37, 0.06);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.ghv__art-side-fill {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: 99px;
    transform-origin: left;
    transform: scaleX(0);
    animation: ghv-art-sidefill var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
}
.ghv__art-side-row:nth-child(1) .ghv__art-side-fill { animation-delay: calc(var(--t-loop) * -.165); }
.ghv__art-side-row:nth-child(2) .ghv__art-side-fill { animation-delay: calc(var(--t-loop) * -.160); }
.ghv__art-side-row:nth-child(3) .ghv__art-side-fill { animation-delay: calc(var(--t-loop) * -.155); }
@keyframes ghv-art-sidefill {
    0%, 84%    { transform: scaleX(0); }
    88%        { transform: scaleX(1); }
    89.5%      { transform: scaleX(1); }
    90%, 100%  { transform: scaleX(0); }
}
.ghv__art-side-num {
    font-family: var(--ghv-mono);
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    min-width: 30px;
    text-align: right;
}

/* ----- Artifact 3: live workforce dashboard ------------------------- */
.ghv__art--dash {
    color: var(--ghv-cream, #f1dfdb);
    padding: 20px 22px 22px;
}
.ghv__art-dash {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 2;
    min-height: 0;
}

.ghv__art-dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.ghv__art-dash-eyebrow {
    font-family: var(--ghv-mono);
    font-size: 10.5px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(241, 223, 219, 0.55);
    display: block;
    margin-bottom: 4px;
}
.ghv__art-dash-title {
    font-family: var(--ghv-serif);
    font-size: 22px;
    line-height: 1.1;
    color: var(--ghv-cream, #f1dfdb);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.ghv__art-dash-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ghv-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #D9FF00;
    background: rgba(217, 255, 0, 0.14);
    border: 1px solid rgba(217, 255, 0, 0.30);
    padding: 4px 10px;
    border-radius: 999px;
}
.ghv__art-dash-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #D9FF00;
    box-shadow: 0 0 0 0 rgba(109, 240, 194, 0.7);
    animation: ghv-dash-pulse 2s infinite;
}
@keyframes ghv-dash-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(109, 240, 194, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(109, 240, 194, 0); }
    100% { box-shadow: 0 0 0 0   rgba(109, 240, 194, 0); }
}

/* KPI strip */
.ghv__art-dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex-shrink: 0;
}
.ghv__art-dash-kpi {
    background: rgba(241, 223, 219, 0.05);
    border: 1px solid rgba(241, 223, 219, 0.10);
    border-radius: 12px;
    padding: 12px 14px 8px;
    position: relative;
    overflow: hidden;
}
.ghv__art-dash-kpi-label {
    font-family: var(--ghv-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(241, 223, 219, 0.55);
    display: block;
    margin-bottom: 6px;
}
.ghv__art-dash-kpi-val {
    font-family: var(--ghv-serif);
    font-size: 26px;
    line-height: 1;
    color: var(--ghv-cream, #f1dfdb);
    display: inline-block;
    margin-right: 6px;
}
.ghv__art-dash-kpi-val small {
    font-family: var(--ghv-serif);
    font-size: 14px;
    color: rgba(241, 223, 219, 0.55);
    margin-left: 1px;
}
.ghv__art-dash-kpi-delta {
    font-family: var(--ghv-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}
.ghv__art-dash-kpi-delta--up   { color: #D9FF00; }
.ghv__art-dash-kpi-delta--down { color: #FF9A9A; }
.ghv__art-dash-spark {
    width: 100%;
    height: 22px;
    margin-top: 8px;
    display: block;
}

/* Bottom row */
.ghv__art-dash-bottom {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
.ghv__art-dash-donut {
    position: relative;
    background: rgba(241, 223, 219, 0.04);
    border: 1px solid rgba(241, 223, 219, 0.10);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ghv__art-dash-donut-svg {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 110px;
    filter: drop-shadow(0 0 12px rgba(143, 143, 196, 0.30));
}
.ghv__art-dash-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}
.ghv__art-dash-donut-num {
    font-family: var(--ghv-serif);
    font-size: 20px;
    line-height: 1;
    color: var(--ghv-cream, #f1dfdb);
}
.ghv__art-dash-donut-label {
    font-family: var(--ghv-mono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(241, 223, 219, 0.55);
    margin-top: 3px;
}

/* Mini employee list */
.ghv__art-dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ghv__art-dash-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(241, 223, 219, 0.05);
    border: 1px solid rgba(241, 223, 219, 0.08);
    border-radius: 10px;
}
.ghv__art-dash-row-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ghv-mono);
    font-size: 10px;
    font-weight: 600;
    color: rgba(18, 18, 37, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20);
}
.ghv__art-dash-row-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ghv__art-dash-row-name {
    font-family: var(--ghv-serif);
    font-size: 14px;
    line-height: 1.15;
    color: var(--ghv-cream, #f1dfdb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ghv__art-dash-row-sub {
    font-family: var(--ghv-mono);
    font-size: 10px;
    color: rgba(241, 223, 219, 0.55);
}
.ghv__art-dash-row-pill {
    font-family: var(--ghv-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.ghv__art-dash-row-pill--ok  { color: #D9FF00; background: rgba(217, 255, 0, 0.18); }
.ghv__art-dash-row-pill--dev { color: #8F8FC4; background: rgba(143, 143, 196, 0.20); }
.ghv__art-dash-row-pill--gap { color: #FF4800; background: rgba(255, 72, 0, 0.20); }

/* ----- Page-load fade --------------------------------------------------- */
@keyframes ghv-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Iridescent border on AI responses ------------------------------- */
/* Subtle, static. Just a thin gradient stroke, nothing rotating, nothing
   layered over the element itself. Applied via ::before with a border-mask
   so only the ring is visible. */

/* Scene 2 bot bubbles intentionally have no background or aura ring — the
   text reads against the white pane directly. */

/* Scene 3 — artifact card */
.ghv__art::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--ghv-ai-aura);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ghv *,
    .ghv *::before,
    .ghv *::after { animation: none !important; opacity: 1 !important; transform: none !important; }
    .ghv__scene { opacity: 1; position: static; }
    .ghv__scene--2, .ghv__scene--3 { display: none; }
}

/* =====================================================================
   SCENE 4: Voice agent — fires 1s..4s on the 45s loop = 2.2%..8.9%.
   Centered vertically: avatar at top, name + role + transcript caption,
   then a live waveform. Internal animations all fit within 2.2%..8.9%.
   ===================================================================== */
.ghv__voice {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 40px 32px;
    color: var(--ghv-cream, #f1dfdb);
    font-family: var(--ghv-mono);
    /* Subtle translucent panel behind the voice scene */
    background: rgba(241, 223, 219, 0.04);
    border: 1px solid rgba(241, 223, 219, 0.08);
    border-radius: 24px;
}
.ghv__voice-avatar {
    position: relative;
    width: 132px; height: 132px;
    border-radius: 50%;
    background: rgba(241, 223, 219, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 1px rgba(241, 223, 219, 0.18),
        0 0 28px rgba(143, 143, 196, 0.45),
        0 0 70px rgba(143, 143, 196, 0.25),
        0 16px 36px rgba(0, 0, 0, 0.45);
    /* Subtle scale "breathing" while speaking */
    animation: ghv-voice-breathe var(--t-loop) infinite ease-in-out;
}
.ghv__voice-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
/* Outer pulse ring that radiates while the voice agent is "speaking" */
.ghv__voice-avatar-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(143, 143, 196, 0.55);
    opacity: 0;
    animation: ghv-voice-pulse var(--t-loop) infinite ease-out;
}
.ghv__voice-role {
    margin-top: 8px;
    font-family: var(--ghv-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(241, 223, 219, 0.65);
    text-transform: none;
}
/* Two-message conversation thread, sits below the waveform */
.ghv__voice-thread {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 540px;
    align-items: stretch;
}
/* Each msg uses the scene-1 .ghv__bubble visuals (red user / cream agent
   with iridescent aura). Override only sizing + per-msg entry timing. */
.ghv__voice-msg {
    /* Slightly smaller than scene 1 since they sit under the avatar */
    font-size: clamp(15px, 1.15vw, 18px);
    padding: 12px 18px;
    border-radius: 22px;
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    will-change: opacity, transform;
    text-align: left;
}
.ghv__voice-msg--user {
    /* Red HR pill, right-aligned like scene 1 */
    border-bottom-right-radius: 6px;
    animation: ghv-voice-msg-user var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
}
.ghv__voice-msg--agent {
    /* Cream AI pill (scene-1 styling already applied via .ghv__bubble--ai) */
    border-bottom-left-radius: 6px;
    animation: ghv-voice-msg-agent var(--t-loop) infinite cubic-bezier(.22,.7,.2,1);
}
/* Voice scene window: 0%..13.6% on a 44s loop.
   User message in @ ~2%, agent reply @ ~7%. Both hold to 12%, fade out 13%. */
@keyframes ghv-voice-msg-user {
    0%, 1%    { opacity: 0; transform: translateY(8px) scale(0.985); }
    3%        { opacity: 1; transform: translateY(0) scale(1); }
    12%       { opacity: 1; transform: translateY(0) scale(1); }
    13%, 100% { opacity: 0; transform: translateY(-4px) scale(1); }
}
@keyframes ghv-voice-msg-agent {
    0%, 6%    { opacity: 0; transform: translateY(8px) scale(0.985); }
    8%        { opacity: 1; transform: translateY(0) scale(1); }
    12%       { opacity: 1; transform: translateY(0) scale(1); }
    13%, 100% { opacity: 0; transform: translateY(-4px) scale(1); }
}
.ghv__voice-wave {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    margin-top: 6px;
}
.ghv__voice-wave span {
    display: inline-block;
    width: 4px;
    background: rgba(241, 223, 219, 0.7);
    border-radius: 999px;
    height: 8px;
    animation: ghv-voice-bar 1.1s ease-in-out infinite;
}
/* Per-bar phase + amplitude variation so it looks organic */
.ghv__voice-wave span:nth-child(1)  { animation-delay: -0.10s; --ghv-h: 18px; }
.ghv__voice-wave span:nth-child(2)  { animation-delay: -0.45s; --ghv-h: 28px; }
.ghv__voice-wave span:nth-child(3)  { animation-delay: -0.20s; --ghv-h: 12px; }
.ghv__voice-wave span:nth-child(4)  { animation-delay: -0.70s; --ghv-h: 32px; }
.ghv__voice-wave span:nth-child(5)  { animation-delay: -0.30s; --ghv-h: 22px; }
.ghv__voice-wave span:nth-child(6)  { animation-delay: -0.55s; --ghv-h: 30px; }
.ghv__voice-wave span:nth-child(7)  { animation-delay: -0.15s; --ghv-h: 14px; }
.ghv__voice-wave span:nth-child(8)  { animation-delay: -0.85s; --ghv-h: 26px; }
.ghv__voice-wave span:nth-child(9)  { animation-delay: -0.35s; --ghv-h: 32px; }
.ghv__voice-wave span:nth-child(10) { animation-delay: -0.65s; --ghv-h: 18px; }
.ghv__voice-wave span:nth-child(11) { animation-delay: -0.25s; --ghv-h: 28px; }
.ghv__voice-wave span:nth-child(12) { animation-delay: -0.95s; --ghv-h: 14px; }
.ghv__voice-wave span:nth-child(13) { animation-delay: -0.40s; --ghv-h: 24px; }
.ghv__voice-wave span:nth-child(14) { animation-delay: -0.75s; --ghv-h: 30px; }
.ghv__voice-wave span:nth-child(15) { animation-delay: -0.05s; --ghv-h: 16px; }
.ghv__voice-wave span:nth-child(16) { animation-delay: -0.50s; --ghv-h: 22px; }
.ghv__voice-wave span:nth-child(17) { animation-delay: -0.30s; --ghv-h: 12px; }
.ghv__voice-wave span:nth-child(18) { animation-delay: -0.80s; --ghv-h: 26px; }
.ghv__voice-wave span:nth-child(19) { animation-delay: -0.45s; --ghv-h: 18px; }
.ghv__voice-wave span:nth-child(20) { animation-delay: -0.60s; --ghv-h: 14px; }
@keyframes ghv-voice-bar {
    0%, 100% { height: 8px; opacity: 0.55; }
    50%      { height: var(--ghv-h, 24px); opacity: 1; }
}
/* Window 0s..6s on a 44s loop = 0%..13.6%. */
@keyframes ghv-voice-breathe {
    0%        { transform: scale(1); }
    4%, 9%    { transform: scale(1.02); }
    13%, 100% { transform: scale(1); }
}
@keyframes ghv-voice-pulse {
    0%        { opacity: 0.7; transform: scale(1); }
    3%        { opacity: 0; transform: scale(1.18); }
    3.5%      { opacity: 0.7; transform: scale(1); }
    6.5%      { opacity: 0; transform: scale(1.18); }
    7%        { opacity: 0.6; transform: scale(1); }
    10%       { opacity: 0; transform: scale(1.18); }
    10.5%, 100% { opacity: 0; transform: scale(1); }
}

/* ===================================================================
   Tablet / narrow desktop (≤1024px) — single column, headline FIRST
   so the user sees the message before the supporting animation.
   =================================================================== */
@media (max-width: 1024px) {
    .ghv {
        min-height: 0;
        padding-top: 110px;
        padding-bottom: 64px;
    }
    .ghv__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 0 32px;
        min-height: 0;
        align-items: stretch;
    }
    .ghv__text { order: 1; max-width: 100%; }
    .ghv__chat {
        order: 2;
        max-width: 100%;
        width: 100%;
        justify-self: stretch;
        min-height: 520px;
    }
}

/* Landscape phones / short viewports — chat shrinks so headline still fits */
@media (max-width: 1024px) and (max-height: 540px) {
    .ghv { padding-top: 90px; padding-bottom: 40px; }
    .ghv__inner { gap: 24px; }
    .ghv__chat { min-height: 360px; }
}

/* ===================================================================
   Mobile (≤640px) — bubbles smaller, scenes shrink to fit narrow viewport.
   The four scenes overlap inside .ghv__chat, so its min-height must
   accommodate the tallest one (artifacts scene = the longest).
   =================================================================== */
@media (max-width: 640px) {
    .ghv { padding-top: 96px; padding-bottom: 56px; }
    .ghv__inner { padding: 0 20px; gap: 28px; }
    .ghv__heading { font-size: clamp(30px, 8.5vw, 44px); margin-bottom: 18px; }
    .ghv__sub { font-size: 14px; margin-bottom: 28px; }
    .ghv__buttons { gap: 10px; }
    .ghv__btn { padding: 12px 20px; font-size: 14px; }

    /* Overlay frame — sized to fit the longest scene (artifacts: ~520px) */
    .ghv__chat { min-height: 520px; max-width: 100%; }

    /* === SCENE 1: chat bubbles === */
    .ghv__chat-thread { gap: 12px; }
    .ghv__bubble {
        max-width: 92%;
        padding: 12px 18px;
        font-size: 15px;
        line-height: 1.35;
        border-radius: 20px;
    }
    .ghv__bubble--hr { border-bottom-right-radius: 5px; }
    .ghv__bubble--ai { border-bottom-left-radius: 5px; }

    /* === SCENE 2: Teams panel === */
    .ghv__tm-sidebar { width: 48px; padding: 10px 0 12px; gap: 4px; }
    .ghv__tm-sidebar-logo { width: 26px; height: 26px; margin-bottom: 8px; }
    .ghv__tm-sidebar-logo img { width: 18px; height: 18px; }
    .ghv__tm-rail { width: 42px; padding: 5px 0 4px; }
    .ghv__tm-rail svg { width: 14px; height: 14px; }
    .ghv__tm-rail em { font-size: 7px; }
    .ghv__tm-rail-badge { min-width: 12px; height: 12px; font-size: 8px; right: 4px; }
    .ghv__tm-pane { left: 48px; }
    .ghv__tm-thread { padding: 12px 12px 14px; gap: 10px; justify-content: flex-start; }
    .ghv__tm-row { gap: 8px; }
    .ghv__tm-avatar { width: 28px; height: 28px; font-size: 11px; }
    .ghv__tm-msg-meta { font-size: 10.5px; }
    .ghv__tm-msg-meta strong { font-size: 12px; }
    .ghv__tm-msg-bubble {
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 18px;
    }
    .ghv__tm-row--user .ghv__tm-msg-bubble { border-bottom-right-radius: 5px; }
    .ghv__tm-row--bot  .ghv__tm-msg-bubble { border-bottom-left-radius: 5px; }
    .ghv__tm-attach-card { padding: 7px 10px 7px 7px; gap: 8px; }
    .ghv__tm-file-icon svg { width: 22px; height: 24px; }
    .ghv__tm-file-name { max-width: 140px; font-size: 12px; }
    .ghv__tm-file-size { font-size: 10px; }
    .ghv__tm-skill-chips { gap: 4px; }
    .ghv__tm-chip { font-size: 10.5px; padding: 3px 8px; }

    /* === SCENE 3: prompt + artifacts === */
    .ghv__pp-input {
        padding: 10px 10px 10px 16px;
        min-height: 48px;
        gap: 10px;
        border-radius: 12px;
    }
    .ghv__pp-text { font-size: 13.5px; }
    .ghv__pp-caret { height: 14px; }
    .ghv__pp-send { width: 36px; height: 36px; }
    .ghv__pp-send svg { width: 14px; height: 14px; }
    .ghv__pp-cursor { width: 22px; height: 25px; }

    .ghv__art-stage { top: 78px; }
    .ghv__art {
        padding: 14px 14px 16px;
        border-radius: 12px;
    }
    /* Artifact 1 — table */
    .ghv__art--table { padding: 14px 14px 14px; }
    .ghv__art-tr {
        grid-template-columns: 1.3fr 1fr 56px 50px;
        gap: 8px;
        padding: 9px 6px;
        font-size: 12px;
    }
    .ghv__art-tr--head { font-size: 9px; padding: 8px 6px; letter-spacing: 0.14em; }
    .ghv__art-pct { font-size: 11px; padding: 3px 6px; min-width: 44px; }
    .ghv__art-pill { font-size: 9.5px; padding: 3px 7px; letter-spacing: 0.06em; }

    /* Artifact 2 — chart */
    .ghv__art--chart { padding: 14px 14px 16px; gap: 10px; }
    .ghv__art-chart-eyebrow { font-size: 9.5px; letter-spacing: 0.16em; }
    .ghv__art-chart-title { font-size: 18px; }
    .ghv__art-chart-trend { font-size: 10.5px; padding: 3px 8px; }
    .ghv__art-chart-legend { gap: 12px; }
    .ghv__art-chart-legend-item { font-size: 10px; gap: 6px; }
    .ghv__art-chart-legend-swatch { width: 14px; }
    .ghv__art-chart { min-height: 160px; }
    .ghv__art-chart-x-axis { font-size: 10px; margin-top: 6px; }
    .ghv__art-chart-kpi { padding: 7px 10px; top: 2px; right: 4px; }
    .ghv__art-chart-kpi-num { font-size: 18px; }
    .ghv__art-chart-kpi-num small { font-size: 11px; }
    .ghv__art-chart-kpi-label { font-size: 8px; }

    /* Artifact 3 — slide deck */
    /* Dashboard mobile tightening */
    .ghv__art--dash { padding: 16px; }
    .ghv__art-dash { gap: 10px; }
    .ghv__art-dash-title { font-size: 18px; }
    .ghv__art-dash-eyebrow { font-size: 9.5px; letter-spacing: 0.18em; }
    .ghv__art-dash-live { font-size: 9px; padding: 3px 8px; }
    .ghv__art-dash-kpis { gap: 6px; }
    .ghv__art-dash-kpi { padding: 9px 10px 6px; border-radius: 10px; }
    .ghv__art-dash-kpi-val { font-size: 20px; }
    .ghv__art-dash-kpi-val small { font-size: 12px; }
    .ghv__art-dash-kpi-label { font-size: 8.5px; letter-spacing: 0.14em; }
    .ghv__art-dash-spark { height: 16px; }
    .ghv__art-dash-bottom { grid-template-columns: 96px 1fr; gap: 8px; }
    .ghv__art-dash-donut-svg { max-width: 76px; }
    .ghv__art-dash-donut-num { font-size: 16px; }
    .ghv__art-dash-row { padding: 6px 8px; gap: 8px; grid-template-columns: 24px 1fr auto; }
    .ghv__art-dash-row-avatar { width: 24px; height: 24px; font-size: 9px; }
    .ghv__art-dash-row-name { font-size: 12px; }
    .ghv__art-dash-row-sub { font-size: 9px; }
    .ghv__art-dash-row-pill { font-size: 8.5px; padding: 3px 7px; }

    /* === SCENE 4: voice agent === */
    .ghv__voice { gap: 10px; padding: 24px 16px; }
    .ghv__voice-avatar {
        width: 96px; height: 96px;
    }
    .ghv__voice-thread { gap: 8px; max-width: 100%; }
    .ghv__voice-msg {
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 18px;
    }
    .ghv__voice-wave { gap: 3px; height: 24px; }
    .ghv__voice-wave span { width: 3px; }
}

/* =====================================================================
   Bleed grid — graph-paper grid that sits at the bottom of the hero and
   extends visually into the next section. Lines are white-on-navy here;
   the tiers section paints a matching navy-on-cream grid at its top so
   the surface feels continuous across the dark/cream boundary.
   ===================================================================== */
.ghv {
    position: relative;
}
.ghv__bleed-grid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 320px;
    pointer-events: none;
    z-index: 1;
    background-image:
        linear-gradient(to right, rgba(241, 223, 219, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(241, 223, 219, 0.10) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    /* Fade in from above, hold full opacity at the bottom edge */
    mask-image: linear-gradient(to bottom, transparent 0%, #000 60%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%, #000 100%);
}
@media (max-width: 1024px) {
    .ghv__bleed-grid { height: 220px; }
}
@media (max-width: 640px) {
    .ghv__bleed-grid { height: 160px; }
}

/* =====================================================================
   Customer logos strip — styled to match the legacy .hero-logos look.
   Sits below the hero video, on the cream section background.
   ===================================================================== */
.ghv__logos {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-w, 1300px);
    margin: 0 auto;
    padding: 24px 79px 32px;
    text-align: center;
}
.ghv__logos-label {
    font-family: var(--font-mono, 'Roboto Mono', monospace);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(241, 223, 219, 0.85);
    margin-bottom: 14px;
    display: block;
}
.ghv__logos-strip {
    width: 100%;
    max-width: 1252px;
    margin: 0 auto;
    height: 64px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.ghv__logos-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: ghv-logos-scroll 40s linear infinite;
}
@keyframes ghv-logos-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ghv__logos-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 64px;
}
.ghv__logos-item img {
    height: 56px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity .25s ease;
}
.ghv__logos-item:hover img { opacity: 1; }

@media (max-width: 1024px) {
    .ghv__logos { padding: 20px 32px 28px; }
    .ghv__logos-label { font-size: 12px; margin-bottom: 12px; }
    .ghv__logos-strip { height: 48px; }
    .ghv__logos-track { gap: 44px; animation-duration: 32s; }
    .ghv__logos-item { height: 48px; }
    .ghv__logos-item img { height: 40px; }
}
@media (max-width: 640px) {
    .ghv__logos { padding: 16px 20px 24px; }
    .ghv__logos-track { gap: 36px; }
    .ghv__logos-item img { height: 32px; }
}



/* ===== prototype overrides folded in ===== */

/* ============ BRAND RE-SKIN OVERRIDE (prototype) ============ */
:root{ --g-orange:#FF4800; --g-coral:#FF4848; --g-cream:#F1DFDB;
       --g-navy:#121225; --g-slate:#414165; --g-yellow:#D9FF00; }

/* Chat / voice bubbles: product UI uses mono, not serif */
.ghv__bubble, .ghv__bubble-text{
  font-family: var(--ghv-mono) !important;
  font-size: clamp(14px, 1.15vw, 17px) !important;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.ghv__voice-msg{ font-size: clamp(13px,1.05vw,15.5px) !important; }

/* The animated panel becomes a branded product frame:
   thin orange border + subtle grid texture + corner dots */
.ghv__chat{
  position: relative;
  min-height: 548px;            /* more room so scenes aren't cramped */
  border: none;                 /* no outline frame */
  border-radius: 16px;
  background: rgba(18,18,37,0.18);
  /* Frosted-glass: the hero video shows through, lightly blurred */
  backdrop-filter: blur(7px) saturate(112%);
  -webkit-backdrop-filter: blur(7px) saturate(112%);
}
/* Consistent breathing room on every scene (inset from the frame) */
.ghv__scene{ inset: 22px !important; }

/* Voice avatar: keep it perfectly circular (don't let flexbox squish it)
   and stop the scale "breathing" bob. The expanding pulse ring stays. */
.ghv__voice-avatar{ flex-shrink:0 !important; animation:none !important; }

/* Drop the iridescent rainbow strokes (off-brand). AI bubbles + artifact
   cards keep a single clean cream hairline instead. */
.ghv{ --ghv-ai-aura: rgba(241,223,219,0.40); }
/* Slow the whole loop ~30% so the scene-3 artifacts don't flip by so fast.
   (Kept in proportion with the JS scene-switch clock below to stay in sync.) */
.ghv{ --t-loop: 58.5s !important; }
.ghv__art::after{ display:none !important; }
.ghv__chat::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(241,223,219,0.045) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(241,223,219,0.045) 0 1px, transparent 1px 30px);
  mask-image: radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 100%);
}
.ghv__scene{ z-index:1; }

/* Corner dots (brand 'border frame with corner dots') */
.ghv__corner{ position:absolute; width:8px; height:8px; background:var(--g-cream);
  z-index:3; pointer-events:none; }
.ghv__corner--tl{ top:-4px; left:-4px; }
.ghv__corner--tr{ top:-4px; right:-4px; }
.ghv__corner--bl{ bottom:-4px; left:-4px; }
.ghv__corner--br{ bottom:-4px; right:-4px; }

/* Category eyebrow per scene: '> LABEL' in mono, orange */
.ghv__eyebrow{
  position:absolute; top:14px; left:18px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ghv-mono); font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--g-orange);
}
.ghv__eyebrow::before{ content:""; width:7px; height:7px; background:var(--g-orange);
  display:inline-block; }

/* Give scenes headroom so the eyebrow never collides with content */
.ghv__chat-thread{ margin-top:52px; }
.ghv__tm-thread{ padding-top:52px !important; }
.ghv__voice{ padding-top:46px !important; }
/* Scene 3: push prompt below the eyebrow, and the artifact stage clearly
   below the input field (no overlap) */
.ghv__scene--3 .ghv__pp{ top:40px !important; }
.ghv__scene--3 .ghv__art-stage{ top:124px !important; }
/* Scene 2: eyebrow clears the left product rail */
.ghv__scene--2 .ghv__eyebrow{ left:82px; }

/* Scene 2 stays authentically inside Microsoft Teams (integration story).
   The brand panel frame + eyebrow still wrap it, but the Teams chrome,
   Segoe UI, Teams-purple accents and periwinkle chips are preserved. */
.ghv__scene--2 .ghv__tm-pane,
.ghv__scene--2 .ghv__tm-sidebar,
.ghv__scene--2 .ghv__tm-pane *,
.ghv__scene--2 .ghv__tm-sidebar *{
  font-family:'Segoe UI','Segoe UI Web (West European)',system-ui,sans-serif !important;
}
.ghv__scene--2 .ghv__tm-rail--active::before{ background:#6e7eff !important; }
.ghv__scene--2 .ghv__tm-chip{
  background:rgba(184,192,255,0.15) !important; color:#b8c0ff !important;
  border:1px solid rgba(184,192,255,0.30) !important;
}
.ghv__scene--2 .ghv__tm-row--bot .ghv__tm-msg-bubble em{
  background:rgba(18,18,37,0.10) !important; color:inherit !important; font-weight:600 !important;
}

/* Delicate, balanced status palette for the analytics scene:
   soft sage (good) / soft periwinkle (neutral) / soft terracotta (caution). */
.ghv__art-pill--ok,  .ghv__art-dash-row-pill--ok { color:#A6D9BC!important; background:rgba(147,201,168,0.14)!important; }
.ghv__art-pill--warn,.ghv__art-dash-row-pill--dev{ color:#BFC2E8!important; background:rgba(167,171,216,0.14)!important; }
.ghv__art-pill--bad, .ghv__art-dash-row-pill--gap{ color:#E8B49F!important; background:rgba(224,164,143,0.14)!important; }
.ghv__art-pct--hi{ color:#A6D9BC!important; background:rgba(147,201,168,0.14)!important; }
.ghv__art-pct--md{ color:#BFC2E8!important; background:rgba(167,171,216,0.14)!important; }
/* Dashboard accents (live badge + KPI deltas) softened to match */
.ghv__art-dash-live{ color:#A6D9BC!important; background:rgba(147,201,168,0.10)!important; border-color:rgba(147,201,168,0.26)!important; }
.ghv__art-dash-live-dot{ background:#A6D9BC!important; box-shadow:0 0 0 2px rgba(147,201,168,0.22)!important; }
.ghv__art-dash-kpi-delta--up{ color:#A6D9BC!important; }
.ghv__art-dash-kpi-delta--down{ color:#D69A9A!important; }

/* Dense tabular / list data -> Roboto Mono.
   Prata stays on titles + big stat numbers (brand editorial drama). */
.ghv__art--table, .ghv__art-tr, .ghv__art-dash-row-name{
  font-family: var(--ghv-mono) !important;
}
.ghv__art-tr{ font-size: 12.5px !important; letter-spacing:-0.015em; }

/* Prompt input: keep the full sentence from being clipped by the send button */
.ghv__pp-text{ font-size: clamp(12px, 0.95vw, 14px) !important; }

/* ---- still mode (screenshots only): freeze active scene content visible ---- */
html.ghv-still .ghv__scene.is-active *{ animation:none !important; }
html.ghv-still .ghv__scene.is-active .ghv__bubble,
html.ghv-still .ghv__scene.is-active .ghv__voice-msg,
html.ghv-still .ghv__scene.is-active .ghv__tm-row,
html.ghv-still .ghv__scene.is-active .ghv__art,
html.ghv-still .ghv__scene.is-active .ghv__art-tr,
html.ghv-still .ghv__scene.is-active .ghv__tm-chip,
html.ghv-still .ghv__scene.is-active .ghv__art-dash-kpi,
html.ghv-still .ghv__scene.is-active .ghv__art-dash-row,
html.ghv-still .ghv__scene.is-active .ghv__pp{
  opacity:1 !important; transform:none !important;
}
html.ghv-still .ghv__scene.is-active .ghv__art-chart-line,
html.ghv-still .ghv__scene.is-active .ghv__art-chart-area,
html.ghv-still .ghv__scene.is-active .ghv__art-dash-spark path{
  stroke-dashoffset:0 !important; opacity:1 !important;
}