/* Cinematic layer for the main page. Loaded AFTER the page's own styles, so it only adds
   motion and the feature-card link — no layout is redefined here.
   Everything is additive: with JS off, or under prefers-reduced-motion, the page is simply
   the page. */

/* ── entrances ──────────────────────────────────────────────────────────── */
.cine{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1)}
.cine.in{opacity:1;transform:none}
.cine.c1{transition-delay:.06s}.cine.c2{transition-delay:.12s}.cine.c3{transition-delay:.18s}
.cine.c4{transition-delay:.24s}.cine.c5{transition-delay:.3s}.cine.c6{transition-delay:.36s}

/* The screens get a touch more travel and a scale — the product is the thing worth a beat. */
.shot.cine,.live.cine,.thumbs.cine{transform:translateY(38px) scale(.968)}
.shot.cine.in,.live.cine.in,.thumbs.cine.in{transform:none}

/* Table rows deal themselves in. */
#stack-body tr.cine{transform:translateY(14px)}
#stack-body tr.cine.in{transform:none}

/* ── hero on load ───────────────────────────────────────────────────────── */
.hero h1,.hero .sub,.hero .pill,.hero .btn-row,.hero .micro,.hero-card{
  animation:cineIn .95s cubic-bezier(.16,.84,.44,1) both}
.hero .sub{animation-delay:.1s}
.hero .btn-row{animation-delay:.2s}
.hero .micro{animation-delay:.28s}
.hero-card{animation-delay:.16s}
@keyframes cineIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ── living background ──────────────────────────────────────────────────── */
.orb{will-change:transform}
.orb:nth-of-type(1){animation:cineDrift1 26s ease-in-out infinite}
.orb:nth-of-type(2){animation:cineDrift2 32s ease-in-out infinite}
.orb:nth-of-type(3){animation:cineDrift3 38s ease-in-out infinite}
.orb:nth-of-type(4){animation:cineDrift2 44s ease-in-out infinite reverse}
@keyframes cineDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(74px,52px,0) scale(1.12)}}
@keyframes cineDrift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-62px,-44px,0) scale(1.09)}}
@keyframes cineDrift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(44px,-64px,0) scale(1.14)}}

/* Slow sheen over the gradient headline. */
.grad-text{background-size:260% 100%;animation:cineSheen 9s ease-in-out infinite}
@keyframes cineSheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* ── reading progress ───────────────────────────────────────────────────── */
.cine-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--accent-2,#12a150),var(--accent,#34d17a));
  box-shadow:0 0 12px var(--accent,#34d17a)}

/* ── feature cards become doors ─────────────────────────────────────────── */
.feat{position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.16,.84,.44,1),box-shadow .28s,border-color .28s}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow,0 30px 70px -26px rgba(15,50,33,.35));
  border-color:var(--accent-line,rgba(18,161,80,.34))}
.feat::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),var(--accent-soft,rgba(52,209,122,.14)),transparent 62%)}
.feat:hover::before{opacity:1}

/* "Read the full story" — the link to the feature's own page. */
.feat-more{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13px;font-weight:750;color:var(--accent-text,#0f8f4c)}
.feat-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.feat:hover .feat-more svg{transform:translateX(4px)}

/* Counters land on their number instead of just being there. */
.cine-count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .cine{opacity:1;transform:none;transition:none}
  .shot.cine,.live.cine,.thumbs.cine,#stack-body tr.cine{transform:none}
  .hero h1,.hero .sub,.hero .pill,.hero .btn-row,.hero .micro,.hero-card{animation:none}
  .orb{animation:none}
  .grad-text{animation:none}
  .feat:hover{transform:none}
}

/* ── two doors in the hero ────────────────────────────────────────────────
   The story and the business case, side by side. Cards rather than buttons: each one has to
   say enough that choosing is not a gamble, which two words on a pill cannot do. */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 18px;max-width:680px}
@media(max-width:720px){.doors{grid-template-columns:1fr}}
/* Solid enough to read as a card on the LIGHT hero — the first version borrowed its surface
   from the dark film page and came out as a faint outline nobody notices. */
.door{display:flex;flex-direction:column;gap:6px;padding:20px 20px 17px;border-radius:18px;
  background:rgba(255,255,255,.72);border:1px solid rgba(16,48,32,.16);
  box-shadow:0 14px 34px -20px rgba(15,50,33,.4);
  text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.16,.84,.44,1),border-color .35s,background .35s}
.door:hover{transform:translateY(-3px);background:rgba(255,255,255,.92);border-color:rgba(18,161,80,.5)}
.door-k{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#0f8f4c}
.door b{font-size:18px;font-weight:850;letter-spacing:-.4px;line-height:1.25}
.door-s{font-size:13px;line-height:1.55;opacity:.72}
.door-go{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:13px;font-weight:750;color:#0f8f4c}
.door-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.16,.84,.44,1)}
.door:hover .door-go svg{transform:translateX(4px)}
.door--case{background:linear-gradient(150deg,rgba(52,209,122,.2),rgba(255,255,255,.8));border-color:rgba(18,161,80,.34)}
/* Dark theme puts the glass back the other way round. */
:root[data-theme="dark"] .door{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
:root[data-theme="dark"] .door:hover{background:rgba(255,255,255,.11)}
:root[data-theme="dark"] .door-k,:root[data-theme="dark"] .door-go{color:#5ce49b}
:root[data-theme="dark"] .door--case{background:rgba(52,209,122,.13)}
.cta-row--after{margin-top:4px}

/* ── the hero as the first frame of the film ─────────────────────────────
   A room, one line, two doors. The price used to be here; it is one section lower now, because
   a number means nothing to somebody who has not been told what the thing is yet. */
/* Full frame. svh, not vh, so a phone browser bar does not cut the line in half. */
.film-hero{position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:center;
  overflow:hidden}
@supports not (height:100svh){.film-hero{min-height:100vh}}

/* The nav floats over the frame and only becomes a bar once the frame is behind you. */
/* Gone until you scroll, like the film. A menu of eight links on the first frame is a website
   announcing itself; the frame should get the screen to itself. Only the mark stays, because
   somebody has to know whose film this is. */
body.has-film-hero nav{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;
  -webkit-backdrop-filter:none;border-bottom-color:transparent;
  opacity:0;pointer-events:none;transform:translateY(-100%);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,.84,.44,1),background .45s ease,border-color .45s ease}
body.has-film-hero nav.solid{opacity:1;pointer-events:auto;transform:none;
  background:var(--nav-bg);backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);border-bottom-color:var(--glass-line)}
/* The mark, floating on the frame while the nav is away. */
.film-mark{position:fixed;top:24px;left:max(26px,4vw);z-index:70;display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:15.5px;letter-spacing:.2px;color:#eaf5ee;
  transition:opacity .35s ease}
.film-mark img{width:28px;height:28px;object-fit:contain}
body.has-film-hero nav.solid ~ .film-mark,.film-mark.gone{opacity:0;pointer-events:none}
.film-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.film-hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(5,13,9,.92) 6%,rgba(5,13,9,.76) 44%,rgba(5,13,9,.3) 100%)}
/* Centred, white, and the words arrive one at a time. Everything the old hero carried around the
   line — a kicker, a paragraph, a trial link — is gone: the film opens on a sentence and nothing
   else, and this page is now the same door into the same story. */
.film-hero-body{padding:0;max-width:1100px;margin:0 auto;text-align:center;color:#fff}
.film-hero-line{margin:0;font-size:clamp(36px,7vw,84px);line-height:1.02;letter-spacing:-2.4px;
  font-weight:850;color:#fff;text-wrap:balance}
.hw{display:inline-block;opacity:0;transform:translateY(26px);filter:blur(6px);
  animation:heroWord .9s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay:calc(.28s + var(--w) * .085s)}
@keyframes heroWord{to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.hw{animation:none;opacity:1;transform:none;filter:none}}
.film-hero .doors{margin:44px auto 0;max-width:620px;text-align:left;
  opacity:0;animation:heroWord 1s cubic-bezier(.16,.84,.44,1) 1.15s forwards}
.film-hero-trial{display:inline-block;margin-top:20px;font-size:13.5px;font-weight:750;
  color:rgba(234,245,238,.72);text-decoration:underline;text-underline-offset:4px}
.film-hero-trial:hover{color:#5ce49b}
/* On the frame the doors stop being cards. A white panel with a green button on a film still is
   a website pasted over a photograph; a hairline, a word and an arrow is the film's own grammar. */
.film-hero .door{background:transparent;border:0;border-top:1px solid rgba(244,247,244,.28);
  border-radius:0;box-shadow:none;color:#f4f7f4;padding:18px 6px 0;gap:5px;
  transition:border-color .4s ease,transform .4s cubic-bezier(.16,.84,.44,1)}
.film-hero .door:hover{background:transparent;border-top-color:var(--green,#34d17a);transform:translateY(-3px)}
.film-hero .door-k{font-size:10.5px;letter-spacing:2.6px;color:rgba(244,247,244,.52)}
.film-hero .door b{font-size:clamp(17px,1.9vw,21px);font-weight:800;letter-spacing:-.4px;color:#fff}
.film-hero .door-go{margin-top:6px;font-size:12.5px;font-weight:600;color:rgba(244,247,244,.6)}
.film-hero .door:hover .door-go{color:var(--green,#34d17a)}
.film-hero .door-go svg{width:14px;height:14px}
.film-hero .door--case{background:transparent;border-top-color:rgba(52,209,122,.55)}
/* The numbers, one section below the story. */
.hero-numbers{padding:44px 0 8px}
.hero-numbers-grid{display:grid;place-items:center}
.hero-numbers .price-card{width:min(720px,100%)}

/* Context above the figures. */
.hero-numbers .band-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--accent-2, #12a150);margin-bottom:10px}
.hero-numbers-head{margin:0;font-size:clamp(24px,3.4vw,40px);line-height:1.12;letter-spacing:-1.1px;
  font-weight:850;max-width:20ch}
.hero-numbers-sub{margin:16px 0 30px;max-width:62ch;font-size:15.5px;line-height:1.62;opacity:.76}
.hero-numbers{padding:70px 0 8px}
/* Shorter doors: no paragraph, so the card is a label and an arrow. */
.door b{font-size:19px}
.film-hero .door{gap:4px;padding:18px 20px 16px}

/* The launch button lives on the frame itself, opposite the mark, and fades out when the nav
   arrives carrying its own copy of the same button. */
.film-launch{position:fixed;top:19px;right:max(26px,4vw);z-index:70;display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:100px;font-size:13.5px;font-weight:800;
  color:#04140a;background:linear-gradient(140deg,#34d17a,#12a150);
  box-shadow:0 16px 38px -14px rgba(18,161,80,.8);
  transition:opacity .35s ease,transform .3s cubic-bezier(.16,.84,.44,1)}
.film-launch:hover{color:#04140a;transform:translateY(-2px)}
.film-launch svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.film-launch.gone{opacity:0;pointer-events:none}
@media(max-width:520px){.film-launch{padding:9px 15px;font-size:12.5px}}

/* The cut to the film: the page dims, the two lines hold, then the film takes over. */
.filmcut{position:fixed;inset:0;z-index:9999;background:#07070a;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;opacity:0;transition:opacity .5s ease}
.filmcut.on{opacity:1}
.filmcut__lines{color:#fff;font-size:clamp(24px,4vw,44px);line-height:1.18;letter-spacing:-.02em;
  max-width:820px;opacity:0;transform:translateY(10px);
  transition:opacity .8s ease .25s,transform .8s ease .25s}
.filmcut.on .filmcut__lines{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.filmcut,.filmcut__lines{transition:none}}

/* Three frames inside the immersive band: headset alone, headset together, the room. */
.imm-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 6px}
@media(max-width:760px){.imm-ways{grid-template-columns:1fr}}
.imm-way{margin:0;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14)}
.imm-way img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.16,.84,.44,1)}
.imm-way:hover img{transform:scale(1.04)}
.imm-way figcaption{padding:10px 13px 12px;font-size:12px;line-height:1.45;color:rgba(244,247,244,.72)}

/* ── the virtual obeya ────────────────────────────────────────────────────
   A video you press play on, not a loop behind text: it has a narrator and a hundred seconds of
   argument in it, and autoplaying that at somebody is how it gets scrolled past. */
.band--obeya{padding:64px 0 70px}
.obeya-frame{margin:30px 0 0;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -40px rgba(0,0,0,.75)}
.obeya-frame video{display:block;width:100%;aspect-ratio:16/9;background:#04140a}
/* No bar under the video. On the light page that translucent white strip read as a rendering
   fault rather than a caption — the sentence belongs above the frame, with the rest of the text. */
.obeya-frame figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.obeya-frame{position:relative;line-height:0}

.obeya-cap{margin:14px 0 0;font-size:12.5px;letter-spacing:.2px;opacity:.6}