/* ============================================================
   CAMERA 06: marketing site
   Surveillance-console aesthetic: black, grain, scanlines,
   red REC / teal LIVE accents.
   ============================================================ */

:root{
  --font-logo:'Chakra Petch', 'Oswald', sans-serif;
  --font-display:'Oswald', 'Arial Narrow', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --bg:#050506;
  --bg-1:#08090b;
  --bg-2:#0e1013;
  --panel:#121519;
  --panel-2:#171b20;

  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.17);

  --text:#dadee1;
  --text-dim:#9aa2a8;
  --text-mute:#6a7278;

  --red:#e5372a;
  --red-soft:#ff5648;
  --teal:#4ec9c9;

  --maxw:1200px;
  --gutter:clamp(18px, 5vw, 64px);
  --radius:3px;

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.03;letter-spacing:.01em;text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
strong{color:#fff;font-weight:600}
em{font-style:normal;color:#fff;border-bottom:1px solid var(--line-strong)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-mute)}
.hl{color:var(--teal)}
.ok{color:var(--teal)}
.no{color:var(--red-soft)}
::selection{background:rgba(78,201,201,.35);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------- global film overlays ---------- */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}
  60%{transform:translate(-2%,4%)}80%{transform:translate(4%,-3%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.scanlines{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
.scanlines.soft{opacity:.5}

/* a faint band of light rolling down a monitor */
.scanbar{
  position:absolute;left:0;right:0;top:-20%;height:18%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.035) 50%, transparent);
  animation:scanbar 9s linear infinite;
}
@keyframes scanbar{to{transform:translateY(800%)}}

/* ---------- viewfinder corner brackets ---------- */
.vf{
  position:absolute;inset:9px;z-index:4;pointer-events:none;
  --vb:2px;--vl:18px;--vc:rgba(255,255,255,.55);
  background:
    linear-gradient(var(--vc),var(--vc)) top left/var(--vl) var(--vb) no-repeat,
    linear-gradient(var(--vc),var(--vc)) top left/var(--vb) var(--vl) no-repeat,
    linear-gradient(var(--vc),var(--vc)) top right/var(--vl) var(--vb) no-repeat,
    linear-gradient(var(--vc),var(--vc)) top right/var(--vb) var(--vl) no-repeat,
    linear-gradient(var(--vc),var(--vc)) bottom left/var(--vl) var(--vb) no-repeat,
    linear-gradient(var(--vc),var(--vc)) bottom left/var(--vb) var(--vl) no-repeat,
    linear-gradient(var(--vc),var(--vc)) bottom right/var(--vl) var(--vb) no-repeat,
    linear-gradient(var(--vc),var(--vc)) bottom right/var(--vb) var(--vl) no-repeat;
}

/* ---------- OSD (on-screen display) chrome ---------- */
.osd{
  position:absolute;z-index:5;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.82);
  text-transform:uppercase;display:flex;align-items:center;gap:8px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.osd.small{font-size:10px;letter-spacing:.1em}
.osd-tl{top:16px;left:18px}
.osd-tr{top:16px;right:18px}
.osd-bl{bottom:16px;left:18px}
.osd-br{bottom:16px;right:18px}
.osd-sep{opacity:.4}

.rec,.rec-dot{display:inline-flex;align-items:center}
.rec{gap:7px;color:var(--red-soft);font-weight:600}
.rec-dot,.rec .rec-dot{
  width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 8px var(--red);animation:blink 1.4s steps(1) infinite;margin-right:6px;
}
.rec .rec-dot{margin-right:0}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}

.tag-live,.feed-tag{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;color:#e7ebee;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:pulse 2s ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.signal{gap:3px}
.signal i{width:3px;height:8px;background:var(--teal);display:inline-block;opacity:.9;border-radius:1px}
.signal i:nth-child(3){height:11px}.signal i:nth-child(4){height:14px}
.signal i.lo{background:var(--text-mute);box-shadow:none;height:6px;animation:flick 3s steps(1) infinite}
@keyframes flick{0%,92%{opacity:.35}94%,100%{opacity:.9}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;font-weight:500;
  padding:13px 22px;border-radius:var(--radius);border:1px solid transparent;
  transition:transform .15s ease, background .2s, border-color .2s, color .2s, box-shadow .2s;
  text-transform:uppercase;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:#f2f4f5;color:#0a0a0b;border-color:#f2f4f5}
.btn-primary:hover{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 10px 30px -8px rgba(255,255,255,.25)}
.btn-ghost{background:rgba(5,5,6,.35);color:var(--text);border-color:var(--line-strong);backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.07)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:14px var(--gutter);
  background:linear-gradient(to bottom, rgba(5,5,6,.75), rgba(5,5,6,0));
  transition:background .3s, border-color .3s, padding .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(6,7,9,.92);border-bottom-color:var(--line);backdrop-filter:blur(10px);padding-top:11px;padding-bottom:11px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand-mark{
  position:relative;display:grid;place-items:center;
  width:34px;height:34px;border-radius:6px;background:#000;border:1px solid var(--line-strong);
  box-shadow:inset 0 0 12px rgba(0,0,0,.9);
}
.brand-06{font-family:var(--font-logo);font-weight:700;font-size:16px;letter-spacing:.02em;color:#fff}
.brand-rec{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);animation:blink 1.4s steps(1) infinite}
.brand-word{font-family:var(--font-logo);font-weight:600;letter-spacing:.24em;font-size:15px;color:#eef1f2}
.nav-links,.sub-links{display:flex;gap:26px}
.nav-links a,.sub-links a{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;color:var(--text-dim);transition:color .2s;position:relative;padding:4px 0}
.nav-links a:hover,.sub-links a:hover,.nav-links a.active,.sub-links a[aria-current="page"]{color:#fff}
.nav-links a::after,.sub-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--teal);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after,.sub-links a:hover::after,.sub-links a[aria-current="page"]::after{width:100%}
.nav-cta{padding:9px 16px;font-size:12px;white-space:nowrap}
.nav-links .nl-notify{display:none}
.nav-progress{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--red);box-shadow:0 0 6px var(--red);
  transform-origin:left;transform:scaleX(var(--p,0));opacity:.85;pointer-events:none}
.nav-menu{display:none;width:40px;height:38px;flex:none;border:1px solid var(--line-strong);border-radius:var(--radius);background:rgba(255,255,255,.03);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.nav-menu span{width:16px;height:1.5px;background:#fff;transition:transform .25s}
.nav.open .nav-menu span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav.open .nav-menu span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;text-align:center}
.hero-feed{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;
  filter:grayscale(.25) contrast(1.08) brightness(.62);animation:drift 24s ease-in-out infinite alternate}
.hero-bg.is-on{opacity:1}
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.1) translate(-1.2%,-.8%)}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(56% 52% at 50% 50%, rgba(4,4,6,.66), rgba(4,4,6,.28) 72%, transparent),
  linear-gradient(to top, rgba(4,4,6,.97) 0%, rgba(4,4,6,.25) 28%, rgba(4,4,6,.2) 70%, rgba(4,4,6,.66) 100%);}
.hero-noise{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:var(--noise) 0 0/160px #0c0d0f}
.hero.switching .hero-noise{animation:feed-drop .5s steps(1) both}
.hero.switching .hero-feed{animation:feed-jitter .5s steps(1)}
.hero.power .hero-feed{animation:power 1s cubic-bezier(.2,.8,.2,1)}
@keyframes power{0%{transform:scaleY(.004);filter:brightness(3)}35%{transform:scaleY(1);filter:brightness(1.8)}100%{transform:none;filter:none}}
.hero .scanlines{opacity:.35}
.hero-inner{position:relative;z-index:6;padding:128px var(--gutter) 150px;max-width:var(--maxw);width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:26px}

/* the logo lockup, matching the app icon and share card */
.logo{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;
  padding:.3em .8em .28em;font-family:var(--font-logo);font-size:clamp(76px,min(12.5vw,19svh),172px);
  color:#fff;line-height:1;font-weight:700;text-shadow:0 8px 50px rgba(0,0,0,.7);
}
.logo::before,.logo::after{content:"";position:absolute;top:0;bottom:0;width:.22em;border:2px solid rgba(255,255,255,.82)}
.logo::before{left:0;border-right:0}
.logo::after{right:0;border-left:0}
.logo-w1{font-size:.37em;font-weight:600;letter-spacing:.42em;margin-right:-.42em}
.logo-w2{position:relative;font-size:1em;font-weight:700;line-height:.92;letter-spacing:.01em}
.logo-w2::before,.logo-w2::after{content:attr(data-glitch);position:absolute;inset:0;opacity:0;pointer-events:none;text-shadow:none}
.logo-w2::before{color:var(--red-soft);animation:glitch-a 8s steps(1) infinite 3.2s}
.logo-w2::after{color:var(--teal);animation:glitch-b 8s steps(1) infinite 3.2s}
@keyframes glitch-a{0%,93%,100%{opacity:0;transform:none;clip-path:inset(0)}
  94%{opacity:.75;transform:translate(-5px,1px);clip-path:inset(12% 0 58% 0)}
  95.5%{opacity:.75;transform:translate(4px,-1px);clip-path:inset(62% 0 10% 0)}97%{opacity:0}}
@keyframes glitch-b{0%,93%,100%{opacity:0;transform:none;clip-path:inset(0)}
  94.5%{opacity:.7;transform:translate(5px,-1px);clip-path:inset(40% 0 30% 0)}
  96%{opacity:.7;transform:translate(-3px,2px);clip-path:inset(4% 0 80% 0)}97%{opacity:0}}
.logo-rec{display:flex;align-items:center;gap:.6em;margin-top:.5em;font-family:var(--font-mono);font-size:.12em;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.9)}
.logo-rec .rec-dot{width:.75em;height:.75em;margin:0}

.hero-sub{font-family:var(--font-display);font-weight:300;font-size:clamp(18px,2vw,24px);color:var(--text);margin-top:26px;letter-spacing:.04em}
.hero-term{font-family:var(--font-mono);font-size:clamp(13px,1.4vw,15px);color:var(--text-dim);margin-top:12px;letter-spacing:.02em;min-height:1.7em}
.hero-term .prompt{color:var(--teal);animation:blink 1s steps(1) infinite}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.hero-note{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);margin-top:18px}
.hero-vf{inset:84px 22px 22px;--vc:rgba(255,255,255,.4);--vl:32px;--vb:2px;z-index:2}
.hero .osd-tl,.hero .osd-tr{top:100px}
.hero .osd-tl{left:40px}.hero .osd-tr{right:40px}
.hero .osd-bl{bottom:40px;left:40px}.hero .osd-br{bottom:40px;right:40px}

/* channel selector */
.ch-select{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:8px}
.ch-label{display:none;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);text-shadow:0 1px 3px #000}
.ch-row{display:flex;gap:3px;padding:4px;background:rgba(5,5,6,.62);border:1px solid var(--line-strong);border-radius:4px;backdrop-filter:blur(6px)}
.ch{position:relative;appearance:none;background:transparent;border:1px solid transparent;border-radius:2px;cursor:pointer;
  color:var(--text-mute);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;line-height:1;padding:9px 11px 10px;
  transition:color .2s, background .2s, border-color .2s}
.ch:hover{color:#fff;background:rgba(255,255,255,.06)}
.ch[aria-pressed="true"]{color:#fff;border-color:rgba(78,201,201,.5);background:rgba(78,201,201,.1)}
.ch[aria-pressed="true"]::after{content:"";position:absolute;left:6px;right:6px;bottom:3px;height:1.5px;background:var(--teal);transform-origin:left;transform:scaleX(0)}
html.js .hero.auto .ch[aria-pressed="true"]::after{animation:chprog var(--dwell,7s) linear forwards}
@keyframes chprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- console log ticker ---------- */
.ticker{position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-1);
  padding:13px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker-track{display:flex;width:max-content}
html.js .ticker-track{animation:ticker 70s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{padding:0 26px;white-space:nowrap;position:relative}
.ticker-track span::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-2px;background:var(--line-strong);border-radius:50%}
.ticker b{font-weight:500}
@keyframes ticker{to{transform:translateX(-50%)}}

/* store chips under the hero buttons */
.hero-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px}
.stores{display:inline-flex;gap:8px}
.store{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 10px;border:1px solid var(--line-strong);border-radius:3px;
  color:var(--text);background:rgba(5,5,6,.45);backdrop-filter:blur(4px);transition:border-color .2s, color .2s}
.store:hover{border-color:var(--teal);color:#fff}

/* ---------- trailer ---------- */
.trailer{padding-bottom:clamp(36px,6vh,64px)}
.trailer .section-head{margin-bottom:clamp(26px,4vh,40px)}
.player{max-width:1040px;margin:0 auto;padding:8px;border:1px solid var(--line-strong);border-radius:6px;background:#060708;
  box-shadow:0 50px 100px -50px rgba(0,0,0,1), 0 0 0 6px rgba(255,255,255,.015)}
.player-bar{display:flex;align-items:center;gap:20px;padding:6px 8px 12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.pb-rec{display:inline-flex;align-items:center;color:var(--red-soft)}
.pb-rec .rec-dot{width:7px;height:7px}
.pb-site{margin-right:auto;color:var(--text-mute)}
.player-screen{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden}
.player-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.play-btn{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  border:0;cursor:pointer;color:#fff;background:radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,.12))}
.play-ring{position:relative;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;padding-left:4px;
  border:1.5px solid rgba(255,255,255,.85);background:rgba(5,5,6,.45);backdrop-filter:blur(4px);
  transition:transform .25s, background .25s, border-color .25s}
.play-ring::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.play-btn:hover .play-ring,.play-btn:focus-visible .play-ring{transform:scale(1.07);background:rgba(229,55,42,.9);border-color:var(--red)}
.play-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);text-shadow:0 1px 4px #000}
.player.playing .play-btn{display:none}
.player.playing .pb-rec .rec-dot{animation-duration:.9s}
html:not(.js) .play-btn{display:none}
/* two tapes, one player */
.tapes{display:flex;gap:8px;padding:2px 2px 10px}
.tape{display:flex;align-items:baseline;gap:10px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:4px;background:transparent;
  font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.tape:hover{color:#fff}
.tape:focus-visible{outline:2px solid var(--red-soft);outline-offset:2px}
.tape[aria-selected="true"]{color:#fff;border-color:var(--red);background:rgba(229,55,42,.12)}
.t-no{color:var(--red-soft)}
.t-len{color:var(--text-mute)}
html:not(.js) .tapes{display:none}

/* ---------- section shell ---------- */
.section{position:relative;padding:clamp(72px,11vh,136px) 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section-head{max-width:760px;margin:0 auto clamp(44px,6vh,72px);text-align:center}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:18px;display:inline-flex;align-items:center;gap:12px}
.eyebrow .idx{color:var(--text-mute);border:1px solid var(--line);padding:2px 7px;border-radius:2px;font-size:11px}
.h2{font-size:clamp(30px,5vw,54px);color:#fff;letter-spacing:.005em}
.two-col .h2{font-size:clamp(30px,3.3vw,42px)}
.h2 .ln{display:block}
.h2.big{font-size:clamp(34px,6vw,68px)}
.lead{font-size:clamp(17px,2vw,20px);color:var(--text-dim);margin-top:18px;line-height:1.6;font-weight:400}
.lead.center{margin-left:auto;margin-right:auto}
p + p{margin-top:16px}
.col-text p{color:var(--text-dim);margin-top:16px}

/* two column */
.two-col{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.two-col.reverse .col-media{order:-1}

/* pull quote */
.pull{margin-top:30px;padding:20px 24px;border-left:2px solid var(--red);background:rgba(229,55,42,.05);
  font-family:var(--font-display);font-weight:300;font-size:clamp(18px,2.2vw,23px);color:#eceff0;line-height:1.4;letter-spacing:.01em}
.pull .q-tag{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--red-soft);margin-bottom:12px;font-weight:400}

/* ---------- shot / framed image ---------- */
.shot{position:relative;overflow:hidden;border-radius:var(--radius);background:#000;border:1px solid var(--line);box-shadow:0 24px 60px -24px rgba(0,0,0,.9)}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18) contrast(1.04) brightness(.92)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:32px 18px 14px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--text-dim);
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent)}
.operator .shot{aspect-ratio:16/9}

/* CAM 01 live clips over the still (script.js adds .live once the feed
   starts, .on to the video(s) showing and .front to the newest, which
   dissolves in over the one underneath) */
.shot-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;
  filter:grayscale(.18) contrast(1.04) brightness(.92);transition:opacity .7s ease}
.shot-video.front{z-index:2}
.cam-live.live .shot-video.on{opacity:1}
.cam-live .live-only,.cam-live > figcaption{transition:opacity .5s ease}
.cam-live .live-only{opacity:0}
.cam-live.live .live-only{opacity:1}
.cam-live.live > figcaption{opacity:0}
.cam-live.glitching .feed-noise{animation:feed-drop .44s steps(1) both}
.cam-live.glitching .shot-video.on{animation:feed-jitter .44s steps(1)}
.shot .osd-tl{top:18px;left:26px}.shot .osd-tr{top:18px;right:26px}
.shot .osd-bl{bottom:18px;left:26px}.shot .osd-br{bottom:18px;right:26px}
.shot figcaption{padding-left:26px;padding-right:90px;padding-bottom:17px}

/* ---------- operator ---------- */
.operator .two-col{align-items:start}
.operator .col-media{position:sticky;top:104px;margin-top:6px}
.id-tag{display:grid;grid-template-columns:auto 1fr;gap:14px 24px;align-items:center;margin-top:10px;padding:16px 20px;
  background:linear-gradient(180deg,var(--panel),var(--bg-1));border:1px solid var(--line);border-left:2px solid var(--teal);border-radius:var(--radius)}
.id-head{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.id-head .pulse{width:6px;height:6px}
.id-tag b{display:block;font-family:var(--font-display);font-size:25px;font-weight:600;color:#fff;letter-spacing:.02em;line-height:1.15;margin-top:4px}
.id-role{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase}
.id-tag dl{display:flex;justify-content:flex-end;gap:22px;font-size:11px;letter-spacing:.06em}
.id-tag dl div{display:flex;flex-direction:column;gap:3px}
.id-tag dt{color:var(--text-mute);text-transform:uppercase;font-size:9.5px;letter-spacing:.16em}
.id-tag dd{color:#e7ebee;white-space:nowrap}

/* ---------- monitoring wall ---------- */
.wall{padding:8px;border:1px solid var(--line-strong);border-radius:6px;background:#060708;
  box-shadow:0 50px 100px -50px rgba(0,0,0,1), 0 0 0 6px rgba(255,255,255,.015)}
.wall-bar{display:flex;align-items:center;gap:20px;padding:6px 8px 12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.wb-rec{display:inline-flex;align-items:center;color:var(--red-soft)}
.wb-rec .rec-dot{width:7px;height:7px}
.wb-site{margin-right:auto;color:var(--text-mute)}
.wb-live{display:inline-flex;align-items:center;gap:7px;color:var(--teal)}
.wb-live .pulse{width:6px;height:6px}
.feed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.feed{aspect-ratio:16/9;border-radius:2px;cursor:default;box-shadow:none}
.feed:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.feed-tag{position:absolute;left:26px;bottom:18px;z-index:5;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.feed-tc{position:absolute;right:26px;top:17px;z-index:5;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.75);text-shadow:0 1px 4px #000}
.feed:not(:first-child) .feed-tag{left:28px;bottom:14px;font-size:10px}
.feed:not(:first-child) .feed-tc{right:28px;top:14px;font-size:10px}
.feed:not(:first-child) .vf{--vl:14px}
.feed:first-child .feed-tag{font-size:11.5px}
.feed img{transition:transform 1.6s ease, filter .5s}
.feed:hover img{transform:scale(1.05)}

/* unreliable feeds (driven by script.js) */
.feed-noise{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:var(--noise) 0 0/160px #0c0d0f}
.feed.glitching .feed-noise{animation:feed-drop .44s steps(1) both}
.feed.glitching img{animation:feed-jitter .44s steps(1)}
@keyframes feed-drop{0%{opacity:.8;background-position:0 0}20%{opacity:.55;background-position:50px 20px}
  40%{opacity:.95;background-position:-30px 70px}70%{opacity:.5;background-position:15px -40px}100%{opacity:0}}
@keyframes feed-jitter{0%{transform:translateX(-6px)}30%{transform:translateX(5px) skewX(-2deg)}60%{transform:translateY(3px)}100%{transform:none}}
.feed-motion{position:absolute;left:26px;top:16px;z-index:5;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-soft);
  text-shadow:0 1px 4px #000;opacity:0;transition:opacity .3s}
.feed:not(:first-child) .feed-motion{left:28px;top:13px;font-size:10px}
.feed-motion::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)}
.feed.motion .feed-motion{opacity:1;animation:blink 1.1s steps(1) infinite}

/* reveal strip under feeds */
.reveal-strip{display:flex;align-items:center;gap:24px;margin-top:48px;max-width:900px;margin-left:auto;margin-right:auto}
.reveal-strip p{flex:0 1 640px;font-family:var(--font-mono);font-size:14px;line-height:1.7;color:var(--text-dim);text-align:center}
.rs-line{flex:1 1 40px;height:1px;background:linear-gradient(to right,transparent,var(--line-strong),transparent)}

/* ---------- features: one console panel ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;counter-reset:feat}
.feature{background:var(--bg-1);padding:34px 30px 32px;transition:background .25s;position:relative;overflow:hidden;counter-increment:feat}
.feature::before{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--teal);transition:width .4s}
.feature::after{content:"F." counter(feat, decimal-leading-zero);position:absolute;top:24px;right:26px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--text-mute)}
.feature:hover{background:var(--bg-2)}
.feature:hover::before{width:100%}
.f-ico{width:44px;height:44px;border-radius:6px;display:grid;place-items:center;background:rgba(78,201,201,.08);border:1px solid rgba(78,201,201,.22);color:var(--teal);margin-bottom:20px}
.f-ico svg{width:23px;height:23px}
.feature h3{font-size:21px;color:#fff;letter-spacing:.01em;margin-bottom:10px;font-weight:500}
.feature p{color:var(--text-dim);font-size:15.5px;line-height:1.6}

/* ---------- atmosphere band ---------- */
.band{overflow:hidden;isolation:isolate;padding:clamp(90px,15vh,180px) 0}
.band-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:grayscale(.4) contrast(1.1) brightness(.5)}
.band-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(4,4,7,.95) 0%, rgba(4,4,7,.68) 55%, rgba(5,6,9,.4) 100%)}
.band .scanlines{opacity:.4}
.band .osd-tl{top:26px;left:var(--gutter)}.band .osd-tr{top:26px;right:var(--gutter)}
.band-inner{position:relative;z-index:5}
.band-inner > *{max-width:900px}
.band-inner .lead,.band-foot{max-width:640px}
.band .lead{color:var(--text)}
.band .h2{margin-top:6px}
.band-foot{margin-top:26px;font-size:13px;letter-spacing:.04em;color:var(--teal);opacity:.85;border-top:1px solid rgba(78,201,201,.2);padding-top:18px}

/* ---------- facility ---------- */
.map-shot{aspect-ratio:1064/1479;width:100%;max-width:460px;margin:0 auto;cursor:zoom-in}
.map-shot img{object-fit:contain;background:#0a0b0d}
.zoom-chip{position:absolute;top:18px;right:22px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:2px;
  background:rgba(5,5,6,.78);border:1px solid var(--line-strong);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  transition:border-color .2s, color .2s}
.map-shot:hover .zoom-chip,.map-shot:focus-visible .zoom-chip{border-color:var(--teal);color:#fff}
.fac-list{list-style:none;margin-top:28px;display:grid;gap:2px}
.fac-list li{display:flex;align-items:center;gap:16px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.06em;color:var(--text-dim);transition:color .2s, padding .2s}
.fac-list li:hover{color:#fff;padding-left:10px}
.fac-list li span{color:var(--teal);font-weight:600;min-width:26px}

/* ---------- rotation tracker ---------- */
.rota{max-width:820px;margin:0 auto clamp(30px,5vh,48px)}
.rota-meta{display:flex;justify-content:space-between;gap:16px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin-bottom:10px}
.rota-meta > span{display:inline-flex;align-items:center}
.rota-meta .rec-dot{width:7px;height:7px}
.rota-cells{list-style:none;display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.rota-cells li{height:40px;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg-1);border-radius:2px;font-size:11px;color:var(--text-mute)}
.rota-cells li.now{border-color:rgba(78,201,201,.6);background:rgba(78,201,201,.13);color:#fff;box-shadow:0 0 18px -4px rgba(78,201,201,.5)}
.rota-cells li.end{border-color:rgba(229,55,42,.45);color:var(--red-soft);background:rgba(229,55,42,.05)}
html.js .rota.in .rota-cells li:not(.now):not(.end){animation:cell-scan .5s ease both}
.rota-cells li:nth-child(2){animation-delay:.3s!important}.rota-cells li:nth-child(3){animation-delay:.38s!important}
.rota-cells li:nth-child(4){animation-delay:.46s!important}.rota-cells li:nth-child(5){animation-delay:.54s!important}
.rota-cells li:nth-child(6){animation-delay:.62s!important}.rota-cells li:nth-child(7){animation-delay:.7s!important}
.rota-cells li:nth-child(8){animation-delay:.78s!important}.rota-cells li:nth-child(9){animation-delay:.86s!important}
@keyframes cell-scan{0%{background:var(--bg-1)}40%{background:rgba(255,255,255,.08);color:#fff}100%{background:var(--bg-1)}}

/* ---------- timeline ---------- */
.timeline{list-style:none;max-width:820px;margin:0 auto;position:relative;padding-left:0}
.timeline::before{content:"";position:absolute;left:86px;top:14px;bottom:14px;width:1px;background:linear-gradient(to bottom,transparent,var(--line-strong),var(--line-strong),transparent)}
.timeline li{position:relative;display:grid;grid-template-columns:60px 1fr;gap:46px;padding:22px 0}
.tl-num{font-family:var(--font-logo);font-weight:600;font-size:22px;color:var(--teal);letter-spacing:.04em;text-align:right;position:relative;line-height:1.3}
.tl-num.mid{color:var(--text-mute);letter-spacing:.1em}
.timeline li::after{content:"";position:absolute;left:82px;top:32px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--teal);box-shadow:0 0 0 4px var(--bg)}
.timeline li:last-child::after{background:var(--red);border-color:var(--red)}
.timeline li:last-child .tl-num{color:var(--red)}
.timeline h3{font-size:22px;color:#fff;font-weight:500;margin-bottom:6px}
.timeline p{color:var(--text-dim);font-size:15.5px}

/* ---------- gallery ---------- */
.gallery{padding:clamp(40px,6vh,70px) 0}
.gal-track{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.gal-track::-webkit-scrollbar{display:none}
.gal{aspect-ratio:16/9;cursor:zoom-in}
.gal img{transition:transform 1.2s ease}
.gal:hover img{transform:scale(1.04)}

/* ---------- chat / phone mock ---------- */
.chat .col-media{display:flex;justify-content:center;position:relative}
.chat .col-media::before{content:"";position:absolute;left:50%;top:45%;width:min(520px,110%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(78,201,201,.1), transparent);pointer-events:none}
.phone-wrap{position:relative;width:min(300px,84vw)}
.phone{
  position:relative;width:100%;aspect-ratio:300/612;
  background:#000;border:11px solid #16181c;border-radius:46px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.07);
}
.phone-island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:88px;height:26px;background:#000;border-radius:14px;z-index:5}
.phone-screen{position:absolute;inset:0;border-radius:35px;overflow:hidden;background:#0a0c0f;display:flex;flex-direction:column}
.chat-top{background:linear-gradient(#14171b,#0f1215);border-bottom:1px solid rgba(255,255,255,.07);padding-top:8px;flex:0 0 auto}
.chat-statusbar{display:flex;justify-content:space-between;align-items:center;padding:4px 22px 2px;color:#e7ebee}
.sb-time{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.02em}
.sb-icons{display:flex;gap:6px;align-items:center;color:#e7ebee}
.chat-header{display:flex;align-items:center;gap:9px;padding:8px 15px 12px}
.chat-back{color:var(--teal);font-size:24px;line-height:1;margin-right:-3px}
.chat-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#2c3a44,#1b2429);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:15px;color:#cfe6e6;border:1px solid rgba(255,255,255,.1)}
.chat-who{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.chat-who b{font-size:14px;color:#fff;font-weight:600}
.chat-who small{font-family:var(--font-mono);font-size:9.5px;color:#8b939a;letter-spacing:.03em;display:flex;align-items:center;gap:5px}
.chat-who .on{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 6px var(--teal)}
.chat-call{color:var(--teal);display:flex}
.chat-body{flex:1;overflow-y:auto;padding:14px 12px 16px;display:flex;flex-direction:column;gap:7px;scrollbar-width:none;transition:opacity .5s ease}
.chat-body::-webkit-scrollbar{display:none}
.chat-body.fading{opacity:0}
.chat-daydiv{align-self:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:#5f676d;margin:2px 0 8px;text-transform:uppercase}
.msg{max-width:80%;padding:8px 12px;border-radius:16px;font-size:13.5px;line-height:1.36;word-wrap:break-word;animation:pop .3s cubic-bezier(.2,.8,.2,1) both}
.msg.elliot{align-self:flex-start;background:#22272d;color:#e7eaed;border-bottom-left-radius:5px}
.msg.you{align-self:flex-end;background:#2f6cae;color:#fff;border-bottom-right-radius:5px}
.msg.correction{font-size:12.5px;color:#aeb6bc;padding-top:6px;padding-bottom:6px}
.receipt{align-self:flex-end;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:#727a80;margin:-3px 3px 2px;text-transform:uppercase;animation:pop .3s ease both}
.msg.typing{display:flex;gap:4px;align-items:center;padding:11px 13px}
.msg.typing .td{width:6px;height:6px;border-radius:50%;background:#8b929a;animation:td 1.3s infinite ease-in-out}
.msg.typing .td:nth-child(2){animation-delay:.2s}
.msg.typing .td:nth-child(3){animation-delay:.4s}
@keyframes td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.phone-cap{text-align:center;margin-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);display:flex;align-items:center;justify-content:center;gap:8px}

/* ---------- cta ---------- */
.cta{background:radial-gradient(120% 120% at 50% 0%, var(--bg-2), var(--bg));border-top:1px solid var(--line);overflow:hidden;isolation:isolate;padding:clamp(96px,16vh,170px) 0}
.cta-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center 40%;
  filter:grayscale(.5) brightness(.3) contrast(1.1);opacity:.9;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 100%);mask-image:radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 100%)}
.cta-inner{text-align:center;max-width:820px;position:relative;z-index:4}
.cta-inner .lead{max-width:560px}
.cta-icon{width:84px;height:84px;border-radius:19px;margin:0 auto 28px;box-shadow:0 24px 50px -12px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.12)}
.notify-form{display:flex;gap:10px;max-width:560px;margin:30px auto 0;flex-wrap:wrap}
.notify-form input{flex:1;min-width:200px;background:rgba(18,21,25,.85);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:14px 16px;color:#fff;font-family:var(--font-mono);font-size:14px;letter-spacing:.02em}
.notify-form input::placeholder{color:var(--text-mute)}
.notify-form input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(78,201,201,.12)}
.form-status{min-height:1.6em;margin-top:14px;font-size:13px;letter-spacing:.03em;color:var(--teal)}
.cta-alt{margin-top:6px;font-family:var(--font-mono);font-size:13px;color:var(--text-mute);letter-spacing:.03em}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:54px 0 46px;background:var(--bg-1);position:relative}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:34px;align-items:start}
.foot-brand .brand-word{font-size:19px;display:block;margin-bottom:8px}
.foot-brand p{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.foot-links{display:flex;flex-direction:column;gap:11px}
.foot-links a{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);transition:color .2s}
.foot-links a:hover,.foot-links a[aria-current="page"]{color:var(--teal)}
.foot-meta{font-size:11.5px;line-height:1.8;letter-spacing:.03em}
.foot-meta p+p{margin-top:8px}
.foot-meta a{color:var(--text-dim);border-bottom:1px solid var(--line-strong);transition:color .2s, border-color .2s}
.foot-meta a:hover{color:var(--teal);border-color:var(--teal)}
.foot-brand .foot-studio{margin-top:10px;color:var(--text-dim)}

/* ---------- legal / support pages ---------- */
.doc-hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(64px + clamp(64px,10vh,110px)) 0 clamp(48px,7vh,76px);border-bottom:1px solid var(--line)}
.doc-hero-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 45%;filter:grayscale(.4) brightness(.5) contrast(1.1)}
.doc-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top, var(--bg) 0%, rgba(5,5,6,.72) 45%, rgba(5,5,6,.5) 100%)}
.doc-hero .scanlines{opacity:.35}
.doc-hero .vf{inset:78px 18px 16px;--vc:rgba(255,255,255,.3);--vl:26px}
.doc-hero .osd-tl{top:96px;left:38px}.doc-hero .osd-tr{top:96px;right:38px}
.doc-hero .wrap{max-width:1080px;position:relative;z-index:5}
.doc-hero h1{font-size:clamp(42px,6.6vw,76px);color:#fff}
.doc-hero .intro{max-width:640px;font-size:clamp(17px,2vw,19px);color:var(--text);margin-top:18px}
.doc-hero .updated{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-top:16px}

.doc{padding:clamp(44px,7vh,80px) 0 clamp(64px,10vh,110px)}
.doc-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(36px,6vw,84px);align-items:start;max-width:1080px}
.doc-side{position:sticky;top:92px;display:grid;gap:14px}
.doc-body{max-width:700px;min-width:0}
.doc h2{font-size:clamp(24px,3vw,30px);color:#fff;font-weight:500;margin-top:52px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:90px}
.doc h2 .n{display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--teal);margin-bottom:10px}
.doc-body > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h3{font-size:19px;color:#fff;font-weight:500;margin-top:28px}
.doc p,.doc li{color:var(--text-dim)}
.doc h2 + p,.doc h3 + p{margin-top:12px}
.doc ul{margin:14px 0 0 1.1em;display:grid;gap:8px}
.doc li::marker{color:var(--teal)}
.doc a{color:var(--teal);border-bottom:1px solid rgba(78,201,201,.4)}
.doc a:hover{border-color:var(--teal)}
.callout{margin-top:30px;padding:20px 22px;border:1px solid var(--line-strong);border-left:2px solid var(--teal);background:rgba(78,201,201,.04);border-radius:var(--radius)}
.doc-body > .callout:first-child{margin-top:0}
.callout p{color:var(--text)}
.callout .label,.side-card .label{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}

.side-card{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg-1));border-radius:var(--radius);padding:18px 18px 16px}
.side-card p{font-size:14.5px;line-height:1.6}
.side-card p + p{margin-top:10px}
.side-card .mail{display:block;font-family:var(--font-mono);font-size:13px;word-break:break-all;margin:2px 0 12px;border:0;color:#fff}
.side-card .mail:hover{color:var(--teal)}
.side-card .btn{width:100%;justify-content:center;margin-top:4px;border-bottom:1px solid #f2f4f5}
.doc .side-card .btn-primary{color:#0a0a0b}
.doc .side-card .btn-primary:hover{border-color:#fff}
.toc{list-style:none;display:grid;margin:0!important;gap:0!important}
.doc .toc a{display:flex;gap:12px;padding:8px 0;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;color:var(--text-dim);border:0;border-bottom:1px solid var(--line);transition:color .2s}
.doc .toc li:last-child a{border-bottom:0}
.toc a span{color:var(--text-mute);transition:color .2s}
.doc .toc a:hover,.doc .toc a.active{color:#fff}
.toc a:hover span,.toc a.active span{color:var(--teal)}
.facts{display:grid}
.facts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.facts dd{font-family:var(--font-mono);font-size:12.5px;color:#e7ebee;text-align:right}

.faq{margin-top:18px;border-top:1px solid var(--line);counter-reset:q}
.faq details{border-bottom:1px solid var(--line);counter-increment:q;transition:background .2s}
.faq details[open]{background:linear-gradient(90deg, rgba(78,201,201,.04), transparent 70%)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:19px 6px;
  font-family:var(--font-display);font-weight:500;font-size:19px;color:#fff;transition:color .2s}
.faq summary:hover{color:var(--teal)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:counter(q, decimal-leading-zero);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--text-mute);min-width:22px}
.faq details[open] summary::before{color:var(--teal)}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);color:var(--teal);font-size:20px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 6px 22px 44px}
.faq details > div p + p{margin-top:10px}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(2,2,3,.95);display:grid;place-items:center;padding:24px;cursor:zoom-out;backdrop-filter:blur(4px)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(94vw,1600px);max-height:88vh;object-fit:contain;border:1px solid var(--line-strong);box-shadow:0 0 80px rgba(0,0,0,.8)}
.lb-close{position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;font-family:var(--font-mono);opacity:.7;transition:opacity .2s}
.lb-close:hover{opacity:1}

/* ---------- arrival: the console establishing its link ---------- */
.boot{position:fixed;inset:0;z-index:200;background:#030304;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;
  transition:opacity .45s ease, visibility 0s .45s}
.boot.out{opacity:0;visibility:hidden}
.boot-lines{width:min(440px,86vw);display:grid;gap:10px}
.boot-head{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:8px;font-family:var(--font-logo);font-weight:600;font-size:15px;letter-spacing:.3em}
.boot-line{display:flex;align-items:baseline;gap:10px;opacity:0;transform:translateY(4px);transition:opacity .18s, transform .18s}
.boot-line.on{opacity:1;transform:none}
.boot-line i{flex:1;border-bottom:1px dotted var(--line-strong);transform:translateY(-4px)}
.boot-line b{font-weight:500;color:var(--text-mute)}
.boot-line.ok b{color:var(--teal)}
.boot-skip{position:absolute;bottom:30px;font-size:10px;letter-spacing:.22em;color:var(--text-mute)}

/* ---------- reveal animation (only hidden when JS is active) ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
html:not(.js) .nav-menu,html:not(.js) .ch-select{display:none!important}

/* ---------- it texts you: lock-screen mock ---------- */
.away .two-col{align-items:center}
.away .col-media{display:flex;justify-content:center;position:relative}
.away .col-media::before{content:"";position:absolute;left:50%;top:45%;width:min(520px,110%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(78,201,201,.08), transparent);pointer-events:none}
.away-list{list-style:none;margin-top:28px;display:grid;gap:2px}
.away-list li{display:flex;align-items:baseline;gap:16px;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px;letter-spacing:.04em;color:var(--text-dim)}
.away-list li span{color:var(--teal);font-weight:600;min-width:26px}

/* Sized in container units, so the whole screen scales as one piece at any
   phone width. Each px value is a fallback for browsers without them. */
.lock-screen{container-type:inline-size;isolation:isolate;background:#07080a;color:#fff;font-family:var(--font-body)}
.lock-screen::before{content:"";position:absolute;inset:-12%;z-index:-1;background:url("images/cam01-empty.jpg") 40% center/cover;
  filter:blur(7px) grayscale(.35) brightness(.42)}
.lock-screen::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom, rgba(4,5,8,.15), rgba(4,5,8,.55) 70%, rgba(4,5,8,.8))}
.lock-bar{display:flex;justify-content:flex-end;padding:13px 20px 0;padding:4.6cqw 7cqw 0}
.lock-bar .sb-icons{color:#f1f3f5}
.lock-padlock{display:block;margin:22px auto 0;margin:8.5cqw auto 0;width:14px;width:5cqw;height:auto;opacity:.9}
.lock-date{text-align:center;margin-top:6px;margin-top:2cqw;font-size:14px;font-size:5.1cqw;font-weight:500;color:rgba(255,255,255,.86);letter-spacing:.01em}
.lock-time{text-align:center;font-family:var(--font-display);font-weight:500;font-size:68px;font-size:24.5cqw;line-height:1;margin-top:0;
  color:rgba(236,241,245,.94);letter-spacing:.005em;font-variant-numeric:tabular-nums}
p.lock-time{margin-top:0}
.lock-notes{list-style:none;margin-top:auto;padding:0 9px;padding:0 3.2cqw;display:grid;gap:5px;gap:1.8cqw}
.note{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:8px;gap:2.8cqw;padding:9px 10px;padding:3.1cqw 3.4cqw;
  border-radius:15px;border-radius:5.4cqw;background:rgba(40,44,50,.62);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.note-icon{width:26px;width:9.4cqw;height:26px;height:9.4cqw;border-radius:6px;border-radius:2.3cqw;margin-top:1px}
.note-body{min-width:0;line-height:1.28}
.note-body b{display:block;font-size:12px;font-size:4.3cqw;font-weight:600;color:#fff}
.note-body span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;font-size:4.1cqw;color:rgba(255,255,255,.88)}
.note time{font-size:10px;font-size:3.5cqw;color:rgba(255,255,255,.55);white-space:nowrap;padding-top:1px}
.lock-foot{position:relative;display:flex;justify-content:space-between;align-items:center;padding:14px 20px 26px;padding:5cqw 7.5cqw 9.5cqw}
.lock-btn{width:36px;width:12.8cqw;height:36px;height:12.8cqw;border-radius:50%;display:grid;place-items:center;
  background:rgba(30,33,38,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f1f3f5}
.lock-btn svg{width:15px;width:5.4cqw;height:auto}
.lock-home{position:absolute;left:50%;bottom:7px;bottom:2.4cqw;transform:translateX(-50%);width:100px;width:36cqw;height:4px;height:1.5cqw;border-radius:9px;background:rgba(255,255,255,.8)}

/* The notifications land one at a time once the phone is on screen, oldest
   first, and the phone buzzes for the last. */
html.js .lock .note{opacity:0;transform:translateY(-10px) scale(.97);transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
html.js .lock.arrived .note{opacity:1;transform:none}
html.js .lock.arrived .note:nth-child(4){transition-delay:.2s}
html.js .lock.arrived .note:nth-child(3){transition-delay:.75s}
html.js .lock.arrived .note:nth-child(2){transition-delay:1.3s}
html.js .lock.arrived .note:nth-child(1){transition-delay:2.6s}
html.js .lock.arrived{animation:buzz .42s linear 2.6s}
@keyframes buzz{0%,100%{transform:none}15%{transform:translateX(-2px) rotate(-.4deg)}30%{transform:translateX(2px) rotate(.4deg)}
  45%{transform:translateX(-2px) rotate(-.3deg)}60%{transform:translateX(2px) rotate(.3deg)}75%{transform:translateX(-1px)}}

/* ---------- FAQ (home page) ---------- */
.faq-wrap{max-width:860px}
.faq-sec .faq{margin-top:0}
.faq-sec .faq p{color:var(--text-dim)}
.faq-sec .faq a{color:var(--teal);border-bottom:1px solid rgba(78,201,201,.4)}
.faq-sec .faq a:hover{border-color:var(--teal)}

/* ---------- operator rota sign-up + social ---------- */
.rota-eyebrow{margin-bottom:14px}
.rota-label{flex:1 1 100%;text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:-2px}
.social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.social a{display:inline-flex;align-items:center;padding:5px 10px;border:1px solid var(--line-strong);border-radius:3px;
  font-size:11px;letter-spacing:.08em;color:var(--text-dim);transition:color .2s, border-color .2s}
.social a:hover{color:#fff;border-color:var(--teal)}

/* ---------- 404: no signal ---------- */
.lost{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:grid;place-items:center;
  padding:150px var(--gutter) 110px;border-bottom:1px solid var(--line)}
.lost-static{position:absolute;inset:-160px;z-index:-3;background:var(--noise) 0 0/160px #0c0d0f;opacity:.26;animation:static 0.4s steps(4) infinite}
@keyframes static{0%{transform:translate(0,0)}25%{transform:translate(-37px,21px)}50%{transform:translate(18px,-44px)}75%{transform:translate(-52px,-9px)}100%{transform:translate(0,0)}}
.lost::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 45%, rgba(5,5,6,.25), rgba(5,5,6,.92) 75%)}
.lost .scanlines{opacity:.4}
.lost-roll{position:absolute;left:0;right:0;top:0;height:22%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.05), transparent);animation:roll 6s linear infinite}
@keyframes roll{from{transform:translateY(-100%)}to{transform:translateY(560%)}}
.lost .vf{inset:78px 18px 16px;--vc:rgba(255,255,255,.3);--vl:26px}
.lost .osd-tl{top:96px;left:38px}.lost .osd-tr{top:96px;right:38px}
.lost .osd-bl{bottom:34px;left:38px;color:var(--red-soft)}.lost .osd-br{bottom:34px;right:38px}
.lost-dot{width:7px;height:7px;border-radius:50%;background:var(--red-soft);box-shadow:0 0 8px var(--red);margin-right:8px;animation:blink 1.1s steps(1) infinite}
.lost .signal i.lo{animation:none}
.lost-inner{position:relative;z-index:5;text-align:center;max-width:640px;width:100%}
.lost-title{position:relative;display:inline-block;font-family:var(--font-logo);font-weight:700;font-size:clamp(46px,10vw,112px);
  letter-spacing:.08em;margin-right:-.08em;line-height:1;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.12);white-space:nowrap}
.lost-title::before,.lost-title::after{content:attr(data-glitch);position:absolute;inset:0;opacity:0;pointer-events:none;text-shadow:none}
.lost-title::before{color:var(--red-soft);animation:glitch-a 5s steps(1) infinite 1.2s}
.lost-title::after{color:var(--teal);animation:glitch-b 5s steps(1) infinite 1.2s}
.lost-lead{font-size:clamp(17px,2vw,20px);color:var(--text);margin-top:20px;line-height:1.55}
.lost-log{margin:30px auto 0;max-width:460px;text-align:left;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:rgba(8,9,11,.78);padding:4px 16px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lost-log div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line)}
.lost-log div:last-child{border-bottom:0}
.lost-log dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);white-space:nowrap}
.lost-log dd{font-size:12.5px;color:#e7ebee;text-align:right}
.lost-log dd.ok{color:var(--teal)}
.lost-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .id-tag{grid-template-columns:1fr}
  .id-tag dl{justify-content:flex-start}
}
@media (max-width:920px){
  .nav{gap:10px}
  .nav-menu{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:4px var(--gutter) 16px;
    background:rgba(6,7,9,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s, transform .2s, visibility 0s .2s}
  .nav.open{background:rgba(6,7,9,.97);border-bottom-color:var(--line)}
  .nav.open .nav-links{visibility:visible;opacity:1;transform:none;transition:opacity .2s, transform .2s}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:13.5px}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a::after{display:none}
  .nav-links .nl-notify{display:block;color:var(--teal)}
  /* stacked, every two-column section reads the same way: eyebrow and
     heading, then the picture, then the copy (the text column dissolves
     so the media can sit between its heading and its paragraphs) */
  .two-col,.operator .two-col{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .two-col .col-text{display:contents}
  .two-col .col-text > *{order:2}
  .two-col .col-text > .eyebrow,.two-col .col-text > .h2{order:0}
  .two-col .col-text > .eyebrow{align-self:flex-start}
  .two-col .col-media,.two-col.reverse .col-media{order:1;margin:30px 0 8px}
  .operator .col-media{position:static}
  .id-tag{grid-template-columns:auto 1fr}
  .id-tag dl{justify-content:flex-end}
  .feed-grid{grid-template-columns:1fr 1fr}
  .feed:first-child{grid-row:auto;aspect-ratio:16/9}
  .feature-grid{grid-template-columns:1fr 1fr}
  .gal-track{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-meta{grid-column:1 / -1}
  .doc-grid{grid-template-columns:1fr}
  .doc-side{position:static;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
}
@media (max-width:760px){
  .hero .osd-bl{display:none}
  .ch-label{display:block}
  .wb-site{display:none}
  .wb-live{margin-left:auto}
}
@media (max-width:600px){
  body{font-size:16px}
  .nav{padding:11px 18px}
  .nav-cta{padding:8px 12px;font-size:11px}
  .sub-links{gap:16px}
  .sub-links a{font-size:12px}
  .hero-vf{inset:72px 10px 10px;--vl:22px}
  .hero .osd-tl{top:86px;left:22px}
  .hero-inner{padding-top:120px;padding-bottom:138px}
  .kicker{font-size:10.5px;letter-spacing:.2em;margin-bottom:22px}
  .logo{padding:.3em .62em .26em;font-size:clamp(76px,24vw,96px)}
  .hero-sub{margin-top:22px}
  /* every opening line runs to two lines on a phone: hold the space so the
     buttons don't jump down halfway through the typing */
  .hero-term{min-height:3.3em}
  .ch-select{bottom:22px}
  .ch{padding:13px 12px 14px;min-width:44px}

  /* one steady rhythm down the page, and one left edge to read from */
  .section{padding:64px 0}
  .trailer{padding-bottom:24px}
  .band{padding:96px 0 88px}
  .cta{padding:84px 0 76px}
  .gallery{padding:0 0 64px}
  .section-head{text-align:left;margin-bottom:34px}
  .section-head .lead.center{margin-left:0}
  .h2,.two-col .h2{font-size:clamp(28px,8vw,32px)}
  .h2.big{font-size:clamp(32px,9vw,36px)}
  .lead{margin-top:14px}
  .reveal-strip{margin-top:32px}
  .reveal-strip p{text-align:left;font-size:13.5px;padding-left:16px;border-left:1px solid var(--line-strong)}
  .pull{margin-top:24px;padding:16px 18px}

  /* feature cards: icon beside the title rather than stacked above it */
  .feature{display:grid;grid-template-columns:40px 1fr;align-items:center;column-gap:14px;padding:22px 20px 24px}
  .f-ico{width:40px;height:40px;margin:0}
  .f-ico svg{width:21px;height:21px}
  .feature h3{margin:0;font-size:20px;padding-right:34px}
  .feature p{grid-column:1 / -1;margin-top:12px;font-size:15px}
  .feature::after{top:34px;right:20px}
  .fac-list{margin-top:22px}
  .fac-list li{padding:10px 2px}
  .ticker{font-size:10px;padding:11px 0}
  .hero-note{gap:8px;margin-top:16px}
  .store{padding:5px 9px}
  .player{padding:6px;margin:0 calc(var(--gutter) * -0.5)}
  .player-bar{gap:14px;padding:5px 6px 10px;font-size:9.5px}
  .pb-site{display:none}
  .pb-len{margin-left:auto}
  .tapes{gap:6px;padding:0 0 8px}
  .tape{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;padding:8px 10px;font-size:10px;letter-spacing:.12em}
  .t-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .play-ring{width:66px;height:66px}
  .play-ring svg{width:24px;height:24px}
  .play-label{display:none}
  .ticker-track span{padding:0 20px}
  .reveal-strip{gap:0}
  .rs-line{display:none}
  .gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 18px;scroll-padding:0 18px}
  .gal{flex:0 0 82%;scroll-snap-align:start}
  .notify-form .btn{flex:1 1 100%;justify-content:center}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .shot figcaption{padding-right:26px}
  .phone-wrap{width:min(262px,74vw)}
  .id-tag{grid-template-columns:1fr;padding:14px 16px}
  .id-tag dl{justify-content:space-between;gap:12px}
  .wall{padding:6px;margin:0 calc(var(--gutter) * -0.5)}
  .wall-bar{gap:14px;padding:5px 6px 10px;font-size:9.5px}
  .feed-grid{gap:6px}
  .feed:first-child .feed-tag{left:18px;bottom:13px;font-size:10px}
  .feed:first-child .feed-tc{right:18px;top:13px;font-size:10px}
  .feed:first-child .feed-motion{left:18px;top:12px}
  .feed:not(:first-child) .feed-room{display:none}
  .feed:not(:first-child) .feed-tag{left:19px;bottom:11px;font-size:9.5px;gap:5px}
  .feed:not(:first-child) .feed-tc{right:21px;top:11px;font-size:9px}
  .feed:not(:first-child) .feed-motion{left:19px;top:10px;font-size:9px}
  .feed:not(:first-child) .vf{inset:6px;--vl:10px;--vb:1.5px}
  .feature-grid{grid-template-columns:1fr}
  .feature{padding:28px 22px 26px}
  .rota-cells{gap:3px}
  .rota-cells li{height:32px;font-size:10px}
  .rota-meta{font-size:9.5px;letter-spacing:.12em}
  .timeline li{grid-template-columns:26px 1fr;gap:32px;padding:18px 0}
  .timeline::before{left:42px}
  .timeline li::after{left:38px;top:26px}
  .tl-num{font-size:18px}
  .timeline h3{font-size:21px}
  .timeline p{font-size:15px}
  .footer{padding:44px 0 40px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-links{flex-direction:row;flex-wrap:wrap;gap:10px 22px}
  .foot-brand p{text-wrap:balance}
  .osd-tr,.osd-br{display:none}
  .doc-hero .vf{inset:70px 10px 10px;--vl:20px}
  .doc-hero .osd-tl{top:84px;left:22px}
  .doc-hero{padding-top:150px}
  .faq summary{font-size:17.5px;gap:12px;padding:17px 2px}
  .away-list{margin-top:22px}
  .away-list li{padding:10px 2px;font-size:13px}
  .lost{padding:130px var(--gutter) 90px}
  .lost .vf{inset:70px 10px 10px;--vl:20px}
  .lost .osd-tl{top:84px;left:22px}
  .lost .osd-bl{bottom:22px;left:22px}
  .lost-log{padding:2px 14px}
  .lost-log div{flex-direction:column;align-items:flex-start;gap:3px}
  .lost-log dd{text-align:left}
  .lost-cta .btn{flex:1 1 100%;justify-content:center}
  .faq details > div{padding:0 2px 20px 34px}
}
@media (max-width:400px){
  .sub-links{gap:13px}
  .doc-page .nav .brand-word{display:none}
}
/* the narrowest phones can't fit the brand, the button and the menu on one
   row; the menu carries its own "Get notified" link instead */
@media (max-width:359px){
  .nav-cta{display:none}
}
/* touch screens: a tap shouldn't leave a hover zoom stuck on */
@media (hover:none){
  .feed:hover img,.gal:hover img{transform:none}
  .fac-list li:hover{padding-left:4px;color:var(--text-dim)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bg{transform:none}
  .scanbar{display:none}
  html.js .lock .note{opacity:1;transform:none;transition:none}
}