/* Circus Audio, the show zine. Each section is a sheet of coloured stock; midnight is the ink,
   printed over the stock (multiply), with a second ink a few pixels off register. Tone comes from
   halftone dots only, never from grey. */

:root {
  --flamingo: #F0487E;
  --midnight: #4B2A55;
  --cream: #FFF4DC;
  --butter: #F6C84B;
  --sky: #5FB0DE;

  --ink: var(--midnight);
  /* midnight taken darker, for running text on flamingo stock (about 5:1) */
  --ink-deep: #2B1231;
  --gap: clamp(8px, 1vw, 14px);
  --pad-x: clamp(20px, 6vw, 104px);
  --pad-y: clamp(40px, 5vw, 72px);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-script: "Yellowtail", "Brush Script MT", cursive;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  background: var(--midnight);
  scroll-behavior: smooth;
  overflow-x: clip;
  scrollbar-color: var(--flamingo) var(--midnight);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: var(--gap) 0 0;
  color: var(--ink);
  background: var(--midnight);
  font-family: var(--f-text);
  font-size: clamp(17px, 1.05vw + 12px, 20px);
  line-height: 1.5;
  font-variation-settings: "wdth" 100;
  caret-color: var(--flamingo);
}

::selection { background: var(--midnight); color: var(--butter); }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--midnight); outline-offset: 3px; }
.sheet--midnight :focus-visible { outline-color: var(--butter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Sheets ---------- */

.sheet {
  --stock: var(--cream);
  --ink-2: var(--flamingo);
  position: relative;
  isolation: isolate;
  margin: 0 var(--gap) var(--gap);
  padding: var(--pad-y) var(--pad-x);
  background: var(--stock);
  color: var(--ink);
  overflow: hidden;
}

/* The stock's fibre and a light halftone screen of the ink, printed over it. */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .16 0 0 0 0 .33 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle, var(--midnight) 0 0.9px, transparent 1.2px);
  background-size: 220px 220px, 6px 6px;
  mix-blend-mode: multiply;
  opacity: 0.075;
}

.sheet--flamingo { --stock: var(--flamingo); --ink: var(--ink-deep); --ink-2: var(--sky); }
.sheet--sky { --stock: var(--sky); --ink-2: var(--flamingo); }
.sheet--butter { --stock: var(--butter); --ink-2: var(--flamingo); }
.sheet--cream { --stock: var(--cream); --ink-2: var(--flamingo); }
.sheet--midnight { --stock: var(--midnight); --ink: var(--cream); --ink-2: var(--flamingo); color: var(--cream); }
.sheet--midnight::before { mix-blend-mode: screen; opacity: 0.08; }

/* ---------- Type ---------- */

.display {
  margin: 0 0 0.45em;
  font-family: var(--f-display);
  font-weight: var(--wght, 800);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-wrap: balance;
  mix-blend-mode: multiply;
  /* the second ink, printed a hair off register */
  text-shadow: 0.05em 0.035em 0 color-mix(in srgb, var(--ink-2) 88%, transparent);
}
.sheet--midnight .display { mix-blend-mode: normal; }
.sheet--flamingo .display { color: var(--midnight); mix-blend-mode: normal; text-shadow: 0.05em 0.035em 0 var(--sky); }

.ink-2 { color: var(--ink-2); text-shadow: none; mix-blend-mode: multiply; }
/* The main message's second sentence: the same ink, set smaller in Archivo so the long line reads
   as the answer to the headline rather than a second headline. */
.headline__more {
  display: block;
  margin-top: 0.45em;
  font-family: var(--f-text);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: 0.47em;
  line-height: 1.15;
  letter-spacing: 0;
  max-width: 24ch;
  text-wrap: balance;
}

.measure { max-width: 62ch; margin: 0; }
p { text-wrap: pretty; }

.text-link {
  font-weight: 800;
  font-size: 0.95em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
}

/* Not decided yet: visible in the preview so nothing ships by accident. */
.need {
  display: inline;
  padding: 0.05em 0.35em;
  border: 2px dashed currentColor;
  border-radius: 2px;
  font-weight: 700;
  font-size: 0.86em;
  letter-spacing: 0.01em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.need::before { content: "NEED: "; font-weight: 900; letter-spacing: 0.08em; }
.need--dark { color: var(--butter); }

/* ---------- Controls ---------- */

.button {
  appearance: none;
  border: 3px solid var(--midnight);
  background: var(--midnight);
  color: var(--cream);
  padding: 0.95em 1.5em;
  font: 800 0.85rem/1 var(--f-text);
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.button:hover { background: var(--ink-2); color: var(--ink-deep); border-color: var(--ink-deep); }
.button:active { transform: translateY(1px); }
.button[disabled] { opacity: 0.55; cursor: progress; }

.signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 34rem;
  margin: 2rem 0 1rem;
}
.signup__input {
  min-width: 0;
  border: 3px solid var(--midnight);
  border-right: 0;
  background: var(--cream);
  color: var(--midnight);
  padding: 0.9em 1em;
  font: 500 1rem/1.2 var(--f-text);
}
.signup__input::placeholder { color: color-mix(in srgb, var(--midnight) 82%, var(--cream)); }
.signup__input:focus-visible { outline-offset: 0; }
.signup__status { grid-column: 1 / -1; margin: 0.6rem 0 0; font-size: 0.9rem; font-weight: 600; min-height: 1.4em; }

/* ---------- Plates: the pedals, tipped in as photos ---------- */

.plate {
  --r: -2deg;
  --border: clamp(8px, 0.9vw, 14px);
  position: relative;
  margin: 0;
  transform: rotate(var(--r));
}
.plate img, .plate__video { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--border) solid var(--cream); background: var(--midnight); }

/* Plates and the bench share the print's depth: a flat halftone shadow, then a wire staple. */
.plate::before, .bench__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  translate: 0.9rem 1rem;
  background: radial-gradient(circle, var(--midnight) 0 1.4px, transparent 1.7px) 0 0 / 5px 5px;
  opacity: 0.7;
  pointer-events: none;
}
.plate::after, .bench__frame::after {
  content: "";
  position: absolute;
  top: calc(var(--border) * 0.5 - 0.15rem);
  left: 50%;
  width: 2.8rem;
  height: 0.3rem;
  translate: -50% 0;
  border-radius: 0.15rem;
  background: var(--midnight);
  box-shadow: 0 0.16rem 0 color-mix(in srgb, var(--cream) 60%, transparent);
  z-index: 2;
  pointer-events: none;
}
.plate__note {
  position: absolute;
  right: 0.6em;
  bottom: -1.15em;
  font-family: var(--f-script);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  color: var(--midnight);
  transform: rotate(-4deg);
}

/* ---------- Hero ---------- */

.hero { padding-top: clamp(20px, 2.4vw, 32px); padding-bottom: clamp(28px, 2.4vw, 40px); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(24px, 2.8vw, 44px);
}
.nav__logo img { width: clamp(150px, 15vw, 220px); }
.nav__links {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
}
.nav__links a { text-decoration: none; white-space: nowrap; }
.nav__links a:hover { text-decoration: underline; }

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.hero__title {
  font-size: clamp(2.8rem, 5.4vw, 5.2rem);
  margin-bottom: 0.4em;
  /* The flamingo is a flood ink on cream paper: line one is printed midnight, line two is knocked
     out to the paper (about 3:1, fine for type this large), and the sky drum lands off register. */
  mix-blend-mode: normal;
  color: var(--midnight);
  text-shadow: 0.05em 0.035em 0 var(--sky);
}
.hero__title .ink-2 { display: block; color: var(--cream); mix-blend-mode: normal; text-shadow: 0.05em 0.035em 0 var(--sky); }
.hero__sub { max-width: 36rem; margin: 0; font-size: 1.05em; font-weight: 500; }

.plate--hero { --r: 0deg; }
.plate--hero .plate__note { bottom: -1.25em; }
.hero__need { margin: 2.4rem 0 0; font-size: 0.85rem; }

/* ---------- Play ---------- */

.play__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.play__title { margin: 0; transition: font-weight 90ms linear; }

.bench__transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}
.bench__play { min-width: 7.5rem; }
.bench__play[aria-pressed="true"] { background: var(--flamingo); color: var(--ink-deep); }

.bench__loops {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bench__loops label { position: relative; cursor: pointer; }
.bench__loops input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bench__loops span {
  display: block;
  padding: 0.7em 1em;
  margin-right: -3px;
  border: 3px solid var(--midnight);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
}
.bench__loops input:checked + span { background: var(--midnight); color: var(--sky); }
.bench__loops input:focus-visible + span { outline: 3px solid var(--midnight); outline-offset: 3px; }
.bench__file span { border-style: dashed; margin-left: 0.75rem; }
.bench__status { margin: 0; font-size: 0.88rem; font-weight: 600; }

.bench__frame {
  --border: clamp(8px, 0.9vw, 14px);
  position: relative;
  isolation: isolate;
  aspect-ratio: 2000 / 1240;
}
/* The Magician's window is 4:3: a machine, not a pedal. */
.bench__frame--machine { aspect-ratio: 2000 / 1500; max-width: 1200px; margin-inline: auto; }
.bench__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: var(--border) solid var(--cream); background: var(--midnight); }

/* On phones the window is too small to play by hand: WEIGHT and CLASS sit under it as well. */
.bench__pocket { display: none; }
.bench__weight { display: grid; gap: 0.5rem; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.14em; font-variation-settings: "wdth" 88; }
.bench__weight span { display: flex; justify-content: space-between; }
.bench__weight output { font-variant-numeric: tabular-nums; }
.bench__weight input { width: 100%; accent-color: var(--midnight); height: 2.25rem; }
.bench__class { display: flex; margin: 1rem 0 0; padding: 0; border: 0; }
.bench__class legend { font-weight: 900; font-size: 0.8rem; letter-spacing: 0.14em; margin-bottom: 0.5rem; }
.bench__class label { position: relative; flex: 1; }
.bench__class input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bench__class span { display: block; text-align: center; padding: 0.8em; margin-right: -3px; border: 3px solid var(--midnight); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-variation-settings: "wdth" 88; }
.bench__class input:checked + span { background: var(--midnight); color: var(--sky); }
.bench__class input:focus-visible + span { outline: 3px solid var(--midnight); outline-offset: 3px; }
.bench__note { margin: 1rem 0 0; font-size: 0.92rem; font-weight: 600; }
.bench__more { margin: 1.4rem 0 0; }

/* The Try it page */
.try-hero { padding-top: clamp(20px, 2vw, 28px); padding-bottom: clamp(24px, 2.4vw, 36px); }
.try-hero .nav { margin-bottom: 0; }
.try-hero__body { max-width: 72rem; padding-top: clamp(8px, 1vw, 16px); }
.try-hero__body .display { margin-bottom: 0.25em; font-size: clamp(2rem, 3.8vw, 3.4rem); }
.try-hero .hero__sub { max-width: 80ch; font-size: 1rem; }
.try-hero__links { display: flex; gap: 1.6rem; margin: 0.9rem 0 0; }
.try__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(24px, 3vw, 40px); }
.try__buy .price-tag { margin: 0; }
.play--machine .display, .play--machine .measure { color: var(--cream); }
.play--machine .bench__play { background: var(--flamingo); color: var(--ink-deep); border-color: var(--flamingo); }
.play--machine .bench__play[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); }
.play--machine .bench__loops span { border-color: var(--cream); color: var(--cream); }
.play--machine .bench__loops input:checked + span { background: var(--cream); color: var(--midnight); }
.play--machine .bench__status, .play--machine .bench__note, .play--machine .price-tag { color: var(--cream); }
.play--machine .bench__class span { border-color: var(--cream); color: var(--cream); }
.play--machine .bench__class input:checked + span { background: var(--cream); color: var(--midnight); }
.play--machine .bench__weight { color: var(--cream); }
.play--machine .bench__weight input { accent-color: var(--flamingo); }
.try-trial .hero__actions { margin-top: 1.6rem; }

/* ---------- Shared bits ---------- */

.kicker {
  margin: 0 0 0.8rem;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
}

.button { display: inline-block; text-decoration: none; text-align: center; }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.sheet--flamingo .button--ghost { color: var(--ink-deep); border-color: var(--ink-deep); }
.sheet--flamingo .button:hover { background: var(--sky); color: var(--ink-deep); border-color: var(--ink-deep); }
.button--small { padding: 0.7em 1.1em; font-size: 0.75rem; }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

.price-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; margin: 0.9rem 0 0; }
.price-tag__now { font-family: var(--f-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: 1.3em; line-height: 1; }
.price-tag__then { font-size: 0.82rem; font-weight: 600; }
.price-tag--big .price-tag__now { font-size: clamp(2rem, 3.2vw, 2.8rem); }

.clip__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  padding-left: 0.25rem;
  border-radius: 50%;
  background: var(--flamingo);
  color: var(--ink-deep);
  font-size: 1.2rem;
  pointer-events: none;
}

/* ---------- Shelf: the plugin cards, a row that scrolls sideways ---------- */

.shelf__head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(16px, 2vw, 28px); }
.shelf__head .display { margin: 0; }
.shelf__arrows { display: flex; gap: 0.6rem; }
.arrow {
  appearance: none;
  width: 3.2rem;
  height: 3.2rem;
  border: 3px solid var(--midnight);
  background: transparent;
  color: var(--midnight);
  font: 800 1.2rem/1 var(--f-text);
  cursor: pointer;
}
.arrow:hover { background: var(--midnight); color: var(--cream); }

.shelf__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 27vw, 380px);
  gap: clamp(28px, 3vw, 48px);
  margin: 0 calc(var(--pad-x) * -1);
  padding: 1.75rem var(--pad-x) 2.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-x);
  scrollbar-color: var(--midnight) transparent;
}
.shelf__track:focus-visible { outline-offset: -3px; }

.card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; }
.card .plate { --r: inherit; }
.card__link { display: block; text-decoration: none; }
.card__link:hover .card__name { text-decoration: underline; text-decoration-thickness: 3px; }
.card__link .plate { transition: transform 220ms var(--ease-out); }
.card__link:hover .plate { transform: rotate(0deg) translateY(-4px); }
.card__kind {
  display: block;
  margin-top: 1.3rem;
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
  color: var(--ink-2);
  mix-blend-mode: multiply;
}
.card__name {
  margin: 0.25rem 0 0.35rem;
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 800;
  font-size: clamp(1.4rem, 1.9vw, 1.9rem);
  line-height: 1.05;
}
.card__line { margin: 0; max-width: 32ch; }
.card .price-tag { margin-top: auto; padding-top: 0.9rem; }
.card--free .card__blank {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  border: 3px dashed var(--midnight);
  transform: rotate(var(--r));
}
.card--free .card__blank span { font-family: var(--f-script); font-size: clamp(2.6rem, 4vw, 3.6rem); color: var(--flamingo); }

/* ---------- Bundle ---------- */

.bundle { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.bundle .hero__actions { margin-top: 1.2rem; }
.bundle .measure { max-width: 78ch; }

/* ---------- The free plugin: on the home page and its own landing page ---------- */
.free { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.free__art { display: block; }
.plate--free { --r: 1.2deg; }
.free__fine { margin: 0.9rem 0 0; font-size: 0.85rem; font-weight: 600; }
.signup--free { margin-top: 1.4rem; }
.free-hero .signup--free { margin-top: 1.2rem; }
.presets__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.presets__folder ul { margin: 0.6rem 0 0; padding: 0; list-style: none; }
.presets__folder li { padding: 0.32rem 0; border-top: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); font-weight: 500; }
.bundle .display { margin-bottom: 0.25em; font-size: clamp(2rem, 3.8vw, 3.4rem); }
.bundle__price { margin: 0 0 0.8rem; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.bundle__honest { margin: 1rem 0 0; max-width: 60ch; font-size: 0.85rem; font-weight: 600; }
/* The seven on stage, with each name linking to its page. */
.bundle__photo { display: block; }
.bundle__photo img { display: block; width: 100%; height: auto; border: 6px solid var(--cream); rotate: -0.8deg; }
.bundle__names { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.bundle__names a {
  display: block;
  padding: 0.35em 0.75em;
  border: 2px solid var(--ink-deep);
  border-radius: 999px;
  color: var(--ink-deep);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
}
.bundle__names a:hover { background: var(--ink-deep); color: var(--flamingo); }

/* ---------- Videos ---------- */

.videos .display, .film .display { color: var(--cream); }
.videos__main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.clip__frame, .short__frame, .film__frame { position: relative; overflow: hidden; border: var(--border, 10px) solid var(--cream); }
.clip__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.clip__title, .short__by { margin: 0.8rem 0 0; font-weight: 700; font-size: 0.92rem; }
.videos__sub {
  margin: clamp(40px, 5vw, 72px) 0 1rem;
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
  color: var(--butter);
}
.videos__shorts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 17vw, 230px);
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--flamingo) transparent;
}
.short { scroll-snap-align: start; }
.short__frame { --border: 6px; }
.short__frame img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }

/* ---------- Testimonials ---------- */

.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.quote { border-top: 4px solid var(--midnight); padding-top: 1.2rem; }
.quote blockquote { margin: 0; font-family: var(--f-display); font-variation-settings: "SOFT" 100; font-weight: 500; font-size: 1.25em; line-height: 1.3; }
.quote__who { margin: 0.9rem 0 0; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-variation-settings: "wdth" 88; }
.quotes__studios { margin: clamp(32px, 4vw, 56px) 0 0; font-weight: 600; }

/* ---------- DAWs ---------- */

.daws__title { margin: 0 0 1.2rem; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-variation-settings: "wdth" 88; }
.daws__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.4rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1.2;
}
.daws__note { margin: 1.4rem 0 0; font-size: 0.9rem; font-weight: 600; }

/* ---------- Subscribe ---------- */

.subscribe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.subscribe .display { margin: 0; }

/* ---------- Product page ---------- */

.crumbs { margin: 0 0 clamp(20px, 2.4vw, 36px); font-size: 0.85rem; font-weight: 700; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.buy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.buy__art .plate { margin-top: 0.5rem; }
.facts { display: grid; gap: 0.5rem; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; font-size: 0.92rem; font-weight: 500; }
.facts strong, .specs strong { margin-right: 0.5em; font-weight: 900; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-variation-settings: "wdth" 88; }
.buy__name { margin: 0 0 0.25em; font-size: clamp(2.8rem, 5vw, 4.6rem); }
.buy__line { margin: 0 0 1.1rem; font-weight: 800; font-size: 1.08em; }
.buy__short { margin: 0; max-width: 46ch; font-weight: 500; }
.buy__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.4rem 0 1.1rem; }
.addon {
  margin-top: clamp(28px, 3vw, 40px);
  padding: 1.25rem 1.4rem 1.4rem;
  border: 3px solid var(--ink-deep);
  background: color-mix(in srgb, var(--cream) 22%, var(--flamingo));
}
.addon__title { margin: 0 0 0.4rem; }
.addon__title strong { font-family: var(--f-display); font-variation-settings: "SOFT" 100; font-size: 1.35em; margin-right: 0.4em; }
.addon p { margin: 0 0 1rem; font-size: 0.95rem; }

.effects__list, .pedal__list, .specs { margin: 0; padding: 0; list-style: none; }
.effects__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  margin-top: clamp(16px, 2vw, 28px);
}
.effects__list li { padding: 1.1rem 0 1.2rem; border-top: 4px solid var(--midnight); }
.effects__list strong { display: block; font-family: var(--f-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: 1.4em; line-height: 1.1; margin-bottom: 0.3rem; }

.pedal .display { font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: 18ch; }
.pedal__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(24px, 3vw, 40px); }
.pedal__side > p { margin: 0 0 1.2rem; max-width: 46ch; }
.pedal__head { margin: 0 0 0.8rem; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; font-variation-settings: "wdth" 88; }
.pedal__list li { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 0.2rem 1rem; padding: 0.7rem 0; border-top: 3px solid var(--midnight); }
.pedal__list strong { font-weight: 900; font-size: 0.85em; letter-spacing: 0.08em; font-variation-settings: "wdth" 90; }
.feel { margin-top: clamp(40px, 5vw, 72px); max-width: 52rem; }

.film__frame { --border: clamp(8px, 0.9vw, 14px); margin-top: clamp(20px, 3vw, 40px); }
.film__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film__need { margin: 1rem 0 0; }
.film .need, .videos .need { color: var(--butter); }

.overview__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 80px); }
.overview__text p { margin: 0 0 1.1rem; max-width: 62ch; }
.overview__not { padding-top: 1.1rem; border-top: 3px solid var(--midnight); }
.overview__side p { margin: 0 0 1.8rem; }
.specs li { padding: 0.5rem 0; border-top: 3px solid var(--midnight); font-size: 0.95rem; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin: clamp(16px, 2vw, 28px) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; border-top: 4px solid var(--midnight); padding-top: 1rem; }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--f-display); font-variation-settings: "SOFT" 100; font-weight: 900; font-size: 2.6rem; line-height: 1; margin-bottom: 0.6rem; color: var(--ink-2); mix-blend-mode: multiply; }
.steps strong { display: block; margin-bottom: 0.3rem; }
.steps code { font-size: 0.85em; overflow-wrap: anywhere; }
.install__help { margin: clamp(24px, 3vw, 40px) 0 0; font-weight: 600; }

.again { text-align: center; }
.again .display { margin-bottom: 0.2em; }
.again__line { margin: 0; font-weight: 800; }
.again .price-tag, .again .buy__buttons { justify-content: center; }
.again__fine { margin: 0; font-size: 0.88rem; font-weight: 600; }

.faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.faq .display { margin: 0; }
.faq__item { border-top: 3px solid var(--midnight); }
.faq__item:last-child { border-bottom: 3px solid var(--midnight); }
.faq__item summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 800; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-weight: 900; font-size: 1.3em; line-height: 1; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: 0 0 1.2rem; max-width: 60ch; }

/* ---------- Legal ---------- */

/* Page headers carry the nav, so they start as close to the top as the home hero. */
.product-hero, .legal-hero { padding-top: clamp(20px, 2.4vw, 32px); }
.legal-hero .display { margin: 0; }
.legal__who { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); font-size: 0.9rem; font-weight: 600; }
.legal__draft { margin: 1rem 0 0; }
.legal-hero .hero__sub { margin-top: 1.25rem; }
.legal__body p, .legal__body li { margin: 0 0 1rem; }
.legal__body ul { padding-left: 1.2rem; }

/* ---------- Footer ---------- */

.footer {
  margin-bottom: 0;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(32px, 4vw, 64px);
}
.footer__logo { width: clamp(160px, 16vw, 240px); }
.footer__brand p { margin: 1rem 0 0; font-size: 0.92rem; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.footer__cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.9rem; }
.footer__cols a { text-decoration: none; }
.footer__cols a:hover { text-decoration: underline; }
.footer__head { margin: 0 0 0.9rem; font-weight: 900; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-variation-settings: "wdth" 88; color: var(--flamingo); }
.footer__line { grid-column: 1 / -1; margin: 0; padding-top: 1.4rem; border-top: 3px solid color-mix(in srgb, var(--cream) 30%, var(--midnight)); font-size: 0.82rem; font-weight: 500; }

/* ---------- Motion: the second ink drops into register once, as the page loads ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__title .ink-2 { animation: register 900ms var(--ease-out) 120ms both; }
  .plate--hero { animation: tip-in 1100ms var(--ease-out) both; }
}
@keyframes register { from { translate: 0.12em 0.08em; } to { translate: 0 0; } }
@keyframes tip-in { from { transform: rotate(var(--r)) translateY(1.5rem); opacity: 0; } to { transform: rotate(var(--r)); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .play__title { transition: none; }
}

/* ---------- The store: a bundle header over the photo, filters, then a grid of product cards ---------- */

.store-hero { overflow: hidden; padding-top: clamp(20px, 2vw, 28px); padding-bottom: clamp(24px, 2.4vw, 36px); }
.store-hero .nav { margin-bottom: 0; }
.store-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.store-hero__head { text-align: center; padding-top: clamp(8px, 1vw, 16px); }
.store-hero__head .display { margin: 0; font-size: clamp(2rem, 3.8vw, 3.4rem); }
.store-hero__sub { margin: 0.4rem auto 0; max-width: 92ch; font-weight: 700; font-size: clamp(0.92rem, 1.1vw, 1.05rem); }

.offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  max-width: 64rem;
  margin: clamp(16px, 1.8vw, 24px) auto 0;
}
.offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 2vw, 28px);
  background: var(--cream);
  color: var(--ink-deep);
  border: 3px solid var(--ink-deep);
  box-shadow: 0.55rem 0.55rem 0 var(--flamingo);
  text-align: center;
}
.offer--free { box-shadow: 0.55rem 0.55rem 0 var(--butter); }
.offer__flag {
  margin: 0;
  padding: 0.3em 0.8em;
  background: var(--flamingo);
  color: var(--ink-deep);
  border: 2px solid var(--ink-deep);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88;
}
.offer--free .offer__flag { background: var(--butter); }
.offer__name { margin: 0.4rem 0 0; font-family: var(--f-script); font-weight: 400; font-size: clamp(2rem, 2.8vw, 2.6rem); line-height: 1; color: var(--flamingo); }
.offer__ticks { display: grid; grid-template-columns: repeat(2, auto); gap: 0.2rem 1.2rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-weight: 600; font-size: 0.88rem; text-align: left; }
.offer__ticks li::before { content: "✓ "; color: var(--flamingo); font-weight: 900; }
.offer__price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.2rem 0.7rem; margin: auto 0 0; padding-top: 0.7rem; }
.offer__now { font-family: var(--f-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1; }
.offer__then { font-size: 0.85rem; font-weight: 700; }
.offer__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.7rem; }
.offer__buttons .button { padding: 0.75em 1.2em; font-size: 0.75rem; }
.offer .button--ghost { color: var(--ink-deep); border-color: var(--ink-deep); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: clamp(28px, 3vw, 44px); }
.chip {
  appearance: none;
  padding: 0.6em 1.1em;
  border: 3px solid var(--midnight);
  border-radius: 999px;
  background: transparent;
  color: var(--midnight);
  font: 800 0.8rem/1 var(--f-text);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.chip:hover { background: color-mix(in srgb, var(--flamingo) 25%, transparent); }
.chip[aria-pressed="true"] { background: var(--midnight); color: var(--cream); }

.store__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.item {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 3px solid var(--midnight);
  box-shadow: 0.4rem 0.4rem 0 var(--midnight);
}
.item[hidden] { display: none; }
.item__art { display: block; border-bottom: 3px solid var(--midnight); overflow: hidden; background: var(--midnight); }
.item__art img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 300ms var(--ease-out); }
.item:hover .item__art img { transform: scale(1.04); }
.item__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.1rem 1.1rem 1.3rem; }
.item .card__kind { margin-top: 0; }
.item__name { margin: 0.3rem 0 0.35rem; font-family: var(--f-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: clamp(1.3rem, 1.6vw, 1.6rem); line-height: 1.05; }
.item__name a { text-decoration: none; }
.item__name a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.item__line { margin: 0; font-size: 0.92rem; }
.item__price { margin: 0.9rem 0 0; font-family: var(--f-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: 1.35rem; line-height: 1; }
.item__note {
  margin: 0.7rem 0 0;
  padding: 0.5em 0.7em;
  background: var(--butter);
  border: 2px solid var(--midnight);
  box-shadow: 0.2rem 0.2rem 0 var(--midnight);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}
.item__buttons { display: grid; gap: 0.55rem; width: 100%; margin-top: auto; padding-top: 1.2rem; }
.item__buttons .button { padding: 0.8em 1em; font-size: 0.74rem; }
.item__more { align-self: center; margin-top: 0.9rem; font-size: 0.85rem; }
.store__fine { margin: clamp(28px, 3vw, 44px) auto 0; max-width: 70ch; text-align: center; font-size: 0.85rem; font-weight: 600; }

/* ---------- Narrow screens ---------- */

@media (max-width: 1000px) {
  .store__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .effects__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .free { grid-template-columns: 1fr; }
  .free__art { order: -1; }
  .presets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__wide { display: none; }
  .hero__body, .play__head, .bundle, .subscribe, .buy, .pedal__cols, .overview__body, .faq { grid-template-columns: minmax(0, 1fr); }
  .plate--hero { width: min(100%, 36rem); margin: 0.5rem auto 1.5rem; }
  .videos__main, .quotes__grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf__arrows { display: none; }
  .shelf__track { grid-auto-columns: min(78vw, 320px); }
  .offers { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
  .store__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .bench__pocket { display: block; margin-top: 1.4rem; }
  .bench__frame { margin-inline: calc(var(--pad-x) * -0.6); }
  .effects__list { grid-template-columns: minmax(0, 1fr); }
  .pedal__list li { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .store__grid { grid-template-columns: minmax(0, 1fr); }
  .offer__ticks { grid-template-columns: minmax(0, 1fr); }
  .signup { grid-template-columns: minmax(0, 1fr); }
  .signup__input { border-right: 3px solid var(--midnight); border-bottom: 0; }
  .bench__file span { margin-left: 0; margin-top: 0.5rem; }
  .buy__buttons .button { flex: 1 1 100%; }
}


/* ---------- Lid loop: the product's pedal opening on the controls inside ---------- */

/* Laid out in the plugin window's design space (--space, 2000 x 1240 for the pedals), in percentages
   of it, so it scales with the plate. One cycle: closed 5 s, opens in 0.28 s, open 5 s, closes in
   0.42 s. Each bay is a lid over its compartment; shaped bays (Magician Tape's hatches)
   are cut to --poly and show a still of the open window through it.
   The lid folds up to its hinge in 2D rather than turning in 3D: Safari blends a 3D lid with the
   compartment under it. The compartment is hidden while the lid is shut, so nothing shows through. */
.lid-loop { --cycle: 10.7s; }
.lid-loop__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--space, 2000 / 1240);
  border: var(--border) solid var(--cream);
  background: var(--stage) 0 0 / 100% 100%, var(--midnight);
}
.lid-loop__bay {
  position: absolute;
  left: var(--lid-x);
  top: var(--lid-y);
  width: var(--lid-w);
  height: var(--lid-h);
}
.lid-loop__inside, .lid-loop__lid { position: absolute; inset: 0; }
.lid-loop__inside {
  opacity: 0;
  background: var(--inside) 0 0 / 100% 100%;
  box-shadow: inset 0 0.9cqw 1.1cqw rgb(0 0 0 / 0.75), inset 0 -0.3cqw 0.5cqw rgb(0 0 0 / 0.5),
              inset 0.5cqw 0 0.7cqw rgb(0 0 0 / 0.55), inset -0.5cqw 0 0.7cqw rgb(0 0 0 / 0.55);
}
.lid-loop__lid {
  transform-origin: 50% 0;
  background: var(--latches,) var(--stage) var(--face-pos) / var(--face-size);
  box-shadow: 0 0 0 0.1cqw rgb(18 7 3 / 0.85), inset 0 0.1cqw 0 rgb(255 235 200 / 0.32), inset 0 -0.1cqw 0.1cqw rgb(0 0 0 / 0.45);
}
.lid-loop--shaped .lid-loop__inside { background: var(--inside) var(--face-pos) / var(--face-size); clip-path: var(--poly); box-shadow: none; }
.lid-loop--shaped .lid-loop__lid { clip-path: var(--poly); box-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Started 3.5 s into the cycle, so the first opening comes 1.5 s after the page loads. */
  .lid-loop__lid { animation: lid-loop var(--cycle) -3.5s infinite; }
  .lid-loop__inside { animation: lid-inside var(--cycle) -3.5s infinite; }
}
/* Opening eases out and fades the lid as it folds away, like the plugin; closing eases in and out.
   The height follows the cosine of the plugin's lid angle. */
@keyframes lid-loop {
  0%, 46.72% { transform: scaleY(1); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  47.78% { transform: scaleY(0.34); opacity: 0.45; animation-timing-function: cubic-bezier(0.3, 0.7, 0.5, 1); }
  49.35%, 96.07% { transform: scaleY(0); opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  98.04% { transform: scaleY(0.64); opacity: 0.6; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes lid-inside {
  0%, 46.71% { opacity: 0; }
  46.73%, 99.98% { opacity: 1; }
  100% { opacity: 0; }
}