/* Heritage v5 — 3D stages, pinned stories, particle-key host, video gallery */

#stage3d { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100lvh; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s cubic-bezier(.22,.61,.36,1); background: #161009; }
#stage3d.on { opacity: 1; }
#stage3d.swap { opacity: .25; transition: opacity .06s linear; }
html.no-webgl #stage3d { display: none; }

/* every stage section is transparent over the fixed canvas and uses the dark voice */
.is-stage, .stage3d-block, .stage3d-band {
  position: relative; z-index: 1; background: transparent !important; color: #F4EFE5;
  --text-primary: #F4EFE5; --text-secondary: rgba(244,239,229,.78); --text-tertiary: rgba(244,239,229,.5);
}
.is-stage .h-section, .stage3d-block .h-section, .stage3d-band .h-section, .is-stage .display { color: #F4EFE5; }
.stage3d-block .body-lg, .stage3d-band .body-lg { color: rgba(244,239,229,.74); }
.stage3d-block .eyebrow, .stage3d-band .eyebrow { color: var(--accent); }
:is(html.no-webgl, html:not(.stage3d-on)) :is(.is-stage, .stage3d-block, .stage3d-band) { background: #1A130A url(/assets/v4/v4-hero-legacy.webp) center/cover no-repeat !important; }

/* ── Hero over the vault ─────────────────────────────── */
.hero.is-stage .hero-bg, .hero.is-stage::before { display: none; }
.hero.is-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,16,9,.86) 0%, rgba(22,16,9,.55) 40%, rgba(22,16,9,0) 66%), linear-gradient(0deg, rgba(22,16,9,.6), rgba(22,16,9,0) 35%); }
[dir=rtl] .hero.is-stage::after { background: linear-gradient(270deg, rgba(22,16,9,.86) 0%, rgba(22,16,9,.55) 40%, rgba(22,16,9,0) 66%), linear-gradient(0deg, rgba(22,16,9,.6), rgba(22,16,9,0) 35%); }
@media (min-width: 821px) {
  .hero.is-stage .hero-inner { justify-content: start; grid-template-columns: minmax(0, 640px); }
  .hero.is-stage .hero-copy { align-items: flex-start; text-align: start; padding-inline: 0; }
  .hero.is-stage .hero-copy::before { display: none; }
}
@media (max-width: 820px) {
  .hero.is-stage { padding-top: 48svh; }
  .hero.is-stage .hero-lead { font-size: 16px; line-height: 1.55; }
  .hero.is-stage::after { background: linear-gradient(0deg, rgba(22,16,9,.96) 0%, rgba(22,16,9,.86) 50%, rgba(22,16,9,0) 76%); }
}

/* ── Pinned 3D stories ───────────────────────────────── */
.stage3d-intro { position: relative; padding-top: clamp(90px, 11vw, 160px); padding-bottom: 24px; }
.stage3d-intro .h-section { max-width: 18ch; }
.stage3d-intro .body-lg { max-width: 56ch; margin-top: 20px; }
.stage3d-intro::before, .pin-sticky::before, .stage3d-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stage3d-intro::before { inset: 0 -100vw; background: linear-gradient(90deg, rgba(22,16,9,.82), rgba(22,16,9,0) 60%); }
[dir=rtl] .stage3d-intro::before { background: linear-gradient(270deg, rgba(22,16,9,.82), rgba(22,16,9,0) 60%); }
.pin-track { position: relative; }
.pin-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.pin-sticky > .container { width: 100%; }
.pin-sticky::before { background: linear-gradient(90deg, rgba(22,16,9,.84) 0%, rgba(22,16,9,.52) 34%, rgba(22,16,9,0) 58%); }
[dir=rtl] .pin-sticky::before { background: linear-gradient(270deg, rgba(22,16,9,.84) 0%, rgba(22,16,9,.52) 34%, rgba(22,16,9,0) 58%); }
.pin-panel { width: min(520px, 44vw); }
.pin-rail { display: flex; gap: 6px; margin-bottom: 30px; }
.pin-rail button { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; text-align: start; background: none; border: 0; padding: 0 0 4px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: rgba(244,239,229,.42); }
.pin-rail button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-rail button b { display: block; height: 2px; background: rgba(244,239,229,.14); position: relative; overflow: hidden; }
.pin-rail button b i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--f, 0)); }
[dir=rtl] .pin-rail button b i { transform-origin: right; }
.pin-rail button.on { color: var(--accent); }
.pin-steps { display: grid; }
.pin-step { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); pointer-events: none; visibility: hidden; }
.pin-step.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.pin-chip { display: inline-flex; margin-bottom: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 11px; border: 1px solid var(--accent-line); color: var(--accent); }
.pin-num { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(64px, 7.5vw, 112px); line-height: .9; color: var(--accent); margin-bottom: 6px; }
.pin-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.08; color: #F4EFE5; margin: 0 0 16px; }
.pin-body { color: rgba(244,239,229,.82); font-size: 16.5px; line-height: 1.66; max-width: 46ch; margin: 0; }
.pin-timing { margin-top: 16px; color: var(--accent); }
.pin-donot { margin-top: 24px; border-top: 1px solid var(--accent-line); padding-top: 16px; }
.pin-donot ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.pin-donot li { font-size: 14px; color: rgba(244,239,229,.62); display: flex; gap: 10px; }
.pin-donot li::before { content: ""; color: var(--accent); flex: 0 0 1em; align-self: flex-start; border-block-start: 1px solid currentColor; margin-block-start: .65em; }
.plat-step-extra { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.plat-step-extra .ios-notify-form label span { color: rgba(244,239,229,.7); }
.plat-step-extra .ios-notify-form input[type=email] { background: rgba(244,239,229,.06); color: #F4EFE5; border-color: var(--accent-line); }
.stage3d-block .btn-secondary { color: #F4EFE5; border-color: rgba(201,169,97,.45); background: rgba(22,16,9,.4); }
.stage3d-after { position: relative; padding-top: 28px; padding-bottom: clamp(64px, 8vw, 110px); }
.stage3d-after::before { content: ""; position: absolute; inset: 0 -100vw; z-index: -1; background: linear-gradient(180deg, rgba(22,16,9,0), rgba(22,16,9,.92) 30%); }
.stage3d-after .recovery-license { max-width: 64ch; padding: 22px 26px; border: 1px solid var(--accent-line); background: rgba(201,169,97,.08); color: #F4EFE5; font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; margin: 0 0 22px; }
.stage3d-after .platform-requirements { color: rgba(244,239,229,.7); }
@media (max-width: 820px) {
  .pin-sticky { align-items: flex-end; padding-bottom: 22px; }
  .pin-sticky::before { background: linear-gradient(0deg, rgba(22,16,9,.97) 0%, rgba(22,16,9,.88) 44%, rgba(22,16,9,0) 66%); }
  .pin-panel { width: 100%; }
  .pin-rail { margin-bottom: 16px; }
  .pin-rail button span { font-size: 9.5px; letter-spacing: .06em; }
  .pin-num { font-size: 48px; }
  .pin-title { font-size: 26px; margin-bottom: 10px; }
  .pin-body { font-size: 14.5px; line-height: 1.55; }
  .pin-donot { display: none; }
  .stage3d-intro::before { background: rgba(22,16,9,.7); }
}

/* ── Pricing medallion band ──────────────────────────── */
.stage3d-band { min-height: 86svh; display: flex; align-items: center; padding: calc(var(--header-h, 76px) + 40px) 0 60px; }
.stage3d-band > .container { width: 100%; }
.stage3d-band-inner { max-width: 600px; display: flex; flex-direction: column; gap: 20px; }
.stage3d-band::before { background: linear-gradient(90deg, rgba(22,16,9,.85), rgba(22,16,9,.4) 45%, rgba(22,16,9,0) 68%); }
[dir=rtl] .stage3d-band::before { background: linear-gradient(270deg, rgba(22,16,9,.85), rgba(22,16,9,.4) 45%, rgba(22,16,9,0) 68%); }
@media (max-width: 820px) { .stage3d-band { align-items: flex-end; padding-top: 52svh; } .stage3d-band::before { background: linear-gradient(0deg, rgba(22,16,9,.95) 20%, rgba(22,16,9,0) 70%); } }

/* ── Final CTA over the vault at night ───────────────── */
.cta-final.is-stage { min-height: 100svh; display: flex; align-items: center; }
.cta-final.is-stage > .container { width: 100%; }
.cta-final.is-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,10,7,.9), rgba(13,10,7,.45) 50%, rgba(13,10,7,0) 72%); }
[dir=rtl] .cta-final.is-stage::before { background: linear-gradient(270deg, rgba(13,10,7,.9), rgba(13,10,7,.45) 50%, rgba(13,10,7,0) 72%); }
@media (min-width: 821px) {
  .cta-final.is-stage { text-align: start; }
  .cta-final.is-stage .cta-final-inner { max-width: 600px; margin-inline-start: max(var(--gutter, 24px), calc((100vw - var(--max-content, 1280px)) / 2)); margin-inline-end: auto; align-items: flex-start; }
  .cta-final.is-stage .cta-final-buttons { justify-content: flex-start; }
}
@media (max-width: 820px) { .cta-final.is-stage { align-items: flex-end; padding-top: 50svh; } .cta-final.is-stage::before { background: linear-gradient(0deg, rgba(13,10,7,.96) 25%, rgba(13,10,7,0) 75%); } }

/* ── AI section hosts the golden particle key ────────── */
.ai-privacy.particles-key-host { position: relative; z-index: 1; isolation: isolate; min-height: 86svh; display: flex; align-items: center; background: radial-gradient(60% 60% at 72% 40%, rgba(201,169,97,.14), transparent 70%), #1A130A; color: #F4EFE5; --text-primary: #F4EFE5; --text-secondary: rgba(244,239,229,.78); }
.ai-privacy.particles-key-host > .container { position: relative; z-index: 2; width: 100%; }
.ai-privacy.particles-key-host .h-section { color: #F4EFE5; }
.ai-privacy.particles-key-host .body-lg { color: rgba(244,239,229,.74); }
@media (min-width: 961px) { .ai-privacy.particles-key-host .particles-key-copy { max-width: 50%; margin-bottom: 0; } }

/* ── Video gallery: dark "screening room" (big player + numbered programme) ── */
.video-gallery.screening {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 10vw, 140px) 0;
  background:
    radial-gradient(60% 70% at 72% 40%, rgba(201,169,97,0.14), transparent 70%),
    linear-gradient(180deg, #0d0906, #16100a 60%, #0d0906);
  color: #f4efe5;
}
.screening-head::before { display: none; }
.screening-head { max-width: 1100px; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 0; border-top: 0; }
.screening-head .h-section { color: #f4efe5; margin: 18px 0 0; text-wrap: balance; }
.screening-head .h-section em { color: #e2c078; }
.screening .eyebrow { color: #e2c078; }
.screening-note { margin: 16px 0 0; font-size: 14px; color: rgba(244,239,229,0.6); }
.screening-inner {
  display: grid;
  grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.screening-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(201,169,97,0.22); }
.screening-list li { border-bottom: 1px solid rgba(201,169,97,0.22); }
.screening-item {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 30px 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border: 0;
  background: none;
  color: rgba(244,239,229,0.62);
  text-align: start;
  cursor: pointer;
  transition: color 0.25s ease;
}
.screening-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  width: 0;
  height: 2px;
  background: #e2c078;
  transition: width 0.45s cubic-bezier(.22,.61,.36,1);
}
.screening-item:hover, .screening-item.is-active { color: #f4efe5; }
.screening-item.is-active::before { width: 100%; }
.screening-item:focus-visible { outline: 2px solid #e2c078; outline-offset: 4px; }
.screening-num { color: #c9a961; }
.screening-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #1a130a; box-shadow: 0 0 0 1px rgba(201,169,97,0.25); opacity: 0.7; transition: opacity 0.25s ease; }
.screening-item.is-active .screening-thumb, .screening-item:hover .screening-thumb { opacity: 1; }
.screening-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screening-title { font: 400 16px/1.3 var(--font-display); }
.screening .section-inline-link { display: inline-flex; margin-top: 22px; color: #e2c078; }
.screening-player { margin: 0; width: 100%; opacity: 1; transform: none; }
.screening-player .yt-facade-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(201,169,97,0.35), 0 40px 120px rgba(0,0,0,0.6), 0 0 90px rgba(201,169,97,0.12); }
.screening-player figcaption { margin-top: 14px; color: rgba(244,239,229,0.75); font: 400 16px/1.4 var(--font-display); text-align: start; }
@media (max-width: 960px) {
  .screening-inner { grid-template-columns: minmax(0, 1fr); }
  .screening-screen { order: -1; }
  .screening-item { grid-template-columns: 28px 96px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .pin-step { transition: none; } #stage3d { transition: none; } }

/* v5 fixes */
.persistent-v4-hero-media { transition: opacity 1.2s cubic-bezier(.22,.61,.36,1); }
html.stage3d-on .persistent-v4-hero-media { opacity: 0; }
.stage3d-block .btn.btn-secondary.plat-cta, .stage3d-block .plat-step-extra .btn { background: rgba(201,169,97,.14) !important; color: #F4EFE5 !important; border: 1px solid rgba(201,169,97,.5) !important; }
.stage3d-block .plat-step-extra .btn:hover { background: rgba(201,169,97,.26) !important; }
.ai-privacy.particles-key-host .particles-key-copy { display: flex; flex-direction: column; gap: 22px; }
.ai-privacy.particles-key-host .particles-key-copy .body-lg { margin-top: 0 !important; max-width: 52ch; }
@media (min-width: 961px) { .ai-privacy.particles-key-host .particles-key-copy { max-width: 560px; } }

/* v5 refinements (audit 2026-09-24) */
.stage3d-block { padding: 0 !important; margin: 0 !important; overflow-x: clip; }
.stage3d-after { background: #161009; box-shadow: 0 0 0 100vmax #161009; clip-path: inset(0 -100vmax); border-top: 1px solid rgba(201,169,97,.18); padding-top: 40px; }
.stage3d-after .section-inline-link { color: #D9BC78; }
.stage3d-after::before { display: none; }
.stage3d-after .platform-requirements { border-color: rgba(201,169,97,.28) !important; background: transparent !important; }
.stage3d-after .platform-requirements .mono-label { color: var(--accent) !important; background: transparent !important; }
.stage3d-after .platform-requirements span { background: rgba(244,239,229,.06) !important; color: #F4EFE5 !important; border: 1px solid rgba(201,169,97,.3) !important; }

/* pinned 3D blocks must have their real height at all times (sticky + scroll progress + anchor links) */
main.home-main > section[data-stage], main.home-main > section.stage3d-block { content-visibility: visible !important; contain-intrinsic-size: none !important; contain: none !important; }
/* Keep every step usable until the renderer is running, including a missing runtime. */
:is(html.no-webgl, html:not(.stage3d-on)) .pin-track { height: auto !important; }
:is(html.no-webgl, html:not(.stage3d-on)) .pin-sticky { position: static; height: auto; padding-block: 32px; }
:is(html.no-webgl, html:not(.stage3d-on)) .pin-panel { width: 100%; }
:is(html.no-webgl, html:not(.stage3d-on)) .pin-rail { display: none; }
:is(html.no-webgl, html:not(.stage3d-on)) .pin-steps { display: flex; flex-direction: column; gap: 48px; }
:is(html.no-webgl, html:not(.stage3d-on)) .pin-step { opacity: 1; transform: none; transition: none; pointer-events: auto; visibility: visible; }
:is(html.no-webgl, html:not(.stage3d-on)) .pin-donot { display: block; }
/* final CTA copy aligned with the other stages */
@media (min-width: 821px) { .cta-final.is-stage .cta-final-inner, .cta-final.is-stage .display, .cta-final.is-stage .body-lg, .cta-final.is-stage .cta-final-micro { text-align: start; } }
@media (min-width: 821px) {
  .cta-final.is-stage .cta-final-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
  .cta-final.is-stage .cta-final-inner * { text-align: start !important; margin-inline: 0 !important; }
  .cta-final.is-stage .cta-final-buttons { justify-content: flex-start !important; }
}

/* Standalone interactive films, separate from the YouTube programme. */
.interactive-film-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(201,169,97,.4);
  border-radius: 12px;
  color: #f4efe5;
  text-align: start;
  text-decoration: none;
  animation: interactive-film-border 5s ease-in-out infinite;
}
.interactive-film-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.interactive-film-copy { min-width: 0; }
.interactive-film-copy strong { display: block; font: 400 17px/1.35 var(--font-display); overflow-wrap: anywhere; }
.interactive-film-copy small { display: block; margin-top: 6px; font: 400 12px/1.5 var(--font-sans); color: #e2c078; }
.interactive-film-arrow { display: flex; color: #e2c078; }
[dir="rtl"] .interactive-film-arrow { transform: scaleX(-1); }
.interactive-film-card:hover { background: rgba(201,169,97,.07); }
.interactive-film-card:focus-visible { outline: 2px solid #e2c078; outline-offset: 4px; }
@keyframes interactive-film-border { 50% { border-color: rgba(226,192,120,.8); } }
@media (prefers-reduced-motion: reduce) { .interactive-film-card { animation: none; } }