/* WeMotion — the marketing site. One look on purpose: a black stage, Apple's pro-page type, white and grey for everything
   the page draws, and the WeMotion spectrum (cyan → violet → magenta → orange) only where light falls: the films, the mark.
   Layout: a 1200px column; sticky "scenes" whose progress the page drives (site.js); live films are canvases over their
   posters (films.js). One motion grammar: things arrive on --ease-arrive in about a second, leave on --ease-exit in a fifth
   of one, and anything the scroll drives is linear, smoothed by a short follow (site.js). */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }   /* the fallback for SF Pro, Latin only (tools/sync-runtime.mjs) */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }   /* so Inter's late arrival doesn't re-wrap a headline */

:root {
  --bg: #000;
  --bg-1: #0a0a0c;
  --bg-2: #111114;
  --surface: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.1);
  --line-2: rgba(255,255,255,.16);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #86868b;
  --violet: #9B6BFF;
  --magenta: #DB34F2;
  --link: #d38bff;
  --spectrum: linear-gradient(100deg, #5CE1FF 0%, #9B6BFF 34%, #FF4FD8 66%, #FF8A3D 100%);
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-arrive: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --col: min(1200px, calc(100vw - 2 * var(--gutter)));
  --col-wide: min(1440px, calc(100vw - 2 * max(var(--gutter), 48px)));   /* media runs wider than text on big screens */
  --nav-h: 52px;
  --section: clamp(120px, 12vw, 168px);   /* the space between sections, always from one place */
  --head-gap: clamp(40px, 4vw, 56px);     /* a section's heading to its media */
  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.47 var(--font-text); letter-spacing: -.022em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 14px; border-radius: 99px; }
.skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.show-sm, .on-touch { display: none; }
@media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (hover: none) { .on-fine { display: none; } .on-touch { display: inline; } }

/* ───── type ───── */
.display { font: 600 clamp(48px, 7.2vw, 112px)/1.04 var(--font); letter-spacing: -.02em; text-wrap: balance; }
.display.small { font-size: clamp(40px, 5.4vw, 80px); }
.headline { font: 600 clamp(34px, 4.6vw, 64px)/1.06 var(--font); letter-spacing: -.016em; text-wrap: balance; }
.lede { font: 600 clamp(19px, 1.7vw, 24px)/1.33 var(--font); letter-spacing: .004em; color: var(--text-3); max-width: 30em; text-wrap: balance; }
.sub { font: 600 clamp(17px, 1.45vw, 21px)/1.38 var(--font); letter-spacing: .011em; color: var(--text-3); max-width: 31em; text-wrap: pretty; }
.section-head .sub { text-wrap: balance; }
.lede strong, .sub strong { color: var(--text); font-weight: 600; }   /* Apple's grey paragraph with its key phrase in white */
.eyebrow { font: 600 clamp(17px, 1.4vw, 21px)/1.2 var(--font); letter-spacing: .004em; color: var(--text-2); }
.fine { font-size: 14px; color: var(--text-3); letter-spacing: -.01em; }
.br-lg { display: none; }
@media (min-width: 681px) { .br-lg { display: inline; } }

/* ───── buttons: a press answers with a small give ───── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 26px; border: 0; border-radius: 99px; font: 600 17px/1 var(--font-text); letter-spacing: -.02em; cursor: pointer;
  text-decoration: none !important; white-space: nowrap; transition: background .3s, box-shadow .3s, color .3s, transform .25s var(--ease); }
.btn-sm { height: 30px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 58px; padding: 0 32px; font-size: 19px; }
.btn-light { background: #f5f5f7; color: #000; }
.btn-ghost { color: var(--text); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) { .btn-light:hover { background: #fff; } .btn-ghost:hover { background: rgba(255,255,255,.14); } }
.more-link { color: var(--link); font-size: 19px; letter-spacing: -.01em; }
.more-link::after { content: " ›"; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; }

/* ───── nav ───── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .4s, box-shadow .4s; }
.nav:not(.is-solid) { background: linear-gradient(rgba(0,0,0,.45), transparent); }
.nav.is-solid { background: rgba(10,10,12,.72); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 1px 0 var(--line); }
.nav-in { width: var(--col); margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--text); text-decoration: none !important; }
.brand-logo { display: block; width: 120px; height: 24px; }
.links { display: flex; gap: 28px; margin-left: auto; }
.links a { color: var(--text-2); font-size: 13px; letter-spacing: -.01em; transition: color .2s; text-decoration: none !important; }
.links a:hover, .links a.is-here { color: var(--text); }

/* ───── live films ───── */
.film { position: relative; overflow: hidden; background: #000; }
.film .poster, .film .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film picture { display: contents; }
.film .film-canvas { opacity: 0; transition: opacity .9s var(--ease); }
.film .film-canvas.is-live { opacity: 1; }

/* ───── the first screen ───── */
.hero-track { height: 185vh; }   /* the hero stays for most of a screen while its word winds into the vortex (site.js scene 'hero') */
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; display: grid; align-items: end; justify-items: center; padding: 0 var(--gutter) clamp(44px, 8vh, 100px); overflow: hidden; isolation: isolate; }
.hero-film { position: absolute; inset: -6% -4% 22%; z-index: -2; background: #000; transform: scale(var(--hs, 1)); will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent); }   /* the galaxy has no edges */
.hero-film .poster, .hero-film .film-canvas { object-position: 50% 50%; }
/* the particles open the page: with films coming, the hero starts on black and the galaxy swirls in (its still is for
   reduced motion, no WebGL, or a film that is slow to arrive) */
.films .hero-film:not(.is-failed) .poster { opacity: 0; }
.films .hero-film:not(.is-live):not(.is-failed) .poster { animation: lateStill .8s var(--ease) 4s forwards; }
@keyframes lateStill { to { opacity: 1; } }
.hero-film .poster { transition: opacity .8s var(--ease); }
.films .final-film:not(.is-live):not(.is-failed) .poster { opacity: 0; transition: opacity .8s var(--ease); }   /* the closing galaxy rises out of black, not out of its own finished frame */
.still .final-film .poster, .films .final-film.is-late:not(.is-live) .poster { opacity: 1; }
.hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.6) 64%, #000 90%); }
.hero .display { font-size: clamp(44px, 5.6vw, 80px); }   /* the word is the picture; this is its headline */
.hero-copy { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 980px; transform: translate3d(0, var(--cy, 0px), 0); opacity: var(--co, 1); }
.hero-copy .ctas { margin-top: 14px; }
.hero-hint { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 8px; white-space: nowrap; opacity: var(--co, 1); }
.hero:not(:has(.hero-film.is-live)) .hero-hint { visibility: hidden; }   /* "live" only when it is */
.dot { width: 6px; height: 6px; border-radius: 50%; background: #ff4fd8; display: inline-block; }
/* the copy arrives on the compositor (nothing on the main thread can hold it back); with the galaxy coming it waits for it */
.hero .in { animation: heroIn 1s var(--ease-arrive) var(--d, 0s) both; }
.films .hero .in, .films .hero-hint { animation-play-state: paused; }   /* the copy rises as the word's last letters lock in (site.js .hero-go) */
.films.hero-go .hero .in, .films.hero-go .hero-hint { animation-play-state: running; }
.hero-hint { animation: hintIn 1.2s var(--ease-arrive) .55s backwards; }   /* the proof line last; afterwards --co owns its opacity */
@keyframes hintIn { from { opacity: 0; } }
.js:not(.films):not(.still) .hero-track { height: auto; }   /* no film to wind into a vortex: nothing to pin */
.js:not(.films):not(.still) .hero { position: relative; }
.js:not(.films):not(.still) .reveal { margin-top: 0; }   /* nothing to rise over */
.films.hero-formed .hero-film:not(.is-failed):not(.is-live) .poster { opacity: 1; animation: none; }   /* made again after it formed: the formed word stays, no black, no second intro */
@supports (animation-timeline: view()) {   /* the effects row rides the scroll on the compositor (site.js sets --fx-end), through any stall */
  html:not(.still) .fx-track { view-timeline: --fxv block; }
  html:not(.still) .fx-row { animation: fxRun linear both; animation-timeline: --fxv; animation-range: contain 15vh contain calc(100% - 15vh); }
  @keyframes fxRun { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--fx-end, 0px), 0, 0); } }
}
@supports (animation-timeline: scroll()) {   /* the copy steps back on the compositor, so a film building can't hold it */
  html:not(.still) .hero-copy { animation: heroOut linear both; animation-timeline: scroll(root block); animation-range: 3vh 28vh; }
  html:not(.still) .hero-hint { animation: heroFade linear both; animation-timeline: scroll(root block); animation-range: 0 22vh; }
  @keyframes heroOut { from { animation-timing-function: cubic-bezier(.4, 0, 1, 1); } to { transform: translate3d(0, -48px, 0); opacity: 0; } }
  @keyframes heroFade { to { opacity: 0; } }
}
@keyframes heroIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } }

/* ───── reveal-on-scroll (only with the script running; never hiding what has focus) ───── */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s var(--ease-arrive) var(--d, 0s), transform 1.2s var(--ease-arrive) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal].is-now { transition: none; }
.hero-copy:focus-within, .final-copy:focus-within, .js [data-reveal]:focus-within { opacity: 1; transform: none; }

/* ───── sections ───── */
section { position: relative; }
.section-head { width: var(--col); margin: 0 auto; display: grid; gap: 18px; justify-items: center; text-align: center; }
.section-head .sub { margin-top: 4px; }

/* ───── meet motion: the film fills the screen, then the camera pulls back and it's playing inside WeMotion ───── */
.reveal { position: relative; z-index: 1; margin-top: -50vh; margin-top: -50svh; padding-top: var(--section); }   /* it rises over the end of the vortex: no dead black between */
.reveal > .section-head { margin-bottom: clamp(32px, 5vh, 56px); }
.reveal-track { height: 320vh; }   /* the film builds (the first ~40%), then the camera pulls back */
.reveal-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; padding: var(--nav-h) var(--gutter) 24px;
  -webkit-mask-image: linear-gradient(#0000, #000 var(--edge, 0vh)); mask-image: linear-gradient(#0000, #000 var(--edge, 0vh)); }
.reveal-stage > .mac { width: min(var(--col-wide), 100%, calc((100svh - 110px) * 1.6)); }
.reveal .mac { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--ms, 1)); transform-origin: 37% 50.4%; background: #000; box-shadow: none; }
.reveal .mac::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.26); opacity: var(--ui, 1); }
.reveal .mac-shot, .reveal .mac-bar { opacity: var(--ui, 1); }
.reveal-stage::before { content: ""; position: absolute; inset: 6% 2%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(120,70,200,.32), rgba(120,70,200,.12) 55%, transparent 100%); opacity: var(--ui, 0); will-change: opacity; }   /* the film's light, on the desk */
/* Motion's steps, captioned while the film builds itself */
.build-cap { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 99px;
  font-size: 15px; color: var(--text-2); white-space: nowrap; background: rgba(18,18,22,.66); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  opacity: var(--bc, 0); transform: translate3d(-50%, calc((1 - var(--bc, 0)) * 10px), 0); pointer-events: none; }
.build-cap b { color: var(--text); font-weight: 600; }
.bc-ava { width: 28px; height: 28px; margin: -4px; }
.bc-text { transition: opacity .18s var(--ease-exit); }
.bc-text.swap { opacity: 0; }
.mac { position: relative; width: 100%; aspect-ratio: 1512 / 945; border-radius: var(--r-md); overflow: hidden; background: #141414;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1.5px rgba(0,0,0,.9), 0 30px 80px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4); will-change: transform; }
.mac-shot { width: 100%; height: 100%; object-fit: cover; }
.mac-bar { position: absolute; left: 1.3%; top: 2.6%; display: flex; gap: .62%; width: 6%; z-index: 2; }
.mac-bar i { flex: 0 0 auto; width: clamp(7px, 1.03vw, 13px); aspect-ratio: 1; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.mac-bar i:nth-child(2) { background: #febc2e; } .mac-bar i:nth-child(3) { background: #28c840; }
.mac-film { position: absolute; left: 1.587%; top: 18.6%; width: 70.83%; height: 63.64%; background: transparent; border-radius: 2px; }
.mac-film.is-live .poster { opacity: 0; }   /* the screenshot has the frame under it; until it's live the still is the film */

/* ───── statement: light moves through the words as you scroll ───── */
.statement-track { height: 240vh; }
.statement-text { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; width: var(--col); margin: 0 auto;
  font: 600 clamp(32px, 4.2vw, 60px)/1.12 var(--font); letter-spacing: -.02em; }
.st-in { display: block; }
.st-line { display: inline; }
@media (min-width: 681px) { .st-line { display: block; } }
.statement-text .w { color: rgb(245 245 247 / var(--a, .16)); }
.statement-text .w.is-hot.lit { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }   /* the colour only when the light reaches it */

/* ───── notes on the film: the heading stays with the story ───── */
.notes { padding-top: var(--section); }
.notes-track { height: 520vh; }
.notes-stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: var(--nav-h); width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(28px, 5vh, 52px); align-items: center; }
.notes-head { grid-column: 1 / -1; width: auto; gap: 10px; }
.notes-head .headline { font-size: clamp(32px, 3.6vw, 48px); }
@media (min-width: 1001px) {   /* the page's central demo as big as the other media */
  .notes-stage { width: var(--col-wide); grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .notes-frame { width: min(100%, calc((100svh - 330px) * 16 / 9)); justify-self: end; }
}
.notes-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #0d0d10; box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.6); padding: 0 0 54px; }
.notes-film { aspect-ratio: 16 / 9; width: 100%; }
.notes-ghost { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(100deg, transparent calc(var(--m) - 3%), #000 calc(var(--m) + 3%)); mask-image: linear-gradient(100deg, transparent calc(var(--m) - 3%), #000 calc(var(--m) + 3%)); }
.notes-overlay { position: absolute; inset: 0 0 54px; pointer-events: none; z-index: 2; }
.np { position: absolute; left: var(--x); top: var(--y); width: 34px; height: 34px; margin: -34px 0 0 0; border-radius: 17px 17px 17px 4px; display: grid; place-items: center;
  background: rgba(20,20,24,.6); box-shadow: inset 0 0 0 2px #fff, 0 4px 16px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 700 15px/1 var(--font-text); color: #fff; opacity: 0; transform: scale(.4); transform-origin: 0 100%; transition: opacity .35s var(--ease), transform .55s var(--ease-arrive), background .35s, box-shadow .35s; }
.np.on { opacity: 1; transform: none; }
.np.work { background: var(--magenta); box-shadow: 0 0 0 4px rgba(219,52,242,.35), 0 6px 20px rgba(0,0,0,.5); }
.np.done { background: rgba(28,28,32,.85); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75), 0 4px 14px rgba(0,0,0,.5); }
.np.gone { opacity: 0; transform: scale(.6); }
.np-glyph { display: block; }
.np.work .np-glyph { font-size: 0; }
.np.work .np-glyph::before { content: "•••"; font-size: 13px; letter-spacing: 1px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.np.done .np-glyph { font-size: 0; } .np.done .np-glyph::before { content: "✓"; font-size: 16px; }
.nb { position: absolute; left: calc(var(--x) + 46px); top: calc(var(--y) - 40px); width: max-content; max-width: min(300px, calc(100% - var(--x) - 58px)); padding: 12px 14px; border-radius: var(--r-md); display: grid; gap: 4px;
  background: rgba(36,36,40,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 16px 40px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; transform: translate3d(-8px, 6px, 0) scale(.96); transform-origin: 0 50%; transition: opacity .2s var(--ease-exit), transform .2s var(--ease-exit); }
.nb.on { opacity: 1; transform: none; transition: opacity .45s var(--ease-arrive), transform .6s var(--ease-arrive); }
.nb2 { top: calc(var(--y) - 24px); }   /* beside its pin, clear of the title the other note is about */
.nb-where { font-size: 12px; color: var(--text-2); }
.nb-text { font: 500 16px/1.3 var(--font-text); min-height: 1.3em; }
.nb-text::after { content: ""; display: inline-block; width: 2px; height: 1.1em; vertical-align: -.18em; margin-left: 1px; background: #0a84ff; animation: caret 1s steps(1) infinite; }
.nb.typed .nb-text::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.notes-chip { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 99px; font-size: 14px;
  background: rgba(20,20,24,.7); box-shadow: inset 0 0 0 1px rgba(219,52,242,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--ease); }
.notes-chip.on { opacity: 1; transform: none; }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--magenta); animation: blink 1s infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
.notes-paused { position: absolute; left: 50%; top: 50%; display: flex; gap: 10px; transform: translate(-50%, -50%) scale(.8); opacity: 0; }
.notes-paused span { width: 18px; height: 58px; border-radius: 6px; background: rgba(255,255,255,.9); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.notes-paused.flash { animation: pauseflash 1.1s var(--ease) forwards; }
@keyframes pauseflash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
.notes-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 32px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-2); }
/* like QuickTime: the button shows what a click would do (pause while it plays, play while paused) */
.nbar-play { width: 10px; height: 12px; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }
.notes-bar.paused .nbar-play { width: 0; height: 0; background: none; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.nbar-rail { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); }
.nbar-fill { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 2px; background: #fff; }
.nbar-mark { position: absolute; top: -3px; left: 40%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #fff; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .3s, background .3s; }
.nbar-mark.m2 { margin-left: 7px; }
.nbar-mark.on { opacity: 1; } .nbar-mark.work { background: var(--magenta); box-shadow: none; } .nbar-mark.done { background: rgba(255,255,255,.5); box-shadow: none; }
/* the steps: a quiet list along a rule; the one you're on is white, with its line of explanation */
.notes-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--line-2); }
.notes-steps li { position: relative; padding: 13px 0 13px 24px; }
.notes-steps::after { content: ""; position: absolute; left: -1px; width: 2px; top: var(--iy, 11px); height: var(--ih, 24px); background: var(--text); transition: top .6s var(--ease-arrive), height .6s var(--ease-arrive); }   /* one rule that travels (site.js) */
.notes-steps .sn { display: none; }
.notes-steps h3 { font: 600 19px/1.25 var(--font); letter-spacing: -.01em; color: var(--text-3); transition: color .4s; }
.notes-steps li.on h3 { color: var(--text); }
.notes-steps p { font-size: 17px; line-height: 1.47; color: var(--text-2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease-arrive), opacity .5s, margin .5s; }
.notes-steps li.on p { max-height: 7em; opacity: 1; margin-top: 6px; min-height: calc(2 * 1.47em); }   /* every step two lines tall: the list never re-centres */

/* ───── segmented controls ───── */
.modes-switch { position: relative; display: inline-grid; grid-auto-flow: column; padding: 4px; border-radius: 99px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line); }
.modes-switch button { position: relative; z-index: 1; border: 0; background: none; padding: 10px 30px; border-radius: 99px; font: 600 16px/1 var(--font-text); color: var(--text-2); cursor: pointer; transition: color .3s; }
.modes-switch button[aria-selected="true"] { color: #000; }
.modes-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: #f5f5f7; transition: transform .5s var(--ease-arrive); }
.modes-switch.is-pro .modes-thumb { transform: translateX(100%); }

/* ───── vibe & pro ───── */
.modes { padding-top: var(--section); display: grid; justify-items: center; gap: var(--head-gap); }
.modes { gap: 24px; } .modes .modes-switch { margin-top: 0; }
.modes-stage { width: min(var(--col-wide), 1100px, max(280px, calc((100svh - 250px) * 1.6))); }
.modes-switch, .modes-switch button { scroll-margin-top: calc(var(--nav-h) + 18px); }
.mac-static { transform: none; }
.mode-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.01); transition: opacity .18s var(--ease-exit), transform .18s var(--ease-exit); }
.mode-shot.is-on { opacity: 1; transform: none; transition: opacity .45s var(--ease-arrive) .12s, transform .8s var(--ease-arrive) .12s; }   /* a dip, never two films over each other */
.modes-panel { display: grid; justify-items: center; gap: 28px; width: 100%; }
.modes-panel:focus-visible { outline-offset: 8px; }
.modes-copy { display: grid; width: min(720px, var(--col)); text-align: center; }
.mode-copy { grid-area: 1 / 1; opacity: 0; transform: translateY(-6px); transition: opacity .18s var(--ease-exit), transform .18s var(--ease-exit); }
.mode-copy.is-on { opacity: 1; transform: none; transition: opacity .45s var(--ease-arrive) .12s, transform .6s var(--ease-arrive) .12s; }
.mode-copy h3 { font: 600 28px/1.1 var(--font); letter-spacing: -.016em; }
.mode-copy p { color: var(--text-2); font-size: 19px; margin-top: 8px; }

/* ───── effects: a row that slides sideways as you scroll down, at your pace ───── */
.effects { padding-top: var(--section); }
.fx-track { height: 340vh; }   /* site.js sizes it from the row, so the row moves about as far as you scroll */
.fx-stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: var(--nav-h); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--head-gap); overflow: hidden; }
.fx-head { justify-items: start; text-align: left; }
.fx-row { display: flex; gap: 22px; padding: 0 calc((100vw - var(--col)) / 2); transform: translate3d(var(--fx, 0px), 0, 0); will-change: transform; width: max-content; }
.fx-card { position: relative; margin: 0; flex: 0 0 auto; width: clamp(240px, 20.5vw, 310px); aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: #0b0b0d; box-shadow: 0 0 0 1px var(--line); }
.fx-card video { width: 100%; height: 100%; object-fit: cover; transition: filter .5s var(--ease); }
@media (hover: hover) { .fx-row:hover .fx-card:not(:hover) video { filter: brightness(.72); } }   /* a quiet focus, no movement */
.fx-card figcaption { position: absolute; inset: auto 0 0; padding: 44px 18px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 600 17px/1.1 var(--font); letter-spacing: -.01em;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 55%, transparent); }
.fx-card figcaption span { font: 500 13px/1 var(--font-text); color: rgba(255,255,255,.82); letter-spacing: 0; }
.fx-more { width: var(--col); margin: calc(24px - var(--head-gap)) auto 0; text-align: left; }

/* ───── built in (bento): titles share their rows; each card's little scene plays once as it arrives ───── */
.features { padding-top: var(--section); display: grid; gap: var(--head-gap); justify-items: center; }
.bento { width: var(--col); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.cell { position: relative; grid-column: span 2; border-radius: var(--r-xl); padding: 28px; display: grid; grid-template-rows: minmax(190px, 1fr) auto auto; gap: 8px; min-height: 340px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.08); }
@supports (grid-template-rows: subgrid) {
  .bento { grid-auto-rows: auto; }
  .cell { grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; min-height: 0; }
  .cell-art { min-height: 190px; }
  .c-compare .compare-art { min-height: 300px; }
}
.cell h3 { font: 600 24px/1.12 var(--font); letter-spacing: -.012em; text-wrap: balance; }
.cell p { font-size: 17px; line-height: 1.47; color: var(--text-2); }
.cell-art { position: relative; display: grid; place-items: center; min-height: 190px; margin-bottom: 12px; }
.c-brand, .c-compare { grid-column: span 4; }
.c-formats { grid-column: span 6; }
.cell .cell-art * { animation-play-state: paused; }
.cell.is-in .cell-art * { animation-play-state: running; }
.brand-art { gap: 14px; align-content: center; }
.url { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line); font: 500 15px/1 var(--font-text); color: var(--text); }
.lock { width: 10px; height: 12px; border-radius: 2px; background: var(--text-2); position: relative; } .lock::before { content: ""; position: absolute; left: 2px; top: -5px; width: 6px; height: 7px; border: 1.5px solid var(--text-2); border-bottom: 0; border-radius: 4px 4px 0 0; }
.swatches { display: flex; gap: 8px; } .swatches i { width: 40px; height: 40px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); animation: pop 1.1s var(--ease-arrive) .3s both; }
.swatches i:nth-child(2) { animation-delay: .42s; } .swatches i:nth-child(3) { animation-delay: .54s; } .swatches i:nth-child(4) { animation-delay: .66s; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.type-sample { font: 800 34px/1 var(--font); letter-spacing: -.04em; } .type-sample small { font: 500 12px var(--font-text); color: var(--text-3); letter-spacing: 0; margin-left: 6px; }
.music-art { grid-auto-flow: column; align-items: center; gap: 5px; padding: 0 30px; }
.music-art i { width: 6px; height: 78%; border-radius: 3px; background: rgba(255,255,255,.85); transform: scaleY(var(--h)); animation: bar 1.1s var(--ease-arrive) calc(.3s + var(--i) * 35ms) both; }   /* a waveform that draws itself once */
@keyframes bar { from { transform: scaleY(.08); } }
.type-art { align-content: center; gap: 10px; }
.ts-stack { display: grid; place-items: center; }
.ts { grid-area: 1 / 1; font-size: 96px; line-height: 1; transition: opacity .38s var(--ease); }
.tname { font-size: 13px; color: var(--text-3); }
.compare-art { margin: -28px -28px 14px; min-height: 0; overflow: hidden; cursor: ew-resize; touch-action: pan-y; border-radius: var(--r-xl) var(--r-xl) 0 0; --cut: 50%; }
.compare-art > img, .cmp-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cut)) 0 0); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.5); }
.cmp-handle span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.cmp-handle span::before, .cmp-handle span::after { content: ""; position: absolute; top: 14px; border: 6px solid transparent; }
.cmp-handle span::before { left: 3px; border-right-color: #000; } .cmp-handle span::after { right: 3px; border-left-color: #000; }
.cmp-l, .cmp-r { position: absolute; top: 14px; padding: 5px 10px; border-radius: 99px; font-size: 12px; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cmp-l { left: 14px; } .cmp-r { right: 14px; }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; pointer-events: none; }   /* keyboard and screen readers; pointers use the card (a thumb scrolling past mustn't move it) */
.compare-art:has(.cmp-range:focus-visible) .cmp-handle span { outline: 2px solid var(--violet); outline-offset: 3px; }
.export-art { align-content: center; justify-items: center; gap: 4px; }
.export-art b { font: 600 104px/.9 var(--font); letter-spacing: -.03em; color: var(--text); }
.export-art span { font: 600 18px/1 var(--font); color: var(--text-2); letter-spacing: .02em; }
.attach-art { grid-auto-flow: column; align-content: center; justify-content: center; gap: 10px; }
.attach-art span { width: 58px; height: 74px; border-radius: var(--r-sm); display: grid; place-items: end center; padding-bottom: 10px; font: 700 11px/1 var(--font-text); color: var(--text-2);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px var(--line); animation: lift 1.2s var(--ease-arrive) .3s both; }
.attach-art span:nth-child(2) { animation-delay: .4s; } .attach-art span:nth-child(3) { animation-delay: .5s; } .attach-art span:nth-child(4) { animation-delay: .6s; }
@keyframes lift { from { transform: translateY(14px); opacity: 0; } }
.formats-art { grid-auto-flow: column; align-items: end; justify-content: center; gap: 24px; padding-top: 30px; }
.formats-art i { display: block; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); background: url(../../media/posters/hero-particles-480.webp) center / cover; }
.formats-art .v, .formats-art .s { background-image: url(../../media/posters/hero-particles-portrait-480.webp); }   /* reframed, as the card says */
.formats-art .v { background-size: 82% auto; background-repeat: no-repeat; background-color: #000; }
.formats-art .w { width: 240px; height: 135px; } .formats-art .v { width: 96px; height: 171px; } .formats-art .s { width: 140px; height: 140px; }
.local-art { align-content: center; justify-items: center; gap: 12px; }
.folder { width: 96px; height: 74px; border-radius: var(--r-sm); background: linear-gradient(180deg, #6aa9ff, #2f6fdb); position: relative; box-shadow: 0 12px 30px rgba(47,111,219,.35); }
.folder::before { content: ""; position: absolute; left: 0; top: -9px; width: 40px; height: 14px; border-radius: 6px 6px 0 0; background: #4f8ff0; }
.fname { font-size: 13px; color: var(--text-2); }

/* ───── compare ───── */
.compare { padding-top: var(--section); display: grid; gap: var(--head-gap); justify-items: center; }
.table-wrap { width: var(--col); overflow-x: auto; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line); background: var(--bg-1); }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15.5px; table-layout: fixed; }
.cmp thead th:first-child { width: 32%; } .cmp thead th:not(:first-child) { width: 17%; }
.cmp th, .cmp td { padding: 18px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { font: 600 14px/1.25 var(--font-text); color: var(--text-2); vertical-align: bottom; padding-top: 22px; border-bottom-color: var(--line-2); }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--text); }
.cmp td { color: transparent; font-size: 0; position: relative; }
.cmp td::before { font-size: 18px; }
.cmp td.y::before { content: "✓"; content: "✓" / ""; color: var(--text-2); }
.cmp td.n::before { content: "–"; content: "–" / ""; color: var(--text-3); opacity: .6; }
.cmp td.p::before { content: "Partly"; content: "Partly" / ""; font-size: 13px; color: var(--text-3); }
.cmp .us { background: rgba(255,255,255,.05); }
.cmp thead th.us { color: var(--text); font: 600 17px/1.2 var(--font); }
.cmp td.us.y::before { color: var(--text); font-weight: 600; font-size: 20px; }
.cmp-key { margin-top: calc(18px - var(--head-gap)); }

/* ───── Claude ───── */
.claude { padding-top: var(--section); }
.claude-in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.claude-copy { display: grid; gap: 18px; }
.connect { justify-self: end; width: min(420px, 100%); padding: 44px 36px 36px; border-radius: var(--r-xl); text-align: center; display: grid; justify-items: center; gap: 12px;
  background: linear-gradient(180deg, #1d1d21, #131316); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px rgba(0,0,0,.6); }
.connect-ava { width: 104px; height: 104px; margin: -20px 0 -8px; }
.connect h3 { font: 600 24px/1.2 var(--font); letter-spacing: -.012em; }
.connect p { color: var(--text-2); font-size: 15px; }
.connect-btn { margin-top: 10px; width: 100%; padding: 14px; border-radius: 12px; background: #f5f5f7; color: #000; font: 600 16px/1 var(--font-text); }
.connect-fine { font-size: 12px; color: var(--text-3); text-wrap: balance; }

/* ───── pricing ───── */
.pricing { padding-top: var(--section); display: grid; gap: var(--head-gap); justify-items: center; }
.plans { width: min(880px, var(--col)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plan { position: relative; border-radius: var(--r-xl); padding: 44px 40px 40px; display: grid; gap: 14px; align-content: start; background: #0d0d0f; box-shadow: inset 0 0 0 1px var(--line); }
.plan-pro { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.plan h3 { font: 600 17px/1.2 var(--font-text); color: var(--text-2); }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font: 600 72px/1 var(--font); letter-spacing: -.02em; }
.price span { color: var(--text-2); font-size: 18px; }
.plan-lede { font-size: 19px; color: var(--text); }
.plan ul { list-style: none; margin: 8px 0 22px; padding: 8px 0 0; border-top: 1px solid var(--line); display: grid; }
.plan li { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--text); font-size: 17px; }
.plan .btn { justify-self: stretch; white-space: normal; height: auto; min-height: 52px; padding-block: 14px; text-align: center; }
.price-note { font-size: 14px; color: var(--text-3); text-align: center; max-width: 880px; padding: 0 var(--gutter); margin-top: calc(28px - var(--head-gap)); text-wrap: balance; }

/* ───── FAQ: answers open with real motion where the browser can ───── */
.faq { padding: var(--section) 0; display: grid; gap: var(--head-gap); justify-items: center; }
.qa { width: min(860px, var(--col)); border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease-arrive), content-visibility .45s allow-discrete; }
.qa details[open]::details-content { block-size: auto; }
.qa summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative; font: 600 21px/1.3 var(--font); letter-spacing: -.02em; transition: opacity .2s; }
.qa summary:active { opacity: .7; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); transition: transform .4s var(--ease-arrive), margin .4s var(--ease-arrive); }
.qa details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.qa .ans p { padding: 0 44px 26px 0; color: var(--text-2); font-size: 17px; opacity: 0; transition: opacity .3s var(--ease-exit); }
.qa details[open] .ans p { opacity: 1; transition: opacity .5s var(--ease-arrive) .1s; }

/* ───── final: your word, in particles ───── */
.final-track { height: 260vh; }
.final-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: end; justify-items: center; padding: 0 var(--gutter) clamp(48px, 8vh, 112px); overflow: hidden; isolation: isolate; }
.final-film { position: absolute; inset: -8% 0 33%; z-index: -1; background: #000; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%); mask-image: linear-gradient(to bottom, transparent, #000 16%); }
.final-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, #000 100%); }
.final .display.small { font-size: clamp(36px, 4.6vw, 64px); }
.final-copy { display: grid; justify-items: center; gap: 22px; text-align: center; max-width: 1000px; opacity: var(--fo, 1); transform: translate3d(0, var(--fy, 0px), 0); }
.tryit { display: grid; gap: 10px; justify-items: center; }
.tryit label { font-size: 17px; color: var(--text-2); }
.tryit-field { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 26px; border-radius: 99px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: box-shadow .3s; }
.tryit-field:focus-within { box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 4px rgba(155,107,255,.35); }
.tryit input { width: min(380px, 60vw); height: 48px; border: 0; outline: 0; background: none; color: var(--text); font: 600 21px/1 var(--font); letter-spacing: -.01em; }
.tryit input::placeholder { color: var(--text-3); }
.tryit button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: #f5f5f7; color: #000; display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--ease); }
.tryit button svg { width: 18px; height: 18px; }
.tryit.is-busy button { animation: blink .8s infinite; }
.try-status { display: none; font-size: 15px; color: var(--text-2); text-wrap: balance; }
.try-status.on { display: block; animation: hintIn .6s var(--ease-arrive); }   /* only once there's something to say */

/* ───── footer ───── */
.foot { padding: 60px 0 calc(50px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg-1); }
.foot-in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 40px; align-items: center; }
.foot nav { display: flex; gap: 22px; justify-content: flex-end; flex-wrap: wrap; }
.foot nav a { color: var(--text-2); font-size: 14px; }
.foot p { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); max-width: 70em; }

/* ───── portrait screens: the particle films get a portrait comp (site.js), so their words fill the width ───── */
@media (max-aspect-ratio: 1/1) {
  .hero-film { inset: calc(var(--nav-h) - 1svh) 0 auto; height: min(133vw, 62svh); }
  .final-film { inset: 4svh 0 auto; height: min(133vw, 58svh); }
}
@media (max-width: 680px) and (max-aspect-ratio: 1/1) {
  .hero, .final-stage { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; row-gap: 8px; padding-top: var(--nav-h); min-height: 0; }
  .hero-film, .final-film { position: relative; inset: auto; height: auto; min-height: 0; grid-row: 1; justify-self: stretch; align-self: stretch; margin-inline: calc(-1 * var(--gutter)); }
  .hero-copy, .final-copy { grid-row: 2; }
  .hero-glow { display: none; }
  .final .display.small { font-size: 32px; }
  .final-copy { gap: 18px; }
  .final-copy > .fine { display: none; }   /* pricing and the FAQ already say it */
}
@media (max-width: 680px) and (max-height: 600px) and (max-aspect-ratio: 1/1) { .hero-hint { display: none; } .hero { padding-bottom: 28px; } }
@media (max-width: 680px) and (max-height: 640px) and (max-aspect-ratio: 1/1) {   /* SE, mini: the notes story still fits, pinned */
  .notes-head .eyebrow { display: none; } .notes-head .headline { font-size: 28px; } .notes-stage { row-gap: 14px; } .notes-frame { width: 100%; } .notes-steps { height: 118px; } .notes-steps p { font-size: 15px; }
}
@media (max-aspect-ratio: 1/1) and (min-width: 681px) {   /* a tablet standing up: the word and its headline closer together */
  .hero-film { inset: 9svh 0 auto; height: 58svh; }
  .hero { padding-bottom: 13svh; }
}

/* ───── narrower screens ───── */
@media (max-width: 1000px) {
  .links { display: none; }
  .nav .btn { margin-left: auto; }
  .notes-track { height: 480vh; }
  .notes-stage { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 22px; }
  .notes-frame { width: min(100%, calc((100svh - 340px) * 16 / 9)); justify-self: center; }
  .notes-steps { position: relative; height: 150px; border-left: 0; }
  .notes-steps li { position: absolute; inset: 0; padding-left: 0; opacity: 0; transform: translateY(-6px); transition: opacity .2s var(--ease-exit), transform .2s var(--ease-exit); }
  .notes-steps li.on { opacity: 1; transform: none; transition: opacity .45s var(--ease-arrive) .16s, transform .6s var(--ease-arrive) .16s; }
  .notes-steps::after { display: none; }
  .notes-steps li.on p { min-height: 0; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell, .c-brand, .c-compare { grid-column: span 1; }
  .c-compare, .c-formats { grid-column: span 2; }
  .claude-in { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .claude-copy { justify-items: center; }
  .connect { justify-self: center; }
}
@media (max-width: 680px) {
  :root { --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); --col: calc(100vw - 2 * var(--gutter)); --col-wide: var(--col); --section: 104px; --head-gap: 32px; --r-xl: 22px; --r-lg: 16px; }
  body { font-size: 16px; }
  .hide-sm { display: none; } .show-sm { display: inline; }
  .hero-track { height: 170vh; }
  .hero-glow { background: linear-gradient(to bottom, transparent 46%, rgba(0,0,0,.7) 62%, #000 78%); }
  .hero .display { font-size: 40px; }
  .hero .lede { font-size: 17px; line-height: 1.42; max-width: 21em; }
  .hero-copy { gap: 14px; }
  .hero .ctas { flex-direction: column; width: min(320px, 100%); } .hero .ctas .btn { align-self: stretch; }
  .reveal-track { height: 240vh; }
  .reveal { padding-top: 56px; }
  .build-cap { bottom: calc(50% - 40vw - 64px); }   /* just under the film */
  .build-cap { font-size: 14px; }
  .mac { border-radius: var(--r-sm); }
  .notes-track { height: 400vh; }
  .notes-frame { border-radius: var(--r-md); padding-bottom: 46px; }
  .notes-overlay { inset: 0 0 46px; }
  .np { width: 26px; height: 26px; margin-top: -26px; font-size: 12px; }
  .nb, .nb2 { left: 10px; right: 10px; width: auto; max-width: none; padding: 9px 12px; }
  .nb1 { top: auto; bottom: 10px; transform-origin: 50% 100%; }   /* pin 1 is high, on the title: its note sits low */
  .nb2 { top: auto; bottom: 10px; left: auto; right: 10px; width: min(236px, 64%); transform-origin: 100% 100%; }   /* pin 2 is low left: its note sits low right, both pins in view */
  .nb-text { font-size: 14px; }
  .notes-bar { height: 28px; bottom: 9px; }
  .notes-steps { height: 136px; }
  .fx-track { height: auto !important; }
  .fx-stage { position: static; height: auto; padding-top: 0; }
  .fx-row { transform: none !important; overflow-x: auto; width: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; padding: 0 var(--gutter) 10px; scrollbar-width: none; }
  .fx-row::-webkit-scrollbar { display: none; }
  .fx-card { width: 72vw; scroll-snap-align: start; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .c-compare, .c-formats { grid-column: span 1; }
  .cell { min-height: 0; }
  .cell > * { min-width: 0; }
  .cell { padding: 24px; } .cell-art { min-height: 148px; margin-bottom: 4px; } .c-compare .compare-art { min-height: 240px; margin: -24px -24px 12px; }
  .export-art b { font-size: 84px; } .ts { font-size: 80px; } .music-art { padding: 0 12px; }
  .formats-art { gap: 3vw; } .formats-art .w { width: 34vw; height: 19.1vw; } .formats-art .v { width: 13.5vw; height: 24vw; } .formats-art .s { width: 20vw; height: 20vw; }
  /* the comparison, stacked: each row's question on its own line, the four answers under it (roles in the markup keep it a table) */
  .table-wrap { overflow: visible; }
  .cmp { min-width: 0; table-layout: auto; } .cmp thead, .cmp tbody { display: block; }
  .cmp tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cmp thead th:first-child { display: none; }
  .cmp thead th { width: auto !important; padding: 18px 6px 14px; font-size: 12px; line-height: 1.2; } .cmp thead th.us { font-size: 14px; }
  .cmp tbody th { grid-column: 1 / -1; padding: 16px 16px 2px; border-bottom: 0; font-size: 15px; }
  .cmp td { border-bottom: 0; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 4px 12px; }
  .cmp tbody tr { border-bottom: 1px solid var(--line); } .cmp tbody tr:last-child { border-bottom: 0; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 36px 24px 28px; }
  .price b { font-size: 60px; }
  .final-track { height: 220vh; }
  .final .ctas { width: min(320px, 100%); } .final .ctas .btn { flex: 1; }
  .tryit input { width: min(260px, 58vw); }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot nav { justify-content: flex-start; }
}
/* a phone: one call to action that works there (send the link to your Mac), not a download it can't use */
.can-send .hero .ctas .btn-light, .can-send .final .ctas .btn-light { display: none; }
.can-send .send-mac { background: #f5f5f7; color: #000; box-shadow: none; }
@media (pointer: coarse) {
  .nav .btn-sm { height: 36px; padding: 0 16px; }
  .brand { padding-block: 10px; }
  .more-link { display: inline-block; padding: 12px 8px; }
  .modes-switch button { padding: 14px 32px; }
  .foot nav a { display: inline-block; padding: 12px 0; }
}
@media (max-width: 400px) {
  .nav-in { gap: 12px; }
}
@media (max-width: 360px) {
  .nav-in { gap: 6px; }
  .nav .brand-logo { width: 108px; height: 21.6px; }
  .nav .btn-sm { font-size: 12px; padding-inline: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 100svh; padding-bottom: 20px; }
  .hero-film { inset: 0 0 38%; }
  .hero .display { font-size: 34px; }
  .hero .lede, .hero .fine, .hero-hint { display: none; }
}

/* ───── still: reduced motion, or the nav's pause (site.js sets .still on <html>). Nothing moves on its own; the scroll
   scenes become plain sections; the films rest on their posters (films.js) ───── */
.still *, .still *::before, .still *::after { animation: none !important; transition-duration: .01s !important; }
.still [data-reveal] { opacity: 1 !important; transform: none !important; }
.still .hero-film, .still .mac { transform: none !important; }
.still .hero-copy, .still .final-copy, .still .hero-hint { opacity: 1 !important; transform: none !important; }
.still .hero-track, .still .reveal-track, .still .statement-track, .still .fx-track, .still .final-track { height: auto !important; }
.still .hero { position: relative; }
.still .reveal-stage { position: static; height: auto; display: grid; justify-items: center; padding: 0 var(--gutter) 40px; overflow: visible; }
.still .reveal .mac-shot, .still .reveal .mac-bar, .still .reveal .mac::after { opacity: 1; }
.still .reveal-stage { -webkit-mask-image: none; mask-image: none; }
.still .build-cap { display: none; }
.still .statement-text { position: static; min-height: 0; padding: var(--section) 0 0; }
.still .statement-text .w { --a: 1; }
.still .statement-text .w.is-hot { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.still .reveal { margin-top: 0; }
.still .fx-stage { position: static; height: auto; overflow: visible; }
@media (min-width: 681px) {
  .still .fx-row { transform: none !important; width: var(--col); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .still .fx-card { width: auto; }
}
.still .final-stage { position: relative; }
.still .hero-hint, .still .motion-only { display: none; }

/* ───── short windows (and 200% zoom): the pinned scenes become plain sections ───── */
@media (max-height: 640px) and (min-aspect-ratio: 1/1) {
  .hero-track, .notes-track, .fx-track, .final-track { height: auto !important; }
  .hero { position: relative; }
  .reveal { margin-top: 0; }
  .notes-stage, .fx-stage, .final-stage { position: static; height: auto; overflow: visible; padding-block: 72px 40px; }
  .notes-frame { width: min(100%, calc((100svh - 140px) * 16 / 9)); justify-self: center; }
  .notes-steps li p { max-height: none; opacity: 1; margin-top: 6px; }
  .fx-row { transform: none !important; overflow-x: auto; width: auto; padding: 0 16px 10px; }
  .reveal-stage > .mac { max-width: calc((100svh - 120px) * 16 / 9); }
  .final-stage { grid-template-rows: 42svh auto; } .final-film { position: relative; inset: auto; height: auto; grid-row: 1; margin-inline: calc(-1 * var(--gutter)); } .final-copy { grid-row: 2; }
}