/* ===========================================================
   Setliner — design tokens & shared system
   Direction: "The Feature Chain" (pedalboard signal-chain world)
   Seed key c3089a15 — see .impeccable/surfaces/index.md
   =========================================================== */

/* Self-hosted brand faces (latin subsets; five weights the site actually uses).
   No third-party request on any page view, in keeping with the product's own
   no-telemetry stance. Sources: Google Fonts woff2 exports, 2026-09-05. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- palette: light is the default; dark is [data-theme="dark"] below ---- */
  --ground: #F4F9FD;          /* brand ice */
  --ground-raised: #FFFFFF;
  --panel: #FFFFFF;
  --panel-edge: #D2E0EC;
  --aluminum: #5F7385;
  --aluminum-dim: #8A9DAE;
  --accent: #186BA8;          /* brand blue darkened for text: 5.6:1 on ice */
  --accent-dim: #1E7FC4;
  --accent-soft: rgba(30, 127, 196, 0.10);
  --led-on: #4FCB63;
  --led-on-glow: rgba(79, 203, 99, 0.55);
  --led-off: #3B3733;
  --ink: #06263F;             /* brand navy */
  --ink-dim: #3D586E;         /* 7.2:1 on ice */
  --ink-faint: #5A7286;       /* 4.8:1 on ice */
  --void: #FFFFFF;            /* text on the primary button */
  --sheen: rgba(255, 255, 255, 0.35);

  /* ---- surfaces that differ by theme beyond the palette ---- */
  --selection-bg: #DCEEFF;
  --selection-ink: #06263F;
  --header-bg: rgba(244, 249, 253, 0.92);
  --hero-glow: none;
  --btn-primary-bg: #186BA8;
  --btn-primary-shadow: none;
  --btn-primary-shadow-hover: none;
  --wordmark-set: #06263F;
  --wordmark-liner: #1E7FC4;
  --headline-accent: #1E7FC4;
  --rig-bg:
    radial-gradient(900px 420px at 72% 18%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #EAF3FB 0%, #DCEAF6 100%);
  --rig-edge: #C9DAE9;
  --rig-shadow: 0 1px 0 #FFFFFF inset;
  --tray-edge: #0E0C0A;
  --tray-cast: 0 30px 40px -26px rgba(6, 38, 63, 0.55);
  --amp-shadow: drop-shadow(0 30px 34px rgba(6, 38, 63, 0.30));
  --cable-shadow-stroke: rgba(6, 38, 63, 0.30);
  --cable-shadow-filter: drop-shadow(0 4px 3px rgba(6, 38, 63, 0.28));
  --readout-bg: #FFFFFF;
  --readout-edge: #C9DAE9;
  --strong-rule: #06263F;
  --shot-bezel: #0B1A27;
  --scroll-thumb: #C2D3E2;

  /* ---- type ---- */
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- rhythm ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-7: 10rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --measure: 62ch;

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

  /* ---- type scale (component/label sizes; h1/h2 use their own clamp()) ---- */
  --text-3xs: 0.72rem;
  --text-2xs: 0.8rem;
  --text-xs: 0.85rem;
  --text-sm: 0.92rem;
  --text-base: 1rem;
  --text-md: 1.05rem;
  --text-lg: 1.15rem;
  --text-xl: 1.2rem;
  --text-2xl: 1.9rem;
}

/* The original look: a dimly lit pedalboard. Chosen with the header toggle (assets/js/theme.js). */
:root[data-theme="dark"] {
  --ground: #121110;
  --ground-raised: #1B1917;
  --panel: #201D1A;
  --panel-edge: #2E2A26;
  --aluminum: #C7C4BE;
  --aluminum-dim: #746F68;
  --accent: #2E8FD4;
  --accent-dim: #1E7FC4;
  --accent-soft: rgba(46, 143, 212, 0.14);
  --ink: #EEEAE1;
  --ink-dim: #A39D91;
  --ink-faint: #8D877D; /* 4.67:1 on --panel, 5.2:1 on --ground */
  --void: #0B0A09;
  --sheen: rgba(255, 255, 255, 0.3);

  --selection-bg: #1E7FC4;
  --selection-ink: #0B0A09;
  --header-bg: rgba(18, 17, 16, 0.86);
  --hero-glow: radial-gradient(1100px 480px at 50% -10%, rgba(46,143,212,0.10), transparent 60%);
  --btn-primary-bg: #2E8FD4;
  --btn-primary-shadow: 0 10px 24px -12px rgba(46,143,212,0.55);
  --btn-primary-shadow-hover: 0 14px 28px -12px rgba(46,143,212,0.7);
  --wordmark-set: #F4F9FD;
  --wordmark-liner: #4FB3F6;
  --headline-accent: #b5afa5;
  --rig-bg: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%), #1B1917;
  --rig-edge: #2E2A26;
  --rig-shadow: 0 40px 80px -40px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.04) inset;
  --tray-edge: #2E2A26;
  --tray-cast: 0 0 0 transparent;
  --amp-shadow: drop-shadow(0 32px 42px rgba(0, 0, 0, 0.62));
  --cable-shadow-stroke: rgba(0, 0, 0, 0.78);
  --cable-shadow-filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.72));
  --readout-bg: #16130F;
  --readout-edge: #2E2A26;
  --strong-rule: #746F68;
  --shot-bezel: #000000;
  --scroll-thumb: #2E2A26;
}

/* The pedalboard is a black board in both themes: the pedal nameplates and the photographed
   patch leads are lit for a dark surface, so everything standing on it keeps dark-theme ink. */
.pedal-tray {
  --ink: #EEEAE1;
  --ink-dim: #B5AFA5;
  --ink-faint: #8D877D;
  --panel-edge: #2E2A26;
  --accent: #4FB3F6;
  --readout-bg: #16130F;
  --readout-edge: #2E2A26;
  --cable-shadow-stroke: rgba(0, 0, 0, 0.78);
  --cable-shadow-filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.72));
}

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

html {
  background: var(--ground);
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

::selection {
  background: var(--selection-bg);
  color: var(--selection-ink);
}

/* custom scrollbar, themed */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
  border: 3px solid var(--ground);
}
::-webkit-scrollbar-thumb:hover { background: var(--aluminum-dim); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

.measure { max-width: var(--measure); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background 0.18s var(--ease-out);
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--void);
  box-shadow: 0 1px 0 var(--sheen) inset, var(--btn-primary-shadow);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 1px 0 var(--sheen) inset, var(--btn-primary-shadow-hover); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  border-color: var(--panel-edge);
  color: var(--ink-dim);
}
.btn-ghost:hover { border-color: var(--aluminum-dim); color: var(--ink); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-edge);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.brand img { width: 30px; height: 30px; }
.brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav ul { list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.site-nav a:hover { color: var(--ink); }

/* ---------------- hero / pedalboard rig ---------------- */

.hero {
  position: relative;
  padding-block: var(--space-6) var(--space-5);
  overflow: hidden;
  background: var(--hero-glow), var(--ground);
}

.hero-copy { position: relative; max-width: 46rem; margin-bottom: var(--space-5); }

.hero-copy h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.03;
  margin-bottom: var(--space-2);
}
.hero-copy .tagline {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}
.hero-copy .lede {
  color: var(--ink-dim);
  font-size: var(--text-lg);
  max-width: 40rem;
  margin-bottom: var(--space-3);
}
.hero-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.hero-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--space-2); }

/* the rig */

.rig {
  position: relative;
  border: 1px solid var(--rig-edge);
  border-radius: var(--radius-lg);
  background: var(--rig-bg);
  padding: var(--space-4) var(--space-4) var(--space-3);
  box-shadow: var(--rig-shadow);
}

.board-stage {
  /* Future expansion: when a pedal is appended on the right, shift the amp,
     pedal row, and long cable together by changing this one value. */
  --rig-offset-x: 0px;
  position: relative;
  left: var(--rig-offset-x);
  min-height: 670px;
}

.pedal-tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #18140F 0%, #100D0A 100%);
  border: 1px solid var(--tray-edge);
  border-radius: var(--radius-md);
  padding: 42px 70px 52px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), inset 0 -12px 24px -20px rgba(0,0,0,0.8), var(--tray-cast);
}

.board {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 56px;
  align-items: flex-end;
  margin-left: 0;
}
.board .pedal {
  flex: 0 0 auto;
  /* Let each photographed jack mask the tiny inserted end of its plug. */
  z-index: 3;
}

/* Price still affects scale, but every enclosure remains large enough to read
   as real hardware instead of a thumbnail. */
.pedal-fretboard { width: 132px; margin-bottom: 10px; }
.pedal-skins, .pedal-linked { width: 150px; }
.pedal-linked { margin-bottom: -4px; }
.pedal-popout { width: 180px; margin-bottom: -25px; }
.board .pedal { aspect-ratio: 2 / 3; }

.pedal {
  --price-top: 44%;
  --plate-top: 68%;
  --plate-height: 20%;
  --plate-text-width: 58%;
  position: relative;
  overflow: visible;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  text-align: center;
  cursor: pointer;
  color: inherit;
  font: inherit;
  background: none;
  transition: transform 0.22s var(--ease-out), filter 0.22s;
}
.pedal:hover { transform: translateY(-3px); filter: brightness(1.08); }
.pedal:active { transform: translateY(-1px); }

.pedal-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.48));
}

/* The source art carries an unlit glass lens; this live light restores the
   pedal click feedback without tinting the whole product image. Each pedal
   sets --led-top/--led-left/--led-size to its own lens, measured from the
   PNG (the enclosure box is 2:3 and the photo fills it, so image percentages
   map straight onto the button). */
.board .pedal::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: var(--led-top, 9.5%);
  left: var(--led-left, 50%);
  width: clamp(7px, var(--led-size, 6%), 12px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(10, 12, 10, 0.2);
  transition: background 0.22s, box-shadow 0.22s;
  pointer-events: none;
}
.board .pedal[data-engaged="true"]::after {
  background: var(--led-on);
  box-shadow: 0 0 12px 3px var(--led-on-glow);
}

.pedal-price-tag {
  position: absolute;
  left: 50%;
  top: var(--price-top);
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.pedal-name-tag {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: var(--plate-top);
  width: var(--plate-text-width);
  height: var(--plate-height);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.69rem, 0.95vw, 0.82rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  color: #EEEAE1; /* printed on the photographed black plate, in both themes */
  pointer-events: none;
}
.pedal-skins {
  --price-top: 44.5%;
  --plate-top: 68.3%;
  --plate-height: 20.6%;
  --plate-text-width: 58%;
  --led-top: 12%;
  --led-left: 49.9%;
  --led-size: 6.2%;
}
.pedal-popout {
  --price-top: 43%;
  --plate-top: 69%;
  --plate-height: 18.4%;
  --plate-text-width: 58%;
  --led-top: 10%;
  --led-left: 49.3%;
  --led-size: 4.9%;
}
.pedal-fretboard {
  --price-top: 43%;
  --plate-top: 66.3%;
  --plate-height: 20%;
  --plate-text-width: 56%;
  --led-top: 10.5%;
  --led-left: 49.8%;
  --led-size: 5.6%;
}
.pedal-linked {
  --price-top: 44%;
  --plate-top: 65.5%;
  --plate-height: 18.7%;
  --plate-text-width: 54%;
  --led-top: 12.2%;
  --led-left: 49.9%;
  --led-size: 5.6%;
}
.pedal-fretboard .pedal-name-tag {
  font-size: clamp(0.66rem, 0.78vw, 0.7rem);
}

/* silhouette varies per pedal: the button's own radius shapes its focus ring */
.pedal-popout { border-radius: var(--radius-lg); }
.pedal-fretboard { border-radius: var(--radius-sm); }
.pedal-linked { border-radius: var(--radius-sm); }

.pedal-jack {
  /* The product photos and cable artwork already contain their hardware;
     this invisible element only anchors responsive cable placement. */
  position: absolute;
  top: 47%;
  transform: translateY(-50%);
  width: 11px;
  height: 17px;
  z-index: 2;
  background: none;
  border: none;
  box-shadow: none;
}
.pedal-jack::after {
  content: none;
}
.pedal-jack.left { left: -10px; }
.pedal-jack.right { right: -10px; }

/* Low-profile right-angle patch leads drop toward the board between pedals,
   matching the bend and connector layout of real six-inch pedal cables. */
.cable-h {
  position: absolute;
  top: 47%;
  right: -63px;
  transform: translateY(-83px);
  width: 70px;
  height: 100px;
  background-image: url('../img/cables-reference.webp');
  background-repeat: no-repeat;
  background-size: 889% 434%;
  background-position: 25.3% 91.6%;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.cable-h > * { display: none; }

/* mobile pedal-to-pedal connector: exits the upper pedal's right jack,
   S-curves down, enters the lower pedal's left jack. Each instance is
   individually positioned via inline style (see 800px media query
   below); only shown when the board stacks one pedal per row. */
.cable-wrap {
  display: none;
  position: absolute;
  max-width: none;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.cable-out {
  position: absolute;
  top: 47%;
  transform: translateY(-10px);
  left: calc(100% - 12px);
  width: 240px;
  height: 60px;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.pedal-linked .cable-out { top: 49.5%; }

/* Woven tweed instrument cable: the SVG pattern carries opposing diagonal
   threads across the whole jacket, while the edge strokes give it roundness. */
.cable-shadow,
.cable-sheath,
.cable-glint {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.25s, opacity 0.25s;
}
.cable-shadow {
  stroke: var(--cable-shadow-stroke);
  stroke-width: 13;
  filter: var(--cable-shadow-filter);
}
.cable-sheath {
  stroke: url(#braidedCable);
  stroke-width: 9;
}
.cable-glint {
  stroke: rgba(255, 235, 190, 0.22);
  stroke-width: 1.2;
}
.cable-shadow.cable-perspective-mid { stroke-width: 11; }
.cable-sheath.cable-perspective-mid { stroke-width: 7.2; }
.cable-glint.cable-perspective-mid { stroke-width: 0.95; }
.cable-shadow.cable-perspective-far { stroke-width: 8.5; }
.cable-sheath.cable-perspective-far { stroke-width: 5.2; }
.cable-glint.cable-perspective-far { stroke-width: 0.7; }
.plug-tip {
  fill: url(#chromeMetal);
  stroke: #343330;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}
.plug-collar {
  fill: url(#chromeMetal);
  stroke: #2e2d2a;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.plug-body {
  fill: url(#chromeMetal);
  stroke: #b3afa4;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.72));
}
.plug-rib {
  fill: none;
  stroke: rgba(42, 41, 38, 0.65);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.plug-grip {
  fill: url(#knurlMetal);
  stroke: #4c4a45;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}
.plug-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, 0.56);
  stroke-width: 0.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.plug-sleeve {
  fill: url(#chromeMetal);
  stroke: #343330;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}
.plug-boot {
  fill: #151619;
  stroke: #45464a;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.cable-wrap .cable-sheath {
  stroke: #174eae;
  stroke-width: 10;
}
.cable-wrap .cable-glint {
  stroke: rgba(118, 165, 255, 0.62);
  stroke-width: 1.5;
}
.pedal[data-engaged="true"] .cable-sheath {
  filter: brightness(1.18) drop-shadow(0 0 3px rgba(196, 57, 40, 0.45));
}
.pedal[data-engaged="true"] .cable-wrap .cable-sheath { stroke: #2468de; }
.pedal[data-engaged="true"] .cable-glint { stroke: rgba(255, 229, 180, 0.4); }
.cable-always-on .cable-glint { stroke: rgba(255, 229, 180, 0.34); }

/* ---- the amp: set back and above the pedal row, boxier, angled ---- */

.amp-stage {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
  padding-right: 12px;
}

.amp-unit {
  position: relative;
  width: 410px;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0;
  background: none;
}
.amp-unit:hover { transform: translateY(-2px); }

.amp-photo {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--amp-shadow);
}

.amp-caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* one continuous cable: over the amp's top, down its left side, along
   the ground, into the first pedal — not two separate pieces */
.rig-cable {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 620px;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.rig-cable-mobile { display: none; }
.rig-cable-tablet { display: none; }

/* Where each long cable's authored path starts and ends, as a percentage of
   the amp photo's box (--rig-start) and the first pedal's box (--rig-end),
   measured at the layout each path was drawn against. main.js re-anchors the
   path ends to these points at any width, so the SVG stretching and the
   fixed-pixel pedals never drift apart. */
.rig-cable-desktop { --rig-start: -6.45 29.67; --rig-end: 11.36 48; }
.rig-cable-tablet { --rig-start: 12.95 28.62; --rig-end: -2.82 47.2; }
.rig-cable-mobile .cable-bundle { --rig-start: 12.29 43.05; --rig-end: -12.43 52.96; }

.pedal-sub {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--ink-faint);
}

/* readout panel beneath the rig */

.readout {
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--readout-edge);
  background: var(--readout-bg);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}
.readout-label {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  padding-top: 0.2rem;
  white-space: nowrap;
}
.readout-body .readout-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: var(--text-xl);
  margin-bottom: 0.4rem;
}
.readout-body p { color: var(--ink-dim); font-size: var(--text-base); }
.readout-body .readout-price {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: var(--text-sm);
}
.readout-body .readout-buy {
  margin-top: 0.75rem;
  margin-left: var(--space-2);
  padding: 0.5rem 1.1rem;
  font-size: var(--text-sm);
  vertical-align: baseline;
}
/* .btn sets a display, so the hidden attribute alone would not hide the
   button on the free-app readout. */
.readout-body .readout-buy[hidden] { display: none; }

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

section { padding-block: var(--space-6); }
section.tight { padding-block: var(--space-5); }

.section-head { max-width: 40rem; margin-bottom: var(--space-4); }
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: var(--space-2); }
.section-head p { color: var(--ink-dim); font-size: var(--text-md); }

/* board-list: what's on the board */

.board-list {
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-md);
  background: var(--ground-raised);
  overflow: hidden;
}
.board-list-item {
  display: grid;
  grid-template-columns: minmax(180px, 15rem) 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
}
.board-list-item + .board-list-item { border-top: 1px solid var(--panel-edge); }
.board-list-item .jack-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.board-list-item .jack-row .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--led-on);
  box-shadow: 0 0 8px 1px var(--led-on-glow);
  flex: none;
  transform: translateY(-2px);
}
.board-list-item h3 {
  font-size: var(--text-base);
  font-family: var(--font-mono);
  font-weight: 500;
}
.board-list-item p { color: var(--ink-dim); font-size: var(--text-sm); }

@media (max-width: 800px) {
  .board-list-item { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* signal-path / trust strip */

.signal-strip {
  background: var(--ground-raised);
  border-top: 1px solid var(--panel-edge);
  border-bottom: 1px solid var(--panel-edge);
}
.signal-path {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.signal-path .node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel);
}
.signal-path .node .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--led-on); }
.signal-path .lead { color: var(--ink-faint); margin: 0 0.75rem; }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.trust-item h4 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.trust-item p { color: var(--ink-dim); font-size: var(--text-sm); }

/* pricing */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-2);
}
.price-card {
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: var(--space-3);
}
.price-card .price-name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); margin-bottom: 0.3rem; }
.price-card .price-amount { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--accent); }
.price-card .price-trial { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); margin-top: 0.5rem; }
.price-card.bundle { border-color: var(--accent-dim); background: linear-gradient(180deg, var(--accent-soft), var(--panel) 60%); }
.price-card.free { border-color: var(--led-on); }
.price-card.free .price-amount { color: var(--led-on); }

.pricing-team {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--panel-edge);
}
.pricing-team-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.pricing-team-note { color: var(--ink-faint); font-size: var(--text-2xs); margin-bottom: var(--space-2); }
.team-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 210px)); justify-content: start; }
.price-card.team .price-amount { font-size: var(--text-xl); }

/* footer */

.site-footer {
  border-top: 1px solid var(--panel-edge);
  padding-block: var(--space-4);
  background: var(--ground);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 0.6rem; }
.footer-brand img { width: 24px; height: 24px; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; color: var(--ink-dim); }
.footer-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.footer-links a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-decoration: none;
}
.footer-links a:hover { color: var(--ink-dim); }
.footer-meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); margin-top: var(--space-2); }

/* ---------------- motion ---------------- */

/* The board's one authored entrance is a CSS animation, not a JS-added class,
   so the scene can never be left invisible by a script that fails to run. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rig-reveal {
    from { opacity: 0; transform: translateY(14px); }
  }
  .reveal { animation: rig-reveal 0.7s var(--ease-out) both; }
}

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

@media (max-width: 980px) {
  .readout { grid-template-columns: 1fr; }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .pedal-tray { padding-inline: 34px; }
  .board { justify-content: flex-start; gap: 34px; }
  .pedal-fretboard { width: 106px; margin-bottom: 8px; }
  .pedal-skins, .pedal-linked { width: 120px; }
  .pedal-popout { width: 144px; margin-bottom: -20px; }
  .cable-h { right: -39px; width: 44px; }
  .cable-h { height: 60px; transform: translateY(-50px); }
  .amp-unit { width: min(46%, 410px); }
  .rig-cable-desktop { display: none; }
  .rig-cable-tablet { display: block; }
}

@media (max-width: 800px) {
  .site-nav ul { display: none; }
  .site-nav .btn { padding: 0.6rem 1rem; }
  .hero { padding-block: var(--space-5) var(--space-4); }
  .rig { padding: var(--space-3) var(--space-2) var(--space-2); }
  .footer-grid { flex-direction: column; }
  .board-stage { min-height: 0; }
  .amp-stage { justify-content: center; padding-right: 0; margin-bottom: 18px; }
  .amp-unit { width: min(300px, 92%); }
  .rig-cable { display: none; }
  .rig-cable-mobile {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 720px;
    max-width: none;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
  }

  /* one pedal per row, consistently (no mixed 1-and-2 wrapping),
     with room on the sides and between rows to route cables later */
  .pedal-tray { position: relative; padding: 62px var(--space-3) var(--space-4); }
  .board { flex-direction: column; align-items: center; margin-left: 0; gap: 88px; }
  .pedal-skins, .pedal-popout, .pedal-fretboard, .pedal-linked { width: 154px; margin-bottom: 0; }
  .cable-h { display: none; }
  .cable-wrap {
    display: block;
    left: 0;
    top: 80px;
    width: 154px;
    height: 365px;
  }
  .cable-out { width: 140px; height: 48px; }
}