/* Inter, served from this site rather than fonts.googleapis.com (Viktor, 25 Sep). Google Fonts was
   the last outside request the site made, and it hands every visitor's IP address to Google - which a
   German court held unlawful in 2022. Self-hosted, the site talks to nobody at all, the text paints
   without a second DNS lookup and connection, and the privacy policy needs no row for it.

   Two files, not twelve: Google serves Inter as a VARIABLE font, so the six weights it returned were
   six copies of one file - 783 KB where 130 KB does the same job. A font-weight range of
   100 900 tells the browser this one file covers every weight.

   Only latin and latin-ext: nothing on the site needs more, and unicode-range means a page fetches
   latin-ext only when it shows one of those glyphs, which only the Legal page does (SZCO, Slovak
   names). The copies came from Google's own CSS for the same family. Inter is SIL Open Font
   License 1.1 - its notice belongs in THIRD_PARTY_NOTICES, which has a slot waiting for it. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* StageDAW — the site's one stylesheet. Written by hand; build.py copies it into site/.
   Palette and layout: grafickidentita/ (23 Sep 2026). Design B "Slate", ported from design-experiments/. */

:root {
  /* StageDAW brand palette (grafickidentita/color palette.png, 23 Sep 2026) */
  --black:    #161515;   /* Near-black, the dark ground */
  --crimson:  #AA241A;   /* Brick Red, the accent. The identity's #A33325 until 25 Sep, then the app icon's #B3261B,
                            then this: Viktor asked the same day for a slightly darker tone wherever the red meets a
                            bright ground, and every red on this site does - the scan found all three red fills on the
                            bone and not one on a dark band. Same hue and saturation as #B3261B, lightness 40.4% -> 38.4%.
                            Contrast on --slate 5.53 (was 5.13), white on it 7.06 (was 6.54, so now past AAA).
                            Applied uniformly, lettering and fills alike, and img/brand-mark-red.png refilled to match.
                            NOT applied to anything that lives on a dark ground: the OG card, the Apple touch icon, the
                            YouTube avatar, banner and watermark, and the Mac app icon all keep #B3261B - build.py's
                            GRADIENT_MARK still runs #B3261B -> --maroon. --maroon itself is unchanged. */
  --maroon:   #6D2820;   /* Deep Maroon, the darker red */
  --bone:     #E1E7EE;   /* THE PAGE GROUND, and nothing else. Nina's warm #EAE2E1 until 27 Sep, when Viktor asked
                            what the red tone in the background was - it measured hue 7 at 18% saturation - and then
                            looked at the warm bone, a half-warm step, a neutral grey and the icon's cool white
                            against the real page and chose this. It had been the ground for half a day on 26 Sep and
                            was reverted then; this is that reversal reversed, with the four seen side by side.
                            It was that #EEF3F8 until 28 Sep, when Viktor asked for warmer or less bright and picked
                            two steps down on the same cool hue, from seven shown live on the real page. So the ground
                            and --slate are two values again, which is what the two tokens were kept separate for.
                            Contrast on it: near-black 14.64, iron 8.07, the brand red 5.67, crimson 5.25 - every one
                            still past 4.5.
                            Only two rules use it - `body` and `.btn.trial`, whose whole idea is to be the page's own
                            colour with black text. The sticky nav at line 124 carries a translucent copy written out
                            in rgb, so it has to be moved by hand with this. */
  --slate:    #EEF3F8;   /* THE INK, wherever white type or a white mark sits on something darker: every dark band,
                            the footer, the text on the red and purple fills, the icon-tile mark. The app icon's white
                            since 26 Sep, so the page and the Dock agree. It was a cool white (hue 210) against a
                            warm --bone (hue 7) until 27 Sep, when the ground moved onto this value: one colour now,
                            still two tokens, because they answer different questions.
                            Pure #fff is used nowhere. Contrast as ink on near-black: 16.33. */
  --iron:     #424242;   /* Grey, secondary text */
  --cerulean: #8E7DBE;   /* Purple, the second accent. Went pink for an hour on 24 Sep (#CC739E, then #9F3565) and back; the blue #087CA7 before all of it - the token keeps its old name so the ten places that use it need no edit */

  /* derived, used sparingly: the same colours at reduced opacity */
  --iron-2:    rgba(66, 66, 66, .45);
  --slate-2:   rgba(238, 243, 248, .55);
  --slate-3:   rgba(238, 243, 248, .18);
  --crimson-2: rgba(170, 36, 26, .35);
  --crimson-bright: #B3261B;   /* The red for anything sitting on a DARK ground (Viktor, 25 Sep: "the elements used
                                  on dark background stays"). The darker --crimson is for bright grounds only - on
                                  near-black it would lose contrast rather than gain it, 2.79 -> 2.58. This is the
                                  app icon's red, and the one the OG card, the touch icon and the YouTube artwork
                                  are drawn in, so every dark-ground surface across the brand carries one value.
                                  Used by: the four 6px rules that bracket the dark bands, .clip h2 .thin, and
                                  img/brand-mark-red-ondark.png for the dashes in the dark feature rows. */


  --font: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Inter", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01", "tnum";  /* Inter: single-storey a, tabular digits */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }

/* Small caps label used for eyebrows, table heads, IDs. Looks like the app's SONG / TIME heads. */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  opacity: 0; transition: opacity .28s ease;   /* revealed by the script after a beat, so it is not caught in a link preview's screenshot (Viktor, 24 Sep) */
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  margin: 0 auto; max-width: 880px;
  padding: 14px 18px;
  background: var(--black); color: var(--slate);
  border: 1px solid var(--iron);
  border-radius: 12px;
  font-size: 14px;
}
   banner wider than the 16px gutters it is pinned to and pushed the page sideways on a phone (24 Sep) */
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--iron); background: transparent; color: var(--slate);
}

/* Placeholder for something that isn't shot yet (video, loops, screenshots, testimonials). */
.ph {
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--iron);
  color: var(--iron);
  font-size: 13px;
  border-radius: 12px;
}

/* Reduced motion: no transitions anywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- The shell: nav, page title, buttons, follow, footer ---------- */
body { background: var(--bone); color: var(--black); }
.wrap { width: min(1280px, calc(100% - 64px)); margin: 0 auto; }
/* minmax(0, 1fr), not 1fr: a 1fr track's automatic minimum is its content's own width, so one line of
   nowrap type - the hero headline - stretched the track past the page and took the whole layout with it
   (375px viewport, 462px of page). minmax(0, …) lets the track stay put and the content fit to it. */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }

/* nav: a row of words on the paper. The row is pinned while the page scrolls; the hairline under it is not. */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(225,231,238,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }   /* no line under the bar (Viktor, 24 Sep): tried black, grey, thicker, red, black again, then taken off altogether. A hairline under it was also removed on 22 Sep - `.nav-rule` is the leftover, zeroed. */
.nav .wrap { display: flex; align-items: center; gap: 32px; padding: 20px 0; }   /* the tile makes this a row of objects, so centre them (Viktor, 23 Sep) */
.nav-rule { border-bottom: 0; }   /* the hairline under the bar is off (Viktor, 22 Sep) */
.brand { font-weight: 900; letter-spacing: .1em; text-decoration: none; font-size: 18px; display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: auto; display: inline-block; }   /* the tile with the mark cut out of it (Viktor, 23 Sep) */
/* 600, not the 500 it was (Viktor, 28 Sep): the colour was always the near-black of the body text,
   but at 500 beside the page's 800 headings it read as grey. */
.nav ul { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 28px; font-size: 14px; font-weight: 600; }
.nav a { text-decoration: none; }
.nav a[aria-current] { border-bottom: 2px solid var(--crimson); }
.nav .tag { font-size: 12px; color: var(--iron); letter-spacing: .04em; align-self: center; }

/* page title: every inner page opens the way the home page does, one big line */
.title { padding: 56px 0 0; }
.title h1 { font-size: clamp(28px, 3.4vw, 46px); line-height: .95; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.title h1 .thin { font-weight: 400; color: var(--iron); }
.title .lede { margin-top: 24px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; max-width: 60ch; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1.5px solid var(--black); color: var(--black); }
.btn.primary { background: #2E2C2C; color: var(--slate); }   /* the same dark grey as the download cards (Viktor, 24 Sep); it was the near-black */
/* Buy is the light grey one (Viktor, 24 Sep), the contact form's Send excepted - that keeps the dark
   plate and the off-white label. The purple tried a moment earlier could not come with it: #8E7DBE on
   a light grey measured 2.31:1. Buy is the brand red and hovers to the second accent (Viktor, 24 Sep),
   which also makes it the same red as the Buy Now card on the Download page. The contact form's Send keeps
   the dark plate. Note the hover: white on the red is 6.87:1, but on the purple only 3.60:1, under the
   4.5:1 that 14px text needs - it cleared the bar while the accent was the dark pink (6.62:1). */
.btn.primary:not(.contact .btn) { background: var(--crimson); color: #EEF3F8; border-color: var(--crimson); }
.btn.primary:not(.contact .btn):hover { background: var(--cerulean); border-color: var(--cerulean); color: var(--black); }   /* near-black while hovered: white on this purple is 3.60:1, the near-black 5.06:1 (Viktor, 24 Sep) */
.btn.primary:hover { background: var(--crimson); border-color: var(--crimson); color: #EEF3F8; }
.btn.ghost:hover { background: #2E2C2C; color: var(--slate); }
/* the trial button: the page's own colour with black text, purple on hover (Viktor, 23 Sep) */
.btn.trial { background: var(--bone); border-color: var(--black); color: var(--black); }
.btn.trial:hover { background: var(--cerulean); border-color: var(--cerulean); color: #EEF3F8; }   /* white here, Viktor's call (24 Sep), unlike the other accent hovers which carry the near-black: white on this purple is 3.60:1, the near-black 5.06:1 */

/* a section heading in the editorial voice */
.h2 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: .95; }
.h2 .thin { font-weight: 400; color: var(--iron); }

/* a black inset for a picture of the app or a dialog */
.pic { background: var(--black); border-radius: 12px; padding: 14px; }
.pic img { border-radius: 6px; }

/* follow us: the heading in the editorial voice, the two channels as big black discs */
.follow { padding: 0 0 var(--sec); }
.follow .wrap { display: grid; justify-items: center; gap: 36px; text-align: center; }
.follow h2 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: .95; }
.follow .channels { display: flex; gap: 16px; justify-content: center; }
.follow .channels a { width: 80px; height: 80px; border-radius: 50%; background: var(--black); display: grid; place-items: center; transition: background .15s; }
.follow .channels a:hover { background: var(--crimson); }
.follow .channels svg { width: 34px; height: 34px; fill: var(--slate); }
.follow .channels a:hover svg { fill: #EEF3F8; }

/* footer: the wordmark big, then the rows the way oeksound does it: icons · links · imprint */
footer { background: var(--black); color: var(--slate); padding: 40px 0 36px; font-size: 13px; border-top: 6px solid var(--iron); }   /* the grey rule that starts every other dark zone starts this one too (Viktor, 24 Sep); no red one at the end, because the page ends here */   /* trimmed 23 Sep: the 64px top was headroom for the wordmark that used to sit above the rows */
footer .top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--iron); }
footer .brand { color: var(--slate); font-size: clamp(32px, 4.4vw, 64px); line-height: .9; letter-spacing: .04em; }
footer .tag { color: var(--iron); font-size: 13px; letter-spacing: .04em; padding-bottom: 6px; }
footer .rows { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; padding-top: 0; }   /* centred, not start (Viktor, 24 Sep, after seeing the three side by side): the three groups are 36, 20 and 63px tall, so hanging them from a common top left the links reading 9px high against the icons and the imprint 13px low. Centred, all three share one axis. */
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
footer a { color: var(--slate); text-decoration: none; }
footer a:hover { color: var(--slate); }
footer .social { display: flex; gap: 10px; }
footer .social a { width: 36px; height: 36px; border: 1px solid var(--iron); border-radius: 8px; display: grid; place-items: center; }
footer .social a:hover { border-color: var(--slate); }
footer .social svg { width: 18px; height: 18px; fill: var(--slate); }
footer .imprint { display: grid; gap: 2px; text-align: right; color: var(--slate-2); }

@media (max-width: 900px) {
  .wrap { width: calc(100% - 40px); }
  .grid12 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .grid12 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .nav .wrap { flex-wrap: wrap; gap: 10px 20px; padding: 14px 0; }
  .nav .tag { display: none; }
  .nav ul { width: 100%; gap: 10px 18px; margin: 0; flex-wrap: wrap; }
  .title { padding: 48px 0 0; }
  .title h1 { font-size: clamp(28px, 7vw, 38px); }
  .title .lede { margin-top: 18px; }
  .pic { padding: 8px; }
  .follow { padding: 0 0 var(--sec); }
  .follow .channels a { width: 72px; height: 72px; }
  .follow .channels svg { width: 30px; height: 30px; }
  footer .top { flex-direction: column; align-items: flex-start; }
  footer .rows { grid-template-columns: 1fr; gap: 24px; }
  footer .imprint { text-align: left; }
}

/* ---------- Home ---------- */
/* the home page keeps the big scale (Viktor, 13 Sep); the inner pages are a step smaller */
.home .btn { padding: 19px 30px; font-size: 17px; }
.home .follow h2 { font-size: clamp(32px, 4.6vw, 64px); }
.home .follow .channels a { width: 96px; height: 96px; }
.home .follow .channels svg { width: 40px; height: 40px; }
.home footer .brand { font-size: clamp(40px, 6vw, 88px); }
/* hero: the headline takes 10 columns; the lede and buttons sit under it, pushed right */
/* Home's rhythm, one value (Viktor, 24 Sep). The gaps used to be 120 / 80 / 0 / 122 / 184px and the
   three section headings each had their own spacing. The space above a rule is the previous section's
   padding-bottom, so --sec governs every boundary; the heading owns the rule and the space under it. */
/* 104px until 24 Sep, then 50px at Viktor's word: "make white sections carry just such gaps as the
   black sections do". A dark band insets its own content 44px at the top (50px as rendered, the
   heading's half-leading included) and 52px at the bottom, and every boundary on Home is now against
   a band edge - the video, the walkthrough, the two dark feature rows. A bone section that keeps
   104px next to that reads as a hole, because the edge has already done the separating. One value
   for the whole page: the bone sections breathe exactly as much as the bands do. */
:root { --sec: 50px; }
/* Swept to every page 24 Sep at Viktor's word, not Home alone: Download, FAQ, Tutorials, Support,
   Legal and the 404 all had their own bottom gap (110, 120, 140, 200px) with nothing deciding it. */
.hero { padding: 40px 0 58px; min-height: calc(100vh - 67px);
        display: flex; flex-direction: column; justify-content: flex-end; }
/* The content sits at the BOTTOM of the stretched hero (Viktor, 27 Sep: the gap above the buttons
   and the gap below them should match). The hero fills the first screen, so on a tall screen there
   is slack; left at the top it all fell under the buttons - 101px against the 34px above them on a
   16". Anchored to the bottom, the slack goes above the headline instead and the gaps match.

   The number is 58, not the 34 the margins say: .grid12 carries a 24px row gap, so what shows
   between the paragraph and the buttons is 24 + 34. The headline-to-paragraph gap is the same 58,
   so all three now read alike, and the band starts exactly 58px under the buttons rather than
   wherever the content happened to end. */
/* The hero fills the first screen (Viktor, 27 Sep: he does not want "Introducing StageDAW" showing
   under the buttons). The nav is sticky and 67px tall, and the hero starts directly beneath it, so
   that is what comes off 100vh. It is a MINIMUM: on a short screen the content is taller than this
   and simply wins. Turned off on a phone below, where the nav wraps to two rows and a screen-tall
   hero would just be empty. */   /* 52 until 27 Sep; see the headline's note below */
.hero h1 {
  /* The width sets the size: every line is scaled to fill it. It was a flat 760px, so the headline
     was the same physical size on every screen - 44% of the width on Viktor's 16", 59% on a 1280px
     laptop, which is why the page felt heavier on small machines (Viktor, 27 Sep). It follows the
     screen now, between 680 and 820. It was 920 for one round, which Viktor found too big on his
     16"; 820 sits between that and the 760 it had been.

     The third term is a height guard, and it is what puts the Buy and trial buttons on the first
     screen of a 13" and 14" MacBook. The hero's height is almost entirely the headline: the buttons
     end at 472px + half the headline's width - measured at three sizes, not estimated. The guard
     below uses 496 rather than 472, which leaves about 24px of air under the buttons instead of
     landing them exactly on the fold; it is floored at 600 so a very short window shrinks the type
     rather than deleting it. Measured after: 13" Air 1470x840 fits, 14" Pro 1512x870 fits, 16" 1728x1000
     fits with room to spare. A 13" Windows at 150% is still short - that one was not targeted. */
  grid-column: 1 / 11;
  width: min(100%, clamp(680px, 52vw, 820px), max(600px, calc((100vh - 528px) * 2)));
  font-size: clamp(42px, 6.8vw, 96px); line-height: .93; letter-spacing: -.045em; font-weight: 800;
  text-wrap: balance;
}
.hero h1 .thin { font-weight: 400; color: var(--iron); }
/* Each row's size is written here, not left to the script (Viktor, 28 Sep: the headline jumped from
   one size to another a moment after the page appeared). The script fits the rows to the box, but it
   can only run once the typeface has loaded, so until then the browser drew a guess and then
   corrected it on screen.
   The text never changes, so the ratio of a row's size to the width it fills is a constant. Measured
   once in a real browser, at 1280 and at 375, and the two agreed to within a fifth of a percent:
   .125384, .136467, .135602, and .141398 for the last row where the full stop hangs past the edge
   (.136985 where it does not). h1 is a container, so 1cqw is one percent of its width and the sizes
   below land the rows on the same edge at first paint. The script still runs and still has the last
   word - on a resize, and if a typeface ever measures differently from what was recorded here. */
.hero h1 { container-type: inline-size; }
.hero h1 .l { display: block; width: max-content; white-space: nowrap; }
.hero h1 .l:nth-of-type(1) { font-size: 12.5384cqw; }
.hero h1 .l:nth-of-type(2) { font-size: 13.6467cqw; }
.hero h1 .l:nth-of-type(3) { font-size: 13.5602cqw; }
.hero h1 .l:nth-of-type(4) { font-size: 13.6985cqw; }          /* no hang below 900px - see the media query */
@media (min-width: 901px) {
  .hero h1 .l:nth-of-type(4) { font-size: 14.1398cqw; }        /* the full stop hangs into the margin */
}
.hero h1 .mk { display: inline-block; height: .8em; width: 1.1480em; vertical-align: -.036em; margin-right: .18em; }   /* same centring as .dash; this one is .8em tall, so (.7275 - .8) / 2 = -.036em */
.hero h1 .and { font-size: .774em; color: var(--black); font-weight: 800; }   /* "and" smaller so the line ends with "Controller" (Viktor, 22 Sep). Bold and near-black since 24 Sep: Inter’s 800 runs 5.98% wider than its 400 at the same size, measured, so .82em became .774em and the line keeps the width it had. */
/* the paragraph is set left, and its block starts where the centred buttons start (Viktor, 23 Sep);
   the script measures the buttons and sets the left edge, so the two always line up. */
.hero .lede { grid-column: 1 / 13; max-width: 880px; margin: 34px auto 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; }
.hero .lede b { color: var(--crimson); font-weight: 600; }
.hero .actions { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; justify-content: center; }
.hero .actions .btn { padding: 20px 36px; font-size: 17px; }
/* The price leads the hero's Buy button since 27 Sep (Viktor): it comes from the same canon slot as
   the offer block's price (W362), so the number is written once. The separator is typography and
   lives here rather than in the words - the flex gap gives the space on its right. */
.hero .actions .btn.primary b { font-weight: inherit; }
.hero .actions .btn.primary b::after { content: "\00b7"; margin-left: .55em; opacity: .7; }   /* bigger than the base .btn (Viktor, 27 Sep): these two are what the page is for. The height guard above counts them, so its constant moves with them; 528 now. */

/* video: full-bleed black band, the same as the real-DAW clip below; the window spans the grid */
.video { padding: 0 0 var(--sec); }
/* The demo video sits on near-black with the frame glowing, like the dark feature rows (Viktor, 24 Sep).
   Its heading gives up the rule the other sections carry: on a dark band the change of ground is the
   separator, which is how the dark feature rows work too. */
.video .band { background: var(--black); color: var(--slate); padding: 44px 0 52px; border-top: 6px solid var(--iron); border-bottom: 6px solid var(--crimson-bright); }
.video .band h2 { border-top: 0; padding-top: 0; color: var(--slate); text-align: right; }   /* .band in the selector on purpose: the shared heading rule sits further down the file and would otherwise win on order. On the right edge of its video (Viktor, 24 Sep), as the walkthrough heading is. */
.video .embed { box-shadow: 0 0 90px rgba(238, 243, 248,.16), 0 24px 60px rgba(0,0,0,.7); }   /* black band off 23 Sep (Viktor), with it the 6px rule that only existed to start it. The 40px top padding went on 24 Sep: it was headroom inside a band that no longer has a background, so it read as an extra gap on top of --sec and made hero -> video 144 where every other boundary is 104. */
.video figure { margin: 0; position: relative; }   /* capped at 880 for part of 23 Sep, then back to the full wrap at Viktor's word once the W014 badge
      came off the frame and stopped competing with it */   /* the demo frame was the full 1280 wrap and dominated the page (Viktor, 23 Sep); the walkthrough
      at the bottom stays full width, where it is the whole point of its section */
/* the YouTube frames (23 Sep): 16:9, filled edge to edge, the same 6px corner the loops have */
.embed { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 6px; overflow: hidden; background: var(--black); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.embed video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }   /* the stand-in animation in the band under the headline (WEB-21) */
.video figcaption { position: absolute; left: 14px; top: 12px; background: var(--crimson); color: #EEF3F8; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 6px 10px; border-radius: 4px; }
.video .play { position: absolute; inset: 0; display: grid; place-items: center; }
.video .play span { width: 88px; height: 88px; border-radius: 50%; background: var(--crimson); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.video .play svg { width: 34px; height: 34px; fill: #EEF3F8; margin-left: 4px; }

/* features: an editorial ladder. Each row alternates 7/5 and 5/7; the text carries a big grey numeral. */
.features { padding: 0 0 var(--sec); }
/* Every dark zone opens with a 6px grey rule and closes with a 6px red one (Viktor, 24 Sep; they were
   red on top for an hour). The Download band's original grey top rule set the weight. Every other feature sits on near-black with its screen lit against it. Each row has
   its own full-bleed .fwrap, so the rows alternate light and dark down the page. The hairline between
   rows goes with it - the change of ground is the separator now - and the mark turns red on the dark
   rows because the black one would disappear. */
.fwrap { padding: 36px 0; }
.fwrap.dark { background: var(--black); color: var(--slate); border-top: 6px solid var(--iron); border-bottom: 6px solid var(--crimson-bright); }
.fwrap.dark h3 { color: var(--slate); }
.fwrap.dark p { color: var(--slate-2); }
.fwrap.dark .pic img, .fwrap.dark .pic video { box-shadow: 0 0 90px rgba(238, 243, 248,.16), 0 24px 60px rgba(0,0,0,.7); }
.feature { align-items: center; padding: 0; border-top: 0; }

.feature .pic { grid-column: 1 / 8; }
.feature .txt { grid-column: 9 / 13; }
.feature.alt .pic { grid-column: 6 / 13; grid-row: 1; }
.feature.alt .txt { grid-column: 1 / 5; grid-row: 1; }
.feature .pic { background: none; padding: 0; }   /* the black frame came off on 23 Sep (Viktor): every loop is a StageDAW window with its own dark chrome, so the plate behind it read as a second, thicker border */
.feature .pic img,
.feature .pic video { border-radius: 6px; max-width: 100%; height: auto; display: block; }   /* the feature loops are <video>, so they need the same rules the global img rule gives pictures */
.feature h3 { display: block; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.1; font-weight: 700; margin-bottom: 12px; }
.feature p { font-size: 17px; color: var(--iron); }   /* grey like the tools list's descriptions, which have always been --iron (Viktor, 24 Sep). The titles above them stay near-black. */
/* The paragraph lines up with the heading's TEXT, not with the mark in front of it (Viktor, 23 Sep).
   The mark is .74em tall and its picture is 1.427 wide for 1 tall, so it occupies .74 x 1.427 = 1.056em,
   plus its .34em margin - 1.396em of the HEADING's size, which is why --lead repeats the h3 clamp
   rather than using em (em inside p would measure the paragraph's 17px instead). The heading gets the
   same value as a hanging indent, so a heading that wraps lines its second line up too. */
.feature .txt { --lead: calc(clamp(24px, 2.2vw, 30px) * 1.396); }
.feature .txt h3 { padding-left: var(--lead); text-indent: calc(var(--lead) * -1); }
.feature .txt p { padding-left: var(--lead); }


/* tools list: the further tools under the four features, set exactly like the feature rows (same heading, same hairlines), one per row, no pictures */
.tools { padding: 0 0 var(--sec); }
.tools ul { list-style: none; margin: 0; padding: 0; }
/* the two section headings share their type; only the tools one carries the rule above it, because the
   feature rows bring their own hairlines (W343 added over the features 23 Sep) */
.features h2,
.video h2,
.tools h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: .95; margin-bottom: 8px; }
/* No hairlines on Home any more (Viktor, 24 Sep): the dark bands and their 6px rules do the separating,
   so a thin grey line between the bone sections added nothing. The 44px that used to sit between the rule
   and the heading went with it - otherwise it was dead air on top of the --sec gap, 148px in all. The gap
   between sections is --sec alone now. Other pages keep their own rules; these four are Home's. */
.features h2, .video h2, .tools h2, .clip h2 { padding-top: 0; border-top: 0; margin-bottom: 40px; }
.features h2 { text-align: left; }
/* The first row is bone, so its .fwrap padding is invisible - it only pushed the row down, putting
   76px under "Built for the Stage" where "Additional features" sits 40 above its list (Viktor, 24 Sep:
   "review and fix all the gaps for complete consistency"). The dark rows keep theirs; there the padding
   is the band's own inset and it shows. */
.features > .wrap + .fwrap:not(.dark),
.features > .fwrap:not(.dark):first-child { padding-top: 0; }   /* right, then centred, then left again, all 24 Sep (Viktor): it stays on the margin like “Introducing StageDAW” and “Additional features”; the two video headings are the ones that leave it — both sit on the right edge of their frames */

/* the hairline belongs above the heading, not under it (Viktor, 23 Sep), so the first row drops its own */
.features h2 + .feature { border-top: none; padding-top: 0; }
.features h2 .thin,
.video h2 .thin,
.tools h2 .thin { font-weight: 400; color: var(--iron); }
.features h2 .thin,
.video h2 .thin,
.tools h2 .thin,
.clip h2 .thin { color: var(--crimson-bright); }   /* on the dark band - stays bright (25 Sep) */
/* Every Home section heading is bold the whole way through (Viktor, 24 Sep), the second half carrying
   the brand red rather than a lighter weight. This overrides the light second half the shared rule sets. */
.features h2 .thin, .video h2 .thin, .tools h2 .thin, .clip h2 .thin { font-weight: 800; }   /* every Home section heading reads the same way: the opening words near-black, the second half in the brand red. “the Stage” since 23 Sep; “features” and “full walkthrough” joined it on 24 Sep (Viktor). */
.tools ul { padding-top: 0; }
/* The list's own 14px row padding sat on top of the section gaps, so the heading looked 54px from the
   first line and the walkthrough band 118px from the last, where every other section reads 40 and 104
   (Viktor, 24 Sep: "too big a gap above and below"). The first and last rows give their outer half back;
   the rows still breathe 28px apart from each other. */
.tools li:first-child { padding-top: 0; }
.tools li:last-child { padding-bottom: 0; }
.tools li { padding: 14px 0; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.1; font-weight: 700; }
.tools li::before { content: none; }
/* Each tool opens to a line of its own (23 Sep). The default disclosure triangle is dropped - the mark
   in front of the row is already the bullet - and the row keeps the feature rows' hanging indent, so the
   text that opens lines up under the row's text rather than under the mark. */
.tools li { --lead: calc(clamp(24px, 2.2vw, 30px) * 1.396); }
.tools summary { display: block; cursor: pointer; padding-left: var(--lead); text-indent: calc(var(--lead) * -1); }
.tools summary::-webkit-details-marker { display: none; }
.tools summary::marker { content: none; }
.tools summary:hover { color: var(--crimson); }
.tools details p { padding-left: var(--lead); margin: 10px 0 2px; font-size: 17px; font-weight: 400;
                   letter-spacing: normal; line-height: 1.45; color: var(--iron); max-width: 62ch; }
/* the mark stands in for the dash before every feature and every tool line (Viktor, 23 Sep) */
/* The mark is a drawn shape since 27 Sep, not a picture, so its red is the same kind of thing as
   the red of the words beside it and no machine can render the two differently. fill comes from
   currentColor, so each mark simply takes the colour of its text - which also means the light and
   dark reds follow the surface without anything choosing between two files. */
.mk, .dash, .n { fill: currentColor; color: var(--crimson); aspect-ratio: 742.49 / 517.43; }
/* An inline <svg> with width:auto does NOT take its width from the viewBox the way an <img> does -
   it falls back to the 300px default, which drew the hero mark 300x56. Each width is written out
   in em below: the mark's ink is 1.43496 times as wide as it is tall. */
.fwrap.dark .dash { color: var(--crimson-bright); }
.dash { display: inline-block; height: .74em; width: 1.0619em; margin-right: .34em; vertical-align: -.006em; }   /* as tall as the letters beside it (Viktor, 23 Sep). The vertical-align centres the mark on the
      cap-height: caps measure .7275em in Inter and the mark is .74em, so its bottom sits
      (.7275 - .74) / 2 = -.006em off the baseline. It was -.04em, which left it 1px low. */

/* the real-DAW clip: the same black band as the video. Heading first, on its own line, then the window across the grid. */
/* The walkthrough sits on near-black with its frame glowing, exactly as the demo video does (Viktor,
   24 Sep). The black is an inner band so the section's --sec gap stays outside it, and the heading gives
   up its rule - on a dark ground the change of colour is the separator. It was black until 23 Sep, when
   the ground came off; this brings it back with the glow. */
.clip { background: none; padding: 0 0 var(--sec); }
.clip .band { background: var(--black); color: var(--slate); padding: 44px 0 52px; border-top: 6px solid var(--iron); border-bottom: 6px solid var(--crimson-bright); }
.clip .band h2 { border-top: 0; padding-top: 0; color: var(--slate); text-align: right; }   /* the one heading on Home that leaves the left margin (Viktor, 24 Sep): it sits on the right edge of the video frame below it */
.clip .embed { box-shadow: 0 0 90px rgba(238, 243, 248,.16), 0 24px 60px rgba(0,0,0,.7); }   /* black ground off 23 Sep (Viktor); the text had to come off white with it */
.clip h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: .95; color: var(--black); white-space: nowrap; margin-bottom: 40px; }
/* weight and colour both come from the Home heading rules above: bold, brand red (Viktor, 24 Sep).
   This rule set --iron here once, then 400, and each time it quietly beat them by coming later. */
.clip figure { margin: 0; position: relative; }
.embed.soon { display: flex; align-items: center; justify-content: center; text-align: center; background: #1C1C1C; border: 1px solid rgba(238,243,248,.12); }   /* COMING SOON in place of the walkthrough video (Viktor, 14 Oct) */
.soon-big { margin: 0; font-size: clamp(36px, 6vw, 84px); font-weight: 800; letter-spacing: .04em; color: var(--slate); line-height: 1; }
.soon-line { margin: 16px 24px 0; font-size: clamp(13px, 1.25vw, 16px); line-height: 1.5; color: var(--slate-2); }
.clip .play { position: absolute; inset: 0; display: grid; place-items: center; }
.clip .play span { width: 88px; height: 88px; border-radius: 50%; background: var(--cerulean); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.clip .play svg { width: 34px; height: 34px; fill: #EEF3F8; margin-left: 4px; }

/* closing block: the two buttons at hero size, centred */
.close { padding: 0 0 var(--sec); }
.close .wrap { border-top: 0; padding-top: 0; }
.close .cta { grid-column: 1 / 13; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.close .cta .btn { padding: 22px 34px; font-size: 19px; }

@media (max-width: 900px) {
  :root { --sec: 36px; }   /* the same rhythm, a step tighter on a phone (Viktor, 24 Sep) */
  .hero { padding: 48px 0 var(--sec); min-height: 0; }
  .hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .clip h2 { white-space: normal; }   /* it is nowrap on a wide screen to keep the line whole; on a phone
     that made it 400px in a 375px window and took the page with it (Viktor, 24 Sep) */
  .hero .lede { margin-top: 20px; }
  .video .band, .clip .band { padding: 32px 0; }
  .features { padding: 0 0 var(--sec); }
  /* .feature keeps no padding of its own on a phone either: the .fwrap around it pads both the
     bone rows and the dark ones, and 28px on top of that put 104px under “Built for the Stage”
     where every other heading sits 40 above its content (Viktor, 24 Sep). */
  .tools { padding: 0 0 var(--sec); }
  .tools li { padding: 10px 0; }
  .tools li:first-child { padding-top: 0; }
  .tools li:last-child { padding-bottom: 0; }
  .close { padding: 0 0 var(--sec); }
  .close .cta .btn { padding: 18px 26px; font-size: 17px; }
}

/* the compatibility line under the headline (W341, 23 Sep, Viktor): small capitals spread to the
   width of the headline above it, the three DAW names in Brick Red. */
.hero .compat { grid-column: 1 / 11; width: min(760px, 100%); margin-top: 12px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--iron); }   /* the script sizes and spaces it to the headline's width */
/* 23 Sep (Viktor): the line is set as written — "Compatible with Ableton Live, Logic Pro and REAPER" */
.hero .compat .daw { color: var(--crimson); }

/* the paragraph's promise, lifted (settled 23 Sep, Viktor) */
.hero .lede .lift { color: var(--crimson); font-weight: 600; }

/* the red in the headline (settled 23 Sep, Viktor): the mark and the two nouns in Brick Red */
.hero h1 .w-noun { color: var(--crimson); }

/* ---------- Download ---------- */
.title.c, .c { text-align: center; }
.buy { padding: var(--sec) 0 var(--sec); }
.buy .wrap { display: grid; justify-items: center; gap: 28px; max-width: 900px; }
.buy .h2 { margin-bottom: 12px; }
/* W308 is one bold line now (Viktor, 24 Sep), not "Buy with" bold and the rest thin, so the weight is
   said here rather than left to the browser's default h2. The same block closes the Home page, where
   .close already carries the bottom padding - so nested there it contributes none of its own. */
.buy .l h2 { font-weight: 800; }
.close .buy { padding: 0; }
/* the offer: the same card as the three downloads below, black on the slate */
.buy .card { width: min(100%, 410px); display: grid; gap: 22px; padding: 22px 24px 24px; background: var(--crimson); border: 1px solid var(--crimson); border-radius: 16px; color: #EEF3F8; text-decoration: none; text-align: left; transition: background .15s, border-color .15s; }
.buy .card:hover { background: var(--cerulean); border-color: var(--cerulean); color: var(--black); }
.buy .os { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.buy .arrow { justify-self: end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--slate-2); display: grid; place-items: center; }
.buy .arrow svg { width: 20px; height: 20px; fill: none; stroke: #EEF3F8; stroke-width: 2; }
.buy .fine { font-size: 14px; color: var(--iron); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
.buy .fine a { color: var(--black); font-weight: 600; }
.get { background: var(--black); color: var(--slate); padding: 44px 0 52px; border-top: 6px solid var(--iron); border-bottom: 6px solid var(--crimson-bright); }
.get .h2 { color: var(--slate); margin-bottom: 40px; }
.get .h2 .thin { white-space: nowrap; color: var(--slate-2); }
.get .grid12 > a { grid-column: span 4; display: grid; gap: 16px; padding: 18px 20px 18px; background: #2E2C2C; border: 1px solid var(--iron); border-radius: 16px; color: var(--slate); text-decoration: none; text-align: left; transition: background .15s, border-color .15s, box-shadow .15s; box-shadow: 0 0 60px rgba(238, 243, 248,.12), 0 16px 40px rgba(0,0,0,.6); }   /* a dark grey plate rather than the bare band (Viktor, 24 Sep), glowing against the black like the screens on the other dark bands */
/* The cards hover to the accent with black lettering (Viktor, 24 Sep); they went to the brand red with
   white lettering before. Everything inside has to turn with them - the flavour line under the OS name and
   the arrow's ring and stroke are white at rest and would disappear on a plate this light. */
.get .grid12 > a:hover { background: var(--cerulean); border-color: var(--cerulean); color: var(--black); }
.get .grid12 > a:hover .arrow { border-color: var(--black); }
.get .grid12 > a:hover .arrow svg { stroke: var(--black); }
.get .os { font-size: clamp(17px, 1.5vw, 19px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.get .os { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.get .os-icon { grid-row: 1 / 3; width: 36px; height: 36px; fill: currentColor; }
.get .os small { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--slate); margin-top: 8px; }
.get .grid12 > a:hover small { color: var(--black); }
.get .arrow { justify-self: end; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--slate-2); display: grid; place-items: center; }
.get .arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--slate); stroke-width: 2; }
.req { padding: var(--sec) 0 var(--sec); }
/* The requirements table sits on the page's own margins like everything else on Download
   (Viktor, 24 Sep); it was boxed to 960px and narrower than the sections above and below it. */
.req .h2 { margin-bottom: 40px; }
.req dl { margin: 0; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--black); text-align: left; }
.req dt, .req dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--iron-2); font-size: 15px; }
.req dt { font-weight: 700; padding-right: 40px; white-space: nowrap; }
.req dd { color: var(--iron); text-align: right; }   /* the values sit on the page's right margin (Viktor, 24 Sep), so the table reads as two columns with the whole width between them rather than a label and a sentence trailing after it */
.req .note { font-size: 14px; color: var(--iron); margin-top: 24px; }
@media (max-width: 900px) {
  .buy { padding: var(--sec) 0 var(--sec); }
  .buy .card { width: 100%; }
  .get { padding: 32px 0 40px; }
  .get .grid12 > a { grid-column: 1 / -1; }
  .req { padding: var(--sec) 0 var(--sec); }
  .req dt { padding-right: 20px; }
}

/* the four Buy-block options (b-download-1..4.html); every button crimson, blue on hover */
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(238, 243, 248,.55); display: grid; place-items: center; }
.arrow svg { width: 20px; height: 20px; fill: none; stroke: #EEF3F8; stroke-width: 2; }
.o1 .card { width: min(100%, 560px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 26px 28px 28px; background: var(--crimson); border-radius: 16px; color: #EEF3F8; text-decoration: none; text-align: left; transition: background .15s; }
.o1 .card:hover { background: var(--cerulean); color: var(--black); }
.o1 .eyebrow { display: block; color: rgba(238, 243, 248,.75); margin-bottom: 14px; }
.o1 .big { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.o2 .wrap { max-width: none; justify-items: stretch; text-align: left; }
.o2 .band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 44px 48px; background: var(--black); border-radius: 20px; color: var(--slate); }
.o2 .band h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.o2 .band h2 .thin { font-weight: 400; color: var(--slate-2); }
.o2 .band .btn { background: var(--crimson); border-color: var(--crimson); color: #EEF3F8; padding: 20px 36px; font-size: 18px; }
.o2 .band .btn:hover { background: var(--cerulean); border-color: var(--cerulean); color: var(--black); }
.o2 .fine { justify-content: flex-start; padding-left: 48px; margin-top: -10px; }
/* The offer runs the full page width (Viktor, 24 Sep): the line flush to the left margin, the Buy Now
   card flush to the right, on the same edges as every other section. It was boxed to 960px and floating
   in the middle before, which read as a separate panel rather than part of the page. */
.o3 .wrap { max-width: none; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 48px 72px; flex-wrap: wrap; }
/* At section-title size the line's max-content is wider than the page, so the left block has to be
   allowed to shrink and wrap - otherwise it claims the whole row and pushes the card onto a line of
   its own, left-aligned, which is the opposite of what was asked for (Viktor, 24 Sep). */
.o3 .l { display: grid; gap: 16px; --h2: clamp(32px, 4.6vw, 64px); flex: 1 1 0; min-width: 0; }
.o3 .l h2 { font-size: var(--h2); letter-spacing: -.04em; line-height: .95; }
.o3 .l h2 .thin { font-weight: 800; color: var(--crimson); }   /* “Lifetime Access” in the brand red, bold like the rest of the line (Viktor, 24 Sep) - the same shape as every Home section heading */
.o3 .l .price { margin: 0; line-height: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.o3 .l .price > b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--black); }
/* Small capitals beside the number, middles aligned (Viktor, 27 Sep): the phrase is a note on the
   price, not a second price, so it drops to 12px and takes the grey the fine print uses. */
/* Near-black, not the grey the EULA note takes (Viktor, 28 Sep): this one is part of the offer. */
.o3 .l .price > span { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--black); line-height: 1; }
/* The VAT note is a fact about the price, not part of the offer, so it takes the grey the EULA
   notice has rather than the near-black of what the price covers (Viktor, 28 Sep). */
.o3 .l .price > span.vat { color: var(--iron); }
/* The label is a filled badge, not just red lettering (Viktor, 29 Sep) - it has to read as a tag
   on the price rather than as another small line among the four. */
.o3 .l .price > em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; background: var(--crimson); color: #EEF3F8; padding: 5px 9px; border-radius: 6px; }
/* A hairline, not a word, between what the price covers and the notice (Viktor, 27 Sep): the two are
   different kinds of thing, and a dot or a dash read as a pause inside one sentence. */
.o3 .l .price > i { display: block; width: 1px; height: 16px; background: #C9CED6; }
.o3 .l .price small { font-size: 13px; font-weight: 400; line-height: 1; color: var(--iron); }
/* The link takes the same grey as the words around it and a paler underline (Viktor, 27 Sep): the
   notice is a duty, not an offer, so it stays behind the price instead of competing with it. */
.o3 .l .price small a { color: var(--iron); text-decoration: underline; text-decoration-color: #C2C8D0; text-underline-offset: 3px; }
.o3 .l .price small a:hover { color: var(--black); text-decoration-color: var(--black); }
.o3 .l .fine { justify-content: flex-start;
   /* Optical nudge (Viktor, 24 Sep): the boxes already line up to the pixel, but the heavy heading's
      first glyph carries more blank space inside itself than the small line's does, so the small line
      read half a pixel to the left. This shifts it by exactly that difference - the heading's own left
      side bearing (.0566em at weight 800) minus the small line's (.0879em at weight 400). It is tied to
      --h2 rather than a fixed number because the heading scales with the window and the gap closes to
      nothing at the narrow end. Recheck it if either line's size or weight changes. */
   margin-left: calc(var(--h2) * .0566 - .0879em); }
.o3 .r { display: flex; flex: 0 0 auto; }
.o3 .r .card { width: min(100%, 300px); display: grid; justify-items: center; align-items: center; gap: 24px; padding: 20px 24px 22px; background: var(--crimson); border-radius: 16px; color: #EEF3F8; text-decoration: none; text-align: left; transition: background .15s; }
/* Anything that hovers to the accent carries near-black lettering (Viktor, 24 Sep): white on this
   purple measures 3.60:1, under the 4.5:1 that text needs, and the near-black 5.06:1. The eyebrow above
   the label is a translucent white at rest, so it takes its own turn or it fades out on the light plate. */
.o3 .r .card:hover { background: var(--cerulean); color: var(--black); }
.o3 .r .card:hover .eyebrow { color: rgba(22,21,21,.75); }
.o3 .r .eyebrow { display: block; color: rgba(238, 243, 248,.75); margin-bottom: 14px; }
.o3 .r .big { font-size: clamp(21px, 2.1vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }   /* Buy Now: bold, a step down from the 24-32px it was (Viktor, 24 Sep) */
.o4 .tier { width: min(100%, 420px); background: var(--black); color: var(--slate); border-radius: 20px; padding: 32px 32px 28px; display: grid; gap: 22px; text-align: center; }
.o4 .tier .name { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--slate-2); }
.o4 .tier .title { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--slate); }
.o4 .tier hr { border: 0; border-top: 1px solid var(--iron); margin: 4px 0; width: 100%; }
.o4 .tier .btn { justify-content: center; background: var(--crimson); border-color: var(--crimson); color: #EEF3F8; padding: 20px 28px; font-size: 20px; }
.o4 .tier .btn:hover { background: var(--cerulean); border-color: var(--cerulean); color: var(--black); }
.o4 .tier .fine { justify-content: center; color: var(--slate-2); }
.o4 .tier .fine a { color: var(--slate); }
@media (max-width: 900px) {
  /* The offer line wraps onto three rows here, and the hairline would then hang off the end of a
     row instead of standing between two things (Viktor, 27 Sep). The rows themselves do the dividing. */
  /* Direct children only. The EULA notice holds a span of its own (the word the browser must not
     translate), and a bare `.price span` here turned that into a block and broke the sentence over
     three lines (Viktor, 28 Sep). */
  .o3 .l .price { display: block; }
  .o3 .l .price > b { display: block; margin-bottom: 6px; }
  .o3 .l .price > em { display: inline-block; margin-bottom: 6px; }
  .o3 .l .price > span { display: block; margin-bottom: 6px; }
  .o3 .l .price > small { display: block; }
  .o3 .l .price > i { display: none; }
  .o1 .card { grid-template-columns: 1fr; }
  .o2 .band { grid-template-columns: 1fr; padding: 28px; }
  .o2 .fine { padding-left: 0; }
  .o3 .wrap { gap: 32px; }
  .o3 .l { flex-basis: 100%; }   /* on a phone the card goes under the line rather than beside it */
}

/* ---------- FAQ ---------- */
.faq { padding: 40px 0 var(--sec); }
.q { padding: 32px 0; border-top: 1px solid var(--black); align-items: start;
     grid-template-columns: auto repeat(11, minmax(0, 1fr)); column-gap: 32px; }   /* the mark's track hugs the mark instead of taking a full twelfth: the question used to start
      90px away from a 19px mark, most of it empty column (Viktor, 23 Sep) */
.q:last-child { border-bottom: 1px solid var(--black); }
.q .n { grid-column: 1 / 2; font-size: clamp(16px, 1.4vw, 18px); height: .74em; width: 1.0619em; margin-top: .183em; }   /* the brand mark took the place of the 01, 02, 03 on 23 Sep (Viktor). It is a grid cell rather than
      an inline, so vertical-align cannot help: it carries the question's own font-size instead, and the
      margin centres it on the cap-height of the first line (measured, not guessed - it was 4.5px low). */
.q h2 { grid-column: 2 / 7; font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; padding-right: 24px; }
.q .a { grid-column: 7 / 13; font-size: 15px; line-height: 1.55; }
.q .a a { color: var(--crimson); font-weight: 600; }
@media (max-width: 900px) {
  .faq { padding: 40px 0 var(--sec); }
  .q { padding: 24px 0; gap: 10px; }
  /* .q .n needs no override here: its margin is in em and follows the question's size */
  .q h2 { padding-right: 0; }
  .q .a { margin-top: 4px; }
}

/* ---------- Tutorials ---------- */
.tuts { padding: 40px 0 var(--sec); }
/* The legal .docs block further down caps .docs at 72ch, which was wrapping every tutorial title with
   the row still running on to the right - and since the chevrons came off there is nothing out there to
   leave room for. The cap is lifted for the list and put back on the guide body, where a reading measure
   is the point. The column itself (5 / 13) is untouched: that indent is the look. (Viktor, 23 Sep) */
.tuts .docs { grid-column: 1 / 13; max-width: none; }   /* under the Tutorials title, not indented from it (Viktor, 23 Sep) */
/* **One row, always** (Viktor, 23 Sep). The longest title, "Setting up Redundant Playback with Ableton
   Live", measures about 25.8em once the mark's indent is counted, so at the 30px it takes from the legal
   .docs h2 below it needs ~775px of row and wraps under roughly 830px of window. The size follows the
   room instead: 30px wherever there is space, and 3.3vw below that, which is the largest that still
   fits that title. Deliberately more specific than .docs h2 rather than reordering the file. */
.tut summary h2 { font-size: clamp(13px, 3.3vw, 30px); white-space: nowrap; }
/* One row at every width (Viktor, 24 Sep: “force them on one row - I'm sure they will fit on phone
   too”). nowrap here rather than only in the script, so a title never wraps even if the script does
   not run; the script then sizes each line to the row it is in. The clamp's floor is what a title
   falls back to unaided - 13px fits the longest one in 280px, so the fallback is small but whole. */
.tut .body { max-width: 1040px; }   /* was 72ch, which left the step grid's text column about 320px once the 40px number and the 320px
      picture column were taken out - cramped (Viktor, 23 Sep). At 1040 the text gets ~630px and the
      guide still stops well short of the 1280 row, so it keeps a reading measure. */
.tuts .grid12 { align-items: start; }
.docs { grid-column: 1 / 13; }
.tut { border-top: 1px solid var(--black); scroll-margin-top: 96px; }
.tut:last-child { border-bottom: 1px solid var(--black); }
.tut summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; }
.tut summary::-webkit-details-marker { display: none; }
.tut summary:hover h2 { color: var(--crimson); }
/* The mark is red everywhere it stands in for a dash - features, the tools list, the tutorial titles
   (Viktor, 24 Sep), so it no longer changes on hover. It used to be the black mark swapped for the red
   one under the cursor (23 Sep); the swap is gone because there is nothing left to swap to. The words
   beside it still go crimson on hover. */
.tut h2 { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
          --lead: 1.396em;
          padding-left: var(--lead); text-indent: calc(var(--lead) * -1); }   /* a title that wraps lines up under its own text, not under the mark (Viktor, 23 Sep) */
/* the chevron came off the tutorial titles on 23 Sep (Viktor); the guide opening under the title is the
   indicator now. Its rules are in the repo's history if it is ever wanted back. */
.tut .body { padding: 8px 0 56px; }
/* The pictures sit under the text of the step they belong to, not in a column beside it (Viktor, 23 Sep).
   This is the shape the narrow breakpoint already used, now used at every width. With the 320px picture
   column gone the text would run the whole 1040, so it keeps a reading measure of its own. */
.tut .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px 24px; align-items: start; margin-top: 40px; }   /* 8px until 23 Sep; once the pictures moved under the text the steps ran into each other (Viktor) */
.tut .step .txt { min-width: 0; max-width: 90ch; }
/* The step's title is its own line, a little larger than the body, and centred against the 40px disc
   beside it so the two sit level (Viktor, 24 Sep). It was the bold opening of the first paragraph
   until then, with the rest of the sentence running on after it. */
.tut .step .steptitle { display: flex; align-items: center; min-height: 40px; margin: 0;
                        font-size: 18px; line-height: 1.25; max-width: none; }
.tut .step .steptitle + p { margin-top: 4px; }
/* A step that carries an alternative way of doing the same thing - only REAPER's step 2 so far - puts it
   after the picture. Without this it butted straight up against what came before, reading as one run-on
   instruction (Viktor, 24 Sep). The gap and the rule mark it as a way round, not the next thing to do. */
.tut .step .txt > .todo + p,
.tut .step .txt > figure + p { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--iron-2); }
.tut .step .pics { display: grid; gap: 12px; justify-items: start; grid-column: 2; }
.tut .step .pics:empty { display: none; }
/* a note between steps (an entry of its own) lines up with the step text and is set in italics (Viktor, 13 Sep) */
.tut .slot:has(.step) + .slot:not(:has(.step)) > p { margin-left: 60px; font-style: italic; }
.tut .step .num { width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--slate); display: grid; place-items: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tut .slot { margin: 0 0 28px; }
.tut p { font-size: 15px; line-height: 1.6; max-width: 70ch; }
.tut p + p { margin-top: 12px; }
.tut p b { font-weight: 700; }
.tut a { color: var(--crimson); font-weight: 600; }
/* screenshots are small on the page and open large on click (Viktor, 13 Sep); no inset behind them */
.tut figure { margin: 0; }
.tut figure img { max-width: min(100%, 320px); max-height: 200px; width: auto; border-radius: 6px; border: 1px solid var(--iron-2); cursor: zoom-in; transition: transform .15s; }
.tut figure img:hover { transform: scale(1.02); }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(22,21,21,.9); display: grid; place-items: center; padding: 32px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(100%, 764px); max-height: 100%; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }   /* the popup is the size of the Windows rtpMIDI capture, the smallest one (Viktor, 13 Sep) */
@media (max-width: 900px) {
  .tuts { padding: 40px 0 var(--sec); }
  .tut summary { padding: 20px 0; }
  .tut .slot:has(.step) + .slot:not(:has(.step)) > p { margin-left: 52px; }
  .tut .body { padding-bottom: 36px; }
  .tut figure img { max-width: 100%; max-height: 160px; }
}

/* ---------- Support / Contact us ---------- */
.title.c, .c { text-align: center; }
/* Two columns since 24 Sep (Viktor): the page was the only one on the site setting its text centred,
   and it sat in a 720px ribbon with empty space either side. It now opens with a left title like FAQ,
   Tutorials and Legal, and splits on the same hairline and the same twelve-column grid the FAQ uses -
   the Show Log advice on the left, the form on the right. */
.sup { padding: 40px 0 var(--sec); }
.sup .body { border-top: 1px solid var(--black); padding-top: 40px; align-items: stretch; column-gap: 32px; }
.sup .side { grid-column: 1 / 6; display: flex; flex-direction: column; }
/* The left column is shorter than the form beside it, and that slack has to go somewhere. One auto
   margin put it all in one hole; sharing it between every gap loosened the two paragraphs, which should
   stay tight. Two auto margins instead (Viktor, 24 Sep): the space falls only above the thank-you line
   and above the address, split evenly between them. The paragraphs keep their own spacing, and the
   buttons still land at the foot of the column, level with Send. */
/* The address and the channel buttons travel together to the foot of the column, so the buttons sit
   on the same line as Send opposite (both are --ctrl tall, so their tops meet) and the address sits
   directly above them rather than stranded up by the paragraphs (Viktor, 24 Sep). */
.sup .thanks { margin-top: auto; font-size: 17px; line-height: 1.5; font-weight: 700; letter-spacing: -.01em; }
.sup .mail { margin-top: auto; padding-top: 0; }
.sup .form { grid-column: 7 / 13; }
/* Name and Subject share the first row (Viktor, 24 Sep, after the reference he sent); everything
   else spans both columns. Below 900px they stack like the rest of the page. */
.contact { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 22px; text-align: left; }
/* --ctrl is the single height every control on this page shares - the three one-line fields, the
   Send button and the channel buttons (Viktor, 24 Sep: Send as tall as the Subject bubble, and the
   email one too). Set it here, on .sup, so the left column's buttons can read it as well. */
.sup { --ctrl: 53px; }
.contact > * { grid-column: 1 / -1; }
.contact > label.half { grid-column: span 1; }
.contact label { display: grid; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--iron); }
.contact label .note { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; }
.contact input[type=text], .contact input[type=email], .contact textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--black);
  background: rgba(238, 243, 248,.45); border: 1.5px solid var(--black); border-radius: 16px; padding: 14px 18px; outline: 0;
}
.contact input[type=text], .contact input[type=email] { height: var(--ctrl); padding-top: 0; padding-bottom: 0; }
.contact input:focus, .contact textarea:focus { border-color: var(--crimson); background: rgba(238, 243, 248,.7); }
.contact textarea { min-height: 160px; resize: vertical; }
.contact ::placeholder { color: var(--iron); }
.contact .row { text-align: right; margin-top: 8px; }   /* Send sits at the right edge of the form (Viktor, 24 Sep) */
.contact .btn { cursor: pointer; height: var(--ctrl); padding: 0 34px; font-size: 15px; border-radius: 16px; color: var(--slate); }   /* Send was set to pure white earlier on 24 Sep and moved to --slate with everything else on a dark ground later the same evening */   /* squared off and the same height as a field, not the site's pill buttons (Viktor, 24 Sep) */
/* The message sits between the fields and Send, and its space is held whether or not there is a
   message (Viktor, 28 Sep): it used to appear under the button and push it down the page. Empty it
   has no ground and no text, so it reads as the gap it already was. Small and shallow, not a control:
   the first try reserved a full control's height and pushed Send too far down the page. */
.contact .status { min-height: 32px; display: grid; place-items: center; padding: 6px 14px; border-radius: 8px; font-size: 13px; line-height: 1.3; text-align: center; margin: 0; }
.contact .good { background: var(--black); color: var(--slate); }
.contact .bad { background: var(--crimson); color: #EEF3F8; }
.sup .txt { font-size: 15px; line-height: 1.55; }
.sup .txt + .txt { margin-top: 14px; }
/* The address again on its own under the paragraphs, then the channel buttons (Viktor, 24 Sep). */
.sup .mail { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.sup .mail a { color: var(--crimson); text-decoration: none; }
.sup .mail a:hover { color: #6B55A9; }   /* the second accent, darkened for this one use (Viktor, 24 Sep).
   It is the only place the accent is lettering rather than a filled shape: the brand purple reads 2.83:1 on
   the bone page, failing even the 3:1 large text gets, and this shade of the same hue reads 4.71:1. Every
   filled shape keeps the exact --cerulean. */
.sup .channels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.sup .chan { display: inline-flex; align-items: center; gap: 10px; min-height: var(--ctrl);
  padding: 0 20px; box-sizing: border-box; border: 1.5px solid var(--black); border-radius: 16px;
  color: var(--black); text-decoration: none; font-size: 15px; font-weight: 600; }
.sup .chan svg { width: 18px; height: 18px; fill: currentColor; }
.sup .chan:hover { background: #2E2C2C; color: var(--slate); }
.sup .txt a { color: var(--black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sup .txt a:hover { color: var(--crimson); }
@media (max-width: 900px) {
  .sup { padding: 40px 0 var(--sec); }
  .sup .side, .sup .form { grid-column: 1 / -1; }
  .sup .form { margin-top: 32px; }
  .contact > label.half { grid-column: 1 / -1; }
  /* The address and the buttons are pushed to the foot of the column on a wide screen so they sit level
     with Send opposite. Stacked on a phone there is nothing to sit level with, and the auto margin just
     opened a hole under the thank-you line (Viktor, 24 Sep). They follow the text here instead. */
}

/* ---------- Legal ---------- */
.legal { padding: 40px 0 var(--sec); }
.legal .grid12 { align-items: start; }
.toc { grid-column: 1 / 4; position: sticky; top: 96px; display: grid; }
.toc a { text-decoration: none; padding: 12px 0; border-top: 1px solid var(--iron-2); font-size: 14px; font-weight: 600; color: var(--iron); }
.toc a:hover { color: var(--black); }
.toc a:last-child { border-bottom: 1px solid var(--iron-2); }
.docs { grid-column: 5 / 13; max-width: 72ch; }
.docs h2 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: .95; padding-top: 64px; margin: 64px 0 32px; border-top: 1px solid var(--black); scroll-margin-top: 96px; }
.docs h2:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
/* **.docs is used by two pages**: the Tutorials list above and the Legal page here, and these legal rules
   come later, so they win on Tutorials too - the guide list is held to columns 5-13 at 72ch and its titles
   take the size below. That was tried and reverted on 23 Sep (Viktor: the page changed completely): the
   narrow measure is the look, and the titles wrapping inside it is fine. The wrapped line lines up because
   .tut h2's --lead is in `em`, so it follows whatever font-size actually wins here. Anything added to this
   block lands on the Tutorials page as well - check both. */
.docs h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 40px 0 12px; }
.docs h4 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.docs p, .docs li { font-size: 15px; line-height: 1.6; }
.docs p + p { margin-top: 10px; }
.docs ul { margin: 10px 0; padding-left: 22px; }
.docs a { color: var(--crimson); font-weight: 600; }
.docs table { border-collapse: collapse; width: 100%; margin: 14px 0 18px; font-size: 14px; }
.docs td { border-bottom: 1px solid var(--iron-2); padding: 10px 12px 10px 0; vertical-align: top; }
.docs tr:first-child td { font-weight: 700; border-bottom: 1px solid var(--black); }
@media (max-width: 900px) {
  .legal { padding: 40px 0 var(--sec); }
  .toc { position: static; margin-bottom: 20px; }
  .docs h2 { padding-top: 40px; margin: 40px 0 20px; }
}

/* ---------- 404 ---------- */
.nf { padding: 40px 0 var(--sec); }
.nf h1 { font-size: clamp(80px, 18vw, 240px); font-weight: 900; letter-spacing: -.07em; line-height: .8; color: var(--black); }
.nf p { font-size: clamp(16px, 1.3vw, 19px); margin-top: 32px; }
.nf a { color: var(--crimson); font-weight: 600; }

/* Only while the text is wider than the window - which the English page never is (Viktor, 27 Sep).
   A translated page arrives a third longer, and these lines are held on one line on purpose, so
   they are the first to run off the edge. Here they are allowed to wrap instead. */
.reflow .clip h2,
.reflow .tut summary h2,
.reflow .get .h2 .thin,
.reflow .hero .compat,
.reflow .req dt { white-space: normal; }
.reflow .hero h1 .l { white-space: normal; width: auto; }