/* Generated from the design's style-hover/active/focus attributes.
   Values are copied verbatim so hover/active states stay pixel-exact. */

.hvx1:hover { transform:rotate(-12deg) scale(1.1); }
.hvx2:hover { color:#16161d;background:#f0effa;text-decoration:none; }
.hvx3:hover { background:#f7f6fd;text-decoration:none; }
.hvx4:hover { transform:translateY(-2px);text-decoration:none; }
.hvx5:hover { border-color:#6d5ce6;color:#6d5ce6;background:#f7f6fd;text-decoration:none; }
.hvx6:active { transform:scale(.97); }
.hvx7:hover { transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(22,22,29,.5);color:#fff;text-decoration:none; }
.hvx8:hover { opacity:1;transform:translateY(-2px); }
.hvx9:hover { border-color:#6d5ce6;background:#f4f2ff;transform:scale(1.01); }
.hvx10:focus { border-color:#6d5ce6;box-shadow:0 0 0 4px rgba(109,92,230,.12); }
.hvx11:hover { transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(88,80,236,.55); }
.hvx12:active { transform:scale(.98); }
.hvx13:hover { animation-play-state:paused; }
.hvx14:hover { transform:translateY(-4px);box-shadow:0 16px 30px -10px rgba(80,63,205,.22);border-color:#d6d4ee; }
.hvx15:hover { border-color:#fecaca;transform:translateY(-2px); }
.hvx16:hover { transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(22,22,29,.14); }
.hvx17:hover { transform:translateY(-4px); }
.hvx18:hover { transform:translateY(-2px);box-shadow:0 16px 36px -14px rgba(22,22,29,.5);color:#fff;text-decoration:none; }
.hvx19:hover { transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(22,22,29,.5);color:#fff;text-decoration:none; }
.hvx20:hover { transform:translateY(-5px); }
.hvx21:hover { transform:translateY(-4px);box-shadow:0 28px 60px -20px rgba(80,63,205,.28); }
.hvx22:hover { transform:translateY(-6px);box-shadow:0 30px 62px -26px rgba(80,63,205,.3); }
.hvx23:hover { transform:translateY(-2px);color:#fff;text-decoration:none; }
.hvx24:hover { transform:translateY(-6px);box-shadow:0 34px 70px -28px rgba(15,15,22,.7); }
.hvx25:hover { background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26); }
.hvx26:hover { transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(139,92,246,.6);color:#0f0f16;text-decoration:none; }
.hvx27:hover { transform:translateY(-4px);box-shadow:0 20px 44px -16px rgba(80,63,205,.25); }
.hvx28:hover { color:#6d5ce6;border-color:#ddd6fe;background:#f7f6fd;text-decoration:none; }
.hvx29:hover { transform:translateY(-6px); }
.hvx30:hover { transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(22,22,29,.5); }
.hvx31:hover { border-color:#d6d4ee;box-shadow:0 8px 24px -14px rgba(22,22,29,.12); }
.hvx32:active { transform:scale(.99); }
.hvx33:hover { transform:translateY(-3px);box-shadow:0 18px 44px rgba(139,92,246,.4);color:#16161d;text-decoration:none; }
.hvx34:hover { border-color:#6d5ce6;text-decoration:none; }
.hvx35:hover { color:#16161d;text-decoration:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Behaviour the prototype held in React state, reproduced in CSS so it needs
   no JS and stays keyboard-reachable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nav mega-menus (were sc-if on navFeat/navUse/navRes/navCo) */
.hv-dd__panel { display: none; }
.hv-dd:hover .hv-dd__panel,
.hv-dd:focus-within .hv-dd__panel { display: block; }

/* Platform cards (were sc-if on pl.hovered / pl.idle) */
.hvp__live { display: none; }
.hvp:hover .hvp__live { display: block; }
.hvp:hover .hvp__idle { display: none; }

/* Audience panels (were sc-if on icp0..icp3); index 0 shows first */
.hv-icppanel { display: none; }
.hv-icppanel[data-hv-icp="0"] { display: flex; }
.hv-icppanel.is-active { display: flex; }
.hv-icppanel.is-hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOX MODEL — the single most important rule in this file.

   The design prototype ships NO css reset, so it renders under the browser
   default `box-sizing: content-box`: on its sections, `max-width:1200px` is the
   CONTENT width and the 32px side padding sits OUTSIDE it.

   main.css applies `*, *::before, *::after { box-sizing: border-box }` site-wide.
   Under that rule the same section is 1200 - 64 = 1136px of content — 64px
   narrower than designed. That is not cosmetic: it is why the four cards in
   "The old way doesn't work" wrap to three (they need 4*272 + 3*18 = 1142px),
   and it shifts every other section's internal layout too.

   So the design markup — and ONLY the design markup — is put back on
   content-box. Inner-page bodies still use main.css components that expect
   border-box, so this must stay scoped to .hv-design and must not leak.

   Elements the design explicitly marked `box-sizing:border-box` inline (the nav
   pill, the audience tabs) keep it: inline styles outrank this rule.
   ═══════════════════════════════════════════════════════════════════════════ */
.hv-design,
.hv-design *,
.hv-design *::before,
.hv-design *::after {
    box-sizing: content-box;
}

/* main.css's reset also zeroes margin/padding on every element. The design
   relies on the UA defaults for lists inside its cards, so restore them. */
.hv-design ul,
.hv-design ol { padding-left: 0; }
.hv-design li { list-style: none; }

/* Page wrapper — reproduces the design's outermost element:
   <div style="min-height:100vh;background:#fbfbfd;overflow-x:hidden;
               position:relative;isolation:isolate">
   overflow-x is load-bearing: the marquee tracks and the ambient decor layer
   deliberately extend past the viewport and rely on it to clip them. Without
   it the whole page scrolls sideways. */
#hv-root {
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
}