@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');
/* THE SCENE AI · production HUD layer */
:root{--lime:#c6ff00;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;--glow-cyan:0 0 0 1px rgba(0,229,255,.55),0 0 22px rgba(0,229,255,.35);--glow-pink:0 0 0 1px rgba(246,0,162,.6),0 0 26px rgba(246,0,162,.45)}

/* Grid + scan lines behind everything */
body{position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 85%)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.35;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.18) 2px 3px)}

/* Header: thin signal line */
.header{position:relative;border-bottom-color:transparent!important}
.header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--pink) 70%,transparent);opacity:.7;pointer-events:none}

/* Labels in mono, numbered like scenes */
.eyebrow,.kicker,.evidence-caption,.member-reviews-note,.ad-proof-note,.home-proof span,.choice-price span{font-family:var(--mono)!important;letter-spacing:.12em}
.eyebrow,.kicker{font-weight:500}
main{counter-reset:scene}
main>section{counter-increment:scene}
main>section>.kicker:first-child:before,main>section .section-heading .eyebrow:before{content:"SC." counter(scene,decimal-leading-zero) " // ";color:var(--lime);opacity:.9}

/* Status chips */
.status-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);border:1px solid rgba(198,255,0,.45);background:rgba(198,255,0,.06);padding:6px 10px;margin:0 0 14px;line-height:1}
.status-chip i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:scene-blink 1.6s steps(2,start) infinite}
.status-chip.rec{color:#ff4d4d;border-color:rgba(255,77,77,.5);background:rgba(255,77,77,.07)}
.status-chip.rec i{background:#ff3b3b;box-shadow:0 0 10px #ff3b3b}
@keyframes scene-blink{to{visibility:hidden}}

/* Viewfinder corners + REC readout injected by future.js */
.vf{position:absolute;inset:10px;pointer-events:none;z-index:4;
  background:
   linear-gradient(var(--cyan),var(--cyan)) top left/22px 2px,linear-gradient(var(--cyan),var(--cyan)) top left/2px 22px,
   linear-gradient(var(--cyan),var(--cyan)) top right/22px 2px,linear-gradient(var(--cyan),var(--cyan)) top right/2px 22px,
   linear-gradient(var(--cyan),var(--cyan)) bottom left/22px 2px,linear-gradient(var(--cyan),var(--cyan)) bottom left/2px 22px,
   linear-gradient(var(--cyan),var(--cyan)) bottom right/22px 2px,linear-gradient(var(--cyan),var(--cyan)) bottom right/2px 22px;
  background-repeat:no-repeat;opacity:.75;transition:inset .35s ease,opacity .35s ease}
:hover>.vf{inset:6px;opacity:1}
.vf-rec{position:absolute;right:18px;bottom:18px;z-index:5;pointer-events:none;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;color:#fff;text-shadow:0 1px 6px #000;display:flex;align-items:center;gap:7px}
.vf-rec b{width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 8px #ff3b3b;animation:scene-blink 1.6s steps(2,start) infinite}
.hud-readout{position:absolute;left:0;right:0;bottom:-30px;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(247,247,245,.55);text-transform:uppercase;pointer-events:none}
.hud-readout em{font-style:normal;color:var(--lime)}

/* Buttons: signal glow */
.button{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.button.primary:hover,.button.primary:focus-visible{box-shadow:var(--glow-pink);transform:translateY(-1px)}
.button.secondary:hover,.button.secondary:focus-visible{box-shadow:var(--glow-cyan);border-color:var(--cyan)!important;transform:translateY(-1px)}
.text-link:hover,.hero-watch-link:hover{color:var(--cyan);text-shadow:0 0 14px rgba(0,229,255,.6)}

/* Cards pick up a cool edge on hover */
.member-review,.member-film,.commercial-card,.learning-choice-card{transition:border-color .25s ease,box-shadow .25s ease}
.member-review:hover,.member-film:hover{border-color:rgba(0,229,255,.55);box-shadow:0 0 0 1px rgba(0,229,255,.15),0 10px 40px rgba(0,229,255,.08)}

/* Big stats read like instrument panels */
.home-proof strong{text-shadow:0 0 28px rgba(0,229,255,.25)}

@media (max-width:640px){.vf{inset:8px}.vf-rec{font-size:9px;right:14px;bottom:14px}.hud-readout{display:none}body:after{opacity:.22}}
@media (prefers-reduced-motion:reduce){.status-chip i,.vf-rec b{animation:none}.vf,.button{transition:none}}
.vf-wrap{position:relative;display:block}
.vf-wrap .vf-rec{top:16px;bottom:auto}
.hero-frame-main .vf-rec{top:20px;bottom:auto;right:26px}
.editorial-cover .vf-rec,.film-cover .vf-rec{top:16px;bottom:auto}