/* DAWVID, the landing page (the front door since LANDING-2; also at /new/). PAY-1: the ground is a true INSTRUMENT GREY, the plugin era's approved look
   (plugin/post/BRIEF.md "LOOK", skin D2, plugin/post/ui8/tokens_d2.json): a cool mid-light grey, the body of a hardware unit. The values are that file's own, taken
   one step down its ramp so the page reads as grey and not as off-white: the page is D2's "well" (#d1d5d9), raised panels are D2's "ground" (#e5e7e9), sunk ones
   D2's "valueTrack" (#c6ccd1), ink is D2's ink (#14171a), the orange and its ink are D2's accent pair. Hairlines are the ink at 12 / 22 %. Radii 4 to 10.
   ONE face: Inter, bundled (desktop/web/fonts/, OFL), the system grotesque behind it; tabular figures; no mono, no tracked capitals; the wordmark keeps its own
   drawn form. ONE accent (#ff5416) and it is a fill, never small text on the grey (2.2 : 1 there): the call (its label is the dark accent ink, 6.0 on the orange,
   and it carries a darker edge so the key's shape does not rest on the orange alone), the dial's arc, a take, the playhead's bracket.
   The only other colour is the projects' own track colours, drawn by the renderer and the song map. The product sits on the page in a window (.win): a title bar
   with the three window controls, a hairline, one soft shadow; inside it the Studio is dark, as the Studio is. No gradients, no glass. Motion: 90 to 160 ms fades;
   nothing moves at rest but the video.
   Contrast (WCAG) on the page ground #d1d5d9: ink 12.2, ink-2 6.9, ink-3 5.2, accent-text 5.1; on the sunk #c6ccd1: ink 11.1, ink-3 4.9, accent-text 4.6;
   on the raised #e5e7e9: ink 14.5, ink-3 5.6; inside the window on #1f1f22: ink 13.3, ink-2 6.5, ink-3 5.1. */
@font-face { font-family: "Inter"; src: url(/fonts/InterVariable.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --bg: #d1d5d9; --bg-2: #e5e7e9; --bg-3: #c6ccd1; --bg-hi: #eff1f2;
  --ink: #14171a; --ink-2: rgba(20, 23, 26, .78); --ink-3: rgba(20, 23, 26, .68); --line: rgba(20, 23, 26, .12); --line-2: rgba(20, 23, 26, .22);
  --accent: #ff5416; --accent-hi: #ff6a33; --accent-ink: #1c0700; --accent-text: #9a3000; --accent-edge: rgba(28, 7, 0, .36);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --nav: 56px; --pad: clamp(20px, 3vw, 48px); --max: 1360px; --edge: max(var(--pad), calc((100vw - var(--max)) / 2));
  /* the window's own (dark) values: the Studio's pro tokens */
  --w-bg: #18181a; --w-bar: #242427; --w-card: #1f1f22; --w-display: #0a0a0b; --w-ink: #e9e7e2; --w-ink-2: rgba(233, 231, 226, .66); --w-ink-3: rgba(233, 231, 226, .56); --w-line: rgba(255, 255, 255, .07); --w-line-2: rgba(255, 255, 255, .14);
  --wh: clamp(430px, calc(100svh - 338px), 640px);      /* the stage's height inside the window: the window is sized from it, never from the viewport's width alone */
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav); }
body { min-height: 100svh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 4px; font-size: 13px; } .skip:focus { top: 8px; }
.only-mobile { display: none !important; }
.tag { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.q { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.link { font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color 90ms linear; } .link:hover { color: var(--ink); }
.key { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--accent-edge); transition: background 90ms linear; } .key:hover { background: var(--accent-hi); }
.key.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; } .key.ghost:hover { background: var(--line); }
.key.s { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 5px; } .key.wide { width: 100%; height: 46px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; height: var(--nav); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge); background: var(--bg); border-bottom: 1px solid var(--line); }
/* BRAND-1: the brand is the lockup (landing/brand/lockup.css): the vector wordmark with its pronunciation beneath it; in a window's title bar the wordmark alone */
.win-title .lockup { vertical-align: -1px; }
.nav nav { display: flex; gap: clamp(14px, 2vw, 26px); align-items: center; font-size: 13.5px; color: var(--ink-2); } .nav nav a:not(.key) { transition: color 100ms linear; } .nav nav a:not(.key):hover { color: var(--ink); }

/* 1. THE FIRST SCREEN (SHOW-1): on the left the headline, one sentence, and at the foot of the column the call with one quiet line; on the right the product,
   live, in its window, about 64 % of the width. Under the window: the instruction line and the three projects. Nothing else. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.78fr); gap: clamp(28px, 3.4vw, 56px); align-items: stretch; padding: clamp(28px, 5vh, 52px) var(--edge) clamp(36px, 6vh, 64px); }
.left { display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 24px); min-width: 0; padding-top: 2px; }
h1 { font-size: clamp(40px, min(5.5vw, 9.6vh), 84px); font-weight: 700; line-height: .96; letter-spacing: -.042em; margin-left: -.045em; }
.lede { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.45; color: var(--ink-2); max-width: 27ch; }
/* WEB-FINAL: the foot block. Its rows are measured against what stands under the window (.under-win: 14 px, the instruction line, 10 px, the 28 px chips), so the
   call ends on the window's lower edge, the colophon reads on the instruction's line and "Welcome back" on the chips' line (its row is kept when it is empty) */
.pitch { margin-top: auto; display: grid; justify-items: start; } .pitch .lede { margin-bottom: clamp(18px, 2.8vh, 26px); }
.colophon { margin-top: 14px; font-size: 13.5px; line-height: 20px; min-height: 20px; } .back-row { margin-top: 10px; min-height: 28px; display: flex; align-items: center; }
.get-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .terms { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.back { font-size: 13px; line-height: 1.45; color: var(--ink-2); } .back .link { font-size: inherit; color: var(--ink); text-align: left; }
.under-win { display: grid; gap: 10px; justify-items: start; padding: 0 2px; }      /* (two lines, always: the instruction, then the projects. The line changes length as the visitor goes; nothing beside it may move) */
.say { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); } .say i { font-style: normal; font-weight: 600; color: var(--ink); white-space: nowrap; }
/* the DAW vote (in "Works with"): a question and seven plain keys */
.vote { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 26px; font-size: 14px; color: var(--ink); }
.vote-q { margin-right: 8px; font-weight: 600; } .vote-row { display: contents; }
.vote button { height: 28px; padding: 0 10px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--ink-2); transition: color 100ms linear, background 100ms linear; } .vote button:hover { color: var(--ink); background: var(--line); }
.vote.done .vote-row button, .vote.done .vote-q { display: none; } .vote-said { color: var(--ink-2); }
/* a returning browser's own songs (above the final drop) */
.yours { display: grid; gap: 8px; }
.yours-list { display: grid; }
.mine { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 40px; padding: 0 2px; border-top: 1px solid var(--line); font-size: 14px; text-align: left; color: var(--ink); width: 100%; } .mine:last-child { border-bottom: 1px solid var(--line); }
.mine em { height: 12px; border-radius: 2px; } .mine b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mine .q { white-space: nowrap; }
.mine.gone { grid-template-columns: 56px minmax(0, auto) minmax(0, 1fr); color: var(--ink-3); cursor: default; } .mine.gone em { background: none !important; box-shadow: inset 0 0 0 1px var(--line-2); } .mine.gone .q { white-space: normal; text-align: right; }
button.mine:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

/* THE WINDOW. A picture of an app window: a 34 px title bar, the three window controls at its left (not controls: aria-hidden, no pointer), the title centred,
   a hairline, a 10 px radius, one soft shadow on the light ground. Everything inside reads the window's dark values. */
.demo { display: grid; gap: 14px; align-content: start; justify-items: stretch; min-width: 0; }
.win { --ink: var(--w-ink); --ink-2: var(--w-ink-2); --ink-3: var(--w-ink-3); --line: var(--w-line); --line-2: var(--w-line-2); color: var(--ink); background: var(--w-bg); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .34), 0 1px 2px rgba(14, 18, 22, .12), 0 22px 44px -18px rgba(14, 18, 22, .34), 0 44px 88px -44px rgba(14, 18, 22, .3); }
.win-bar, .stage-bar { position: relative; display: flex; align-items: center; justify-content: center; background: var(--w-bar); color: var(--w-ink-2); pointer-events: none; user-select: none; -webkit-user-select: none; }
.win-bar { height: 34px; border-bottom: 1px solid rgba(0, 0, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.win-dots { position: absolute; left: 13px; top: 50%; display: flex; gap: 8px; transform: translateY(-50%); } .win-dots i { width: 12px; height: 12px; border-radius: 50%; background: #ec6a5e; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .28); } .win-dots i:nth-child(2) { background: #f4bf4f; } .win-dots i:nth-child(3) { background: #61c554; }
.win-title { max-width: calc(100% - 180px); font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .win-song:not(:empty)::before { content: " \2014  "; white-space: pre; opacity: .7; }
.stage-bar { display: none; }
.win-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px; }
.stage { position: relative; height: var(--wh); aspect-ratio: 9 / 16; border-radius: 6px; background: var(--w-display); box-shadow: 0 0 0 1px var(--w-line); overflow: hidden; }
.stage canvas, .stage video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: var(--w-display); object-fit: cover; }
.stage canvas { cursor: pointer; }
/* SHOW-1: never an empty stage. The first demo's poster (a real frame of its export) stands here until the renderer has drawn its first frame (.drawn) */
.stage .poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .stage:not(.drawn) canvas { visibility: hidden; }
.snd { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 5px; background: rgba(14, 14, 16, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); display: grid; place-items: center; color: #e9e7e2; } .snd svg { width: 17px; height: 17px; }
.snd[hidden] { display: none; } .snd[aria-pressed="true"] .i-off, .snd[aria-pressed="false"] .i-on { display: none; } .snd[aria-pressed="true"] { color: var(--accent); }
.snd:focus-visible, .play:focus-visible { outline-color: #fff; outline-offset: -3px; }
.snd-said { position: absolute; right: 48px; bottom: 14px; font-size: 12.5px; color: #e9e7e2; background: rgba(14, 14, 16, .9); padding: 2px 8px; border-radius: 4px; opacity: 0; transition: opacity 160ms linear; pointer-events: none; } .snd-said.on { opacity: 1; }
.play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(14, 14, 16, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); display: grid; place-items: center; color: #e9e7e2; } .play svg { width: 24px; height: 24px; }

/* beside the video: the deck (four dials, Remix, its takes), and under it the song the video is cut from */
.win-r { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.win :focus-visible { outline-color: var(--accent); }
.deck, .source { background: var(--w-card); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--w-line); }
.deck { --knob: clamp(46px, calc(var(--wh) * .112), 62px); --knob-m: clamp(72px, calc(var(--wh) * .178), 98px); flex: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: clamp(12px, 2.4vh, 20px) 14px; align-items: center; padding: clamp(14px, 2.4vh, 20px) 18px 14px; }
.dials { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 clamp(4px, 1.2vw, 22px); }
.three, .master { display: contents; }
.knob { position: relative; width: var(--knob); display: flex; flex-direction: column; align-items: center; cursor: ns-resize; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.knob.master { width: var(--knob-m); }
.knob svg { width: 100%; aspect-ratio: 1; display: block; overflow: visible; border-radius: 50%; }
.k-track, .k-lit { fill: none; stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: butt; } .k-track { stroke: rgba(255, 255, 255, .13); } .k-lit { stroke: var(--accent); }
.k-cap { fill: #2a2a2e; stroke: rgba(255, 255, 255, .1); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill 90ms linear; } .knob:hover .k-cap, .knob.turning .k-cap { fill: #323237; }
.k-pointer { fill: none; stroke: var(--w-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.k-val { margin-top: 6px; font-size: 12px; line-height: 14px; color: var(--ink); white-space: nowrap; } .k-name { font-size: 11.5px; line-height: 14px; color: var(--ink-3); }
.knob.master .k-val { font-size: 13px; }
.knob.by-key:focus svg { outline: 1.5px solid var(--accent); outline-offset: 2px; }
.remix { min-width: 124px; height: 34px; padding: 0 18px; border-radius: 5px; background: #303035; color: var(--w-ink); font-weight: 600; font-size: 13px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background 90ms linear, opacity 90ms linear; } .remix:hover { background: #3a3a40; } .remix:disabled { opacity: .4; cursor: default; }
.takes { display: flex; gap: 5px; } .take { width: 20px; height: 6px; border-radius: 2px; background: var(--w-line-2); position: relative; transition: background 90ms linear; } .take::after { content: ""; position: absolute; inset: -9px -2px; } .take:hover { background: var(--w-ink-3); } .take.on { background: var(--accent); }
.deck .q { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.45em; }
.source { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 12px; min-height: 0; }
.source .tag { flex: none; font-size: 12.5px; color: var(--ink); } .source .q { flex: none; min-height: 1.45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.map canvas { display: block; width: 100%; filter: saturate(.9) brightness(.96); }
.map-top { position: relative; background: #131315; border-radius: 3px; padding: 5px 0; } .map-win { position: absolute; top: 2px; bottom: 2px; box-shadow: 0 0 0 1px #e9e7e2; border-radius: 2px; background: rgba(255, 255, 255, .06); pointer-events: none; }
.map-box { position: relative; margin-top: 10px; background: #131315; border-radius: 3px; }
.map-head { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #e9e7e2; will-change: transform; }
.map-src { position: absolute; box-shadow: 0 0 0 1.5px var(--accent); border-radius: 2px; pointer-events: none; }
/* the one cue: a thin ring on the control the line is talking about */
html[data-step="0"] .deck .knob.master svg { outline: 1px solid var(--accent); outline-offset: 5px; }
html[data-step="1"] .deck .remix { outline: 1px solid var(--accent); outline-offset: 3px; }

/* under the window, on the page: the three projects it can play */
.songs { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 28px; max-width: 100%; padding: 0 10px 0 8px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--ink-2); display: inline-flex; gap: 8px; align-items: center; transition: background 100ms linear, color 100ms linear; }
.chip em { flex: none; width: 24px; height: 10px; border-radius: 2px; } .chip-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; } .chip-b { color: var(--ink-3); }
.chip:hover { color: var(--ink); background: var(--line); } .chip.on { color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }

/* the recording in place of the live stage: nothing that does not work is shown (the window is then the video under its title bar) */
html[data-live="rec"] .win-r, html[data-live="none"] .demo, html[data-live="none"] .say, html[data-live="none"] .thumb { display: none; }
html[data-live="rec"] .thumb-row { display: none; }
html[data-live="rec"] .win { justify-self: center; } html[data-live="rec"] .win-body { grid-template-columns: auto; } html[data-live="rec"] .under-win { justify-items: center; } html[data-live="rec"] .win-title { max-width: calc(100% - 150px); }
html[data-live="none"] .hero { grid-template-columns: minmax(0, 1fr); }

/* BELOW THE FIRST SCREEN (SHOW-1): set like a printed manual. Twelve columns; each section opens with a rule, its heading stands in the left four columns and its
   text in the right eight; figures run the full width, numbered, with a caption in the text face. Nothing arrives, slides or fades: the page is simply there. */
.sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(26px, 4.4vh, 44px); align-items: start; padding: clamp(44px, 7vh, 76px) 0; margin: 0 var(--edge); border-top: 1px solid var(--line-2); }
.sec > h2 { grid-column: 1 / span 4; font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; max-width: 11em; }
.sec-b { grid-column: 5 / -1; min-width: 0; }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.42; letter-spacing: -.011em; color: var(--ink); max-width: 33em; }
.sec-b > .q { margin-top: 10px; font-size: 13.5px; }
/* figures: one row, one height. The three upright ones are 9:16 (two are frames of a video, whole); the first is wider and takes the row's height */
.figs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 24px; row-gap: 12px; }
.fig { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; } .fig-w { grid-column: span 2; }
.plate { position: relative; background: var(--w-display); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .42); } .fig:not(.fig-w) .plate { aspect-ratio: 9 / 16; }
.plate img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.plate.app img { top: 22px; height: calc(100% - 22px); } .plate-bar { position: absolute; inset: 0 0 auto 0; height: 22px; background: var(--w-bar); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5); } .plate-bar .win-dots { left: 9px; gap: 5px; } .plate-bar .win-dots i { width: 7px; height: 7px; }
figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 38ch; } figcaption b { font-weight: 600; color: var(--ink); margin-right: 5px; white-space: nowrap; }
.fig.shot { grid-column: 5 / -1; display: block; } .shot .win img { display: block; width: 100%; height: auto; } .open-fig { display: block; cursor: zoom-in; } .open-fig:focus-visible { outline-offset: -3px; } .tap { display: none; } .shot figcaption { margin-top: 14px; max-width: none; }
/* a plain list of terms, two columns */
.terms-list { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.terms-list > div { padding: 13px 0 15px; border-top: 1px solid var(--line); } .terms-list dt { font-size: 15px; font-weight: 600; color: var(--ink); } .terms-list dd { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 36ch; }
/* a small honest table */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; } .tbl th, .tbl td { text-align: left; padding: 11px 20px 12px 0; border-top: 1px solid var(--line); vertical-align: baseline; font-weight: 400; } .tbl td:last-child { padding-right: 0; }
.tbl thead th { border-top: 0; padding-top: 0; padding-bottom: 8px; font-size: 13px; color: var(--ink-3); } .tbl tbody th { font-weight: 600; color: var(--ink); } .tbl td { color: var(--ink-2); } .tbl tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.rows { display: grid; } .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: baseline; padding: 12px 0 13px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); } .rows > .row:last-of-type { border-bottom: 1px solid var(--line); }
.row b, .row dt { font-weight: 600; } .row dd, .row > span:last-child { color: var(--ink-2); } .row dt { flex: none; } .row > span:first-child { color: var(--ink); }
.rows > .q { margin-top: 10px; }
/* PAY-1: the price, said plainly: two rows (the free song, the plan), each a name, what it is, and what it costs. No crossed-out number, no badge, no timer. */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line-2); } .plan:last-of-type { border-bottom: 1px solid var(--line-2); }
.plan b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .plan .cost { font-size: 17px; font-weight: 600; text-align: right; white-space: nowrap; } .plan .cost small { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.plan p { grid-column: 1 / -1; color: var(--ink-2); font-size: 14px; line-height: 1.5; max-width: 52ch; }
.price-act { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 14px; } .price-act .q { flex: 1 1 220px; }
.maker { grid-column: 1 / span 4; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.38; letter-spacing: -.011em; max-width: 21ch; color: var(--ink); } .maker:empty { display: none; } .maker p + p { margin-top: 12px; } .maker-by { font-size: 13.5px; letter-spacing: 0; color: var(--ink-3); }
.final { display: grid; gap: 16px; } .last:has(.maker:empty) .final { grid-column: 3 / span 8; }
.zone { display: grid; place-items: center; gap: 6px; padding: 52px 24px; border: 1px dashed rgba(20, 23, 26, .42); border-radius: 8px; background: var(--bg-2); text-align: center; transition: border-color 100ms linear, background 100ms linear; } .zone:hover { border-color: var(--ink); background: var(--bg-hi); }
.zone-t { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.034em; line-height: 1.05; } .zone-s { font-size: 13.5px; color: var(--ink-3); }
.foot { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 20px 0 30px; margin: 0 var(--edge); border-top: 1px solid var(--line-2); }
.foot-legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-3); } .foot-legal a:hover { color: var(--ink); } .foot-legal .draft { color: var(--accent-text); }

/* a file over the page; the Studio opened in place */
.veil { position: fixed; inset: 0; z-index: 40; padding: 8px; background: rgba(209, 213, 217, .96); display: none; } .veil.on { display: block; }
.veil-in { height: 100%; border: 1.5px dashed var(--ink); border-radius: 8px; display: grid; place-content: center; gap: 8px; text-align: center; } .veil-t { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -.03em; } .veil-s { font-size: 14px; color: var(--ink-3); }
.app-layer { position: fixed; inset: 0; z-index: 30; background: #18181a; opacity: 0; transition: opacity 120ms linear; } .app-layer.on { opacity: 1; } .app-layer iframe { width: 100%; height: 100%; border: 0; display: block; }
html.studio-open, html.studio-open body { overflow: hidden; }

/* narrower desks: the words go above, the window keeps its size under them */
@media (max-width: 1040px) and (min-width: 761px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; } .left { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px 32px; align-items: start; } h1 { font-size: clamp(40px, 6.4vw, 64px); } h1 br { display: none; } .lede { max-width: none; } .pitch { margin-top: 0; } .back-row { min-height: 0; }
  .demo { justify-items: center; } .win, .under-win { width: min(100%, 780px); }
  .sec > h2 { grid-column: 1 / -1; max-width: none; } .sec-b, .maker, .fig.shot { grid-column: 1 / -1; } .maker { max-width: 34ch; }
}
/* THE PHONE (FUNNEL-1: nearly every visitor, arriving from a Reel inside Instagram's own browser). The first screen is the headline, one plain line, the video at
   the size it has in a feed under a slim title bar (Remix and the sound key on it, as on a Reel), and ONE action in a bar under the thumb: send this page to the
   computer, where the project is. Under the fold: Energy, the same action with its two other ways (copy, leave an email), then the rest of the page as it is on a desk.
   Sizes: the small viewport (svh: what is left while the browser's own bars are showing), the home indicator's inset under the bar, 44 px for everything a thumb
   presses, 16 px in the one text field (a smaller one makes iOS zoom the page). The window's parts are laid out by the page here and read the page's light values. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  :root { --nav: 48px; --pad: 16px; --bar: 70px; --safe-b: env(safe-area-inset-bottom, 0px); --sh: clamp(250px, calc(100vh - var(--nav) - var(--bar) - 92px - var(--safe-b)), 640px); }
  @supports (height: 100svh) { :root { --sh: clamp(250px, calc(100svh - var(--nav) - var(--bar) - 92px - var(--safe-b)), 640px); } }
  .only-desk { display: none !important; } .only-mobile { display: grid !important; }
  body { padding-bottom: calc(var(--bar) + var(--safe-b)); } .nav { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); } .nav .lockup { padding-block: 6px; } .skip { padding: 13px 14px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 10px max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left)); }
  .left, .demo, .win, .win-body, .win-r, .under-win { display: contents; } .win-bar { display: none; }
  .win { --ink: #14171a; --ink-2: rgba(20, 23, 26, .78); --ink-3: rgba(20, 23, 26, .68); --line: rgba(20, 23, 26, .12); --line-2: rgba(20, 23, 26, .22); }
  h1 { order: 1; font-size: clamp(21px, 6.2vw, 27px); line-height: 1.1; letter-spacing: -.032em; margin: 0; white-space: nowrap; } h1 br { display: none; }
  .plain { order: 2; margin-top: 5px; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; } .say { display: none; }
  .stage { order: 3; align-self: center; flex: none; margin-top: 10px; height: var(--sh); width: calc((var(--sh) - 30px) * 9 / 16 + 8px); max-width: 100%; aspect-ratio: auto; border-radius: 9px; background: var(--w-bar); box-shadow: 0 0 0 1px rgba(0, 0, 0, .34), 0 14px 28px -14px rgba(14, 18, 22, .4); }
  .stage-bar { display: flex; height: 26px; } .stage-bar .win-dots { left: 9px; gap: 5px; } .stage-bar .win-dots i { width: 8px; height: 8px; } .stage-bar .win-title { font-size: 11px; max-width: calc(100% - 96px); } .stage-bar .lockup.xs { --lw: 78px; }
  .stage canvas, .stage video, .stage .poster { inset: 26px 4px 4px 4px; width: calc(100% - 8px); height: calc(100% - 30px); border-radius: 0 0 6px 6px; }
  /* on the video, as on a Reel: sound at the right, Remix at the left. Both 44 px, both the same dark key */
  .snd { right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 6px; } .snd svg { width: 20px; height: 20px; } .snd-said { right: 10px; bottom: 60px; font-size: 13px; padding: 5px 10px; border-radius: 6px; }
  .remix.on-stage { position: absolute; left: 10px; bottom: 10px; min-width: 0; width: auto; height: 44px; padding: 0 18px; border-radius: 6px; background: rgba(14, 14, 16, .9); color: #e9e7e2; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .remix.on-stage:disabled { opacity: 0; pointer-events: none; }
  html[data-step="1"] .remix.on-stage { box-shadow: inset 0 0 0 1.5px var(--accent); }
  .deck { display: none; }
  /* Energy, under the video */
  .slide { order: 4; gap: 0; margin-top: 22px; padding: 0 2px; } .slide-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); } .slide-top b { color: var(--ink); font-weight: 600; }
  .slide input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: none; margin: 0; --v: 50%; touch-action: pan-y; }
  .slide input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--v), rgba(20, 23, 26, .3) var(--v)); }      /* (a two-stop fill: the value, not decoration) */
  .slide input::-moz-range-track { height: 3px; background: rgba(20, 23, 26, .3); } .slide input::-moz-range-progress { height: 3px; background: var(--accent); }
  .slide input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px; border-radius: 50%; background: var(--ink); border: 0; }
  .slide input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); border: 0; }
  html[data-live="rec"] .slide, html[data-live="rec"] .remix.on-stage, html[data-live="none"] .slide { display: none !important; }
  /* THE WAY TO THE COMPUTER */
  .carry { order: 5; gap: 12px; padding: 26px 0 28px; } .carry h2 { font-size: clamp(26px, 7.4vw, 34px); font-weight: 700; letter-spacing: -.034em; line-height: 1.04; }
  .carry-p { font-size: 16px; line-height: 1.4; color: var(--ink-2); } .carry-keys { display: grid; gap: 10px; margin-top: 4px; } .key.wide { height: 50px; font-size: 16px; }
  .carry .said { font-size: 14.5px; line-height: 1.4; color: var(--ink); font-weight: 500; } .carry .said:empty, .mailme-said:empty { display: none; } .carry .said input { width: 100%; height: 44px; margin-top: 8px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--bg-hi); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 16px var(--sans); color: var(--ink); }
  .inapp { font-size: 14px; line-height: 1.45; color: var(--ink-2); padding: 10px 12px; border-radius: 6px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); } .inapp b { color: var(--ink); font-weight: 600; }
  .mailme { display: grid; gap: 8px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); } .mailme label { font-size: 16px; line-height: 1.35; color: var(--ink); font-weight: 500; }
  .mailme-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .mailme input { min-width: 0; height: 48px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--bg-hi); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 16px var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none; } .mailme input::placeholder { color: var(--ink-3); } .mailme input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
  .mailme .key { height: 48px; padding: 0 14px; font-size: 15px; font-weight: 600; } .mailme .key:disabled { opacity: .5; }
  .mailme-fine { font-size: 13px; line-height: 1.45; color: var(--ink-3); } .mailme-fine .link { display: inline-block; margin-left: 6px; padding: 12px 6px; margin-block: -12px; font-size: inherit; }
  .mailme-said { font-size: 14.5px; line-height: 1.4; font-weight: 500; color: var(--ink); } .mailme.done .mailme-row, .mailme.done .mailme-fine, .mailme.done > label { display: none; }
  .carry-more { margin-top: 2px; } .carry-more .link { display: inline-block; padding: 13px 0; font-size: 15px; }
  .songs { order: 6; display: grid; gap: 10px; padding: 18px 0 6px; border-top: 1px solid var(--line); } .chip { height: 44px; padding: 0 14px 0 12px; font-size: 14.5px; } .chip-n { max-width: 22ch; }
  .source { order: 7; background: none; box-shadow: none; border-radius: 0; padding: 12px 0 26px; } .source .tag { display: none; } .source .q { white-space: normal; font-size: 13px; }
  .map { flex: none; background: #18181a; border-radius: 6px; padding: 10px; }
  .vote { gap: 8px; } .vote button { height: 44px; padding: 0 14px; font-size: 14.5px; } .vote-q { flex-basis: 100%; margin-bottom: 4px; } #works-note .link { display: inline-block; padding: 12px 0; margin-block: -12px; }
  /* the bar: the one action. It stands while the page's own send keys are off screen (html.sending = one of them is showing), and never over the keyboard */
  .thumb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px max(var(--pad), env(safe-area-inset-right)) calc(10px + var(--safe-b)) max(var(--pad), env(safe-area-inset-left)); background: var(--bg-2); border-top: 1px solid var(--line-2); }
  /* MAIL-1: the second, quiet key in the bar (only when the server can send mail: html.has-mail), and the sheet it opens. The sheet stands under the nav, near the
     top, so the keyboard never covers it; the page behind is dimmed, a tap on it closes. */
  html.has-mail { --bar: 116px; } .thumb { display: grid !important; gap: 2px; } .quiet-key { height: 44px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
  .mail-wrap { position: fixed; inset: 0; z-index: 45; background: rgba(20, 23, 26, .46); padding: calc(var(--nav) + 10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; }
  .mail-sheet { position: relative; display: grid; gap: 10px; margin: 0; padding: 20px 18px 18px; border-top: 0; border-radius: 10px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line-2), 0 24px 48px -20px rgba(14, 18, 22, .5); }
  .mail-sheet h2 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; padding-right: 44px; } .mail-sheet .mail-p { font-size: 15px; font-weight: 400; color: var(--ink-2); } .mail-sheet .key { height: 48px; padding: 0 18px; font-size: 16px; } .mail-sheet .key.wide { margin-top: 2px; }
  .mail-x { position: absolute; right: 4px; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-2); } .mail-x svg { width: 18px; height: 18px; } .mailme.done .mail-p { display: none; } .mail-sheet.done .mailme-said { font-size: 17px; padding: 6px 0 4px; }
  html.mailing, html.mailing body { overflow: hidden; } html.mailing .thumb { visibility: hidden; }
  html.sending .thumb, html.typing .thumb, html[data-live="none"] .thumb { visibility: hidden; } html.studio-open .thumb { display: none !important; } .tap { display: inline; }
  html[data-live="rec"] .source { display: none; }
  .sec { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 36px 0 40px; margin: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); } .sec > h2, .sec-b, .maker, .figs, .fig.shot { grid-column: 1 / -1; } .sec > h2 { font-size: clamp(24px, 6.8vw, 30px); max-width: none; } .lead { font-size: 17px; } .q { font-size: 13px; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: 12px; row-gap: 22px; } .fig { grid-row: auto; grid-template-rows: auto auto; row-gap: 9px; align-content: start; } .fig-w .plate { aspect-ratio: 854 / 744; }
  .figs .fig:last-child { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; column-gap: 12px; align-items: start; }
  .terms-list { grid-template-columns: minmax(0, 1fr); } .terms-list dd { max-width: none; } .tbl { font-size: 14px; } .tbl th, .tbl td { padding-right: 12px; } .tbl thead { display: none; } .tbl tbody tr:first-child > * { border-top: 1px solid var(--line); }
  .shot .win { display: block; border-radius: 6px; } .shot .win .win-bar { display: flex; height: 20px; } .shot .win .win-dots { left: 8px; gap: 4px; } .shot .win .win-dots i { width: 6px; height: 6px; } .shot .win .win-title { display: none; }
  .row { font-size: 14px; gap: 14px; } #files .row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .maker { max-width: 30ch; } .last .carry { padding: 0; } .mine { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 48px; } .foot { padding: 16px 0 22px; margin: 0 18px; } .foot-legal { margin-left: 0; width: 100%; gap: 0 20px; font-size: 13.5px; } .foot-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  body.legal { padding-bottom: 0; } body.legal .nav nav { gap: 2px; } body.legal .nav nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 9px; } body.legal .doc { padding: 28px 18px calc(64px + var(--safe-b)); } body.legal p, body.legal li { font-size: 16px; }
}
/* a phone held sideways: the video beside the words, whole, and no bar (the send keys are on screen beside it) */
@media (orientation: landscape) and (max-height: 520px) and (hover: none) and (pointer: coarse), (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
  :root { --sh: max(210px, calc(100vh - var(--nav) - 22px)); } @supports (height: 100svh) { :root { --sh: max(210px, calc(100svh - var(--nav) - 22px)); } }
  body { padding-bottom: 0; } .thumb { display: none !important; }
  .hero { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-content: start; align-items: start; } .hero > *, .left > *, .demo > *, .win-body > *, .win-r > *, .under-win > * { grid-column: 2; } .stage { grid-column: 1; grid-row: 1 / span 12; margin-top: 0; align-self: start; }
  h1 { white-space: normal; } .carry { padding-top: 14px; } .carry h2 { font-size: 22px; } .carry-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* the three policy pages (landing/new/legal/): plain reading pages in the same tokens */
body.legal .doc { max-width: 68ch; margin: 0 auto; padding: 40px 20px 96px; display: grid; gap: 14px; }
body.legal h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.034em; line-height: 1.05; margin: 0; } body.legal h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-top: 18px; }
body.legal p, body.legal li { color: var(--ink-2); font-size: 15px; line-height: 1.55; } body.legal .lede { color: var(--ink); font-size: 17px; line-height: 1.45; max-width: none; } body.legal b { color: var(--ink); font-weight: 600; }
body.legal ul { padding-left: 18px; display: grid; gap: 6px; } body.legal code { font: inherit; color: var(--ink); } body.legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); } body.legal .nav a { text-decoration: none; }
.draft-banner { position: sticky; top: 0; z-index: 30; background: var(--accent); color: var(--accent-ink) !important; font-weight: 600; font-size: 13px !important; text-align: center; padding: 7px 12px; } body.legal .draft-banner + .nav { top: 33px; }
.owner { border-left: 2px solid var(--accent); padding: 2px 0 2px 12px; color: var(--ink) !important; font-size: 13.5px !important; } div.owner p { font-size: 14px; } div.owner { display: grid; gap: 10px; }