/* ==========================================================================
   oernu — the landing page as one reel.
   Black and white with one electric light (the brand's periwinkle), Newsreader for what is said, Inter for what is
   done, Geist Mono for time. The page is one film: a timeline down the left edge, scenes numbered on it, and the
   same picture travelling through the first four (landing.js drives it). No photographs: the two films were
   rendered in code for this page; the product is drawn live in HTML.
   Light and Dark from theme.js (html[data-theme]); System follows the device.
   ========================================================================== */

:root {
  --bg: #FFFFFF; --bg-2: #F4F5F7; --bg-3: #ECEEF1;
  --ink: #0E0F11; --ink-2: #2A2D33; --muted: #5E6570; --faint: #9AA1AB;
  --line: #E6E8EC; --line-2: #D3D7DD;
  --accent: #4C5FD5; --accent-rgb: 76, 95, 213; --hi: #8C9CF5;
  --glow: linear-gradient(100deg, #0E0F11 0%, #2F3A78 38%, #5468E0 70%, #7C8CF2 100%);
  --btn: #0E0F11; --btn-ink: #FFFFFF;
  --screen: #050506; --on-screen: #F4F5F7;
  --shadow: 0 40px 90px -50px rgba(14, 15, 17, .45);
  --f-d: "Newsreader", Georgia, serif; --f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-m: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --f-ar: "IBM Plex Sans Arabic", "Geeza Pro", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1); --gut: clamp(20px, 5vw, 72px); --nav-h: 76px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B0C0E; --bg-2: #131418; --bg-3: #1A1C21;
  --ink: #F4F5F7; --ink-2: #C9CDD4; --muted: #9AA1AB; --faint: #6C727C;
  --line: #22252B; --line-2: #30343B;
  --accent: #A9B6F2; --accent-rgb: 169, 182, 242; --hi: #A9B6F2;
  --glow: linear-gradient(100deg, #F4F5F7 0%, #C9D3FF 40%, #8C9CF5 78%, #A9B6F2 100%);
  --btn: #F4F5F7; --btn-ink: #0B0C0E;
  --shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
:root, :root[data-theme="dark"] { background-color: var(--bg) !important; }
.theme-switch, .theme-switch * { transition: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--btn); color: var(--btn-ink); border-radius: 8px; }
.skip:focus { top: 12px; }
.mono { font-family: var(--f-m); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
body[data-signed-in="0"] [data-in], body[data-signed-in="1"] [data-out] { display: none !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px;
  font: 500 14.5px/1 var(--f-ui); text-decoration: none; white-space: nowrap; border: 1px solid var(--line-2); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease); }
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn.pri:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn.pri:hover { color: #0B0C0E; }
.btn.pri.inv { background: #F4F5F7; border-color: #F4F5F7; color: #0B0C0E; }
.btn.pri.inv:hover { background: #A9B6F2; border-color: #A9B6F2; }
.btn.ghost.on-dark { color: #F4F5F7; border-color: rgba(244, 245, 247, .3); }
.btn.ghost.on-dark:hover { border-color: #F4F5F7; }
.btn.lg { height: 54px; padding: 0 28px; font-size: 15px; }
.btn.sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- nav: on the page it is the page's ink; over the film it turns to light ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--nav-h); transition: color .4s var(--ease), background .4s var(--ease); }
.nav::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  opacity: 0; transition: opacity .4s var(--ease); border-bottom: 1px solid var(--line); }
:root[data-theme="dark"] .nav::before { background: rgba(11, 12, 14, .74); }
html.scrolled .nav::before { opacity: 1; }
html.on-film .nav { color: #F4F5F7; }
html.on-film .nav::before { opacity: 0; }
.nav-in { position: relative; height: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.mark { display: inline-flex; align-items: center; gap: 10px; font: 400 27px/1 var(--f-d); letter-spacing: .005em; text-decoration: none; justify-self: start; }
.nav-links { display: flex; gap: 36px; }
.nav-links a, .nav-signin, .nav-user { font: 400 14px/1 var(--f-ui); text-decoration: none; opacity: .78; transition: opacity .2s; }
.nav-links a:hover, .nav-signin:hover, .nav-user:hover { opacity: 1; }
.nav-cta { justify-self: end; display: flex; align-items: center; gap: 22px; position: relative; }
.nav-user { display: inline-flex; align-items: center; gap: 6px; }
html.on-film .nav .btn.pri { background: #F4F5F7; border-color: #F4F5F7; color: #0B0C0E; }
.nav-sm { display: none; position: relative; }
.nav-sm summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; opacity: .7; cursor: pointer; }
.nav-sm summary::-webkit-details-marker { display: none; }
.nav-menu, .umenu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; padding: 8px; display: grid; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.nav-menu a, .umenu a, .umenu button { padding: 10px 12px; border-radius: 8px; font: 400 14px/1.2 var(--f-ui); text-decoration: none; text-align: left; }
.nav-menu a:hover, .umenu a:hover, .umenu button:hover { background: var(--bg-2); }
.umenu-h { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: grid; gap: 2px; }
.umenu-h span { font-size: 12.5px; color: var(--muted); }
/* the account menu at the studio menu's scale: the name on one line, short rows, Sign out set apart */
.umenu { min-width: 0; width: 240px; padding: 5px; border-radius: 12px; top: calc(100% + 8px); box-shadow: 0 12px 32px -14px rgba(20, 22, 26, .28), 0 1px 3px rgba(20, 22, 26, .06); }
.umenu-h { padding: 8px 10px 9px; margin-bottom: 4px; }
.umenu-h b, .umenu-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umenu-h b { font: 500 13.5px/1.35 var(--f-ui); }
.umenu a, .umenu button { padding: 7px 10px; border-radius: 7px; font: 400 13.5px/1.3 var(--f-ui); }
.umenu button { position: relative; margin-top: 5px; color: var(--muted); }
.umenu button::before { content: ""; position: absolute; left: -5px; right: -5px; top: -3px; border-top: 1px solid var(--line); }
.site-inside { position: fixed; z-index: 60; left: 50%; top: calc(var(--nav-h) + 8px); transform: translateX(-50%); display: flex; gap: 12px; align-items: center;
  padding: 8px 10px 8px 16px; border-radius: 999px; background: #0E0F11; color: #F4F5F7; font-size: 13px; box-shadow: var(--shadow); }
.site-inside button, .site-inside a { padding: 6px 12px; border-radius: 999px; background: #F4F5F7; color: #0E0F11; font-size: 12.5px; text-decoration: none; }
@media (max-width: 1080px) { .nav-links { display: none; } .nav-sm { display: block; } .nav-in { grid-template-columns: 1fr auto; } }
@media (max-width: 560px) { :root { --nav-h: 64px; } .nav-signin, .nav-user { display: none; } .mark { font-size: 24px; } .nav-cta { gap: 12px; } }

/* ---------- the page's timeline ---------- */
.rail { position: fixed; z-index: 40; left: 26px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 14px; padding-left: 16px;
  transition: color .4s var(--ease), opacity .4s var(--ease); color: var(--faint); }
.rail a { position: relative; display: flex; gap: 8px; align-items: baseline; font: 400 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  opacity: .55; transition: opacity .3s var(--ease), color .3s var(--ease); }
.rail a span { font-family: var(--f-m); letter-spacing: 0; }
.rail a::before { content: ""; position: absolute; left: -19px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-radius: 50%; background: currentColor; opacity: .5; }
.rail.off { opacity: 0; pointer-events: none; }
.rail a.on { opacity: 1; color: var(--ink); }
.rail a.on::before { background: var(--accent); opacity: 1; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }
.rail a:hover { opacity: 1; }
.rail-line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .35; }
.rail-line b { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(var(--pg, 0)); }
html.on-film .rail { color: rgba(244, 245, 247, .55); }
html.on-film .rail a.on { color: #F4F5F7; }
/* shown only where it has its own margin: the scenes' words and the sections after the reel start to the right of it */
@media (min-width: 1440px) and (min-height: 640px) { .rail { display: flex; } :root { --scene-x: 196px; } }
@media (min-width: 1440px) and (min-height: 640px) { .begin .begin-frame { width: calc(100% - 2 * var(--scene-x)); } }   /* the close keeps clear of the timeline too */

/* ---------- the reel ---------- */
.reel { position: relative; height: 620vh; }
.reel-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--nav-h) + clamp(28px, 7vh, 88px)); padding: 0 var(--gut); text-align: center; will-change: transform, opacity; }
.eyebrow, .tc { font: 500 12px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.tc { font-family: var(--f-m); letter-spacing: .08em; }
.hero h1 { margin-top: 26px; font: 300 clamp(48px, 7.4vw, 118px)/.98 var(--f-d); letter-spacing: -.035em; text-wrap: balance; }
.glow { display: inline-block; padding-bottom: .1em; margin-bottom: -.1em; background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lede { margin: 26px auto 0; max-width: 54ch; font-size: clamp(15.5px, 1.2vw, 17.5px); color: var(--muted); }
.ctas { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font: 400 12.5px/1 var(--f-ui); color: var(--faint); letter-spacing: .02em; }
/* the arrival: the words rise in, one after another */
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise 1.1s var(--ease) both; }
  .hero > :nth-child(2) { animation-delay: .1s; } .hero > :nth-child(3) { animation-delay: .25s; } .hero > :nth-child(4) { animation-delay: .38s; } .hero > :nth-child(5) { animation-delay: .5s; }
  .screen { animation: rise-screen 1.4s .35s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } }
@keyframes rise-screen { from { opacity: 0; translate: 0 60px; } }

.screen { position: absolute; z-index: 1; inset: 0; background: var(--screen); overflow: hidden; contain: layout paint;
  clip-path: inset(62% 8% -40% 8% round 22px); will-change: clip-path; }
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film.set { inset: auto; left: 0; top: 0; object-position: 50% 62%; }   /* the empty studio: the chair and table, the wall above for the headline */
.pic { inset: auto; left: 0; top: 0; opacity: 0; transform-origin: 50% 0; }   /* the push-in keeps the top edge: heads sit high in these frames */
.pic.wide { object-position: 62% 38%; }
.pic.tall { object-position: 50% 18%; }
@media (max-width: 760px) { .pic.wide { object-position: 66% 30%; } }
.scrim { position: absolute; inset: 0; pointer-events: none; opacity: var(--scrim, 0);
  background: linear-gradient(90deg, rgba(5, 5, 6, .82) 0%, rgba(5, 5, 6, .45) 38%, rgba(5, 5, 6, 0) 62%), linear-gradient(0deg, rgba(5, 5, 6, .6), rgba(5, 5, 6, 0) 40%); }
.over { position: absolute; left: 0; top: 0; color: var(--on-screen); will-change: transform; }
.chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; white-space: nowrap;
  background: rgba(5, 5, 6, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 12px/1 var(--f-ui); letter-spacing: .02em; opacity: 0; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: #FF4D5E; box-shadow: 0 0 0 4px rgba(255, 77, 94, .2); }
.chip.done i { background: var(--hi); box-shadow: 0 0 0 4px rgba(140, 156, 245, .22); }
@media (prefers-reduced-motion: no-preference) { .chip:not(.done) i { animation: blink 1.2s ease-in-out infinite; } }
@keyframes blink { 50% { opacity: .35; } }
.wave { position: absolute; left: 0; top: 0; height: 40px; color: rgba(244, 245, 247, .9); opacity: 0; }
.wave rect { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .wave.live rect { animation: lvl var(--d, .9s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); } }
@keyframes lvl { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.cap { position: absolute; left: 0; top: 0; text-align: center; opacity: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 24px rgba(0, 0, 0, .35); }
.c-listen, .c-export { font: 500 clamp(18px, 2vw, 30px)/1.3 var(--f-ui); letter-spacing: -.005em; }
.c-listen .w { opacity: .18; transition: opacity .35s var(--ease); }
.c-listen .w.on { opacity: 1; }
.c-trans small { display: block; margin-bottom: 10px; font: 400 clamp(13px, 1.1vw, 16px)/1.3 var(--f-ui); opacity: .62; }
.c-trans p { font: 500 clamp(19px, 2.1vw, 32px)/1.3 var(--f-ui); }
.c-trans p[lang="ar"] { font-family: var(--f-ar); }
.c-trans p .lg { display: block; margin-bottom: 10px; font: 500 11px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--hi); text-shadow: none; }
.c-create { font: 800 clamp(26px, 2.6vw, 40px)/1.05 var(--f-ui); letter-spacing: -.01em; text-transform: uppercase; }
.c-create span { display: inline-block; padding: 0 .08em; transition: color .2s, transform .25s var(--ease); }
.c-create span.on { color: var(--hi); transform: scale(1.08); }
.c-create { -webkit-text-stroke: .5px rgba(0, 0, 0, .25); }

/* the other formats, drawn from the same film */
.sat { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; opacity: 0; will-change: transform, opacity; }
.sat img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 16%; border-radius: 14px; background: var(--screen); box-shadow: var(--shadow); }
.sat.wd img { aspect-ratio: 16 / 9; object-position: 62% 40%; }
.sat.sq { width: clamp(150px, 15vw, 230px); }
.sat.wd { width: clamp(200px, 19vw, 300px); }
.sat-cap { position: absolute; left: 6%; right: 6%; text-align: center; color: #F4F5F7; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.sat-cap.k { top: 62%; font: 800 clamp(14px, 1.3vw, 20px)/1 var(--f-ui); }
.sat-cap.k b { color: var(--hi); }
.sat-cap.l { bottom: 26%; font: 500 clamp(10px, .8vw, 12.5px)/1.3 var(--f-ui); }
.sat figcaption, .fmt-tag { margin-top: 12px; font: 500 11px/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fmt-tag { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; opacity: 0; }
.exports { position: absolute; z-index: 2; left: 0; top: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 10px; }
.exports li { display: grid; gap: 6px; padding: 14px 16px; min-width: 132px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg);
  font: 400 12.5px/1.2 var(--f-ui); color: var(--muted); opacity: 0; box-shadow: 0 20px 40px -32px rgba(14, 15, 17, .4); }
.exports b { font: 500 13px/1 var(--f-m); letter-spacing: .06em; color: var(--ink); }

/* the scenes' words: left column over the film, then on the page */
.scenes { position: absolute; z-index: 3; left: var(--scene-x, var(--gut)); top: 50%; width: min(420px, 31vw); transform: translateY(-50%); }
.scenes li { position: absolute; left: 0; top: 0; transform: translateY(-50%); opacity: 0; visibility: hidden; will-change: transform, opacity; }
.scenes .n { font: 500 12px/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.scenes h2 { margin-top: 18px; font: 300 clamp(34px, 3.5vw, 56px)/1.02 var(--f-d); letter-spacing: -.025em; text-wrap: balance; }
.scenes p { margin-top: 18px; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 40ch; }
.scenes li.on-film { color: #F4F5F7; }
.scenes li.on-film .n { color: var(--hi); }
.scenes li.on-film p { color: rgba(244, 245, 247, .74); }
.reel-count { position: absolute; z-index: 3; right: var(--gut); bottom: 36px; display: flex; align-items: center; gap: 12px; font: 400 12px/1 var(--f-m); color: var(--muted); opacity: 0; }
.reel-count i { position: relative; width: 120px; height: 1px; background: currentColor; opacity: .5; }
.reel-count b { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--rp, 0)); }
html.on-film .reel-count { color: rgba(244, 245, 247, .7); }

@media (max-width: 760px) {
  .reel { height: 560vh; }
  .hero { top: calc(var(--nav-h) + 28px); }
  .hero h1 { font-size: clamp(42px, 12.5vw, 60px); }
  .scenes { left: 20px; right: 20px; top: auto; bottom: 28px; width: auto; transform: none; }
  .scenes li { top: auto; bottom: 0; transform: none; }
  .scenes h2 { font-size: 32px; margin-top: 12px; }
  .scenes p { font-size: 14.5px; margin-top: 12px; }
  .scrim { background: linear-gradient(0deg, rgba(5, 5, 6, .9) 0%, rgba(5, 5, 6, .5) 42%, rgba(5, 5, 6, 0) 70%); }
  .sat, .reel-count { display: none; }
  .exports { grid-template-columns: repeat(2, auto); gap: 8px; }
  .exports li { min-width: 0; padding: 10px 12px; }
}

/* ---------- scenes after the reel: one column of air, no boxes between them ---------- */
.scene { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(96px, 14vh, 168px) var(--gut) 0; }
.head { max-width: 760px; }
.head.center { margin: 0 auto; text-align: center; }
.head h2 { margin-top: 20px; font: 300 clamp(40px, 4.8vw, 76px)/1 var(--f-d); letter-spacing: -.03em; text-wrap: balance; }
.sub { margin-top: 22px; color: var(--muted); font-size: 16.5px; max-width: 58ch; }
.head.center .sub { margin-left: auto; margin-right: auto; }
.fine { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.fine.center { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}

/* 05 · try it */
.try-room { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.player { border-radius: 22px; overflow: hidden; background: var(--screen); color: #F4F5F7; box-shadow: var(--shadow); }
.pl-screen { position: relative; aspect-ratio: 16 / 9; }
.pl-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-caps { position: absolute; left: 6%; right: 6%; bottom: 9%; display: grid; gap: 6px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 18px rgba(0, 0, 0, .45); }
.pl-cap { font: 500 clamp(15px, 1.6vw, 22px)/1.3 var(--f-ui); }
.pl-cap.orig { font-size: clamp(12px, 1.1vw, 15px); opacity: .7; }
.pl-cap[lang="ar"] { font-family: var(--f-ar); }
.pl-big { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .3s, transform .3s var(--ease); }
.pl-big:hover { transform: scale(1.06); }
.player.playing .pl-big { opacity: 0; pointer-events: none; }
.i-pause { display: none; } .player.playing .i-play { display: none; } .player.playing .i-pause { display: block; }
.pl-end { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(5, 5, 6, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pl-end b { font: 300 clamp(24px, 2.6vw, 36px)/1.1 var(--f-d); }
.pl-end span { color: rgba(244, 245, 247, .7); font-size: 14.5px; }
.pl-end div { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pl-end[hidden] { display: none; }
.pl-bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 18px; background: #0B0C0E; }
.pl-bar button { display: grid; place-items: center; width: 30px; height: 30px; }
.pl-track { position: relative; flex: 1; height: 24px; cursor: pointer; }
.pl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, .18); border-radius: 2px; }
.pl-track i { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; background: #F4F5F7; border-radius: 2px; }
.pl-track b { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #F4F5F7; }
.pl-bar .mono { font-size: 12px; color: rgba(244, 245, 247, .66); }
.try-side { display: flex; flex-direction: column; min-height: 0; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg); }
.try-tools { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-2); }
.seg button { height: 34px; padding: 0 14px; border-radius: 999px; font: 500 13px/1 var(--f-ui); color: var(--muted); transition: background .25s, color .25s; }
.seg button.on, .seg button[aria-checked="true"] { background: var(--btn); color: var(--btn-ink); }
.sw { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.sw input { appearance: none; -webkit-appearance: none; position: relative; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background .25s; }
.sw input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.sw input:checked { background: var(--accent); }
.sw input:checked::after { transform: translateX(14px); }
.cues { flex: 1; min-height: 0; max-height: 420px; overflow: auto; margin-top: 16px; display: grid; align-content: start; gap: 4px; scrollbar-width: thin; }
.cues li { position: relative; padding: 12px 14px; border-radius: 12px; transition: background .4s var(--ease); }
.cues li.on { background: var(--bg-2); }
.cues li.on::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--accent); }
.cues .tc2 { font: 400 11.5px/1 var(--f-m); color: var(--faint); }
.cues li.on .tc2, .cues .tc2:hover { color: var(--accent); }
.cues .src { margin-top: 8px; font-size: 13px; color: var(--muted); }
.cues textarea { display: block; width: 100%; margin-top: 4px; padding: 4px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 8px; resize: none; overflow: hidden;
  background: none; color: var(--ink); font: 400 15px/1.45 var(--f-ui); field-sizing: content; }
.cues textarea[dir="rtl"] { font-family: var(--f-ar); }
.cues textarea:hover { background: var(--bg-2); }
.cues textarea:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.cues .edited { display: block; margin-top: 4px; font-size: 11.5px; color: var(--accent); }
.cues .edited[hidden] { display: none; }
@media (max-width: 960px) { .try-room { grid-template-columns: minmax(0, 1fr); } .cues { max-height: 320px; } }

/* 06 · studios: two equal halves */
.duo { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.studio { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 28px 32px; border-radius: 26px; border: 1px solid var(--line); background: var(--bg);
  transition: border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
.studio:hover { border-color: var(--line-2); transform: translateY(-4px); box-shadow: var(--shadow); }
.mini { position: relative; width: 100%; height: clamp(240px, 24vw, 320px); border-radius: 16px; overflow: hidden; background: var(--screen); color: #F4F5F7; display: grid; place-items: center; }
.mini-film { position: absolute; inset: -20%; background:
  radial-gradient(40% 30% at 30% 40%, rgba(169, 182, 242, .32), transparent 70%), radial-gradient(35% 40% at 75% 65%, rgba(244, 245, 247, .16), transparent 70%),
  radial-gradient(60% 50% at 50% 100%, rgba(76, 95, 213, .35), transparent 70%), #07080A; }
@media (prefers-reduced-motion: no-preference) { .mini-film { animation: drift 14s ease-in-out infinite alternate; } }
@keyframes drift { to { transform: translate(6%, -4%) rotate(6deg) scale(1.08); } }
.mini-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini.wide .mini-pic { object-position: 62% 36%; }
.mini.wide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 5, 6, .75), rgba(5, 5, 6, 0) 55%); }
.mini.wide > .mini-sub { z-index: 1; position: absolute; left: 8%; right: 8%; bottom: 12%; text-align: center; display: grid; justify-items: center; }
.mini-sub small { font: 500 10.5px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 245, 247, .55); margin-bottom: 10px; }
.mini-sub .mt { grid-area: 2 / 1; font: 500 clamp(15px, 1.4vw, 19px)/1.3 var(--f-ui); }
.mini-sub .mt[data-cycle="1"] { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mini-sub .mt { animation: cyc 7s var(--ease) infinite; } .mini-sub .mt[data-cycle="1"] { animation-delay: -3.5s; }
}
@keyframes cyc { 0%, 42% { opacity: 1; filter: none; } 50%, 92% { opacity: 0; filter: blur(6px); } 100% { opacity: 1; filter: none; } }
.mini-phone { position: relative; z-index: 1; height: 88%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.mini-phone .mini-pic { object-position: 50% 16%; }
.mini-cc { position: absolute; left: 6%; right: 6%; bottom: 20%; text-align: center; font: 800 clamp(12px, 1.05vw, 15px)/1.05 var(--f-ui); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.mini-cc span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .mini-cc span { animation: word 6s steps(1) infinite; }
  .mini-cc span:nth-child(1) { animation-delay: 0s; } .mini-cc span:nth-child(2) { animation-delay: 1s; } .mini-cc span:nth-child(3) { animation-delay: 2s; }
  .mini-cc span:nth-child(4) { animation-delay: 3s; } .mini-cc span:nth-child(5) { animation-delay: 4s; } .mini-cc span:nth-child(6) { animation-delay: 5s; }
}
@keyframes word { 0% { color: #A9B6F2; } 16.66%, 100% { color: #F4F5F7; } }
.kicker { margin-top: 28px; font: 500 12px/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.studio h3 { margin-top: 14px; font: 300 clamp(28px, 2.6vw, 40px)/1.05 var(--f-d); letter-spacing: -.02em; }
.ticks { margin: 22px 0 28px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 6px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }
.studio .btn { margin-top: auto; }
.who { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; font: 300 clamp(20px, 2vw, 28px)/1.2 var(--f-d); color: var(--muted); }
.who li { padding: 0 18px; }
.who li + li { border-left: 1px solid var(--line-2); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .who { font-size: 19px; } .who li { padding: 0 12px; } }

/* 07 · plans (markup from shell.js plansGrid) */
#plans { margin-top: 56px; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sk { height: 420px; border-radius: 22px; background: var(--bg-2); }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan.rec { background: var(--screen); border-color: var(--screen); color: #F4F5F7; }
:root[data-theme="dark"] .plan.rec { background: #F4F5F7; border-color: #F4F5F7; color: #0B0C0E; }
.plan .nm { display: flex; justify-content: space-between; align-items: center; font: 500 12px/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; }
.plan .badge { padding: 5px 9px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 10.5px/1 var(--f-ui); letter-spacing: .04em; text-transform: none; }
:root[data-theme="dark"] .plan .badge { color: #0B0C0E; }
:root[data-theme="dark"] .plan.rec .badge { background: #4C5FD5; color: #fff; }
.plan .badge.mute { background: var(--bg-2); color: var(--muted); }
.plan .pr { margin-top: 26px; font: 300 54px/1 var(--f-d); letter-spacing: -.03em; display: flex; align-items: baseline; gap: 8px; }
.plan .pr small { font: 400 12.5px/1 var(--f-ui); letter-spacing: 0; opacity: .6; }
.plan .per { margin-top: 12px; font-size: 13px; opacity: .7; }
.plan ul { margin: 20px 0 24px; display: grid; gap: 9px; }
.plan li { display: flex; gap: 10px; font-size: 14px; }
.plan li svg { flex: none; margin-top: 3px; color: var(--accent); }
.plan.rec li svg { color: #A9B6F2; }
:root[data-theme="dark"] .plan.rec li svg { color: #4C5FD5; }
.plan-foot { margin-top: auto; display: grid; gap: 10px; text-align: center; }
.plan-foot small { font-size: 12px; opacity: .6; }
.plan .btn.block { width: 100%; }
.plan.rec .btn.block { background: #F4F5F7; border-color: #F4F5F7; color: #0B0C0E; }
:root[data-theme="dark"] .plan.rec .btn.block { background: #0B0C0E; border-color: #0B0C0E; color: #F4F5F7; }
.plan .btn[disabled] { opacity: .5; cursor: default; }
.plan-dots { display: none; }
.calc { margin: 18px auto 0; max-width: 1040px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 22px 26px; border-radius: 22px; border: 1px solid var(--line); }
.calc[hidden] { display: none; }
.calc-q { display: grid; gap: 4px; } .calc-q b { font: 400 21px/1.1 var(--f-d); } .calc-q span { font-size: 13px; color: var(--muted); }
.calc-in { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; }
.calc-in input[type="range"] { width: 100%; accent-color: var(--accent); }
.calc-in output { font: 400 13px/1 var(--f-m); }
.calc-out { display: grid; gap: 4px; text-align: right; font-size: 13.5px; }
.calc-out .sc-need { color: var(--muted); font-size: 12.5px; }
.calc-out .sc-go { justify-self: end; margin-top: 6px; padding: 9px 16px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); text-decoration: none; font-size: 13px; }
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(4, minmax(250px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .plans > * { scroll-snap-align: start; }
  .calc { grid-template-columns: 1fr; } .calc-out { text-align: left; } .calc-out .sc-go { justify-self: start; }
}

/* questions */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; }
.faq .head h2 { margin-top: 20px; }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font: 400 17px/1.35 var(--f-ui); cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa .pm { position: relative; flex: none; width: 14px; height: 14px; margin-top: 4px; }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.qa .pm::after { transform: rotate(90deg); }
.qa details[open] .pm::after { transform: none; }
.qa details p { padding: 0 0 22px; max-width: 64ch; color: var(--muted); font-size: 15px; line-height: 1.7; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 20px; } }

/* 08 · begin: the frame the page opened on comes back, and you step in */
.begin { max-width: none; padding-left: 0; padding-right: 0; }
.begin-frame { position: relative; overflow: hidden; margin: 0 auto; width: calc(100% - 2 * var(--gut)); max-width: 1320px; min-height: min(86vh, 760px); border-radius: 28px;
  background: var(--screen); color: #F4F5F7; display: grid; place-items: center; text-align: center; transition: width 1s var(--ease), border-radius 1s var(--ease); }
.begin-frame .film { object-position: 50% 62%; transform: scale(1.06); transition: transform 2.4s var(--ease); }   /* the empty studio: camera and chair low, the wall free for the words */
.begin-frame.in .film { transform: none; }
.begin-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 28%, rgba(5, 5, 6, .55), rgba(5, 5, 6, .05) 75%); }
.begin-in { position: relative; z-index: 1; padding: clamp(56px, 10vh, 104px) 24px 64px; align-self: start; }   /* high on the wall, above the camera and the chair */
.begin-in .tc { color: #A9B6F2; }
.begin h2 { margin-top: 22px; font: 300 clamp(44px, 6.4vw, 100px)/.98 var(--f-d); letter-spacing: -.035em; }
.begin-in > p:not(.tc) { margin-top: 22px; color: rgba(244, 245, 247, .75); }
.begin .ctas { margin-top: 34px; }

/* footer */
.foot { margin-top: clamp(96px, 14vh, 160px); border-top: 1px solid var(--line); }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 56px var(--gut) 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot-brand p { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 34ch; }
.foot nav { display: grid; align-content: start; gap: 10px; font-size: 14px; }
.foot nav b { font: 500 11px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.foot nav a { text-decoration: none; color: var(--ink-2); } .foot nav a:hover { color: var(--accent); }
.theme { margin-top: 24px; }
.theme { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.theme button { height: 30px; padding: 0 12px; border-radius: 999px; font: 500 12px/1 var(--f-ui); color: var(--muted); }
.theme button[aria-checked="true"] { background: var(--bg-2); color: var(--ink); }
.foot-base { max-width: 1240px; margin: 0 auto; padding: 18px var(--gut) 40px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 12.5px; color: var(--faint); border-top: 1px solid var(--line); }
.demo-tag { font: 500 11px/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- reduced motion: a still page — the picture sits under the headline, the four scenes read as a list ---------- */
@media (prefers-reduced-motion: reduce) {
  .reel { height: auto; }
  .reel-pin { position: relative; height: auto; overflow: visible; padding-bottom: 40px; }
  .hero { position: relative; top: auto; padding-top: calc(var(--nav-h) + 48px); }
  .screen { position: relative; inset: auto; margin: 48px auto 0; width: calc(100% - 2 * var(--gut)); max-width: 1180px; aspect-ratio: 16 / 9; border-radius: 22px; clip-path: none; }
  .film.set { inset: 0; width: 100%; height: 100%; }
  .over, .sat, .fmt-tag, .exports, .reel-count, .rail { display: none !important; }
  .scenes { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: 1240px; margin: 72px auto 0; padding: 0 var(--gut); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
  .scenes li { position: relative; transform: none; opacity: 1; visibility: visible; color: var(--ink) !important; }
  .scenes li .n { color: var(--accent) !important; } .scenes li p { color: var(--muted) !important; }
  .scenes h2 { font-size: 30px; }
}