/* The home page's scroll story (owner-approved mockup 2026-09-26, artifact SRoBKsz2, modelled on Gravity's
 * Ragnarok Zero page). Loaded by index.php only, through $PAGE_CSS.
 *
 * Everything is scoped under .hs so nothing here can reach an interior page, and the colours are the
 * scenes' own tokens rather than site.css's: site.css flips --paper and friends for light-mode visitors,
 * and these scenes are art-directed to look the same for everyone.
 *
 * How it moves: each .hs-scene is a tall wrapper whose .hs-stage sticks to the top of the screen while the
 * page scrolls through it. home.js turns "how far through this scene" into 0..1 and drives every .hs-k
 * element from its data-o/x/y/s/b keyframes. Native scrolling throughout; nothing listens to the wheel. */

.hs {
  --hs-night: #0E1330;
  --hs-night-2: #0A0E24;
  --hs-ice: #C8D2F5;
  --hs-ice-2: #A9B6E4;
  --hs-gold: #E0AE43;
  --hs-gold-lt: #F2CE72;
  --hs-paper: #F7F2E6;
  --hs-paper-2: #EFE7D3;
  --hs-ink: #2B2721;
  --hs-mute: #6B6250;
  --hs-rule: #D8CBAF;
  --hs-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --hs-vh: 100vh;
  background: var(--hs-night);
  color: #E7E3D6;
  overflow-x: clip;               /* clip, not hidden: hidden would make a scroll container and break sticky */
}
@supports (height: 100svh) { .hs { --hs-vh: 100svh; } }
.hs img { max-width: 100%; height: auto; display: block; }
.hs h1, .hs h2 { font-family: var(--hs-display); font-weight: 700; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: .01em; }
.hs-eyebrow { font-weight: 800; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--hs-gold-lt); }
.hs-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hs .btn:focus-visible, .hs a:focus-visible { outline: 2px solid var(--hs-gold-lt); outline-offset: 3px; }
.hs-ghost { background: rgba(14, 19, 48, .55); border: 1px solid rgba(200, 210, 245, .45); color: #FFF8E8; }

.hs-scene { position: relative; }
.hs-stage { position: sticky; top: 0; height: var(--hs-vh); overflow: hidden; }
.hs-layer { position: absolute; inset: 0; }
.hs-k { will-change: opacity, transform; }
/* Decoration never takes a click (owner 2026-09-27: the splash buttons did nothing). The end-of-scene veil, the
   faded-out logo, the scroll cue, the particle canvases and the backdrop layers all sit ABOVE the copy in the
   stacking order, invisible or not, and were swallowing every click on the buttons under them. */
.hs-layer, .hs1-logo, .hs1-cue, .hs1-leaves, .hs-feathers, .hs5-glow { pointer-events: none; }

/* 1. splash, then the game ---------------------------------------------------------------------- */
#hs1 { height: 300vh; }
.hs1-bg { background: url(../img/hero-bg.webp) center / cover no-repeat; transform-origin: 50% 60%; }
.hs1-fog { background:
  radial-gradient(ellipse at 50% 55%, rgba(214, 222, 240, .35), transparent 60%),
  linear-gradient(180deg, rgba(14, 19, 48, .55), rgba(200, 210, 230, .55) 55%, rgba(14, 19, 48, .7)); }
.hs1-shade { background: linear-gradient(90deg, transparent 38%, rgba(10, 14, 36, .78) 62%, rgba(10, 14, 36, .9)); }
.hs1-leaves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs1-logo { position: absolute; left: 50%; top: 50%; width: min(620px, 78vw); translate: -50% -52%; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .45)); }
.hs1-cue { position: absolute; left: 50%; bottom: 0; width: 1px; height: 13vh; background: rgba(231, 227, 214, .45); overflow: hidden; }
.hs1-cue::after { content: ""; position: absolute; left: -1px; width: 3px; height: 30%; background: var(--hs-gold-lt); animation: hs-cue 2.2s ease-in-out infinite; }
@keyframes hs-cue { from { top: -30%; } to { top: 100%; } }
.hs .hs1-art { position: absolute; left: max(2vw, calc(50% - 640px)); bottom: -2vh; height: 92%; width: auto; max-width: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); }
.hs1-copy { position: absolute; left: 54%; top: 50%; translate: 0 -50%; width: min(520px, 40vw); display: grid; gap: 18px; }
.hs1-copy h1 { font-size: clamp(40px, 5.6vw, 76px); color: #fff; }
.hs1-copy h1 em { font-style: normal; color: var(--hs-gold-lt); }
.hs1-copy p { margin: 0; color: var(--hs-ice); font-size: 18px; max-width: 44ch; }
.hs1-copy .hs-beta { color: #fff; font-weight: 700; }
.hs1-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--hs-ice-2); font-size: 14px; font-weight: 700; letter-spacing: .04em; margin: 0; }
.hs1-meta > span + span::before { content: "|"; margin-right: 10px; opacity: .5; }
.hs1-meta .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #8a8a8a; }
.hs1-meta .dot.up { background: #6FCB7F; box-shadow: 0 0 0 3px rgba(111, 203, 127, .25); }
.hs1-meta .dot.down { background: #D9534F; }
.hs1-veil { background: linear-gradient(0deg, var(--hs-night-2) 30%, rgba(10, 14, 36, 0) 100%); }

/* 2. the card that becomes the screen -------------------------------------------------------- */
#hs2 { height: 400vh; background: var(--hs-night-2); }
#hs2 .hs-stage { background: var(--hs-night-2); }
.hs2-card { --i: 1; clip-path: inset(calc(var(--i) * 16%) calc(var(--i) * 9%) round calc(var(--i) * 18px)); }
.hs2-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.hs2-dim { background: linear-gradient(180deg, rgba(6, 8, 22, .35), rgba(6, 8, 22, .82)); }
.hs2-copy { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(820px, 90vw); text-align: center; display: grid; gap: 18px; justify-items: center; }
.hs2-copy h2 { font-size: clamp(32px, 4.6vw, 64px); color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.hs2-copy p { margin: 0; font-size: 18px; color: var(--hs-ice); max-width: 56ch; }

/* 3. parchment curtain: slides up over the still-pinned card ------------------------------------ */
#hs3 { position: relative; z-index: 3; margin-top: calc(-1 * var(--hs-vh)); min-height: var(--hs-vh); background: var(--hs-paper); color: var(--hs-ink);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, .45); overflow: hidden; }
.hs3-sky { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 78% 30%, rgba(74, 99, 168, .18), transparent 55%),
  radial-gradient(ellipse at 90% 100%, rgba(224, 174, 67, .18), transparent 50%); }
.hs3-inner { position: relative; max-width: 1180px; margin: 0 auto; min-height: var(--hs-vh); padding: 120px 24px 0;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 24px; }
.hs3-copy { display: grid; gap: 20px; padding-bottom: 80px; }
.hs3-copy .hs-eyebrow, .hs5-copy .hs-eyebrow { color: #7A5512; }
.hs3-copy h2 { font-size: clamp(32px, 4vw, 56px); color: var(--hs-ink); }
.hs3-copy > p { margin: 0; font-size: 18px; color: var(--hs-mute); max-width: 46ch; }
.hs-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.hs-points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-weight: 600; }
.hs-points li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; rotate: 45deg; background: var(--hs-gold); box-shadow: 0 0 0 3px rgba(224, 174, 67, .25); }
.hs-points small { display: block; font-weight: 400; color: var(--hs-mute); font-size: 15px; }
.hs-points a { color: #7A5512; font-weight: 700; }
.hs3-figure { position: relative; align-self: end; justify-self: center; filter: drop-shadow(0 20px 40px rgba(43, 39, 33, .22)); }
.hs .hs3-art { height: min(80vh, 660px); width: auto; max-width: none; }

/* 4. the six second jobs, one by one, over the classes loop -------------------------------------- */
#hs4 { height: 360vh; background: var(--hs-night); }
.hs4-vid { width: 100%; height: 100%; object-fit: cover; }
.hs4-shade { background: linear-gradient(0deg, rgba(10, 14, 36, .96) 8%, rgba(10, 14, 36, .55) 45%, rgba(10, 14, 36, .8)); }
.hs4-copy { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 86px); translate: -50% 0; width: min(900px, 92vw); text-align: center; display: grid; gap: 12px; justify-items: center; }
.hs4-copy h2 { font-size: clamp(28px, 3.8vw, 52px); color: #fff; }
.hs4-copy p { margin: 0; color: var(--hs-ice); font-size: 17px; }
.hs-cast { position: absolute; left: 50%; top: max(29vh, 270px); bottom: 3vh; translate: -50% 0; width: min(1400px, 94vw); align-content: center; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
.hs-cast a { display: grid; justify-items: center; gap: 2px; text-align: center; text-decoration: none; border-radius: 10px; padding-bottom: 4px; }
.hs-cast a:hover .hs-cast__art img { transform: translateY(-4px); }
/* Two rows of art share whatever height is left under the heading, minus room for the labels. */
.hs-cast__art { height: min(340px, calc((97vh - max(29vh, 270px) - 130px) / 2)); width: 100%; }
.hs .hs-cast__art img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .55)); transition: transform .2s ease; }
.hs-cast b { font: 700 19px/1.1 var(--hs-display); color: var(--hs-gold-lt); letter-spacing: .04em; margin-top: 6px; }
.hs-cast span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hs-ice-2); }

/* 5. Rachel's Favor and 6. VIP: pinned like the rest, the backdrop zooms and drifts while the words arrive -- */
#hsf, #hsv { height: 220vh; background: var(--hs-night); }
.hsf-bg, .hsv-bg { background-position: center; background-size: cover; background-repeat: no-repeat; }
.hsf-bg { background-image: url(../img/landing/feature-favor.webp); transform-origin: 70% 50%; }
.hsv-bg { background-image: url(../img/landing/feature-vip.webp); transform-origin: 30% 45%; }
.hsf-shade { background: linear-gradient(90deg, rgba(14, 19, 48, .92) 0%, rgba(14, 19, 48, .62) 44%, rgba(14, 19, 48, .12) 100%); }
.hsv-shade { background: linear-gradient(270deg, rgba(14, 19, 48, .92) 0%, rgba(14, 19, 48, .62) 44%, rgba(14, 19, 48, .12) 100%); }
.hs .hsf-art { position: absolute; right: max(3vw, calc(50% - 620px)); bottom: 0; height: min(78vh, 700px); width: auto; max-width: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45)); }
.hsf-copy, .hsv-copy { position: absolute; top: 50%; translate: 0 -50%; width: min(520px, 44vw); display: grid; gap: 16px; }
.hsf-copy { left: max(24px, calc(50% - 590px)); }
.hsv-copy { right: max(24px, calc(50% - 590px)); }
.hsf-copy h2, .hsv-copy h2 { font-size: clamp(30px, 3.6vw, 50px); color: #FFF8E8; }
.hsf-copy p, .hsv-copy p { margin: 0; color: #E6DFCB; font-size: 17px; }
.hs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hs-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: baseline; color: #EDE6D2; }
.hs-list li::before { content: ""; width: 8px; height: 8px; rotate: 45deg; background: var(--hs-gold); translate: 0 -2px; }
.hs-list b { color: var(--hs-gold-lt); }

/* 7. the claim: pinned, the Valkyrie descends while feathers fall ----------------------------------------------------------------------------- */
#hs5 { height: 220vh; background: var(--hs-paper-2); color: var(--hs-ink); }
#hs5 .hs-stage { background: var(--hs-paper-2); }
.hs5-glow { background: radial-gradient(circle at 36% 52%, rgba(242, 206, 114, .55), rgba(242, 206, 114, .18) 32%, transparent 58%); }
.hs-feathers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs5-inner { position: relative; max-width: 1400px; margin: 0 auto; height: 100%; padding: 0 24px; display: grid; grid-template-columns: auto minmax(0, 560px); justify-content: center; gap: 56px; align-items: center; }
/* Big, but capped so the copy column keeps a readable width beside her. */
.hs .hs5-art { height: min(80vh, 760px); width: auto; max-width: none; filter: drop-shadow(0 20px 40px rgba(43, 39, 33, .25)); }
.hs5-copy { display: grid; gap: 20px; padding-block: 70px 20px; }
.hs5-copy h2 { font-size: clamp(32px, 4vw, 56px); color: var(--hs-ink); }   /* site.css h2 is light in the dark scheme */
.hs-offer { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px 20px; background: var(--hs-paper); border: 1px solid var(--hs-rule); border-radius: 6px; }
.hs .hs-offer img { width: 96px; height: auto; }
.hs-offer b { display: block; font-size: 18px; }
.hs-offer span { color: var(--hs-mute); }
.hs3-copy .hs-ghost, .hs5-copy .hs-ghost { background: transparent; color: var(--hs-ink); border-color: var(--hs-rule); }
.hs3-copy .hs-row { margin-top: 8px; }
.hs-founder { margin: 0; font-size: 15px; color: var(--hs-mute); }
.hs-founder strong, .hs-founder b { color: var(--hs-ink); }

/* The music switch. Music is on by default (home.js); while the browser is still holding it back, and after a
   visitor mutes it, the button shows the crossed-out note and breathes a glow so it is easy to find. */
.hs-music { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: 54px; height: 54px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid rgba(242, 206, 114, .75); background: radial-gradient(circle at 50% 40%, #1C2452, #0A0E24 75%);
  color: var(--hs-gold-lt); animation: hs-invite 2.8s ease-in-out infinite; }
.hs-music:focus-visible { outline: 2px solid var(--hs-gold-lt); outline-offset: 4px; }
.hs-music svg { width: 34px; height: 30px; overflow: visible; }
.hs-music .hs-note { fill: currentColor; }
.hs-music .hs-wave { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.hs-music .hs-slash { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hs-music .hs-slash-bg { stroke: #0A0E24; stroke-width: 5.5; stroke-linecap: round; }
/* Muted: a crossed-out note, dimmed, and the whole button breathes a soft glow so it is noticed. */
.hs-music[aria-pressed="false"] .hs-note { opacity: .7; }
@keyframes hs-invite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 206, 114, .0), 0 4px 14px rgba(0, 0, 0, .45); }
  50%      { box-shadow: 0 0 0 7px rgba(242, 206, 114, .18), 0 0 22px rgba(242, 206, 114, .45); } }
/* Playing: the note glows and sound waves ripple out of it. */
.hs-music[aria-pressed="true"] { animation: none; box-shadow: 0 0 18px rgba(242, 206, 114, .6), 0 0 2px rgba(242, 206, 114, .9) inset; }
.hs-music[aria-pressed="true"] .hs-slash, .hs-music[aria-pressed="true"] .hs-slash-bg { display: none; }
.hs-music[aria-pressed="true"] .hs-note { filter: drop-shadow(0 0 4px rgba(242, 206, 114, .95)) drop-shadow(0 0 9px rgba(242, 206, 114, .6)); }
.hs-music[aria-pressed="true"] .hs-wave { animation: hs-wave 1.3s ease-out infinite; }
.hs-music[aria-pressed="true"] .hs-w2 { animation-delay: .22s; }
.hs-music[aria-pressed="true"] .hs-w3 { animation-delay: .44s; }
@keyframes hs-wave { 0% { opacity: 0; transform: translateX(-2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .hs-music { animation: none; }
  .hs-music[aria-pressed="true"] .hs-wave { animation: none; opacity: 1; }
}

/* ---- phones: art above, words below --------------------------------------------------------- */
@media (max-width: 760px) {
  #hs1 { height: 240vh; } #hs2 { height: 320vh; } #hs4 { height: 300vh; }
  .hs1-shade { background: linear-gradient(0deg, rgba(10, 14, 36, .92) 30%, rgba(10, 14, 36, 0) 62%); }
  .hs .hs1-art { left: 50%; translate: -50% 0; height: 62%; bottom: 34%; }
  .hs1-copy { left: 16px; right: 16px; width: auto; top: auto; bottom: 5vh; translate: none; gap: 12px; }
  .hs1-copy p { font-size: 16px; }
  .hs1-meta { font-size: 12px; }
  .hs1-meta > span:nth-child(3) { display: none; }   /* two items fit one phone line; the third wrapped under its own divider */
  .hs2-vid { object-fit: contain; }
  .hs2-copy p { font-size: 16px; }
  .hs3-inner { grid-template-columns: 1fr; padding-top: 96px; }
  .hs3-copy { padding-bottom: 0; }
  .hs .hs3-art { height: 52vh; }
  .hs4-copy { top: calc(env(safe-area-inset-top, 0px) + 70px); gap: 8px; }
  .hs4-copy p { display: none; }
  .hs-cast { grid-template-columns: repeat(2, 1fr); gap: 4px 10px; top: 24vh; bottom: 2vh; }
  .hs-cast__art { height: 15vh; }
  .hs-cast b { font-size: 15px; }
  .hs-cast span { font-size: 10px; }
  .hs5-inner { grid-template-columns: 1fr; gap: 10px; padding-top: 64px; align-content: center; }
  .hs .hs5-art { height: 24vh; justify-self: center; }
  .hs5-copy .hs-row { padding-bottom: 52px; }   /* clear of the music switch in the corner */
  .hs5-copy { padding-block: 0; gap: 12px; }
  .hs5-copy h2 { font-size: 26px; }
  .hs-offer { padding: 12px 14px; gap: 12px; }
  .hs .hs-offer img { width: 60px; }
  .hs-offer b { font-size: 16px; }
  .hs-offer span { font-size: 14px; }
  .hs-founder { font-size: 13px; }
  #hsf, #hsv { height: 200vh; }
  .hsf-shade, .hsv-shade { background: linear-gradient(180deg, rgba(14, 19, 48, .35) 0%, rgba(14, 19, 48, .8) 42%, rgba(14, 19, 48, .95) 100%); }
  .hs .hsf-art { right: 50%; translate: 50% 0; top: 64px; bottom: auto; height: 32vh; }
  .hsf-copy, .hsv-copy { left: 16px; right: 16px; width: auto; top: auto; bottom: 4vh; translate: none; gap: 10px; }
  .hsf-copy p, .hsv-copy p { font-size: 15px; }
  .hs-list { gap: 5px; font-size: 14px; }
  .hs-music { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- no motion (prefers-reduced-motion, or no script): a plain page, everything shown ---------- */
html.hs-still #hs1, html.hs-still #hs2, html.hs-still #hs4, html.hs-still #hsf, html.hs-still #hsv, html.hs-still #hs5 { height: auto; }
html.hs-still .hs-feathers { display: none; }
html.hs-still .hs-stage { position: relative; min-height: var(--hs-vh); height: auto; }
html.hs-still .hs-k { opacity: 1 !important; transform: none !important; filter: none !important; }
html.hs-still .hs1-logo, html.hs-still .hs1-cue, html.hs-still .hs1-leaves, html.hs-still .hs1-veil { display: none; }
html.hs-still .hs2-card { --i: 0 !important; }
html.hs-still #hs3 { margin-top: 0; }
@media (max-width: 760px) { html.hs-still .hs-stage { min-height: 0; } html.hs-still .hs-cast, html.hs-still .hs4-copy { position: relative; left: auto; top: auto; bottom: auto; translate: none; margin: 0 auto; padding-block: 80px 24px; } }

/* ---- 3b. our own gameplay, framed on the parchment (index.php #hsg) -------------------------- */
#hsg { position: relative; z-index: 3; background: var(--hs-paper); color: var(--hs-ink); padding: 40px 24px 120px; }
.hsg-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 16px; justify-items: center; text-align: center; }
.hsg-inner .hs-eyebrow { color: #7A5512; }
.hsg-inner h2 { margin: 0; font-size: clamp(32px, 4vw, 56px); color: var(--hs-ink); }
.hsg-inner > p { margin: 0; font-size: 18px; color: var(--hs-mute); max-width: 56ch; }
.hsg-frame { position: relative; width: 100%; margin-top: 18px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background: #0A0E24; border: 3px solid var(--hs-gold); box-shadow: 0 30px 70px rgba(43, 39, 33, .35); }
.hsg-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hsg-tag { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; background: rgba(10, 14, 36, .8); color: #FFF8E8; font: 800 12px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; }
.hsg-tag i { width: 9px; height: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, .25);
  animation: hsg-pulse 1.6s ease-in-out infinite; }
@keyframes hsg-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hsg-tag i { animation: none; } }
@media (max-width: 760px) { #hsg { padding: 24px 16px 80px; } .hsg-frame { border-radius: 14px; border-width: 2px; } .hsg-tag { left: 10px; top: 10px; } }

/* ---- 4b. Assist Mode, the bot at work (index.php #hsa) --------------------------------------- */
#hsa { position: relative; z-index: 3; background: var(--hs-night); color: #E8ECF8; padding: 110px 24px 120px; overflow: hidden; }
#hsa::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 80% 40%, rgba(74, 99, 168, .35), transparent 60%),
              radial-gradient(ellipse at 10% 100%, rgba(224, 174, 67, .12), transparent 50%); }
.hsa-inner { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.hsa-copy { display: grid; gap: 18px; }
.hsa-copy .hs-eyebrow { color: var(--hs-gold-lt); }
.hsa-copy h2 { margin: 0; font-size: clamp(32px, 3.6vw, 52px); color: #FFF8E8; }
.hsa-copy > p { margin: 0; font-size: 18px; color: #C8D2F5; max-width: 46ch; }
.hsa-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.hsa-points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-weight: 600; color: #E8ECF8; }
.hsa-points li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; rotate: 45deg; background: var(--hs-gold); box-shadow: 0 0 0 3px rgba(224, 174, 67, .25); }
.hsa-copy .hs-ghost { background: transparent; color: #FFF8E8; border-color: rgba(242, 206, 114, .6); }
.hsa-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #0A0E24;
  border: 3px solid var(--hs-gold); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.hsa-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .hsa-inner { grid-template-columns: 1fr; gap: 28px; } .hsa-frame { order: -1; } }
@media (max-width: 760px) { #hsa { padding: 64px 16px 80px; } .hsa-frame { border-radius: 14px; border-width: 2px; } }