/* ═══════════════════════════════════════════════════════════════════════════
   NEBULACLIP V3. Apple style.

   Measured from apple.com in October 2026 and copied, not guessed: the 44 px
   frosted bar, headlines at 80 px / 600 / -0.015em, section titles at 56 px /
   -0.005em, body at 17/25 px with -0.022em, 28 px card radius, #F5F5F7 for the
   second surface, #0071E3 buttons, #0066CC links (#2997FF on dark).

   Type is the system face: SF Pro on every Apple device, which is what makes
   it read as Apple; SF Pro itself may not be served from a website. Inter
   (OFL, 40 KB, optical sizes) stands in only where there is no SF, and is
   then the only font file the page asks for.

   Light by default, like apple.com. ?theme=dark gives the black "Pro" page.
   Video always sits on black, in both: films are seen in a dark room.

   Motion: interface transitions under 300 ms; scroll effects are CSS
   scroll-driven animations (transform and opacity, on the compositor), only
   where supported and never under reduced motion. One clip plays at a time.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter Web";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ── tokens ────────────────────────────────────────────────────────────── */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Inter Web", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --page:     #FFFFFF;
  --page-alt: #F5F5F7;
  --tile:     #FFFFFF;
  --ink:      #1D1D1F;
  --ink-2:    #6E6E73;
  --ink-3:    #6E6E73;
  --ink-big:  #86868B;   /* large type only: 3.6:1 is enough at 24 px and up */
  --line:     #D2D2D7;
  --link:     #0066CC;
  --blue:     #0071E3;
  --blue-hi:  #0077ED;
  --dim:      #8E8E93;   /* the statement before it lights up: still 3.3:1 */
  --nav-bg:   rgba(250, 250, 252, 0.8);
  --nav-ink:  rgba(0, 0, 0, 0.8);
  --glass:    rgba(210, 210, 215, 0.64);
  --glass-hi: rgba(223, 223, 227, 0.78);
  --glass-ink: rgba(0, 0, 0, 0.56);
  --wm-tail:  #6E6E73;
  --focus:    #0071E3;

  /* the dark room: video, the stage, the dark tiles, the closing card */
  --room:       #000000;
  --room-ink:   #F5F5F7;
  --room-ink-2: #86868B;
  --room-line:  rgba(255, 255, 255, 0.12);

  --yes: #30D158;
  --no:  #FF453A;

  --maxw: 1260px;
  --gut: clamp(20px, 4.2vw, 48px);
  --nav-h: 64px;
  --r-xl: 28px;
  --r-lg: 18px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --section: clamp(96px, 12vw, 168px);
}

[data-theme="dark"] {
  --page:     #000000;
  --page-alt: #000000;
  --tile:     #161617;
  --ink:      #F5F5F7;
  --ink-2:    #86868B;
  --ink-3:    #86868B;
  --ink-big:  #86868B;
  --line:     #424245;
  --link:     #2997FF;
  --dim:      #636366;
  --nav-bg:   rgba(22, 22, 23, 0.8);
  --nav-ink:  rgba(255, 255, 255, 0.8);
  --glass:    rgba(66, 66, 69, 0.72);
  --glass-hi: rgba(82, 82, 86, 0.82);
  --glass-ink: rgba(255, 255, 255, 0.8);
  --wm-tail:  #86868B;
  --focus:    #2997FF;
  color-scheme: dark;
}

/* ── base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--page);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
/* smooth only after load: a link like /#s9 must land at once, not glide
   down the whole page while the visitor watches */
@media (prefers-reduced-motion: no-preference) { html.is-ready { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--page);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
  font-synthesis: none;
  overflow-x: clip;
  padding-top: var(--nav-h);            /* the room the fixed bar used to take in the flow */
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
:where(ol[role="list"], ul[role="list"]) { list-style: none; padding: 0; }
code { font-family: var(--mono); font-size: 0.88em; letter-spacing: 0; }

::selection { background: rgba(0, 113, 227, 0.22); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gut); top: 6px; z-index: 100;
  padding: 8px 14px; border-radius: 980px; background: var(--blue); color: #fff;
  font-size: 14px; transform: translateY(-160%);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gut));
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ── type ──────────────────────────────────────────────────────────────── */

.section-title {
  font-size: clamp(2.125rem, 1.25rem + 2.9vw, 3.5rem);
  line-height: 1.07143;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.section-title--center { text-align: center; }
.section-lead {
  margin-top: 14px;
  max-width: 40em;
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.381;
  letter-spacing: 0.011em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.section-lead--center { margin-inline: auto; text-align: center; }

/* "Learn more ›": the blue text link with its chevron */
.more {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  color: var(--link);
  font-size: 17px;
}
.more::after { content: "›"; font-size: 1.15em; line-height: 0; transform: translateY(0.03em); }
.more--small { font-size: 14px; letter-spacing: -0.016em; }
@media (hover: hover) { .more:hover span { text-decoration: underline; text-underline-offset: 0.18em; } }

/* ── buttons: the pill ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 980px;
  font-size: 17px;
  line-height: 1.17648;
  font-weight: 400;
  letter-spacing: -0.022em;
  white-space: nowrap;
  user-select: none;
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--line { color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--xs { min-height: 28px; padding: 0 12px; font-size: 12px; letter-spacing: -0.01em; }
.btn--sm { min-height: 34px; padding: 0 16px; font-size: 14px; letter-spacing: -0.016em; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }
@media (hover: hover) {
  .btn--blue:hover { background: var(--blue-hi); }
  .btn--line:hover { background: var(--link); color: #fff; }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
}

/* the round frosted control (Liquid Glass): play, pause, previous, next */
.glass-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--glass);
  color: var(--glass-ink);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  transition: background-color 160ms var(--ease), transform 160ms var(--ease), opacity 160ms var(--ease);
}
.glass-btn svg { width: 36px; height: 36px; }
.glass-btn:active { transform: scale(0.94); }
.glass-btn[disabled] { opacity: 0.4; }
@media (hover: hover) { .glass-btn:hover { background: var(--glass-hi); } }

/* ── the button that lights up ──────────────────────────────────────────
   Replaces the cat. Every few seconds a light runs across the blue pill and
   a soft halo blooms around it; under the pointer it glows at once. Only
   opacity and background-position move, on a 44 px pill: no repaint of
   anything around it. Off under reduced motion. */

.btn--glow { position: relative; isolation: isolate; }
.btn--glow::before {
  content: "";
  position: absolute;
  inset: -16px -22px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(62% 70% at 50% 50%, rgba(41, 151, 255, 0.95), rgba(41, 151, 255, 0.35) 52%, rgba(0, 113, 227, 0) 76%);
  filter: blur(12px);
  opacity: 0;
  transition: opacity 280ms var(--ease);
  pointer-events: none;
}
/* a small pill gets a small halo: the 22 px reach of the big one carried the
   nav button's glow 4 px past the window edge and the page scrolled sideways */
.btn--sm.btn--glow::before { inset: -10px -12px; filter: blur(9px); }
.btn--glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.82) 50%, rgba(255, 255, 255, 0) 70%) no-repeat;
  background-size: 260% 100%;
  background-position: 165% 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--glow.is-idle { animation: btn-breathe 7.2s var(--ease) infinite; }
  .btn--glow.is-idle::before { animation: btn-halo 7.2s var(--ease) infinite; }
  .btn--glow.is-idle::after  { animation: btn-sweep 7.2s var(--ease) infinite; }
  .btn--glow.is-idle.is-late,
  .btn--glow.is-idle.is-late::before,
  .btn--glow.is-idle.is-late::after { animation-delay: -3.4s; }
  @keyframes btn-breathe { 0%, 70% { transform: none; } 80% { transform: scale(1.045); } 94%, 100% { transform: none; } }
  @keyframes btn-halo  { 0%, 70% { opacity: 0; } 80% { opacity: 1; } 94%, 100% { opacity: 0; } }
  @keyframes btn-sweep { 0%, 72% { background-position: 165% 0; } 86%, 100% { background-position: -65% 0; } }
  @keyframes btn-sweep-once { from { background-position: 165% 0; } to { background-position: -65% 0; } }
}
@media (hover: hover) {
  .btn--glow:hover { animation: none; }
  .btn--glow:hover::before { opacity: 1; animation: none; }
  .btn--glow:hover::after { animation: btn-sweep-once 760ms var(--ease) both; }
}
.btn--glow:focus-visible::before { opacity: 1; }

/* ── navigation: a floating capsule of glass ───────────────────────────── */

/* fixed, not sticky: with overflow-x: clip on the body, Safari on some iPhones let a sticky
   bar scroll away. A fixed bar stays put everywhere; the body keeps its room (padding-top). */
.nav {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 50;
  width: min(calc(100% - 20px), 1180px);
  height: 54px;
  margin: 0 auto;
}
.nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
/* a thin specular line along the top edge, the way glass catches light */
.nav__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}
.nav.is-stuck .nav__bar {
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .nav__bar {
  background: rgba(30, 30, 32, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .nav__bar::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%); }
[data-theme="dark"] .nav.is-stuck .nav__bar { background: rgba(30, 30, 32, 0.8); }

.nav__brand { position: relative; display: flex; align-items: center; gap: 8px; flex: none; color: var(--ink); border-radius: 8px; }
.nav__mark { width: 10px; height: 17px; border: 1.5px solid currentColor; border-radius: 3px; }
.wordmark { height: 14px; width: auto; color: var(--ink); overflow: visible; }
.wordmark--sm { height: 13px; }

.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.nav__links a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 200ms var(--ease);
}
.nav__links a.is-here, .nav__links a:hover { color: var(--ink); }
/* the pill that slides to the section you are in, or to the link under the pointer */
.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 36px;
  width: var(--pw, 0px);
  translate: var(--px, 0px) -50%;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.055);
  opacity: 0;
  transition: translate 320ms var(--ease-out), width 320ms var(--ease-out), opacity 200ms var(--ease);
  pointer-events: none;
}
[data-theme="dark"] .nav__pill { background: rgba(255, 255, 255, 0.1); }

.nav__right { position: relative; display: flex; align-items: center; gap: 10px; flex: none; }
.nav__brand + .nav__right { margin-left: auto; }

/* EN | DE as a real segmented switch */
.lang {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.055);
}
[data-theme="dark"] .lang { background: rgba(255, 255, 255, 0.1); }
.lang__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.05);
  transition: transform 300ms var(--ease-out);
}
[data-theme="dark"] .lang__thumb { background: #636366; }
.lang:has([data-lang-set="de"].is-on) .lang__thumb { transform: translateX(100%); }
.lang__btn {
  position: relative;
  z-index: 1;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  transition: color 200ms var(--ease);
}
.lang__btn.is-on { color: var(--ink); }

.nav__cta { min-height: 36px; }

/* "Log in": a quiet text link next to the button, like Apple's "Sign in" */
.nav__login {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.nav__login:hover { color: var(--ink); background: rgba(0, 0, 0, 0.055); }
[data-theme="dark"] .nav__login:hover { background: rgba(255, 255, 255, 0.1); }
.sheet__login { margin-top: 10px; }

.nav__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.055);
}
[data-theme="dark"] .nav__burger { background: rgba(255, 255, 255, 0.1); }
.nav__burger span {
  position: absolute; left: 12px; width: 16px; height: 1.5px; border-radius: 1px;
  background: var(--ink); transition: transform 260ms var(--ease-out);
}
.nav__burger span:first-child { top: 16.5px; }
.nav__burger span:last-child { top: 22px; }
.menu-open .nav__burger span:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-open .nav__burger span:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* the menu on a phone: a card of the same glass, under the capsule */
.sheet {
  position: fixed;
  top: 74px;
  left: 10px;
  right: 10px;
  z-index: 49;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 24px 60px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transform-origin: 50% 0;
  transition: opacity 220ms var(--ease), transform 300ms var(--ease-out);
}
[data-theme="dark"] .sheet { background: rgba(30, 30, 32, 0.9); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 60px rgba(0, 0, 0, 0.6); }
.sheet.is-open { opacity: 1; transform: none; }
.sheet__nav { display: flex; flex-direction: column; margin-bottom: 18px; }
.sheet__nav a {
  display: flex; align-items: center; min-height: 54px;
  font-size: 26px; font-weight: 600; letter-spacing: 0.007em;
  border-bottom: 1px solid var(--line);
}
.sheet__nav a:last-child { border-bottom: 0; }

@media (max-width: 999px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__right { margin-left: auto; gap: 8px; }
  .nav__bar { padding: 0 7px 0 18px; }
}
@media (max-width: 599px) { .nav__cta, .nav__login { display: none; } }
@media (max-width: 734px) { .nav { position: absolute; } }   /* on a phone: at the top of the page, not along the screen */

/* ── hero: the promise, and how it works in six moves ────────────────────
   The headline says what the app does (founder round 2026-10-17: "Your
   videos on eight networks. Right on schedule."; the old "Make one video.
   Post for a year." now opens the studio part). Under it and the two
   buttons a stage
   plays the process, one small scene per step, with a step bar underneath
   like apple.com. Since 2026-10-17 it tells the posting app (founder: the
   site is about posting, automation is a small topic): 1 upload a finished
   video, 2 schedule it, 3 approve or reject it (Team), 4 see how it does,
   5 the best time to post (Pro and Team), 6 again with the next video.
   Every scene's resting state is its finished picture; the motion plays
   "from" its start only while the scene is on (reduced motion: no motion).
   Sizes are in container units of the stage, so a scene scales as one. */

.hero--anim { padding: clamp(24px, 4vh, 64px) 0 clamp(8px, 2vh, 32px); overflow: hidden; }
.hero--anim .hero__text { display: grid; justify-items: center; text-align: center; }
.hero__title {
  font-size: clamp(2.75rem, 1.3rem + 5vw, 6.25rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.hero__a, .hero__b { display: block; text-wrap: balance; }   /* phone: "Videos auf | acht Netzwerken.", not a word alone */
.hero__b { color: var(--ink-big); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; margin-top: clamp(24px, 3.4vh, 36px); }

.flow { width: min(1080px, calc(100% - 2 * var(--gut))); margin: clamp(22px, 3.6vh, 44px) auto 0; }
.flow__stage {
  position: relative;
  height: clamp(340px, calc(100svh - 500px), 470px);
  border-radius: var(--r-xl);
  background: var(--page-alt);
  overflow: hidden;
  isolation: isolate;
  container-type: size;
}
[data-theme="dark"] .flow__stage { background: #161617; }
.scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease), visibility 0s linear 420ms; }
[data-at].is-on { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease) 100ms, visibility 0s; }
.flow:not(.is-running) .scene *, .flow:not(.is-running) .scene *::before, .flow:not(.is-running) .scene *::after, .flow:not(.is-running) .flow__bar i,
.flow:not(.is-running) [data-at], .flow:not(.is-running) [data-at] *, .flow:not(.is-running) [data-at]::before, .flow:not(.is-running) [data-at] *::before, .flow:not(.is-running) [data-at] *::after { animation-play-state: paused !important; }

@keyframes f-draw { from { stroke-dashoffset: 1; } }
@keyframes f-fade { from { opacity: 0; } }
@keyframes f-pop { from { opacity: 0; scale: 0.5; } }
@keyframes f-rise { from { opacity: 0; translate: 0 14px; } }

/* 1 make your first video: a frame draws, three frames fly in, the video opens */
.mk { position: relative; height: 62cqh; aspect-ratio: 620 / 964; margin-top: -5cqh; }
.mk__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk__outline rect { fill: none; stroke: #0071E3; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-at].is-on .mk__outline rect { animation: f-draw 900ms var(--ease-out) 100ms both; }
.mk__bit { position: absolute; width: 40%; aspect-ratio: 88 / 136; border-radius: 8px; background-size: 400% 100%; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.mk__bit--a { left: 7%; top: 9%; background-position: 0 0; }
.mk__bit--b { right: 7%; top: 30%; background-position: 33.333% 0; }
.mk__bit--c { left: 30%; bottom: 8%; background-position: 66.666% 0; }
[data-at].is-on .mk__bit--a { animation: mk-a 850ms cubic-bezier(0.2, 0.9, 0.3, 1.12) 550ms both; }
[data-at].is-on .mk__bit--b { animation: mk-b 850ms cubic-bezier(0.2, 0.9, 0.3, 1.12) 750ms both; }
[data-at].is-on .mk__bit--c { animation: mk-c 850ms cubic-bezier(0.2, 0.9, 0.3, 1.12) 950ms both; }
@keyframes mk-a { from { opacity: 0; transform: translate(-32cqw, -6cqh) rotate(-16deg); } }
@keyframes mk-b { from { opacity: 0; transform: translate(32cqw, -12cqh) rotate(14deg); } }
@keyframes mk-c { from { opacity: 0; transform: translate(-6cqw, 40cqh) rotate(-8deg); } }
.mk__card { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.4); clip-path: inset(0 0 0 0 round 16px); }
.mk__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-at].is-on .mk__card { animation: mk-open 900ms var(--ease-out) 1750ms both; }
[data-at].is-on .mk__card img { animation: mk-zoom 4.2s var(--ease-out) 1750ms both; }
@keyframes mk-open { from { clip-path: inset(100% 0 0 0 round 16px); } }
@keyframes mk-zoom { from { transform: scale(1.14); } }
.mk__play { position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M8.5 5.8v12.4c0 .8.9 1.3 1.6.9l9.7-6.2c.6-.4.6-1.4 0-1.8l-9.7-6.2c-.7-.4-1.6.1-1.6.9z%27 fill=%27%231D1D1F%27/%3E%3C/svg%3E") center / 42% no-repeat; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); }
[data-at].is-on .mk__play { animation: f-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 2550ms both; }
.mk__label { position: absolute; left: 0; right: 0; top: calc(100% + 2.4cqh); text-align: center; font-size: clamp(14px, 3.6cqh, 17px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
[data-at].is-on .mk__label { animation: f-rise 500ms var(--ease-out) 2750ms both; }

/* 2 automate it: the switch goes on, and the video becomes a week */
.au { display: flex; align-items: center; gap: 3.6cqw; }
.au__src { height: 52cqh; aspect-ratio: 620 / 964; border-radius: 14px; overflow: hidden; flex: none; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.38); }
.au__src img, .au__day img { display: block; width: 100%; height: 100%; object-fit: cover; }
.au__mid { display: grid; justify-items: center; gap: 10px; color: var(--ink-2); flex: none; }
.au__toggle { position: relative; width: 56px; height: 34px; border-radius: 999px; background: #30D158; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.au__toggle i { position: absolute; left: 2px; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.06); translate: 22px 0; }
[data-at].is-on .au__toggle { animation: au-on 320ms var(--ease) 900ms both; }
[data-at].is-on .au__toggle i { animation: au-thumb 320ms var(--ease) 900ms both; }
@keyframes au-on { from { background: #E3E3E8; } }
@keyframes au-thumb { from { translate: 0 0; } }
.au__label { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.au__arrow { width: 48px; height: 12px; }
[data-at].is-on .au__arrow { animation: f-fade 400ms var(--ease) 1250ms both; }
.au__row { display: grid; grid-template-columns: repeat(7, 7.2cqw); gap: 1.1cqw; }
.au__day { margin: 0; display: grid; gap: 7px; justify-items: center; }
.au__day span { width: 100%; aspect-ratio: 620 / 964; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.4); }
.au__wd { font-size: 12px; line-height: 1; font-weight: 600; color: var(--ink-2); }
[data-at].is-on .au__day { animation: au-pop 650ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(1450ms + var(--n) * 130ms); }
@keyframes au-pop { from { opacity: 0; transform: translateX(-7cqw) scale(0.5); } }
@container (max-width: 640px) {
  .au { flex-wrap: wrap; justify-content: center; row-gap: 3cqh; column-gap: 7cqw; }
  .au__src { height: 38cqh; }
  .au__row { flex: 0 0 100%; grid-template-columns: repeat(7, 11.4cqw); justify-content: center; gap: 1.4cqw; }
  .au__arrow { rotate: 90deg; }
}

/* 3 approve or reject it in your app */
.rv .rv__phone { --w: clamp(128px, 37cqh, 200px); }   /* two classes: .phone further down sets --w: 280px */
.rv__app { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 5%; padding: 17% 8% 9%; background: #F2F2F7; }
.rv__head { font-size: max(11px, calc(var(--w) * 0.075)); font-weight: 700; letter-spacing: -0.01em; color: #1D1D1F; text-align: center; }
.rv__cards { position: relative; }
.rv__card { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35); }
.rv__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv__card--1 { opacity: 0; transform: translateX(-140%) rotate(-16deg); }
[data-at].is-on .rv__card--1 { animation: rv-out 650ms cubic-bezier(0.4, 0, 0.7, 0.2) 1150ms both; }
@keyframes rv-out { from { opacity: 1; transform: none; } }
[data-at].is-on .rv__card--2 { animation: rv-up 500ms var(--ease-out) 1600ms both; }
@keyframes rv-up { from { scale: 0.92; filter: brightness(0.9); } }
.rv__stamp { position: absolute; left: 50%; top: 42%; translate: -50% -50%; padding: 5px 11px; border-radius: 999px; font-size: max(10px, calc(var(--w) * 0.062)); font-weight: 700; color: #FFFFFF; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.rv__stamp--no { background: #FF3B30; opacity: 0; }
[data-at].is-on .rv__stamp--no { animation: rv-flash 700ms var(--ease) 850ms both; }
@keyframes rv-flash { 0% { opacity: 0; scale: 0.6; } 30%, 80% { opacity: 1; scale: 1; } 100% { opacity: 1; scale: 1; } }
.rv__stamp--yes { background: #30D158; }
[data-at].is-on .rv__stamp--yes { animation: f-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 2850ms both; }
.rv__btns { display: flex; justify-content: center; gap: 16%; }
.rv__btn { position: relative; display: grid; place-items: center; width: 27%; aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.rv__btn svg { width: 46%; }
.rv__btn--no { color: #FF3B30; }
.rv__btn--yes { color: #30D158; }
.rv__btn::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
[data-at].is-on .rv__btn--no { animation: rv-press 380ms var(--ease) 650ms both; }
[data-at].is-on .rv__btn--no::after { animation: rv-tap 650ms var(--ease-out) 650ms both; }
[data-at].is-on .rv__btn--yes { animation: rv-press 380ms var(--ease) 2600ms both; }
[data-at].is-on .rv__btn--yes::after { animation: rv-tap 650ms var(--ease-out) 2600ms both; }
@keyframes rv-press { 50% { scale: 0.86; } }
@keyframes rv-tap { from { opacity: 0.8; scale: 0.6; } to { opacity: 0; scale: 1.5; } }
.rv__toast {           /* posted: the Dynamic Island opens up and says so */
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(var(--w) * 0.028);
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 68%;
  height: calc(var(--w) * 0.11);
  border-radius: 999px;
  background: #000000;
  color: #FFFFFF;
  font-size: max(10px, calc(var(--w) * 0.058));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.rv__toast i { width: 1.3em; height: 1.3em; flex: none; border-radius: 50%; background: #30D158 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3.2 6.3l1.9 1.9L8.9 4.2%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 70% no-repeat; }
[data-at].is-on .rv__toast { animation: rv-island 600ms cubic-bezier(0.34, 1.3, 0.64, 1) 3350ms both; }
[data-at].is-on .rv__toast > * { animation: f-fade 300ms var(--ease) 3700ms both; }
@keyframes rv-island { from { width: 31%; height: calc(var(--w) * 0.083); top: calc(var(--w) * 0.03); } }

/* 4 see how it performs */
.st { position: relative; width: min(72cqw, 118cqh); padding: 3.4cqh 3.6cqh 2.6cqh; border-radius: 22px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 32px 64px -28px rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .st, [data-theme="dark"] .ln__card { background: #1C1C1E; }
.st__top { display: flex; align-items: center; gap: 3cqh; }
.st__thumb { width: 10cqh; aspect-ratio: 620 / 964; border-radius: 8px; object-fit: cover; flex: none; height: auto; }
.st__big { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.st__big b { font-size: clamp(30px, 9cqh, 46px); font-weight: 700; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.st__unit { font-size: clamp(14px, 3.6cqh, 18px); font-weight: 600; color: var(--ink-2); }
.st__meta { display: flex; gap: 18px; margin-top: 10px; font-size: clamp(13px, 3.2cqh, 15px); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st__meta span { display: inline-flex; align-items: center; gap: 5px; }
.st__meta svg { width: 1.15em; height: 1.15em; }
.st__heart { fill: #FF375F; }
.st__bubble { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.st__chart { display: block; width: 100%; height: 26cqh; margin-top: 2.6cqh; overflow: visible; }
.st__line { fill: none; stroke: #0071E3; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }   /* no non-scaling-stroke: with it Chrome measures the dash in pixels and pathLength no longer holds */
.st__area { fill: url(#stFill); }
[data-at].is-on .st__line { animation: f-draw 1700ms var(--ease-out) 450ms both; }
[data-at].is-on .st__area { animation: f-fade 900ms var(--ease) 1300ms both; }
.st__dot { position: absolute; right: calc(3.6cqh - 7px); top: calc(100% - 2.6cqh - 26cqh - 7px + 26cqh * 10 / 120); width: 14px; height: 14px; border-radius: 50%; background: #0071E3; box-shadow: 0 0 0 5px rgba(0, 113, 227, 0.18); }
[data-at].is-on .st__dot { animation: f-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 2100ms both; }

/* 5 the system learns: a card in the light of Apple Intelligence */
.ln { position: relative; }
.ln__halo, .ln__edge { position: absolute; border-radius: 26px; overflow: hidden; }
.ln__halo { inset: -10px; filter: blur(22px); opacity: 0.55; }
.ln__edge { inset: -2px; }
.ln__halo::before, .ln__edge::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg, #0894FF, #C959DD, #FF2E54, #FF9004, #0894FF);
  animation: ln-spin 4.5s linear infinite;
}
@keyframes ln-spin { to { rotate: 1turn; } }
[data-at].is-on .ln__halo, [data-at].is-on .ln__edge { animation: f-fade 700ms var(--ease) 100ms both; }
.ln__card { position: relative; width: min(66cqw, 112cqh); padding: 4cqh 4cqh 3.4cqh; border-radius: 24px; background: #FFFFFF; }
.ln__title { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 5cqh, 26px); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.ln__spark { width: 1.2em; height: 1.2em; color: #BF5AF2; }
.ln__list { display: grid; gap: 1.6cqh; margin: 2.8cqh 0 0; padding: 0; list-style: none; }
.ln__list li { display: flex; align-items: center; gap: 12px; padding: 1.9cqh 2.2cqh; border-radius: 14px; background: var(--page-alt); font-size: clamp(13px, 3.4cqh, 17px); font-weight: 600; color: var(--ink); }
[data-theme="dark"] .ln__list li { background: #2C2C2E; }
.ln__check { width: 1.4em; height: 1.4em; flex: none; border-radius: 50%; background: #30D158 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3.2 6.3l1.9 1.9L8.9 4.2%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 66% no-repeat; }
[data-at].is-on .ln__list li { animation: ln-in 620ms cubic-bezier(0.34, 1.3, 0.64, 1) both; animation-delay: calc(800ms + var(--n) * 600ms); }
[data-at].is-on .ln__check { animation: f-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(1250ms + var(--n) * 600ms); }
@keyframes ln-in { from { opacity: 0; transform: translateX(-28px); } }

/* 6 again, with a new idea: the six steps as one circle */
.ag { --r: 28.8cqh; position: relative; width: 72cqh; aspect-ratio: 1; }   /* --r: the ring's radius, 40 of 100 in the svg */
.ag__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ag__track { fill: none; stroke: rgba(0, 0, 0, 0.08); stroke-width: 1.4; }
[data-theme="dark"] .ag__track { stroke: rgba(255, 255, 255, 0.12); }
.ag__arc { fill: none; stroke: #0071E3; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-at].is-on .ag__arc { animation: f-draw 2600ms cubic-bezier(0.45, 0, 0.55, 1) 250ms both; }
.ag__node {
  --a: calc(var(--n) * 60deg);
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 13cqh;
  aspect-ratio: 1;
  margin: -6.5cqh 0 0 -6.5cqh;
  border-radius: 50%;
  background: #0071E3;
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(0, 113, 227, 0.55);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
}
.ag__node svg { width: 52%; height: 52%; }
[data-at].is-on .ag__node { animation: ag-lit 500ms var(--ease) both; animation-delay: calc(250ms + var(--n) * 430ms); }
@keyframes ag-lit { from { background: #FFFFFF; color: #0071E3; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.25); } }
.ag__idea { position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: grid; place-items: center; width: 17cqh; aspect-ratio: 1; border-radius: 50%; background: #FFD60A; color: #1D1D1F; box-shadow: 0 0 0 8px rgba(255, 214, 10, 0.22), 0 0 40px rgba(255, 214, 10, 0.55); }
.ag__idea svg { width: 52%; height: 52%; }
[data-at].is-on .ag__idea { animation: f-pop 650ms cubic-bezier(0.34, 1.56, 0.64, 1) 2900ms both; }
.ag__label { position: absolute; left: 0; right: 0; top: 60%; text-align: center; font-size: clamp(14px, 3.8cqh, 18px); font-weight: 600; color: var(--ink); }
[data-at].is-on .ag__label { animation: f-rise 500ms var(--ease-out) 3200ms both; }

/* ── variant B: an iPhone tells it, the steps beside it ──────────────────
   One tile: on the left the six steps as a list (the running one opens and
   shows one line of explanation), on the right an iPhone whose screen slides
   to the next step like iOS. Around the phone, for some steps: the week that
   is planned, a notification, the glow of Apple Intelligence. */

.flow--phone {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) 1.2fr;
  align-items: center;
  column-gap: clamp(16px, 3vw, 48px);
  padding: clamp(20px, 3vw, 44px) clamp(20px, 3.4vw, 52px);
  border-radius: var(--r-xl);
  background: var(--page-alt);
}
[data-theme="dark"] .flow--phone { background: #161617; }
.flow--phone .flow__stage { grid-column: 2; grid-row: 1; height: clamp(440px, calc(100svh - 420px), 560px); background: none; border-radius: 0; overflow: visible; }
.flow--phone .flow__steps { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 4px; margin: 0; }
.flow--phone .flow__step { position: relative; grid-template-columns: 30px 1fr; column-gap: 14px; row-gap: 3px; align-items: center; padding: 12px 14px 15px; border-radius: 16px; transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.flow--phone .flow__step.is-on { background: #FFFFFF; box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.25); }
[data-theme="dark"] .flow--phone .flow__step.is-on { background: #1C1C1E; }
.flow--phone .flow__bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: rgba(0, 0, 0, 0.06); opacity: 0; }
.flow--phone .flow__step.is-on .flow__bar { opacity: 1; }
.flow--phone .flow__step.is-done .flow__bar i { transform: scaleX(0); }
.flow--phone .flow__no { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: var(--ink-2); font-size: 13px; line-height: 1; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.flow--phone .flow__step.is-on .flow__no { background: #0071E3; color: #FFFFFF; }
.flow--phone .flow__step.is-done .flow__no { background: rgba(0, 113, 227, 0.12); color: #0071E3; }
.flow--phone .flow__t { font-size: 17px; line-height: 1.3; }
.flow--phone .flow__d { display: block; grid-column: 2; font-size: 14px; line-height: 1.4; font-weight: 400; letter-spacing: -0.005em; color: var(--ink-2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 450ms var(--ease), opacity 350ms var(--ease); }
.flow--phone .flow__step.is-on .flow__d { max-height: 3.2em; opacity: 1; }

.ps { --pw: clamp(150px, 42cqh, 250px); position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.ps .ps__phone { --w: var(--pw); z-index: 2; }
.ps__screen { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #F2F2F7; opacity: 0; translate: 45% 0; transition: opacity 320ms var(--ease), translate 560ms cubic-bezier(0.32, 0.72, 0, 1); }
.ps__screen.is-past { translate: -28% 0; }
.ps__screen.is-on { z-index: 2; opacity: 1; translate: 0 0; transition: opacity 200ms var(--ease), translate 560ms cubic-bezier(0.32, 0.72, 0, 1); }
.ps__nav { position: absolute; left: 0; right: 0; top: calc(var(--w) * 0.16); text-align: center; font-size: calc(var(--w) * 0.066); font-weight: 600; color: #1D1D1F; }
.ps__big { position: absolute; left: 7%; right: 7%; top: calc(var(--w) * 0.17); display: flex; align-items: center; gap: 6px; font-size: calc(var(--w) * 0.115); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: #1D1D1F; }

/* 1 upload your video: pick a finished film like in Photos, Upload, it goes up and is checked.
   No prompt and no light of Apple Intelligence any more: the app posts videos, it does not make them. */
.ps1 { background: #F2F2F7; }
.ps1__compose { position: absolute; inset: 0; visibility: hidden; }
/* no fading text: Lighthouse audits at the same moment every time, and a fade at that moment reads as
   grey text. The film slides up over the picker like an iOS sheet; the picker stays fully opaque until
   it is covered, then it is hidden. */
[data-at].is-on .ps1__compose { animation: ps1-compose 2800ms linear both; }
@keyframes ps1-compose { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
.ps1__sub { position: absolute; left: 7%; top: calc(var(--w) * 0.33); font-size: calc(var(--w) * 0.055); color: #8E8E93; }
.ps1__grid { position: absolute; left: 6%; right: 6%; top: calc(var(--w) * 0.45); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--w) * 0.018); }
.ps1__pick { position: relative; aspect-ratio: 620 / 964; border-radius: 6px; overflow: hidden; background: #E3E3E8; }
.ps1__pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps1__pick b { position: absolute; right: 7%; bottom: 5%; font-size: calc(var(--w) * 0.042); font-weight: 600; line-height: 1; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums; }
.ps1__pick--sel { box-shadow: 0 0 0 2px #0071E3; }
.ps1__sel { position: absolute; right: 7%; top: 5%; width: calc(var(--w) * 0.08); aspect-ratio: 1; border-radius: 50%; background: #0071E3 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3.2 6.3l1.9 1.9L8.9 4.2%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 74% no-repeat; box-shadow: 0 0 0 1.5px #FFFFFF; }
[data-at].is-on .ps1__pick--sel { animation: ps1-ring 260ms var(--ease) 1000ms both; }
@keyframes ps1-ring { from { box-shadow: 0 0 0 0 #0071E3; } }
[data-at].is-on .ps1__sel { animation: f-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 1000ms both; }
.ps1__gen { position: absolute; left: 6%; right: 6%; bottom: calc(var(--w) * 0.14); display: flex; align-items: center; justify-content: center; gap: 6px; height: calc(var(--w) * 0.15); border-radius: 999px; background: #0071E3; color: #FFFFFF; font-size: calc(var(--w) * 0.062); font-weight: 600; }
.ps1__gen-i { width: 1.1em; height: 1.1em; }
[data-at].is-on .ps1__gen { animation: rv-press 380ms var(--ease) 1800ms; }
.ps1__result { position: absolute; inset: 0; background: #000000; }
.ps1__result > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-at].is-on .ps1__result { animation: ps1-show 560ms cubic-bezier(0.32, 0.72, 0, 1) 2200ms both; }
@keyframes ps1-show { from { transform: translateY(100%); visibility: hidden; } 1% { visibility: visible; } to { transform: translateY(0); visibility: visible; } }
/* while it goes up the film rests a little darker, then it is ready */
[data-at].is-on .ps1__result > img { animation: ps1-dim 2300ms var(--ease) 2500ms both; }
@keyframes ps1-dim { 0%, 78% { filter: brightness(0.66) saturate(0.85); } 100% { filter: none; } }
.ps1__prog { position: absolute; z-index: 3; left: 24%; right: 24%; top: calc(var(--w) * 0.345); height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.32); overflow: hidden; opacity: 0; }
.ps1__prog i { display: block; height: 100%; border-radius: inherit; background: #FFFFFF; transform-origin: 0 50%; }
[data-at].is-on .ps1__prog { animation: ps1-busy 2100ms var(--ease) 2600ms both; }
[data-at].is-on .ps1__prog i { animation: ps1-fill 1700ms cubic-bezier(0.45, 0, 0.25, 1) 2700ms both; }
@keyframes ps1-fill { from { transform: scaleX(0); } }
.ps1__status { position: absolute; z-index: 3; left: 50%; top: calc(var(--w) * 0.19); translate: -50% 0; display: grid; }
.ps1__status > span { grid-area: 1 / 1; justify-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: #FFFFFF; font-size: calc(var(--w) * 0.055); font-weight: 600; white-space: nowrap; }
.ps1__busy { opacity: 0; }
.ps1__busy-i { width: 1.05em; height: 1.05em; }
[data-at].is-on .ps1__busy { animation: ps1-busy 2100ms var(--ease) 2600ms both; }
@keyframes ps1-busy { 0% { opacity: 0; translate: 0 -6px; } 12%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
[data-at].is-on .ps1__busy-i { animation: ps1-up 1s ease-in-out infinite; }
@keyframes ps1-up { 50% { translate: 0 -1.5px; } }
.ps1__dots { display: inline-flex; gap: 2px; }
.ps1__dots i { width: 3px; height: 3px; border-radius: 50%; background: #FFFFFF; }
[data-at].is-on .ps1__dots i { animation: ps1-dot 1s ease-in-out infinite; }
.ps1__dots i:nth-child(2) { animation-delay: 160ms !important; }
.ps1__dots i:nth-child(3) { animation-delay: 320ms !important; }
@keyframes ps1-dot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.ps1__done i { width: 1.25em; height: 1.25em; border-radius: 50%; background: #30D158 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3.2 6.3l1.9 1.9L8.9 4.2%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 72% no-repeat; }
[data-at].is-on .ps1__done { animation: f-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 4700ms both; }
.ps1 .ps1__tag { top: auto; bottom: 5%; left: 6%; }
[data-at].is-on .ps1__tag { animation: f-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 4800ms both; }

/* 2 schedule: a tidy settings screen, the way iOS lays it out; day and time, the networks, and the
   captions switch goes on */
.ps2__body { position: absolute; left: 6%; right: 6%; top: calc(var(--w) * 0.36); display: grid; }
.ps2__src { display: flex; align-items: center; gap: 9px; padding: calc(var(--w) * 0.03); border-radius: 12px; background: #FFFFFF; }
.ps2__src img { width: calc(var(--w) * 0.14); height: auto; aspect-ratio: 620 / 964; border-radius: 6px; object-fit: cover; }
.ps2__name { font-size: calc(var(--w) * 0.062); line-height: 1.2; font-weight: 600; color: #1D1D1F; }
.ps2__meta { margin-top: 2px; font-size: calc(var(--w) * 0.048); color: #8E8E93; }
.ps2__head { margin: calc(var(--w) * 0.06) 0 calc(var(--w) * 0.02) calc(var(--w) * 0.04); font-size: calc(var(--w) * 0.048); font-weight: 500; color: #6E6E73; }
.ps2__group { border-radius: 12px; background: #FFFFFF; overflow: hidden; }
.ps2__row { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--w) * 0.035); min-height: calc(var(--w) * 0.13); padding: 0 calc(var(--w) * 0.04); font-size: calc(var(--w) * 0.058); color: #1D1D1F; white-space: nowrap; }
.ps2__row + .ps2__row::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--w) * 0.15); border-top: 0.5px solid rgba(60, 60, 67, 0.24); }
.ps2__ic { display: grid; place-items: center; width: calc(var(--w) * 0.075); aspect-ratio: 1; border-radius: 22%; color: #FFFFFF; }
.ps2__ic svg { width: 68%; height: 68%; }
.ps2__ic--g { background: #34C759; }
.ps2__ic--o { background: #FF9500; }
.ps2__ic--b { background: #007AFF; }
.ps2__val { display: inline-flex; align-items: center; gap: 4px; color: #8E8E93; }
.ps2__val::after { content: "\203A"; font-size: 1.3em; line-height: 1; color: #C7C7CC; }
.ps2__toggle { position: relative; flex: none; width: calc(var(--w) * 0.17); height: calc(var(--w) * 0.1); border-radius: 999px; background: #34C759; }
.ps2__toggle i { position: absolute; top: 2px; left: 2px; width: calc(var(--w) * 0.1 - 4px); aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); translate: calc(var(--w) * 0.07) 0; }
.ps2__group--solo { margin-top: calc(var(--w) * 0.06); }
[data-at].is-on .ps2__toggle { animation: au-on 320ms var(--ease) 1350ms both; }
[data-at].is-on .ps2__toggle i { animation: au-thumb 320ms var(--ease) 1350ms both; }
/* the groups settle in one after another, then the finger turns the captions on */
[data-at].is-on .ps2__head, [data-at].is-on .ps2__group { animation: f-rise 420ms var(--ease-out) both; }
[data-at].is-on .ps2__head:nth-of-type(1), [data-at].is-on .ps2__head:nth-of-type(1) + .ps2__group { animation-delay: 250ms; }
[data-at].is-on .ps2__head:nth-of-type(2), [data-at].is-on .ps2__head:nth-of-type(2) + .ps2__group { animation-delay: 420ms; }
[data-at].is-on .ps2__group--solo { animation-delay: 590ms; }

/* the week as a calendar strip, a glass card in front of the phone */
.ps__week { position: absolute; z-index: 3; left: calc(50% - var(--pw) / 2 - 150px); bottom: 10%; width: 236px; padding: 12px 12px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 24px 48px -22px rgba(0, 0, 0, 0.35); opacity: 0; translate: -18px 0; transition: opacity 300ms var(--ease), translate 400ms var(--ease); }
.ps__week.is-on { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease) 1500ms, translate 700ms cubic-bezier(0.34, 1.3, 0.64, 1) 1500ms; }
.ps__week-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.ps__week-h b { font-size: 13px; font-weight: 700; color: #1D1D1F; }
.ps__week-h span { font-size: 12px; color: #8E8E93; }
.ps__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ps__cd { display: grid; justify-items: center; gap: 5px; }
.ps__cd span { font-size: 10px; line-height: 1; font-weight: 600; color: #8E8E93; }
.ps__cd img { width: 100%; height: auto; aspect-ratio: 620 / 964; border-radius: 5px; object-fit: cover; }
.ps__tick { width: 12px; height: 12px; border-radius: 50%; background: #30D158 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3.2 6.3l1.9 1.9L8.9 4.2%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 80% no-repeat; }
.ps__week.is-on .ps__cd { animation: f-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(1900ms + var(--n) * 110ms); }
.ps__week.is-on .ps__tick { animation: f-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(2800ms + var(--n) * 120ms); }

/* 3 approve or reject: one video at a time, two clear buttons */
.ps3__sub { position: absolute; left: 7%; top: calc(var(--w) * 0.33); font-size: calc(var(--w) * 0.055); color: #8E8E93; }
.ps3__cards { position: absolute; left: 6%; right: 6%; top: calc(var(--w) * 0.45); bottom: calc(var(--w) * 0.36); }
.ps3__card { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #000000; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5); }
.ps3__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps3__card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.66)); }
.ps3__cap { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 6%; display: grid; gap: 2px; color: #FFFFFF; }
.ps3__cap b { font-size: calc(var(--w) * 0.066); font-weight: 600; letter-spacing: -0.01em; }
.ps3__cap > span { font-size: calc(var(--w) * 0.046); color: rgba(255, 255, 255, 0.78); }
.ps3__badge { position: absolute; z-index: 3; left: 50%; top: 42%; translate: -50% -50%; display: grid; place-items: center; width: calc(var(--w) * 0.24); aspect-ratio: 1; border-radius: 50%; color: #FFFFFF; }
.ps3__badge svg { width: 46%; height: 46%; }
.ps3__no { background: rgba(255, 59, 48, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px rgba(0, 0, 0, 0.25); opacity: 0; }
.ps3__ok { background: #30D158; box-shadow: 0 0 0 6px rgba(48, 209, 88, 0.25), 0 12px 30px rgba(48, 209, 88, 0.45); }
.ps3__card--1 { z-index: 2; opacity: 0; transform: translateX(-150%) rotate(-18deg); }
.ps3__card--1::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(255, 59, 48, 0.32); opacity: 0; }
.ps3__card--2 { box-shadow: 0 0 0 2px #30D158, 0 16px 34px -14px rgba(48, 209, 88, 0.55); }
[data-at].is-on .ps3__card--1 { animation: ps3-drag 1250ms cubic-bezier(0.4, 0, 0.6, 1) 500ms both; }
[data-at].is-on .ps3__card--1::after { animation: ps3-veil 1250ms linear 500ms both; }
@keyframes ps3-veil { 0% { opacity: 0; } 45%, 100% { opacity: 1; } }
[data-at].is-on .ps3__no { animation: ps3-no 1250ms var(--ease) 500ms both; }
@keyframes ps3-no { 0% { opacity: 0; scale: 0.6; } 40%, 100% { opacity: 1; scale: 1; } }
[data-at].is-on .ps3__card--2 { animation: ps3-next 1350ms var(--ease-out) 1550ms both; }
@keyframes ps3-next {
  0% { scale: 0.92; filter: brightness(0.85); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5); }
  40%, 85% { scale: 1; filter: none; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5); }
  100% { scale: 1; filter: none; box-shadow: 0 0 0 2px #30D158, 0 16px 34px -14px rgba(48, 209, 88, 0.55); }
}
[data-at].is-on .ps3__ok { animation: f-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 2850ms both; }
.ps3__bar { position: absolute; left: 6%; right: 6%; bottom: calc(var(--w) * 0.13); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * 0.035); }
.ps3__btn { display: grid; place-items: center; height: calc(var(--w) * 0.14); border-radius: 999px; font-size: calc(var(--w) * 0.06); font-weight: 600; }
.ps3__btn--no { background: #E5E5EA; color: #FF3B30; }
.ps3__btn--yes { background: #0071E3; color: #FFFFFF; }
[data-at].is-on .ps3__btn--yes { animation: rv-press 380ms var(--ease) 2600ms; }

/* 4 insights on the phone, a notification beside it */
.ps4__card { position: absolute; left: 6%; right: 6%; top: calc(var(--w) * 0.42); padding: calc(var(--w) * 0.05); border-radius: 14px; background: #FFFFFF; }
.ps4__top { display: flex; align-items: center; gap: 8px; }
.ps4__thumb { width: calc(var(--w) * 0.13); height: auto; aspect-ratio: 620 / 964; border-radius: 5px; object-fit: cover; }
.ps4__num { display: grid; line-height: 1.05; }
.ps4__num b { font-size: calc(var(--w) * 0.13); font-weight: 700; letter-spacing: -0.02em; color: #1D1D1F; font-variant-numeric: tabular-nums; }
.ps4__num span { font-size: calc(var(--w) * 0.055); font-weight: 600; color: #6E6E73; }
.ps4__chart { display: block; width: 100%; height: calc(var(--w) * 0.4); margin-top: 8px; overflow: visible; }
.ps4__line { fill: none; stroke: #0071E3; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-at].is-on .ps4__line { animation: f-draw 1700ms var(--ease-out) 450ms both; }
[data-at].is-on .ps4__area { animation: f-fade 900ms var(--ease) 1300ms both; }
.ps4__meta { display: flex; gap: 12px; margin-top: 8px; font-size: calc(var(--w) * 0.055); font-weight: 600; color: #6E6E73; font-variant-numeric: tabular-nums; }
.ps4__meta span { display: inline-flex; align-items: center; gap: 3px; }
.ps4__meta svg { width: 1.1em; height: 1.1em; }
/* the app's own notifications, the way its list shows them (founder 15.10.: a notification in the
   app, not a push; the app sends none): no app icon, no banner, a white panel that settles */
.ps__note { position: absolute; z-index: 3; top: 61%; left: calc(50% + var(--pw) * 0.28); width: min(262px, calc(50% + var(--pw) * 0.22 - 8px)); padding: 11px 13px 4px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 44px -18px rgba(0, 0, 0, 0.35); color: #1D1D1F; opacity: 0; translate: 0 14px; transition: opacity 250ms var(--ease), translate 350ms var(--ease); }
.ps__note.is-on { opacity: 1; translate: 0 0; transition: opacity 450ms var(--ease) 2300ms, translate 600ms cubic-bezier(0.32, 0.72, 0, 1) 2300ms; }
.ps__note-h { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.ps__note-h svg { width: 16px; height: 16px; flex: none; }
.ps__nl { margin: 0; padding: 0; list-style: none; }
.ps__nl li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; font-size: 12.5px; line-height: 1.25; font-weight: 600; }
.ps__nl li + li { box-shadow: inset 0 0.5px 0 rgba(60, 60, 67, 0.22); }
.ps__nl small { font-size: 11.5px; font-weight: 400; color: #6E6E73; }
.ps__ok { width: 20px; height: 20px; border-radius: 50%; background: #30D158 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3.2 6.3l1.9 1.9L8.9 4.2%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 70% no-repeat; }
.ps__note.is-on .ps__nl li { animation: f-rise 420ms var(--ease-out) both; animation-delay: calc(2350ms + var(--n) * 380ms); }

/* 5 the best time to post (Pro and Team), in the glow around the whole phone */
@property --gl { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ps__glow { position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--pw); aspect-ratio: 9 / 19.5; translate: -50% -50%; border-radius: calc(var(--pw) * 0.165); opacity: 0; transition: opacity 600ms var(--ease); pointer-events: none; }
.ps__glow::before { content: ""; position: absolute; inset: -5%; border-radius: inherit; filter: blur(16px); background: conic-gradient(from var(--gl), #0894FF, #C959DD, #FF2E54, #FF9004, #0894FF); }
.ps__glow.is-on { opacity: 1; }
.ps__glow.is-on::before { animation: ps-glow 4s linear infinite; }
@keyframes ps-glow { to { --gl: 360deg; } }
.ps5__list { position: absolute; left: 6%; right: 6%; top: calc(var(--w) * 0.45); display: grid; gap: calc(var(--w) * 0.035); margin: 0; padding: 0; list-style: none; }
.ps5__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: calc(var(--w) * 0.045) calc(var(--w) * 0.035); border-radius: 12px; background: #FFFFFF; font-size: calc(var(--w) * 0.051); line-height: 1.25; font-weight: 600; color: #1D1D1F; white-space: nowrap; }
.ps5__rank { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #0071E3; color: #FFFFFF; font-size: 0.86em; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps5__list em { padding: 1px 5px; border-radius: 999px; background: rgba(48, 209, 88, 0.16); color: #248A3D; font-size: 0.86em; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps5__foot { position: absolute; left: 7%; right: 7%; top: calc(var(--w) * 1.08); font-size: calc(var(--w) * 0.046); line-height: 1.3; color: #6E6E73; }
[data-at].is-on .ps5__list li { animation: ln-in 620ms cubic-bezier(0.34, 1.3, 0.64, 1) both; animation-delay: calc(900ms + var(--n) * 600ms); }
[data-at].is-on .ps5__rank { animation: f-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(1250ms + var(--n) * 600ms); }
[data-at].is-on .ps5__list em { animation: f-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(1750ms + var(--n) * 600ms); }
[data-at].is-on .ps5__foot { animation: f-fade 500ms var(--ease) 2900ms both; }

/* 6 again: the six steps as a circle on the screen, and a new workflow */
.ps6 { background: #FFFFFF; }
.ps6__ag { position: absolute; left: 50%; top: calc(var(--w) * 0.42); width: calc(var(--w) * 0.8); translate: -50% 0; --r: calc(var(--w) * 0.32); }
.ps6__ag .ag__node { width: calc(var(--w) * 0.16); margin: calc(var(--w) * -0.08) 0 0 calc(var(--w) * -0.08); }
.ps6__ag .ag__idea { top: 50%; width: calc(var(--w) * 0.22); box-shadow: 0 0 0 5px rgba(255, 214, 10, 0.22), 0 0 26px rgba(255, 214, 10, 0.55); }
.ps6__title { position: absolute; left: 0; right: 0; top: calc(var(--w) * 1.36); text-align: center; font-size: calc(var(--w) * 0.09); font-weight: 700; letter-spacing: -0.015em; color: #1D1D1F; }
.ps6__btn { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; padding: calc(var(--w) * 0.035) calc(var(--w) * 0.08); border-radius: 999px; background: #0071E3; color: #FFFFFF; font-size: calc(var(--w) * 0.058); font-weight: 600; white-space: nowrap; }
[data-at].is-on .ps6__title { animation: f-rise 500ms var(--ease-out) 3100ms both; }
[data-at].is-on .ps6__btn { animation: f-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 3400ms both; }

/* the island says "posted": it sits outside the sliding screens, above the island */
.ps__toast[data-at] { opacity: 0; }
.ps__toast[data-at].is-on { opacity: 1; animation: rv-island 600ms cubic-bezier(0.34, 1.3, 0.64, 1) 3350ms both; }
.ps__toast[data-at].is-on > * { animation: f-fade 300ms var(--ease) 3700ms both; }

/* ── V13: the finger, and the moments that make each step clear ───────── */

/* a finger: lands, presses, lets go; its path is set per step */
.ps__touch { position: absolute; z-index: 8; left: 50%; top: 50%; width: calc(var(--w) * 0.15); aspect-ratio: 1; border-radius: 50%; background: rgba(60, 60, 67, 0.32); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 4px 14px rgba(0, 0, 0, 0.3);   /* like iOS 'show touches': seen on light and on dark */ translate: -50% -50%; opacity: 0; pointer-events: none; }
/* 1: taps the first film (20 % / 31.1 % of the screen, measured), then Upload (50 % / 89.8 %).
   The way between them is a transform in phone units (screen = 0.94 w wide, 2.107 w high), not left/top:
   moving left/top counts as a layout shift (Lighthouse CLS went from 0.0015 to 0.0134 with the longer way).
   The press is part of the same transform list: the separate scale property applies after transform and
   would shrink the way as well (measured: 14 / 60 px short of the button while pressing). */
.ps1__touch { left: 20%; top: 31.1%; }
[data-at].is-on .ps1__touch { animation: ps1-touch 2100ms var(--ease) 500ms both; }
@keyframes ps1-touch {
  0% { opacity: 0; transform: translate(calc(var(--w) * 0.15), calc(var(--w) * 0.335)) scale(1); }
  12% { opacity: 1; }
  22% { transform: translate(0, 0) scale(1); }
  26% { transform: translate(0, 0) scale(0.76); }
  31% { transform: translate(0, 0) scale(1); }
  58% { transform: translate(calc(var(--w) * 0.282), calc(var(--w) * 1.2367)) scale(1); }
  63% { transform: translate(calc(var(--w) * 0.282), calc(var(--w) * 1.2367)) scale(0.76); }
  69% { transform: translate(calc(var(--w) * 0.282), calc(var(--w) * 1.2367)) scale(1); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--w) * 0.282), calc(var(--w) * 1.2367)) scale(1); }
}
/* 2: turns the captions on (switch at 81 % / 63 % of the screen, measured) */
[data-at].is-on .ps2__touch { animation: ps2-touch 1100ms var(--ease) 700ms both; }
@keyframes ps2-touch { 0% { opacity: 0; left: 58%; top: 80%; } 30%, 80% { opacity: 1; } 52% { left: 80.7%; top: 62.8%; scale: 1; } 62% { scale: 0.76; } 74% { scale: 1; } 100% { opacity: 0; left: 80.7%; top: 62.8%; } }
[data-at].is-on .ps3__touch { animation: ps3-touch 2900ms var(--ease) 300ms both; }
@keyframes ps3-touch {
  0% { opacity: 0; left: 56%; top: 52%; scale: 1; }
  8% { opacity: 1; left: 56%; top: 52%; scale: 0.84; }
  30% { opacity: 1; left: 24%; top: 54%; scale: 0.84; }
  37% { opacity: 0; left: 22%; top: 54%; scale: 1; }
  70% { opacity: 0; left: 72.9%; top: 90.3%; scale: 1; }
  77%, 86% { opacity: 1; left: 72.9%; top: 90.3%; }
  83% { scale: 0.76; }
  89% { scale: 1; }
  100% { opacity: 0; left: 72.9%; top: 90.3%; scale: 1; }
}
/* the first video follows the finger to the left, then flies */
@keyframes ps3-drag { 0% { opacity: 1; transform: none; } 48% { opacity: 1; transform: translateX(-30%) rotate(-7deg); } 100% { opacity: 0; transform: translateX(-150%) rotate(-18deg); } }
[data-at].is-on .ps6__touch { animation: ps6-touch 1200ms var(--ease) 3900ms both; }
@keyframes ps6-touch { 0% { opacity: 0; left: 64%; top: 99%; } 30%, 84% { opacity: 1; } 56% { left: 50%; top: 89.5%; scale: 1; } 66% { scale: 0.76; } 78% { scale: 1; } 100% { opacity: 0; left: 50%; top: 89.5%; } }
.ps6__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
[data-at].is-on .ps6__btn { animation: f-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 3400ms both, rv-press 380ms var(--ease) 4560ms; }
[data-at].is-on .ps6__btn::after { animation: ps6-ripple 900ms var(--ease-out) 4600ms both; }
@keyframes ps6-ripple { from { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.5); } to { box-shadow: 0 0 0 14px rgba(0, 113, 227, 0); } }

/* insights: the growth, and hearts that rise from the likes */
.ps4__num > span { display: flex; align-items: center; gap: 6px; }
.ps4__up { padding: 1px 6px; border-radius: 999px; background: rgba(48, 209, 88, 0.16); color: #248A3D; font-size: calc(var(--w) * 0.048); font-style: normal; font-weight: 700; }
[data-at].is-on .ps4__up { animation: f-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 2200ms both; }
.ps4__hearts { position: relative; width: 0; height: 1em; }
.ps4__hearts i { position: absolute; left: -2.3em; bottom: 0.1em; width: 0.95em; height: 0.95em; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.5 2.7c0 5.6-7.5 10.2-7.5 10.2z%27 fill=%27%23FF375F%27/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; }
[data-at].is-on .ps4__hearts i { animation: ps4-heart 1300ms var(--ease-out) both; animation-delay: calc(2350ms + var(--n) * 260ms); }
@keyframes ps4-heart { 0% { opacity: 0; translate: 0 0; scale: 0.6; } 20% { opacity: 1; scale: 1; } 100% { opacity: 0; translate: var(--dx, 0) -44px; scale: 0.9; } }

/* best time: each slot written out as if typed */
[data-at].is-on .ps5__list li > span { animation: ps5-type 750ms steps(24, end) both; animation-delay: calc(1100ms + var(--n) * 600ms); }
@keyframes ps5-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* the phone floats, a little */
@media (prefers-reduced-motion: no-preference) {
  .flow--phone.is-running .ps { animation: ps-float 6s ease-in-out infinite alternate; }
  @keyframes ps-float { from { translate: 0 -4px; } to { translate: 0 4px; } }
}

/* the step list: one white card glides to the running step, like the pill in the bar */
.flow--phone { position: relative; }
.flow--phone .flow__steps { position: relative; z-index: 1; }
.flow--phone .flow__step.is-on { background: none; box-shadow: none; }
[data-theme="dark"] .flow--phone .flow__step.is-on { background: none; }
.flow__hi { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 16px; background: #FFFFFF; box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.25); pointer-events: none; transition: transform 560ms cubic-bezier(0.32, 0.72, 0, 1), height 460ms cubic-bezier(0.32, 0.72, 0, 1), width 300ms var(--ease); }
[data-theme="dark"] .flow__hi { background: #1C1C1E; }
@media (max-width: 734px) { .flow__hi { display: none; } }

@media (max-width: 734px) {
  .flow--phone { grid-template-columns: 1fr; padding: 18px 14px 16px; }
  .flow--phone .flow__stage { grid-column: 1; grid-row: 1; height: clamp(420px, 62svh, 540px); }
  .flow--phone .flow__steps { grid-column: 1; grid-row: 2; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 14px; }
  .flow--phone .flow__step { display: block; padding: 0; min-height: 24px; background: none; box-shadow: none; }
  .flow--phone .flow__step.is-on { background: none; box-shadow: none; }
  .flow--phone .flow__bar { position: static; opacity: 1; height: 3px; background: rgba(0, 0, 0, 0.1); }
  .flow--phone .flow__step.is-done .flow__bar i { transform: scaleX(1); }
  .flow--phone .flow__d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .flow--phone .flow__now { grid-column: 1; grid-row: 3; }
  .ps { --pw: clamp(150px, 40cqh, 230px); }
  .ps__week { display: none; }
  .ps__note { left: auto; right: 0; top: 64%; width: min(232px, 66cqw); }   /* over the empty lower part of the screen, clear of the numbers */
  .ps__nl li:nth-child(n+2) { display: none; }                                 /* one line here, or the panel covers the numbers */
}

/* the step bar: six steps, the running one fills like a story */
.flow__steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.flow__step { display: grid; align-content: start; gap: 8px; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--ink-2); cursor: pointer; font: inherit; }
.flow__bar { display: block; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
[data-theme="dark"] .flow__bar { background: rgba(255, 255, 255, 0.16); }
.flow__bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.flow__step.is-done .flow__bar i { transform: scaleX(1); }
.flow__step.is-on .flow__bar i { animation: flow-bar var(--dur, 5s) linear both; }
@keyframes flow-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.flow__no { font-size: 12px; line-height: 1; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flow__t { font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.flow__step.is-on { color: var(--ink); }
.flow__step.is-on .flow__no { color: #0071E3; }
@media (hover: hover) { .flow__step:hover { color: var(--ink); } }
.flow__step:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: 6px; }
.flow__now { display: none; }
@media (max-width: 734px) {
  .flow__steps { gap: 6px; margin-top: 14px; }
  .flow__no, .flow__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* hidden to the eye, still the button's name */
  .flow__step { min-height: 24px; align-content: center; }
  .flow__now { display: block; margin-top: 10px; text-align: center; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--ink); }
  .flow__now b { color: #0071E3; margin-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow .scene *, .flow .scene *::before, .flow .scene *::after, .flow__bar i,
  .flow [data-at], .flow [data-at] *, .flow [data-at]::before, .flow [data-at] *::before, .flow [data-at] *::after { animation: none !important; }   /* every step rests on its finished picture */
}

/* ── the phone: a titanium frame, a screen, an island ──────────────────── */

.phone {
  --w: 280px;
  position: relative;
  width: var(--w);
  aspect-ratio: 9 / 19.5;
  padding: calc(var(--w) * 0.03);
  border: 0;
  border-radius: calc(var(--w) * 0.165);
  background: linear-gradient(155deg, #3A3A3D 0%, #1B1B1D 38%, #2B2B2E 70%, #141416 100%);
  box-shadow:
    inset 0 0 0 1.5px #5E5E63,
    inset 0 0 0 calc(var(--w) * 0.011) #0E0E10,
    0 34px 70px rgba(0, 0, 0, 0.2),
    0 10px 22px rgba(0, 0, 0, 0.14);
}
.phone__screen {
  position: relative;
  display: block;
  height: 100%;
  border-radius: calc(var(--w) * 0.137);
  overflow: hidden;
  background: #000;
}
.phone__screen .phone__media { position: absolute; inset: 0; overflow: hidden; }
.phone__media img, .phone__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0) 20%),
    linear-gradient(rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.5));
}
.phone__island {
  position: absolute;
  top: calc(var(--w) * 0.058);
  left: 50%;
  translate: -50% 0;
  width: 31%;
  height: calc(var(--w) * 0.083);
  border-radius: 999px;
  background: #000;
  z-index: 5;
}

.ai-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ── clips: poster first, the film only when chosen ───────────────────── */

.clip { margin: 0; min-width: 0; }
.clip__frame { position: relative; overflow: hidden; background: #0B0B0C; isolation: isolate; }
.clip__frame img, .clip__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .clip__frame img { opacity: 0; transition: opacity 360ms var(--ease); }
.js .clip__frame img.is-in { opacity: 1; }
.clip__frame video { opacity: 0; transition: opacity 240ms var(--ease); }
.clip.is-live .clip__frame video { opacity: 1; }
.clip__btn { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border-radius: inherit; cursor: pointer; }
.clip__btn:focus-visible { outline-offset: -3px; }

/* ── the second offer: the doorway into the video studio ──────────────────
   The posting app leads, the studio follows under a hairline. Founder round 2026-10-17 (evening):
   "bigger and easier to take in". The old headline of the first screen, word for word, at the
   hero's own size; then the studio as one card: the question and its answer on the left; how it
   works, that it is not open yet and the one thing to do on the right (one column on a phone).
   The words are the founder's, unchanged; only the three sentences stand apart. */

.chapter { padding-top: 0; }
.chapter__in {
  display: grid;
  justify-items: center;
  gap: clamp(36px, 4.5vw, 64px);
  padding-top: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.chapter__say {
  font-size: clamp(2.75rem, 1.3rem + 5vw, 6.25rem);   /* = .hero__title */
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.chapter__a, .chapter__b { display: block; text-wrap: balance; }
.chapter__b { color: var(--ink-big); }
.studio {
  display: grid;
  gap: 28px 64px;
  width: 100%;
  max-width: 980px;
  padding: clamp(28px, 4.6vw, 60px);
  border-radius: var(--r-xl);
  background: var(--page-alt);
  text-align: left;
}
[data-theme="dark"] .studio { background: var(--tile); }
@media (min-width: 834px) { .studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }
.chapter__title {
  font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.studio__a {
  margin-top: 14px;
  font-size: clamp(1.3125rem, 1.12rem + 0.65vw, 1.75rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  text-wrap: balance;
}
.chapter__lead {
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.3125rem);   /* = .section-lead */
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.studio__wait {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 26px;
  font-size: 17px;
  letter-spacing: -0.022em;
  color: var(--ink-2);
}
.chapter + .hl { padding-top: clamp(64px, 8vw, 112px); }

/* ── highlights ────────────────────────────────────────────────────────── */

.hl { padding-top: var(--section); }
.hl__head { display: grid; gap: 14px; margin-bottom: 36px; }
.hl__sub { max-width: 40em; font-size: 17px; color: var(--ink-2); text-wrap: pretty; }

.hl__scroller {
  --edge: max(var(--gut), calc((100vw - var(--maxw)) / 2));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding-inline: var(--edge);
  scrollbar-width: none;
}
.hl__scroller::-webkit-scrollbar { display: none; }
.hl__track { display: flex; gap: 20px; width: max-content; padding-bottom: 4px; }
.hl__item { scroll-snap-align: start; }
.hl__tile .clip__frame {
  width: clamp(280px, 30vw, 400px);
  aspect-ratio: 620 / 964;
  border-radius: var(--r-xl);
}
.hl__cap {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 3;
  padding: 28px 28px 64px;
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.009em;
  color: #F5F5F7;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  text-wrap: balance;
  pointer-events: none;
}
.hl__cap strong { font-weight: 600; }
.hl__cap span { color: rgba(245, 245, 247, 0.62); }
.hl__tile .ai-tag { top: auto; bottom: 16px; left: 16px; }

.hl__controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.hl__dots {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 10px;
  border-radius: 980px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.hl__dot {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
}
.hl__dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--glass-ink);
  opacity: 0.42;
  transition: width 320ms var(--ease-out), opacity 200ms var(--ease);
}
.hl__dot.is-on::after { width: 36px; opacity: 1; }
.hl__arrows { display: flex; gap: 14px; }
/* a phone swipes; arrows there only crowd the dots off the screen */
@media (max-width: 599px) {
  .hl__arrows { display: none; }
  .hl__controls { justify-content: center; }
}

/* ── how it works: the bento ───────────────────────────────────────────── */

.how { margin-top: var(--section); padding: var(--section) 0; background: var(--page-alt); }
.how .section-title { margin-bottom: clamp(32px, 4vw, 56px); }

.bento { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--r-xl);
  background: var(--tile);
  overflow: hidden;
}
.tile--dark { background: var(--room); color: var(--room-ink); }
[data-theme="dark"] .tile--dark { box-shadow: inset 0 0 0 1px var(--room-line); }
.tile__text {
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.009em;
  text-wrap: pretty;
}
.tile__text span { color: var(--ink-2); }   /* 19 px semibold counts as normal text: 4.5:1 needed */
.tile--dark .tile__text span { color: var(--room-ink-2); }
.tile__num {
  font-size: clamp(4rem, 2.6rem + 3.8vw, 6rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tile--stat { align-content: space-between; }
.tile__cap { font-size: 14px; letter-spacing: -0.016em; color: var(--ink-3); }
.tile__badge {
  justify-self: start;
  padding: 7px 12px;
  border-radius: 8px;
  background: #1D1D1F;
  color: #F5F5F7;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-theme="dark"] .tile__badge { background: #F5F5F7; color: #1D1D1F; }

.tile__clip .clip__frame { aspect-ratio: 608 / 1080; border-radius: var(--r-lg); }
.tile--studio .tile__clip { width: min(100%, 300px); justify-self: center; }

.squares {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 52vw;
  gap: 12px;
  margin-inline: calc(-1 * clamp(28px, 3vw, 40px));
  padding-inline: clamp(28px, 3vw, 40px);
  scroll-padding-inline: clamp(28px, 3vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.squares::-webkit-scrollbar { display: none; }
.squares > li { scroll-snap-align: start; }
.squares .clip__frame { aspect-ratio: 1; border-radius: 14px; }
.squares .ai-tag { left: 7px; top: 7px; font-size: 10px; padding: 3px 6px; }
.squares figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-3); transition: color 200ms var(--ease); }
.squares .clip.is-playing figcaption { color: var(--ink); }

/* chips: the caption styles in the posting band */
.chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
  font-size: 14px;
  letter-spacing: -0.016em;
  text-align: left;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.chip:active { transform: scale(0.97); }
@media (hover: hover) { .chip:hover { background: rgba(255, 255, 255, 0.2); } }

/* the memory */
.rules { display: grid; border-top: 1px solid var(--line); }
.rule {                     /* the rows ran 12 px wider for the blue flash of a rule the demo had added; gone with it */
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.rule__why { font-size: 14px; letter-spacing: -0.016em; color: var(--ink-3); }
.rule__new { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: 0.012em; }

@media (min-width: 640px) {
  .squares {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .rule { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: baseline; }
}
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--studio, .tile--flow, .tile--mem { grid-column: span 2; }
}
@media (min-width: 1068px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "studio studio year"
      "studio studio label"
      "flow   flow   flow"
      "mem    mem    time"
      "mem    mem    zero";
  }
  .tile--studio  { grid-area: studio; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .tile--studio .tile__text { align-self: start; max-width: 15em; }
  .tile--studio .tile__clip { width: 280px; grid-row: 1; grid-column: 2; }
  .tile--year    { grid-area: year; }
  .tile--label   { grid-area: label; }
  .tile--flow    { grid-area: flow; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: start; gap: 40px; }
  .tile--mem     { grid-area: mem; display: flex; flex-direction: column; }   /* two rows tall: text at the top, the rules at the foot */
  .tile--mem .rules { margin-top: auto; }
  .tile--time    { grid-area: time; }
  .tile--zero    { grid-area: zero; }
}
.tile__side { display: grid; gap: 18px; align-content: start; }
.tile--dark .tile__cap { color: var(--room-ink-2); }   /* 14 px on black: #86868B is 5.7:1, the light tiles' grey only 4.1 */

/* ── the posting app: one band of tiles, from the same pieces ─────────────
   Same bento and tiles as the studio further down, same type and colours;
   only what they say is the app that is open first. One clip plays at a
   time here too: the captions film, or the format row, never both. */

.post .section-title { margin-bottom: 0; }
.post__lead { margin-bottom: clamp(32px, 4vw, 56px); }

/* captions: a real clip with its words, drawn by js/captions.js over the film exactly where and how the app
   burns them in (an SVG in the film's own 1080 x 1920 coordinates), and every option to try. The options are
   radios: arrow keys move inside a group, Tab from group to group. Nothing here moves the layout: the film
   keeps its 9:16 box from the first paint, the words are drawn inside it, the options never change size. */
.tile--caps { align-items: start; }
.capdemo { display: grid; gap: 14px; justify-items: center; width: min(100%, 300px); justify-self: center; }
.capdemo .tile__clip { width: 100%; }
.tile--caps .clip__frame { aspect-ratio: 9 / 16; border-radius: var(--r-lg); }
.capdemo__svg {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; max-width: none;
  pointer-events: none; overflow: hidden;
  letter-spacing: normal; word-spacing: normal;   /* the engine measured the words without the page's tracking */
  font-kerning: normal; font-synthesis: none;
}
.capdemo__sound {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5); color: #FFFFFF;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 160ms var(--ease);
  visibility: hidden;                  /* there is no sound to give before js/captions.js has run (data-ready) */
}
.capdemo[data-ready] .capdemo__sound { visibility: visible; }
.capdemo__sound::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* a 44 px target */
/* the speaker, crossed out or with its waves: a mask in the button's colour, drawn once the demo runs */
.capdemo__sound { --snd: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 9.5h3.2L11.5 6v12l-4.3-3.5H4z%27/%3E%3Cpath d=%27M15.5 9.8l4.4 4.4M19.9 9.8l-4.4 4.4%27/%3E%3C/svg%3E"); }
.capdemo__sound[aria-pressed="true"] { --snd: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 9.5h3.2L11.5 6v12l-4.3-3.5H4z%27/%3E%3Cpath d=%27M15.3 9.3a4 4 0 0 1 0 5.4M17.9 6.9a7.4 7.4 0 0 1 0 10.2%27/%3E%3C/svg%3E"); }
.capdemo[data-ready] .capdemo__sound::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--snd) center / 20px no-repeat; mask: var(--snd) center / 20px no-repeat; }
@media (forced-colors: active) { .capdemo[data-ready] .capdemo__sound::before { forced-color-adjust: none; background: ButtonText; } }
.capdemo__sound:focus-visible { outline-offset: 2px; border-radius: 50%; }
@media (hover: hover) { .capdemo__sound:hover { background: rgba(0, 0, 0, 0.66); } }
.capdemo__note { font-size: 14px; letter-spacing: -0.016em; color: var(--room-ink-2); text-align: center; }

/* "Whole line | Word by word": a segmented control under the film, the white thumb slides */
.capseg {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; padding: 3px;
  border-radius: 980px; background: rgba(255, 255, 255, 0.14);
}
.capseg::before {
  content: ""; position: absolute; z-index: -1;
  top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 980px; background: #F5F5F7;
  transition: transform 260ms var(--ease-out);
}
.capseg.is-word::before, .capseg:has(input[value="word"]:checked)::before { transform: translateX(100%); }
.capseg__opt {
  position: relative; display: grid; place-items: center;
  min-height: 38px; padding: 0 10px; border-radius: 980px;
  font-size: 15px; line-height: 1.2; font-weight: 600; letter-spacing: -0.016em; text-align: center;
  color: #F5F5F7; cursor: pointer;
  transition: color 260ms var(--ease-out);
}
.capseg__opt:has(input:checked) { color: #1D1D1F; }
.capseg__opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the other options: chips in groups, each group named above it */
.capctl { display: grid; gap: 20px; align-content: start; }
.capset { display: grid; gap: 9px; }
.capset__label { font-size: 13px; line-height: 1.3; letter-spacing: -0.01em; color: var(--room-ink-2); }
.capset__opts { display: flex; flex-wrap: wrap; gap: 8px; }
label.chip { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.chip:has(input:checked) { background: #F5F5F7; color: #1D1D1F; }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip:has(input:disabled) { opacity: 0.38; cursor: default; }
@media (hover: hover) { .chip:has(input:disabled):hover { background: rgba(255, 255, 255, 0.12); } }
.capctl input[type="radio"], .capseg input[type="radio"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: inherit;               /* still focusable and still announced; the label is what you see */
}
/* Tidy rows of equal chips at every width, never one left over on its own. The groups count their columns by
   the room their own column gives them (a container query), so the phone, the stacked tile and the tile with the
   film beside it follow one rule: styles 4 + 4 from 330 px, else 3 + 3 + 2; the spoken word in the same columns;
   the animations 4 in a row from 380 px, else 2 + 2. The longest words at 14 px, in the system font or in Inter:
   "Karaoke" 50-52 px, "Einblenden" 68-70 px (measured 2026-10-17); a chip adds 16 px. */
.capctl { container: capctl / inline-size; }
.capset__opts--3, .capset__opts--2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 480px; }
.capset__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.capset__opts--3 .chip, .capset__opts--2 .chip { justify-content: center; padding: 0 8px; }
@container capctl (min-width: 330px) { .capset__opts--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container capctl (min-width: 380px) { .capset__opts--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* a phone: a film small enough that it and the styles fit one screen */
@media (max-width: 479px) { .capdemo { width: min(100%, 264px); } }
.capset__opts--sw { display: grid; grid-template-columns: repeat(6, minmax(0, 36px)); gap: 6px; }   /* six in a row, also in the narrowest column */
.sw { position: relative; display: grid; place-items: center; height: 36px; border-radius: 50%; cursor: pointer; }
.sw::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--c); }
.sw:has([value="#FFD60A"]) { --c: #FFD60A; }   /* the six accents of the app: each swatch shows its own value */
.sw:has([value="#30D158"]) { --c: #30D158; }
.sw:has([value="#64D2FF"]) { --c: #64D2FF; }
.sw:has([value="#FF375F"]) { --c: #FF375F; }
.sw:has([value="#FF9F0A"]) { --c: #FF9F0A; }
.sw:has([value="#BF5AF2"]) { --c: #BF5AF2; }
.sw::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 160ms var(--ease); }
.sw:has(input:checked)::after { box-shadow: inset 0 0 0 2px #F5F5F7; }
.sw:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .capseg::before, .capseg__opt, .sw::after { transition: none; } }
/* a phone reads it top down: what the app does, the film with its switch, then the options.
   From 760 px the film stands on the right, beside the text and the options. */
@media (min-width: 760px) {
  .tile--caps { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 4vw, 56px); row-gap: 24px; }
  .tile--caps > .tile__text { grid-column: 1; grid-row: 1; max-width: 25rem; }
  .tile--caps > .capctl { grid-column: 1; grid-row: 2; }
  .tile--caps > .tile__cap { grid-column: 1; grid-row: 3; align-self: end; }
  .tile--caps > .capdemo { grid-column: 2; grid-row: 1 / span 3; width: 300px; }
}

/* formats: one film in five frames of equal height, each as wide as its ratio asks */
.tile--fmt > .tile__text { max-width: 30em; }
.fmts { display: flex; align-items: flex-end; gap: 14px; }
.fmts > li { flex: var(--ar) 1 0; min-width: 0; }
.fmt .clip__frame { aspect-ratio: var(--ar); border-radius: 12px; }
.fmt--pad .clip__frame img, .fmt--pad .clip__frame video { object-fit: contain; }
.fmt figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 10px; font-size: 12px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; }
.fmt figcaption b { font-size: 14px; font-weight: 600; color: var(--ink); }
@media (max-width: 639px) {          /* a phone swipes the row, like the five product films */
  .fmts {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(28px, 3vw, 40px));
    padding-inline: clamp(28px, 3vw, 40px);
    scroll-padding-inline: clamp(28px, 3vw, 40px);
  }
  .fmts::-webkit-scrollbar { display: none; }
  .fmts > li { flex: none; scroll-snap-align: start; }
  .fmt .clip__frame { height: 168px; }
}

/* the work it saves: counted, two bars in proportion (32 and 5), the counting rule under them */
.tile--save > .tile__text { max-width: 30em; }
.cmp { display: grid; gap: 14px; margin: 4px 0 2px; }
.cmp__row { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); align-items: center; gap: 6px 20px; }
.cmp dt { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.cmp dd { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cmp__bar { flex: 1; min-width: 0; height: 12px; border-radius: 6px; background: var(--page-alt); overflow: hidden; }
[data-theme="dark"] .cmp__bar { background: #2C2C2E; }
.cmp__bar i { display: block; width: calc(var(--n) * 100% / 32); height: 100%; border-radius: inherit; background: var(--ink-big); transform-origin: left center; }
.cmp__row--nc .cmp__bar i { background: var(--blue); }
.cmp__val { flex: none; min-width: 7.6em; font-size: 15px; line-height: 1; letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp__val b { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
@media (max-width: 559px) { .cmp__row { grid-template-columns: minmax(0, 1fr); } }

/* the networks: the number, then all eight by name */
.tile--nets .tile__side { gap: 14px; }
.nets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.nets li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
/* The marks come from CONFIG.NETWORKS in core.js, set by site.js: a tick once a network runs, a quiet ring and
   "soon" until it has approved NebulaClip. The markup names no state, so without the script the names stand
   without a mark, and nothing but that one list has to change when a network is switched on. */
.nets li.is-live::before, .nets li.is-soon::before { content: ""; position: absolute; left: 3px; }
.nets li.is-live::before {
  top: 0.34em;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--blue); border-bottom: 1.8px solid var(--blue);
  transform: rotate(-45deg);
}
.nets li.is-soon::before { top: 0.3em; width: 10px; height: 10px; border: 1.6px solid var(--ink-2); border-radius: 50%; }
.nets__soon { font-size: 13px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; }

/* everything in the app: one line each, like a settings list on a phone, a grid from 640 px */
.tile--all > .tile__text { max-width: 34em; }
.feats { display: grid; border-top: 1px solid var(--line); }
.feat {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.feat__i { grid-row: 1 / span 3; width: 26px; height: 26px; margin-top: 1px; color: var(--ink); }
.feat b { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.022em; }
.feat span { font-size: 14px; line-height: 1.38; letter-spacing: -0.016em; color: var(--ink-2); text-wrap: pretty; }
.feat__plan { margin-top: 3px; font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
@media (min-width: 640px) {
  .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; padding-top: 26px; }
  .feat { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding: 0; border-bottom: 0; }
  .feat__i { grid-row: auto; width: 28px; height: 28px; margin: 0 0 8px; }
}
@media (min-width: 1068px) { .feats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 32px; } }

/* calendar: an example week, quiet rows like the memory's rules */
.week { display: grid; border-top: 1px solid var(--line); }
.week__row { display: grid; grid-template-columns: 70px 30px minmax(0, 1fr); align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.week__when { display: grid; gap: 1px; font-size: 13px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.week__when b { font-size: 15px; font-weight: 600; color: var(--ink); }
.week__img { width: 30px; height: auto; aspect-ratio: 620 / 964; border-radius: 6px; object-fit: cover; background: var(--page-alt); }
.js .week__img { opacity: 0; transition: opacity 360ms var(--ease); }
.js .week__img.is-in { opacity: 1; }
.week__what { display: grid; gap: 1px; min-width: 0; }
.week__nets { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.week__state { font-size: 13px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-2); }
.week__state--wait { color: #B64400; }      /* 5.4:1 on white */
[data-theme="dark"] .week__state--wait { color: #FF9F0A; }

/* statistics: one post, four networks; a dash where a network gives nothing */
.nums { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.nums th, .nums td { padding: 11px 0 11px 12px; border-bottom: 1px solid var(--line); font-weight: 400; text-align: right; }
.nums thead th { padding-top: 0; font-size: 13px; color: var(--ink-2); }
.nums th:first-child { padding-left: 0; text-align: left; }
.nums tbody th { font-weight: 600; }
.nums__none { color: var(--ink-2); }
/* at 360 px the table's narrowest width was 8 px more than the tile has, which widened the whole tile column into its padding */
@media (max-width: 379px) { .nums th, .nums td { padding-left: 8px; } }

@media (min-width: 760px) {
  .bento--post .tile--save, .bento--post .tile--nets, .bento--post .tile--all,
  .bento--post .tile--caps, .bento--post .tile--fmt, .bento--post .tile--cal, .bento--post .tile--nums, .bento--post .tile--from { grid-column: span 2; }
  .bento--post .tile--nets .nets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1068px) {
  .bento--post {
    grid-template-areas:
      "save save nets"
      "all  all  all"
      "caps caps ai"
      "caps caps days"
      "fmt  fmt  fmt"
      "cal  nums nums"
      "cal  from from";
  }
  .bento--post .tile--save  { grid-area: save; align-content: space-between; }   /* as tall as the network list beside it */
  .bento--post .tile--nets .nets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--post .tile--all   { grid-area: all; }
  .bento--post .tile--caps  { grid-area: caps; }
  .bento--post .tile--nets  { grid-area: nets; }
  .bento--post .tile--ai    { grid-area: ai; }
  .bento--post .tile--fmt   { grid-area: fmt; }
  .bento--post .tile--cal   { grid-area: cal; }
  .bento--post .tile--nums  { grid-area: nums; }
  .bento--post .tile--days  { grid-area: days; }
  .bento--post .tile--from  { grid-area: from; }
}

/* ── for providers: a spec sheet ───────────────────────────────────────── */

.providers { padding: var(--section) 0; }
.specs { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.specs__row { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 600; }
.specs dd { color: var(--ink-2); max-width: 46em; text-wrap: pretty; }
.specs code { color: var(--ink); }
.providers__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
@media (min-width: 834px) {
  .specs__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px; padding: 26px 0; }
}

/* ── pricing: three columns, Apple's compare page ──────────────────────── */

.pricing { padding: var(--section) 0; background: var(--page-alt); }
.billing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 32px; }
.billing__save { font-size: 14px; color: var(--ink-3); letter-spacing: -0.016em; }
.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 980px;
  background: rgba(118, 118, 128, 0.12);
}
[data-theme="dark"] .seg { background: rgba(118, 118, 128, 0.24); }
.seg__btn {
  min-height: 32px;
  padding: 0 18px;
  border-radius: 980px;
  font-size: 14px;
  letter-spacing: -0.016em;
  color: var(--ink);
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.seg__btn.is-on { background: var(--tile); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); }
[data-theme="dark"] .seg__btn.is-on { background: #636366; }

.plans { display: grid; gap: 20px; margin-top: clamp(36px, 4vw, 56px); }
.plan {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 16px;
  padding: 40px 28px 32px;
  border-radius: var(--r-xl);
  background: var(--tile);
  text-align: center;
}
.plan--main { box-shadow: inset 0 0 0 2px var(--blue); }
.plan__name { font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: 0.009em; }
.plan__price { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.plan__amt {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(3rem, 2.4rem + 1.6vw, 3.5rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
html[lang="de"] .plan__amt { flex-direction: row-reverse; gap: 0.14em; }
.plan__cur { font-size: 0.56em; color: var(--ink-2); }
.plan__per { font-size: 14px; color: var(--ink-3); letter-spacing: -0.016em; }
.plan__line { max-width: 22em; color: var(--ink-2); text-wrap: pretty; min-height: 3em; }
.plan__cta { margin-top: 4px; }
.rate, .plan__list { width: 100%; text-align: left; }
.rate { margin-top: 12px; border-top: 1px solid var(--line); }
.rate > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; letter-spacing: -0.016em; }
.rate dt { color: var(--ink-2); }
.rate dd { text-align: right; font-variant-numeric: tabular-nums; }
.plan__list { display: grid; gap: 10px; margin-top: 4px; font-size: 14px; letter-spacing: -0.016em; color: var(--ink-2); }
.plan__list li { position: relative; padding-left: 22px; }
.plan__list li::before {
  content: "";
  position: absolute; left: 2px; top: 0.36em;
  width: 11px; height: 6px;
  border-left: 1.6px solid var(--blue); border-bottom: 1.6px solid var(--blue);
  transform: rotate(-45deg);
}
.pricing__note {
  max-width: 46em;
  margin: 28px auto 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  text-align: center;
  text-wrap: pretty;
}
.pricing__note + .pricing__note { margin-top: 6px; }   /* the networks' line belongs to the same footnote */
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the posting plans follow the band of tiles on the same grey: one gap, not two */
.post + .pricing { padding-top: 0; }
@media (max-width: 899px) { .pricing--post .plan__line { min-height: 0; } }   /* one column: no need to align buttons */

/* ── questions: Apple's accordion ──────────────────────────────────────── */

.faq { padding: var(--section) 0; }
.faq__in { display: grid; gap: 32px; }
.qa { border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__item summary {
  position: relative;
  display: block;
  padding: 24px 48px 24px 0;
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.009em;
  cursor: pointer;
  list-style: none;
}
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary::before,
.qa__item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 1.6px;
  border-radius: 1px;
  background: var(--ink-2);
  transition: transform 260ms var(--ease-out);
}
.qa__item summary::after { transform: rotate(90deg); }
.qa__item[open] summary::after { transform: rotate(0deg); }
.qa__item p { padding: 0 48px 26px 0; max-width: 46em; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
@media (min-width: 1068px) {
  .faq__in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; }
}

/* ── the waiting list: the night, once ─────────────────────────────────── */

.wait { padding: 0 0 clamp(48px, 6vw, 96px); }
.wait__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(560px, 50vw, 680px);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px) clamp(200px, 22vw, 300px);
  border-radius: var(--r-xl);
  background: var(--room);
  color: var(--room-ink);
  text-align: center;
}
[data-theme="dark"] .wait__card { box-shadow: inset 0 0 0 1px var(--room-line); }
.wait__sky {
  position: absolute;
  left: -6%;
  bottom: 0;
  width: 112%;
  max-width: none;
  height: auto;
  min-height: 260px;
  object-fit: cover;
  object-position: 50% 100%;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 50%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 50%);
  pointer-events: none;
  z-index: -1;
}
.wait__stars {
  position: absolute;
  inset: 0 0 35% 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 23% 42%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 31% 12%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 44% 30%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 57% 9%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 63% 38%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 20%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 84% 44%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 14%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 6% 36%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 38% 52%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.1px 1.1px at 70% 55%, rgba(255,255,255,.45), transparent 60%);
}
.wait__in { position: relative; display: grid; justify-items: center; gap: 16px; }
.wait__body { max-width: 30em; font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.3125rem); line-height: 1.38; letter-spacing: 0.011em; color: var(--room-ink-2); text-wrap: pretty; }
.wait__form { display: flex; gap: 10px; width: 100%; max-width: 480px; margin-top: 14px; }
.wait__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.12);
  color: #F5F5F7;
  font: 17px/1 var(--font);
  letter-spacing: -0.022em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 160ms var(--ease);
}
.wait__input::placeholder { color: rgba(245, 245, 247, 0.5); }
.wait__input:focus { outline: none; box-shadow: inset 0 0 0 1px #2997FF, 0 0 0 4px rgba(41, 151, 255, 0.3); }
.wait__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #FF6961; }
.wait__form .btn { min-height: 48px; }
.wait__note { font-size: 14px; letter-spacing: -0.016em; color: var(--room-ink-2); max-width: 34em; }
.wait__note[data-state="ok"] { color: #F5F5F7; }
.wait__note[data-state="error"] { color: #FF6961; }
@media (max-width: 479px) {
  .wait__form { flex-direction: column; }
  .wait__input { flex: none; width: 100%; }
  .wait__form .btn { width: 100%; }
}

/* ── footer: Apple's small print ───────────────────────────────────────── */

.foot { padding: 20px 0 calc(28px + env(safe-area-inset-bottom)); background: var(--page-alt); font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; color: var(--ink-2); }
[data-theme="dark"] .foot { background: #161617; }
.foot__in { display: grid; gap: 14px; }
/* Apple's "More ways to shop" line: the way into the app, in the small print */
.foot__more { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.foot__more a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; }   /* in running text a link needs more than its colour */
.foot__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.foot__brand .wordmark { color: var(--ink); }
/* Seven links wrap on a phone. Each link draws its bar 1 px left of itself; for the first link of a
   row that pixel lies outside the list and is cut, so no row starts with a stray "|". The links
   never overlap and stand 24 px tall (WCAG 2.5.8; a negative margin made them overlap and failed
   target-size), and the focus ring sits inside the link, where the cut cannot reach it. */
.foot__links { display: flex; flex-wrap: wrap; margin-left: -10px; overflow: hidden; }
.foot__links a { position: relative; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 6px; color: var(--ink); line-height: 1; }
.foot__links a::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 1px; background: var(--line); pointer-events: none; }
.foot__links a:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .foot__links a:hover { text-decoration: underline; } }
@media (min-width: 834px) {
  .foot__in { grid-template-columns: 1fr auto; align-items: center; }
  .foot__more, .foot__brand { grid-column: 1 / -1; }
}

/* ── legal page and 404 (shared with V2's markup) ─────────────────────── */

.legal-page { padding: clamp(48px, 7vw, 96px) 0 var(--section); }
.legal-page__in { display: grid; gap: 16px; }
.legal-page__in > * { max-width: 46rem; }
.legal-page .h2 { font-size: clamp(2.125rem, 1.25rem + 2.9vw, 3.5rem); line-height: 1.07; font-weight: 600; letter-spacing: -0.005em; }
.legal-page .lead { font-size: 21px; line-height: 1.38; letter-spacing: 0.011em; color: var(--ink-2); }
.legal h2 { margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: 0.007em; }
.legal h3 { margin: 26px 0 6px; font-size: 17px; font-weight: 600; }
.legal p, .legal li { color: var(--ink-2); text-wrap: pretty; }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 6px; margin: 10px 0 12px; padding-left: 1.2em; }
.legal a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; }   /* in running text a link needs more than its colour */
.legal .btn { margin-top: 8px; }
.legal__updated { margin-top: 44px !important; font-size: 12px; color: var(--ink-3) !important; }

/* The long policy pages (privacy, terms) carry both languages in the markup,
   one [data-copy] block each, and the language switch shows one. English
   until the copy layer says otherwise, so the page reads complete without
   JavaScript too. */
html:not([data-lang="de"]) [data-copy="de"],
html[data-lang="de"] [data-copy="en"] { display: none; }
.legal ol { display: grid; gap: 6px; margin: 10px 0 12px; padding-left: 1.4em; }
.legal li > ul, .legal li > ol { margin: 6px 0 2px; }
.legal a { overflow-wrap: anywhere; }      /* long addresses wrap on a phone instead of running off it */
.legal h4 { margin: 18px 0 4px; font-size: 15px; font-weight: 600; }
.legal mark { padding: 0 3px; border-radius: 4px; background: #FFE58A; color: #1D1D1F; }   /* a placeholder, meant to be seen */
.legal__toc { margin-top: 28px; }
.legal__toc .legal__toc-h { font-size: 17px; font-weight: 600; color: var(--ink); }
.legal__toc ol { display: block; columns: 2 17rem; column-gap: 40px; }
.legal__toc li { break-inside: avoid; margin-bottom: 6px; }
.legal__box { margin: 16px 0; padding: 18px 22px; border-radius: var(--r-lg); background: var(--page-alt); }
[data-theme="dark"] .legal__box { background: var(--tile); }
.legal__box > :first-child { margin-top: 0; }
/* A pill in the text may wrap: the long "deleted" confirmation in the delete
   button widened the column and cut the text off on a phone (seen at 390 px). */
.legal .btn { white-space: normal; max-width: 100%; padding-block: 7px; }

/* The legal pages put "Back to the site" where the front page has its menu
   button. On a phone, next to the language switch at touch size, it gets a
   compact cut: at full size "Zurück zur Seite" overran the bar by 2 px at
   390 px; compact, 7 px are left there (measured). Below 390 px it does not
   fit at all (8 px over at 375), so it gives way and the logo leads home. */
@media (max-width: 479px) {
  .nav__back { padding: 0 12px; font-size: 13px; }
  .nav__right:has(.nav__back) { gap: 6px; }
}
@media (max-width: 389px) { .nav__back { display: none; } }
.nf { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; padding: 64px 0; }
.nf__in { display: grid; gap: 16px; justify-items: start; }
.nf__code { font-size: 21px; font-weight: 600; color: var(--ink-3); }
.nf .h2 { font-size: clamp(2.125rem, 1.25rem + 2.9vw, 3.5rem); line-height: 1.07; font-weight: 600; }
.nf .lead { font-size: 19px; color: var(--ink-2); max-width: 36em; }

/* ── touch: 44 px where a finger has to hit ───────────────────────────── */

@media (hover: none) {
  .lang__btn { min-width: 44px; height: 44px; }
  .nav__burger { width: 44px; height: 44px; }
}

/* ── scroll-driven motion: compositor only, only where it is native ───── */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {


    .tile, .plan, .hl__scroller {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    /* movement only, no fade: a tile is fully legible at every point of the scroll */
    @keyframes rise { from { transform: translateY(64px) scale(0.98); } to { transform: none; } }

    /* the two bars of the work it saves fill as they come up; numbers and labels never move */
    .cmp__bar i {
      animation: fill linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
    @keyframes fill { from { transform: scaleX(0.04); } to { transform: none; } }

  }

  /* the clouds drift, slowly; a time animation, so every browser gets it */
  .wait__sky { animation: drift 70s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}