/* Krit marketing site. The hero (2026-10-27) is kept whole; everything after it was redrawn on 2026-11-01 as a product page
   and then laid out to the owner's launch brief: black and ivory with no hue, one system face set with size-specific
   tracking, the app's own screens shown large, and motion that answers the page (springs from the current value, materials
   that arrive). No library, no web fonts. */
:root {
  color-scheme: dark;
  --ground: #0A0B0C; --ink: #F1EDE6; --muted: #BDB8AF; --meta: #9B978F;
  --s1: #121416; --s2: #1C1F22; --s3: #282B2F; --s4: #3A3E43;  /* graphite, raised, control, thumb: the app's ramp */
  --line: rgba(241, 237, 230, .1);  /* a hairline between rows of the same list */
  --pill: #F1EDE6;                  /* the one primary action */
  --face: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(34px, 3.9vw, 60px);  /* the sections' heads, a step under the hero's so it stays the page's one large line */
  --t-sub: clamp(19px, 1.55vw, 23px);
  --t-title: clamp(24px, 2vw, 30px);
  --t-lede: clamp(19px, 1.45vw, 21px);
  --t-body: 17px;
  --t-small: 14px;
  --m: 32px; --gap: clamp(104px, 10.5vw, 168px); --nav: 52px; --r: 18px; --rt: 28px;
  --hm: max(var(--m), (100vw - 1376px) / 2);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
}
@media (max-width: 1023px) { :root { --m: 24px; } }
@media (max-width: 599px) { :root { --m: 20px; --t-display: 31px; --gap: 84px; --rt: 22px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--t-body)/1.47 var(--face); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.wrap { width: min(100% - 2 * var(--m), 1376px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.skip { position: absolute; left: var(--m); top: -64px; z-index: 100; padding: 10px 18px; border-radius: 980px; background: var(--ink); color: var(--ground); text-decoration: none; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--pill); color: var(--ground); }

/* Section heads: a short claim, and under it one sentence in the soft ink with its point in full ivory. Tracking tightens
   as the type grows; the sentence sits near zero. */
.head { max-width: 980px; margin-inline: auto; text-align: center; }
.head--left { margin-inline: 0; text-align: left; }
.h2 { font-size: var(--t-display); line-height: 1.05; font-weight: 600; letter-spacing: -.026em; text-wrap: balance; }
.sub { margin-top: 22px; font-size: var(--t-sub); line-height: 1.42; letter-spacing: -.005em; color: var(--muted); text-wrap: balance; }
.head:not(.head--left) .sub { margin-inline: auto; max-width: 36em; }
.head--left .sub { max-width: 34em; }
.sub b { font-weight: 600; color: var(--ink); }

/* Buttons: the white pill is the one action, at three sizes. Pressed answers on pointer-down. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 980px;
  background: var(--pill); color: var(--ground); font-size: var(--t-body); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms var(--ease-out);
}
.btn:active { transform: scale(.97); transition-duration: 80ms; }
.btn--lg { min-height: 52px; padding: 0 30px; font-size: var(--t-body); }
.btn--nav { min-height: 30px; padding: 0 14px; font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
@media (hover: hover) { .btn:hover { background: #DDD8CF; } }

/* Navigation: the product's own bar. Clear over the hero's black; once the page moves, a dark material that the page
   passes under, with a hairline. The section on screen is the link in full ivory. On a phone the links fold under a
   chevron and open as a panel under the bar. */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav); }
.nav::before, .nav::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity 320ms var(--ease-out); }
.nav::before { inset: 0; transition: opacity 320ms var(--ease-out), background-color 320ms var(--ease-out); background: rgba(10, 11, 12, .74); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.nav::after { left: 0; right: 0; bottom: 0; height: 1px; background: rgba(241, 237, 230, .14); }  /* taste-skill-ignore: the bar's edge over moving content */
.nav.stuck::before, .nav.stuck::after, .nav.open::before, .nav.open::after { opacity: 1; }
.nav__in { position: relative; height: 100%; display: flex; align-items: center; gap: 30px; }
.nav__mark { margin-right: auto; display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav__mark img { width: auto; height: 22px; }
.nav__ink { display: none; }
.nav__links { display: flex; gap: 30px; }
.nav__links a { font-size: 13px; letter-spacing: -.005em; color: rgba(241, 237, 230, .76); text-decoration: none; transition: color 200ms var(--ease-out); }
.nav__links a[aria-current] { color: var(--ink); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); } .foot__links a:hover { color: var(--ink); } }
.nav__more { display: none; }
/* over an ivory section the bar turns to paper too, and its pill to ink (the menu, when open, stays dark) */
.nav.light:not(.open)::before { background: rgba(241, 237, 230, .8); }
.nav.light:not(.open)::after { background: rgba(10, 11, 12, .12); }
.nav.light:not(.open) .nav__mark img { display: none; }
.nav.light:not(.open) .nav__mark .nav__ink { display: block; }
.nav.light:not(.open) .nav__links a { color: rgba(10, 11, 12, .72); }
.nav.light:not(.open) .nav__links a[aria-current], .nav.light:not(.open) .nav__more { color: #0A0B0C; }
.nav.light:not(.open) .btn--nav { background: #0A0B0C; color: #F1EDE6; }
@media (hover: hover) { .nav.light:not(.open) .nav__links a:hover { color: #0A0B0C; } .nav.light:not(.open) .btn--nav:hover { background: #2A2D31; } }
@media (prefers-reduced-transparency: reduce) { .nav::before { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; } .nav.light:not(.open)::before { background: #F1EDE6; } }
@media (max-width: 767px) {
  .nav__in { gap: 6px; }
  .nav__mark img { height: 20px; }
  .nav__more {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0;
    background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav__more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate 360ms var(--ease-out); }
  .nav.open .nav__more svg { rotate: 180deg; }
  .btn--nav { margin-left: 6px; }
  .nav__links {
    position: absolute; top: 100%; left: calc(-1 * var(--m)); right: calc(-1 * var(--m));
    flex-direction: column; gap: 0; padding: 8px var(--m) 24px;
    background: rgba(10, 11, 12, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    visibility: hidden; opacity: 0; translate: 0 -8px;
    transition: opacity 240ms var(--ease-out), translate 360ms var(--ease-expo), visibility 0s linear 360ms;
  }
  .nav.open .nav__links { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .nav__links a { padding: 13px 0; font-size: 19px; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
}

/* ---------- Hero ----------
   The copy, centred, and under it the app's Edit window, whole. Base (no script, or reduced motion): the two in flow, the
   window showing the edit. Live (site.js adds .hero--live): the stage holds still through a tall run of the page. The window
   rises under the copy to fill the screen (on a phone and a tablet the camera moves in on the beat instead), then its lanes
   go from the original audio to the edit, drawn on a canvas the way the app draws them. site.js places the window with one
   transform, in the window's own 1280 x 800 units, so every overlay below is a share of that box. */
/* the snare behind the hero: it stays put while the window rises over it (the hero's script takes it from full to .3), and
   the sections below are solid and pass over it. The drum stands right of the copy. Wide screens draw the picture larger than
   the screen from its top left, so the rim rises beside the headline and the head, lit through leaves, fills the right;
   narrower screens, where the copy spans the width, slide it until only the rim's edge shows. site.js scales the picture
   (1.06 to 1), so its size is set with width and height, not a transform. */
.atmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.atmos img { opacity: .3; }
.atmos img, .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 33% 50%; transform-origin: 70% 30%; }
@media (min-width: 600px) { .atmos img, .hero__bg img { object-position: 20% 50%; } }
@media (min-width: 1024px) { .atmos img, .hero__bg img { width: 142%; height: 142%; max-width: none; object-position: 0 0; transform-origin: 70% 20%; } }
@media (min-width: 1600px) { .atmos img, .hero__bg img { width: 130%; height: 130%; } }
@media (prefers-contrast: more) { .atmos { display: none; } }
/* the shade behind the copy: darker at the top for the bar and the headline, and deep enough that the drum's lit head and
   lugs stay behind the words. With the hero live it lies over the page's picture and lifts as the window comes up; without,
   it carries its own copy of the picture, which fades into the page below */
.hero__stage { position: relative; isolation: isolate; }
.hero__bg {
  position: absolute; inset: 0 0 auto; z-index: -1; height: min(100svh, 1100px); overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);  /* taste-skill-ignore: the picture fading into the page */
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0; opacity: var(--shade, 1);
  background:
    radial-gradient(ellipse 60% 42% at 50% 30%, rgba(10, 11, 12, .62), rgba(10, 11, 12, 0) 78%),  /* taste-skill-ignore: a neutral scrim over the photograph */
    linear-gradient(180deg, rgba(10, 11, 12, .55) 0%, rgba(10, 11, 12, .22) 34%, rgba(10, 11, 12, .5) 70%, rgba(10, 11, 12, .6) 100%);  /* taste-skill-ignore: a neutral scrim over the photograph */
}
@media (max-width: 767px) {
  .hero__bg::after {
    background:
      radial-gradient(ellipse 110% 34% at 50% 36%, rgba(10, 11, 12, .74), rgba(10, 11, 12, 0) 88%),  /* taste-skill-ignore: a neutral scrim over the photograph */
      linear-gradient(180deg, rgba(10, 11, 12, .55) 0%, rgba(10, 11, 12, .3) 34%, rgba(10, 11, 12, .5) 70%, rgba(10, 11, 12, .6) 100%);  /* taste-skill-ignore: a neutral scrim over the photograph */
  }
}
/* over the photographs the second lines are lifted toward ivory, so they read against their brightest light */
.hero__lede, .trial .sub { color: #DAD6CF; }
.hero--live .hero__bg { height: 100%; -webkit-mask-image: none; mask-image: none; }
.hero--live .hero__bg img { display: none; }
.hero__copy { display: grid; justify-items: center; text-align: center; padding: calc(var(--nav) + clamp(28px, 5.5vh, 72px)) var(--m) 0; }
/* the product's name over its headline, in its own letters, with what it is under it; the bar above carries the company's */
.hero__name { display: grid; justify-items: center; gap: 10px; margin-bottom: clamp(18px, 2.6vh, 28px); font-size: 15px; font-weight: 500; letter-spacing: .005em; color: #DAD6CF; }
.hero__name img { display: block; width: auto; height: clamp(30px, 4.4vh, 44px); }
.hero__h { max-width: 13em; font-size: clamp(40px, min(5.6vw, 8.6vh), 84px); line-height: 1.02; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.hero__lede { margin-top: clamp(18px, 2.8vh, 30px); max-width: 30em; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.36; letter-spacing: -.012em; color: var(--muted); text-wrap: balance; }
.hero__acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 30px; margin-top: clamp(24px, 3.8vh, 40px); }
/* the second way on: a quiet link, the arrow nudging toward where it goes */
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-body); font-weight: 500; color: var(--ink); text-decoration: none; }
.more svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: translate 240ms var(--ease-out); }
@media (hover: hover) { .more:hover svg { translate: 3px 0; } }
.hero__frame { width: min(100% - 2 * var(--m), 1376px); margin: clamp(48px, 7vh, 72px) auto 0; }
.hero__win { position: relative; aspect-ratio: 1280 / 800; border-radius: var(--r); overflow: hidden; background: var(--s1); }
.hero__win > * { position: absolute; }
.hero__base { inset: 0; width: 100%; height: 100%; }
/* Overlay boxes are the crops' rects in the 1280x800 window (tools/jobs-hero.json), as percentages. The lanes canvas covers the
   same box as the original lanes picture, which holds the place until the script has drawn. */
.hero__orig, .hero__cv { left: 7.5%; top: 16.25%; width: 64.375%; height: 76.25%; }
.hero__sw { left: 22.656%; top: 93.75%; width: 18.125%; height: 5%; }
.hero__vol { left: 94.375%; top: 70%; width: 3.125%; height: 3.25%; }
.hero__orig, .hero__cv, .hero__sw, .hero__vol, .hero__c0 { opacity: 0; }
.hero__band, .hero__names { display: none; }
.hero__cap { display: grid; margin-top: 18px; padding-inline: var(--m); font-size: var(--t-small); color: var(--muted); text-align: center; text-wrap: balance; }
.hero__cap > span { grid-area: 1 / 1; }
@media (max-width: 599px) {
  /* a 4:5 crop of the window's left half: lane names, transport and the whole Original audio / Edited audio switch,
     its right edge in the gaps after BREAK, Tempo and the switch */
  .hero__frame { overflow: hidden; }
  .hero__win { width: 204%; border-radius: 0; clip-path: inset(0 51% 0 0 round var(--r)); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__name, .hero__h, .hero__lede, .hero__acts { animation: rise 1100ms var(--ease-expo) both; }
  .hero__lede { animation-delay: 160ms; }
  .hero__acts { animation-delay: 240ms; }
  .hero__win { animation: settle 1500ms var(--ease-expo) 120ms both; }
}
@keyframes rise { from { opacity: 0; translate: 0 28px; } }
@keyframes settle { from { opacity: 0; translate: 0 48px; } }

.hero--live .hero__run { height: 440svh; }
.hero--live .hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero--live .hero__copy { position: absolute; inset: 0 0 auto; }
.hero--live .hero__frame { position: absolute; left: 0; top: 0; z-index: 1; width: 1280px; margin: 0; overflow: visible; transform-origin: 0 0; }
.hero--live .hero__win { width: 1280px; border-radius: var(--wr, 18px); clip-path: none; }
.hero--live .hero__orig, .hero--live .hero__sw, .hero--live .hero__vol, .hero--live .hero__c0 { opacity: 1; }
.hero--live .hero__c1 { opacity: 0; }
.hero--live .hero__cap { position: absolute; left: 0; right: 0; top: 0; z-index: 2; margin: 0; opacity: 0; }
/* the camera in close (phones and tablets): a black band hides the window above the bar numbers, and on a phone the lane
   names stand in a column of their own, over the window's, at a size you can read */
.hero--live .hero__band { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: var(--ground); opacity: 0; }
.hero--live.is-phone .hero__names {
  display: block; position: absolute; left: 0; top: 0; z-index: 2; width: var(--lw, 92px); background: var(--ground); opacity: 0;
}
.hero__names::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--th, 60px); background: var(--s1); }
.hero__names li { position: absolute; left: 0; right: 0; padding-left: 16px; translate: 0 -50%; font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.hero__names b { display: block; font-weight: 600; color: var(--ink); }
/* ---------- Listen: the comparison, broad, on deep black ----------
   The first solid section: its top fades from the hero's picture into the page's black. The player is the app's darkest panel,
   so the waveform is the brightest thing in it. */
.listen { padding: var(--gap) 0 calc(var(--gap) * .85); background: linear-gradient(rgba(10, 11, 12, 0), var(--ground) min(var(--gap), 24vh)); }  /* taste-skill-ignore: the picture giving way to the page */
.player {
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(18px, 2.2vw, 28px); border-radius: var(--rt); background: #050606;
  box-shadow: 0 0 0 1px rgba(241, 237, 230, .08), 0 50px 100px -50px rgba(0, 0, 0, .9);  /* taste-skill-ignore: the player, floating */
}
.player__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.player__what b { font-weight: 600; }
.player__what span { margin-left: 10px; color: var(--muted); }
.player__time { font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.player__view { position: relative; height: clamp(170px, 17vw, 240px); margin-top: 18px; border-radius: 10px; }
.player__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the position is a real range control laid over the waveform: drag, click or arrow keys; its ring is drawn on the view */
.player__seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.player__seek:disabled { cursor: default; }
.player__view:has(.player__seek:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
.player__draft { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(92%, 660px); background: #050606; text-align: center; text-wrap: balance; }
.player:not(.is-pending) .player__draft { display: none; }
.player__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 20px; }
.player__bar .seg--3 { margin-left: auto; }
.player__play {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pill); color: var(--ground); cursor: pointer; transition: transform 140ms var(--ease-out), background-color 180ms var(--ease-out);
}
.player__play:active { transform: scale(.94); transition-duration: 80ms; }
.player__play svg { width: 18px; height: 18px; fill: currentColor; }
.player__play .i-pause, .player.is-playing .i-play { display: none; }
.player.is-playing .i-pause { display: block; }
.player__play:disabled { background: var(--s3); color: var(--meta); cursor: default; transform: none; }
@media (hover: hover) { .player__play:not(:disabled):hover { background: #DDD8CF; } }
.player.is-loading .player__play { cursor: progress; }
.listen__go { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 767px) {
  .player__bar { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .player__bar .seg { justify-self: stretch; }
  .player__bar .seg:not(:nth-child(2)) { grid-column: 1 / -1; margin-left: 0; }
  .player__bar .seg label span { padding: 0 10px; }
}


/* A segmented control, as the app draws one: a dark track, a raised thumb that slides to the choice. Real radio buttons,
   so arrow keys move between them. */
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 980px; background: var(--s2); isolation: isolate; }
.seg label { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg label span {
  display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 20px; border-radius: 980px;
  font-size: var(--t-small); font-weight: 600; color: var(--muted); white-space: nowrap; transition: color 240ms var(--ease-out);
}
.seg input:checked + span { color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }
.seg__thumb { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 980px; background: var(--s4); transition: translate 420ms var(--ease-ios); }
.seg:has(label:last-of-type input:checked) .seg__thumb { translate: 100% 0; }
.seg label:active span { scale: .97; }

/* Ivory sections: the page turns to paper for what you read closely (the workflow, the spec sheet, the questions). The same
   roles, inverted; the app's windows stay dark inside them. */
.tone-light {
  --ground: #F1EDE6; --ink: #0A0B0C; --muted: #4A4741; --meta: #6A6660;
  --s1: #FAF8F4; --s2: #E4DED4; --s3: #D8D1C5; --s4: #FFFFFF; --line: rgba(10, 11, 12, .14);
  background: var(--ground); color: var(--ink); padding-bottom: var(--gap);
}
.tone-light ::selection { background: #0A0B0C; color: #F1EDE6; }
/* three choices: the thumb is a third wide and slides by its own width */
.seg--3 { grid-template-columns: 1fr 1fr 1fr; }
.seg--3 .seg__thumb { width: calc((100% - 6px) / 3); }
.seg--3:has(label:nth-of-type(2) input:checked) .seg__thumb { translate: 100% 0; }
.seg--3:has(label:nth-of-type(3) input:checked) .seg__thumb { translate: 200% 0; }
/* waiting for its audio: shown, not usable */
.seg:has(input:disabled) label { cursor: default; }
.seg input:disabled + span { color: var(--meta); }
.seg input:disabled { cursor: default; }

/* Production slots: a dashed note that says what still has to be supplied. Never copy; nothing marked so is published. */
.draft { padding: 14px 18px; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }

/* ---------- How Krit works: one chapter on plain black, four parts that follow one passage ----------
   Parts 3 and 6 set the claim beside the app's screen (mirrored); 4 and 5 run the width of the page for their figures. */
.chapter { padding: calc(var(--gap) * .15) 0 var(--gap); background: var(--ground); }
.part + .part { margin-top: calc(var(--gap) * 1.1); }
.part--pocket, .part--control { display: grid; gap: clamp(40px, 5vw, 64px); }
.part__pic { width: 100%; }
.part__pic img { width: 100%; border-radius: 20px; box-shadow: 0 0 0 1px rgba(241, 237, 230, .08), 0 40px 80px -40px rgba(0, 0, 0, .9); }  /* taste-skill-ignore: the app's window, floating */
.part__pic figcaption { margin-top: 16px; max-width: 40em; font-size: var(--t-small); color: var(--muted); }
.part--control .part__pic { max-width: 560px; }
@media (min-width: 1024px) {
  .part--pocket, .part--control { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .part--pocket .part__text { grid-column: 1 / 6; }
  .part--pocket .part__pic { grid-column: 7 / 13; }
  .part--control .part__pic { grid-column: 1 / 6; grid-row: 1; justify-self: start; }
  .part--control .part__text { grid-column: 7 / 13; }
}
.prose { display: grid; gap: 14px; margin-top: 28px; max-width: 34em; color: #DAD6CF; }
.also { display: grid; gap: 16px; margin-top: clamp(32px, 4vw, 44px); max-width: 34em; color: var(--muted); }
.also li, .feats li { padding-top: 16px; border-top: 1px solid var(--line); }  /* taste-skill-ignore: rows of one short list */
.also b { font-weight: 600; color: var(--ink); }
/* a supporting line, kept beside the feature it belongs to rather than given a tile of its own */
.aside { margin-top: 28px; padding-top: 16px; max-width: 34em; border-top: 1px solid var(--line); color: var(--muted); }  /* taste-skill-ignore: as above */
/* features: a short name and what it does, in columns */
.feats { display: grid; gap: 24px; margin-top: clamp(40px, 5vw, 56px); }
.feats h3 { font-size: var(--t-lede); line-height: 1.3; font-weight: 600; letter-spacing: -.012em; }
.feats p { margin-top: 6px; max-width: 30em; color: var(--muted); }
@media (min-width: 768px) {
  .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .feats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Neural Hearing: one bar on an overhead mic, stretched to its box (tools/hearing-figure.mjs), the beats over it and the
   rows' names beside it, set at the shares the drawing uses: the waveform's centre at 25%, the four rows at 65–95%. */
.hear { margin-top: clamp(40px, 5vw, 64px); }
.hear__fig { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 28px auto; }
.hear__beats { position: relative; grid-column: 2; grid-row: 1; }
.hear__beats li { position: absolute; left: var(--x); bottom: 8px; padding-left: 5px; font-size: 12px; font-weight: 600; color: var(--meta); font-variant-numeric: tabular-nums; }
.hear__plot { position: relative; grid-column: 2; grid-row: 2; height: clamp(250px, 25vw, 340px); }
.hear__plot img { width: 100%; height: 100%; }
.hear__rows { position: relative; grid-column: 1; grid-row: 2; }
.hear__rows li { position: absolute; left: 0; top: 65%; translate: 0 -50%; font-size: 13px; font-weight: 600; white-space: nowrap; }
.hear__rows li:nth-child(3) { top: 75%; } .hear__rows li:nth-child(4) { top: 85%; } .hear__rows li:nth-child(5) { top: 95%; }
.hear__rows .hear__mic { top: 25%; color: var(--muted); }
.hear__mark { position: absolute; left: var(--x); top: 4px; margin-left: 12px; padding: 3px 8px; border-radius: 6px; background: var(--ground); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hear figcaption { margin-top: 18px; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 599px) {
  .hear__fig { grid-template-columns: 70px minmax(0, 1fr); }
  .hear__plot { height: 260px; }
  .hear__beats li:nth-child(even) { display: none; }
  .hear__mark { width: 8.5em; white-space: normal; }
}

/* ---------- Every mic: one kick, close up, as played and edited ---------- */
.js .mics__stage { position: sticky; top: var(--nav); }
@media (prefers-reduced-motion: reduce) { .js .mics__stage { position: static; } }
.mics__run { margin-top: clamp(48px, 6vw, 80px); }
.scope__view { position: relative; aspect-ratio: 11 / 4; border-radius: var(--rt); overflow: hidden; background: var(--s1); }
.scope__still, .scope__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope__still { object-fit: contain; }
.scope__cv { opacity: 0; }
.scope.is-live .scope__cv { opacity: 1; }
.scope.is-live .scope__still { visibility: hidden; }
.scope__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 20px; }
.scope__what { font-weight: 600; }
/* the change named in words next to the figure, and what the figure is */
.scope__note { margin-top: 18px; max-width: 52em; font-size: var(--t-small); color: var(--muted); }
.scope__note b { font-weight: 600; color: var(--ink); }
.scope__val { justify-self: end; color: var(--muted); font-variant-numeric: tabular-nums; }
.scope__val b { font-weight: 600; color: var(--ink); }
html:not(.js) .seg { display: none; }
@media (max-width: 1023px) { .scope__view { aspect-ratio: 16 / 9; } }
@media (max-width: 599px) {
  .scope__view { aspect-ratio: 4 / 5; }
  .scope__bar { grid-template-columns: 1fr auto; row-gap: 16px; }
  .scope__bar .seg { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; }
}

/* ---------- Workflow: the five steps in three moves, each with its screen cropped to where it speaks ---------- */
.flow { padding-top: var(--gap); }
.flow__list { display: grid; gap: 48px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
/* the screen at twice the box's width, slid to its inspector (or, for Export, its file list) */
.flow__pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #121416; box-shadow: 0 30px 60px -30px rgba(10, 11, 12, .5); }  /* taste-skill-ignore: the app's window, lifted off the paper */
.flow__pic img { width: 200%; max-width: none; translate: var(--x, 0) 0; }
.flow__steps { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.flow__steps span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--s2); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.flow__steps span:not(:first-child) { margin-left: 10px; }
.flow__list h3 { margin-top: 10px; font-size: var(--t-title); line-height: 1.2; font-weight: 600; letter-spacing: -.018em; }
.flow__list h3 + p { margin-top: 8px; max-width: 30em; color: var(--muted); }
.flow__note { margin-top: clamp(40px, 5vw, 56px); padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--t-lede); font-weight: 600; letter-spacing: -.012em; }  /* taste-skill-ignore: the section's closing line */

/* ---------- Privacy: flat, the path your audio takes, four stops read in order ---------- */
.priv { padding: var(--gap) 0; background: var(--ground); }
.path { display: grid; gap: 32px; margin-top: clamp(40px, 5vw, 64px); }
.path li { position: relative; padding-left: 32px; }
/* each stop a dot on one line: down the side on a phone, across the page on a wide screen */
.path li::before { content: ""; position: absolute; left: 4px; top: 20px; bottom: -32px; width: 1px; background: var(--line); }
.path li:last-child::before { display: none; }
.path li::after { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.path__k { display: block; font-size: var(--t-small); font-weight: 600; color: var(--meta); }
.path h3 { margin-top: 8px; font-size: var(--t-lede); line-height: 1.3; font-weight: 600; letter-spacing: -.012em; }
.path p { margin-top: 8px; max-width: 30em; color: var(--muted); }
@media (min-width: 900px) {
  .path { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
  .path li { padding: 32px 0 0; }
  .path li::before { left: 18px; right: -24px; top: 4px; bottom: auto; width: auto; height: 1px; }
}

/* ---------- Compatibility and questions: one closing sheet, the facts beside the questions ---------- */
.compat { padding-top: var(--gap); }
.compat__in { display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) {
  .compat__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .compat .head { grid-column: 1 / -1; }
  .compat .sheet { grid-column: 1 / 7; }
  .compat .faq__list { grid-column: 8 / 13; }
  .compat .faq__h { padding-top: 0; }
}

.sheet { border-bottom: 1px solid var(--line); }  /* taste-skill-ignore: a spec sheet is a real table */
.sheet__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 24px; padding: 28px 0; border-top: 1px solid var(--line); }  /* taste-skill-ignore: a real table */
.sheet dt { grid-column: 1 / 5; font-size: var(--t-lede); font-weight: 600; letter-spacing: -.012em; }
.sheet dd { grid-column: 5 / 13; font-size: var(--t-lede); line-height: 1.42; letter-spacing: -.008em; }
.sheet dd p.m { margin-top: 8px; max-width: 38em; font-size: var(--t-body); line-height: 1.47; letter-spacing: -.01em; color: var(--muted); }
@media (max-width: 767px) { .sheet dt, .sheet dd { grid-column: 1 / -1; } .sheet__row { padding: 22px 0; } }

/* the questions: one list, each opens in place */
.faq__list { border-bottom: 1px solid var(--line); }  /* taste-skill-ignore: rows of a list that opens in place */
.faq__h { padding: 28px 0 18px; font-size: var(--t-lede); font-weight: 600; letter-spacing: -.012em; color: var(--muted); }
.q { border-top: 1px solid var(--line); }  /* taste-skill-ignore: as above */
.q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 24px 0;
  list-style: none; cursor: pointer; font-size: var(--t-lede); line-height: 1.3; font-weight: 600; letter-spacing: -.012em;
  -webkit-tap-highlight-color: transparent;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: ""; flex: none; width: 14px; height: 14px; color: var(--muted);
  background: linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat,  /* taste-skill-ignore: the plus, two flat bars */ linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat;
  transition: rotate 360ms var(--ease-ios), color 200ms var(--ease-out);
}
.q[open] summary::after { rotate: 45deg; color: var(--ink); }
@media (hover: hover) { .q summary:hover::after { color: var(--ink); } }
.q__a p { max-width: 44em; padding: 0 0 28px; font-size: var(--t-body); color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq__list { interpolate-size: allow-keywords; }
    .q::details-content { block-size: 0; overflow: clip; transition: block-size 420ms var(--ease-ios), content-visibility 420ms allow-discrete; }
    .q[open]::details-content { block-size: auto; }
  }
}

/* ---------- Trial: the closing moment, in the room where the drums are miked ----------
   The picture is the session before the edit: two engineers placing mics round a kit, the light from a window on the right.
   It is shown whole and no larger than it was made, its edges dissolving into the black: wide screens set it to the right,
   with the copy on the black beside it; narrower screens set the copy over black and the picture under it. */
.trial { position: relative; isolation: isolate; overflow: hidden; background: var(--ground); padding: clamp(136px, 15vw, 220px) 0 clamp(136px, 14vw, 200px); }
.trial__in { position: relative; display: grid; justify-items: start; }
.h2--close { max-width: 9em; font-size: clamp(40px, 5vw, 76px); letter-spacing: -.03em; }
.trial .sub { max-width: 24em; }
.trial__go { margin-top: clamp(32px, 4vw, 44px); }
.trial__draft { position: absolute; top: 100%; left: 0; padding-left: 0; max-width: 34em; }  /* under the button without moving it */
.trial__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.trial__bg img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .trial { display: grid; align-content: center; min-height: min(100svh, 50vw); }
  .trial__bg img {
    position: absolute; right: 0; top: 50%; width: min(74vw, 1672px); height: auto; aspect-ratio: 1672 / 941; transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%), linear-gradient(transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 34%), linear-gradient(transparent, #000 16%, #000 84%, transparent);  /* taste-skill-ignore: the picture's edges dissolving into the page */
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
@media (max-width: 1023px) {
  /* three quarters of the picture's width, from its right edge, so both engineers and the kit are in it (they span .42 to
     .93 of it) and the room shows round them */
  .trial { padding-bottom: calc(58vw + 24px); }
  .trial__bg { top: auto; height: 75vw; }
  .trial__bg img { object-position: 100% 50%; }
  .trial__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--ground) 0%, rgba(10, 11, 12, .55) 20%, rgba(10, 11, 12, .05) 42%, rgba(10, 11, 12, .1) 80%, var(--ground) 100%);  /* taste-skill-ignore: a neutral scrim over the photograph */
  }
}

/* ---------- Footer: one quiet line ---------- */
.foot { padding: 28px 0 36px; background: var(--ground); font-size: 13px; line-height: 1.5; color: var(--meta); }
.foot__in { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px 32px; }
.foot__what { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); }
.foot__logo { width: auto; height: 18px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: none; transition: color 200ms var(--ease-out); }
@media (max-width: 1023px) {
  .foot__in { grid-template-columns: 1fr auto; }
  .foot__links { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 599px) { .foot__in { grid-template-columns: 1fr; } .foot__links { grid-row: auto; } .foot__links a { min-height: 44px; } }

/* ---------- Arrival: each block materialises once as it comes into view (rises, sharpens, settles) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; translate: 0 24px; filter: blur(6px);
    transition: opacity 800ms var(--ease-out), translate 1000ms var(--ease-expo), filter 800ms var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  .js [data-reveal].in { opacity: 1; translate: 0 0; filter: none; }
}