/* AnimSpark — site design system.
 * The product's own look: neutral white (252 / 242), ink-black actions, the trailer's type.
 * Plus Jakarta Sans for everything you read, Geist Mono for labels and numbers (the trailer's category tags),
 * Geist SemiBold for the wordmark only. Brand green comes from the mark and is used for signals, never for surfaces.
 *
 * The theme is the trailer's world: near-white paper with a fine grain, four faint washes of colour (mint, sky,
 * peach, lavender), ink type, black-and-white hand-drawn doodles where another site would put icons, and the
 * timeline's track colours for anything that signals. */
@font-face { font-family: 'Jakarta'; src: url('/assets/fonts/jakarta-400.woff2?v=221a4135d06a') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url('/assets/fonts/jakarta-500.woff2?v=bad081c8dbc1') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url('/assets/fonts/jakarta-600.woff2?v=8872bb5c9111') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Jakarta'; src: url('/assets/fonts/jakarta-700.woff2?v=2050755bf475') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/geist-mono-400.woff2?v=3f98383b122f') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/geist-mono-500.woff2?v=72971bd4908d') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist-600.woff2?v=6f8ac317a28e') format('woff2'); font-weight: 600; font-display: swap; }
/* the product's UI face — the app replica and the agents popover's preview */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-var.woff2?v=2591ab5cfcb9') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #fcfcfc; --bg-2: #f5f5f5; --bg-3: #efefef;
  --ink: #1a1a1a; --text: #1f1f1f; --dim: #4b4b4b; --muted: #7a7a7a; --faint: #a9a9a9;
  --line: rgba(0, 0, 0, .08); --line-2: rgba(0, 0, 0, .14);
  --night: #0b0c0f; --night-2: #14161a; --night-3: #1c1f24; --night-line: rgba(255, 255, 255, .09);
  --on-night: #f4f4f2; --on-night-dim: #a3a7ae; --on-night-muted: #6d727b;
  --g1: #2f9e63; --g2: #3cbc93; --g3: #55bfd0; --brand: linear-gradient(100deg, var(--g1), var(--g2) 50%, var(--g3));
  /* the product timeline's own palette (apps/web globals.css --tl-*) — the site's accent system */
  --tl-accent: #1f8a86; --tl-edit: #e8683a; --tl-scene: #3f9b9b; --tl-video: #5385bd; --tl-voice: #6f62b0; --tl-sfx: #5192c4; --tl-music: #3f9a90; --tl-caption: #7c8797;
  --tl-lane: #efefef; --tl-line: #e2e2e2; --tl-text: #4a4a4a; --tl-faint: #8a8a8a;
  --sans: 'Jakarta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --word: 'Geist', var(--sans);
  --max: 1240px; --wide: 1400px; --pad: clamp(20px, 4vw, 48px); --nav: 60px;
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1); --out: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
/* the scrollbar keeps its room while a dialog or the drawer locks the page (overflow: hidden), so nothing shifts sideways */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 24px); scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg) url('/assets/img/grain.png?v=8a415a712d94') repeat; background-size: 160px; color: var(--text); font: 400 16px/1.6 var(--sans); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(31, 138, 134, .2); }
:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.wide { max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); }
main { overflow-x: clip; }

/* ── type ── */
.d1 { font: 600 clamp(46px, 7.2vw, 100px)/.98 var(--sans); letter-spacing: -.048em; margin: 0; color: var(--ink); text-wrap: balance; }
.d2 { font: 600 clamp(34px, 4.6vw, 62px)/1.03 var(--sans); letter-spacing: -.04em; margin: 0; color: var(--ink); text-wrap: balance; }
.d3 { font: 600 clamp(22px, 2vw, 28px)/1.2 var(--sans); letter-spacing: -.025em; margin: 0; color: var(--ink); }
.soft { color: var(--faint); }
.lede { font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.55; letter-spacing: -.012em; color: var(--dim); margin: 0; text-wrap: pretty; }
.label { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.label::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--tl-accent); }
.label.plain::before { display: none; }
.label[data-t]::before { content: attr(data-t); width: auto; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--c, var(--tl-scene)); color: #fff; font: 500 10px/18px var(--mono); letter-spacing: .02em; }
[data-c="v"] { --c: var(--tl-video); } [data-c="a"] { --c: var(--tl-voice); } [data-c="s"] { --c: var(--tl-sfx); } [data-c="m"] { --c: var(--tl-music); } [data-c="t"] { --c: var(--tl-caption); }
.num { font-family: var(--mono); font-feature-settings: 'tnum'; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), color .2s; }
.btn:active { transform: scale(.98); }
.btn-ink { background: linear-gradient(180deg, #2a2a2a, #121212); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .2), 0 6px 16px -8px rgba(0, 0, 0, .45); }
.btn-ink:hover { background: linear-gradient(180deg, #333, #000); }
.btn-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, .04); }
.btn-line:hover { background: var(--bg-2); }
.btn-lg { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15.5px; }
.btn svg { width: 16px; height: 16px; }
.night .btn-ink, .btn-white { background: #fff; color: var(--ink); }
.night .btn-ink:hover, .btn-white:hover { background: #e9e9e7; }
.night .btn-line { background: transparent; color: var(--on-night); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.night .btn-line:hover { background: rgba(255, 255, 255, .06); }
.link { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1 var(--sans); color: var(--ink); }
.link::after { content: ''; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 1px; transition: transform .25s var(--ease); }
.link:hover::after { transform: translateX(3px) rotate(45deg); }
.night .link { color: var(--on-night); }

/* ── header & mega menu ── */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--nav); background: transparent; transition: background .3s var(--ease), backdrop-filter .3s; }
/* no rule under the bar: once the page moves, it just picks up frosted paper */
.hdr.scrolled, .hdr.menu-open { background: rgba(252, 252, 252, .78); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
.hdr-in { height: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; }
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo img { width: 21px; height: 21px; }
.logo span { font: 600 18px/1 var(--word); letter-spacing: -.035em; color: var(--ink); }
.menu { display: flex; align-items: center; gap: 2px; margin: 0 0 0 30px; padding: 0; list-style: none; }
.gh { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); transition: background .15s, color .15s; }
.gh:hover { background: rgba(0, 0, 0, .045); color: var(--ink); }
.hdr.on-night:not(.menu-open) .gh { color: var(--on-night-dim); }
.menu > li > a, .menu > li > button { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 11px; border: 0; background: none; border-radius: 8px; font: 500 14.5px/1 var(--sans); color: var(--dim); cursor: pointer; transition: color .15s, background .15s; }
.menu > li > a:hover, .menu > li > button:hover, .menu > li > button[aria-expanded="true"], .menu > li > a[aria-current="page"] { color: var(--ink); }
.menu > li > a[aria-current="page"] { background: rgba(0, 0, 0, .045); }
.chev { width: 10px; height: 10px; opacity: .6; transition: transform .2s var(--ease); }
.menu button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr-cta { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hdr-cta .login { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; font: 500 14.5px/1 var(--sans); color: var(--dim); transition: color .15s, background .15s; }
.hdr-cta .login:hover { color: var(--ink); background: rgba(0, 0, 0, .045); }
.hdr-cta .btn { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 14px; margin-left: 4px; }
.burger { display: none; width: 38px; height: 38px; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.burger span { display: block; width: 17px; height: 1.5px; margin: 4px auto; background: var(--ink); transition: transform .25s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(2.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-2.75px) rotate(-45deg); }

.drawer { position: fixed; inset: var(--nav) 0 0 0; z-index: 55; background: var(--bg); padding: 8px var(--pad) 40px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.drawer.open { opacity: 1; visibility: visible; transition: opacity .2s; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: 600 20px/1 var(--sans); letter-spacing: -.02em; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer .chev { width: 13px; height: 13px; }
.drawer details[open] .chev { transform: rotate(180deg); }
.drawer details a { display: block; padding: 9px 0; color: var(--dim); font-size: 16px; }
.drawer details[open] { padding-bottom: 12px; }
.drawer .solo { display: block; padding: 18px 0; font: 600 20px/1 var(--sans); letter-spacing: -.02em; border-bottom: 1px solid var(--line); }
.drawer .cta { display: grid; gap: 10px; margin-top: 28px; }
.drawer .cta .btn { height: 48px; }

/* ── doodles (the trailer's) ── */
.doodle { display: inline-block; height: 1em; width: auto; overflow: visible; vertical-align: middle; }

/* the other agents, stacked like avatars: each is its own button; the one under the pointer lifts to the front */
.stack { display: inline-flex; align-items: center; height: 30px; padding-left: 10px; }
.stack button[data-agent] { position: relative; z-index: calc(10 - var(--i)); width: 28px; height: 28px; margin-left: -6px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px var(--line-2); cursor: pointer; transition: transform .18s var(--out), box-shadow .18s; }
.stack button[data-agent] img { width: 14px; height: 14px; opacity: .78; transition: opacity .15s; }
.stack button[data-agent]:hover, .stack button[data-agent]:focus-visible { z-index: 20; transform: translateY(-2px) scale(1.08); box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1.5px var(--ink), 0 6px 14px -6px rgba(0, 0, 0, .3); }
.stack button[data-agent]:hover img, .stack button[data-agent]:focus-visible img { opacity: 1; }
.stack:hover button:not(:hover) img { opacity: .5; }

/* ── the coding-agent popover ── */
.apop { position: absolute; z-index: 80; width: 390px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgba(0, 0, 0, .28), 0 8px 18px -10px rgba(0, 0, 0, .14); text-align: left; opacity: 0; transform: translateY(-4px) scale(.985); transform-origin: top center; transition: opacity .18s var(--ease), transform .25s var(--out); }
.apop.on { opacity: 1; transform: none; }
.apop.sheet { position: fixed; left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.apop.sheet .apop-ways { grid-template-columns: minmax(0, 1fr); }
.apop.two.sheet { width: auto; }
.apop.sheet .way-shot { --h: 176px; }
.apop-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px 4px; }
.apop-h b { font: 600 15px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.apop-x { width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; }
.apop-x:hover { background: var(--bg-2); color: var(--ink); }
.apop-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-2); }
.apop-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 9px; border: 0; border-radius: 8px; background: none; font: 500 12.5px/1 var(--sans); color: var(--muted); white-space: nowrap; cursor: pointer; }
.apop-seg button.named { flex: 1; color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }
.apop-seg button.ico { flex: none; width: 32px; padding: 0; }
.apop-seg button.ico img { opacity: .75; }
.apop-seg button img { width: 13px; height: 13px; }
.apop-seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }
.apop-opt { margin-top: 10px; padding: 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.apop-opt.rec { background: linear-gradient(180deg, rgba(227, 244, 234, .55), rgba(255, 255, 255, 0)); box-shadow: inset 0 0 0 1px rgba(31, 138, 134, .25); }
.apop-opt p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.apop-opt p b { color: var(--ink); font-weight: 600; }
.apop-opt .btn { margin-top: 12px; height: 36px; font-size: 13.5px; }
/* Claude Code / Codex: two ways, each with a little picture of it */
.apop.two { width: 600px; padding: 16px; }
.apop.up { transform-origin: bottom center; }
.apop-h > div { min-width: 0; }
.apop-h b span { margin-left: .2em; color: var(--faint); font-weight: 500; }
.apop.two .apop-h { align-items: flex-start; padding: 2px 2px 12px 4px; }
.apop-sub { margin: 5px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
/* the two ways, side by side: each a card — the real screenshot on a soft wash, then its number, title and one line */
.apop-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.apop-way { min-width: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.way-shot { --h: 200px; height: var(--h); flex: none; display: grid; place-items: center; padding: 14px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(120% 90% at 0% 0%, rgba(214, 240, 228, .7), transparent 60%), radial-gradient(110% 90% at 100% 100%, rgba(221, 232, 248, .75), transparent 62%), var(--bg-2); }
.way-shot img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(var(--h) - 28px); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 14px 28px -16px rgba(20, 30, 40, .4), 0 2px 6px -2px rgba(0, 0, 0, .08); }
.apop-way figcaption { padding: 12px 14px 14px; }
.way-k { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; font: 600 14px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.way-k .n { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 5px; background: var(--ink); color: #fff; font: 500 10.5px/1 var(--mono); }
.apop-way figcaption > p:not(.way-k) { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.apop-way b { color: var(--ink); font-weight: 600; }
/* the other agents: the connect screenshot above the one way — the Mac app's agent button */
.apop-opt.rec { padding: 0; overflow: hidden; }
.apop-opt.rec .way-shot { --h: 176px; border-bottom-color: rgba(31, 138, 134, .18); }
.rec-t { padding: 14px; }
.apop-soon { margin-left: auto; padding: 2px 6px; border-radius: 5px; background: rgba(31, 138, 134, .12); color: var(--tl-accent); font: 500 9.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.apop-dl { width: 100%; margin-top: 12px; height: 38px; font-size: 13.5px; }
.apop-opt.rec .way-shot { --h: 212px; }
/* the Third-party agents popover (AgentsChip) — the replica's live one (.a-pop.agents.agpop, tokens from .app) and the
   still preview in the coding-agent popover (.agpv, the same light tokens, laid out at 324 px and zoomed to fit) */
.agpv { --surface: #fcfcfc; --border: rgba(0, 0, 0, .08); --border-strong: rgba(0, 0, 0, .16); --text: #1f1f1f; --text-muted: #7a7a7a; --text-faint: #a9a9a9; --hover: rgba(0, 0, 0, .045);
  flex: none; pointer-events: none; user-select: none; -webkit-user-select: none; font: 400 13px/1.4 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; color: var(--text); text-align: left; }
.agpv .agpop { border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 14px 28px -16px rgba(20, 30, 40, .4), 0 2px 6px -2px rgba(0, 0, 0, .08); }
:where(.agpv) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; }
.agpv svg { display: block; flex: none; }
.agpop { width: 324px; }
.agpop .hd { padding: 12px 14px 6px; }
.agpop .hd b { font-size: 13px; font-weight: 500; color: var(--text); }
.agpop .hd p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.625; color: var(--text-muted); }
.agpop .tier { margin: 0 14px; padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
.agpop .tier > div { display: flex; align-items: center; justify-content: space-between; }
.agpop .tier b { font-size: 11.5px; font-weight: 500; }
.agpop .tier p { margin: 6px 0 0; font-size: 11px; line-height: 1.625; color: var(--text-faint); }
.agpop .seg { display: flex; padding: 2px; border-radius: 6px; border: 1px solid var(--border); }
.agpop .seg button { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 5px; font-size: 11px; color: var(--text-muted); cursor: pointer !important; }
.agpop .seg button:hover { background: var(--hover); color: var(--text); }
.agpop .seg button[aria-checked="true"] { background: var(--text); color: var(--surface); font-weight: 500; }
.agpop .rows { display: block; gap: 0; padding: 6px 6px 8px; }
.agpop .a-ag { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 13px; color: var(--text); }
.agpop .a-ag .ic { width: 16px; flex: none; display: flex; justify-content: center; }
.agpop .a-ag .ic img { width: 16px; height: 16px; }
.agpop .a-ag .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agpop .a-go, .agpop .a-conn { flex: none; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); font-size: 11.5px; color: var(--text); cursor: pointer !important; transition: border-color .15s, background .15s; }
.agpop .a-go:hover, .agpop .a-conn:hover { border-color: var(--border-strong); background: var(--hover); }
.agpop .a-go:disabled { opacity: .5; }
.agpop .a-conn { display: grid; }
.agpop .a-conn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.agpop .a-conn .s { color: var(--text-muted); }
.agpop .a-conn .s i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.agpop .a-conn .h { visibility: hidden; color: var(--text); }
.agpop .a-conn:hover .s { visibility: hidden; } .agpop .a-conn:hover .h { visibility: visible; }
.agpop .a-more { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 8px 8px 0; border-top: 1px solid var(--border); }
.agpop .a-more span { margin-right: auto; font-size: 11.5px; color: var(--text-muted); }
.agpop .a-more button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; cursor: pointer !important; transition: background .15s; }
.agpop .a-more button:hover { background: var(--hover); }
.agpop .a-more button[aria-pressed="true"] { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.agpop .a-more img { width: 15px; height: 15px; opacity: .7; transition: opacity .15s; }
.agpop .a-more button:hover img, .agpop .a-more button[aria-pressed="true"] img { opacity: 1; }

/* ── footer ── */
.ftr { margin-top: 120px; overflow: hidden; }
.ftr-word { display: flex; align-items: flex-end; max-width: var(--wide); margin: 0 auto -.2em; padding: 0 var(--pad); font: 600 clamp(80px, 20.5vw, 300px)/.8 var(--word); letter-spacing: -.06em; color: var(--bg-3); white-space: nowrap; user-select: none; pointer-events: none; }
.ftr-word i { font-style: normal; }
.ftr-word b { align-self: center; width: .045em; height: .62em; margin-left: .06em; background: var(--tl-accent); opacity: 0; }
.ftr-word:not(.typed) i { opacity: 0; }
.ftr-word.typed i { animation: type-in 0s linear both; animation-delay: calc(var(--i) * 90ms); }
.ftr-word.typed b { animation: caret 1s steps(1) 6 both; animation-delay: 850ms; }
@keyframes type-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes caret { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ftr-word i { opacity: 1 !important; animation: none !important; } .ftr-word b { display: none; } }
.ftr-in { max-width: var(--wide); margin: 0 auto; padding: 40px var(--pad) 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.ftr .tag { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 2px; }
.ftr a.l { font-size: 14px; color: var(--dim); } .ftr a.l:hover { color: var(--ink); }
.ftr-base { max-width: var(--wide); margin: 0 auto; padding: 32px var(--pad) 32px; display: flex; justify-content: space-between; align-items: center; font: 400 12.5px/1 var(--mono); color: var(--faint); }
/* the legal links sit above the wordmark (which never takes a click), readable and underlined on hover */
.ftr-base { position: relative; z-index: 1; }
.ftr-legal { display: flex; gap: 18px; } .ftr-legal a { color: var(--muted); text-underline-offset: 3px; } .ftr-legal a:hover { color: var(--ink); text-decoration: underline; }

/* ── composer (the product's, not an imitation of it) ── */
.composer { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .03), 0 18px 40px -20px rgba(0, 0, 0, .14); padding: 16px 12px 12px 18px; text-align: left; transition: box-shadow .25s var(--ease); }
.composer:focus-within { box-shadow: 0 0 0 1px rgba(0, 0, 0, .32), 0 18px 40px -20px rgba(0, 0, 0, .18); }
.composer textarea { display: block; width: 100%; min-height: 52px; max-height: 180px; resize: none; border: 0; outline: 0; background: none; padding: 0 6px 0 0; font: 400 16.5px/1.55 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.composer textarea::placeholder { color: var(--faint); }
.c-row { display: flex; align-items: center; gap: 2px; margin-top: 10px; }
.c-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); }
.c-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.c-grow { flex: 1; }
.c-mode { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 8px; font-size: 13.5px; color: var(--dim); }
.c-mode i { font-style: normal; color: var(--faint); }
.c-send { width: 34px; height: 34px; margin-left: 4px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .3s; }
.c-send:hover { transform: scale(1.05); }
.c-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c-send.fire { box-shadow: 0 0 0 6px rgba(60, 188, 147, .25); background: var(--g1); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1 var(--sans); color: var(--dim); cursor: pointer; transition: box-shadow .15s, color .15s; }
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ── media frames & cards ── */
.frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--night); isolation: isolate; }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame.light { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.card { display: block; }
.card .frame { aspect-ratio: 16 / 9; }
.card .frame img, .card .frame video { transition: transform 1s var(--out); }
.card:hover .frame img, .card:hover .frame video { transform: scale(1.03); }
.card .k { margin-top: 14px; }
.card .t { margin: 8px 0 0; font: 500 15.5px/1.4 var(--sans); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.card .s { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

/* window chrome, the product's */
.win { border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, .28), 0 12px 24px -16px rgba(0, 0, 0, .12); }
.win-bar { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #f7f7f7; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #dedede; }
.win-bar span { margin: 0 auto; transform: translateX(-24px); font: 400 12px/1 var(--mono); color: var(--faint); }

/* ── sections ── */
.sec { padding-top: clamp(96px, 12vw, 168px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: 48px; }
.sec-head .label { margin-bottom: 20px; }
.sec-head .lede { max-width: 560px; margin-top: 20px; }
.night { background: var(--night); color: var(--on-night); }
.night .d1, .night .d2, .night .d3 { color: var(--on-night); }
.night .lede { color: var(--on-night-dim); }
.night .label { color: var(--on-night-muted); }
.night .soft { color: #585c64; }
.band { padding: clamp(96px, 11vw, 150px) 0; }
.hair { height: 1px; border: 0; margin: 0; background: var(--line); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--out), transform 1s var(--out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* film dialog */
.film-dlg { width: min(1280px, 94vw); padding: 0; border: 0; border-radius: var(--r-lg); background: #000; overflow: hidden; }
.film-dlg::backdrop { background: rgba(8, 9, 11, .82); backdrop-filter: blur(8px); }
.film-dlg video { width: 100%; aspect-ratio: 16 / 9; }
.film-dlg .x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 20px; line-height: 1; cursor: pointer; }

/* ── the film player (site.js openPlayer): the stage at the film's own shape, its bar over the picture, the prompt and
   "Make one like this" under it; full screen is the stage alone ── */
.pl { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--on-night); overflow: auto; overscroll-behavior: contain; }
.pl::backdrop { background: rgba(8, 9, 11, .97); }
.pl[open] { animation: pl-in .22s var(--ease) both; }
@keyframes pl-in { from { opacity: 0; } }
.pl-in { min-height: 100%; display: grid; place-items: center; padding: 72px var(--pad) 28px; }
.pl-col { position: relative; --capH: 168px; width: min(1280px, 100%, calc((100dvh - 100px - var(--capH)) * var(--ar, 1.7778))); min-width: min(100%, 320px); }
.pl-stage { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: 14px; background: #000; isolation: isolate; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8); user-select: none; -webkit-user-select: none; }
.pl-media { position: absolute; inset: 0; }
.pl-media iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #000; }
.pl-media video, .pl-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pl-poster { z-index: 1; transition: opacity .3s; pointer-events: auto; }
.pl-stage.ready.started .pl-poster { opacity: 0; pointer-events: none; }
.pl-spin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: #fff; opacity: 0; transition: opacity .2s; animation: pl-spin .9s linear infinite; pointer-events: none; }
.pl-stage.want:not(.ready):not(.failed) .pl-spin, .pl-stage.buffering:not(.failed) .pl-spin { opacity: 1; transition-delay: .15s; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
.pl-err { position: absolute; inset: auto 0 50% 0; z-index: 3; margin: 0; transform: translateY(50%); text-align: center; font-size: 14.5px; color: var(--on-night); }
.pl-err button { margin-left: 6px; border: 0; background: none; color: #fff; text-decoration: underline; cursor: pointer; }
.pl-big { position: absolute; left: 50%; top: 50%; z-index: 2; width: 68px; height: 68px; margin: -34px 0 0 -34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.92); transition: opacity .2s, transform .25s var(--out); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5); }
.pl-big svg { width: 26px; height: 26px; margin-left: 3px; }
.pl-stage.ready:not(.playing):not(.scrub):not(.want) .pl-big, .pl-stage.ready:not(.started) .pl-big { opacity: 1; pointer-events: auto; transform: none; }
.pl-stage.ready.want:not(.playing) .pl-big { opacity: 0; pointer-events: none; }
.pl-bar { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 28px 14px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); transition: opacity .3s; }
.pl-stage.idle .pl-bar { opacity: 0; } .pl-stage.idle { cursor: none; }
.pl-seek { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; outline: none; touch-action: none; }
.pl-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; transition: height .15s; }
.pl-seek:hover .pl-track, .pl-stage.scrub .pl-track { height: 6px; }
.pl-fill { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.pl-tip { position: absolute; bottom: 22px; left: 0; padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, .8); font: 500 11px/1 var(--mono); color: #fff; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .12s; }
.pl-seek:hover .pl-tip, .pl-stage.scrub .pl-tip { opacity: 1; }
.pl-ctl { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.pl-ctl button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: #fff; cursor: pointer; transition: background .15s; }
.pl-ctl button:hover { background: rgba(255, 255, 255, .14); }
.pl-ctl button[hidden] { display: none; }
.pl-t { margin-left: 6px; font: 500 12.5px/1 var(--mono); color: rgba(255, 255, 255, .92); font-variant-numeric: tabular-nums; }
.pl-grow { flex: 1; }
.pl-stage.fs { border-radius: 0; box-shadow: none; aspect-ratio: auto; width: 100%; height: 100%; }
.pl-stage.fake { position: fixed; inset: 0; z-index: 5; }
.pl-stage.fs .pl-bar { padding: 40px 24px 14px; }
.pl-cap { display: flex; align-items: flex-start; gap: 20px; margin-top: 18px; }
.pl-txt { flex: 1; min-width: 0; }
.pl-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-night-dim); }
.pl-h { margin: 10px 0 0; font: 600 clamp(18px, 2vw, 22px)/1.3 var(--sans); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.pl-sub { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: #d9dadd; }
.pl-q { display: -webkit-box; margin: 8px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14.5px; line-height: 1.55; color: var(--on-night-dim); }
.pl-q.open { display: block; }
.pl-more { margin-top: 4px; padding: 0; border: 0; background: none; font: 500 13px/1.4 var(--sans); color: #fff; opacity: .8; cursor: pointer; }
.pl-more:hover { opacity: 1; }
.pl-acts { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.pl-go { flex: none; }
.pl-src { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font: 500 14.5px/1 var(--sans); text-decoration: none; transition: background .15s, border-color .15s; }
.pl-src:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.pl-src[hidden] { display: none; }
.pl-x { position: fixed; top: 20px; right: 20px; z-index: 6; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .15s; }
.pl-x svg { width: 20px; height: 20px; }
.pl-x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pl-x:hover { background: rgba(255, 255, 255, .22); }
@media (max-width: 620px) {
  .pl-in { place-items: start center; padding: 60px 16px 24px; }
  .pl-col { width: 100%; }
  .pl-stage { border-radius: 10px; }
  .pl-cap { flex-direction: column; gap: 14px; }
  .pl-acts { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .pl-go { width: 100%; height: 46px; }
  .pl-src { justify-content: center; height: 46px; }
  .pl-x { top: 12px; right: 12px; }
  .pl-bar { padding: 20px 6px 2px; }
  .pl-ctl button { width: 34px; height: 34px; }
}

/* ── responsive chrome ── */
@media (max-width: 1020px) {
  .menu, .hdr-cta .login, .hdr-cta .gh { display: none; }
  .burger { display: block; }
  .sec-head { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ftr-in { flex-direction: column; }
  .ftr-base { flex-direction: column-reverse; gap: 18px; align-items: start; }
}

/* One quality control shared by the native film viewer and editor fullscreen. */