/* ==========================================================================
   A5 RACK — W5.3: an editorial product page

   Paper for explanation, black where the interface is demonstrated. The
   genuine A5 interface is the only rich image; it sits on the page with a
   1 px edge and a two-layer shadow, nothing more. One family (Schibsted
   Grotesk); the identity is the brand's A5 vector mark. No decorative
   gradients. See W5_REFERENCE_AND_BRIEF.md.
   ========================================================================== */

:root {
  --paper:    #ffffff;   /* the page: true white (W5.1) */
  --white:    #ffffff;
  --mist:     #f4f4f5;   /* neutral panel on white (specs) */
  --ink:      #0d0c0c;
  --charcoal: #1f1d1e;
  --grey:     #5f5c5e;   /* secondary text on white (6.7:1) */
  --grey-d:   #a7a2a3;   /* secondary text on ink */
  --wine:     #8e1f2d;   /* DRIVE knob red: accents and active states */
  --signal:   #d8323e;   /* LED red, on dark only */
  --rule:     rgba(13, 12, 12, 0.12);
  --rule-d:   rgba(244, 242, 238, 0.14);

  --f: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 3.3vw, 48px);
  --max: 1240px;
  --nav-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  /* the product on paper: a 1 px edge, a tight contact shadow and a long, faint falloff */
  --lift: 0 0 0 1px rgba(13, 12, 12, 0.10), 0 2px 3px rgba(13, 12, 12, 0.16), 0 28px 60px -18px rgba(13, 12, 12, 0.34);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f); font-size: 17px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
b { font-weight: 600; }
::selection { background: var(--wine); color: #fff; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.h-display { font-weight: 700; font-size: clamp(2rem, 3.1vw, 2.9rem); line-height: 1.06; letter-spacing: -0.026em; text-wrap: balance; }
.h-display--small { font-size: clamp(1.85rem, 2.5vw, 2.4rem); }
.h-sub { font-weight: 600; font-size: clamp(1.4rem, 1.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; }
.lead { font-size: clamp(17px, 1.2vw, 18.5px); line-height: 1.55; color: var(--grey); max-width: 46ch; margin-top: 14px; text-wrap: pretty; }
.note { color: var(--grey); font-size: 13.5px; line-height: 1.5; }
.text-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .2s; }
.text-link:hover { text-decoration-color: currentColor; }
.mark { fill: currentColor; width: auto; }
.review {
  display: none; font-size: 12.5px; line-height: 1.5; font-style: italic;
  color: var(--wine); border-left: 2px solid var(--wine); padding: 3px 0 3px 12px; margin-top: 20px; max-width: 80ch;
}
html.review-on .review { display: block; }

/* ---------- buttons ---------- */
.btn {
  --h: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--h); padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap; position: relative;
  font-family: var(--f); font-weight: 500; font-size: 15.5px; text-decoration: none;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #2d2a2b; }
.btn--line { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--small { --h: 36px; padding: 0 16px; font-size: 14px; }
.btn--wide { min-width: 15rem; --h: 52px; font-size: 16.5px; }
.btn__icon { width: 10px; height: 10px; fill: currentColor; flex: none; }
html.review-on .btn[data-buy].is-unconnected::after {
  content: "Preview"; position: absolute; top: -9px; right: 6px;
  font-size: 10px; font-weight: 600; background: var(--wine); color: #fff; padding: 1px 6px; border-radius: 999px; line-height: 1.4;
}

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); transition: background-color .3s, box-shadow .3s; }
.nav.is-solid { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--rule); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); max-width: 1920px; margin: 0 auto; }
/* the AWOL AUDIO logo is a white PNG; on paper it is drawn black */
.nav__brand img { width: 76px; height: auto; filter: brightness(0); }
.nav__links { display: flex; gap: clamp(20px, 2.4vw, 34px); }
.nav__links a { font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--grey); padding: 6px 0; transition: color .2s; }
.nav__links a:hover, .nav__links a.is-current { color: var(--ink); }
.nav__links a.is-current { box-shadow: 0 1.5px 0 var(--ink); }
.nav__end { display: flex; align-items: center; gap: 10px; }
.nav__menu { display: none; width: 40px; height: 36px; background: none; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); cursor: pointer; position: relative; }
.nav__menu-bars, .nav__menu-bars::before { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease); }
.nav__menu-bars { top: 14px; }
.nav__menu-bars::before { content: ""; left: 0; right: 0; top: 6px; }
.nav__menu[aria-expanded="true"] .nav__menu-bars { transform: translateY(3px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-bars::before { transform: translateY(-6px) rotate(-90deg); }
.menu { position: fixed; inset: var(--nav-h) 0 0 0; background: var(--paper); padding: 8px var(--gutter); overflow-y: auto; box-shadow: 0 -1px 0 var(--rule); }
.menu nav { display: flex; flex-direction: column; }
.menu a { font-weight: 600; font-size: 30px; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--rule); }

/* ==========================================================================
   1 · HERO — the A5 mark as a signature, the product centred and large
   ========================================================================== */
.hero {
  position: relative; background: var(--paper); text-align: center;
  display: grid; justify-items: center; align-content: center;
  min-height: min(100svh, 1100px);
  padding: calc(var(--nav-h) + clamp(10px, 1.8vh, 24px)) var(--gutter) clamp(24px, 4vh, 48px);
  /* --mk: the A5 mark's height; --idh: the whole A5 / RACK stack, which the
     product's height budget subtracts (W5.3) */
  --mk: clamp(46px, 5vw, 84px);
  --idh: calc(var(--mk) * 1.45);
}
/* A5 RACK, one stacked mark (W5.3): the official A5 vector unchanged, RACK
   beneath it, small and spaced so its letters span the mark's width. The
   pair is a single unit: a tight gap, RACK about a quarter of the mark's
   height. (W5.2's side-by-side version is kept in qa/screenshots/w52/hero-id.) */
.hero__id { display: flex; flex-direction: column; align-items: center; gap: calc(var(--mk) * 0.15); color: var(--ink); line-height: 1; }
.hero__id .mark { height: var(--mk); width: auto; display: block; }
/* letter-spacing sets RACK's width to the mark's; the matching padding-left
   cancels the trailing space so RACK centres under the mark */
.hero__rack { --ls: 0.92em; font-weight: 600; font-size: calc(var(--mk) * 0.28); letter-spacing: var(--ls); padding-left: var(--ls); display: block; }
.hero__product { margin-top: clamp(16px, 2.6vh, 32px);
  /* sized by the viewport height (the rack is nearly square), never wider than 1080 px */
  width: min(88vw, 1080px, calc((100svh - var(--nav-h) - var(--idh) - 176px) * 1.168)); min-width: 300px; }
.hero__product img { width: 100%; border-radius: 3px; box-shadow: var(--lift); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(18px, 2.8vh, 30px); }

/* one orchestrated moment: the product settles in (movement only, no fade) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__product { animation: settle 1.1s .1s var(--ease) both; }
}
@keyframes settle { from { transform: translateY(12px); } to { transform: none; } }

/* what A5 is, straight after the product */
.intro { background: var(--paper); padding: clamp(32px, 4vw, 56px) 0 clamp(56px, 6vw, 88px); }
.intro__inner { display: grid; justify-items: center; text-align: center; }
.intro__title { font-weight: 700; font-size: clamp(1.75rem, 2.4vw, 2.3rem); line-height: 1.1; letter-spacing: -0.024em; text-wrap: balance; }
.intro__text { margin-top: 12px; max-width: 54ch; color: var(--grey); font-size: clamp(16.5px, 1.2vw, 18px); text-wrap: balance; }
.intro__meta { margin-top: 12px; font-size: 14px; color: var(--grey); }

/* ==========================================================================
   Sections
   ========================================================================== */
/* section rhythm (W5.2: tightened from 96–148 px after the dead-space audit) */
/* W5.3: 64–96 px (5.2: 72–112). A join between two sections is the sum of
   both paddings, so joins within one colour are tightened further below. */
.section { position: relative; padding: clamp(64px, 6vw, 96px) 0; }

/* ---------- 2 · listen: A5's own waveform display ----------
   A black band; the display is the plug-in's plate artwork (W5.3, .a5d
   below), the website's controls sit under it. The waveform colours come
   from --w-* on .player. */
.listen__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.listen__head .lead { max-width: 46ch; }
.listen--display { padding-bottom: clamp(48px, 5vw, 80px); }
.listen .review { max-width: 1240px; margin-left: auto; margin-right: auto; }
.player { max-width: 1240px; margin: 0 auto; display: grid; justify-items: center;
  --w-played: #ffffff; --w-rest: rgba(255, 255, 255, 0.34); --w-line: rgba(255, 255, 255, 0.16); --w-head: rgba(255, 255, 255, 0.92); }
/* sound categories: plain words, the selected one underlined in red */
.player__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(18px, 3vw, 40px); margin-bottom: clamp(18px, 2.2vw, 28px); }
.player__tab { background: none; border: 0; cursor: pointer; padding: 8px 2px; font-weight: 600; font-size: 14.5px; letter-spacing: 0.12em; text-transform: uppercase; position: relative; transition: color .2s; }
.player__tab span { display: none; }
.player__tab b { font-weight: inherit; }
.player__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transition: transform .25s var(--ease); }
.player__tab[aria-selected="true"]::after { transform: none; }
/* the display: A5's own waveform display (W5.3). The frame, gutters, L/R
   lights and drag icon are the plug-in's plate artwork, drawn as a 9-slice:
   the corners and the right-hand column keep their true proportions, only
   the straight runs between them repeat, so on narrow screens the display
   gets shorter instead of smaller. --s is CSS px per design px (the plug-in's
   2x artwork); everything inside is placed in design px from A5RackLayout.h.
   Concept A, "housing" (a band of the plate's grain around the frame), was
   chosen; B, frame only, is kept as screenshots in qa/screenshots/w53/player. */
.a5d { width: 100%; container-type: inline-size; }
.a5d > * { --s: max(calc(100cqw / var(--W)), calc(140px / var(--H))); }
.a5d__box { position: relative; height: calc(var(--H) * var(--s)); }
/* time and overview line up with the waveform area */
.a5d .display__foot { padding: 0 calc(var(--wr) * var(--s)) 0 calc(var(--wl) * var(--s)); }
.a5d--housing { --W: 2515; --H: 482; --art: url("../img/a5-display-housing-2515.webp");
  --st: 87; --sr: 151; --sb: 30; --sl: 144;          /* slices */
  --wl: 147; --wr: 148; --wt: 55; --wb: 37;          /* waveformArea */
  --pr: 46; --pt: 338; --dr: 52; --dt: 239; }        /* PAUSE, drag icon */
.a5d__frame { position: absolute; inset: 0; border: 0 solid transparent;
  border-image-source: var(--art); border-image-slice: var(--st) var(--sr) var(--sb) var(--sl) fill;
  border-image-width: calc(var(--st) * var(--s)) calc(var(--sr) * var(--s)) calc(var(--sb) * var(--s)) calc(var(--sl) * var(--s));
  border-image-repeat: stretch; }
/* the plate's grain fades into the section's black at the edges */
.a5d--housing .a5d__frame { -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(28 * var(--s)), #000 calc(100% - 28 * var(--s)), transparent), linear-gradient(transparent, #000 calc(20 * var(--s)), #000 calc(100% - 20 * var(--s)), transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 calc(28 * var(--s)), #000 calc(100% - 28 * var(--s)), transparent), linear-gradient(transparent, #000 calc(20 * var(--s)), #000 calc(100% - 20 * var(--s)), transparent); mask-composite: intersect; }
.player__wave { width: 100%; height: 100%; display: block; }
.a5d__screen { position: absolute; left: calc(var(--wl) * var(--s)); right: calc(var(--wr) * var(--s)); top: calc(var(--wt) * var(--s)); bottom: calc(var(--wb) * var(--s)); }
/* PAUSE: the plug-in's button image; pressed (paused) shows its frozen state */
.a5d__pause { position: absolute; right: calc(var(--pr) * var(--s)); top: calc(var(--pt) * var(--s)); width: calc(80 * var(--s)); height: calc(71 * var(--s));
  padding: 0; border: 0; background: none; cursor: pointer; }
.a5d__pause img { position: absolute; inset: 0; width: 100%; height: 100%; }
.a5d__pause .a5d__frozen, .a5d__pause.is-frozen img:first-child { opacity: 0; }
.a5d__pause.is-frozen .a5d__frozen { opacity: 1; }
.a5d__pause:hover img:first-child { filter: brightness(1.25); }
.a5d__pause::after { content: ""; position: absolute; inset: -8px; }   /* a 44 px-class hit area on phones */
/* the drag icon is printed on the plate: here it is a pointer to the drag-out
   section, dimmed so it does not pose as a working control */
.a5d__drag { position: absolute; right: calc(var(--dr) * var(--s)); top: calc(var(--dt) * var(--s)); width: calc(70 * var(--s)); height: calc(70 * var(--s));
  background: rgba(0, 0, 0, 0.55); border-radius: 3px; transition: background-color .2s; }
.a5d__drag:hover { background: rgba(0, 0, 0, 0.2); }
.a5d__drag::after { content: ""; position: absolute; inset: -6px; }
.display__foot { margin-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.display__overview { position: relative; height: 20px; }
.player__overview { width: 100%; height: 100%; display: block; }
.player__seek { position: absolute; inset: -10px 0; width: 100%; height: calc(100% + 20px); opacity: 0; cursor: pointer; margin: 0; }
.display__overview:has(.player__seek:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.player__status { position: absolute; left: 0; bottom: 2px; font-size: 13px; color: rgba(255, 255, 255, 0.6); pointer-events: none; }
.display__time { font-size: 12.5px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.55); }
/* the two controls that matter: play, and Dry / A5 */
.player__controls { margin-top: clamp(20px, 2.4vw, 30px); display: flex; align-items: center; justify-content: center; gap: 18px; }
.player__play { width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--ease), background-color .2s; }
.player__play:active { transform: scale(0.96); }
.player__play svg { width: 19px; height: 19px; fill: currentColor; grid-area: 1 / 1; }
.player__play .i-play { transform: translateX(2px); }
.player__play .i-pause, .player__play.is-playing .i-play { display: none; }
.player__play.is-playing .i-pause { display: block; }
.player__play[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.ab { display: inline-grid; grid-template-columns: 1fr 1fr; border-radius: 999px; padding: 4px; gap: 4px; }
.ab__opt { min-width: 96px; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; transition: background-color .18s, color .18s; }

.listen--display { background: var(--ink); color: var(--paper); --rule: var(--rule-d); --grey: var(--grey-d); }
.listen--display :focus-visible { outline-color: var(--paper); }
.listen--display .review { color: #f0a0aa; border-color: var(--signal); }
.listen--display .player__tab { color: var(--grey-d); }
.listen--display .player__tab:hover, .listen--display .player__tab[aria-selected="true"] { color: #fff; }
.listen--display .player__play { background: var(--paper); color: var(--ink); }
.listen--display .player__play:hover { background: #fff; }
.listen--display .ab { background: #1f1d1e; }
.listen--display .ab__opt { color: var(--grey-d); }
.listen--display .ab__opt:hover { color: #fff; }
.listen--display .ab__opt[aria-checked="true"] { background: var(--paper); color: var(--ink); }
/* the selected key is lit white either way; A5 also shows the plug-in's
   red ON LED, so the state is clear without a red fill */
.ab__opt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.ab__opt[data-version="a5"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4a3a3e; transition: background-color .18s, box-shadow .18s; }
.listen--display .ab__opt[data-version="a5"][aria-checked="true"]::before { background: var(--signal); box-shadow: 0 0 8px rgba(216, 50, 62, 0.9); }
.listen--display .toggle input:focus-visible + .toggle__track { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ---------- 3–4 · MASTER and MOTION: one rack held in the centre.
   MASTER is explained on paper; as MOTION takes focus the whole section
   cuts to black. The contrast is the moment, not a lighting effect. ---------- */
.rack { background: var(--paper); padding-bottom: 0; transition: background-color .7s var(--ease), color .7s var(--ease); }
.rack:has(.rack__figure[data-focus="motion"]) { background: var(--ink); color: var(--paper); --rule: var(--rule-d); --grey: var(--grey-d); }
.rack:has(.rack__figure[data-focus="motion"]) :focus-visible { outline-color: var(--paper); }
.rack__head { text-align: center; display: grid; justify-items: center; }
.rack { padding-bottom: clamp(24px, 3vw, 48px); }
.rack__head .lead { max-width: 52ch; }
.rack__scroller { position: relative; margin-top: clamp(8px, 1vw, 16px); }
.rack__sticky { display: grid; place-items: center; padding: 0 var(--gutter); }
.rack__figure { position: relative; width: min(100%, 980px); }
.rack__figure img { width: 100%; border-radius: 3px; box-shadow: var(--lift); }
.rack__veil { position: absolute; left: 0; right: 0; background: var(--paper); opacity: 0; transition: opacity .6s var(--ease), background-color .7s var(--ease); pointer-events: none; }
.rack:has(.rack__figure[data-focus="motion"]) .rack__veil { background: var(--ink); }
/* the dimming only exists while the scroll effect is live */
.rack__scroller:not(.is-live) .rack__veil { display: none; }
.rack__veil--master { top: 0; height: 50.2%; }
.rack__veil--motion { top: 50.2%; bottom: 0; }
/* the unit not being described steps back but stays recognisable */
.rack__figure[data-focus="master"] .rack__veil--motion { opacity: 0.62; }
.rack__figure[data-focus="motion"] .rack__veil--master { opacity: 0.5; }
.rack__steps { padding: 0 var(--gutter); }
.rack__step { max-width: var(--max); margin: 0 auto; padding: 48px 0; display: grid; gap: 24px; }
.rack__name { font-weight: 700; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: 0.01em; }
.rack__say p { margin-top: 14px; max-width: 34ch; color: var(--grey); }
.controls div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
.controls dt { font-weight: 600; font-size: 13px; letter-spacing: 0.06em; }
.controls dd { font-size: 15px; color: var(--grey); }
/* side by side from 900 px (W5.3; 5.2: 1100), so landscape tablets get the
   desktop layout instead of a pinned rack over a narrow strip of text */
@media (min-width: 900px) {
  .rack__scroller.is-live { display: grid; }
  .rack__scroller.is-live > * { grid-area: 1 / 1; }
  .is-live .rack__sticky { position: sticky; top: 0; height: 100svh; align-self: start; padding-top: var(--nav-h); }
  .is-live .rack__figure { width: min(46vw, calc((100svh - 140px) * 1.168)); }
  .is-live .rack__steps { --fig: min(46vw, calc((100svh - 140px) * 1.168)); }
  /* each step is 62 % of a screen (5.1: 100 %, 5.2: 76 %): the rack is pinned
     for about a quarter screen, MASTER and MOTION each still cross the
     centre line, and the colour change happens mid-pin (W5.3 timeline) */
  .is-live .rack__step { min-height: 62svh; padding: 0; grid-template-columns: minmax(0, 1fr) var(--fig) minmax(0, 1fr); gap: clamp(28px, 3vw, 56px); align-items: center; max-width: none; }
  .is-live .rack__say { grid-column: 1; justify-self: end; max-width: 21rem; }
  .is-live .controls { grid-column: 3; max-width: 19rem; width: 100%; }
}

/* ---------- 5 · sound (paper, quiet) ---------- */
.sound-sec { background: var(--paper); padding-top: clamp(36px, 3.6vw, 56px); }   /* white after white MASTER/MOTION */
.sound { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 72px); align-items: start; }
.sound__list { margin-top: 26px; border-top: 1px solid var(--rule); }
.sound__row { border-bottom: 1px solid var(--rule); }
.sound__btn { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; background: none; border: 0; padding: 16px 0 15px; cursor: pointer; text-align: left; }
.sound__word { font-weight: 600; font-size: clamp(1.5rem, 1.9vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.1; color: #8a8486; transition: color .3s var(--ease); }
.sound__mods { font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--grey); text-align: right; transition: color .3s; }
.sound__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.sound__inner { overflow: hidden; min-height: 0; }
.sound__inner > p:first-child { font-size: 16px; color: var(--grey); max-width: 48ch; }
.sound__inner::after { content: ""; display: block; height: 20px; }
.sound__row.is-active .sound__body { grid-template-rows: 1fr; }
.sound__row.is-active .sound__word, .sound__btn:hover .sound__word { color: var(--ink); }
.sound__row.is-active .sound__mods { color: var(--wine); }
.sound__word { letter-spacing: 0.01em; }
.sound__demo { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--ink); }
.sound__demo svg { width: 10px; height: 10px; fill: var(--wine); }
.sound__pending { display: none; margin-top: 10px; font-size: 12.5px; font-style: italic; color: var(--wine); }
html.review-on .sound__pending { display: block; }
.sound__scenes { margin-top: 24px; font-size: 15.5px; color: var(--grey); max-width: 44ch; }
.sound__scenes b { color: var(--ink); }
.spot { position: relative; border-radius: 3px; overflow: hidden; box-shadow: var(--lift); }
.spot img { width: 100%; }
.spot__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot__dim { fill: rgba(13, 12, 12, 0.66); }
.spot__svg rect.spot__box { fill: none; stroke: var(--signal); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sound__caption { margin-top: 16px; font-size: 13.5px; color: var(--grey); }
@media (min-width: 1100px) {
  .sound { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
  .sound__figure { position: sticky; top: calc(var(--nav-h) + 36px); }
}

/* ---------- 6 · see the rack (black): an annotated walkthrough ----------
   Each marker points at a real control from beside it: in the margins on
   wide screens (a hairline leads in to a small anchor dot), or on the wood
   cheeks and chassis on phones. One explanation shows at a time below. */
.inspect-sec { background: var(--ink); color: var(--paper); --rule: var(--rule-d); --grey: var(--grey-d); }
.inspect-sec :focus-visible { outline-color: var(--paper); }
.inspect-sec .review { color: #f0a0aa; border-color: var(--signal); }
.inspect-sec { padding-bottom: clamp(24px, 2.6vw, 40px); }
/* the full-size link sits under the walkthrough's previous/next, not on a row of its own */
.inspect-sec__more { text-align: center; margin-top: 14px; font-size: 14px; color: var(--grey-d); }
.inspect-sec__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(40px, 4.6vw, 68px); }
.inspect { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.stage { position: relative; width: min(900px, calc(100% - 120px), calc((100svh - 330px) * 1.168)); margin: 0 auto; }
.inspect__frame { position: relative; aspect-ratio: 2400 / 2054; container-type: size; }
.inspect__frame img { width: 100%; border-radius: 3px; box-shadow: 0 0 0 1px rgba(244, 242, 238, 0.08); }
.hot {
  --m: 22px; --gap: 26px;
  position: absolute; z-index: 2; width: var(--m); height: var(--m); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--paper); color: var(--ink); font: 600 11.5px/1 var(--f); display: grid; place-items: center;
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
/* a larger invisible touch target around the small marker */
.hot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.hot span { position: relative; z-index: 1; }
/* the hairline lead and the anchor dot are drawn by ::before */
.hot::before { content: ""; position: absolute; background: rgba(244, 242, 238, 0.45); pointer-events: none; transition: background-color .2s; }
.hot:hover, .hot.is-active { background: var(--signal); color: #fff; }
.hot:hover::before, .hot.is-active::before { background: var(--signal); }
/* right margin: marker beyond the right edge, a horizontal lead back to the control */
.hot--right { left: calc(100cqw + var(--gap)); top: calc(var(--ay) * 1cqh - var(--m) / 2); }
.hot--right::before { right: 100%; top: 50%; height: 1px; width: calc(100cqw + var(--gap) - var(--ax) * 1cqw); }
.hot--left { right: calc(100cqw + var(--gap)); top: calc(var(--ay) * 1cqh - var(--m) / 2); }
.hot--left::before { left: 100%; top: 50%; height: 1px; width: calc(var(--ax) * 1cqw + var(--gap)); }
.hot--top { left: calc(var(--ax) * 1cqw - var(--m) / 2); bottom: calc(100cqh + var(--gap)); }
.hot--top::before { top: 100%; left: 50%; width: 1px; height: calc(var(--gap) + var(--ay) * 1cqh); }
/* MASTER knobs: marker on the chassis strip just under each label */
.hot--bottom { --gap: 0px; left: calc(var(--ax) * 1cqw - var(--m) / 2); top: calc(48.3cqh - var(--m) / 2); }
.hot--bottom::before { bottom: 100%; left: 50%; width: 1px; height: calc((48.3 - var(--ay)) * 1cqh - var(--m) / 2); }
/* the explanation, one at a time */
.walk { width: min(560px, 100%); margin-top: clamp(26px, 2.8vw, 38px); text-align: center; display: grid; justify-items: center; min-height: 9.5em; }
.walk__unit { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--grey-d); }
.walk__name { margin-top: 8px; display: flex; align-items: center; gap: 12px; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.1; }
.walk__name b { font-weight: 700; letter-spacing: 0.02em; }
.walk__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: #fff; font-size: 13px; font-weight: 600; }
.walk__text { margin-top: 10px; color: var(--grey-d); font-size: 16.5px; line-height: 1.5; max-width: 44ch; text-wrap: balance; }
.walk__nav { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.walk__step { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-d); display: grid; place-items: center; transition: background-color .2s; }
.walk__step:hover { background: #2b2829; }
.walk__step svg { width: 18px; height: 18px; }
.walk__count { font-size: 13.5px; color: var(--grey-d); font-variant-numeric: tabular-nums; min-width: 4.6em; }
.legend.sr { list-style: none; }

/* ---------- 6b · drag-out: its own moment, continuing the black demo band ---------- */
.dragout { background: var(--ink); color: var(--paper); --rule: var(--rule-d); --grey: var(--grey-d); padding-top: clamp(12px, 1.6vw, 24px); }
.dragout :focus-visible { outline-color: var(--paper); }
.dragout__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(30px, 3.4vw, 48px); padding-top: clamp(36px, 3.6vw, 56px); border-top: 1px solid var(--rule-d); }
.dragout__head .lead { max-width: 50ch; }
/* equal side padding keeps the display centred; the right side holds the markers */
.dragout__figure { max-width: 1240px; margin: 0 auto; padding: 0 clamp(64px, 7vw, 96px); }
.dragout__frame { position: relative; container-type: inline-size; }
.dragout__frame img { width: 100%; display: block; }
/* a hairline around the selected hit (28.9–51.8 % of the display image) */
.dragout__sel { position: absolute; left: 28.9%; width: 22.9%; top: 5%; height: 88%; box-shadow: 0 0 0 1.5px var(--signal); pointer-events: none; }
.dmark { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 600 12.5px/26px var(--f); text-align: center; pointer-events: none; }
.dmark--sel { left: calc(var(--ax) * 1% - 13px); top: -36px; }
.dmark--sel::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: var(--signal); }
.dmark--side { left: calc(100% + 18px); top: calc(var(--ay) * 1% - 13px); }
.dmark--side::before { content: ""; position: absolute; right: 100%; top: 50%; height: 1px; width: 18px; background: rgba(244, 242, 238, 0.5); }
/* the one directional cue: out of the drag icon, to the right */
.dragout__out { display: none; position: absolute; left: calc(100% + 52px); top: calc(var(--ay) * 1% - 9px); align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--grey-d); pointer-events: none; }
.dragout__out i { display: block; width: clamp(14px, 1.8vw, 28px); height: 1px; background: currentColor; position: relative; }
.dragout__out i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.dragout__steps { max-width: 1240px; padding: 0 clamp(64px, 7vw, 96px); margin: clamp(30px, 3.4vw, 44px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 40px; counter-reset: d; }
.dragout__steps li { counter-increment: d; position: relative; padding-left: 38px; color: var(--grey-d); font-size: 16px; line-height: 1.5; }
.dragout__steps li::before { content: counter(d); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--paper); color: var(--paper); font-size: 12.5px; font-weight: 600; display: grid; place-items: center; }
.dragout__steps b { display: block; color: var(--paper); font-weight: 600; margin-bottom: 2px; }
@media (min-width: 900px) { .dragout__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dragout__out { display: flex; } }

/* ---------- 7 · what's included: label/value rows on a raised panel ---------- */
.specs-sec { background: var(--paper); }
.specs__title { font-size: clamp(2.2rem, 3.4vw, 3.1rem); }
.specs { margin-top: clamp(28px, 2.8vw, 40px); background: var(--mist); border-radius: 14px; padding: 10px clamp(22px, 3.4vw, 48px); }
.specs__cell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 24px 0; border-top: 1px solid var(--rule); }
.specs__cell:first-child { border-top: 0; }
.specs dt { font-weight: 700; font-size: 17.5px; letter-spacing: -0.01em; color: var(--ink); }
.specs dd { font-size: 16.5px; line-height: 1.55; color: var(--grey); max-width: 60ch; }
@media (min-width: 760px) { .specs__cell { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: baseline; } }

/* ---------- 8 · purchase: an unboxed column beside the product ---------- */
.specs-sec { padding-bottom: clamp(32px, 3vw, 48px); }
.buy-sec { background: var(--paper); padding-top: clamp(32px, 3vw, 48px); }
.faq-sec { padding-top: clamp(36px, 3.6vw, 56px); }   /* white after white purchase */
.buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 5vw, 88px); align-items: center; }
.buy__title { display: flex; align-items: center; gap: 0.36em; font-size: clamp(30px, 2.6vw, 38px); line-height: 1; }
.buy__title .mark { height: 1em; }
.buy__title span[aria-hidden] { font-weight: 500; letter-spacing: 0.28em; }
.buy__price { margin: 28px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.buy__amount { font-weight: 700; font-size: clamp(2.6rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.035em; }
.buy__amount.is-pending { font-weight: 600; font-size: 21px; letter-spacing: -0.012em; }
.buy__price-note { font-size: 14px; color: var(--grey); }
.buy__price-note:has(.buy__regular) { flex-basis: 100%; display: grid; gap: 6px; margin-top: 6px; font-size: 15px; }
.buy__regular { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.buy__what { margin-top: 14px; color: var(--grey); max-width: 38ch; }
.buy__col .btn { margin-top: 24px; }
.buy__waitlist { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); max-width: 40ch; }
.buy__waitlist h3 { font-size: 16px; font-weight: 600; }
.steps { margin-top: 10px; counter-reset: w; display: grid; gap: 6px; }
.steps li { counter-increment: w; display: grid; grid-template-columns: 22px 1fr; font-size: 15.5px; color: var(--grey); }
.steps li::before { content: counter(w); color: var(--wine); font-weight: 600; }
.buy__help { margin-top: 22px; font-size: 15px; color: var(--grey); }
.buy__help a { color: var(--ink); }
.buy__product img { width: 100%; border-radius: 3px; box-shadow: var(--lift); }
@media (min-width: 1100px) { .buy { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* ---------- 9 · FAQ ---------- */
.faq-sec { background: var(--paper); }
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.faq__head p { margin-top: 14px; color: var(--grey); }
.faq__list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 19px 0; font-weight: 500; font-size: clamp(17px, 1.3vw, 18.5px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 400; line-height: 1; color: var(--ink); transition: transform .25s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--wine); }
.faq__a { padding: 0 0 24px; max-width: 66ch; color: var(--grey); }
.faq__a p + p { margin-top: 10px; }
@media (min-width: 1100px) {
  .faq { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
  .faq__head { position: sticky; top: calc(var(--nav-h) + 40px); }
}

/* ---------- footer, dock, dialog ---------- */
.foot { padding: 44px 0 120px; background: var(--ink); color: var(--paper); }
.foot .review { color: #f0a0aa; border-color: var(--signal); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.foot__brand img { width: 72px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot__links a { font-size: 14.5px; color: var(--grey-d); text-decoration: none; }
.foot__links a:hover { color: var(--paper); }
.foot__links a[hidden] { display: none; }
.foot__copy { font-size: 13.5px; color: var(--grey-d); }
.foot :focus-visible { outline-color: var(--paper); }
.dock { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; width: min(520px, calc(100% - 24px)); transform: translate(-50%, 140%); transition: transform .45s var(--ease); pointer-events: none; }
.dock.is-shown { transform: translate(-50%, 0); pointer-events: auto; }
.dock__inner { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; background: var(--ink); color: var(--paper); border-radius: 999px; box-shadow: 0 0 0 1px rgba(244, 242, 238, 0.16), 0 18px 40px -12px rgba(13, 12, 12, 0.5); }
.dock__mark { width: 28px; height: 17px; fill: var(--paper); flex: none; }
.dock__name { font-weight: 600; font-size: 14.5px; flex: 1; min-width: 0; line-height: 1.2; letter-spacing: 0.04em; }
.dock__name span { display: block; font-size: 12.5px; font-weight: 400; color: var(--grey-d); letter-spacing: 0; }
.dock__price { font-weight: 600; font-size: 16px; white-space: nowrap; }
.dock__price.is-pending { font-weight: 400; font-size: 12.5px; color: var(--grey-d); }
.dock .btn--ink { background: var(--paper); color: var(--ink); }
.dock :focus-visible { outline-color: var(--paper); }
.dialog { border: 0; border-radius: 14px; background: var(--white); color: var(--ink); padding: 32px; max-width: 440px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(13, 12, 12, 0.3); }
.dialog::backdrop { background: rgba(13, 12, 12, 0.5); }
.dialog h2 { font-weight: 700; font-size: 26px; letter-spacing: -0.025em; line-height: 1.1; margin: 8px 0 12px; }
.dialog p { margin-bottom: 14px; font-size: 15.5px; color: var(--grey); }
.dialog__small { font-size: 13.5px !important; }
.dialog code { color: var(--ink); overflow-wrap: anywhere; }
.dialog .order__label { color: var(--wine); font-size: 13.5px; font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .nav__links { display: none; }
  .nav__menu { display: block; }
}
@media (min-width: 700px) and (max-width: 1099px) and (orientation: portrait) {
  .hero { min-height: 0; }
  .hero__product { width: min(84vw, 700px); }
}
/* the walkthrough needs its margins for the markers; below 1100 px the
   image narrows to keep them */
@media (max-width: 1099px) { .stage { width: min(calc(100% - 110px), 760px); } }
@media (min-width: 1100px) {
  .inspect { grid-template-columns: auto 300px; justify-content: center; align-items: start; column-gap: 104px; }
  .stage { width: min(820px, calc(100vw - 660px), calc((100svh - 330px) * 1.168)); margin: 0; }
  .walk { margin-top: 0; width: 100%; text-align: left; justify-items: start; transform: translateY(var(--py, 0px)); transition: transform .2s var(--ease); }
  .walk__text { max-width: 30ch; }
}

@media (max-width: 699px) {
  :root { --nav-h: 58px; }
  body { font-size: 16.5px; }
  .nav__brand img { width: 68px; }
  .section { padding: 60px 0; }
  /* the joins W5.3 tightened keep their smaller values on phones */
  .listen--display { padding-bottom: 44px; }
  .inspect-sec { padding-bottom: 24px; }
  .dragout { padding-top: 8px; }
  .specs-sec { padding-bottom: 28px; }
  .buy-sec { padding-top: 28px; }
  .faq-sec { padding-top: 44px; }
  .h-display { font-size: clamp(2rem, 8.6vw, 2.4rem); }

  /* phone hero: mark, product nearly full width, actions */
  .hero { min-height: 0; padding-bottom: 32px; }
  .hero { --mk: clamp(40px, 11vw, 52px); }
  .hero__product { width: 100%; min-width: 0; margin-top: 22px; }
  .hero__ctas { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .hero__ctas .btn { --h: 50px; font-size: 16px; }
  .intro { padding-top: 28px; }
  .intro__inner { text-align: left; justify-items: start; }

  .listen__head { text-align: left; justify-items: start; }
  /* four categories in a 2 × 2 grid of real tap targets */
  .player__tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .player__tab { padding: 12px 4px; font-size: 14px; }
  .a5d { margin: 0 calc(var(--gutter) * -0.5); width: calc(100% + var(--gutter)); }
  .player__controls { width: 100%; gap: 12px; }
  .player__play { width: 50px; height: 50px; flex: none; }
  .ab { flex: 1; }
  .ab__opt { min-width: 0; height: 48px; padding: 0 12px; }

  .rack__head { text-align: left; justify-items: start; padding-bottom: 8px; }
  .rack__sticky { position: sticky; top: var(--nav-h); z-index: 1; background: var(--paper); padding: 10px var(--gutter) 14px; transition: background-color .7s var(--ease); }
  .rack:has(.rack__figure[data-focus="motion"]) .rack__sticky { background: var(--ink); }
  /* the pinned rack must fit the screen with room for the text under it,
     or on landscape tablets it scrolls away and MOTION's black state shows
     an empty screen (W5.3 timeline, 1024 × 768) */
  .rack__figure { width: min(100%, 980px, calc((100svh - var(--nav-h) - 300px) * 1.168)); margin: 0 auto; }
  .rack__step { min-height: 38svh; padding: 20px 0 28px; align-content: start; }
  .rack__step:last-child { min-height: 0; }
  .controls div { grid-template-columns: 72px 1fr; }

  .sound__btn { flex-direction: column; gap: 3px; padding: 14px 0 12px; }
  .sound__mods { text-align: left; }

  /* phones: no room for margins, so markers sit on the wood cheeks and the
     chassis beside each control; no leads */
  .stage { width: 100%; }
  .hot { --m: 24px; font-size: 11px; box-shadow: 0 0 0 2px rgba(13, 12, 12, 0.55); }   /* WCAG 2.5.8: 24 px targets */
  .hot::before { display: none; }
  .hot--right { left: calc(98.3cqw - var(--m) / 2); }
  .hot--left { right: auto; left: calc(1.7cqw - var(--m) / 2); }
  .hot--left[data-hot="7"] { left: calc(25cqw - var(--m) / 2); }
  .hot--top { bottom: auto; top: calc(4.6cqh - var(--m) / 2); left: calc(31cqw - var(--m) / 2); }
  /* the knob row sits on the seam between the units, clear of the labels;
     20 px markers here, spaced ≥ 60 px apart (WCAG 2.5.8 spacing exception) */
  .hot--bottom { --m: 20px; font-size: 10.5px; top: calc(49.4cqh - var(--m) / 2); }
  .walk { text-align: left; justify-items: start; min-height: 11em; }
  .dragout__head { text-align: left; justify-items: start; }
  /* phones: the display runs edge to edge, cropped to its right three
     quarters (the selection and the icons) so it reads at a third larger.
     --c0 is the crop's left edge and --k its scale, in image percent. */
  .dragout__figure { padding: 0; margin: 0 calc(var(--gutter) * -1); }
  .dragout__frame { --c0: 25; --k: 1.3333; overflow: visible; }
  .dragout__frame img { width: calc(var(--k) * 100%); max-width: none; margin-left: calc(var(--c0) * var(--k) * -1%); clip-path: inset(0 0 0 calc(var(--c0) * 1%)); }
  .dragout__sel { left: calc((28.9 - var(--c0)) * var(--k) * 1%); width: calc(22.9 * var(--k) * 1%); }
  .dragout__steps { padding: 0; }
  .dmark { width: 24px; height: 24px; font-size: 11.5px; line-height: 24px; }
  .dmark--sel { top: -30px; left: calc((var(--ax) - var(--c0)) * var(--k) * 1% - 12px); }
  /* the drag icon's marker above the display, PAUSE's below, each with a
     short vertical lead to its icon */
  .dmark--side { left: calc(100% - 30px); }
  .dmark--drag { top: -30px; }
  .dmark--pause { top: calc(100% + 6px); }
  .dmark--side::before { right: auto; left: 50%; width: 1px; }
  .dmark--drag::before { top: 100%; height: calc(var(--ay) * 0.01 * var(--fh) + 6px); }
  .dmark--pause::before { top: auto; bottom: 100%; height: calc((100 - var(--ay)) * 0.01 * var(--fh) + 6px); }
  .dragout__frame { --fh: calc(100vw * 1.3333 * 330 / 1800); margin-bottom: 34px; }
  .dragout__frame { margin-top: 34px; }
  .hot[data-hot="11"], .hot[data-hot="12"], .hot[data-hot="13"], .hot[data-hot="14"] { display: none; }
  .hot[data-hot="10"] { --m: 30px; border-radius: 15px; width: 42px; top: calc(76cqh - 15px); left: calc(98.3cqw - 34px); }
  .hot[data-hot="10"] span { font-size: 0; }
  .hot[data-hot="10"] span::after { content: "FX"; font-size: 11px; letter-spacing: 0.04em; }
  .hot[data-hot="10"].is-fx { background: var(--signal); color: #fff; }
  .inspect-sec__head { text-align: left; justify-items: start; }

  .btn--wide { width: 100%; }
  .specs { padding: 4px 18px; }

  .dock__inner { gap: 12px; padding-left: 14px; }
  .dock__name span { display: none; }
}

/* social-image render (?og=1) and stitched QA captures (?flat=1) */
html.og .nav, html.og .hero__ctas, html.og .dock { display: none !important; }
html.flat .nav { position: absolute; }
html.flat .dock { display: none; }
html.flat .sound__figure, html.flat .faq__head { position: static !important; }
html.flat .rack__sticky { position: relative !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}