/* ============================================================
   Pedal Builder product site — dark glass edition.
   The material system is lifted straight from the plugin UI
   (Resources/WebUI): near-black base over the blurred studio
   backdrop, panels of rgba-white glass with hairline borders,
   inset top highlights and backdrop blur, and the factory
   colourway presets for everything colourful.

   The centrepiece is the builder: a sticky stage on which the
   pedal is assembled while the visitor walks the same steps as
   the plugin's new-pedal wizard.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kirang Haerang";
  src: url("../assets/fonts/KirangHaerang-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg-a: #1d1f20;
  --bg-b: #111114;
  --text: #F3F3F4;
  --muted: #A9AAAE;
  --faint: #7C7D82;
  --hairline: rgba(255, 255, 255, .09);
  --glass-bg: rgba(255, 255, 255, .045);
  --glass-bg-strong: rgba(255, 255, 255, .075);
  --glass-border: rgba(255, 255, 255, .11);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .045);
  --glass-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  --amber: #D08A4C;
  --radius: 30px;
  --pad: clamp(20px, 5vw, 84px);
  --bundle: 1320px;
  --gutter: calc(max(0px, (100% - var(--bundle)) / 2) + var(--pad));
  --header-h: 62px;
  --subbar-h: 52px;
  /* Combined height of both fixed bars. Anything that centres itself in the
     viewport has to subtract this, or it ends up underneath them. */
  --chrome-h: calc(var(--header-real-h, var(--header-h)) + var(--subbar-h));
}

* { box-sizing: border-box; margin: 0; }

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(145deg, var(--bg-a) 0%, var(--bg-b) 100%);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* The plugin's studio backdrop, pinned behind everything with the
   same dark wash the plugin lays over it. position:fixed instead of
   background-attachment so mobile browsers keep it steady too. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(17, 17, 20, .78) 0%, rgba(17, 17, 20, .6) 40%, rgba(17, 17, 20, .82) 100%),
    url("../assets/bg.jpg") center 30% / cover no-repeat,
    linear-gradient(145deg, var(--bg-a) 0%, var(--bg-b) 100%);
}

img { max-width: 100%; }
a { color: inherit; }

button, input, select, textarea { max-width: 100%; }
.builder > *, .product-tile > *, .bstep-card, .product-copy { min-width: 0; }

:where(a, button, input, [role="slider"]):focus-visible {
  outline: 2px solid rgba(242, 240, 235, .82);
  outline-offset: 4px;
}

::selection { background: rgba(208, 138, 76, .4); }

/* ---------- type ---------- */

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 { font-size: clamp(52px, 9vw, 128px); font-weight: 760; }
h2 { font-size: clamp(30px, 4vw, 52px); }
h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; }

h1 em, h2 em {
  font-style: normal;
  color: var(--amber);
}

p { max-width: 56ch; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .6;
  flex: none;
}

.lede {
  margin-top: 28px;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}

.imagine-tone3000 {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  margin-top: 24px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  color: var(--faint);
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    rgba(12,12,14,.34);
  box-shadow: var(--glass-inset);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.imagine-tone3000:hover {
  border-color: rgba(255,255,255,.2);
  background-color: rgba(255,255,255,.055);
  transform: translateY(-2px);
}

.imagine-tone3000 span {
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .16em;
  white-space: nowrap;
}

.imagine-tone3000 img {
  width: clamp(112px, 11vw, 142px);
  height: auto;
}

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid #F2F0EB;
  border-radius: 999px;
  background: #F2F0EB;
  color: #1E2020;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(.22,.75,.25,1), box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
}

.button:active { transform: translateY(0); }

/* Ghost buttons are plugin glass: faint fill, hairline, blur. */
.button-ghost {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text);
  box-shadow: var(--glass-inset);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.button-ghost:hover {
  background: var(--glass-bg-strong);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: var(--glass-inset);
}

.button-light {
  background: #F2F0EB;
  border-color: #F2F0EB;
  color: #1E2020;
}

.button-small { padding: 9px 20px; font-size: 13px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.button-download-pedal {
  border-color: rgba(233, 161, 95, .55);
  background: linear-gradient(135deg, #F0B172, #D98949);
  box-shadow: 0 12px 32px rgba(217, 137, 73, .16);
  color: #181513;
  cursor: pointer;
}

.button-download-pedal:hover {
  border-color: rgba(255, 214, 174, .75);
  background: linear-gradient(135deg, #F5BC82, #E39553);
}

.button-download-pedal:disabled {
  cursor: wait;
  opacity: .68;
}

.button-download-pedal span {
  margin-left: 8px;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .13em;
  opacity: .58;
}

.download-pedal-status {
  min-height: 1.5em;
  margin-top: 14px;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.5;
}

.bstep-reveal .hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.bstep-reveal .hero-actions .button {
  justify-content: center;
  padding-inline: 20px;
}

.bstep-reveal .button-download-pedal { grid-column: 1 / -1; }

/* ---------- header ---------- */

.page-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.035);
  pointer-events: none;
}

.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #9eaeb4, #f2f0eb);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 14px var(--gutter);
  background: rgba(17, 17, 20, .48);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, background 240ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--hairline);
  background: rgba(17, 17, 20, .66);
}

.wordmark {
  display: grid;
  justify-items: center;
  text-decoration: none;
  line-height: 1;
}

.wordmark strong {
  font-size: 19px;
  font-weight: 680;
  letter-spacing: .14em;
  text-indent: .14em;
}

.wordmark span {
  margin-top: 2px;
  font-size: 7.5px;
  font-weight: 560;
  letter-spacing: .52em;
  text-indent: .52em;
  color: #9EAEB4;
}

/* The main navbar (.site-nav, dropdown, hamburger) is styled by the shared
   css/nav.css so it matches the landing page exactly. */

/* ---------- sub bar (per-page navigation) ----------
   Slides in under the global header once the reader has left the opening
   section. The global bar above it never changes between pages.
   --header-real-h is measured in site.js, because the header's height comes
   from its content — a hard-coded offset would leave a gap. */
.subbar {
  position: fixed;
  top: var(--header-real-h, var(--header-h));
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  min-height: var(--subbar-h);
  padding: 0 var(--gutter);
  background: rgba(17, 17, 20, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hairline);

  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 260ms cubic-bezier(.22, .75, .25, 1),
              opacity 200ms ease,
              visibility 260ms;
}

.subbar.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
}

.subbar-title {
  font-size: 14px;
  font-weight: 640;
  letter-spacing: .01em;
  white-space: nowrap;
}

.subbar-nav {
  display: flex;
  gap: clamp(14px, 2.4vw, 28px);
  overflow-x: auto;
  /* Setting overflow-x alone makes the browser compute overflow-y to auto, so
     the bar could be dragged vertically as well. Pin it shut explicitly. */
  overflow-y: hidden;
  /* Keep the horizontal swipe from chaining into the browser's back gesture. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.subbar-nav::-webkit-scrollbar { display: none; }

.subbar-nav a {
  position: relative;
  padding: 16px 0;
  font-size: 13.5px;
  font-weight: 540;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms ease;
}
.subbar-nav a:hover { color: var(--text); }

.subbar-nav a[aria-current="true"] { color: var(--text); }
.subbar-nav a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--amber);
}

/* The inherited line-height of 1.6 makes the small button nearly as tall as the
   bar itself — pin it and trim the padding so it reads as a control inside the
   bar rather than filling it. */
.subbar .button {
  margin-left: auto;
  align-self: center;
}

.subbar .button-small {
  padding: 7px 17px;
  font-size: 12.5px;
  line-height: 1.35;
}

@media (max-width: 720px) {
  /* The CTA already sits in the page; repeating it here would cost the room
     the section links need. */
  .subbar .button { display: none; }
  .subbar-nav { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .subbar { transition: opacity 200ms ease, visibility 200ms; transform: none; }
}

/* ---------- imagine (opening) ---------- */

.imagine {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 100svh;
  padding: 140px var(--pad) 80px;
  isolation: isolate;
}

.imagine > :not(.imagine-pedal-ghost) { position: relative; z-index: 2; }
.imagine .lede { max-width: 46ch; }
.imagine .eyebrow::before { display: none; }

.imagine-pedal-ghost {
  position: absolute;
  z-index: 0;
  top: 51%;
  right: clamp(5vw, 10vw, 170px);
  width: clamp(240px, 24vw, 370px);
  pointer-events: none;
}

.imagine-pedal-outline {
  position: relative;
  width: 100%;
  aspect-ratio: .56;
  transform: translateY(-47%) rotate(3deg);
  border: 2px solid rgba(242,240,235,.105);
  border-radius: clamp(18px, 2vw, 30px);
  background:
    radial-gradient(circle at 31% 20%, transparent 0 7.5%, rgba(242,240,235,.035) 7.7% 8.2%, transparent 8.4%),
    radial-gradient(circle at 69% 20%, transparent 0 7.5%, rgba(242,240,235,.035) 7.7% 8.2%, transparent 8.4%),
    radial-gradient(circle at 50% 79%, transparent 0 9%, rgba(242,240,235,.032) 9.2% 9.7%, transparent 9.9%),
    rgba(255,255,255,.008);
  box-shadow:
    inset 0 0 0 7px rgba(255,255,255,.009),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 32px 75px rgba(0,0,0,.12);
}

.imagine-pedal-outline::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(242,240,235,.025);
  border-radius: calc(clamp(18px, 2vw, 30px) - 7px);
}

.imagine-pedal-outline span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(233,161,95,.18);
  font: 400 clamp(120px, 15vw, 220px)/1 "Kirang Haerang", "Inter", sans-serif;
  transform: translate(-50%, -49%) rotate(-4deg);
  text-shadow: 0 8px 32px rgba(0,0,0,.12);
}

.imagine-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 54px;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 26px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-inset);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  color: var(--text);
  font-size: 14px;
  font-weight: 560;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.scroll-cue:hover {
  background: var(--glass-bg-strong);
  border-color: rgba(255, 255, 255, .2);
}

.scroll-cue.scroll-cue-download {
  border-color: #F2F0EB;
  background: #F2F0EB;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #1E2020;
  font-weight: 600;
}

.scroll-cue.scroll-cue-download:hover {
  border-color: #fff;
  background: #fff;
  color: #1E2020;
}

.scroll-cue i {
  width: 10px;
  height: 10px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  animation: cue-nudge 1.6s ease-in-out infinite;
}

@keyframes cue-nudge {
  0%, 100% { translate: 0 -2px; opacity: .7; }
  50% { translate: 0 2px; opacity: 1; }
}

/* ---------- builder ---------- */

.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 60px);
  padding: 0 var(--pad);
}

.builder-stage {
  position: sticky;
  z-index: 2;
  top: 0;
  align-self: start;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  height: 100svh;
  padding-top: calc(var(--chrome-h) + 10px);
}

.try-knobs {
  --try-knobs-scale: 1;
  position: absolute;
  z-index: 8;
  top: 27%;
  left: 77%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #E9A15F;
  font: 400 clamp(20px, 2vw, 28px)/1 "Kirang Haerang", "Inter", sans-serif;
  letter-spacing: .015em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(10px, -50%) rotate(-2deg) scale(var(--try-knobs-scale));
  transform-origin: left center;
  pointer-events: none;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.22,.75,.25,1);
  text-shadow: 0 2px 9px rgba(0,0,0,.28);
}

.try-knobs i {
  position: relative;
  width: 28px;
  height: 2px;
  background: currentColor;
}

.try-knobs i::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.builder[data-active-step="response"] .try-knobs {
  opacity: 1;
  transform: translate(0, -50%) rotate(-2deg) scale(var(--try-knobs-scale));
  animation: try-knobs-nudge 1.8s ease-in-out infinite;
}

@keyframes try-knobs-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: -4px 0; }
}

@media (min-width: 1021px) and (max-width: 1320px) {
  .try-knobs {
    --try-knobs-scale: .8;
    left: 75%;
    gap: 8px;
  }

  .try-knobs i {
    width: 21px;
  }
}

.builder-steps { display: grid; }

.bstep {
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: 40px 0;
}

/* Steps 3 and 4 carry the tallest cards. Centred in the full viewport their top
   edge slides under the fixed bars, so only these two centre within the area
   the bars leave visible — the shorter steps keep their original position.
   Only above 1020px: below that the steps stop being viewport-centred, and the
   attribute selector would otherwise outweigh the mobile padding shorthand. */
@media (min-width: 1021px) {
  .bstep[data-bstep="sound"],
  .bstep[data-bstep="response"] {
    padding-top: calc(var(--chrome-h) + 24px);
  }
}

.bstep-card {
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
  box-shadow: var(--glass-inset), var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  max-width: 560px;
}

.bstep-num {
  margin-bottom: 16px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 640;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.bstep-prefix {
  margin-bottom: 8px;
  color: var(--faint) !important;
  font-size: 10px !important;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.bstep-card h2 { margin-bottom: 16px; }

.bstep-card p { color: var(--muted); font-size: 15.5px; }
.bstep-card p + p { margin-top: 12px; }

.bstep-prefix + h2 { margin-bottom: 18px; }

.bstep-card .feature-line {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .015em;
}

.feature-points {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.feature-points li {
  position: relative;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  font-weight: 610;
}

.feature-points li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--amber);
}

.bstep-hint {
  margin-top: 22px;
  color: var(--amber) !important;
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.source-choice {
  display: inline-flex;
  gap: 4px;
  margin-top: 25px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(15, 15, 17, .34);
  box-shadow: var(--glass-inset);
}

.source-choice button {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--faint);
  background: transparent;
  font-size: 12px;
  font-weight: 580;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.source-choice button[data-source="tone3000"] {
  min-width: 116px;
  padding-inline: 15px;
}

.source-choice button[data-source="tone3000"] img {
  display: block;
  width: 86px;
  height: auto;
  opacity: .62;
  transition: opacity 150ms ease;
}

.source-choice button[data-source="tone3000"].is-active img {
  opacity: 1;
}

.source-choice button.is-active {
  color: var(--text);
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.capture-choice {
  display: grid;
  gap: 7px;
  margin-top: 15px;
}

.capture-choice button {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  text-align: left;
  cursor: pointer;
}

.capture-choice button.is-active {
  border-color: rgba(255,255,255,.22);
  color: var(--text);
  background: rgba(255,255,255,.075);
}

.capture-choice span { font-size: 13px; font-weight: 620; }
.capture-choice small { color: var(--faint); font-size: 10px; }
.capture-choice b {
  grid-column: 2;
  grid-row: 1 / 3;
  padding: 6px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 600;
}

.detected-keys {
  display: grid;
  margin-top: 25px;
  border-top: 1px solid var(--hairline);
}

.detected-keys span {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  min-height: 43px;
  border-bottom: 1px solid var(--hairline);
}

.detected-keys i { color: var(--faint); font-size: 9px; font-style: normal; }
.detected-keys b { font-size: 11px; font-weight: 640; letter-spacing: .09em; }
.detected-keys small { color: var(--faint); font-size: 9px; }

/* --- step choices --- */

.choice-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.choice-swatches button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .3);
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: transform 160ms ease, outline-color 160ms ease;
}

.choice-swatches button.is-active { outline-color: rgba(255, 255, 255, .6); }

.choice-knobs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.choice-knobs button {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  box-shadow: var(--glass-inset);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.choice-knobs button.is-active {
  border-color: rgba(255, 255, 255, .45);
  background: var(--glass-bg-strong);
}

.choice-knobs img { width: 100%; height: 100%; object-fit: contain; }

.choice-name {
  display: grid;
  gap: 8px;
  margin-top: 26px;
}

.choice-name span {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
}

.choice-name input {
  padding: 14px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(15, 15, 17, .55);
  box-shadow: var(--glass-inset);
  color: var(--text);
  font: 560 17px/1.4 "Inter", system-ui, sans-serif;
  letter-spacing: .01em;
  outline: none;
  transition: border-color 160ms ease;
}

.choice-name input:focus { border-color: rgba(255, 255, 255, .32); }

.choice-fonts {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.choice-fonts button {
  padding: 10px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-inset);
  color: var(--muted);
  font-size: 14px;
  font-weight: 560;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.choice-fonts button[data-font="brush"] { font-family: "Kirang Haerang", "Inter", sans-serif; font-size: 16px; }

.choice-fonts button.is-active {
  border-color: rgba(255, 255, 255, .45);
  background: var(--glass-bg-strong);
  color: var(--text);
}

/* --- stage readout (step 04) --- */

.stage-readout {
  display: grid;
  justify-items: center;
  gap: 6px;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 400ms ease, translate 400ms ease;
}

.builder.b-sound .stage-readout { opacity: 1; translate: 0 0; }

.stage-readout-file {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 560;
  padding: 10px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: rgba(15, 15, 17, .6);
  box-shadow: var(--glass-inset);
}

.stage-readout-pos {
  color: var(--faint);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- the composited pedal ----------
   Same stack as the plugin preview: colour masked to the blank,
   blank multiplied on top for shading, print, knobs, hardware. */

.pedal {
  --fill1: #E8E4DC;
  --fill2: #C7D6DB;
  /* Reference edge for all percent positions (template is 1500x1275). */
  --pedal-w: min(540px, 42vw);
  position: relative;
  width: var(--pedal-w);
  aspect-ratio: 1500 / 1275;
  transform: translateY(0) scale(1);
  transition:
    filter 1100ms ease,
    transform 1400ms cubic-bezier(.16, 1, .3, 1);
}

.builder[data-active-step="reveal"] .stage-readout {
  visibility: hidden;
  opacity: 0;
  translate: 0 4px;
}

.builder[data-active-step="reveal"] .pedal {
  z-index: 4;
  transform: translateY(-12px) scale(1.14);
  filter: drop-shadow(0 34px 34px rgba(0,0,0,.28));
}

.pedal-shadow {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 56%;
  height: 7%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  filter: blur(18px);
  z-index: 0;
}

.pedal-colour {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, var(--fill1), var(--fill2));
  -webkit-mask: url("../assets/pedal-rohling.png") center / contain no-repeat;
  mask: url("../assets/pedal-rohling.png") center / contain no-repeat;
}

.pedal-colour-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(160deg, var(--l1, var(--fill1)), var(--l2, var(--fill2)));
  transition: opacity 480ms ease;
}

.pedal-colour-layer.is-visible { opacity: 1; }

.pedal-finish-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.pedal.has-rendered-finish .pedal-finish-canvas { opacity: 1; }
.pedal.has-rendered-finish .pedal-colour,
.pedal.has-rendered-finish .pedal-base { opacity: 0; }

.pedal-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .46;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
  transition: opacity 180ms ease;
}

.pedal-addons {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 6;
}

/* Printed texts sit where the plugin's wizard defaults put them:
   title near the top edge, maker's mark under the footswitch. */
.pedal-print {
  position: absolute;
  inset: 0;
  color: rgba(47, 47, 52, .88);
  pointer-events: none;
  z-index: 3;
}

.pedal.font-brush .pedal-print,
.pedal.font-brush .pedal-knob span {
  font-family: "Kirang Haerang", "Inter", sans-serif;
  font-weight: 400;
}

.pedal.is-dark-fill .pedal-print { color: rgba(246, 244, 238, .9); }

.pedal-title,
.pedal-brand {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.pedal-title {
  top: 11.1%;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--pedal-w) * 0.062);
  font-weight: 640;
  letter-spacing: .02em;
  max-width: 40%;
  overflow: hidden;
  text-overflow: clip;
}

.pedal.font-brush .pedal-title {
  font-family: "Kirang Haerang", "Inter", sans-serif;
  font-size: calc(var(--pedal-w) * 0.082);
  font-weight: 400;
  letter-spacing: .04em;
}

.pedal-brand {
  top: 91.1%;
  font-size: calc(var(--pedal-w) * 0.024);
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;
}

.pedal-knob {
  position: absolute;
  left: var(--kx);
  top: var(--ky);
  width: 13.6%;
  overflow: visible;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 6%;
  cursor: grab;
  touch-action: none;
  z-index: 4;
}

.pedal-knob:active { cursor: grabbing; }

.pedal-knob:focus-visible {
  outline: none;
}

.pedal-knob img {
  width: 100%;
  height: calc(var(--pedal-w) * .136);
  object-fit: contain;
  filter: none;
  transform: rotate(var(--rot, 0deg));
}

.pedal-knob span {
  font-size: calc(var(--pedal-w) * 0.024);
  font-weight: 620;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(47, 47, 52, .82);
}

.pedal.is-dark-fill .pedal-knob span { color: rgba(246, 244, 238, .82); }

/* LED sprite: off state is the left half, on state the right half.
   Top-centre is the plugin's own LED slot. */
.pedal-led {
  position: absolute;
  left: 50%;
  top: 19.8%;
  width: 5.6%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../assets/led-1.png") left center / 200% auto no-repeat;
  border-radius: 50%;
  z-index: 5;
}

.pedal.is-lp .pedal-led {
  background-position: right center;
  box-shadow: 0 0 18px 4px rgba(255, 62, 48, .55);
}

/* Two-state filter sprite: HP is the left half, LP the right half. The LED
   follows this switch rather than the bypass footswitch. */
.pedal-toggle {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 28.4%;
  width: 7.2%;
  aspect-ratio: 428.5 / 534;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: url("../assets/toggle-1.png") left center / 200% 100% no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .34));
}

.pedal.is-lp .pedal-toggle { background-position: right center; }
.pedal-toggle:active { transform: translate(-50%, -50%) scale(.96); }
.pedal-toggle:disabled { cursor: default; }

.pedal-toggle-name {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(47, 47, 52, .82);
  font: 400 calc(var(--pedal-w) * .018)/1 "Kirang Haerang", "Inter", sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
}

.pedal.is-dark-fill .pedal-toggle-name { color: rgba(246, 244, 238, .82); }

.pedal-footswitch {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 24%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 7;
}

.pedal-footswitch:active { transform: translate(-50%, -50%) scale(.97); }
.pedal-footswitch:disabled { cursor: default; }

.pedal:not(.is-lp) .pedal-led { filter: saturate(.8); }

/* --- step-aware assembly on the builder stage ---
   Parts follow the active step in both directions; the selected values live
   in the controls and reappear unchanged when their step returns. */

.builder .pedal-knob {
  opacity: 0;
  scale: .55;
  transition: opacity 480ms cubic-bezier(.22,.75,.25,1), scale 520ms cubic-bezier(.34,1.4,.4,1);
}

.builder:not(.b-knobs) .pedal-knobs { pointer-events: none; }

.builder.b-knobs .pedal-knob { opacity: 1; scale: 1; }
.builder.b-knobs .pedal-knob:nth-child(1) { transition-delay: 0ms; }
.builder.b-knobs .pedal-knob:nth-child(2) { transition-delay: 110ms; }
.builder.b-knobs .pedal-knob:nth-child(3) { transition-delay: 220ms; }

.builder .pedal-toggle {
  opacity: 0;
  scale: .55;
  transition: opacity 480ms cubic-bezier(.22,.75,.25,1), scale 520ms cubic-bezier(.34,1.4,.4,1);
}

.builder.b-knobs .pedal-toggle { opacity: 1; scale: 1; }

.builder .pedal-toggle-name {
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 300ms ease, transform 360ms cubic-bezier(.22,.75,.25,1);
}

.builder.b-response .pedal-toggle-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.builder .pedal-knob span {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 360ms cubic-bezier(.22,.75,.25,1);
}

.builder.b-response .pedal-knob span {
  opacity: 1;
  transform: translateY(0);
}

.builder .pedal-print {
  opacity: 0;
  transition: opacity 600ms ease;
}

.builder.b-print .pedal-print { opacity: 1; }

.builder .pedal-led { opacity: 0; transition: opacity 400ms ease; }
.builder.b-knobs .pedal-led { opacity: 1; }

/* ---------- sections shared ---------- */

section { position: relative; }

section[id], article[id] { scroll-margin-top: calc(var(--header-real-h, var(--header-h)) + var(--subbar-h) + 18px); }

.section-head { margin-bottom: clamp(40px, 6vw, 80px); }

/* Reusable plugin-glass surface. */
.pair-tile, .get {
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
  box-shadow: var(--glass-inset), var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- how it works ---------- */

.how { padding: clamp(80px, 11vw, 160px) var(--pad); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  list-style: none;
  padding: 0;
}

.step {
  padding: 30px 28px 34px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.step-offset { margin-top: clamp(24px, 4vw, 72px); }
.step-offset-2 { margin-top: clamp(48px, 8vw, 144px); }

.step-num {
  display: block;
  margin-bottom: 18px;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 180;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--amber);
}

.step h3 { margin-bottom: 12px; }

.step p { color: var(--muted); font-size: 15.5px; }

/* ---------- tone3000 / library pair ---------- */

.pair {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(16px, 2vw, 28px);
  padding: 0 clamp(10px, 2vw, 28px);
}

.pair-tile {
  padding: clamp(36px, 4.4vw, 64px);
  border-radius: var(--radius);
}

.pair-tile p { margin-top: 16px; color: var(--muted); }

/* Warm-tinted glass for Tone3000, sidebar-dark glass for the library
   (the plugin's own sidebar is a denser, darker pane). */
.pair-tone {
  background:
    linear-gradient(150deg, rgba(208, 138, 76, .14), rgba(208, 138, 76, .04)),
    linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
}

.pair-library {
  background:
    linear-gradient(145deg, rgba(9, 8, 11, .68), rgba(9, 8, 11, .5));
}

.tone3000-integration {
  display: grid;
  grid-template-columns: minmax(120px, .72fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.115);
  border-radius: 12px;
  color: inherit;
  background:
    linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.012)),
    rgba(11,11,13,.34);
  box-shadow: var(--glass-inset);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.tone3000-integration:hover {
  border-color: rgba(255,255,255,.2);
  background-color: rgba(255,255,255,.055);
  transform: translateY(-2px);
}

.tone3000-integration > span {
  display: grid;
  gap: 7px;
}

.tone3000-integration small {
  color: var(--faint);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .16em;
}

.tone3000-integration img {
  width: 100%;
  max-width: 148px;
  height: auto;
}

.tone3000-integration p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.tone-mock, .lib-mock {
  margin-top: 34px;
  display: grid;
  gap: 10px;
}

.tone-mock-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(15, 15, 17, .5);
  color: var(--faint);
  font-size: 14px;
  box-shadow: var(--glass-inset);
}

.tone-mock-search span {
  width: 13px;
  height: 13px;
  border: 1.6px solid var(--faint);
  border-radius: 50%;
  position: relative;
  flex: none;
}

.tone-mock-search span::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 6px;
  height: 1.6px;
  background: var(--faint);
  transform: rotate(45deg);
}

.tone-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: var(--glass-bg);
  font-size: 14px;
  box-shadow: var(--glass-inset);
}

.tone-mock-row b { font-weight: 580; }
.tone-mock-row i {
  font-style: normal;
  font-size: 12px;
  color: var(--faint);
}

.tone-mock-row u {
  flex: 1;
  max-width: 130px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  text-decoration: none;
  overflow: hidden;
}

.tone-mock-row u s {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--amber);
  text-decoration: none;
}

.lib-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.lib-card.is-active {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .2);
}

.lib-card span {
  width: 34px;
  height: 42px;
  flex: none;
  border-radius: 7px;
  background: var(--dot);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.lib-card b { display: block; font-size: 14px; font-weight: 580; }
.lib-card i {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- extras ---------- */

.extras {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  padding: clamp(80px, 11vw, 160px) var(--pad);
}

.extras-copy p { margin-top: 20px; color: var(--muted); }

.extras-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  justify-content: flex-end;
}

.extras-chips li {
  padding: 13px 26px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-inset);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  font-size: 15px;
  font-weight: 560;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

/* ---------- content-sized product feature cards ---------- */

.feature-showcase {
  display: grid;
  gap: clamp(12px, 1.5vw, 22px);
  padding: clamp(12px, 1.5vw, 22px);
}

.product-tile {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr);
  /* The row must not stretch to the tile's full height: otherwise the visual
     floats in the middle of a box whose size depends on the tile, and no two
     tiles line up. Anchored at the top, every visual starts at the same offset,
     and align-items centres the copy against the visual instead of the tile. */
  align-content: start;
  align-items: center;
  gap: clamp(36px, 5vw, 88px);
  padding: clamp(42px, 6vw, 92px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    radial-gradient(110% 140% at 6% 100%, rgba(208, 138, 76, .08), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  box-shadow: var(--glass-inset), var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}

.product-tile-creator {
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.45fr);
  background:
    radial-gradient(100% 120% at 100% 0%, rgba(93, 120, 170, .09), transparent 50%),
    linear-gradient(145deg, rgba(255, 255, 255, .047), rgba(255, 255, 255, .014));
}

.product-tile-creator .product-visual {
  order: 2;
}

.product-tile-creator .product-copy { order: 1; }

.product-tile-editor {
  background:
    radial-gradient(110% 140% at 0% 100%, rgba(139, 107, 145, .08), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, .047), rgba(255, 255, 255, .014));
}

.product-tile-settings {
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.45fr);
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(63, 133, 133, .08), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, .047), rgba(255, 255, 255, .014));
}

.product-tile-settings .product-visual { order: 2; }
.product-tile-settings .product-copy { order: 1; }

.product-copy { max-width: 470px; }
.product-copy h2 { margin-bottom: 32px; }

.product-features {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}

.product-features li {
  position: relative;
  padding: 15px 4px 15px 25px;
  border-bottom: 1px solid var(--hairline);
  color: rgba(243, 243, 244, .88);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 530;
  letter-spacing: -.01em;
}

.product-features li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 7px;
  height: 7px;
  translate: 0 -50%;
  border: 1px solid rgba(233, 161, 95, .76);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(17, 17, 20, .65);
  background: var(--amber);
}

.product-visual {
  position: relative;
  width: 100%;
  min-height: clamp(430px, 66svh, 690px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 24px;
  background: rgba(8, 8, 10, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 28px 70px rgba(0, 0, 0, .32);
}

.product-screenshot-frame {
  min-height: 0;
  aspect-ratio: 1866 / 1347;
  background: rgba(5, 5, 7, .72);
}

.product-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  -webkit-user-drag: none;
  user-select: none;
}

/* Main view mock */
.main-view-mock {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 30% 1fr;
  background: rgba(17, 18, 20, .82);
}

.main-view-sidebar {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(18px, 2.3vw, 30px);
  border-right: 1px solid rgba(255, 255, 255, .07);
  background: rgba(7, 7, 9, .58);
}

.mock-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  color: var(--faint);
  background: rgba(255, 255, 255, .035);
  font-size: 10px;
}

.mock-search i {
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.mock-pedal-card {
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, .022);
}

.mock-pedal-card.is-selected {
  border-color: rgba(255, 255, 255, .12);
  color: var(--text);
  background: rgba(255, 255, 255, .08);
}

.mock-pedal-card b, .mock-pedal-card small { display: block; }
.mock-pedal-card b { font-size: clamp(9px, 1vw, 13px); font-weight: 600; }
.mock-pedal-card small { margin-top: 2px; color: var(--faint); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; }
.main-view-sidebar > button {
  margin-top: auto;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
  font: inherit;
  font-size: 10px;
}

.main-view-stage { position: relative; display: grid; place-items: center; padding-bottom: 52px; }
.feature-pedal { position: relative; width: min(90%, 470px); aspect-ratio: 1500 / 1275; filter: drop-shadow(0 24px 24px rgba(0,0,0,.32)); }
.feature-pedal-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #D76868, #E5A166);
  -webkit-mask: url("../assets/pedal-rohling.png") center / contain no-repeat;
  mask: url("../assets/pedal-rohling.png") center / contain no-repeat;
}
.feature-pedal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .45; mix-blend-mode: multiply; }
.feature-pedal > strong { position: absolute; z-index: 3; top: 14.5%; left: 50%; translate: -50% 0; color: #353438; font-family: "Kirang Haerang", sans-serif; font-size: clamp(15px, 2.2vw, 27px); font-weight: 400; white-space: nowrap; letter-spacing: .06em; }
.feature-pedal-knobs { position: absolute; z-index: 4; inset: 0; }
.feature-pedal-knobs img { position: absolute; width: 12%; }
.feature-pedal-knobs img:nth-child(1) { left: 32%; top: 22%; }
.feature-pedal-knobs img:nth-child(2) { left: 56%; top: 22%; }
.feature-pedal-knobs img:nth-child(3) { left: 44%; top: 46%; }
.feature-pedal > .feature-pedal-addons { z-index: 5; opacity: 1; mix-blend-mode: normal; }
.main-view-footer { position: absolute; left: 20px; right: 20px; bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--faint); font-size: clamp(8px, .8vw, 11px); }
.main-view-footer b { color: var(--text); font-weight: 580; }
.main-view-footer i { font-style: normal; text-transform: uppercase; letter-spacing: .12em; }

/* Editor screenshots and mode switch */
.editor-demo { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 280ms ease, transform 360ms cubic-bezier(.22,.75,.25,1); }
.product-tile-editor[data-editor-mode="simple"] [data-editor-visual="simple"],
.product-tile-editor[data-editor-mode="advanced"] [data-editor-visual="advanced"] {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.demo-toolbar { height: 62px; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 0 26px; border-bottom: 1px solid rgba(255,255,255,.07); color: var(--faint); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.demo-toolbar b { margin-right: auto; color: var(--text); font-size: 13px; letter-spacing: -.01em; text-transform: none; }
.demo-toolbar .is-current { color: var(--text); }
.demo-simple-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .72fr); grid-template-rows: auto 1fr; gap: 13px; height: calc(100% - 62px); padding: clamp(18px, 2.5vw, 34px); }
.demo-source-block, .demo-parameter-list, .demo-file-list, .demo-layers, .demo-inspector { border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(255,255,255,.025); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.demo-source-block { display: grid; align-content: start; gap: 8px; padding: 19px; }
.demo-source-block small, .demo-parameter-list > small, .demo-file-list > small, .demo-layers > small, .demo-inspector > small { color: var(--faint); font-size: 8px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.demo-source-block b { font-size: 14px; }
.demo-source-block span { color: var(--muted); font-size: 10px; }
.demo-parameter-list { grid-row: 2; display: grid; align-content: start; padding: 19px; }
.demo-parameter-list > small, .demo-file-list > small { margin-bottom: 10px; }
.demo-parameter-list span { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 10px; }
.demo-parameter-list i { color: var(--amber); font-style: normal; font-size: 8px; }
.demo-parameter-list b { font-weight: 580; }
.demo-parameter-list em { color: var(--faint); font-style: normal; font-size: 8px; }
.demo-file-list { grid-column: 2; grid-row: 1 / 3; display: grid; align-content: start; gap: 7px; padding: 19px; }
.demo-file-list span { overflow: hidden; padding: 8px; border-radius: 7px; color: var(--faint); background: rgba(255,255,255,.035); font-family: ui-monospace, monospace; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.demo-video-label { position: absolute; right: 18px; bottom: 15px; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.3); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.demo-video-label i { width: 5px; height: 5px; border-radius: 50%; background: #D76868; box-shadow: 0 0 0 3px rgba(215,104,104,.12); }

.demo-advanced-grid { display: grid; grid-template-columns: 150px minmax(190px, 1fr) 155px; height: calc(100% - 62px); }
.demo-layers, .demo-inspector { margin: 16px 0 16px 16px; padding: 16px; border-radius: 12px; }
.demo-layers { display: grid; align-content: start; gap: 2px; }
.demo-layers small, .demo-inspector small { margin-bottom: 9px; }
.demo-layers span { padding: 7px 5px; border-radius: 6px; color: var(--muted); font-size: 8px; }
.demo-layers span:nth-last-child(2) { color: var(--text); background: rgba(255,255,255,.07); }
.demo-layers span:last-child { margin-top: 8px; border: 1px dashed rgba(255,255,255,.12); color: var(--faint); text-align: center; }
.demo-canvas { position: relative; display: grid; place-items: center; margin: 16px; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: rgba(0,0,0,.2); }
.demo-canvas > small { position: absolute; right: 9px; bottom: 7px; color: var(--faint); font-size: 7px; }
.demo-canvas-pedal { position: relative; width: min(66%, 170px); aspect-ratio: .77; border-radius: 6px; background: linear-gradient(155deg,#D76868,#E5A166); box-shadow: 0 18px 26px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.28); }
.demo-canvas-pedal b { position: absolute; top: 8%; width: 100%; text-align: center; color: #373338; font-family: "Kirang Haerang", sans-serif; font-size: 14px; font-weight: 400; }
.demo-canvas-pedal i { position: absolute; width: 21%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #45484b, #0d0e0f 72%); box-shadow: 0 4px 8px rgba(0,0,0,.35); }
.demo-canvas-pedal i:nth-of-type(1) { left: 18%; top: 23%; }
.demo-canvas-pedal i:nth-of-type(2) { right: 18%; top: 23%; }
.demo-canvas-pedal i:nth-of-type(3) { left: 39.5%; top: 47%; }
.demo-inspector { display: grid; align-content: start; gap: 11px; margin-left: 0; margin-right: 16px; }
.demo-inspector label { display: grid; gap: 4px; color: var(--faint); font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }
.demo-inspector label b { padding: 7px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.demo-inspector label i { width: 100%; height: 22px; border-radius: 6px; background: linear-gradient(90deg,#D76868,#E5A166); }

.editor-mode-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: -4px 0 23px; padding: 4px; border: 1px solid var(--glass-border); border-radius: 999px; background: rgba(8,8,10,.3); box-shadow: var(--glass-inset); }
.editor-mode-switch button { min-width: 104px; min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; color: var(--faint); background: transparent; font: inherit; font-size: 12px; font-weight: 590; cursor: pointer; transition: color 180ms ease, background 220ms ease, box-shadow 220ms ease; }
.editor-mode-switch button.is-active { color: var(--text); background: rgba(255,255,255,.1); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 6px 14px rgba(0,0,0,.16); }
.editor-copy-stack { display: grid; }
.editor-mode-copy {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 280ms ease, visibility 0s linear 220ms;
}
.product-tile-editor[data-editor-mode="simple"] [data-editor-copy="simple"],
.product-tile-editor[data-editor-mode="advanced"] [data-editor-copy="advanced"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* Settings mock */
.settings-feature-mock { position: absolute; inset: 7%; display: grid; grid-template-columns: 31% 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(15,15,17,.82); box-shadow: 0 24px 54px rgba(0,0,0,.3); }
.settings-feature-mock nav { display: grid; align-content: start; gap: 5px; padding: 24px 18px; border-right: 1px solid rgba(255,255,255,.07); background: rgba(7,7,9,.45); }
.settings-feature-mock nav b { margin-bottom: 15px; font-size: 14px; }
.settings-feature-mock nav span { padding: 9px 11px; border-radius: 7px; color: var(--faint); font-size: 9px; }
.settings-feature-mock nav .is-current { color: var(--text); background: rgba(255,255,255,.075); }
.settings-feature-content { display: grid; align-content: start; gap: 13px; padding: clamp(24px, 3vw, 42px); }
.settings-feature-content > small { margin-bottom: 4px; color: var(--text); font-size: 11px; font-weight: 630; letter-spacing: .15em; text-transform: uppercase; }
.settings-feature-content label { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--muted); font-size: 9px; }
.settings-feature-content label > i { width: 30px; height: 22px; border: 1px solid rgba(255,255,255,.11); border-radius: 6px; }
.settings-bg-preview { background: url("../assets/bg.jpg") center / cover; }
.settings-colour-preview { background: #D08A4C; }
.settings-feature-content label button { min-height: 27px; padding: 0 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.035); font: inherit; font-size: 8px; }
.settings-feature-content input { width: clamp(100px, 12vw, 180px); accent-color: #d7d7d9; }
.settings-presets { display: flex; gap: 8px; }
.settings-presets i { width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.settings-presets i:nth-child(1) { background: #d7d7d9; }
.settings-presets i:nth-child(2) { background: #D08A4C; }
.settings-presets i:nth-child(3) { background: #5D78AA; }
.settings-presets i:nth-child(4) { background: #708E72; }
.settings-presets i:nth-child(5) { background: #8B6B91; }
.settings-save { justify-self: end; min-height: 34px; margin-top: 6px; padding: 0 16px; border: 1px solid rgba(255,255,255,.17); border-radius: 9px; color: var(--text); background: rgba(255,255,255,.065); font: inherit; font-size: 9px; font-weight: 590; }

/* ---------- get band ---------- */

.get {
  margin: 0 clamp(10px, 2vw, 28px) clamp(16px, 2vw, 28px);
  padding: clamp(80px, 10vw, 140px) var(--pad);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(215, 104, 104, .16), transparent 52%),
    radial-gradient(110% 150% at 8% 110%, rgba(63, 133, 133, .16), transparent 55%),
    linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  text-align: center;
}

.get .eyebrow { justify-content: center; }
.get p { margin-inline: auto; }

.get-formats {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

.get .hero-actions { justify-content: center; }

.installer-actions {
  align-items: stretch;
}

.installer-download,
.donate-paypal {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 250px;
  line-height: 1.25;
}

.installer-download small,
.donate-paypal small {
  font-size: 9.5px;
  font-weight: 680;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .54;
}

.get-note {
  margin-top: 26px;
  font-size: 13px;
  color: var(--faint);
}

.installer-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 900px);
  margin: 14px auto 0;
  text-align: left;
}

.installer-notes .installer-security-note {
  max-width: none;
  margin-top: 0;
}

.installer-security-note {
  max-width: 620px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.installer-security-note a {
  display: inline-block;
  margin-left: .35em;
  color: var(--text);
  text-underline-offset: 3px;
}

/* ---------- footer ---------- */

.site-footer {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 60px var(--pad) 50px;
  text-align: center;
}

.site-footer p { font-size: 13.5px; color: var(--muted); }
.site-footer a { color: var(--text); }

.footer-support { margin-top: 2px; }
.footer-support a {
  color: #E9A15F;
  text-underline-offset: 4px;
  text-decoration-color: rgba(233, 161, 95, .42);
}

.footer-fine { font-size: 12px; color: var(--faint); }
.footer-fine a {
  color: var(--muted);
  text-decoration-color: rgba(255,255,255,.28);
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.footer-fine a:hover {
  color: var(--text);
  text-decoration-color: rgba(255,255,255,.7);
}

/* ---------- voluntary donation step ---------- */

.donate-overlay[hidden] { display: none; }

.donate-overlay {
  position: fixed;
  z-index: 400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(6, 6, 8, .5);
  opacity: 0;
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
  transition: opacity 340ms ease;
}

.donate-overlay.is-open { opacity: 1; }

.donate-dialog {
  position: relative;
  width: min(100%, 560px);
  padding: clamp(32px, 4vw, 46px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018));
  box-shadow: var(--glass-inset), var(--glass-shadow), 0 34px 90px rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  transform: translateY(22px) scale(.975);
  opacity: 0;
  transition:
    opacity 420ms cubic-bezier(.22,.75,.25,1),
    transform 420ms cubic-bezier(.22,.75,.25,1);
}

.donate-overlay.is-open .donate-dialog {
  transform: none;
  opacity: 1;
}

.donate-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 50%;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.donate-close span::before,
.donate-close span::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 11px;
  width: 15px;
  height: 1px;
  background: currentColor;
}

.donate-close span::before { transform: rotate(45deg); }
.donate-close span::after { transform: rotate(-45deg); }

.donate-close:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .2);
  transform: rotate(4deg);
}

.donate-dialog .eyebrow { color: #E9A15F; }

.donate-dialog h2 {
  margin-top: 17px;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.03;
}

.donate-dialog h2 em {
  color: #E9A15F;
  font-style: normal;
}

#donate-copy {
  max-width: 470px;
  margin-top: 24px;
  color: var(--muted);
  line-height: 1.6;
}

.donate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.donate-actions .button { justify-content: center; cursor: pointer; }
.donate-actions .donate-skip { min-width: 170px; }

.donate-note {
  margin-top: 20px;
  color: var(--faint);
  font-size: 11.5px;
  letter-spacing: .015em;
}

body.has-donate-dialog { overflow: hidden; }

/* ---------- reveal animations ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 700ms cubic-bezier(.22,.75,.25,1) var(--reveal-delay, 0ms),
    transform 700ms cubic-bezier(.22,.75,.25,1) var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pedal-colour-layer, .button, .builder .pedal, .builder .pedal-knob, .builder .pedal-knob span, .builder .pedal-print, .stage-readout { transition: none; }
  .scroll-cue i { animation: none; }
  .try-knobs { animation: none !important; }
  .donate-overlay, .donate-dialog { transition: none; }
  .editor-demo, .editor-mode-copy, .editor-mode-switch button { transition: none; }
}

@media (hover: hover) {
  .choice-swatches button:hover { transform: scale(1.12); }
  .choice-knobs button:hover { transform: translateY(-2px); background: var(--glass-bg-strong); }
  .choice-fonts button:hover { background: var(--glass-bg-strong); }
  .extras-chips li:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    transform: translateY(-2px);
  }
  .editor-mode-switch button:hover { color: var(--text); }
}

/* ---------- responsive ---------- */

/* The builder is a guided desktop journey: each wheel/trackpad movement
   settles on exactly one full-height decision, with its card centred beside
   the sticky pedal. The surrounding sections are snap points as well, so the
   page can enter and leave the builder without getting trapped. */
@media (min-width: 1021px) {
  html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
  }

  .imagine,
  .bstep,
  .how,
  .pair,
  .extras,
  .product-tile,
  .get,
  .site-footer {
    scroll-snap-align: start;
  }

  .imagine,
  .bstep {
    scroll-snap-stop: always;
  }

  .product-tile { scroll-snap-stop: always; }

  .bstep-card {
    max-height: calc(100svh - var(--chrome-h) - 48px);
    overflow-y: auto;
    /* Tall cards may scroll internally, but unused wheel movement must continue
       to the page so hovering a card never traps the guided creator journey. */
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.13) transparent;
  }

  .bstep-card::-webkit-scrollbar { width: 4px; }
  .bstep-card::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.13);
  }
}

@media (max-width: 1020px) {
  html { scroll-snap-type: none; }
  .imagine { padding-top: 120px; }
  .imagine-pedal-ghost { right: -4vw; width: clamp(220px, 34vw, 310px); opacity: .7; }

  /* Builder collapses to a single column: the stage becomes a compact
     sticky band pinned under the header while the steps scroll by. */
  .builder { grid-template-columns: 1fr; gap: 0; }

  .builder-stage {
    top: var(--chrome-h);
    z-index: 5;
    height: auto;
    padding: 18px 0 22px;
    background: linear-gradient(180deg, rgba(17, 17, 20, .94) 78%, transparent);
  }

  .try-knobs { display: none; }

  .pedal { --pedal-w: min(240px, 56vw); }

  .builder[data-active-step="reveal"] .stage-readout { display: none; }
  .builder[data-active-step="reveal"] .pedal { transform: scale(1.1); }

  .stage-readout-file { font-size: 12.5px; padding: 8px 14px; }
  .stage-readout-pos { font-size: 10px; }

  .bstep { min-height: 0; padding: 34px 0; }
  .bstep-card { max-width: none; }

  .pair, .extras { grid-template-columns: 1fr; }
  .product-tile {
    min-height: 0;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .75fr);
    gap: clamp(24px, 4vw, 40px);
    padding: clamp(34px, 5vw, 54px);
  }
  .product-tile-creator,
  .product-tile-settings { grid-template-columns: minmax(250px, .75fr) minmax(0, 1.35fr); }
  .product-tile .product-copy { max-width: 620px; }
  .product-visual { min-height: min(590px, 70svh); }
  .product-screenshot-frame { min-height: 0; }
  .extras-chips { justify-content: flex-start; }
  .steps { grid-template-columns: 1fr; }
  .step-offset, .step-offset-2 { margin-top: 0; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 26px; }
  .step-num { grid-row: 1 / 3; margin-bottom: 0; }
}

@media (max-width: 820px) {
  .site-header {
    min-height: var(--header-h);
    gap: 14px;
    justify-content: space-between;
    padding: 10px max(var(--gutter), env(safe-area-inset-right)) 10px max(var(--gutter), env(safe-area-inset-left));
  }
  .subbar {
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-left: max(var(--gutter), env(safe-area-inset-left));
  }
  .site-header .button-small {
    flex: none;
    padding: 9px 14px;
    white-space: nowrap;
  }
  .imagine {
    min-height: 100svh;
    padding: 108px 20px 58px;
  }
  .imagine .lede { max-width: min(34ch, 76vw); }
  .imagine .eyebrow {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .imagine-tone3000 {
    gap: 10px;
    margin-top: 20px;
    padding: 9px 11px;
  }
  .imagine-tone3000 span { font-size: 7px; }
  .imagine-tone3000 img { width: 110px; }
  .imagine-pedal-ghost {
    top: 59%;
    right: 14px;
    width: min(38vw, 160px);
    opacity: .3;
  }
  .imagine-pedal-outline { transform: translateY(-45%) rotate(3deg); }
  .eyebrow { white-space: normal; }
  body { font-size: 16px; }

  /* Keep the pedal visible while the wizard cards move, but reserve enough
     vertical room for the active card below it. */
  .builder {
    width: 100%;
    padding: 0 14px;
  }
  .builder-stage {
    top: var(--chrome-h);
    z-index: 20;
    height: 218px;
    min-height: 218px;
    gap: 0;
    padding: 8px 0 10px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(17, 17, 20, .98) 0%, rgba(17, 17, 20, .95) 88%, rgba(17, 17, 20, 0) 100%);
  }
  .pedal { --pedal-w: min(190px, 50vw); }
  .stage-readout { display: none !important; }
  .builder[data-active-step="reveal"] .pedal { transform: translateY(0) scale(1.03); }
  .bstep {
    min-height: calc(100svh - var(--chrome-h) - 218px);
    padding: 12px 0;
    scroll-margin-top: calc(var(--chrome-h) + 218px);
  }
  .bstep-card {
    width: 100%;
    padding: 24px 20px;
    border-radius: 21px;
  }
  .bstep-card h2 { font-size: clamp(27px, 8vw, 38px); }
  .bstep-hint { font-size: 10.5px; letter-spacing: .1em; }
  .bstep-reveal .hero-actions { grid-template-columns: 1fr; }
  .bstep-reveal .button-download-pedal { grid-column: auto; }
  .source-choice { max-width: 100%; }
  .tone3000-integration {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tone3000-integration img { width: 138px; }
  .source-choice button { min-width: 0; padding-inline: 13px; }
  .capture-choice button { min-width: 0; }
  .capture-choice span, .capture-choice small { min-width: 0; overflow-wrap: anywhere; }
  .choice-name input { width: 100%; min-width: 0; }
  .choice-fonts { flex-wrap: wrap; }
  .choice-fonts button { flex: 1 1 120px; padding-inline: 14px; }

  .step { grid-template-columns: 1fr; }
  .step-num { grid-row: auto; margin-bottom: 14px; }
  .choice-knobs button { width: 64px; height: 64px; padding: 11px; }
  .detected-keys span { grid-template-columns: 28px 1fr; padding: 8px 0; }
  .detected-keys small { grid-column: 2; }
  .donate-overlay { padding: 10px; }
  .donate-dialog {
    max-height: calc(100svh - 20px);
    padding: 52px 24px 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .donate-actions { display: grid; }
  .donate-actions .button { width: 100%; min-width: 0; }
  .feature-showcase { padding-inline: 10px; }
  .product-tile {
    min-height: auto;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 30px 24px;
    border-radius: 22px;
  }
  .product-tile-creator { grid-template-columns: 1fr; }
  .product-tile .product-visual { order: 1; }
  .product-tile .product-copy { order: 2; }
  .product-visual { min-height: 420px; border-radius: 17px; }
  .product-screenshot-frame { min-height: 0; }
  .product-copy h2 { margin-bottom: 24px; }
  .editor-mode-switch {
    width: 100%;
    max-width: 320px;
  }
  .editor-mode-switch button { min-width: 0; padding-inline: 10px; }
  .product-features li { overflow-wrap: anywhere; }
  .main-view-mock { grid-template-columns: 35% 1fr; }
  .main-view-sidebar { padding: 14px 10px; }
  .main-view-footer span { display: none; }
  .demo-toolbar { height: 52px; padding: 0 15px; gap: 12px; }
  .demo-toolbar span:not(.is-current) { display: none; }
  .demo-simple-grid { height: calc(100% - 52px); grid-template-columns: 1fr; padding: 14px; }
  .demo-file-list { display: none; }
  .demo-advanced-grid { height: calc(100% - 52px); grid-template-columns: 112px 1fr; }
  .demo-layers { margin: 11px 0 11px 11px; padding: 11px; }
  .demo-canvas { margin: 11px; }
  .demo-inspector { display: none; }
  .settings-feature-mock { inset: 4%; grid-template-columns: 34% 1fr; }
  .settings-feature-mock nav { padding: 18px 10px; }
  .settings-feature-content { padding: 22px 15px; }
  .settings-feature-content label { grid-template-columns: 1fr auto; }
  .settings-feature-content label > i { display: none; }
  .settings-feature-content input { width: 100px; }

  .get {
    margin-inline: 10px;
    padding: 64px 22px;
  }
  .get .hero-actions, .get .installer-download { width: 100%; }
  .installer-download { min-width: 0; }
  .installer-notes { grid-template-columns: 1fr; }
  .get-formats { line-height: 1.8; letter-spacing: .16em; }
  .site-footer { padding-inline: 20px; }
  .site-footer p { overflow-wrap: anywhere; }

  /* Keep the material language on mobile without stacking many expensive
     full-surface blur passes while the sticky builder is moving. */
  .bstep-card,
  .pair-tile,
  .product-tile,
  .get,
  .extras-chips li {
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }
}

@media (max-width: 430px) {
  :root { --header-h: 58px; }
  .site-header .button-small { font-size: 11px; }
  .imagine { padding-inline: 16px; }
  .imagine h1 { font-size: clamp(48px, 18vw, 72px); }
  .imagine .lede { max-width: 31ch; font-size: 16px; }
  .imagine-pedal-ghost { right: 8px; width: 132px; opacity: .23; }
  .imagine-actions { margin-top: 38px; }
  .scroll-cue { padding: 11px 18px; }
  .builder { padding-inline: 10px; }
  .builder-stage { height: 198px; min-height: 198px; }
  .pedal { --pedal-w: min(174px, 52vw); }
  .bstep {
    min-height: calc(100svh - var(--chrome-h) - 198px);
    scroll-margin-top: calc(var(--chrome-h) + 198px);
  }
  .bstep-card { padding: 22px 17px; }
  .choice-swatches { gap: 10px; }
  .choice-swatches button { width: 34px; height: 34px; }
  .choice-knobs { gap: 9px; }
  .choice-knobs button { width: 58px; height: 58px; }
  .detected-keys b { overflow-wrap: anywhere; }
  .product-tile { padding: 26px 17px; gap: 28px; }
  .product-features li { padding-block: 13px; }
  .donate-dialog h2 { font-size: 31px; }
}

@media (max-width: 820px) and (max-height: 600px) {
  .builder-stage { height: 150px; min-height: 150px; }
  .pedal { --pedal-w: min(132px, 28vw); }
  .bstep {
    min-height: calc(100svh - var(--chrome-h) - 150px);
    scroll-margin-top: calc(var(--chrome-h) + 150px);
  }
  .imagine { padding-block: 90px 38px; }
  .imagine-pedal-ghost { display: none; }
}