/* PsyQo V4: 41d structure with dark periwinkle premium treatment. */
:root {
  --v4-bg: #03040a;
  --v4-bg-2: #070814;
  --v4-panel: rgba(9, 10, 20, 0.82);
  --v4-panel-strong: rgba(12, 14, 28, 0.94);
  --v4-ink: #f5f7ff;
  --v4-muted: rgba(255, 221, 220, 0.66);
  --v4-soft: rgba(255, 221, 220, 0.42);
  --v4-line: rgba(255, 177, 177, 0.17);
  --v4-peri: #c81016;
  --v4-peri-2: #9a0c10;
  --v4-glow: rgba(200, 16, 22, 0.42);
}

html,
body.psyqo-v4,
body.psyqo-v4.home-page {
  background:
    radial-gradient(ellipse at 78% 18%, rgba(200, 16, 22, 0.16), transparent 32rem),
    radial-gradient(ellipse at 18% 62%, rgba(247, 69, 69, 0.1), transparent 34rem),
    linear-gradient(180deg, #03040a 0%, #060713 46%, #03040a 100%) !important;
  color: var(--v4-ink) !important;
}

body.psyqo-v4 .pixel-bg {
  opacity: 0.22 !important;
  mix-blend-mode: screen !important;
}

body.psyqo-v4,
body.psyqo-v4 * {
  --red: var(--v4-peri) !important;
  --red-hot: #e8353b !important;
  --aero-red: var(--v4-peri) !important;
  --apparel-red: var(--v4-peri) !important;
}

body.psyqo-v4 .scanline-overlay {
  opacity: 0.16 !important;
  mix-blend-mode: screen !important;
}

body.psyqo-v4 .site-header,
body.psyqo-v4.home-page .site-header,
body.psyqo-v4.psyqo-hero-nav .site-header,
body.psyqo-v4.home-page:not(.psyqo-hero-nav) .site-header {
  background: linear-gradient(180deg, rgba(4, 5, 12, 0.92), rgba(4, 5, 12, 0.72)) !important;
  border-bottom: 1px solid var(--v4-line) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
}

body.psyqo-v4 .site-nav,
body.psyqo-v4.home-page .site-nav,
body.psyqo-v4 .brand-word,
body.psyqo-v4 .site-nav .brand,
body.psyqo-v4 .nav-links a,
body.psyqo-v4 .mobile-panel a {
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
}

body.psyqo-v4 .brand-logo,
body.psyqo-v4.home-page .brand-logo {
  background: linear-gradient(135deg, #e8353b, var(--v4-peri) 46%, var(--v4-peri-2)) !important;
  filter: drop-shadow(0 0 12px rgba(200, 16, 22, 0.48)) !important;
}

body.psyqo-v4 .nav-links,
body.psyqo-v4.home-page .nav-links {
  border: 1px solid rgba(255, 192, 191, 0.12) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  /* Roomier pill: interior padding so the links aren't jammed against the box
     edges (keeps the existing wide inter-link spacing). */
  padding: 5px clamp(14px, 1.6vw, 26px) !important;
  border-radius: 12px !important;
}

body.psyqo-v4 .nav-links a:hover,
body.psyqo-v4 .nav-links a.active {
  background: rgba(200, 16, 22, 0.12) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.psyqo-v4 .nav-links a::after,
body.psyqo-v4.home-page .nav-links a::after {
  background: var(--v4-peri) !important;
  box-shadow: 0 0 16px var(--v4-glow) !important;
}

body.psyqo-v4 .btn,
body.psyqo-v4 .site-nav .header-actions .btn,
body.psyqo-v4.home-page .site-nav .header-actions .btn {
  border-color: rgba(255, 203, 202, 0.24) !important;
  background: rgba(8, 10, 22, 0.72) !important;
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.28) !important;
}

body.psyqo-v4 .btn-primary,
body.psyqo-v4 .site-nav .header-actions .btn,
body.psyqo-v4.home-page .site-nav .header-actions .btn {
  /* Premium solid — no gradient. Flat periwinkle, dark ink, a single hairline
     top highlight and a soft ambient shadow for depth (not a fill gradient). */
  background: #ff7979 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #060713 !important;
  -webkit-text-fill-color: #060713 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 26px rgba(6, 8, 22, 0.4) !important;
}

body.psyqo-v4 .btn-primary:hover,
body.psyqo-v4 .site-nav .header-actions .btn:hover {
  background: #ff8888 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 32px rgba(6, 8, 22, 0.46) !important;
}

body.psyqo-v4 .btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 0 36px var(--v4-glow) !important;
}

body.psyqo-v4 .aeronet-hero {
  background:
    radial-gradient(ellipse at 72% 48%, rgba(200, 16, 22, 0.26), transparent 36%),
    radial-gradient(ellipse at 50% 86%, rgba(248, 73, 73, 0.14), transparent 48%),
    #03040a !important;
}

body.psyqo-v4 .psyqo-hero-sticky {
  background:
    linear-gradient(90deg, rgba(3, 4, 10, 0.96), rgba(4, 6, 15, 0.68) 38%, rgba(5, 7, 16, 0.2) 66%, rgba(3, 4, 10, 0.82)),
    radial-gradient(ellipse at 72% 50%, rgba(200, 16, 22, 0.22), transparent 42%),
    #03040a !important;
}

body.psyqo-v4 .v4-landscape-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.46;
  filter: saturate(1.06) contrast(1.08) brightness(0.72);
  pointer-events: none;
  user-select: none;
}

body.psyqo-v4 .psyqo-hero-sticky::before {
  background:
    radial-gradient(ellipse at 72% 52%, transparent 0 30%, rgba(3, 4, 10, 0.18) 54%, rgba(3, 4, 10, 0.78) 100%),
    linear-gradient(to bottom, rgba(3, 4, 10, 0.74), transparent 20%, transparent 70%, rgba(3, 4, 10, 0.9)) !important;
}

body.psyqo-v4 .psyqo-hero-sticky::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 216, 215, 0.12) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 24% 34%, rgba(255, 216, 215, 0.1) 0 1px, transparent 1.4px),
    radial-gradient(circle at 76% 68%, rgba(200, 16, 22, 0.14) 0 1px, transparent 1.5px) !important;
}

body.psyqo-v4 .psyqo-hero-system::before {
  background:
    radial-gradient(ellipse at 72% 48%, rgba(255, 154, 154, 0.17), rgba(248, 73, 73, 0.08) 32%, transparent 58%),
    radial-gradient(ellipse at 56% 90%, rgba(250, 82, 82, 0.11), transparent 44%),
    linear-gradient(90deg, rgba(3, 4, 10, 0.92), rgba(4, 6, 14, 0.56) 38%, transparent 64%, rgba(3, 4, 10, 0.52)) !important;
}

body.psyqo-v4 .psyqo-rail span {
  background: linear-gradient(to bottom, transparent, rgba(200, 16, 22, 0.08), rgba(255, 154, 154, 0.36), rgba(255, 255, 255, 0.18), rgba(252, 93, 93, 0.24), transparent) !important;
  box-shadow: 0 0 24px rgba(200, 16, 22, 0.28) !important;
}

body.psyqo-v4 .psyqo-floor-grid {
  background-image:
    linear-gradient(to right, rgba(255, 221, 220, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 116, 116, 0.09) 1px, transparent 1px) !important;
}

body.psyqo-v4 #psyqoHeroCanvas,
body.psyqo-v4 .psyqo-hero-canvas,
body.psyqo-v4 .psyqo-float-field {
  display: none !important;
}

body.psyqo-v4 .psyqo-hero-webgl {
  z-index: 20 !important;
  filter:
    saturate(1.12)
    contrast(1.12)
    drop-shadow(0 0 26px rgba(200, 16, 22, 0.24))
    drop-shadow(0 34px 52px rgba(0, 0, 0, 0.6)) !important;
}

body.psyqo-v4 .hero-team-stack span,
body.psyqo-v4 .hero-controller-title span:first-child {
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
}

body.psyqo-v4 .hero-team-stack span + span,
body.psyqo-v4 .hero-controller-title span:last-child,
body.psyqo-v4.home-page .hero h1.hero-team-title .hero-controller-title span:last-child {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
  text-shadow: 0 0 34px rgba(200, 16, 22, 0.26) !important;
}

body.psyqo-v4 .hero-mission-strip {
  color: rgba(238, 241, 255, 0.82) !important;
  border-top-color: rgba(200, 16, 22, 0.46) !important;
}

body.psyqo-v4 .section,
body.psyqo-v4 .spa-section,
body.psyqo-v4 .aero-section,
body.psyqo-v4 #theater.lessons-progress-section,
body.psyqo-v4 #studios.home-cinema-section,
body.psyqo-v4 #shop.aero-section,
body.psyqo-v4 #faq.aero-section,
body.psyqo-v4 .home-cinema-section,
body.psyqo-v4 .lessons-progress-section {
  background:
    radial-gradient(ellipse at 78% 22%, rgba(200, 16, 22, 0.11), transparent 34rem),
    linear-gradient(90deg, rgba(255, 221, 220, 0.032) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 221, 220, 0.024) 1px, transparent 1px),
    var(--v4-bg) !important;
  background-size: auto, 92px 92px, 92px 92px, auto !important;
  color: var(--v4-ink) !important;
}

body.psyqo-v4 .marquee,
body.psyqo-v4 .identity-ribbon {
  background: linear-gradient(90deg, #04050c, #0b0d1a 50%, #04050c) !important;
  border-block: 1px solid var(--v4-line) !important;
}

body.psyqo-v4 .identity-ribbon span,
body.psyqo-v4 .identity-ribbon span:nth-child(even) {
  color: rgba(238, 241, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(238, 241, 255, 0.9) !important;
}

body.psyqo-v4 .identity-ribbon span::after {
  background: var(--v4-peri) !important;
  box-shadow: 0 0 18px var(--v4-glow) !important;
}

body.psyqo-v4 h1,
body.psyqo-v4 h2,
body.psyqo-v4 h3,
body.psyqo-v4 h4,
body.psyqo-v4 .aero-section-header h2,
body.psyqo-v4 .lessons-progress-copy h2,
body.psyqo-v4 #theater .lessons-progress-copy h2,
body.psyqo-v4 #studios.home-cinema-section h2,
body.psyqo-v4 #studios.home-cinema-section h3 {
  background: none !important;
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
  text-shadow: none !important;
}

body.psyqo-v4 p,
body.psyqo-v4 li,
body.psyqo-v4 details,
body.psyqo-v4 .aero-section-header p,
body.psyqo-v4 .lessons-progress-copy p,
body.psyqo-v4 #theater .lessons-progress-copy p,
body.psyqo-v4 #studios.home-cinema-section p {
  color: var(--v4-muted) !important;
  -webkit-text-fill-color: var(--v4-muted) !important;
}

body.psyqo-v4 .eyebrow,
body.psyqo-v4 .pipeline-badge,
body.psyqo-v4 .lessons-subline,
body.psyqo-v4 #theater .lessons-progress-copy .lessons-subline,
body.psyqo-v4 .drop-price,
body.psyqo-v4 .about-visual-badge {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}

body.psyqo-v4 .about-visual,
body.psyqo-v4 .about-stat-graph,
body.psyqo-v4 .pipeline-card,
body.psyqo-v4 .stat-node,
body.psyqo-v4 .channel-card,
body.psyqo-v4 .drop-card,
body.psyqo-v4 .faq-list details,
body.psyqo-v4 .community-card,
body.psyqo-v4 .cinema-screen,
body.psyqo-v4 .cinema-poster-thumb,
body.psyqo-v4 .roster-card,
body.psyqo-v4 .video-card {
  border-color: var(--v4-line) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    var(--v4-panel) !important;
  color: var(--v4-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 80px rgba(0, 0, 0, 0.32) !important;
}

body.psyqo-v4 .drop-card.featured,
body.psyqo-v4 #shop .drop-card.featured {
  border-color: rgba(200, 16, 22, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 58px rgba(200, 16, 22, 0.16),
    0 34px 90px rgba(0, 0, 0, 0.42) !important;
}

body.psyqo-v4 .lessons-score {
  color: rgba(232, 235, 255, 0.08) !important;
}

body.psyqo-v4 .lessons-dot-field .episode-count {
  color: var(--v4-ink) !important;
}

body.psyqo-v4 .lessons-dot-field .episode-count i {
  color: var(--v4-soft) !important;
}

body.psyqo-v4 .lessons-dot-field .ep-dot-on {
  background: linear-gradient(135deg, #e8353b, var(--v4-peri-2)) !important;
  box-shadow: 0 0 16px rgba(200, 16, 22, 0.28) !important;
}

body.psyqo-v4 .lessons-dot-field .ep-dot-off {
  background: rgba(255, 221, 220, 0.055) !important;
  border-color: rgba(255, 221, 220, 0.16) !important;
}

body.psyqo-v4 .cinema-player-cover::after,
body.psyqo-v4 .cinema-poster-thumb::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72)),
    radial-gradient(circle at 50% 50%, rgba(200, 16, 22, 0.18), transparent 58%) !important;
}

body.psyqo-v4 .cinema-big-play,
body.psyqo-v4 .cinema-poster-thumb svg,
body.psyqo-v4 #shop .drop-card.featured > span {
  background: linear-gradient(135deg, var(--v4-peri), var(--v4-peri-2)) !important;
  color: #050610 !important;
  box-shadow: 0 0 34px var(--v4-glow) !important;
}

body.psyqo-v4 #psyqo-chat,
body.psyqo-v4 .chat-panel {
  color: var(--v4-ink) !important;
}

body.psyqo-v4 #psyqo-chat-bubble {
  background: linear-gradient(135deg, #e8353b, var(--v4-peri)) !important;
  color: #050610 !important;
  box-shadow: 0 0 34px var(--v4-glow), 0 20px 52px rgba(0, 0, 0, 0.38) !important;
}

body.psyqo-v4 .chat-window,
body.psyqo-v4 .chat-panel {
  border-color: var(--v4-line) !important;
  background: rgba(5, 6, 14, 0.96) !important;
}

body.psyqo-v4 a:not(.btn) {
  color: var(--v4-peri);
}

body.psyqo-v4 ::selection {
  background: rgba(200, 16, 22, 0.32);
  color: #fff;
}

@media (max-width: 760px) {
  /* Lite hero on mobile: logo + crystal void, cheaper filter, dimmed under copy. */
  body.psyqo-v4 .psyqo-hero-webgl {
    display: block !important;
    z-index: 4 !important;
    opacity: 0.82;
    filter: saturate(1.08) contrast(1.08) !important;
  }
}

/* Specificity pass over the archived 41d apparel/light-board rules. */
body.psyqo-v4.home-page .hero h1.hero-team-title .hero-team-stack span,
body.psyqo-v4.home-page .hero h1.hero-team-title .hero-controller-title span:first-child,
body.psyqo-v4 .home-hero .hero-team-stack span,
body.psyqo-v4 .home-hero .hero-controller-title span:first-child {
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
  text-shadow: 0 0 28px rgba(200, 16, 22, 0.12) !important;
}

body.psyqo-v4.home-page .hero h1.hero-team-title .hero-team-stack span + span,
body.psyqo-v4.home-page .hero h1.hero-team-title .hero-controller-title span:last-child,
body.psyqo-v4 .home-hero .hero-team-stack span + span,
body.psyqo-v4 .home-hero .hero-controller-title span:last-child {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
  text-shadow: 0 0 34px rgba(200, 16, 22, 0.28) !important;
}

body.psyqo-v4 main > section,
body.psyqo-v4 #about,
body.psyqo-v4 #roster,
body.psyqo-v4 #theater,
body.psyqo-v4 #roster,
body.psyqo-v4 #studios,
body.psyqo-v4 #shop,
body.psyqo-v4 #faq,
body.psyqo-v4 #community {
  background:
    radial-gradient(ellipse at 80% 18%, rgba(200, 16, 22, 0.12), transparent 34rem),
    linear-gradient(90deg, rgba(255, 221, 220, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 221, 220, 0.022) 1px, transparent 1px),
    #03040a !important;
  background-size: auto, 92px 92px, 92px 92px, auto !important;
  color: var(--v4-ink) !important;
}

body.psyqo-v4 #about h2,
body.psyqo-v4 #roster h2,
body.psyqo-v4 #theater h2,
body.psyqo-v4 #roster h2,
body.psyqo-v4 #studios h2,
body.psyqo-v4 #shop h2,
body.psyqo-v4 #faq h2,
body.psyqo-v4 #community h2,
body.psyqo-v4 #about h3,
body.psyqo-v4 #roster h3,
body.psyqo-v4 #theater h3,
body.psyqo-v4 #roster h3,
body.psyqo-v4 #studios h3,
body.psyqo-v4 #shop h3,
body.psyqo-v4 #faq h3,
body.psyqo-v4 #community h3 {
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
  background: none !important;
}

body.psyqo-v4 #about p,
body.psyqo-v4 #roster p,
body.psyqo-v4 #theater p,
body.psyqo-v4 #roster p,
body.psyqo-v4 #studios p,
body.psyqo-v4 #shop p,
body.psyqo-v4 #faq p,
body.psyqo-v4 #community p,
body.psyqo-v4 #about li,
body.psyqo-v4 #roster li,
body.psyqo-v4 #theater li,
body.psyqo-v4 #roster li,
body.psyqo-v4 #studios li,
body.psyqo-v4 #shop li,
body.psyqo-v4 #faq li,
body.psyqo-v4 #community li {
  color: var(--v4-muted) !important;
  -webkit-text-fill-color: var(--v4-muted) !important;
}

body.psyqo-v4 .eyebrow,
body.psyqo-v4 .badge-dot,
body.psyqo-v4 .pipeline-badge,
body.psyqo-v4 .lessons-subline,
body.psyqo-v4 .drop-price,
body.psyqo-v4 .aero-section-header span {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}

body.psyqo-v4 .eyebrow::before,
body.psyqo-v4 .badge-dot,
body.psyqo-v4 .stat-dot,
body.psyqo-v4 .pipeline-node,
body.psyqo-v4 .identity-ribbon span::after {
  background: var(--v4-peri) !important;
  box-shadow: 0 0 18px var(--v4-glow) !important;
}

body.psyqo-v4 #roster .pipeline-copy h2,
body.psyqo-v4 #roster .pipeline-copy h2 .grad {
  background: none !important;
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
  text-shadow: none !important;
}

body.psyqo-v4 #roster .pipeline-copy h2 .grad {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}

/* Final accent scrub: any archived red UI motif becomes periwinkle in V4. */
body.psyqo-v4 .pipeline-badge,
body.psyqo-v4 .eyebrow,
body.psyqo-v4 .lessons-progress-copy .eyebrow,
body.psyqo-v4 .aero-section-header span,
body.psyqo-v4 .drop-card > span,
body.psyqo-v4 .cinema-now-playing,
body.psyqo-v4 .product-price {
  border-color: rgba(200, 16, 22, 0.34) !important;
  background: rgba(200, 16, 22, 0.075) !important;
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
  box-shadow: none !important;
}

body.psyqo-v4 .pipeline-spine,
body.psyqo-v4 .pipeline-spine::before,
body.psyqo-v4 .pipeline-spine::after,
body.psyqo-v4 .stat-lines path,
body.psyqo-v4 .stat-ring,
body.psyqo-v4 .views-bars span,
body.psyqo-v4 .episode-count,
body.psyqo-v4 .cinema-big-play,
body.psyqo-v4 .cinema-poster-thumb svg,
body.psyqo-v4 .chat-dot {
  border-color: rgba(200, 16, 22, 0.42) !important;
  background: linear-gradient(135deg, #e8353b, var(--v4-peri) 52%, var(--v4-peri-2)) !important;
  color: #050610 !important;
  stroke: var(--v4-peri) !important;
  box-shadow: 0 0 26px rgba(200, 16, 22, 0.34) !important;
}

body.psyqo-v4 .pipeline-card h3,
body.psyqo-v4 .pipeline-card h3 *,
body.psyqo-v4 .lessons-progress-copy h2,
body.psyqo-v4 .lessons-progress-copy h2 *,
body.psyqo-v4 #roster h2,
body.psyqo-v4 #roster h2 *,
body.psyqo-v4 #theater h2,
body.psyqo-v4 #theater h2 * {
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
  text-shadow: none !important;
}

body.psyqo-v4 #roster h2 .grad,
body.psyqo-v4 #roster .pipeline-copy h2 .grad,
body.psyqo-v4 .lessons-subline {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}

body.psyqo-v4.home-page.one-page-site #roster.section.aero-section .pipeline-copy h2,
body.psyqo-v4.home-page.one-page-site #roster.section.aero-section .pipeline-card h3,
body.psyqo-v4.home-page.one-page-site #roster.section.aero-section .pipeline-card h3 span:not(.step-num) {
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
  background: none !important;
  opacity: 1 !important;
}

body.psyqo-v4.home-page.one-page-site #roster.section.aero-section .pipeline-copy h2 .grad,
body.psyqo-v4.home-page.one-page-site #roster.section.aero-section .pipeline-card .step-num {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}

body.psyqo-v4 .cinema-screen,
body.psyqo-v4 .cinema-poster-thumb,
body.psyqo-v4 .drop-card,
body.psyqo-v4 .faq-list details,
body.psyqo-v4 .community-card {
  border-color: rgba(200, 16, 22, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 74px rgba(0, 0, 0, 0.34),
    0 0 40px rgba(200, 16, 22, 0.08) !important;
}

body.psyqo-v4 #roster .pipeline-card,
body.psyqo-v4 #roster .pipeline-step.is-filled .pipeline-card {
  border: 1px solid var(--v4-line) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(8, 10, 22, 0.86) !important;
  color: var(--v4-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 58px rgba(0, 0, 0, 0.3) !important;
}

body.psyqo-v4 #roster .pipeline-card h3,
body.psyqo-v4 #roster .pipeline-card .step-num {
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
}

body.psyqo-v4 #roster .pipeline-card p {
  color: var(--v4-muted) !important;
  -webkit-text-fill-color: var(--v4-muted) !important;
}

body.psyqo-v4 #roster .pipeline-spine,
body.psyqo-v4 #roster .pipeline-spine::before {
  background: linear-gradient(to bottom, rgba(200, 16, 22, 0.08), rgba(200, 16, 22, 0.82), rgba(200, 16, 22, 0.28)) !important;
  box-shadow: 0 0 28px rgba(200, 16, 22, 0.22) !important;
}

body.psyqo-v4 #roster .pipeline-node,
body.psyqo-v4 #roster .pipeline-node::before,
body.psyqo-v4 #roster .pipeline-node::after,
body.psyqo-v4 #roster .pipeline-step.is-filled .pipeline-node,
body.psyqo-v4 #roster .pipeline-step.is-filled .pipeline-node::before,
body.psyqo-v4 #roster .pipeline-step.is-filled .pipeline-node::after {
  border-color: rgba(200, 16, 22, 0.46) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(238, 241, 255, 0.92), rgba(200, 16, 22, 0.76) 36%, rgba(200, 16, 22, 0.2) 70%) !important;
  box-shadow:
    0 0 26px rgba(200, 16, 22, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

body.psyqo-v4 #shop .drop-media,
body.psyqo-v4 #shop .drop-media::before,
body.psyqo-v4 #shop .drop-media::after,
body.psyqo-v4 #shop .drop-media-ph {
  border-color: rgba(200, 16, 22, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(200, 16, 22, 0.08), transparent 46%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 0 12px, rgba(255, 255, 255, 0.01) 12px 24px),
    rgba(8, 10, 22, 0.72) !important;
  color: rgba(255, 221, 220, 0.62) !important;
  -webkit-text-fill-color: rgba(255, 221, 220, 0.62) !important;
}

body.psyqo-v4 .chat-dot,
body.psyqo-v4 .cinema-big-play,
body.psyqo-v4 .cinema-poster-thumb svg {
  background: linear-gradient(135deg, var(--v4-peri), var(--v4-peri-2)) !important;
}

body.psyqo-v4 #roster .pipeline-copy h2,
body.psyqo-v4 #roster .pipeline-copy h2 *,
body.psyqo-v4 #roster .pipeline-card h3,
body.psyqo-v4 #roster .pipeline-card h3 *,
body.psyqo-v4 #roster .pipeline-card strong {
  background: none !important;
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
  opacity: 1 !important;
}

body.psyqo-v4 #roster .pipeline-copy h2 .grad {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}
/* Cinematic 3D shop mounted into V4. */
.psyqo-shop3d {
  --shop-ink: #f5f7ff;
  --shop-muted: rgba(255, 221, 220, 0.66);
  --shop-soft: rgba(255, 221, 220, 0.42);
  --shop-peri: #c81016;
  --shop-peri-2: #9a0c10;
  position: relative;
  min-height: clamp(660px, 82vh, 920px);
  margin-top: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(200, 16, 22, 0.18);
  background:
    radial-gradient(ellipse at 54% 44%, rgba(200, 16, 22, 0.15), transparent 31rem),
    radial-gradient(ellipse at 18% 82%, rgba(200, 16, 22, 0.08), transparent 27rem),
    linear-gradient(180deg, rgba(8, 10, 22, 0.95), rgba(2, 3, 10, 0.98));
  overflow: hidden;
  color: var(--shop-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 32px 110px rgba(0, 0, 0, 0.52),
    0 0 70px rgba(200, 16, 22, 0.1);
  isolation: isolate;
}

.psyqo-shop3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(200, 16, 22, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(200, 16, 22, 0.032) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  background-size: 92px 92px, 92px 92px, auto;
  opacity: 0.42;
  mask-image: radial-gradient(ellipse at 50% 50%, black 0 42%, transparent 78%);
}

.psyqo-shop3d-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: grab;
  opacity: 0;
  transition: opacity 600ms ease;
}

.psyqo-shop3d-stage:active {
  cursor: grabbing;
}

.psyqo-shop3d.is-loaded .psyqo-shop3d-stage {
  opacity: 1;
}

.psyqo-shop3d-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.psyqo-shop3d-overlay,
.psyqo-shop3d-controls,
.psyqo-shop3d-hud {
  position: absolute;
  z-index: 3;
}

.psyqo-shop3d-overlay {
  inset: 0;
  pointer-events: none;
}

.psyqo-shop3d-frame {
  position: absolute;
  inset: clamp(14px, 2vw, 28px);
  border: 1px solid rgba(200, 16, 22, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 0 44px rgba(200, 16, 22, 0.05);
}

.psyqo-shop3d-frame::before,
.psyqo-shop3d-frame::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 16, 22, 0.86), transparent);
}

.psyqo-shop3d-frame::before {
  top: -1px;
  left: 8%;
}

.psyqo-shop3d-frame::after {
  right: 9%;
  bottom: -1px;
}

.psyqo-shop3d-status {
  position: absolute;
  top: clamp(24px, 3vw, 42px);
  left: clamp(24px, 3vw, 42px);
  display: grid;
  gap: 5px;
  max-width: min(360px, 52vw);
  color: var(--shop-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.psyqo-shop3d-status strong {
  color: var(--shop-peri) !important;
  -webkit-text-fill-color: var(--shop-peri) !important;
  font-size: 12px;
  font-weight: 800;
}

.psyqo-shop3d-readout {
  position: absolute;
  display: grid;
  gap: 6px;
  color: rgba(255, 218, 217, 0.44);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.psyqo-shop3d-readout-left {
  left: clamp(24px, 3vw, 42px);
  bottom: clamp(96px, 10vh, 132px);
}

.psyqo-shop3d-readout-right {
  top: clamp(24px, 3vw, 42px);
  right: clamp(24px, 3vw, 42px);
  text-align: right;
}

.psyqo-shop3d-controls {
  left: 50%;
  bottom: clamp(24px, 3.5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateX(-50%);
  padding: 8px;
  border: 1px solid rgba(200, 16, 22, 0.16);
  background: rgba(4, 6, 16, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.psyqo-shop3d-controls .btn {
  min-height: 40px;
  padding-inline: 16px;
  white-space: nowrap;
}

.psyqo-shop3d .btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: #ff7979 !important;
  color: #060713 !important;
  -webkit-text-fill-color: #060713 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 26px rgba(6, 8, 22, 0.4) !important;
}

.psyqo-shop3d .btn-quiet {
  border-color: rgba(200, 16, 22, 0.2) !important;
  background: rgba(4, 6, 16, 0.62) !important;
  color: var(--shop-ink) !important;
  -webkit-text-fill-color: var(--shop-ink) !important;
}

.psyqo-shop3d-hud {
  right: clamp(24px, 3vw, 42px);
  bottom: clamp(92px, 10vh, 128px);
  width: min(360px, calc(100% - 48px));
  border: 1px solid rgba(200, 16, 22, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(5, 7, 18, 0.78);
  padding: clamp(18px, 2vw, 24px);
  opacity: 0;
  transform: translate3d(18px, 10px, 0);
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 68px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.psyqo-shop3d.is-selected .psyqo-shop3d-hud {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.psyqo-shop3d-hud h3 {
  margin: 10px 0;
  color: var(--shop-ink) !important;
  -webkit-text-fill-color: var(--shop-ink) !important;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.psyqo-shop3d .eyebrow {
  border-color: rgba(200, 16, 22, 0.22) !important;
  background: rgba(200, 16, 22, 0.075) !important;
  color: var(--shop-peri) !important;
  -webkit-text-fill-color: var(--shop-peri) !important;
}

.psyqo-shop3d-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  color: var(--shop-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.psyqo-shop3d-meta strong {
  color: var(--shop-peri) !important;
  -webkit-text-fill-color: var(--shop-peri) !important;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.psyqo-shop3d-hud p {
  margin: 0 0 14px;
  color: var(--shop-muted) !important;
  -webkit-text-fill-color: var(--shop-muted) !important;
  font-size: 14px;
  line-height: 1.6;
}

.psyqo-shop3d-materials {
  margin-bottom: 14px;
  color: rgba(255, 221, 220, 0.52);
  font-size: 12px;
  line-height: 1.45;
}

.psyqo-shop3d-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.psyqo-shop3d-tags span {
  border: 1px solid rgba(200, 16, 22, 0.18);
  background: rgba(200, 16, 22, 0.07);
  padding: 5px 8px;
  color: var(--shop-peri);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.psyqo-shop3d-hud .btn {
  width: 100%;
  justify-content: center;
}

.psyqo-shop3d.is-unavailable .psyqo-shop3d-stage {
  opacity: 0.1;
}

.psyqo-shop3d.is-unavailable::after {
  content: "3D model feed unavailable";
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--shop-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .psyqo-shop3d {
    min-height: 820px;
  }

  .psyqo-shop3d-readout {
    display: none;
  }

  .psyqo-shop3d-status {
    max-width: calc(100% - 48px);
  }

  .psyqo-shop3d-hud {
    left: 18px;
    right: 18px;
    bottom: 94px;
    width: auto;
  }
}

@media (max-width: 560px) {
  .psyqo-shop3d {
    min-height: 760px;
    margin-inline: -12px;
  }

  .psyqo-shop3d-frame {
    inset: 10px;
  }

  .psyqo-shop3d-status {
    top: 20px;
    left: 18px;
    font-size: 10px;
  }

  .psyqo-shop3d-controls {
    left: 14px;
    right: 76px;
    bottom: 16px;
    transform: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .psyqo-shop3d-controls .btn {
    min-width: 0;
    min-height: 38px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .psyqo-shop3d-hud {
    left: 14px;
    right: 14px;
    bottom: 126px;
    max-height: calc(100% - 210px);
    overflow: auto;
    padding: 16px;
  }

  .psyqo-shop3d-hud h3 {
    font-size: 29px;
  }

  .psyqo-shop3d-meta {
    display: grid;
    gap: 4px;
  }
}

/* ── V4 dark-world completion: archived light-board rules → dark panels ── */
body.psyqo-v4 .about-visual,
body.psyqo-v4 .pipeline-card,
body.psyqo-v4 .process-steps article,
body.psyqo-v4 .partner-pitch,
body.psyqo-v4 .partner-card,
body.psyqo-v4 .roster-display,
body.psyqo-v4 .roster-menu button,
body.psyqo-v4 .aero-video-shell,
body.psyqo-v4 .channel-card,
body.psyqo-v4 .globe-float,
body.psyqo-v4 .drop-grid a,
body.psyqo-v4 .shop-arrow,
body.psyqo-v4 .aero-faq-section .faq-list details {
  border-color: var(--v4-line) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(--v4-panel) !important;
  color: var(--v4-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.32) !important;
}

body.psyqo-v4 .pipeline-card:hover,
body.psyqo-v4 .pipeline-step.is-filled .pipeline-card,
body.psyqo-v4 .roster-menu button.active,
body.psyqo-v4 .roster-menu button:hover {
  border-color: rgba(200, 16, 22, 0.38) !important;
  background:
    linear-gradient(145deg, rgba(200, 16, 22, 0.12), rgba(255, 255, 255, 0.02)),
    var(--v4-panel-strong) !important;
  color: var(--v4-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 44px rgba(200, 16, 22, 0.14),
    0 26px 70px rgba(0, 0, 0, 0.38) !important;
}

body.psyqo-v4 .process-steps span {
  border-color: rgba(200, 16, 22, 0.42) !important;
  background: linear-gradient(135deg, #e8353b, var(--v4-peri) 54%, var(--v4-peri-2)) !important;
  color: #050610 !important;
  -webkit-text-fill-color: #050610 !important;
}

body.psyqo-v4 .process-thumb {
  border-color: rgba(200, 16, 22, 0.22) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(200, 16, 22, 0.2), transparent 46%),
    rgba(4, 6, 16, 0.72) !important;
  color: var(--v4-peri) !important;
}

body.psyqo-v4 .section-kicker,
body.psyqo-v4 .eyebrow,
body.psyqo-v4 .aero-mini-label,
body.psyqo-v4 .aero-section .section-kicker,
body.psyqo-v4 .aero-section:not(#shop):not(#faq) .section-kicker {
  border-color: rgba(200, 16, 22, 0.3) !important;
  background: rgba(200, 16, 22, 0.08) !important;
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}

body.psyqo-v4 .section-kicker svg,
body.psyqo-v4 .aero-section:not(#shop):not(#faq) .section-kicker svg {
  color: var(--v4-peri) !important;
}

body.psyqo-v4 .aero-section:not(#shop):not(#faq) h2,
body.psyqo-v4 .aero-section:not(#shop):not(#faq) h3,
body.psyqo-v4 .about-visual .stat-node strong,
body.psyqo-v4 .roster-display h3,
body.psyqo-v4 .roster-display strong {
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
}

body.psyqo-v4 .about-visual .stat-node span,
body.psyqo-v4 .about-visual .typing-line,
body.psyqo-v4 .aero-section:not(#shop):not(#faq) p,
body.psyqo-v4 .roster-display p {
  color: var(--v4-muted) !important;
  -webkit-text-fill-color: var(--v4-muted) !important;
}

body.psyqo-v4 .pipeline-node {
  border-color: rgba(200, 16, 22, 0.46) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(238, 241, 255, 0.92), rgba(200, 16, 22, 0.76) 36%, rgba(200, 16, 22, 0.2) 70%) !important;
  box-shadow: 0 0 26px rgba(200, 16, 22, 0.38) !important;
}

body.psyqo-v4 .pipeline-spine {
  background: linear-gradient(to bottom, rgba(200, 16, 22, 0.08), rgba(200, 16, 22, 0.7), rgba(200, 16, 22, 0.24)) !important;
}

/* ── Cinematic hero travel: hold BE PSYQO, then hand off to BE BRUTAL ── */
body.psyqo-v4 .aeronet-hero {
  height: 250vh !important;
  min-height: 1900px !important;
}

@media (max-width: 760px) {
  body.psyqo-v4 .aeronet-hero {
    height: 100dvh !important;
    min-height: 820px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   V4 FILM HERO — scroll-scrubbed cinematic (frame sequence on canvas)
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-film-hero {
  position: relative;
  min-height: 440dvh;
  padding: 0;
  margin: 0;
  background: #000;
}

body.v4-film .v4-film-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

/* Text layer sits UNDER the film; the canvas/video above it uses
   mix-blend-mode: screen, so the film's black void reads as transparent and
   the glowing subject visually covers the type. Real HTML text: editable,
   accessible, never baked into video pixels. */
body.v4-film .v4-film-title-layer {
  position: absolute;
  inset: 0;
  /* Above the blended film canvas (z 2): the title sits ON TOP of the video,
     fully opaque — the film never covers or tints the letters. */
  z-index: 3;
  display: flex;
  align-items: center;
  /* Desktop editorial split: BE PSYQO + lead sit in a LEFT column, vertically
     centred against the logo. Left margin is measured by fitHeroColumn()
     (--hero-left-inset); the clamp is a pre-JS fallback. */
  padding-left: var(--hero-left-inset, clamp(40px, 8vw, 150px));
  pointer-events: none;
}

/* Left-side vignette: a soft dark scrim under the left column so BE PSYQO sits
   in a stable, slightly-darker zone while the logo (right) stays bright.
   Desktop only — mobile uses its own top-down scrim (::before further below). */
@media (min-width: 761px) {
  body.v4-film .v4-film-title-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      90deg,
      rgba(5, 6, 14, 0.6) 0%,
      rgba(5, 6, 14, 0.4) 24%,
      rgba(5, 6, 14, 0.14) 44%,
      transparent 62%
    );
    pointer-events: none;
  }
}

/* Title/copy always paints above the vignette scrim. */
body.v4-film .v4-film-title-block {
  position: relative;
  z-index: 1;
}

body.v4-film .v4-film-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: clamp(88px, 13vw, 230px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  color: #ffd0cf;
  /* Only the reveal opacity eases. Font-size must NOT transition, or the
     scale-down (unscaled → fitted) would be visible during the fade-in. */
  transition: opacity 0.4s ease;
  text-shadow:
    0 0 26px rgba(200, 16, 22, 0.55),
    0 0 90px rgba(200, 16, 22, 0.3);
}

/* Keep the title hidden until fitHeroColumn() has applied the measured scale,
   so it never paints at full (unscaled) size and then snaps smaller on load.
   The :not() + !important is required to beat the `.v4-film-title--masked
   { opacity: 1 !important }` rule further down; once .is-title-ready lands this
   selector stops matching and the title fades in at the correct size. */
body.v4-film .v4-film-hero:not(.is-title-ready) .v4-film-title {
  opacity: 0 !important;
}

body.v4-film .v4-film-title .v4-film-title-line:last-child {
  color: #c81016;
}

/* Lead paragraph + CTAs now live in the title column, directly under the H1
   (was a separate bottom-anchored beat — now sits close to BE PSYQO). */
body.v4-film .v4-film-lead {
  margin: clamp(18px, 2vw, 30px) 0 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(255, 215, 214, 0.76);
}

body.v4-film .v4-film-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(18px, 2vw, 28px);
  pointer-events: auto;
}

/* Future variant — swap data-orientation="vertical" on the h1, no rebuild. */
body.v4-film .v4-film-title[data-orientation="vertical"] {
  writing-mode: vertical-rl;
  flex-direction: row;
  line-height: 0.95;
}

body.v4-film .v4-film-video,
body.v4-film .v4-film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
}

body.v4-film .v4-film-video {
  object-fit: cover;
  object-position: 62% 50%;
  /* Hidden by default: the canvas is the primary layer (drawn with the
     zoom/focal crop). The raw <video> uses a different framing, so showing it
     first caused a visible "original size → cropped size" reframe on load.
     It's only revealed if the frame sequence fails to load. */
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.v4-film .v4-film-hero.is-frames-failed .v4-film-video {
  opacity: 1;
}

body.v4-film .v4-film-canvas {
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.v4-film .v4-film-hero.is-first-frame-ready .v4-film-canvas {
  opacity: 1;
}

/* ── Beats ── */

body.v4-film .v4-film-beats {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

body.v4-film .v4-film-beat {
  position: absolute;
  left: clamp(24px, 7vw, 130px);
  max-width: min(560px, 62vw);
  will-change: transform, opacity, filter;
}

body.v4-film .v4-beat-intro {
  bottom: clamp(64px, 11vh, 130px);
  /* Align the sub copy + CTAs to the same measured left edge as the title
     column above (--hero-left-inset, set by fitHeroColumn). */
  left: var(--hero-left-inset, clamp(40px, 8vw, 150px));
}

body.v4-film .v4-beat-mark,
body.v4-film .v4-beat-converge {
  top: 50%;
  transform: translateY(-50%);
}

body.v4-film .v4-beat-kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c81016;
}

body.v4-film .v4-beat-line {
  margin: 14px 0 0;
  max-width: 380px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: rgba(255, 215, 214, 0.72);
}

body.v4-film .v4-beat-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.0;
  color: #eceeff;
  text-shadow: 0 0 34px rgba(200, 16, 22, 0.35);
}

body.v4-film .v4-beat-title-xl {
  font-size: clamp(64px, 10.5vw, 172px);
  line-height: 0.9;
  color: #ffd0cf;
  text-shadow:
    0 0 26px rgba(200, 16, 22, 0.5),
    0 0 90px rgba(200, 16, 22, 0.28);
}

body.v4-film .v4-beat-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
  pointer-events: auto;
}

/* Lessons ring beat */
body.v4-film .v4-lessons-ring {
  position: relative;
  width: 148px;
  height: 148px;
  margin-bottom: 22px;
}

body.v4-film .v4-lessons-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

body.v4-film .v4-lessons-ring circle {
  fill: none;
  stroke-width: 5;
}

body.v4-film .v4-lessons-ring .ring-track {
  stroke: rgba(200, 16, 22, 0.16);
}

body.v4-film .v4-lessons-ring .ring-fill {
  stroke: #c81016;
  stroke-linecap: round;
  stroke-dasharray: 364.42;
  stroke-dashoffset: 364.42;
  filter: drop-shadow(0 0 10px rgba(200, 16, 22, 0.7));
}

body.v4-film .v4-lessons-ring strong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-size: 44px;
  font-weight: 700;
  color: #eceeff;
}

body.v4-film .v4-lessons-ring span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 46%);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(200, 16, 22, 0.8);
}

/* Scroll hint */
body.v4-film .v4-film-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
}

body.v4-film .v4-film-hint span {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(200, 16, 22, 0), #c81016);
  animation: v4HintDrop 1.8s ease-in-out infinite;
}

body.v4-film .v4-film-hint p {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.75);
}

@keyframes v4HintDrop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── Lessons filmstrip section ── */

body.v4-film .v4-lessons-section {
  padding-bottom: clamp(70px, 9vw, 130px);
}

body.v4-film .v4-lessons-filmstrip-shell {
  overflow: hidden;
  padding: 18px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

body.v4-film .v4-lessons-filmstrip {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 0 max(24px, calc((100vw - 1160px) / 2));
  will-change: transform;
}

body.v4-film .v4-lesson-cell {
  position: relative;
  min-width: 200px;
  padding: 40px 20px 20px;
  border: 1px solid rgba(200, 16, 22, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, #101226 0%, #07080f 100%);
  display: grid;
  gap: 6px;
}

/* filmstrip sprocket row */
body.v4-film .v4-lesson-cell::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  height: 7px;
  background-image: radial-gradient(circle at 4px 3.5px, rgba(200, 16, 22, 0.4) 2.2px, transparent 2.6px);
  background-size: 18px 7px;
  background-repeat: repeat-x;
}

body.v4-film .v4-lesson-cell .v4-lesson-num {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c81016;
}

body.v4-film .v4-lesson-cell strong {
  font-size: 15px;
  color: #eceeff;
}

body.v4-film .v4-lesson-cell em {
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 215, 214, 0.55);
}

body.v4-film .v4-lesson-cell.is-latest {
  border-color: rgba(200, 16, 22, 0.85);
  box-shadow: 0 0 34px rgba(200, 16, 22, 0.3), inset 0 0 22px rgba(200, 16, 22, 0.12);
}

body.v4-film .v4-lesson-cell.is-latest .v4-lesson-num {
  color: #c81016;
  text-shadow: 0 0 16px rgba(200, 16, 22, 0.8);
}

body.v4-film .v4-lesson-cell.is-ghost {
  border-style: dashed;
  opacity: 0.62;
  background: linear-gradient(180deg, #0a0b18 0%, #05060c 100%);
}

body.v4-film .v4-lesson-cell.is-finale .v4-lesson-num {
  color: #eceeff;
}

/* ── Mobile ── */

@media (max-width: 760px) {
  body.v4-film .v4-film-hero {
    min-height: 360dvh;
  }

  /* Mobile monument: logo is centred by the JS crop; frame it with centred
     type at the top and centred sub/CTAs at the bottom. */
  body.v4-film .v4-film-title-layer {
    /* Focally centre the lockup on the P logo (which the crop centres in the
       viewport) instead of jamming it against the top. */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0;
    padding-bottom: 4vh;
    padding-left: 18px;
    padding-right: 18px;
  }

  body.v4-film .v4-film-title-block {
    width: 100%;
  }

  body.v4-film .v4-film-title {
    font-size: clamp(52px, 16.5vw, 80px);
    line-height: 0.9;
    max-width: 100%;
    align-items: center;
  }

  body.v4-film .v4-film-kicker {
    text-align: center;
  }

  body.v4-film .v4-film-beat {
    left: 22px;
    right: 22px;
    max-width: none;
  }

  /* Mobile hero is a clean monument: BE PSYQO over the film + one CTA. The
     lead paragraph read too faint against the moving background here, so it's
     dropped on mobile (kept on desktop, where it sits in the vignette column). */
  body.v4-film .v4-film-lead {
    display: none;
  }

  body.v4-film .v4-film-cta {
    justify-content: center;
  }

  body.v4-film .v4-beat-title {
    font-size: clamp(34px, 9.6vw, 48px);
  }

  body.v4-film .v4-beat-title-xl {
    font-size: clamp(56px, 16vw, 78px);
  }

  body.v4-film .v4-lessons-ring {
    width: 118px;
    height: 118px;
  }

  body.v4-film .v4-lessons-ring strong {
    font-size: 34px;
  }

  body.v4-film .v4-lesson-cell {
    min-width: 168px;
    padding: 34px 16px 16px;
  }
}

/* ── Lessons standalone hub (ring moved out of the hero) ── */

body.v4-film .v4-lessons-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}

body.v4-film .v4-lessons-ring-standalone {
  width: 172px;
  height: 172px;
  margin-bottom: 0;
}

body.v4-film .v4-lessons-ring-standalone strong {
  font-size: 52px;
}

@media (max-width: 760px) {
  body.v4-film .v4-lessons-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  body.v4-film .v4-lessons-ring-standalone {
    width: 132px;
    height: 132px;
  }

  body.v4-film .v4-lessons-ring-standalone strong {
    font-size: 40px;
  }
}

/* ── Theater: closed cinematic marquee → expandable cinema ── */

body.v4-film .v4-theater-marquee {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(220px, 30vw, 340px);
  margin-top: clamp(22px, 3vw, 38px);
  padding: 0;
  border: 1px solid rgba(200, 16, 22, 0.28);
  border-radius: 18px;
  overflow: hidden;
  background: #05060f;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

body.v4-film .v4-theater-marquee:hover {
  border-color: rgba(200, 16, 22, 0.65);
  box-shadow: 0 26px 80px rgba(3, 4, 14, 0.8), 0 0 46px rgba(200, 16, 22, 0.22);
  transform: translateY(-3px);
}

body.v4-film .v4-theater-marquee-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.5) contrast(1.05);
  transform: scale(1.04);
  transition: transform 0.6s ease, filter 0.6s ease;
}

body.v4-film .v4-theater-marquee:hover .v4-theater-marquee-still {
  transform: scale(1.08);
  filter: saturate(0.85) brightness(0.6) contrast(1.05);
}

body.v4-film .v4-theater-marquee-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(200, 16, 22, 0.32) 0%, transparent 62%),
    linear-gradient(180deg, rgba(3, 4, 14, 0.72) 0%, rgba(3, 4, 14, 0.35) 45%, rgba(3, 4, 14, 0.86) 100%);
}

body.v4-film .v4-theater-marquee-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(38px, 6vw, 72px) 24px;
}

body.v4-film .v4-theater-marquee-play {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffc7c6, #c81016);
  color: #0a0b18;
  box-shadow: 0 0 40px rgba(200, 16, 22, 0.55);
  transition: transform 0.35s ease;
}

body.v4-film .v4-theater-marquee:hover .v4-theater-marquee-play {
  transform: scale(1.08);
}

body.v4-film .v4-theater-marquee-play svg {
  width: 26px;
  height: 26px;
}

body.v4-film .v4-theater-marquee-label {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eceeff;
  text-shadow: 0 0 24px rgba(200, 16, 22, 0.5);
}

body.v4-film .v4-theater-marquee em {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.8);
}

body.v4-film .v4-theater-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(18px);
  transition: max-height 0.65s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s ease 0.08s, transform 0.6s ease;
}

body.v4-film .v4-theater-section.is-theater-open .v4-theater-body {
  max-height: 5200px;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}

body.v4-film .v4-theater-section.is-theater-open .v4-theater-body .home-cinema {
  margin-top: clamp(22px, 3vw, 36px);
}

/* Film layer culled once the hero pin is fully scrolled past */
body.v4-film .v4-film-hero.is-offstage .v4-film-canvas,
body.v4-film .v4-film-hero.is-offstage .v4-film-video,
body.v4-film .v4-film-hero.is-offstage .v4-film-title-layer {
  visibility: hidden;
}

/* Standalone lessons ring: keep the /100 clear of the count */
body.v4-film .v4-lessons-ring-standalone strong {
  transform: translate(-50%, -64%);
}

body.v4-film .v4-lessons-ring-standalone span {
  transform: translate(-50%, 74%);
}

/* Theater marquee still: pull saturation down so red thumbnail art
   doesn't fight the periwinkle world while closed */
body.v4-film .v4-theater-marquee-still {
  filter: saturate(0.32) brightness(0.44) contrast(1.08);
}

body.v4-film .v4-theater-marquee:hover .v4-theater-marquee-still {
  filter: saturate(0.45) brightness(0.52) contrast(1.08);
}

/* ════════════════════════════════════════════════════════════════════════
   V4 typography — Vipnagorgialla Y2K display face (matches the original
   V4 deployment) + hero HUD chrome
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Vipnagorgialla";
  src: url("fonts/vipnagorgialla-rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vipnagorgialla";
  src: url("fonts/vipnagorgialla-bd.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.v4-film {
  --v4-display: "Vipnagorgialla", "Space Grotesk", sans-serif;
}

/* Hero title block */
body.v4-film .v4-film-kicker {
  margin: 0 0 20px;
  font-family: var(--v4-display);
  font-weight: 400;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #eceeff;
  text-shadow: 0 0 18px rgba(200, 16, 22, 0.4);
}

body.v4-film .v4-film-title {
  font-family: var(--v4-display);
  font-weight: 700;
  font-size: clamp(88px, 13vw, 230px);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

body.v4-film .v4-film-title .v4-film-title-line:first-child {
  color: #f2f3ff;
}

/* Beat + section headline face */
body.v4-film .v4-beat-title {
  font-family: var(--v4-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(30px, 4vw, 62px);
  line-height: 1.04;
}

body.v4-film .v4-beat-title-xl {
  font-size: clamp(48px, 8vw, 132px);
  line-height: 0.96;
}

body.v4-film .v4-beat-kicker {
  font-family: var(--v4-display);
  font-weight: 400;
}

body.v4-film main h2,
body.v4-film .roster-lane,
body.v4-film .v4-theater-marquee-label,
body.v4-film .lessons-score,
body.v4-film .v4-lessons-ring strong,
body.v4-film .v4-hud-card strong,
body.v4-film .v4-lesson-cell .v4-lesson-num {
  font-family: var(--v4-display);
}

body.v4-film main h2 {
  letter-spacing: 0.005em;
}

body.v4-film .nav-links a,
body.v4-film .btn,
body.v4-film .header-actions .btn,
body.v4-film .section-kicker span,
body.v4-film .eyebrow,
body.v4-film .aero-mini-label {
  font-family: var(--v4-display);
  font-weight: 400;
}

/* ── Hero HUD chrome ── */

body.v4-film .v4-film-hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

body.v4-film .v4-hud-chip {
  position: absolute;
  top: 16%;
  left: 56%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid rgba(200, 16, 22, 0.4);
  border-radius: 9px;
  background: rgba(8, 9, 22, 0.72);
  backdrop-filter: blur(6px);
  font-family: var(--v4-display);
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #ffb1b1;
  box-shadow: 0 0 26px rgba(200, 16, 22, 0.18);
}

body.v4-film .v4-hud-chip b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c81016;
  box-shadow: 0 0 10px rgba(200, 16, 22, 0.9);
  animation: v4HudPulse 2.2s ease-in-out infinite;
}

@keyframes v4HudPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

body.v4-film .v4-hud-card {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: baseline;
  padding: 16px 20px 14px;
  border: 1px solid rgba(200, 16, 22, 0.3);
  border-radius: 10px;
  background: rgba(8, 9, 22, 0.74);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px rgba(3, 4, 14, 0.6);
}

body.v4-film .v4-hud-card strong {
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 700;
  color: #f2f3ff;
  letter-spacing: 0.02em;
}

body.v4-film .v4-hud-card span {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 215, 214, 0.6);
}

body.v4-film .v4-hud-card em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff7f7f;
}

body.v4-film .v4-hud-card-subs {
  top: 19%;
  right: clamp(24px, 5vw, 84px);
}

body.v4-film .v4-hud-card-views {
  bottom: 23%;
  left: 71%;
}

/* Founding-date chip — a bullet accent under the Views stat. */
body.v4-film .v4-hud-chip-est {
  top: auto;
  bottom: 13%;
  left: 71%;
}

/* ── System readout bar (persistent through the film) ── */

body.v4-film .v4-film-readouts {
  position: absolute;
  left: clamp(16px, 2.5vw, 40px);
  right: clamp(16px, 2.5vw, 40px);
  bottom: 18px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  pointer-events: none;
}

body.v4-film .v4-film-readouts span {
  padding: 10px 16px;
  border: 1px solid rgba(200, 16, 22, 0.22);
  border-radius: 6px;
  background: rgba(5, 6, 15, 0.62);
  font-family: var(--v4-display);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(255, 177, 177, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.v4-film .v4-film-hint {
  bottom: 66px;
}

@media (max-width: 1100px) {
  body.v4-film .v4-hud-card-views { left: auto; right: clamp(20px, 4vw, 60px); }
  body.v4-film .v4-hud-chip { left: auto; right: clamp(20px, 4vw, 60px); top: 12%; }
}

@media (max-width: 760px) {
  body.v4-film .v4-film-hud { display: none; }
  body.v4-film .v4-film-readouts { grid-template-columns: 1fr; gap: 8px; bottom: 12px; }
  body.v4-film .v4-film-readouts span:nth-child(2),
  body.v4-film .v4-film-readouts span:nth-child(3) { display: none; }
  body.v4-film .v4-film-hint { bottom: 58px; }
  body.v4-film .v4-film-title { font-size: clamp(52px, 16.5vw, 80px); line-height: 0.9; }
}

/* Archived psyqo.css forces h1/h2/h3 to --font-brand with !important;
   match its weight so the Y2K display face actually lands. */
body.v4-film .v4-film-title,
body.v4-film .v4-beat-title,
body.v4-film main h2,
body.v4-film .v4-hud-card strong,
body.v4-film .roster-detail h3 {
  font-family: var(--v4-display) !important;
}

/* The full-viewport canvas/video above the title use mix-blend-mode: screen,
   so their not-quite-black pixels + bloom ADD to whatever sits under them and
   wash PSYQO toward white. The old base (#fd6363) + a wide bright text-shadow
   glow compounded that lift, so the line rendered near-white/lavender instead
   of solid periwinkle. Fix: start from a deeper, more saturated periwinkle and
   isolate the line onto its own compositing layer so its own glow no longer
   feeds the screen-blend — it now lands at the reference ≈ #ff7777 at rest.
   (`isolation: isolate` only affects THIS element's stacking context; the film
   layer still blends over the title layer, so the "glowing logo covers the
   text" effect is untouched.) */
body.v4-film .v4-film-title .v4-film-title-line:last-child {
  color: #fb5858;
  /* Archived psyqo.css forces -webkit-text-fill-color: #f5f7ff !important on the
     h1, which overrides `color` for the actual glyph fill — that (not the
     screen-blend alone) is what rendered PSYQO near-white. Reassert the fill as
     a saturated periwinkle so it lands at the reference ≈ #ff7777 once the
     film's screen-blend + bloom lift it slightly at rest. */
  -webkit-text-fill-color: #fb5858 !important;
  text-shadow: 0 0 16px rgba(243, 50, 50, 0.28);
}

/* ════════════════════════════════════════════════════════════════════════
   FROM THE COMMENTS — testimonial "archive receipts" module (#community)
   Period-YouTube comment bones + terminal provenance, pinboard layout.
   Scoped under .v4-receipts. Text colors/fonts carry !important because the
   archived psyqo.css forces -webkit-text-fill-color:#f5f7ff on generic
   selectors; card ink must stay near-white / periwinkle, not washed.
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film #community:not(#a):not(#b) .v4-receipts {
  --vr-card-top: #0a0c1c;
  --vr-card-bot: #06070f;
  --vr-border: rgba(200, 16, 22, 0.16);
  --vr-border-lit: rgba(200, 16, 22, 0.32);
  --vr-ink: #e7e9ff;
  --vr-user: #c81016;
  --vr-dim: rgba(255, 133, 133, 0.72);
  --vr-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  max-width: 1120px;
  margin: 0 auto clamp(48px, 6vw, 88px);
  text-align: left;
}

body.v4-film #community:not(#a):not(#b) .v4-receipts-header {
  max-width: 720px;
  margin: 0 auto clamp(30px, 4vw, 54px);
  text-align: center;
}

body.v4-film #community:not(#a):not(#b) .v4-receipts-kicker {
  display: inline-block;
  font-family: var(--vr-mono) !important;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vr-user) !important;
  -webkit-text-fill-color: var(--vr-user) !important;
  margin-bottom: 16px;
}

body.v4-film #community:not(#a):not(#b) .v4-receipts-title {
  font-family: var(--v4-display) !important;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: #f2f3ff !important;
  -webkit-text-fill-color: #f2f3ff !important;
  margin: 0 0 16px;
}

body.v4-film #community:not(#a):not(#b) .v4-receipts-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--vr-dim) !important;
  -webkit-text-fill-color: var(--vr-dim) !important;
  margin: 0;
}

/* ── Pinboard wall (staggered 3-col masonry) ─────────────── */
body.v4-film #community:not(#a):not(#b) .v4-receipts-wall {
  columns: 3;
  column-gap: 22px;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt {
  break-inside: avoid;
  display: block;
  margin-bottom: 22px;
  margin-top: var(--lift, 0px);
  padding: 18px 18px 16px;
  border: 1px solid var(--vr-border);
  border-radius: 8px;
  background: linear-gradient(var(--vr-card-top), var(--vr-card-bot));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42),
              0 1px 0 rgba(200, 16, 22, 0.05) inset;
  transform: rotate(var(--rot, 0deg));
  transform-origin: 50% 40%;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt--rating {
  border-color: var(--vr-border-lit);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(200, 16, 22, 0.14) inset;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-family: var(--v4-display) !important;
  font-size: 15px;
  font-weight: 700;
  text-transform: lowercase;
  color: #ffc6c6 !important;
  -webkit-text-fill-color: #ffc6c6 !important;
  background: var(--tile, #2a2c5e);
  border: 1px solid rgba(200, 16, 22, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-user {
  font-size: 13px;
  font-weight: 700;
  color: var(--vr-user) !important;
  -webkit-text-fill-color: var(--vr-user) !important;
  line-height: 1.2;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-age {
  font-size: 11.5px;
  color: var(--vr-dim) !important;
  -webkit-text-fill-color: var(--vr-dim) !important;
  line-height: 1.3;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-body {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vr-ink) !important;
  -webkit-text-fill-color: var(--vr-ink) !important;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-votes {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vr-dim) !important;
  -webkit-text-fill-color: var(--vr-dim) !important;
  margin-bottom: 12px;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-thumb {
  color: var(--vr-user) !important;
  -webkit-text-fill-color: var(--vr-user) !important;
  font-size: 11px;
  line-height: 1;
}

/* ── Rating variant (diamond glyphs instead of stars) ────── */
body.v4-film #community:not(#a):not(#b) .v4-receipt-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-diamond {
  font-size: 12px;
  line-height: 1;
  color: rgba(200, 16, 22, 0.22) !important;
  -webkit-text-fill-color: rgba(200, 16, 22, 0.22) !important;
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-diamond.is-on {
  color: #c81016 !important;
  -webkit-text-fill-color: #c81016 !important;
  text-shadow: 0 0 8px rgba(200, 16, 22, 0.5);
}

body.v4-film #community:not(#a):not(#b) .v4-receipt-rating-label {
  margin-left: 8px;
  font-family: var(--vr-mono) !important;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--vr-user) !important;
  -webkit-text-fill-color: var(--vr-user) !important;
}

/* ── Terminal provenance footer ──────────────────────────── */
body.v4-film #community:not(#a):not(#b) .v4-receipt-source {
  padding-top: 11px;
  border-top: 1px solid rgba(200, 16, 22, 0.1);
  font-family: var(--vr-mono) !important;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 120, 120, 0.6) !important;
  -webkit-text-fill-color: rgba(255, 120, 120, 0.6) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.v4-film #community:not(#a):not(#b) .v4-receipts-caption {
  margin: clamp(26px, 3vw, 40px) 0 0;
  text-align: center;
  font-family: var(--vr-mono) !important;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 120, 120, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 120, 120, 0.5) !important;
}

@media (max-width: 1024px) {
  body.v4-film #community:not(#a):not(#b) .v4-receipts-wall { columns: 2; }
}

@media (max-width: 760px) {
  body.v4-film #community:not(#a):not(#b) .v4-receipts-wall { columns: 1; }
  body.v4-film #community:not(#a):not(#b) .v4-receipt {
    transform: none;
    margin-top: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SOCIAL ROW — compact icon tiles in #community join section
   ════════════════════════════════════════════════════════════════════════ */

.v4-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.v4-social-tile {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(200, 16, 22, 0.18);
  border-radius: 8px;
  background: rgba(8, 10, 22, 0.62);
  color: rgba(255, 177, 177, 0.7);
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, color 200ms ease, transform 180ms ease;
}

.v4-social-tile:hover {
  border-color: rgba(200, 16, 22, 0.6);
  box-shadow: 0 0 18px rgba(200, 16, 22, 0.3);
  color: #f5f7ff;
  transform: translateY(-2px);
}

.v4-social-tile svg {
  width: 17px;
  height: 17px;
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE HERO FIXES (max-width: 760px)
   Bug 1: Beat copy clips under fixed header mid-scrub
   Bug 2: Title/subcopy legibility — top scrim on title layer
   Bug 3: Chat FAB overlaps BOOT_SEQUENCE readout
   ════════════════════════════════════════════════════════════════════════ */

/* Bug 1: Give beats a safe top offset so they clear the fixed header.
   Header is ~74px on mobile (58px nav + padding). The center beats currently
   use top:50% + translateY(-50%). Cap top at 90px to guarantee header clearance.
   We shift the anchor: use top from a safe baseline rather than 50% vertical center. */
@media (max-width: 760px) {
  body.v4-film .v4-beat-mark,
  body.v4-film .v4-beat-converge {
    top: clamp(90px, calc(50% - 60px), 55%) !important;
    transform: none !important;
  }
}

/* Mobile title scrim — dark wash behind the whole text block (kicker→CTA,
   which measures ~12%–49% of the title layer) so the centred type keeps
   contrast where it crosses the logo's bright edges, then fades out below.
   Held stronger through the paragraph/CTA zone than the original (which went
   near-transparent by 28% and left the lead + button sitting on bare glow). */
@media (max-width: 760px) {
  body.v4-film .v4-film-title-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      180deg,
      rgba(5, 6, 12, 0.82) 0%,
      rgba(5, 6, 12, 0.68) 18%,
      rgba(5, 6, 12, 0.52) 38%,
      rgba(5, 6, 12, 0.40) 50%,
      transparent 64%
    );
    pointer-events: none;
  }

  /* Ensure title block sits above the scrim pseudo-element */
  body.v4-film .v4-film-title-block {
    position: relative;
    z-index: 1;
  }
}

/* Bug 3: On mobile show only one readout; pad right to clear chat FAB (~72px wide) */
@media (max-width: 760px) {
  body.v4-film .v4-film-readouts {
    padding-right: 72px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO R3 — Beat 2: Stats panel (left side, detonation chapter)
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-beat-stats-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 28px) clamp(14px, 1.8vw, 22px);
  border: 1px solid rgba(200, 16, 22, 0.28);
  border-radius: 10px;
  background: rgba(7, 8, 20, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(200, 16, 22, 0.1);
  max-width: min(320px, 42vw);
}

body.v4-film .v4-beat-stat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(200, 16, 22, 0.12);
}

body.v4-film .v4-beat-stat-row:last-of-type {
  border-bottom: none;
}

body.v4-film .v4-beat-stat-num {
  font-family: var(--v4-display) !important;
  -webkit-text-fill-color: #f2f3ff !important;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 700;
  color: #f2f3ff !important;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  min-width: clamp(70px, 6.5vw, 100px);
}

body.v4-film .v4-beat-stat-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.72) !important;
  -webkit-text-fill-color: rgba(200, 16, 22, 0.72) !important;
  white-space: nowrap;
}

body.v4-film .v4-beat-stat-viz {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.v4-film .v4-stat-bars {
  width: 100%;
  height: 48px;
  display: block;
  overflow: visible;
}

body.v4-film .v4-stat-bars .v4-bar {
  fill: rgba(200, 16, 22, 0.28);
  stroke: rgba(200, 16, 22, 0.6);
  stroke-width: 1;
  /* bars animate in via JS when beat enters */
  transform-origin: bottom;
  transform-box: fill-box;
}

body.v4-film .v4-stat-bars .v4-bar.is-lit {
  fill: rgba(200, 16, 22, 0.55);
  stroke: #c81016;
  filter: drop-shadow(0 0 6px rgba(200, 16, 22, 0.7));
}

body.v4-film .v4-stat-viz-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 120, 120, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 120, 120, 0.5) !important;
}

@media (max-width: 760px) {
  body.v4-film .v4-beat-stats-panel {
    max-width: none;
    padding: 14px 16px 12px;
  }

  body.v4-film .v4-beat-stat-num {
    font-size: clamp(18px, 5.5vw, 26px);
    min-width: 72px;
  }

  body.v4-film .v4-beat-stat-row {
    padding: 7px 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO R3 — Beat 3: Comments showcase (left side, convergence chapter)
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-beat-comments-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, 44vw);
  pointer-events: none;
}

body.v4-film .v4-hero-receipt {
  padding: 14px 15px 12px;
  border: 1px solid rgba(200, 16, 22, 0.38);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(10, 12, 28, 0.92), rgba(6, 7, 15, 0.88));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(200, 16, 22, 0.14) inset,
    0 0 22px rgba(200, 16, 22, 0.2),
    0 12px 36px rgba(0, 0, 0, 0.6);
  transform: rotate(var(--hr-rot, 0deg));
  transform-origin: 50% 40%;
  /* stagger via JS */
}

body.v4-film .v4-hr-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

body.v4-film .v4-hr-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--v4-display) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: lowercase;
  color: #ffc6c6 !important;
  -webkit-text-fill-color: #ffc6c6 !important;
  background: var(--tile, #2a2c5e);
  border: 1px solid rgba(200, 16, 22, 0.22);
}

body.v4-film .v4-hr-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.v4-film .v4-hr-user {
  font-size: 12px;
  font-weight: 700;
  color: #c81016 !important;
  -webkit-text-fill-color: #c81016 !important;
  line-height: 1.2;
}

body.v4-film .v4-hr-age {
  font-size: 10.5px;
  color: rgba(255, 133, 133, 0.72) !important;
  -webkit-text-fill-color: rgba(255, 133, 133, 0.72) !important;
  line-height: 1.3;
}

body.v4-film .v4-hr-body {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #e7e9ff !important;
  -webkit-text-fill-color: #e7e9ff !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.v4-film .v4-hr-source {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 120, 120, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 120, 120, 0.55) !important;
  padding-top: 8px;
  border-top: 1px solid rgba(200, 16, 22, 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  body.v4-film .v4-beat-comments-panel {
    max-width: none;
    gap: 8px;
  }

  body.v4-film .v4-hero-receipt {
    transform: none;
    padding: 11px 12px 10px;
  }

  body.v4-film .v4-hr-body {
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO R3 — HUD: remove em sub-lines, keep 2-stat cards cleaner
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-hud-card {
  grid-template-columns: 1fr;
}

body.v4-film .v4-hud-card strong {
  grid-column: 1;
}

body.v4-film .v4-hud-card span {
  grid-column: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   FAB: replace speech-bubble icon with PsyQo P mark (CSS mask on img)
   Scoped under body.psyqo-v4 so it only fires on V4 and beats the
   base psyqo.css gradient background rule.
   ════════════════════════════════════════════════════════════════════════ */

body.psyqo-v4 #psyqo-chat-bubble .v4-fab-logo {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  /* The PNG is black mark on white; we invert to dark-on-light periwinkle.
     Don't invert — black on the light periwinkle bubble is the desired look.
     Slight scale to fit the circular button. */
  filter: none;
}

body.psyqo-v4 #psyqo-chat-bubble i[data-lucide] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   TASK 6a FIX: Ensure lucide SVG inside the FAB is fully hidden.
   psyqo.js creates the bubble after DOMContentLoaded; the inline script
   in index.html hides the <i> element, but if lucide replaces it with
   an <svg> we also hide that.
   ════════════════════════════════════════════════════════════════════════ */

body.psyqo-v4 #psyqo-chat-bubble svg,
body.psyqo-v4 #psyqo-chat-bubble i,
body.psyqo-v4 #psyqo-chat-bubble [data-lucide] {
  display: none !important;
}

body.psyqo-v4 #psyqo-chat-bubble {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.psyqo-v4 #psyqo-chat-bubble .v4-fab-logo {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   TASK 6b FIX: Stats beat — "Est. 2011" + "Gaming Collective" row.
   The long mono label collides with the bold numeral at small container
   widths. Stacked variant wraps label below the numeral.
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-beat-stat-row--stacked {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2px 10px;
}

body.v4-film .v4-beat-stat-row--stacked .v4-beat-stat-num {
  flex: 0 0 auto;
  min-width: 0;
}

body.v4-film .v4-beat-stat-row--stacked .v4-beat-stat-label {
  flex: 0 0 100%;
  font-size: 10px;
  letter-spacing: 0.14em;
  margin-top: -2px;
}

/* ════════════════════════════════════════════════════════════════════════
   TASK 1: Premium Roster accordion — full-width expandable rows
   ════════════════════════════════════════════════════════════════════════ */

.v4-roster-premium {
  padding-top: clamp(60px, 8vw, 110px);
  padding-bottom: clamp(60px, 8vw, 110px);
}

.v4-roster-intro {
  max-width: 680px;
  margin-bottom: clamp(42px, 6vw, 80px);
}

.v4-roster-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--v4-peri);
  -webkit-text-fill-color: var(--v4-peri);
  margin: 0 0 20px;
}

.v4-roster-headline {
  font-family: var(--v4-display) !important;
  font-size: clamp(34px, 5vw, 72px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.005em !important;
  color: var(--v4-ink) !important;
  -webkit-text-fill-color: var(--v4-ink) !important;
  margin: 0 0 18px !important;
}

.v4-roster-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--v4-muted) !important;
  -webkit-text-fill-color: var(--v4-muted) !important;
  margin: 0;
}

/* Accordion */
.v4-roster-accordion {
  border-top: 1px solid rgba(200, 16, 22, 0.22);
}

.v4-roster-row {
  border-bottom: 1px solid rgba(200, 16, 22, 0.12);
  transition: border-color 0.25s ease;
}

.v4-roster-row.is-open {
  border-bottom-color: rgba(200, 16, 22, 0.32);
}

.v4-roster-row-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 32px) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: padding-left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.v4-roster-row-trigger:hover {
  padding-left: 14px;
}

.v4-roster-row-name {
  font-family: var(--v4-display) !important;
  font-size: clamp(24px, 3.4vw, 52px);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--v4-ink);
  -webkit-text-fill-color: var(--v4-ink);
  flex: 1;
  transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease;
  line-height: 1.1;
}

.v4-roster-row-trigger:hover .v4-roster-row-name,
.v4-roster-row.is-open .v4-roster-row-name {
  color: var(--v4-peri);
  -webkit-text-fill-color: var(--v4-peri);
}

.v4-roster-row-role {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.55);
  -webkit-text-fill-color: rgba(200, 16, 22, 0.55);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .v4-roster-row-role { display: none; }
}

.v4-roster-row-chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(200, 16, 22, 0.3);
  border-radius: 50%;
  position: relative;
  transition: transform 0.35s ease, border-color 0.25s ease;
}

.v4-roster-row-chevron::before,
.v4-roster-row-chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 1.5px;
  background: rgba(200, 16, 22, 0.7);
  transition: transform 0.3s ease;
}

.v4-roster-row-chevron::before {
  left: calc(50% - 5px);
  transform: translateY(-50%) rotate(45deg);
}

.v4-roster-row-chevron::after {
  left: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.v4-roster-row.is-open .v4-roster-row-chevron {
  transform: rotate(180deg);
  border-color: rgba(200, 16, 22, 0.6);
}

/* Expandable panel */
.v4-roster-row-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.v4-roster-row.is-open .v4-roster-row-panel {
  max-height: 400px;
}

.v4-roster-row-panel[aria-hidden="true"] {
  visibility: hidden;
}

.v4-roster-row.is-open .v4-roster-row-panel {
  visibility: visible;
}

.v4-roster-row-body {
  padding: 0 0 clamp(24px, 3vw, 40px) 0;
  max-width: 720px;
}

.v4-roster-detail-kicker {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
  border: 1px solid rgba(200, 16, 22, 0.28);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 14px;
}

.v4-roster-row-body p {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--v4-muted) !important;
  -webkit-text-fill-color: var(--v4-muted) !important;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   TASK 2: Lessons 98-episode horizontal row
   ════════════════════════════════════════════════════════════════════════ */

.v4-lessons-row-shell {
  position: relative;
  margin-top: clamp(20px, 3vw, 40px);
}

.v4-lessons-row-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  padding-inline: max(24px, calc((100vw - 1160px) / 2));
}

.v4-lessons-row-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(200, 16, 22, 0.28);
  border-radius: 50%;
  background: rgba(8, 10, 22, 0.62);
  color: rgba(255, 177, 177, 0.8);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.v4-lessons-row-btn:hover {
  border-color: rgba(200, 16, 22, 0.7);
  box-shadow: 0 0 18px rgba(200, 16, 22, 0.28);
  color: #fff;
}

.v4-lessons-row-btn svg {
  width: 18px;
  height: 18px;
}

.v4-lessons-row-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 16, 22, 0.25) transparent;
  padding-bottom: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.v4-lessons-row-scroller::-webkit-scrollbar {
  height: 4px;
}

.v4-lessons-row-scroller::-webkit-scrollbar-thumb {
  background: rgba(200, 16, 22, 0.25);
  border-radius: 2px;
}

.v4-lessons-row {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 4px max(24px, calc((100vw - 1160px) / 2));
}

.v4-lesson-card {
  display: flex;
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  border: 1px solid rgba(200, 16, 22, 0.18);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #101226 0%, #07080f 100%);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  content-visibility: auto;
  contain-intrinsic-size: 220px 200px;
}

.v4-lesson-card:hover {
  border-color: rgba(200, 16, 22, 0.65);
  box-shadow: 0 8px 32px rgba(3, 4, 14, 0.7), 0 0 24px rgba(200, 16, 22, 0.2);
  transform: translateY(-4px);
}

.v4-lesson-card.has-video {
  border-color: rgba(200, 16, 22, 0.32);
}

.v4-lesson-card-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #05060f;
}

.v4-lesson-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.v4-lesson-card:hover .v4-lesson-card-thumb-img {
  transform: scale(1.05);
}

/* Placeholder for lessons without a YouTube ID */
.v4-lesson-card-thumb-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(200, 16, 22, 0.22), transparent 58%),
    linear-gradient(180deg, #0a0c20, #04050e);
  position: relative;
}

.v4-lesson-card-ph-num {
  font-family: var(--v4-display) !important;
  font-size: 34px;
  font-weight: 700;
  color: rgba(200, 16, 22, 0.45);
  -webkit-text-fill-color: rgba(200, 16, 22, 0.45);
  line-height: 1;
}

.v4-lesson-card-ph-p {
  font-family: var(--v4-display) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.22);
  -webkit-text-fill-color: rgba(200, 16, 22, 0.22);
  margin-top: 4px;
}

.v4-lesson-card-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.v4-lesson-card-num {
  font-family: var(--v4-display) !important;
  font-size: 14px;
  font-weight: 700;
  color: #eceeff !important;
  -webkit-text-fill-color: #eceeff !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.v4-lesson-card-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.5) !important;
  -webkit-text-fill-color: rgba(200, 16, 22, 0.5) !important;
}

.v4-lessons-row-loading {
  padding: 32px max(24px, calc((100vw - 1160px) / 2));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.5);
  -webkit-text-fill-color: rgba(200, 16, 22, 0.5);
}

@media (max-width: 760px) {
  .v4-lesson-card { width: 180px; }
  .v4-lesson-card-ph-num { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════════════════
   TASK 3: PsyQo Center — Featured Channels (2011 YouTube style, V4 skin)
   ════════════════════════════════════════════════════════════════════════ */

.v4-center-console {
  /* Unified container: cinema + console lower deck */
  border: 1px solid rgba(200, 16, 22, 0.22);
  border-radius: 14px;
  overflow: hidden;
  margin-top: clamp(22px, 3vw, 38px);
  background: rgba(5, 6, 14, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 80px rgba(0, 0, 0, 0.46);
}

.v4-center-console .home-cinema {
  margin: 0 !important;
  border-bottom: 1px solid rgba(200, 16, 22, 0.14);
}

/* Console lower deck */
.v4-console-deck {
  /* filled by theater-thread.js */
}

.v4-console-panel {
  --vt-bg: #04050e;
  --vt-module-top: #0e0e22;
  --vt-module-bot: #080818;
  --vt-module-border: #222248;
  --vt-module-border-lit: #b80808;
  --vt-ink: #ffcccb;
  --vt-ink-dim: #ff8787;
  --vt-ink-faint: #f94f4f;
  --vt-accent: #c81016;
  --vt-accent-2: #c81016;
  --vt-accent-dim: #f43333;
  --vt-link: #c81016;
  --vt-btn-top: #16163a;
  --vt-btn-bot: #0c0c26;
  --vt-btn-border: #2e2e6a;
  --vt-radius: 4px;
  --vt-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 -1px 0 rgba(0, 0, 0, 0.5) inset;

  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--vt-ink);
  text-align: left;
  position: relative;
}

.v4-console-panel * { box-sizing: border-box; }

/* Tabs */
.v4-console-tabs {
  display: flex;
  border-bottom: 1px solid rgba(42, 42, 82, 0.6);
  padding: 0 16px;
  background: linear-gradient(#0e0e22, #080818);
}

.v4-console-tab {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-ink-dim);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin-bottom: -1px;
}

.v4-console-tab:hover { color: #fff; }

.v4-console-tab.is-active {
  color: var(--vt-accent-2);
  border-bottom-color: var(--vt-accent);
}

/* Panes */
.v4-console-pane {
  padding: clamp(14px, 2vw, 22px);
}

/* Thread list */
.v4-console-thread-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.v4-console-thread-item {
  padding: 14px;
  border: 1px solid var(--vt-module-border);
  border-radius: var(--vt-radius);
  background: linear-gradient(var(--vt-module-top), var(--vt-module-bot));
}

.v4-console-thread-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.v4-console-thread-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.v4-console-thread-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.v4-console-thread-excerpt {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vt-ink-dim);
}

.v4-console-thread-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.v4-console-thread-count {
  font-size: 11px;
  color: var(--vt-ink-faint);
  letter-spacing: 0.04em;
}

.v4-console-thread-video {
  font-size: 11px;
  color: var(--vt-accent-dim);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v4-console-thread-posts {
  margin-top: 10px;
  border-top: 1px solid rgba(42, 42, 82, 0.4);
  padding-top: 6px;
}

.v4-console-empty {
  color: var(--vt-ink-faint);
  font-size: 13px;
  padding: 12px 0;
}

/* Channel comments pane */
.v4-console-channel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(42, 42, 82, 0.5);
  margin-bottom: 12px;
}

.v4-console-channel-head strong {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.v4-console-channel-sub {
  font-size: 11px;
  color: var(--vt-ink-faint);
  letter-spacing: 0.06em;
}

/* Composer */
.v4-console-composer {
  margin-top: 16px;
  border-top: 1px solid rgba(42, 42, 82, 0.4);
  padding-top: 14px;
}

/* Reuse .v4-thread-post, .v4-thread-avatar, .v4-thread-btn styles from psyqo-theater-thread.css */

/* Featured Channels */
.v4-featured-channels {
  margin-top: clamp(28px, 4vw, 52px);
}

.v4-featured-channels-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.v4-featured-channels-label {
  font-family: var(--v4-display) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}

.v4-featured-channels-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.4) !important;
  -webkit-text-fill-color: rgba(200, 16, 22, 0.4) !important;
}

.v4-featured-channels-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1024px) {
  .v4-featured-channels-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .v4-featured-channels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.v4-channel-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 12px 14px;
  border: 1px solid rgba(200, 16, 22, 0.14);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
              rgba(8, 10, 22, 0.72);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.v4-channel-tile:hover {
  border-color: rgba(200, 16, 22, 0.52);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.42), 0 0 28px rgba(200, 16, 22, 0.18);
  transform: translateY(-3px);
}

.v4-channel-tile--promo {
  border-color: rgba(200, 16, 22, 0.28) !important;
  border-style: dashed !important;
  background: rgba(8, 10, 22, 0.4) !important;
}

.v4-channel-tile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--v4-display) !important;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: linear-gradient(135deg, #2a2c6a, #1a1c4e);
  border: 1px solid rgba(200, 16, 22, 0.3);
  box-shadow: 0 0 20px rgba(200, 16, 22, 0.22);
}

.v4-channel-tile-avatar--promo {
  background: transparent !important;
  border-color: rgba(200, 16, 22, 0.4) !important;
  border-style: dashed !important;
  color: rgba(200, 16, 22, 0.6) !important;
  -webkit-text-fill-color: rgba(200, 16, 22, 0.6) !important;
  box-shadow: none !important;
}

.v4-channel-tile-name {
  font-family: var(--v4-display) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #eceeff !important;
  -webkit-text-fill-color: #eceeff !important;
  line-height: 1.2;
}

.v4-channel-tile-subs {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(200, 16, 22, 0.5) !important;
  -webkit-text-fill-color: rgba(200, 16, 22, 0.5) !important;
}

.v4-channel-tile-visit {
  font-family: var(--v4-display) !important;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
  margin-top: 2px;
}

.v4-channel-tile-visit--promo {
  color: rgba(200, 16, 22, 0.5) !important;
  -webkit-text-fill-color: rgba(200, 16, 22, 0.5) !important;
  font-size: 9px;
}

/* ════════════════════════════════════════════════════════════════════════
   TASK 4: Console deck — reuse .v4-thread-* classes from thread CSS,
   plus console-specific overrides so it reads as the cinema lower deck.
   ════════════════════════════════════════════════════════════════════════ */

/* The .v4-thread-avatar, .v4-thread-post, .v4-thread-btn, .v4-thread-composer,
   .v4-thread-note, and .v4-thread-toast classes are already defined in
   psyqo-theater-thread.css and reused here intact. */

/* The v4-thread-cat-pill in the console */
.v4-console-panel .v4-thread-cat-pill {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c81016;
  border: 1px solid #2a2a52;
  border-radius: 3px;
  padding: 1px 5px;
}

/* Toast inherits from thread CSS */


/* ════════════════════════════════════════════════════════════════════════
   ITER R3 — TASK 5: BE PSYQO renders as SOLID periwinkle vinyl, occluded by
   the film's P logo via a luminance mask. The over-title film canvas keeps a
   screen blend for rim glow, but the title's own color must read as pure
   #c81016 periwinkle (brand accent / FAB color) at full opacity — no
   background-clip, no reduced opacity, no blend dependence on the title.
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-film-title--masked {
  /* Solid periwinkle — the exact brand accent used by the chat FAB. */
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
  opacity: 1 !important;
  /* Keep a subtle self-glow but no wash-out. */
  text-shadow:
    0 0 26px rgba(200, 16, 22, 0.35),
    0 0 90px rgba(200, 16, 22, 0.22);
}

/* "BE" stays white; only "PSYQO" carries the periwinkle. */
body.v4-film .v4-film-title--masked .v4-film-title-line,
body.v4-film .v4-film-title--masked .v4-film-title-line:first-child {
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
}

body.v4-film .v4-film-title--masked .v4-film-title-line:last-child {
  color: var(--v4-peri) !important;
  -webkit-text-fill-color: var(--v4-peri) !important;
}

/* Desktop editorial split: BE PSYQO sized for the left column. --hero-title-scale
   is set by fitHeroColumn() to shrink it just enough to never collide with the
   logo (guaranteed gutter) — usually 1 on wide screens. */
@media (min-width: 761px) {
  body.v4-film .v4-film-title {
    font-size: calc(clamp(84px, 10.5vw, 192px) * var(--hero-title-scale, 1));
    line-height: 0.9;
  }
  /* Nudge the left column so its centre lands on the logo's optical centre
     (shift measured by fitHeroColumn), not just the viewport middle. */
  body.v4-film .v4-film-title-block {
    transform: translateY(var(--hero-title-shift, 0px));
  }
}

/* Hard occlusion: cut the P-logo silhouette out of the title. Two mask
   layers — a full white field, minus the black P mark composited at the
   film logo's on-screen box — so only the logo region is removed and the
   rest of the letters stay fully opaque. Desktop-only (mobile title scale
   differs; left un-masked). Tune position/size against screenshots. */
/* The occlusion mask itself is baked and applied inline by positionTitleMask()
   in psyqo-v4-film.js (single canvas-generated alpha layer — a declarative
   multi-layer luminance mask cut the PNG's whole box, not the mark shape). */

/* ════════════════════════════════════════════════════════════════════════
   ITER R3 — TASK 3: Hero About beat (reworked from the stats panel).
   Sits on the left so the film subject (right-of-center) stays clear.
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-beat-mark {
  max-width: min(520px, 46vw);
}

/* Un-boxed: text sits directly on the film with only a soft feathered scrim
   for legibility (no border/card). */
body.v4-film .v4-beat-about-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.v4-film .v4-beat-mark {
  position: absolute;
}

body.v4-film .v4-beat-mark::before {
  content: "";
  position: absolute;
  inset: -40px -70px -40px -80px;
  z-index: -1;
  background: radial-gradient(115% 100% at 22% 45%, rgba(5, 6, 14, 0.74), rgba(5, 6, 14, 0.34) 48%, transparent 76%);
  pointer-events: none;
}

body.v4-film .v4-beat-about-eyebrow {
  margin: 0 0 12px;
  font-family: var(--v4-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c81016 !important;
  -webkit-text-fill-color: #c81016 !important;
}

body.v4-film .v4-beat-about-heading {
  margin: 0 0 16px;
  font-family: var(--v4-display) !important;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.12;
  font-weight: 700;
  color: #f2f3ff !important;
  -webkit-text-fill-color: #f2f3ff !important;
  text-shadow: 0 0 30px rgba(200, 16, 22, 0.3);
}

body.v4-film .v4-beat-about-para {
  margin: 0 0 11px;
  font-size: clamp(12px, 0.92vw, 13.5px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: rgba(255, 215, 214, 0.82) !important;
  -webkit-text-fill-color: rgba(255, 215, 214, 0.82) !important;
}

body.v4-film .v4-beat-about-para:last-of-type {
  margin-bottom: 16px;
}

body.v4-film .v4-beat-about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 15px;
  border-top: 1px solid rgba(200, 16, 22, 0.16);
}

body.v4-film .v4-beat-about-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.v4-film .v4-beat-about-stat strong {
  font-family: var(--v4-display) !important;
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1;
  color: #f2f3ff !important;
  -webkit-text-fill-color: #f2f3ff !important;
  letter-spacing: 0.01em;
}

body.v4-film .v4-beat-about-stat span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.72) !important;
  -webkit-text-fill-color: rgba(200, 16, 22, 0.72) !important;
}

@media (max-width: 760px) {
  body.v4-film .v4-beat-mark {
    max-width: none;
  }
  body.v4-film .v4-beat-about-panel {
    padding: 16px 16px 14px;
  }
  body.v4-film .v4-beat-about-stats {
    gap: 8px 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ITER R3 — TASK 6: Comments beat — 10 receipts in two columns, kept to the
   left of the film's controller subject (left ~55% of the viewport).
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-beat-converge {
  max-width: min(720px, 55vw);
}

body.v4-film .v4-beat-comments-panel {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  max-width: none;
}

body.v4-film .v4-beat-comments-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1 1 0;
  min-width: 0;
}

/* second column nudged down a touch for a masonry feel */
body.v4-film .v4-beat-comments-col--two {
  margin-top: 26px;
}

body.v4-film .v4-beat-converge .v4-hero-receipt {
  padding: 11px 12px 9px;
}

body.v4-film .v4-beat-converge .v4-hr-body {
  font-size: 11.5px;
  line-height: 1.4;
}

body.v4-film .v4-beat-comments-note {
  margin: 12px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 120, 120, 0.5) !important;
  -webkit-text-fill-color: rgba(255, 120, 120, 0.5) !important;
}

@media (max-width: 760px) {
  body.v4-film .v4-beat-converge {
    max-width: min(560px, 88vw);
  }
  body.v4-film .v4-beat-comments-panel {
    /* On mobile: single scrollable column so 10 cards don't overflow. */
    flex-direction: column;
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    gap: 8px;
  }
  body.v4-film .v4-beat-comments-col {
    gap: 8px;
  }
  body.v4-film .v4-beat-comments-col--two {
    margin-top: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ITER R3 — TASK 1: Footer horizon band (cyt.png). The wireframe-grid
   horizon is the focal image the page "lands" on. Full-width band behind the
   footer content, top-faded into the page background so it blends seamlessly;
   slight overscale masks the CRT frame edge. Links stay legible above it.
   ════════════════════════════════════════════════════════════════════════ */

.v4-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.v4-footer .v4-footer-horizon {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 0;
  width: 106%;
  height: clamp(300px, 42vw, 420px);
  z-index: 0;
  background-image: url("cyt.png");
  background-repeat: no-repeat;
  background-position: center 62%;
  background-size: cover;
  /* Fade the top of the band into the page background so there's no hard
     rectangle edge; also softens the CRT frame at the sides/bottom. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
  pointer-events: none;
}

/* Darkening scrim under the footer content so links/socials stay legible
   over the brightest part of the grid. */
.v4-footer .v4-footer-horizon::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(3, 4, 10, 0.55) 0%, rgba(3, 4, 10, 0.12) 40%, rgba(3, 4, 10, 0.30) 100%);
}

.v4-footer .container {
  position: relative;
  z-index: 1;
}

/* Give the footer breathing room so the horizon reads as a landing band. */
.v4-footer {
  padding-top: clamp(70px, 9vw, 120px);
}

/* ════════════════════════════════════════════════════════════════════════
   TALENT / ROSTER TIMELINE — interactive lane nodes (replaces the accordion
   + pipeline duplicate). 5 clickable nodes; exactly one glows/opens at a
   time. Each drops a small tab with the lane's roster. Driven by
   initTalentTimeline() in psyqo-v4-film.js.
   ════════════════════════════════════════════════════════════════════════ */

body.psyqo-v4 .v4-talent-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 34px;
}

/* Spine runs the full height at the node column. */
body.psyqo-v4 .v4-talent-timeline .pipeline-spine {
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(200, 16, 22,0.10), rgba(200, 16, 22,0.45), rgba(200, 16, 22,0.10)) !important;
}

body.psyqo-v4 .v4-talent-step {
  position: relative;
  padding: 0;
  border-radius: 14px;
  transition: background 0.3s ease;
}

body.psyqo-v4 .v4-talent-step.is-active {
  background: rgba(200, 16, 22, 0.05);
}

/* Node dot on the spine — hollow/dim by default, bright glow when active. */
body.psyqo-v4 .v4-talent-timeline .pipeline-node {
  position: absolute;
  /* Centre the node on the spine: spine center is at 10px from the timeline
     edge (left:9px + 1px half-width); the step's left edge sits at the 34px
     padding, so -31px + 7px half-width lands the node center at 10px too. */
  left: -31px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(200, 16, 22, 0.4) !important;
  background: rgba(12, 14, 30, 0.9) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
  z-index: 1;
}

body.psyqo-v4 .v4-talent-step.is-active .pipeline-node {
  border-color: rgba(255, 205, 204, 0.95) !important;
  background: radial-gradient(circle at 50% 50%, #e8353b, var(--v4-peri) 55%, rgba(200, 16, 22,0.4) 100%) !important;
  box-shadow: 0 0 10px var(--v4-peri), 0 0 24px rgba(200, 16, 22, 0.7), 0 0 44px rgba(200, 16, 22, 0.35) !important;
  animation: v4TalentPulse 2.4s ease-in-out infinite;
}

@keyframes v4TalentPulse {
  0%, 100% { box-shadow: 0 0 10px var(--v4-peri), 0 0 24px rgba(200, 16, 22,0.7), 0 0 44px rgba(200, 16, 22,0.32); }
  50% { box-shadow: 0 0 12px var(--v4-peri), 0 0 30px rgba(200, 16, 22,0.9), 0 0 60px rgba(200, 16, 22,0.45); }
}

/* Trigger row */
body.psyqo-v4 .v4-talent-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  border-radius: 14px;
  transition: background 0.25s ease;
}

body.psyqo-v4 .v4-talent-trigger:hover {
  background: rgba(200, 16, 22, 0.06);
}

body.psyqo-v4 .v4-talent-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

body.psyqo-v4 .v4-talent-head .step-num {
  font-family: var(--v4-mono, "Space Grotesk", monospace);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(200, 16, 22, 0.55);
  letter-spacing: 0.04em;
}

body.psyqo-v4 .v4-talent-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(233, 235, 250, 0.66);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

body.psyqo-v4 .v4-talent-step.is-active .v4-talent-name,
body.psyqo-v4 .v4-talent-trigger:hover .v4-talent-name {
  color: #f5f7ff;
}

body.psyqo-v4 .v4-talent-step.is-active .v4-talent-name {
  text-shadow: 0 0 24px rgba(200, 16, 22, 0.35);
}

body.psyqo-v4 .v4-talent-role {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(200, 16, 22, 0.6);
}

@media (max-width: 620px) {
  body.psyqo-v4 .v4-talent-role { display: none; }
}

/* Chevron */
body.psyqo-v4 .v4-talent-chevron {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}
body.psyqo-v4 .v4-talent-chevron::before,
body.psyqo-v4 .v4-talent-chevron::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(200, 16, 22, 0.7);
  transition: background 0.25s ease;
}
body.psyqo-v4 .v4-talent-chevron::before { left: 0; transform: rotate(45deg); }
body.psyqo-v4 .v4-talent-chevron::after { right: 0; transform: rotate(-45deg); }
body.psyqo-v4 .v4-talent-step.is-active .v4-talent-chevron { transform: rotate(180deg); }
body.psyqo-v4 .v4-talent-step.is-active .v4-talent-chevron::before,
body.psyqo-v4 .v4-talent-step.is-active .v4-talent-chevron::after { background: #f5f7ff; }

/* Collapsible panel (grid-rows trick for smooth height) */
body.psyqo-v4 .v4-talent-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
body.psyqo-v4 .v4-talent-step.is-active .v4-talent-panel {
  grid-template-rows: 1fr;
}
body.psyqo-v4 .v4-talent-panel-body {
  overflow: hidden;
  min-height: 0;
}

body.psyqo-v4 .v4-talent-desc {
  margin: 4px 18px 16px;
  max-width: 62ch;
  color: rgba(255, 204, 203, 0.82) !important;
  font-size: 0.98rem;
  line-height: 1.55;
}

body.psyqo-v4 .v4-talent-roster {
  margin: 0 18px 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(200, 16, 22, 0.14);
}

body.psyqo-v4 .v4-talent-roster-label {
  display: block;
  font-family: var(--v4-mono, "Space Grotesk", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 16, 22, 0.6);
  margin-bottom: 12px;
}

body.psyqo-v4 .v4-talent-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.psyqo-v4 .v4-talent-member {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  border: 1px solid rgba(200, 16, 22, 0.28);
  background: rgba(200, 16, 22, 0.06);
}

body.psyqo-v4 .v4-talent-member-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: #0b0c18;
  background: radial-gradient(circle at 40% 35%, #e8353b, var(--v4-peri) 70%);
}

body.psyqo-v4 .v4-talent-member-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #eef0ff;
}

/* Pending / open slot chips read as intentionally-empty roster slots. */
body.psyqo-v4 .v4-talent-member.is-pending {
  border-style: dashed;
  border-color: rgba(200, 16, 22, 0.24);
  background: transparent;
}
body.psyqo-v4 .v4-talent-member.is-pending .v4-talent-member-avatar {
  background: transparent;
  border: 1px dashed rgba(200, 16, 22, 0.4);
}
body.psyqo-v4 .v4-talent-member.is-pending .v4-talent-member-name {
  color: rgba(200, 16, 22, 0.5);
  font-weight: 500;
}

body.psyqo-v4 .v4-talent-roster-note {
  margin: 12px 0 0;
  font-family: var(--v4-mono, "Space Grotesk", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(200, 16, 22, 0.45) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PSYQO CENTER — folded shelves (Lessons archive + Featured Channels now
   live inside #theater as always-visible rows below the gated player).
   ════════════════════════════════════════════════════════════════════════ */

body.psyqo-v4 .v4-center-shelf {
  margin-top: clamp(28px, 4vw, 52px);
}

body.psyqo-v4 .v4-center-shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(16px, 2vw, 24px);
}

body.psyqo-v4 .v4-center-shelf-head h3 {
  margin: 8px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.01em;
  color: #f5f7ff;
}

/* Compact the ring when it sits in the shelf header. */
body.psyqo-v4 .v4-center-shelf-head .v4-lessons-ring {
  flex: 0 0 auto;
  width: clamp(72px, 8vw, 96px);
  height: clamp(72px, 8vw, 96px);
  margin: 0;
}

@media (max-width: 620px) {
  body.psyqo-v4 .v4-center-shelf-head {
    align-items: flex-start;
  }
  body.psyqo-v4 .v4-center-shelf-head .v4-lessons-ring {
    width: 64px;
    height: 64px;
  }
}

/* Featured channels: add breathing room now that it's a folded shelf. */
body.psyqo-v4 .v4-theater-section .v4-featured-channels {
  margin-top: clamp(28px, 4vw, 52px);
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT-BEAT STATS VISUALIZATION (psyqo-about-stats.js)
   Un-boxed WebGL "stat constellation": transparent Three.js particle canvas
   with crisp DOM number+label overlay. Blends into the dark film; no card.
   ════════════════════════════════════════════════════════════════════════ */

body.v4-film .v4-about-stats-viz {
  position: relative;
  width: 100%;
  height: clamp(128px, 15vh, 176px);
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(200, 16, 22, 0.16);
}

body.v4-film .v4-stats-viz-inner {
  position: absolute;
  inset: 14px 0 0 0;
}

/* The Three.js canvas host — purely decorative, never eats pointer events. */
body.v4-film .v4-stats-viz-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.v4-film .v4-stats-viz-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

/* DOM overlay: one cell per stat, centered on its constellation node. */
body.v4-film .v4-stats-viz-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.v4-film .v4-stats-viz-cell {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  text-align: center;
  will-change: transform, opacity;
}

body.v4-film .v4-stats-viz-value {
  font-family: var(--v4-display) !important;
  font-size: clamp(17px, 1.85vw, 25px);
  font-weight: 700;
  line-height: 1;
  color: #f4f5ff !important;
  -webkit-text-fill-color: #f4f5ff !important;
  letter-spacing: 0.01em;
  /* Periwinkle glow + a tight dark halo so the white numerals stay separated
     from the bright shattered-glass highlights behind them at any scrub opacity. */
  text-shadow:
    0 0 16px rgba(200, 16, 22, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 3px rgba(0, 0, 0, 0.92),
    0 0 8px rgba(0, 0, 0, 0.7);
  font-variant-numeric: tabular-nums;
}

body.v4-film .v4-stats-viz-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 181, 181, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 181, 181, 0.95) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.8);
}

/* Screen-reader-only readable stat summary. */
body.v4-film .v4-stats-viz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Non-WebGL fallback: simple legible row. */
body.v4-film .v4-stats-viz-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-start;
}
body.v4-film .v4-stats-viz-cell--static {
  position: static;
  transform: none;
  align-items: flex-start;
  text-align: left;
}

@media (max-width: 760px) {
  /* The About beat is content-heavy (heading + 3 paragraphs + stats); anchor
     it near the top so everything fits above the floating chat FAB instead of
     the stats row spilling under it at the bottom edge. */
  body.v4-film .v4-beat-mark {
    top: clamp(76px, 10vh, 98px) !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* On mobile the beat is full-width and tall, so keep the viz compact: a
     single-row constellation (set by JS via the .is-single-row class) that
     stays legible even when it lands near the viewport bottom. */
  body.v4-film .v4-about-stats-viz {
    height: 92px;
  }
  body.v4-film .v4-stats-viz-value {
    font-size: 19px;
  }
  body.v4-film .v4-stats-viz-label {
    font-size: 9px;
  }
}

/* ── Mobile-only structural fixes (batch) ─────────────────────────────────── */
@media (max-width: 760px) {
  /* THEATER → LESSONS: drop the cinema experience on mobile, keep only the
     Lessons shelf. Hide the intro header, the marquee toggle, the video
     console and the featured-channels grid, and force the folded dropdown open
     so the Lessons archive shows as a clean standalone section. */
  #theater .aero-section-header,
  #theater .v4-theater-marquee,
  #theater .v4-center-console,
  #theater .v4-featured-channels {
    display: none !important;
  }
  #theater .v4-theater-body {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #theater #lessons-archive {
    margin-top: 0;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Header/marquee are gone, so the Lessons shelf shouldn't sit behind the
     section's full top padding — and the big block-padding on stacked bottom
     sections left dead gaps (Lessons→Join, Shop→FAQ). Tighten them. */
  #theater.section {
    padding-top: clamp(24px, 5vw, 40px);
    padding-bottom: clamp(28px, 6vw, 44px);
  }
  #community.section {
    padding-top: clamp(28px, 6vw, 44px);
  }
  .aero-shop-section.section {
    padding-block: clamp(32px, 7vw, 52px);
  }

  /* SHOP: pull PREV/NEXT out of the bottom button grid and float them as
     left/right arrows inside the preview window; the garment is already
     selected by default so SHOP/CLOSE aren't needed on mobile. */
  .psyqo-shop3d-controls {
    display: contents;
  }
  .psyqo-shop3d [data-shop-open],
  .psyqo-shop3d [data-shop-close] {
    display: none !important;
  }
  .psyqo-shop3d [data-shop-prev],
  .psyqo-shop3d [data-shop-next] {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    z-index: 6;
    width: 46px;
    height: 46px;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0 !important;
    background: rgba(4, 6, 16, 0.72) !important;
    border: 1px solid rgba(200, 16, 22, 0.34) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .psyqo-shop3d [data-shop-prev] { left: 12px; }
  .psyqo-shop3d [data-shop-next] { right: 12px; }
  .psyqo-shop3d [data-shop-prev]::before,
  .psyqo-shop3d [data-shop-next]::before {
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    color: var(--shop-ink, #e7e9ff);
  }
  .psyqo-shop3d [data-shop-prev]::before { content: "\2039"; margin-right: 2px; }
  .psyqo-shop3d [data-shop-next]::before { content: "\203A"; margin-left: 2px; }

  /* SPACING near the bottom: the process ("how to join") step cards had a big
     empty icon panel that ballooned each card; shrink it and tighten gaps. */
  .process-thumb {
    min-height: 68px !important;
  }
  .process-thumb svg {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v4-film .v4-stats-viz-cell {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BORDER BEAM — a periwinkle light that travels the border of an element.
   Zero-JS: a small gradient blob rides `offset-path: rect()` around the box,
   masked to the border ring. Drop a <span class="v4-border-beam"> inside any
   position:relative host (add .v4-beam to make it relative + clip the ring).
   Tunables (set on the host): --beam-from, --beam-to, --beam-size (px),
   --beam-duration (s), --beam-delay (s), --beam-thickness (px).
   ════════════════════════════════════════════════════════════════════════ */
.v4-beam {
  position: relative;
}

.v4-border-beam {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--beam-thickness, 2.4px) solid transparent;
  /* Reveal only the border ring: full border-box mask minus a padding-box hole. */
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) border-box;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.v4-border-beam::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  width: calc(var(--beam-size, 90) * 1px);
  offset-anchor: 90% 50%;
  /* Path corner radius matches the host's border-radius so the beam hugs the
     corners (set --beam-radius per host); blob size is independent. */
  offset-path: rect(0 auto auto 0 round var(--beam-radius, 16px));
  background: linear-gradient(
    to left,
    var(--beam-head, #eef0ff),
    var(--beam-from, #c81016),
    var(--beam-to, #fc5e5e),
    transparent
  );
  /* Soft glow — the ring mask keeps it a thin band, this bleeds it slightly. */
  filter: drop-shadow(0 0 4px rgba(200, 16, 22, 0.9));
  animation: v4-border-beam calc(var(--beam-duration, 6) * 1s) infinite linear;
  animation-delay: calc(var(--beam-delay, 0) * -1s);
}

@keyframes v4-border-beam {
  to {
    offset-distance: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v4-border-beam::after {
    animation: none;
    opacity: 0.55;
    offset-distance: 12%;
  }
}