/* Home v3 (D-300): a dark studio and one film played by the scroll. Loaded only on Home, after site.css.
   The stage (the rendered frames on a canvas, the real screens laid on the glass) stays on screen while the chapters
   scroll past; home.js plays it. Without script, or with reduce motion, the stage is the hero still and every chapter
   shows its own screen instead (.proof). The Home is dark in both themes, like a product page; the sky of the other
   pages is not drawn here. */

/* ---- the studio: dark in both themes ---- */
body.studio {
  --ink: #F5F5F7; --ink-2: #A1A1A6; --link: #B8F03C;
  --surface: rgba(22, 22, 24, .82); --surface-2: rgba(22, 22, 24, .6); --line: rgba(255, 255, 255, .12);
  --card-ink: #F5F5F7; --card-muted: #A1A1A6;
  --head: 'Inter', 'Readex', sans-serif;
  background: #000; color: var(--ink); color-scheme: dark;
}
:root[dir="rtl"] body.studio { --head: 'Readex', sans-serif; }
/* the header floats over the film, so the stage is pinned from the very first pixel of scroll (the director's third
   phone test: in the flow it pushed the stage 71 px down, and the stage rode up with the thumb before it pinned) */
body.studio .bar-wrap { position: fixed; top: 0; left: 0; right: 0; }
/* the director's sixth phone test: page words and buttons showed through the floating bar. On Home the bar sits on a
   solid black band the width of the screen (blurred glass where the browser draws it cheaply, with a mouse), so nothing
   ever reads through it; the band slides away with the bar while you read down */
body.studio .bar-wrap { padding-block: 10px; background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
body.studio .bar { background: #161618; }
@supports (backdrop-filter: blur(8px)) { @media (pointer: fine) { body.studio .bar-wrap { background: rgba(0, 0, 0, .78); backdrop-filter: blur(18px) saturate(1.2); } } }
body.studio .sky, body.studio .bar .theme { display: none; } /* dark in both themes: no sky, no theme switch */
body.studio h1, body.studio h2, body.studio h3 { font-family: var(--head); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
:root[dir="rtl"] body.studio h1, :root[dir="rtl"] body.studio h2, :root[dir="rtl"] body.studio h3 { font-weight: 600; letter-spacing: 0; line-height: 1.25; }

/* ---- the track: a sticky stage with the chapters laid over it ---- */
.track { position: relative; overflow-x: clip; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; pointer-events: none; background: #000; contain: strict; }
.stage .poster img, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-aspect-ratio: 1/1) and (min-width: 821px) { .stage .poster img { object-position: right center; } :root[dir="rtl"] .stage .poster img { object-position: left center; } } /* the same crop as home.js */
.stage canvas { opacity: 0; transition: opacity .6s; }
.stage.live canvas { opacity: 1; }
/* the real screens laid on the film's dark glass in every frame (home.js places them on the render's screen corners):
   above the shade that keeps the words readable, with a faint glow, so they look like displays that are switched on */
.stage .ov { position: absolute; left: 0; top: 0; z-index: 3; margin: 0; padding: 0; border: 0; box-shadow: 0 0 14px 1px rgba(214, 236, 255, .16); max-width: none; transform-origin: 0 0; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; backface-visibility: hidden; }
.stage .ov-ph { border-radius: 8% / 3.9%; }   /* the phone's glass has round corners (ov-ph, not .ph: site.css's page-head .ph padded the picture down, 6 Nov) */
.stage .ov-pc { border-radius: .5% / .9%; }
html:not(.motion) .stage .ov, html.motion-failed .stage .ov { display: none; }
/* the loading moment (home.js, at most 2.5 s): a thin line breathes at the foot of the hero while the first chapter loads */
.stage::after { content: ''; position: absolute; left: 50%; bottom: 28px; z-index: 4; width: 72px; height: 2px; margin-left: -36px; border-radius: 2px;
  background: rgba(255, 255, 255, .7); opacity: 0; transform: scaleX(.2); transition: opacity .4s; }
html.film-wait .hint { opacity: 0; }
html.film-wait .stage::after { opacity: 1; animation: film-wait 1.1s ease-in-out infinite alternate; }
@keyframes film-wait { to { transform: scaleX(1); } }
.stage::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 36%, transparent 50%); }
:root[dir="rtl"] .stage::before { background: linear-gradient(270deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 36%, transparent 50%); }


/* ---- the chapters ---- */
.stops { position: relative; margin-top: -100svh; z-index: 1; }
.stop { position: relative; min-height: calc(var(--len, 100) * 1svh); }
.stop .copy { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; grid-template-columns: minmax(0, 36%); padding-block: 12vh 9vh; }
.stop .copy > * { grid-column: 1; }
.stop h2 { font-size: clamp(40px, 4.2vw, 76px); margin-top: 18px; }
:root[dir="rtl"] .stop h2 { font-size: clamp(34px, 3.9vw, 68px); }
.stop .copy > p[data-words] { margin-top: 22px; font-size: clamp(18px, 1.35vw, 22px); line-height: 1.55; color: var(--ink-2); max-width: 26em; }
.stop .pos { margin-top: 18px; font-size: 16px; color: var(--ink-2); max-width: 28em; }
.eyebrow { font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ''; display: inline-block; width: 18px; height: 2px; margin-inline-end: 10px; vertical-align: middle; background: #B8F03C; }
:root[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: 15px; }
.film-note { position: relative; z-index: 1; padding-block: 0 4vh; font-size: 14px; color: var(--ink-2); }

/* the hero: the first screen */
.s-hero h1 { font-size: clamp(48px, 6vw, 112px); max-width: 8em; }
:root[dir="rtl"] .s-hero h1 { font-size: clamp(40px, 4.8vw, 88px); max-width: 9em; }
.s-hero .sub { margin-top: 24px; max-width: 26em; font-size: clamp(18px, 1.4vw, 22px); color: var(--ink-2); }
.s-hero .acts { margin-top: 30px; }
.hint { position: absolute; inset-inline-start: 50%; bottom: 3vh; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); transition: opacity .35s; }
:root[dir="rtl"] .hint { transform: translateX(50%); letter-spacing: 0; }
.track.scrolled .hint { opacity: 0; }
.hint i { width: 1px; height: 38px; background: currentColor; transform-origin: top; animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* the Works-with line (made by the build from src\works-with.json) */
.works { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 15px; }
.works-label { color: var(--ink-2); }
.works .ai { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; }
.works .ai b { font-weight: 500; color: var(--ink); }
.works .ai small { font-size: 13px; color: var(--ink-2); }
.works .ai::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #B8F03C; }
.works .ai.soon::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }

/* the hero fits the first screen, so the scroll hint sits inside it (the v3 review) */
@media (min-aspect-ratio: 1/1) and (min-width: 821px) { .s-hero { height: 100svh; min-height: 0; } .s-hero .copy { padding-block: 10vh 12vh; } }
.works .ai, .works .ai small { line-height: 1.2; }
@media (min-width: 1100px) { .works { flex-wrap: nowrap; } }
/* 06: the Focus mode pill, in the chapter's words */
.pill-focus { display: inline-block; justify-self: start; margin-top: 18px; padding: 8px 14px; background: #FFB020; color: #15171A; font: 600 15px/1 var(--body); border-radius: 999px; }
/* the Answer chapter fits a 900 px-tall desktop */
@media (min-aspect-ratio: 1/1) and (min-width: 821px) and (max-height: 1000px) { .c2 .copy { padding-block: 9vh 5vh; } .c2 h2 { font-size: clamp(36px, 3.6vw, 64px); } .c2 .q .why { display: none; } .c2 .q { margin-top: 18px; } }

/* the demo question (02 Answer) */
.c2 .q { margin-top: 28px; max-width: 520px; }
.c2 .q .who { margin-top: 0; } /* site.css's page-level .who rule added 48 px of empty card above the demo's top row */
.c2 .q h3 { font-size: clamp(20px, 1.6vw, 28px); letter-spacing: -.02em; }

/* ---- the strip, the needs, the price beat ---- */
.strip .shots-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(180px, 15vw, 250px); gap: clamp(14px, 2vw, 28px); margin-top: 40px; padding-inline: max(20px, 4vw); scroll-padding-inline: max(20px, 4vw); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.strip .shots-row::-webkit-scrollbar { display: none; }
.strip .shots-row li { scroll-snap-align: start; }
.strip .phone { width: 100%; padding: 6px; background: #1C1D20; border-radius: 28px; }
.strip .phone img { border-radius: 22px; }
.strip li p { margin-top: 14px; font-size: 16px; color: var(--ink); }
.strip li p b { display: block; font: 600 12px/1 var(--body); letter-spacing: .12em; color: var(--ink-2); margin-bottom: 6px; }
.strip .demo-note { margin-top: 22px; }
.needs .reqs { margin-top: 30px; display: grid; gap: 12px; max-width: 640px; }
.needs .reqs li { padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; font-size: 18px; }
.needs .reqs li.later { color: var(--ink-2); border-style: dashed; }
.price-hero { display: grid; justify-items: start; padding-bottom: 0; }
.price-hero .free { font-size: clamp(56px, 8.4vw, 150px); margin-top: 14px; }
:root[dir="rtl"] .price-hero .free { font-size: clamp(44px, 6.4vw, 120px); }
.price-hero .after { margin-top: 22px; font-size: clamp(18px, 1.5vw, 24px); display: flex; flex-wrap: wrap; gap: 0 .4em; align-items: baseline; }
.price-hero .amount { font: 500 clamp(30px, 3vw, 52px)/1 var(--head); letter-spacing: -.02em; }
:root[dir="rtl"] .price-hero .amount { letter-spacing: 0; }
.price-hero .fine { margin-top: 16px; font-size: 16px; color: var(--ink-2); max-width: 36em; }

/* ---- the same page as stills: no script, script failed, or reduce motion ---- */
.proof { display: none; }
html:not(.motion) .stage canvas, html.motion-failed .stage canvas,
html:not(.motion) .hint, html.motion-failed .hint { display: none; }
html:not(.motion) .stage, html.motion-failed .stage { position: relative; height: min(100svh, 56.25vw); }
html:not(.motion) .stops, html.motion-failed .stops { margin-top: 0; }
html:not(.motion) .s-hero, html.motion-failed .s-hero { margin-top: max(-100svh, -56.25vw); min-height: min(100svh, 56.25vw); }
html:not(.motion) .stop:not(.s-hero), html.motion-failed .stop:not(.s-hero) { min-height: 0; padding-block: var(--sec) 0; }
html:not(.motion) .stop .copy, html.motion-failed .stop .copy { position: static; min-height: 0; padding-block: 0; }
html:not(.motion) .stop:not(.s-hero) .copy, html.motion-failed .stop:not(.s-hero) .copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 clamp(32px, 6vw, 120px); align-items: center; }
html:not(.motion) .s-hero .copy, html.motion-failed .s-hero .copy { min-height: min(100svh, 56.25vw); }
html:not(.motion) .proof, html.motion-failed .proof { display: block; grid-column: 2; grid-row: 1 / span 8; align-self: center; }
html:not(.motion) .proof .phone-still, html.motion-failed .proof .phone-still { width: min(100%, 300px); margin-inline: auto; padding: 6px; background: #1C1D20; border-radius: 28px; }
html:not(.motion) .pc-still img, html.motion-failed .pc-still img { width: 100%; border-radius: 10px; border: 6px solid #1C1D20; }

/* ---- phones and portrait tablets: the film's devices sit in the upper half, the words scroll below ---- */
@media (max-aspect-ratio: 1/1), (max-width: 820px) {
  .stage::before { background: linear-gradient(to top, rgba(0, 0, 0, .92) 0, rgba(0, 0, 0, .6) 38%, transparent 58%); }
  :root[dir="rtl"] .stage::before { background: linear-gradient(to top, rgba(0, 0, 0, .92) 0, rgba(0, 0, 0, .6) 38%, transparent 58%); }
  .stop { min-height: calc(var(--len, 100) * .9svh); display: flex; flex-direction: column; justify-content: flex-end; } /* the words sit at the chapter's foot, under the devices */
  .stop .copy { width: 100%; }
  /* the words scroll through like a page (not sticky), so each chapter is readable for its whole stretch */
  .stop .copy { position: static; min-height: 0; grid-template-columns: 1fr; align-content: end; padding-block: 52svh 6vh; }
  .s-hero .copy { padding-top: 50svh; min-height: 100svh; }
  .stop h2 { font-size: clamp(32px, 8.6vw, 52px); margin-top: 12px; }
  :root[dir="rtl"] .stop h2 { font-size: clamp(28px, 7.6vw, 46px); }
  .s-hero h1 { font-size: clamp(38px, 10.5vw, 62px); }
  :root[dir="rtl"] .s-hero h1 { font-size: clamp(32px, 9vw, 54px); }
  .stop .copy > p[data-words] { margin-top: 12px; font-size: 17px; }
  .c2 .copy { padding-top: 48svh; padding-bottom: 3vh; }
  .c2 .q { margin-top: 14px; padding: 14px; }
  .c2 .q .why, .c2 .q .who > span:not(.tag) { display: none; } /* the Demo tag and "this demo sends nothing" stay (honesty) */
  .c2 .q .who { margin-bottom: 6px; }
  .c2 .q .try { margin-top: 8px; font-size: 13px; }
  .c2 .q h3 { margin-top: 0; font-size: 18px; }
  .c2 .q .opts { margin-top: 10px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .c2 .q button { padding: 10px 12px; font-size: 14px; }
  .c2 .q button b { font-size: 14px; }
  body.studio .bar .menu-btn { margin-inline-start: auto; } /* the theme switch that pushed the row is hidden on Home */
  .hint { display: none; }
  /* the director's sixth phone test: the words scrolled up over the bright screens mid-move, so neither could be read.
     Each line fades out as it rises past the line under the devices (a scroll-driven animation the browser runs
     itself: opacity only, no script, nothing while still). At a chapter's place its words sit below that line. */
  @supports (animation-timeline: view()) {
    .stop .copy > * { animation: rise-out linear both; animation-timeline: view(block 46% 0%); animation-range: exit 0% exit 70%; }
  }
  html:not(.motion) .stage, html.motion-failed .stage { height: 100svh; }
  html:not(.motion) .s-hero, html.motion-failed .s-hero { margin-top: -100svh; min-height: 100svh; }
  html:not(.motion) .stop:not(.s-hero) .copy, html.motion-failed .stop:not(.s-hero) .copy { grid-template-columns: 1fr; }
  html:not(.motion) .proof, html.motion-failed .proof { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .price-hero .free { font-size: clamp(44px, 13vw, 80px); }
}
@media (prefers-reduced-motion: reduce) { .hint i { animation: none; } }
@keyframes rise-out { to { opacity: 0; } }