/* ═══════════════════════════════════════════════════════
    simpleStutter — page theme
    The plugin's own look (src/editor/StutterTheme.h): a dark panel, Unbounded
    and Space Grotesk, amber for the accent and one bright colour for each kind
    of block. The hero sits on the plugin's dark panel in both themes; the rest
    of the page is warm paper, or the plugin's dark in dark mode. Where the
    hero's pieces sit is /product-hero.css.
    ═══════════════════════════════════════════════════════ */

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: block;
    src: url("/fonts/unbounded-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: block;
    src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
}

:root {
    color-scheme: light dark;

    --font-display: "Unbounded", "Arial Black", sans-serif;
    --font-body: "Space Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;

    /* The plugin's colours. */
    --ink: #121317;
    --accent: #ffb340;
    --accent-light: #ffc66e;
    --mode-repeat: #ffb340;
    --mode-half: #36c9c6;
    --mode-reverse: #a98bff;
    --mode-stop: #ff6b6b;
    --mode-start: #7bd86f;
    --mode-mute: #6ea8fe;
    --mode-scratch: #ff7ac6;
    --mode-custom: #d4f04c;
    --mode-crush: #e07a62;
    --mode-glitch: #f2efe8;

    /* The hero's stage: the plugin's window, the same in both themes. */
    --stage: #131418;
    --stage-panel: #1c1e24;
    --stage-raised: #252831;
    --stage-edge: #2f333d;
    --stage-line: #3b404c;
    --stage-text: #f2efe8;
    --stage-muted: #8f929c;
    --stage-copy: #c3c5cc;

    /* The page. */
    --bg: #f3f1eb;
    --panel: #fffdf8;
    --text: #16171b;
    --muted: #5b5e68;
    --line: #dcd8cc;
    --line-strong: #b9b5aa;
    --rule: rgba(22, 23, 27, 0.12);
    --link: #9a5800;

    --max-w: 1080px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #131418;
        --panel: #1c1e24;
        --text: #f2efe8;
        --muted: #a2a5ae;
        --line: #2f333d;
        --line-strong: #4a4f5c;
        --rule: rgba(242, 239, 232, 0.12);
        --link: #ffc66e;
    }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .slice-row { --open: 0s linear; }
}

body {
    margin: 0;
    /* iPhone Safari fills the space under its toolbars, and past either end of the
       page, with body's background-color (not html's), so that stays the header and
       footer's black and the page colour is painted as an image on top. */
    background: linear-gradient(var(--bg), var(--bg)) #0c0c0e;
    color: var(--text);
    font: 17px/1.6 var(--font-body);
    overflow-x: clip;
}

main { padding-bottom: 104px; }

h1, h2 {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h3 {
    margin: 0;
    font-family: var(--font-body);
    text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--link); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Buttons: the plugin's chips ── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: 700 1rem/1.2 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.button:active { transform: translateY(1px); }

.button-primary {
    background: var(--accent);
    color: var(--ink);
}

.button-primary:hover { background: var(--accent-light); }

.button-ghost {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--text);
}

.button-ghost:hover { background: var(--rule); }

.button:focus-visible,
.slice-button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.btn-icon {
    flex: none;
    width: 15px;
    height: 15px;
}

/* ── The stage ── */
.stutter-stage {
    background: var(--stage);
    color: var(--stage-text);
}

/* The logo: the three-block icon beside "SIMPLE" over "Stutter", as in the plugin's
   header, drawn as an SVG by scripts/make_simplestutter_logo.py. */
.stutter-wordmark {
    display: block;
    width: auto;
    max-width: 100%;
    height: 56px;
}

.stutter-label {
    padding-right: 11px;
    overflow: hidden;
    border: 1px solid var(--stage-edge);
    border-radius: 8px;
    background: var(--stage-panel);
    color: var(--stage-copy);
    font: 700 0.74rem/1 var(--font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stutter-label-free {
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-right: 11px;
    padding: 0 10px;
    background: var(--accent);
    color: var(--ink);
}

/* The Black Friday tag after "VST3 · AU", shown by launch.js while the sale runs. */
.stutter-label-sale {
    display: flex;
    align-items: center;
    align-self: stretch;
    margin: 0 -11px 0 11px;
    padding: 0 10px;
    background: var(--mode-stop);
    color: var(--ink);
}

.stutter-label-sale[hidden] {
    display: none;
}

/* The hero fills the first screen under the 53px header (its contents centred down it),
   so the eight blocks start below it rather than peeking in at the bottom. Where the hero
   is taller than the screen anyway, this changes nothing. */
.stutter-stage .product-hero {
    min-height: calc(100vh - 53px);
    min-height: calc(100svh - 53px);
    align-content: center;
}

.stutter-stage .product-hero__title {
    font-size: clamp(2rem, 1.25rem + 2vw, 2.65rem);
    font-weight: 800;
    line-height: 1.08;
}

.stutter-stage .product-hero__text {
    color: var(--stage-copy);
    font-size: 1.08rem;
}

.stutter-stage .product-hero__text strong { color: var(--stage-text); }

.hero-note {
    color: var(--stage-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.hero-note strong { color: var(--stage-copy); }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.stutter-stage .button-ghost {
    border-color: var(--stage-line);
    color: var(--stage-text);
}

.stutter-stage .button-ghost:hover { background: rgba(242, 239, 232, 0.06); }

/* Other downloads, opening under its toggle. */
.other-downloads { position: relative; }
.other-downloads > summary { list-style: none; }
.other-downloads > summary::-webkit-details-marker { display: none; }

.other-downloads-chevron {
    width: 12px;
    height: 8px;
    transition: transform 0.15s ease;
}

.other-downloads[open] .other-downloads-chevron { transform: rotate(180deg); }

.other-downloads-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 5;
    min-width: 100%;
}

.other-downloads.is-fallback .other-downloads-panel {
    position: static;
    margin-top: 10px;
}

.other-downloads-menu {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--stage-edge);
    border-radius: 12px;
    background: var(--stage-raised);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}

.other-downloads-menu .button {
    width: 100%;
    justify-content: flex-start;
}

.platform-download {
    display: grid;
    gap: 6px;
}

.linux-vst3-alt {
    padding-left: 4px;
    color: var(--muted);
    font-size: 0.85rem;
}

.stutter-stage .linux-vst3-alt { color: var(--stage-muted); }

/* ── The hero's picture: the plugin's window ── */
.hero-shot { margin: 0; }

.hero-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--stage-edge);
    border-radius: 14px;
    box-shadow: 0 44px 90px -40px rgba(0, 0, 0, 0.8);
}

/* ── The eight blocks: eight slices of a bar, on the stage under the hero ── */
.slices {
    position: relative;
    isolation: isolate;
    width: min(calc(100% - 32px), var(--max-w));
    margin: 0 auto;
    padding: 24px 0 88px;
}

/* While a block plays, its colour glows down both edges of the stage (deck.js): a tall,
   narrow ladder of stripes on each side that runs down with the music (slower in half
   time, back up in a reverse), flares on every kick, and reaches in further with the bass
   on the left and the treble on the right, as the meter reads left to right. Dark when
   nothing plays. It runs out to the window's edges, so the stage clips anything past them. */
.stutter-stage {
    overflow-x: hidden;
    overflow-x: clip;
}

.slices-glow {
    position: absolute;
    z-index: -1;
    top: -180px;
    right: calc(50% - 50vw);
    bottom: 0;
    left: calc(50% - 50vw);
    pointer-events: none;
    transition: --deck 0.35s ease;
}

.slices-glow i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(10vw, 130px);
    overflow: hidden;
    opacity: 0;
    transform-origin: 0% 50%;
    -webkit-mask-image: radial-gradient(farthest-side at 0% 50%, #000 15%, transparent);
    mask-image: radial-gradient(farthest-side at 0% 50%, #000 15%, transparent);
    will-change: transform, opacity;
}

.slices-glow i + i {
    right: 0;
    left: auto;
    transform-origin: 100% 50%;
    -webkit-mask-image: radial-gradient(farthest-side at 100% 50%, #000 15%, transparent);
    mask-image: radial-gradient(farthest-side at 100% 50%, #000 15%, transparent);
}

/* The stripes: 5px on, 5px off. deck.js moves them down one stripe (10px) an eighth note. */
.slices-glow b {
    position: absolute;
    top: -10px;
    right: 0;
    bottom: 0;
    left: 0;
    background: repeating-linear-gradient(to bottom, var(--deck) 0 5px, transparent 5px 10px);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .slices-glow i { transition: opacity 0.6s ease; }
}

.slices .slot-label { color: var(--stage-muted); }
.slices .section-head h2 { color: var(--stage-text); }
.slices .section-head .section-text { color: var(--stage-copy); }
.slices-silent,
.slices.is-silent .slices-sound { display: none; }
.slices.is-silent .slices-silent { display: inline; }

/* The heading, with the deck beside it. */
.slices-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px 40px;
    align-items: end;
    margin-bottom: 36px;
}

.slices-top .section-head { margin-bottom: 0; }

/* The deck (deck.js): a flat record that turns as the music under the playhead does, in
   the colour of the block playing, and a readout of what it's doing, set straight on the
   stage like the plugin's own labels. */
@property --deck {
    syntax: "<color>";
    inherits: true;
    initial-value: #3b404c;
}

.deck {
    --deck: var(--stage-line);
    display: flex;
    align-items: center;
    gap: 26px;
    color: var(--stage-text);
    transition: --deck 0.35s ease;
}

.deck-turntable {
    flex: none;
    width: 206px;
    height: auto;
    overflow: hidden;
}

/* Changing records (deck.js): both swing on one arc about a point below the deck, the old
   one out to the left as the new one comes in from the right, seen through the deck's
   frame. The new colour comes in all at once. */
.deck-swap { transform-box: view-box; transform-origin: 0px 300px; }
.deck.is-changing { transition: none; }

.deck-vinyl { fill: var(--deck); }
.deck-grooves { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0.18; }
.deck-cue { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.deck-label { fill: var(--ink); }
/* On every kick heard, a ring runs out through the grooves (deck.js). */
.deck-ripple { fill: none; stroke: var(--ink); stroke-width: 4; opacity: 0; }
/* The simpleSoundbank logo on the label, in the block's colour, inside a thin ring. */
.deck-logo { fill: var(--deck); }
.deck-label-ring { fill: none; stroke: var(--deck); stroke-width: 1.5; opacity: 0.45; }
.deck-arm-tube { fill: none; stroke: var(--stage-text); stroke-width: 4; stroke-linecap: round; }
.deck-arm-head { fill: none; stroke: var(--stage-text); stroke-width: 9; stroke-linecap: round; }
.deck-arm-base { fill: var(--stage); stroke: var(--stage-text); stroke-width: 4; }

.deck-readout {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 190px;
}

/* The pattern's name, on up to two lines. */
.deck-name {
    display: -webkit-box;
    min-height: 2.4em;
    margin: 0;
    overflow: hidden;
    color: var(--deck);
    font: 900 0.78rem/1.2 var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.deck:not(.is-playing) .deck-name { color: var(--stage-muted); }

.deck-now {
    min-height: 2.5em;
    margin: 4px 0 0;
    color: var(--stage-copy);
    font: 600 0.98rem/1.25 var(--font-body);
}

.deck-speed {
    margin: 12px 0 0;
    font: 800 2.5rem/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* The sound from bass to treble, as a row of flat bars that jump with it (deck.js); a row
   of dim lights at rest. */
.deck-meter {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 32px;
    margin-top: 2px;
}

.deck-meter i {
    flex: 1 1 0;
    height: 6px;
    border-radius: 3px;
    background: rgba(242, 239, 232, 0.1);
}

.deck-meter i.is-lit { background: var(--deck); }

/* The plugin's lane, with the blocks side by side on it. The one playing opens out to
   show its whole bar, and the others make room (--per-row tells slices.js how many share
   a row). */
.slice-row {
    --per-row: 8;
    --open: 0.4s cubic-bezier(0.22, 0.8, 0.24, 1);
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--stage-edge);
    border-radius: 16px;
    background: #0e0f12;
    list-style: none;
}

.slice {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow var(--open), flex-basis var(--open);
}

.slice.is-open { flex-grow: 2.6; }
.slice.is-beside .slice-button { --side: 10px; }

.slice-button {
    --side: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 340px;
    padding: 14px var(--side) 12px;
    border: 0;
    border-radius: 10px;
    background: var(--mode);
    color: var(--ink);
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.slice-button:hover { filter: brightness(1.07); }
.slice-button:active { transform: translateY(1px); }

/* The block's name and setting, as the plugin labels a block. */
.slice-label {
    font: 900 0.8rem/1.1 var(--font-display);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.slice-label small {
    display: block;
    margin-top: 4px;
    font: 600 0.95rem/1.15 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
}

/* The slice's bar, made by scripts/make_simplestutter_slices.mjs. Shut, it shows where in
   the music the blocks play, edge to edge. Open, it's the whole bar: the drawing moves over
   to the part the blocks take up (--from to --to), the part before is marked as playing in
   time, and the beats show under it, so the playhead is seen crossing the bar in time and
   then the blocks. */
.slice-bar {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 70px;
    margin: 12px 0;
}

.slice-curve {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 22px);
    overflow: visible;
    fill: none;
    stroke: var(--ink);
    stroke-width: 4;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 3;
}

.slice-curve path { vector-effect: non-scaling-stroke; }
/* The custom curve's points: small squares. */
.slice-curve .slice-dots { stroke-width: 10; stroke-linecap: square; }

.slice.is-open .slice-bar { min-height: 130px; }

.slice.is-open .slice-curve {
    left: calc(var(--from, 0) * 100%);
    width: calc((var(--to, 1) - var(--from, 0)) * 100%);
}

/* The bar before the blocks: the loop as it is, a level line across the middle. */
.slice-plain {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    width: calc(var(--from, 0) * 100% - 8px);
    height: calc((100% - 22px) / 2);
    padding-bottom: 7px;
    border-bottom: 2px dashed rgba(18, 19, 23, 0.4);
    box-sizing: border-box;
    font: 700 0.66rem/1 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
}

/* The beats, numbered as the plugin's grid does, with a line at each one. */
.slice-beats {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 16px;
    font: 700 0.7rem/16px var(--font-body);
    opacity: 0;
}

.slice-beats b {
    padding-left: 5px;
    border-left: 1px solid rgba(18, 19, 23, 0.45);
}

/* The beat the playhead is in. */
.slice-beats b.is-now {
    border-left-color: var(--ink);
    background: var(--ink);
    color: var(--mode);
}

.slice-plain,
.slice-beats { transition: opacity 0.2s ease; }

.slice-curve { transition: left var(--open), width var(--open); }

.slice.is-open .slice-plain { opacity: 0.75; transition-delay: 0.15s; }
.slice.is-open .slice-beats { opacity: 0.7; transition-delay: 0.15s; }

.slice-text {
    font: 500 0.86rem/1.38 var(--font-body);
}

.slice-hear {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font: 700 0.84rem/1 var(--font-body);
}

/* A round button: play, pause while it plays, and play again to carry on. */
.slice-hear::before {
    content: "";
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
}

.slice-hear::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent var(--mode);
    transform: translateY(-50%);
}

.slice-hear-pause,
.slice-hear-resume,
.slice-button.is-playing .slice-hear-play,
.slice-button.is-paused .slice-hear-play { display: none; }
.slice-button.is-playing .slice-hear-pause,
.slice-button.is-paused .slice-hear-resume { display: inline; }

.slice-button.is-playing .slice-hear::after {
    left: 9px;
    width: 8px;
    height: 9px;
    border: 0;
    background: linear-gradient(to right, var(--mode) 0 3px, transparent 3px 5px, var(--mode) 5px);
}

/* While it plays, a playhead crosses the whole bar in time with the sound. Paused, it stays
   where it stopped. */
.slice-head {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--side) + var(--progress, 0) * (100% - 2 * var(--side)));
    width: 2px;
    margin-left: -1px;
    background: var(--ink);
    opacity: 0;
    pointer-events: none;
}

.slice.is-open .slice-head { opacity: 0.85; }

/* Lighter while the bar plays in time, before the blocks. */
.slice.is-open .is-waiting .slice-head { opacity: 0.4; }

.slice-button.is-playing {
    outline: 3px solid var(--stage-text);
    outline-offset: 2px;
}

/* ── A pattern lane across the page between sections ── */
.step-strip {
    height: 34px;
    background: url("./assets/strip.svg") 0 50% / auto 34px repeat-x, var(--stage);
}

.stutter-section + .step-strip { margin-top: 92px; }

/* ── Sections ── */
.stutter-section,
.stutter-download {
    width: min(calc(100% - 32px), var(--max-w));
    margin: 0 auto;
    padding-top: 92px;
}

.section-head {
    max-width: 680px;
    margin-bottom: 36px;
}

.section-head h2 {
    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
}

/* The small label over each section's heading. */
.slot-label {
    margin: 0 0 16px;
    color: var(--muted);
    font: 700 0.76rem/1 var(--font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* How it works: three steps, each numbered on a block. */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step-block {
    display: grid;
    place-items: center;
    width: 68px;
    height: 42px;
    border-radius: 8px;
    background: var(--mode);
    color: var(--ink);
    font: 900 1.1rem/1 var(--font-display);
}

.step h3 {
    margin-top: 20px;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.25;
}

.step p,
.faq-card p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

.section-head .section-text {
    margin: 14px 0 0;
    color: var(--muted);
}

/* Screenshots of the plugin on its dark panel, with tabs like its tools row: the picked one
   fills with its colour. main.js shows and hides the figures. */
.shots {
    padding: 12px;
    border: 1px solid var(--stage-edge);
    border-radius: 18px;
    background: var(--stage-panel);
    color: var(--stage-text);
}

.shots-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--stage);
}

.shots-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    padding: 11px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--stage-text);
    font: 600 0.92rem/1.15 var(--font-body);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.shots-tab::before {
    content: "";
    flex: none;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--mode);
}

.shots-tab:hover { background: var(--stage-raised); }

.shots-tab[aria-selected="true"] {
    background: var(--mode);
    color: var(--ink);
}

.shots-tab[aria-selected="true"]::before { background: var(--ink); }

.shots-tab:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.shot { margin: 12px 0 0; }

.shot[hidden] { display: none; }

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--stage-edge);
    border-radius: 10px;
}

.shot figcaption {
    padding: 16px 8px 6px;
}

.shot figcaption p {
    max-width: 66ch;
    margin: 0;
    color: var(--stage-copy);
    font-size: 0.96rem;
    line-height: 1.55;
}

/* Download, beside the price. */
.download-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 40px;
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}

.download-copy h2 {
    font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
    font-weight: 800;
    line-height: 1.1;
}

.download-copy > p:not(.slot-label) {
    margin: 12px 0 0;
    color: var(--muted);
}

.download-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
}

.download-copy .download-small {
    margin-top: 22px;
    font-size: 0.85rem;
}

.download-copy .download-small + .download-small {
    margin-top: 6px;
}

.download-small a,
.steps-manual a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The pointer to the PDF manuals under "How to use it." */
.steps-manual {
    margin: 32px 0 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

.price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    border: 1px solid var(--stage-edge);
    border-radius: 14px;
    background: var(--stage-panel);
    color: var(--stage-text);
}

.price-icon {
    display: block;
    width: 76px;
    height: 76px;
}

.price-amount {
    margin: 20px 0 0;
    font: 900 2.9rem/1 var(--font-display);
    letter-spacing: -0.03em;
}

.price-pence { font-size: 0.55em; }

.price-subscriber[hidden] { display: none; }

/* The email list's 50% off, shown only to people from the launch email's link (launch.js). */
.price-subscriber {
    margin: 8px 0 0;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 700;
}

.price-desc {
    margin: 12px 0 0;
    color: var(--stage-copy);
    font-size: 0.95rem;
    line-height: 1.5;
}

.price-button {
    width: 100%;
    margin-top: auto;
}

.price-desc + .price-button { margin-top: 22px; }

.price-small {
    margin: 12px 0 0;
    color: var(--stage-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Questions. */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 44px;
}

.faq-card {
    padding: 22px 0 24px;
    border-top: 1px solid var(--rule);
}

.faq-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}

.faq-more {
    margin: 12px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.98rem;
}

/* ── The record at the bottom right ──
   Pops out once the button playing has scrolled away (slices.js), turning with the deck in
   the block's colour; pressed, it pauses the music, and again carries it on. Flat, like the
   deck: the record itself, with a pause or play mark on its label. */
.mini-deck {
    --deck: var(--stage-line);
    position: fixed;
    right: 20px;
    /* Above the analytics consent bar while it's showing (main.js sets the space). */
    bottom: calc(20px + var(--consent-bar-space, 0px));
    z-index: 50;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    visibility: hidden;
    transform: translateY(calc(100% + 28px)) rotate(-120deg);
    transition: transform 0.3s cubic-bezier(0.5, 0, 0.75, 0), visibility 0s linear 0.3s, --deck 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}

.mini-deck[hidden] { display: none; }

.mini-deck.is-out {
    visibility: visible;
    transform: none;
    transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.5, 1), visibility 0s, --deck 0.35s ease;
}

.mini-deck:focus-visible {
    outline: 3px solid var(--deck);
    outline-offset: 4px;
}

.mini-deck-record {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.15s ease;
}

.mini-deck:hover .mini-deck-record { transform: scale(1.06); }
.mini-deck:active .mini-deck-record { transform: scale(0.94); }

.mini-deck-pause,
.mini-deck-play { fill: var(--deck); }
.mini-deck-play,
.mini-deck.is-paused .mini-deck-pause { display: none; }
.mini-deck.is-paused .mini-deck-play { display: inline; }

@media (prefers-reduced-motion: reduce) {
    .mini-deck,
    .mini-deck.is-out { transform: none; }
    .mini-deck { opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
    .mini-deck.is-out { opacity: 1; transition: opacity 0.2s ease, visibility 0s; }
}

/* ── Narrower screens ── */
@media (max-width: 900px) {
    .slices-top { grid-template-columns: minmax(0, 1fr); }
    .deck { max-width: 520px; }
    /* Four to a row: the open one takes 40% of its row, the rest of the row 20% each. */
    .slice-row { --per-row: 4; flex-wrap: wrap; }
    .slice { flex: 1 1 calc(25% - 6px); }
    .slice.is-open { flex-grow: 1; flex-basis: calc(40% - 6px); }
    .slice.is-beside { flex-basis: calc(20% - 6px); }
    .slice-button { min-height: 300px; }
    .download-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 760px) {
    .steps,
    .faq-grid { grid-template-columns: minmax(0, 1fr); }
    .steps { gap: 36px; }
}

@media (max-width: 640px) {
    .mini-deck {
        right: 16px;
        bottom: calc(16px + var(--consent-bar-space, 0px));
        width: 60px;
        height: 60px;
    }

    body { font-size: 16px; }
    .slices { padding-bottom: 64px; }
    /* Two to a row: the open one takes the whole row, and the one beside it goes under it,
       across the row too. */
    .slice-row { --per-row: 2; }
    .deck { gap: 18px; }
    .deck-turntable { width: 150px; }
    .deck-speed { font-size: 1.9rem; }
    .slice { flex-basis: calc(50% - 3px); transition: none; }
    .slice.is-open,
    .slice.is-beside { flex-basis: 100%; }
    .slice.is-beside,
    .slice.is-after { order: 1; }
    .slice-button { min-height: 250px; }
    main { padding-bottom: 72px; }
    .stutter-wordmark { height: 46px; }
    .stutter-section,
    .stutter-download { padding-top: 64px; }
    .stutter-section + .step-strip { margin-top: 64px; }
    .hero-actions > * { flex: 1 1 100%; }
    .hero-actions .button { width: 100%; }
    .other-downloads-panel { position: static; margin-top: 10px; }
    .download-inner { padding: 24px 20px 26px; }
    .download-actions > * { flex: 1 1 100%; }
    .download-actions .button { width: 100%; }
    .price-box { padding: 24px 20px; }
}

@media (max-width: 520px) {
    .shots { padding: 8px; border-radius: 14px; }
    .shots-tab {
        flex-direction: column;
        gap: 8px;
        padding: 10px 2px 9px;
        font-size: 0.8rem;
    }
    .shot { margin-top: 8px; }
    .shot img { border-radius: 8px; }
    .shot figcaption {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 6px 6px;
    }
}