/* Butter landing. Tokens come from the Butter design system (tokens.json); nothing here invents a colour.
   Pitch is the default ground. data-theme on <html> switches Pitch / Graphite / Butter. */

@property --cut { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

:root, :root[data-theme="pitch"] {
  --ground: #000000; --surface: #121214; --surface-raised: #1B1B1E;
  --ink: #F5F5F7; --ink-muted: #AEAEB4; --hairline: #303034; --border-strong: #76767C;
  --action: #F5F5F7; --on-action: #000000; --indicator: #F4D35E; --on-indicator: #000000;
  --positive: #6EE7A0; --caution: #FFB454; --negative: #FF8A80;
  --edge: rgba(255,255,255,.12); --shadow-lg: 0 30px 80px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.16);
  --shadow-md: 0 8px 24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12);
  --tile: #0A0A0B; --slab: #F4D35E;
}
:root[data-theme="graphite"] {
  --ground: #111214; --surface: #1A1B1E; --surface-raised: #202125;
  --ink: #F2F2F3; --ink-muted: #A3A4AA; --hairline: #26272B; --border-strong: #6B6C73;
  --action: #F2F2F3; --on-action: #111214; --indicator: #F4D35E; --on-indicator: #111214;
  --edge: rgba(255,255,255,.1); --shadow-lg: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
  --shadow-md: 0 8px 24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
  --tile: #1D1E21;
}
:root[data-theme="butter"] {
  --ground: #F4D35E; --surface: #FBEBB0; --surface-raised: #F8E08C;
  --ink: #14130F; --ink-muted: #4A4217; --hairline: rgba(20,19,15,.2); --border-strong: rgba(20,19,15,.62);
  --action: #14130F; --on-action: #F4D35E; --indicator: #14130F; --on-indicator: #F4D35E;
  --positive: #0B5B30; --caution: #6B4300; --negative: #8F1D1D;
  --edge: rgba(20,19,15,.15); --shadow-lg: 0 30px 80px rgba(60,45,0,.28), 0 0 0 1px rgba(20,19,15,.14);
  --shadow-md: 0 8px 24px rgba(60,45,0,.25), 0 0 0 1px rgba(20,19,15,.15);
  --tile: #F4D35E; --slab: #14130F;
}

:root[data-theme="light"] {
  --ground: #F5F5F7; --surface: #FFFFFF; --surface-raised: #EBEBEE;
  --ink: #14130F; --ink-muted: #5B5A54; --hairline: #E0E0E3; --border-strong: #8A8983;
  --action: #14130F; --on-action: #F5F5F7; --indicator: #14130F; --on-indicator: #F4D35E;
  --positive: #0B5B30; --caution: #6B4300; --negative: #8F1D1D;
  --edge: rgba(20,19,15,.1); --shadow-lg: 0 30px 80px rgba(20,19,15,.22), 0 0 0 1px rgba(20,19,15,.12);
  --shadow-md: 0 8px 24px rgba(20,19,15,.18), 0 0 0 1px rgba(20,19,15,.1);
  --tile: #14130F; --slab: #F4D35E;
}
:root {
  --yellow: #F4D35E; --yellow-light: #FAE58F; --ink-900: #14130F;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Helvetica Neue", system-ui, sans-serif;
  --brand: "Inter Tight", Inter, -apple-system, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
  --gut: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --cut-angle: 135deg;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 25px; letter-spacing: -.011em; -webkit-font-smoothing: antialiased; background: var(--ground); color: var(--ink); overflow-x: clip; transition: background-color .5s var(--ease), color .5s var(--ease); }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--indicator); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.over { font: 600 11px/14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.display { font: 700 clamp(44px, 7.4vw, 108px)/1.0 var(--sans); letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.title { font: 700 clamp(34px, 4.8vw, 64px)/1.04 var(--sans); letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.headline { font: 700 clamp(22px, 2.2vw, 28px)/1.15 var(--sans); letter-spacing: -.025em; margin: 0; }
.subhead { font: 600 21px/1.25 var(--sans); letter-spacing: -.015em; margin: 0; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; color: var(--ink-muted); max-width: 34em; margin: 0; text-wrap: pretty; }
.data { font: 500 13px/18px var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-muted); }
.wm { font-family: var(--brand); font-weight: 700; letter-spacing: -.065em; line-height: .84; text-transform: none; }
em { font-style: normal; }

/* ---------- buttons, the cut pressed ---------- */
.btn { --_h: 44px; --_gap: 3px; appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--_h); padding: 0 24px; border-radius: 999px; font: 600 15px/1 var(--sans); letter-spacing: -.006em; background: var(--action); color: var(--on-action); transition: transform .16s var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; -webkit-mask-image: linear-gradient(var(--cut-angle), #000 calc(50% - var(--_gap)/2), transparent calc(50% - var(--_gap)/2), transparent calc(50% + var(--_gap)/2), #000 calc(50% + var(--_gap)/2)); mask-image: linear-gradient(var(--cut-angle), #000 calc(50% - var(--_gap)/2), transparent calc(50% - var(--_gap)/2), transparent calc(50% + var(--_gap)/2), #000 calc(50% + var(--_gap)/2)); }
.btn.sm { --_h: 32px; --_gap: 2px; padding: 0 16px; font-size: 13px; }
.btn.lg { --_h: 52px; --_gap: 4px; padding: 0 28px; font-size: 17px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%); width: min(960px, calc(100% - 28px)); height: 52px; padding: 0 8px 0 18px; border-radius: 999px; display: flex; align-items: center; gap: 22px; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 0 0 1px var(--edge); transition: background-color .5s var(--ease); }
.nav .brand { display: flex; align-items: center; gap: 10px; }
.nav .brand svg { width: 26px; height: 26px; }
.nav .brand span { font: 700 22px/1 var(--brand); letter-spacing: -.045em; text-transform: none; }
.nav ul { list-style: none; display: flex; gap: 22px; margin: 0 0 0 auto; padding: 0; font: 500 14px/1 var(--sans); color: var(--ink-muted); }
.nav ul a { transition: color .2s; }
.nav ul a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav ul { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- sections ---------- */
section { position: relative; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec-head { display: grid; gap: 18px; max-width: 860px; margin: 0 auto 56px; text-align: center; justify-items: center; }
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- HERO ---------- */
.hero { padding: 132px 0 0; overflow: clip; }
.hero-top { display: grid; justify-items: center; text-align: center; gap: 22px; padding: 0 var(--gut); }
.mark-big { width: clamp(84px, 11vw, 132px); aspect-ratio: 1; position: relative; filter: drop-shadow(0 18px 40px rgba(0,0,0,.5)); }
.mark-big svg { width: 100%; height: 100%; overflow: visible; }
.mark-big .m-left, .mark-big .m-right { transition: none; }
.hero h1 { margin: 0; font-size: clamp(88px, 17vw, 244px); display: block; position: relative; padding-bottom: .04em; }
.hero .sub { font: 600 clamp(19px, 2vw, 26px)/1.2 var(--sans); letter-spacing: -.02em; margin: 0; }
.hero .promise { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-muted); margin: 0; }
.hero .promise b { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* waitlist form */
.wl-wrap { width: min(520px, 100%); }
.wl { display: flex; gap: 8px; align-items: center; background: var(--surface); border-radius: 999px; padding: 5px 5px 5px 20px; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.wl input[type=email] { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; outline: 0; font-size: 16px; letter-spacing: -.006em; }
.wl input::placeholder { color: var(--ink-muted); }
.wl:focus-within { box-shadow: inset 0 0 0 1.5px var(--border-strong), 0 0 0 2px var(--ground), 0 0 0 4px var(--indicator); }
.wl .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-msg { margin: 8px 0 0; min-height: 18px; font-size: 13px; line-height: 18px; color: var(--negative); text-align: center; }
.wl-done { display: none; text-align: center; padding: 14px 20px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.wl-done b { display: block; font-weight: 600; color: var(--positive); }
.wl-done span { color: var(--ink-muted); font-size: 14px; }
.wl-wrap.done .wl, .wl-wrap.done .wl-msg { display: none; }
.wl-wrap.done .wl-done { display: block; }
.wl-note { text-align: center; font-size: 13px; color: var(--ink-muted); margin: 10px 0 0; }

/* the app window shot */
.stage { position: relative; margin-top: clamp(40px, 6vw, 72px); perspective: 2200px; padding: 0 var(--gut); }
.stage::before { content: ""; position: absolute; left: 50%; top: 20%; width: min(1100px, 90%); aspect-ratio: 2/1; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--yellow) 22%, transparent), transparent); filter: blur(30px); pointer-events: none; opacity: var(--glow, .8); }
:root[data-theme="butter"] .stage::before { display: none; }

/* ---------- the app window (shared by all mockups) ---------- */
.win { --w: 1440; position: relative; width: 1440px; height: 900px; transform-origin: 0 0; border-radius: 14px; overflow: hidden; background: var(--ground); box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.4; letter-spacing: -.006em; }
.win * { box-sizing: border-box; }
.win-fit { width: 100%; max-width: 1280px; margin: 0 auto; position: relative; aspect-ratio: 1440 / 900; }
.win-fit .win { position: absolute; left: 0; top: 0; }
.tb { height: 52px; display: flex; align-items: center; gap: 16px; padding: 0 16px; position: relative; flex: none; }
.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; display: block; background: #3a3a3e; }
.win:hover .lights i:nth-child(1), .lights.on i:nth-child(1) { background: #ff5f57; } .lights.on i:nth-child(2) { background: #febc2e; } .lights.on i:nth-child(3) { background: #28c840; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-raised); }
.seg span { position: relative; height: 26px; padding: 0 14px; display: flex; align-items: center; font: 500 12px/1 var(--sans); color: var(--ink); border-radius: 999px; }
.seg span.on { background: var(--action); color: var(--on-action); font-weight: 600; }
.seg span + span:not(.on)::before { content: ""; position: absolute; left: -1px; top: 50%; width: 1.5px; height: 12px; background: var(--border-strong); transform: translateY(-50%) rotate(45deg); opacity: .7; }
.seg span.on::before, .seg span.on + span::before { display: none !important; }
.cmdk { position: absolute; left: 50%; transform: translateX(-50%); width: 400px; height: 32px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; color: var(--ink-muted); font-size: 13px; white-space: nowrap; overflow: hidden; }
.kbd { margin-left: auto; font: 500 11px/1 var(--sans); color: var(--ink-muted); background: var(--surface-raised); border-radius: 6px; padding: 3px 6px; }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ib { width: 32px; height: 32px; border-radius: 999px; border: 0; background: var(--surface-raised); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pbtn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 999px; font: 600 13px/1 var(--sans); background: var(--action); color: var(--on-action); white-space: nowrap; }
.panel { background: var(--surface); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hairline); }
.lbl { font: 600 11px/14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.row { display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--surface-raised); color: var(--ink); font: 500 12px/1 var(--sans); white-space: nowrap; }
.pill.on { background: var(--action); color: var(--on-action); font-weight: 600; }
.pill.ind { background: var(--indicator); color: var(--on-indicator); font-weight: 600; }

/* provenance chip, value | who set it, divided by the cut */
.chip { --_h: 26px; --_gx: 2.83px; display: inline-flex; height: var(--_h); font: 500 12px/1 var(--sans); vertical-align: middle; white-space: nowrap; }
.chip .v { display: flex; align-items: center; padding: 0 calc(var(--_h)/2 + 6px) 0 10px; background: var(--surface-raised); color: var(--ink); border-radius: 999px 0 0 999px; clip-path: polygon(0 0, 100% 0, calc(100% - var(--_h)) 100%, 0 100%); }
.chip .s { display: flex; align-items: center; padding: 0 10px 0 calc(var(--_h)/2 + 6px); margin-left: calc(var(--_gx) - var(--_h)); background: var(--ground); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--border-strong); border-radius: 0 999px 999px 0; clip-path: polygon(var(--_h) 0, 100% 0, 100% 100%, 0 100%); transform: translate(2.12px, -2.12px); }
.chip[data-o="you"] .s { background: var(--indicator); color: var(--on-indicator); box-shadow: none; font-weight: 600; }
.chip.sm { --_h: 22px; --_gx: 2.4px; font-size: 11px; }
.tag { --_h: 20px; display: inline-flex; align-items: center; height: var(--_h); padding: 0 8px 0 calc(var(--_h)/2 + 4px); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; background: rgba(0,0,0,.64); color: #fff; clip-path: polygon(var(--_h) 0, 100% 0, 100% 100%, 0 100%); }

/* footage frames, drawn: no stock, no faces */
.fr { position: relative; overflow: hidden; background: #2a2622; border-radius: var(--r-md); isolation: isolate; }
.fr svg.sc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fr .tag { position: absolute; right: 0; bottom: 8px; }
.fr.sel { outline: 2.5px solid var(--indicator); outline-offset: 2px; }

/* ---------- timeline (mockups) ---------- */
.tl { position: relative; }
.lane { display: flex; align-items: center; height: 34px; }
.lane .k { width: 96px; flex: none; font: 500 12px/1 var(--sans); color: var(--ink-muted); padding-left: 16px; }
.lane .t { flex: 1; position: relative; height: 100%; }
.b { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; font: 600 11px/1 var(--sans); display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 1px 0 var(--hairline); }
.b.sel { background: var(--indicator); color: var(--on-indicator); box-shadow: none; }
.b.vid { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 44px, transparent 44px 46px); }
:root[data-theme="butter"] .b.vid { background-image: repeating-linear-gradient(90deg, rgba(20,19,15,.06) 0 44px, transparent 44px 46px); }
.playhead { position: absolute; top: 8px; bottom: 8px; width: 2px; background: var(--indicator); border-radius: 2px; z-index: 4; pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--indicator); }

/* ---------- marquee ---------- */
.marq { overflow: hidden; padding: 22px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq .tr { display: flex; gap: 12px; width: max-content; will-change: transform; }
.mq { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px 0 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); font: 500 16px/1 var(--sans); white-space: nowrap; }
.mq i { width: 8px; height: 8px; border-radius: 50%; background: var(--indicator); }
.mq em { color: var(--ink-muted); font: 500 12px/1 var(--mono); }

/* ---------- pinned demos ---------- */
.demo { height: 440svh; }
.demo.short { height: 340svh; }
.pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pin-in { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(10px, 2.4vh, 26px); padding: clamp(78px, 11vh, 100px) var(--gut) clamp(18px, 4vh, 40px); max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; }
.d-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.d-head .t { display: grid; gap: 10px; }
.d-head h2 { margin: 0; font: 700 clamp(30px, 4.2vw, 56px)/1.02 var(--sans); letter-spacing: -.04em; text-wrap: balance; max-width: 15em; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.steps li { height: 30px; padding: 0 14px; border-radius: 999px; display: flex; align-items: center; font: 500 13px/1 var(--sans); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--hairline); transition: all .3s var(--ease); }
.steps li.on { background: var(--action); color: var(--on-action); box-shadow: none; font-weight: 600; }
.dstage { position: relative; min-height: 0; display: grid; place-items: center; }
.ghost { position: absolute; right: -2%; bottom: -12%; font: 700 clamp(220px, 36vw, 520px)/.8 var(--brand); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px var(--hairline); pointer-events: none; z-index: 0; }
@media (max-width: 860px) { .d-head { grid-template-columns: 1fr; } .steps { flex-wrap: wrap; } }

/* demo: say it */
.say { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); min-height: 0; }
.say .col { display: grid; gap: 14px; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.mic { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); min-height: 64px; }
.mic .orb { width: 40px; height: 40px; border-radius: 50%; background: var(--action); color: var(--on-action); display: grid; place-items: center; flex: none; position: relative; }
.mic .orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--indicator); opacity: var(--ring, 0); transform: scale(calc(.9 + var(--ring, 0) * .25)); }
.mic .said { font: 600 clamp(17px, 1.8vw, 22px)/1.2 var(--sans); letter-spacing: -.02em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mic .said::after { content: ""; display: inline-block; width: 2px; height: .95em; background: var(--indicator); margin-left: 3px; vertical-align: -.1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mic .understood { display: flex; }
.tx { padding: 22px 24px; display: block; font: 500 clamp(15px, 1.5vw, 19px)/1.75 var(--sans); letter-spacing: -.012em; overflow: hidden; }
.tx w { display: inline; padding: 1px 0; border-radius: 4px; position: relative; transition: none; }
.tx w.f { --x: 0; color: color-mix(in srgb, var(--ink) calc(100% - var(--x) * 62%), transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--indicator) calc(var(--x) * 100%), transparent); text-decoration-thickness: 2px; background: color-mix(in srgb, var(--indicator) calc(var(--x) * 18%), transparent); }
.tx w.p { display: inline-block; }
.tx .pause { display: inline-block; height: .8em; vertical-align: -.08em; width: calc(var(--pw, 1) * 1.6em); background: repeating-linear-gradient(90deg, var(--border-strong) 0 3px, transparent 3px 6px); border-radius: 2px; opacity: calc(var(--po, 1) * .8); overflow: hidden; margin: 0 .15em; }
.tx-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.dur { font: 700 clamp(34px, 4vw, 52px)/1 var(--brand); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.dur small { font: 500 13px/1 var(--mono); letter-spacing: 0; color: var(--ink-muted); margin-left: 6px; }
.dur-from { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); font: 500 15px/1 var(--mono); }
.prev { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.prev .fr { height: 100%; min-height: 0; border-radius: var(--r-lg); }
.prev-tl { padding: 14px 16px 12px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.track { position: relative; height: 42px; display: block; }
.track .c { position: absolute; top: 0; height: 40px; border-radius: 8px; background: var(--surface-raised); font: 500 12px/40px var(--sans); padding: 0 12px; overflow: hidden; white-space: nowrap; box-shadow: inset 0 1px 0 var(--hairline); }
.track .c.cutr { clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
.track .c.cutl { clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%); padding-left: 28px; }
.track .c.sel { background: var(--indicator); color: var(--on-indicator); font-weight: 600; box-shadow: none; }
.wave { display: flex; align-items: center; gap: 2px; height: 26px; margin-top: 8px; }
.wave i { flex: 1; background: var(--ink-muted); border-radius: 2px; opacity: .7; display: block; }
@media (max-width: 960px) { .say { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: auto; } .prev .fr { min-height: 180px; } }

/* demo: find it */
.find { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; min-height: 0; }
.qbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); font: 500 clamp(16px, 1.7vw, 21px)/1 var(--sans); letter-spacing: -.015em; }
.qbar .ico { width: 20px; height: 20px; color: var(--ink-muted); }
.qbar .caret { width: 2px; height: 1.1em; background: var(--indicator); animation: blink 1s steps(1) infinite; margin-left: -4px; }
.qbar .cnt { margin-left: auto; font: 500 13px/1 var(--mono); color: var(--ink-muted); white-space: nowrap; }
.understood { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 28px; }
.understood .lbl { margin-right: 4px; }
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-content: start; min-height: 0; overflow: hidden; }
.cc { display: grid; gap: 8px; transform-origin: 50% 40%; }
.cc .fr { aspect-ratio: 16 / 10; }
.cc .ti { font: 600 14px/1.2 var(--sans); letter-spacing: -.006em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc .me { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bx { position: relative; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); padding: 32px; overflow: hidden; display: grid; gap: 14px; align-content: start; min-height: 420px; }
.bx h3 { margin: 0; font: 700 clamp(24px, 2.4vw, 32px)/1.1 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.bx p { margin: 0; color: var(--ink-muted); max-width: 30em; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.bx .art { position: absolute; left: 0; right: 0; bottom: 0; }
.bx.w7 { grid-column: span 7; } .bx.w5 { grid-column: span 5; } .bx.w4 { grid-column: span 4; } .bx.w6 { grid-column: span 6; } .bx.w8 { grid-column: span 8; } .bx.w12 { grid-column: span 12; }
.bx.yel { background: var(--yellow); color: var(--ink-900); box-shadow: none; }
.bx.yel p, .bx.yel .over { color: #4A4217; }
.bx.yel.cutcard { -webkit-mask-image: linear-gradient(var(--cut-angle), #000 calc(50% - 2px), transparent calc(50% - 2px), transparent calc(50% + 2px), #000 calc(50% + 2px)); mask-image: linear-gradient(var(--cut-angle), #000 calc(50% - 2px), transparent calc(50% - 2px), transparent calc(50% + 2px), #000 calc(50% + 2px)); }
:root[data-theme="butter"] .bx.yel { background: var(--ink-900); color: var(--yellow); } :root[data-theme="butter"] .bx.yel p, :root[data-theme="butter"] .bx.yel .over { color: #E7D79B; }
@media (max-width: 960px) { .bx.w7, .bx.w5, .bx.w4, .bx.w6, .bx.w8 { grid-column: span 12; } .bx { padding: 24px; min-height: 380px; } }

/* bento art pieces */
.cap-demo { position: relative; height: 230px; margin: 0 24px; border-radius: 16px 16px 0 0; overflow: hidden; }
.cap-demo .capt { position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; font: 800 clamp(22px, 2.6vw, 34px)/1.05 var(--sans); letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.cap-demo .capt span { display: inline-block; }
.cap-demo .capt span.hot { color: var(--yellow); transform: scale(1.12); }
.cap-styles { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.behind { position: relative; height: 270px; margin: 0 24px; border-radius: 16px 16px 0 0; overflow: hidden; }
.behind .bt { position: absolute; left: 0; right: 0; top: 7%; text-align: center; font: 900 clamp(70px, 9vw, 120px)/.86 var(--sans); letter-spacing: -.045em; color: #fff; z-index: 1; }
.behind .subj { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 88%; z-index: 2; }

.sound-art { padding: 0 24px 24px; display: grid; gap: 8px; }
.sfx-row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--hairline); font: 500 14px/1 var(--sans); }
.sfx-row .data { margin-left: auto; color: var(--ink-muted); }
.sfx-row .bars { display: flex; gap: 2px; align-items: center; height: 18px; width: 54px; }
.sfx-row .bars i { flex: 1; background: var(--indicator); border-radius: 1px; display: block; }
:root[data-theme="butter"] .sfx-row .bars i { background: var(--ink); }

.phone { position: relative; width: 218px; height: 456px; border-radius: 38px; background: #000; padding: 8px; box-shadow: 0 0 0 1.5px #3a3a3e, 0 24px 60px rgba(0,0,0,.5); flex: none; }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--ground); display: flex; flex-direction: column; }
.phone .isl { position: absolute; top: 9px; left: 50%; width: 62px; height: 18px; border-radius: 99px; background: #000; transform: translateX(-50%); z-index: 3; }
:root[data-theme="butter"] .phone { background: var(--ink-900); }

/* ---------- stands out ---------- */
.stand { padding: clamp(80px, 12vw, 160px) 0; }
.claims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.claim { border-radius: var(--r-xl); padding: 32px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); display: grid; gap: 14px; align-content: start; min-height: 300px; }
.claim .num { font: 700 64px/1 var(--brand); letter-spacing: -.06em; }
.claim h3 { margin: 0; font: 700 24px/1.12 var(--sans); letter-spacing: -.025em; }
.claim p { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 1.45; }
@media (max-width: 960px) { .claims { grid-template-columns: 1fr; } .claim { min-height: 0; } }

/* provenance showcase */
.prov-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* modes */
.modes { padding: clamp(60px, 9vw, 120px) 0; }
.mode-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mode { appearance: none; border: 0; cursor: pointer; text-align: left; border-radius: var(--r-xl); padding: 24px; display: grid; gap: 16px; min-height: 260px; align-content: space-between; box-shadow: inset 0 0 0 1.5px var(--border-strong); transition: transform .25s var(--ease), box-shadow .25s; }
.mode:hover { transform: translateY(-2px); }
.mode[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--indicator); }
.mode.m-pitch { background: #000; color: #F5F5F7; } .mode.m-graphite { background: #111214; color: #F2F2F3; } .mode.m-butter { background: #F4D35E; color: #14130F; }
.mode .mini { display: flex; gap: 6px; align-items: center; }
.mode .mini i { display: block; height: 28px; border-radius: 8px; flex: 1; }
.m-pitch .mini i:nth-child(1) { background: #121214; } .m-pitch .mini i:nth-child(2) { background: #1B1B1E; } .m-pitch .mini i:nth-child(3) { background: #F4D35E; flex: .5; }
.m-graphite .mini i:nth-child(1) { background: #1A1B1E; } .m-graphite .mini i:nth-child(2) { background: #202125; } .m-graphite .mini i:nth-child(3) { background: #F4D35E; flex: .5; }
.m-butter .mini i:nth-child(1) { background: #FBEBB0; } .m-butter .mini i:nth-child(2) { background: #F8E08C; } .m-butter .mini i:nth-child(3) { background: #14130F; flex: .5; }
.mode b { font: 700 28px/1 var(--brand); letter-spacing: -.045em; }
.mode small { display: block; font: 500 14px/1.4 var(--sans); opacity: .72; margin-top: 6px; }
@media (max-width: 860px) { .mode-row { grid-template-columns: 1fr; } .mode { min-height: 0; } }

/* numbers */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.num-c { padding: 28px 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); display: grid; gap: 10px; align-content: space-between; min-height: 200px; }
.num-c .big { font: 700 clamp(48px, 5.4vw, 76px)/.9 var(--brand); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.num-c .big small { font-size: .38em; letter-spacing: -.03em; color: var(--ink-muted); margin-left: 4px; }
.num-c p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.4; }
@media (max-width: 960px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* agents */
.agents { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.term { border-radius: var(--r-lg); background: #0A0A0B; color: #E7E7EA; box-shadow: var(--shadow-md); overflow: hidden; font: 500 14px/1.6 var(--mono); }
.term .bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #161618; }
.term .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3e; display: block; }
.term pre { margin: 0; padding: 18px 20px 22px; white-space: pre-wrap; min-height: 300px; font: inherit; }
.term .y { color: var(--yellow); } .term .g { color: #6EE7A0; } .term .m { color: #8e8e95; }
@media (max-width: 960px) { .agents { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--hairline); padding: 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 600 21px/1.25 var(--sans); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); position: relative; flex: none; transition: transform .35s var(--ease); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq p { margin: 0 0 26px; color: var(--ink-muted); max-width: 40em; font-size: 17px; line-height: 1.5; }

/* final */
.final { margin: 0 var(--gut) var(--gut); border-radius: 36px; background: var(--yellow); color: var(--ink-900); padding: clamp(60px, 9vw, 130px) var(--gut); overflow: hidden; position: relative; isolation: isolate; text-align: center; display: grid; justify-items: center; gap: 24px; }
:root[data-theme="butter"] .final { background: var(--ink-900); color: var(--yellow); }
.final .big { font: 700 clamp(80px, 18vw, 260px)/.82 var(--brand); letter-spacing: -.065em; margin: 0; }
.final .wl { background: #14130F; color: #F5F5F7; box-shadow: none; }
.final .wl input::placeholder { color: #AEAEB4; }
.final .wl .btn { background: #F5F5F7; color: #000; }
:root[data-theme="butter"] .final .wl { background: var(--yellow); color: var(--ink-900); } :root[data-theme="butter"] .final .wl input::placeholder { color: #4A4217; } :root[data-theme="butter"] .final .wl .btn { background: var(--ink-900); color: var(--yellow); }
.final .wl-done { background: rgba(20,19,15,.9); color: #F5F5F7; }
.final .wl-note { color: #4A4217; }
:root[data-theme="butter"] .final .wl-note { color: #E7D79B; }
.final .slab-deco { position: absolute; z-index: -1; right: -6%; top: -30%; width: min(520px, 60%); aspect-ratio: 1; }
.final .slab-deco svg { width: 100%; height: 100%; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 var(--gut) 40px; flex-wrap: wrap; color: var(--ink-muted); font-size: 13px; }
.foot .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.foot .brand svg { width: 24px; height: 24px; }
.foot .brand span { font: 700 20px/1 var(--brand); letter-spacing: -.045em; }

/* scroll progress cut, top */
.prog { position: fixed; z-index: 60; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: var(--indicator); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .demo, .demo.short { height: auto; }
  .pin { position: relative; height: auto; min-height: 100svh; }
  .pin-in { position: relative; }
  .mic .said::after, .qbar .caret { animation: none; }
}
@media (max-width: 960px) {
  .demo, .demo.short { height: 360svh; }
}