/* GENERATED by tools/build_css_bundles.py. Do not edit; edit the sources and rerun. */
/* ---- assets/css/main.css ---- */
/* ===========================================================
   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);
}
/* Trademark mark: small, faint and set in the label face so it never competes with the wordmark or heading. */
.brand .wordmark-tm,
.tm {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.55em;
  color: var(--ink-faint);
  margin-left: 0.1em;
  vertical-align: super;
  line-height: 0;
}

.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; }

.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;
}
/* The straight plug's centre is 11/60 of the SVG's height, so the SVG hangs
   that far above the jack: Linked's photographed right jack is centred at
   50.46% of the photo (middle of its chrome's box). Dan saw it sit high. */
.pedal-linked .cable-out { top: 50.46%; transform: translateY(-11px); }

/* 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 {
  /* The braid is the element's own stroke="url(#braidedCable)" attribute, not set
     here: some Chrome builds resolve url(#id) from an external stylesheet against the
     stylesheet, not the page, and paint nothing (seen 2026-09-26). Same for the plug
     fills below (fill="url(#chromeMetal)" / "url(#knurlMetal)" in the markup). */
  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 {
  stroke: #343330;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}
.plug-collar {
  stroke: #2e2d2a;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.plug-body {
  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 {
  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 {
  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;
}
.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-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;
}


/* Holds the shared <defs> for every cable and plug, so it is never display:none
   or zero-sized (browsers paint nothing from defs in a hidden SVG). Its own
   drawing, the phone amp lead, only shows at <=800px. */
.rig-lead {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.rig-lead > g { display: none; }
.board-nav { 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; }

.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); }
.footer-meta.footer-tm { margin-top: 0.25rem; }

/* ---------------- 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; }
}

/* Header links hide at 900px, not 800px: from 801px up they wrapped onto two lines and pushed
   into the logo (Dan saw it on a tablet-width window, 2026-09-27). The full header needs ~800px. */
@media (max-width: 900px) {
  .site-nav ul { display: none; }
  .site-nav .btn { padding: 0.6rem 1rem; }
}

@media (max-width: 800px) {
  .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; }
}

/* <=1100px: the amp sits above one row of pedals. Below the desktop width the
   hand-drawn long cable cannot be kept attached (the old tablet path had no
   plugs and drifted off both jacks), so the lead is drawn live instead. */
@media (max-width: 1100px) {
  .board-stage { min-height: 0; }
  .amp-stage { justify-content: center; padding-right: 0; margin-bottom: 22px; }
  .amp-unit { width: min(230px, 68%); }
  .rig-cable { display: none; }

  /* main.js draws this lead from the live amp jack to the live first-pedal
     jack, and redraws it as the board scrolls. overflow (not clip-path) keeps
     it inside the stage, so a pedal scrolled out of view takes its cable along. */
  .rig-lead { overflow: hidden; }
  .rig-lead > g { display: inline; }

  /* One row of pedals the visitor swipes (or drags, or steps with the arrows),
     at the tablet sizes, with the photographed patch leads between them. */
  .pedal-tray { position: relative; padding: 0; }
  .board {
    z-index: 3;
    justify-content: safe center;
    gap: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 34px 44px 62px 84px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 24px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .board::-webkit-scrollbar { display: none; }
  .board.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .board .pedal { scroll-snap-align: center; }
  .pedal-skins, .pedal-linked { width: 120px; margin-bottom: 0; }
  /* Measured, not the desktop margins scaled (the patch-lead sprite shrinks to
     60%, the pedals to 80%): each jack's centre is the middle of its chrome's
     bounding box in the photo, each right-angle plug's centre is where the
     diagonals of its horizontal barrel's box cross (Dan's method), and the
     margins put them within 1px. Linked's photographed jacks sit lower. */
  .pedal-linked { margin-bottom: 1.5px; }
  .pedal-fretboard { width: 106px; margin-bottom: 9px; }
  .pedal-popout { width: 144px; margin-bottom: -20px; }
  .cable-h { right: -39px; width: 44px; height: 60px; transform: translateY(-50px); }
  .cable-out { width: 120px; height: 44px; }
  .pedal-linked .cable-out { transform: translateY(-8.07px); } /* 11/60 of 44px */

  /* Arrow buttons for mice and keyboards, added by main.js; hidden at either end. */
  .board-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 8px;
    z-index: 5;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--panel-edge);
    border-radius: 50%;
    background: rgba(16, 13, 10, 0.82);
    color: var(--ink);
    font: 600 1.1rem/1 var(--font-mono);
    cursor: pointer;
  }
  .board-nav:hover { border-color: var(--aluminum-dim); }
  .board-nav.prev { left: 8px; }
  .board-nav.next { right: 8px; }
  .board-nav[hidden] { display: none; }

  .readout { margin-top: var(--space-3); }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .amp-unit { width: 290px; }
}

/* ---- demo/demo.css ---- */
/* Landing-page and shared page styles, loaded by every page after main.css. */
[data-theme="dark"] .landing-demo { --ink-dim: #b5afa5; }
[data-theme="dark"] .landing-demo .pedal-tray { --ink-dim: #b5afa5; }
.brand .wordmark-set { color: var(--wordmark-set); }
.brand .wordmark-liner { color: var(--wordmark-liner); }
.landing-demo [id] { scroll-margin-top: 6rem; }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 100; background: var(--ink); color: var(--ground); padding: 1rem; }
.skip-link:focus { top: 1rem; }
.demo-banner { border-bottom: 1px solid var(--panel-edge); font: .75rem/1.5 var(--font-mono); color: var(--ink-dim); }
.demo-banner .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: .65rem; flex-wrap: wrap; }
.demo-banner a { text-underline-offset: .2em; }
.landing-demo .site-header { background: var(--header-bg); }
.landing-demo .site-nav .btn-primary { color: var(--void); }
.landing-demo .btn { border-radius: 6px; box-shadow: none; }
.demo-hero { padding-top: 3rem; padding-bottom: 4rem; background: var(--ground); }
.demo-intro { display: grid; grid-template-columns: 1.35fr 1fr; align-items: start; gap: 3rem; margin-bottom: 7.5rem; }
.demo-intro h1 { font-size: clamp(3.2rem, 6.1vw, 5.2rem); line-height: 1.02; letter-spacing: -.055em; }
.demo-intro h1 span { color: var(--headline-accent); }
.demo-lede { max-width: 26rem; padding-bottom: .3rem; }
.demo-lede > p:first-of-type { color: var(--ink); font-size: 1.25rem; line-height: 1.4; margin-bottom: 1.25rem; }
.demo-lede p { color: var(--ink-dim); }
.demo-lede .text-link { display: inline-block; margin-top: 1.4rem; }
.text-link { font: .9rem/1.6 var(--font-mono); text-decoration: underline; text-underline-offset: .3em; }
.text-link:hover { color: var(--accent); }
.demo-lede .platforms { margin-top: 1.5rem; font: .8rem/1.7 var(--font-mono); }
.rig-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rig-heading h2 { font-size: 1.2rem; letter-spacing: -.025em; }
.rig-heading p { color: var(--ink-dim); font: .85rem/1.5 var(--font-mono); }
.demo-rig { border-radius: 8px; box-shadow: none; }
.demo-rig .readout { border-radius: 6px; }
.demo-rig .readout-label { font-size: .8rem; }
.demo-section { padding-block: 5rem; }
.editorial-grid { display: grid; grid-template-columns: 1fr 1.65fr; gap: 5rem; }
.section-intro h2, .download-layout h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
.section-intro > p { color: var(--ink-dim); margin-top: 1.25rem; }
.section-intro .release-note { font-size: .9rem; max-width: 30ch; margin-top: 2rem; }
.task-list article { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--panel-edge); }
.task-list article:last-child { border-bottom: 1px solid var(--panel-edge); }
.row-number { font: .85rem/1.8 var(--font-mono); color: var(--ink-faint); }
.task-list h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.task-list p, .offline-copy > p, .offline-copy details p, .download-status p { color: var(--ink-dim); line-height: 1.7; }
.catalog-section { background: var(--ground-raised); border-block: 1px solid var(--panel-edge); }
.price-list { margin: 0; }
.price-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; border-bottom: 1px solid var(--panel-edge); padding-block: 1.4rem; }
.price-list > div:first-child { padding-top: 0; }
.price-list dt { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.price-list dt span { display: block; font: 400 1rem/1.6 var(--font-body); color: var(--ink-dim); margin-top: .2rem; }
.price-list dd { margin: 0; font: 500 1.15rem/1.7 var(--font-mono); white-space: nowrap; display: grid; justify-items: end; gap: .35rem; align-content: start; }
.price-list .buy-link {
  font: 500 .85rem/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  padding: .45rem .95rem;
  transition: border-color .18s var(--ease-out), color .18s var(--ease-out), background .18s var(--ease-out);
}
.price-list .buy-link:hover,
.price-list .buy-link:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.price-list .pro-row .buy-link { color: var(--void); background: var(--btn-primary-bg); border-color: transparent; }
.price-list .pro-row .buy-link:hover,
.price-list .pro-row .buy-link:focus-visible { background: var(--btn-primary-bg); filter: brightness(1.08); }
/* A 30px pill is a fine desktop target and a poor thumb one. */
@media (max-width: 767px) {
  .price-list .buy-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 1.2rem; }
}
.price-list .pro-row { padding-block: 1.7rem; border-bottom-color: var(--strong-rule); }
.pro-row dt, .pro-row dd { font-size: 1.6rem; }
details { border-bottom: 1px solid var(--panel-edge); }
summary { padding-block: 1.3rem; cursor: pointer; font: .9rem/1.6 var(--font-mono); }
details[open] summary { margin-bottom: .4rem; }
/* Dan, 2026-09-27: the label sat at .9rem under the 1.6rem Setliner Pro row and got lost; a step up, full ink. */
.team-pricing summary { font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.team-pricing > div { padding-bottom: 1.5rem; }
.team-pricing p { color: var(--ink-dim); margin-bottom: 1.2rem; }
.team-pricing .price-list { margin-bottom: 1rem; }
.team-pricing dt, .team-pricing dd { font-size: 1rem; }
.offline-copy .large-copy { color: var(--ink); font-size: 1.5rem; line-height: 1.45; margin-bottom: 1.2rem; max-width: 30ch; }
.offline-copy details { margin-top: 1rem; }
.offline-copy details p { margin-bottom: 1rem; }
.download-section { border-top: 1px solid var(--panel-edge); padding-bottom: 6rem; }
.download-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: start; }
.download-layout > div > p { margin-top: 1.25rem; color: var(--ink-dim); }
.download-status h3 { font-size: 1.25rem; }
.download-status .btn { margin: 1.5rem 1rem 1rem 0; }
.download-status .text-link { display: inline-block; }
.footer-tagline { margin-top: 1rem; font: .85rem/1.6 var(--font-mono); color: var(--ink-dim); }
@media (max-width: 1000px) {
  .demo-intro { gap: 2rem; }
  .editorial-grid { gap: 2.5rem; grid-template-columns: 1fr 1.4fr; }
  .site-nav { gap: 1rem; }
}
@media (max-width: 800px) {
  .demo-hero { padding-top: 2.5rem; }
  .demo-intro { grid-template-columns: 1fr; gap: 1.75rem; margin-bottom: 5rem; }
  .demo-intro h1 { font-size: clamp(2.9rem, 9vw, 4.4rem); }
  .demo-lede { max-width: 38rem; }
  .demo-lede > p:first-of-type { font-size: 1.1rem; }
  .editorial-grid, .download-layout { grid-template-columns: 1fr; gap: 2rem; }
  .demo-section { padding-block: 3rem; }
  .section-intro .release-note { max-width: 45ch; margin-top: 1rem; }
  .demo-rig .readout { grid-template-columns: 1fr; gap: .5rem; padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-demo *, .landing-demo *::before, .landing-demo *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Download panel. Issue #4843 finding 1: these two were inline `style=` attributes, which forced any
   Content-Security-Policy to carry `style-src 'unsafe-inline'` - and that allowance is what a CSP is
   mostly for removing. The site has no inline scripts and no event handlers, so these twelve attributes
   were the only thing standing between it and `style-src 'self'`. Same declarations, moved. */
/* `p.` rather than the bare class: `.download-status p` above sets a line-height and is equally
   specific, so a lone class would lose it - the inline attribute this replaces never had to care. */
p.download-fineprint { font-size: .75rem; line-height: 1.5; }
.download-hash { font-family: var(--font-mono); font-size: 1em; word-break: break-all; }

/* Header theme toggle. theme.js adds the button, so a visitor without JavaScript never sees a control that cannot work. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--panel-edge); border-radius: 6px; background: transparent; color: var(--ink-dim); cursor: pointer; transition: color .15s, border-color .15s; }
.theme-toggle:hover { color: var(--ink); border-color: var(--aluminum-dim); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.site-nav .theme-toggle { margin-left: calc(var(--space-2) - var(--space-4)); }

/* Hero: the three promises and the download action. */
.hero-lead { margin: 0 0 1.5rem; padding-left: .9rem; border-left: 4px solid var(--ink); color: var(--ink); font: 700 clamp(1.9rem, 3.4vw, 2.5rem)/1.08 var(--font-display); letter-spacing: -.035em; }
.hero-lead span { display: block; margin-top: .45rem; color: var(--ink-dim); font: 400 1.05rem/1.45 var(--font-body); letter-spacing: 0; }
.hero-promise { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 1px solid var(--panel-edge); }
.hero-promise li { padding: .7rem 0; border-bottom: 1px solid var(--panel-edge); color: var(--ink-dim); font-size: var(--text-base); }
.hero-promise strong { color: var(--ink); font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; margin-right: .3rem; }
.demo-lede .hero-actions { gap: 1.4rem; }
.demo-lede .hero-actions .text-link { margin-top: 0; }

/* Where Setliner runs, and what each platform's status is today. */
.platform-strip { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 2.5rem; border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--ground-raised); overflow: hidden; }
.platform-strip > div { padding: 1rem 1.2rem; border-left: 1px solid var(--panel-edge); }
.platform-strip > div:first-child { border-left: 0; }
.platform-strip dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--ink); }
.platform-strip dd { margin: .15rem 0 0; font: .8rem/1.5 var(--font-mono); color: var(--ink-dim); }
.platform-strip a { color: var(--accent); text-underline-offset: .25em; }
.platform-strip .later dt { color: var(--ink-faint); }

/* App screenshots. */
.shots-section { padding-top: 2rem; }
.shots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 3rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.shots-head h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
.shots-head p { color: var(--ink-dim); max-width: 26rem; }
/* One strip of thumbnails (small copies in img/screens/thumbs/); each links to the
   full-size image, which main.js opens in the .shot-viewer dialog. Dan chose the
   strip over three-across, 2026-09-27: it took the section from ~1,800px to ~460px. */
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.thumb { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-md); }
.thumb img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  border: 4px solid var(--shot-bezel); border-radius: var(--radius-md); background: var(--shot-bezel);
  box-shadow: 0 18px 28px -20px rgba(6, 38, 63, 0.5);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.thumb:hover img, .thumb:focus-visible img { transform: translateY(-3px); box-shadow: 0 22px 32px -20px rgba(6, 38, 63, 0.5); }
.thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.thumb-cap { display: block; margin-top: .6rem; font: .7rem/1.45 var(--font-mono); color: var(--ink-faint); }

/* The full-size viewer: a native <dialog>, so Esc, focus handling and the backdrop come
   free. Dark in both themes (a lightbox), so like the pedal tray it pins dark-theme ink. */
.shot-viewer {
  --ink: #EEEAE1;
  --ink-dim: #B5AFA5;
  --ink-faint: #8D877D;
  --panel-edge: #3A352F;
  --void: #0B0A09;
  width: min(96vw, 1400px); max-width: none; max-height: 96vh; padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow: visible;
}
.shot-viewer::backdrop { background: rgba(6, 8, 10, 0.88); }
.shot-viewer figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.shot-viewer img { display: block; max-width: 100%; max-height: calc(96vh - 7rem); width: auto; height: auto; border: 6px solid var(--void); border-radius: var(--radius-md); background: var(--void); }
.shot-viewer figcaption { margin-top: .8rem; font: .8rem/1.5 var(--font-mono); color: var(--ink-dim); text-align: center; padding-inline: 3rem; }
.viewer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; font: .75rem/1 var(--font-mono); color: var(--ink-faint); }
.viewer-close, .viewer-nav {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--panel-edge); border-radius: 50%; background: rgba(16, 13, 10, 0.85); color: var(--ink);
  font: 600 1.3rem/1 var(--font-mono); cursor: pointer;
}
.viewer-close:hover, .viewer-nav:hover { border-color: var(--ink-faint); }
.viewer-nav { position: absolute; top: 50%; margin-top: -20px; }
.viewer-nav.prev { left: -8px; }
.viewer-nav.next { right: -8px; }
@media (min-width: 1200px) { .viewer-nav.prev { left: -56px; } .viewer-nav.next { right: -56px; } }

/* Install and verification notes fold away under each download. */
.download-status .btn { margin-bottom: .5rem; }
.download-help { margin: 0 0 2rem; border-bottom: 0; }
.download-help summary { padding-block: .5rem; font-size: .8rem; color: var(--accent); }
.download-help[open] summary { margin-bottom: .2rem; }
.download-help p.download-fineprint { font-size: .85rem; line-height: 1.6; padding-bottom: .5rem; }

@media (max-width: 800px) {
  .platform-strip { grid-template-columns: 1fr 1fr; }
  .platform-strip > div { border-left: 0; border-top: 1px solid var(--panel-edge); }
  .platform-strip > div:nth-child(-n+2) { border-top: 0; }
  .platform-strip > div:nth-child(even) { border-left: 1px solid var(--panel-edge); }
  .platform-strip .later { grid-column: 1 / -1; }
  /* Still one strip on a phone: it scrolls sideways (like the pedalboard), with the
     next tile peeking in. */
  .thumbs {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; gap: .75rem;
    overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    padding-bottom: 1.25rem; scrollbar-width: thin;
  }
  .thumbs li { scroll-snap-align: start; }
  .site-nav .theme-toggle { margin-left: 0; width: 2.4rem; height: 2.4rem; }
}
@media (min-width: 801px) and (max-width: 1000px) { .site-nav .theme-toggle { margin-left: 0; } }
/* Store badges (Google Play, App Store). Each store's elements carry data-store="<store>" and start
   hidden; the wording they replace carries data-store-off="<store>". tools/store_switch.py flips one
   store. Official artwork, unmodified: Apple's badge at its 40px minimum height, Google's PNG at 60px
   so its visible badge (the PNG includes Google's clear space) matches Apple's height. */
[data-store][hidden], [data-store-off][hidden] { display: none !important; }
.download-status p.store-badge-row { margin: .75rem 0 1.5rem; line-height: 0; }
.store-badge { display: inline-block; }
.store-badge img { display: block; height: auto; }
.store-badge-play { margin-left: calc(-60px * 41 / 250); }
.store-badge-play img { width: 155px; }
.store-badge-apple { margin-block: 10px; }
.store-badge-apple img { width: 120px; }
/* Microsoft's SVG at 40px tall, like Apple's; it sits under the Windows installer button. */
.store-badge-microsoft img { width: 146px; }
.download-status p.store-legal { margin-top: .5rem; color: var(--ink-faint); }

/* ==== Home page layout, 2026-09-27 (Dan approved the mock-up in .scratch/showcase-mock/) ====
   Rules that would change /demo/ are scoped to body.page-home. The download list below is
   shared: both pages carry the same download panel. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero: the headline sits level with the text beside it; the platforms are one quiet line. */
.page-home .demo-hero { padding-bottom: 2rem; }
.page-home .demo-intro { align-items: center; margin-bottom: 4rem; }
.runs-on { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--panel-edge); }
.runs-label { margin-right: .3rem; font: 600 .72rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.chip { padding: .38rem .6rem; border: 1px solid var(--panel-edge); border-radius: 999px; background: var(--ground-raised); font: 500 .78rem/1 var(--font-mono); color: var(--ink); }
.chip-later { color: var(--ink-faint); border-style: dashed; }
.runs-link { flex-basis: 100%; margin-top: .5rem; font-size: .85rem; }

/* Screenshots: one large picture; the thumbnails pick it; the picture opens the .shot-viewer. */
.hero-shots { margin: 0 0 3rem; scroll-margin-top: 6rem; }
.hero-shots .shots-head { margin-bottom: 1.75rem; }
.showcase { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; }
.showcase-stage { position: relative; display: block; border-radius: var(--radius-md); }
.showcase-stage img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain;
  border: 6px solid var(--shot-bezel); border-radius: var(--radius-md); background: var(--shot-bezel);
  box-shadow: 0 30px 50px -30px rgba(6, 38, 63, 0.5); transition: opacity .18s var(--ease-out); }
.showcase-stage.swapping img { opacity: 0; }
.showcase-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.stage-zoom { position: absolute; right: 1rem; bottom: 1rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(11, 10, 9, 0.72);
  font: .72rem/1 var(--font-mono); color: #EEEAE1; opacity: 0; transition: opacity .2s var(--ease-out); }
.showcase-stage:hover .stage-zoom, .showcase-stage:focus-visible .stage-zoom { opacity: 1; }
.showcase-cap { min-height: 3em; margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; scrollbar-width: none; }
.picks::-webkit-scrollbar { display: none; }
.pick { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.pick img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border: 3px solid var(--shot-bezel); border-radius: 8px;
  background: var(--shot-bezel); opacity: .6; transition: opacity .15s, transform .15s; }
.pick:hover img { opacity: .9; transform: translateY(-2px); }
.pick[aria-pressed="true"] img { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The thumbnail row on phones and tablets: swipe or drag it; a fade marks the side with more,
   and the pager (arrows plus one dot per picture) shows where you are. main.js adds both. */
.picks.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.picks.dragging .pick { pointer-events: none; }
.picks.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.picks.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
.picks.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.slider-pager { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .7rem 0 0; }
.slider-pager[hidden] { display: none; }
.pager-dots { display: flex; gap: .45rem; }
.pager-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--panel-edge); cursor: pointer; transition: background .2s, width .2s; }
.pager-dot.on { width: 18px; border-radius: 4px; background: var(--accent); }
.pager-arrow { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--panel-edge); border-radius: 50%; background: var(--ground-raised); font: 600 1rem/1 var(--font-mono); color: var(--ink); cursor: pointer; }
.pager-arrow:disabled { opacity: .35; cursor: default; }
.pager-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The free app: heading row, then the three steps beside a real screen. */
.free-split { padding-bottom: 2.5rem; }
.free-split .section-intro { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 3rem; margin-bottom: 2.5rem; }
.free-split .section-intro > p { max-width: 26rem; margin-top: 0; }
.free-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.free-shot { position: sticky; top: 7rem; margin: 0; }
.free-shot img { display: block; width: 100%; height: auto; border: 6px solid var(--shot-bezel); border-radius: var(--radius-md);
  background: var(--shot-bezel); box-shadow: 0 30px 50px -30px rgba(6, 38, 63, 0.5); }
.free-shot-portrait { justify-self: center; width: min(100%, 21rem); }
.free-shot figcaption { margin-top: .7rem; font: .72rem/1.5 var(--font-mono); color: var(--ink-faint); }

/* Prices and the board are one block: heading row, the board, then the cards right under it.
   A pedal that is on lights its card and main.js moves that card into the first slot. */
.pricing-board .section-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 3rem; align-items: end; margin-bottom: 1.5rem; }
.pricing-board .section-intro > h2 { grid-column: 1; grid-row: 1; }
.pricing-board .section-intro > p.trial-line { grid-column: 1; grid-row: 2; margin-top: .6rem; font-weight: 500; color: var(--ink); }
.pricing-board .section-intro > p.price-line { grid-column: 1; grid-row: 3; margin-top: .2rem; }
.pricing-board .section-intro > p.board-hint { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0;
  font: .85rem/1.5 var(--font-mono); color: var(--ink-dim); white-space: nowrap; }
.board-slot { margin-bottom: 1rem; }
.pricing-board .catalog > .price-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pricing-board .catalog > .price-list > div { grid-template-columns: minmax(0, 1fr) auto; padding: 1.4rem 1.5rem; border: 1px solid var(--panel-edge);
  border-radius: var(--radius-md); background: var(--ground); scroll-margin: 7rem 0 2rem;
  transition: border-color .25s, box-shadow .25s, background .25s, transform .25s; }
.pricing-board .catalog > .price-list > div.pro-row { grid-column: 1 / -1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pricing-board .catalog > .price-list > div.lit { border-color: var(--led-on); background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--led-on) inset, 0 0 26px -6px var(--led-on-glow); transform: translateY(-2px); }
.pricing-board .catalog > .price-list > div.pro-row.includes-lit { box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 1px var(--led-on-glow); }
.price-list dt .lit-badge { display: none; margin-left: .5rem; padding: .18rem .45rem; border-radius: 999px; vertical-align: middle;
  background: var(--led-on); font: 600 .62rem/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--void); }
.price-list .lit dt .lit-badge { display: inline-block; }
.price-list .pro-note { display: none; margin-top: .35rem; font: 500 .72rem/1.4 var(--font-mono); color: var(--ink-faint); }
.price-list .pro-row.includes-lit .pro-note { display: block; }
.price-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; margin-top: 1.5rem; }
.price-notes .release-note { margin: 0; font-size: .85rem; color: var(--ink-dim); }
.pricing-board .team-pricing { margin-top: 1.5rem; }
.more-toggle { display: none; }

/* Offline: a compact panel, heading beside the copy. */
.offline-panel { padding-block: 3rem 1rem; }
.offline-panel > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem 3rem; align-items: start;
  padding-inline: 2.2rem; border: 1px solid var(--panel-edge); border-radius: var(--radius-md); background: var(--ground-raised); }
.offline-panel > .wrap > * { padding-block: 2rem; }
.offline-panel .section-intro h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.offline-panel .offline-copy .large-copy { max-width: none; margin-bottom: .6rem; font-size: 1.15rem; }
.offline-panel .offline-copy details { margin-top: .6rem; }

/* Downloads: the heading beside (laptops) or above (tablets, phones) one compact list, a row
   per platform: name and a short detail line, the button or store badge, a fold-out for help. */
.download-section { padding-top: 3rem; }
.download-split > div:first-child { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }
.download-split h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
.download-split > div:first-child > p { margin-top: 1rem; color: var(--ink-dim); }
.dl-list { overflow: hidden; border: 1px solid var(--panel-edge); border-radius: var(--radius-md); background: var(--ground-raised); }
.dl-row { display: grid; grid-template-columns: minmax(0, 1fr) 19rem 13rem; gap: .5rem 1.5rem; align-items: center; padding: 1rem 1.4rem; }
.dl-row + .dl-row { border-top: 1px solid var(--panel-edge); }
.dl-name { display: block; font: 700 1.1rem/1.3 var(--font-display); color: var(--ink); }
.download-split .dl-meta p { margin: .1rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-dim); }
.download-split .dl-action .btn { margin: 0; padding: .6rem 1rem; font-size: .8rem; white-space: nowrap; }
.download-split .dl-action p.store-badge-row { margin: 0; }
.download-split .dl-action .btn + p.store-badge-row { margin-top: .6rem; }
.download-split .dl-help .download-help { margin: 0; }
.dl-row:has(.download-help[open]) .dl-help { grid-column: 1 / -1; }
.download-split .dl-help summary { font-size: .8rem; }
.download-split .dl-help .download-fineprint { margin: .4rem 0 0; font-size: .85rem; line-height: 1.6; }
.dl-foot { margin-top: .8rem; }
.download-split .dl-foot p.store-legal { margin: .2rem 0 0; font-size: .72rem; color: var(--ink-faint); }
.dl-faq { margin: 1.5rem 0 0; text-align: center; }

@media (min-width: 1001px) {
  .download-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 3rem; align-items: start; }
  .download-split > div:first-child { max-width: none; margin: 0; text-align: left; }
  .download-split > div:first-child > p br { display: none; }
  .dl-row { grid-template-columns: minmax(0, 1fr) auto 11rem; padding: .8rem 1.2rem; }
}
@media (max-width: 1000px) {
  .free-grid { gap: 2rem; }
  .dl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dl-help { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .page-home .demo-intro { margin-bottom: 3rem; }
  .showcase { grid-template-columns: 1fr; gap: .9rem; }
  .showcase-side { display: flex; flex-direction: column; }
  .showcase-cap { order: 2; min-height: 0; margin: .8rem 0 0; font-size: .92rem; }
  .picks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 26%; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .5rem; }
  .picks li { scroll-snap-align: start; }
  .free-grid { grid-template-columns: 1fr; }
  .free-shot { position: static; }
  .free-shot-portrait { width: min(100%, 18rem); margin-inline: auto; }
  .pricing-board .section-intro { grid-template-columns: 1fr; }
  .pricing-board .section-intro > * { grid-column: 1; }
  .pricing-board .section-intro > p.board-hint { grid-column: 1; grid-row: 4; margin-top: .6rem; white-space: normal; }
  .pricing-board .catalog > .price-list { grid-template-columns: 1fr; }
  .pricing-board .catalog > .price-list > div { padding: 1.1rem; }
  /* Each feature shows two lines of its description; "More" opens the rest. */
  .pricing-board .catalog > .price-list dt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pricing-board .catalog > .price-list > div.open dt span { display: block; }
  .more-toggle { display: inline; margin-top: .35rem; padding: 0; border: 0; background: none; font: 500 .8rem/1.4 var(--font-mono);
    color: var(--accent); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
  .price-notes { grid-template-columns: 1fr; }
  .offline-panel > .wrap { grid-template-columns: 1fr; gap: 0; width: auto; margin-inline: 1rem; padding-inline: 1.3rem; }
  .offline-panel > .wrap > * { padding-block: 1.3rem 0; }
  .offline-panel > .wrap > :last-child { padding-bottom: 1.3rem; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 800px) { .picks { cursor: grab; } }
@media (max-width: 600px) {
  .dl-row { grid-template-columns: 1fr; gap: .25rem; padding: .85rem 1rem; }
  .download-split .dl-action { margin-top: .45rem; }
  .download-split > div:first-child { margin-bottom: 1.5rem; }
}

/* ---- assets/css/practice-mic.css ---- */
/* Local Practice launch preview. The existing amp and cable geometry is untouched. */
.practice-art, .practice-amp-label { position:absolute; pointer-events:none; }
.practice-art { width:370px; height:auto; z-index:2; visibility:hidden; }
.practice-art-front { clip-path:inset(0 0 40% 0); }
.practice-amp-label { text-align:center; font:400 11px var(--font-mono); color:var(--ink-dim); }
.practice-control.pedal { position:absolute; display:block; width:370px; height:247px; z-index:2; pointer-events:none; visibility:hidden; transform:none; filter:none; transition:none; }
.practice-control::before, .practice-control::after { display:none; }
.practice-label, .practice-target { position:absolute; display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer; border-radius:5px; }
.practice-label { width:72px; height:48px; font:400 11px var(--font-mono); color:var(--ink-dim); }
.practice-label.on-tray { color:#EEEAE1; }
.practice-target { width:48px; height:48px; }
.practice-control[data-engaged="true"] .practice-label { color:var(--accent); font-weight:600; }
.practice-control[data-engaged="true"] .practice-label.on-tray { color:#66BFFF; }
.practice-control:focus-visible { outline:none; }
.practice-control:focus-visible .practice-label { outline:2px solid var(--accent); outline-offset:2px; }
.practice-ready .practice-art, .practice-ready .practice-control { visibility:visible; }
.practice-ready.practice-small .amp-caption { visibility:hidden; }
.practice-small .practice-art-back { display:none; }
.practice-small .practice-art-front { clip-path:none; transform:scaleX(-1); }
.practice-card[hidden] { display:none!important; }
.practice-status { font:400 .8rem var(--font-mono); color:var(--ink-dim); }


.practice-shape { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.practice-shape line { stroke:transparent; stroke-width:32px; stroke-linecap:round; pointer-events:stroke; cursor:pointer; }
.practice-status { max-width:7.5rem; white-space:normal; text-align:right; line-height:1.5; }

/* Price-only arithmetic preview: site tokens follow the light/dark toggle. */
.practice-savings { margin-top:2rem; scroll-margin-top:7rem; padding:clamp(1rem,3vw,1.5rem); border:1px solid var(--panel-edge); border-radius:var(--radius-md); background:var(--panel); color:var(--ink); }
.practice-savings h3 { margin:0; font-family:var(--font-display); font-size:1.35rem; }
.practice-savings-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem; margin-bottom:.75rem; }
.practice-savings-toggle { min-height:44px; padding:.55rem 1.1rem; }
.practice-savings-toggle[hidden], #practice-savings-body[hidden] { display:none; }
.practice-savings-head:has(+ #practice-savings-body[hidden]) { margin-bottom:0; }
.practice-savings p { color:var(--ink-dim); }
.practice-savings-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:1rem; align-items:start; }
.practice-savings label { display:block; margin-bottom:.5rem; font:.85rem var(--font-mono); }
.practice-savings input, .practice-savings select { box-sizing:border-box; width:100%; min-width:0; min-height:48px; padding:.65rem; border:1px solid var(--panel-edge); border-radius:var(--radius-sm); background:var(--ground); color:var(--ink); font:1rem var(--font-mono); }
.practice-savings input:focus-visible, .practice-savings select:focus-visible, .practice-savings button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.practice-savings-fields .btn { margin-top:1.8rem; min-height:48px; }
.practice-savings #practice-monthly-help { font-size:.85rem; }
.practice-savings #practice-savings-error:not(:empty) { color:var(--ink); border-left:3px solid var(--accent); padding-left:.75rem; }
.practice-savings-years { list-style:none; padding:0; margin:1rem 0; }
.practice-savings-years li { padding:1rem 0; border-top:1px solid var(--panel-edge); }
.practice-savings-years h4 { margin:0 0 .5rem; font:500 1rem var(--font-mono); }
.practice-savings-years dl { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.practice-savings-years dt { font-size:.85rem; color:var(--ink-dim); }
.practice-savings-years dd { margin:.35rem 0 0; font:400 1rem var(--font-mono); overflow-wrap:anywhere; }
.practice-savings-years dd span { display:block; margin-top:.35rem; font:.85rem/1.5 var(--font-sans); color:var(--ink-dim); }
@media (max-width:800px) {
  .practice-savings-fields { grid-template-columns:minmax(0,1fr); }
  .practice-savings-fields .btn { margin-top:0; justify-self:start; }
  .practice-savings-years dl { grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .practice-savings-years dl > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.75rem; }
  .practice-savings-years dd { margin:0; }
}
@media (prefers-reduced-motion:reduce) { .practice-savings .btn { transition:none; transform:none; } }

/* ---- assets/css/team-pricing.css ---- */
/* Approved outlined team invitation. */
.page-home .team-pricing{border:0}
.page-home .team-pricing>summary{display:flex;align-items:center;gap:1.25rem;padding:1.15rem 1.4rem;
  border:2px solid var(--accent);border-radius:var(--radius-md);background:var(--panel);color:var(--ink);
  list-style:none;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;box-shadow:none;transform:none}
.page-home .team-pricing>summary:hover{background:var(--accent-soft);transform:none;box-shadow:none}
.page-home .team-pricing>summary::-webkit-details-marker{display:none}
.page-home .team-pricing>summary::after{content:"";flex:0 0 .65rem;height:.65rem;margin-right:.2rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s ease}
.page-home .team-pricing[open]>summary::after{transform:rotate(225deg)}
.page-home .team-pricing[open]>summary{margin-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom-width:1px}
.page-home .team-pricing>div{padding:1.5rem;border:1px solid var(--panel-edge);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md);background:var(--panel)}
.tp-text{display:grid;gap:.3rem;flex:1 1 auto;min-width:0}
.tp-title{font:700 clamp(1.25rem,2.4vw,1.6rem)/1.2 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.tp-benefit{font:400 .98rem/1.5 var(--font-body);color:var(--ink-dim)}
.tp-side{display:grid;justify-items:end;gap:.2rem;flex:0 0 auto;text-align:right}
.tp-seats{font:500 .92rem/1.3 var(--font-mono);color:var(--ink)}
.tp-cue{font:500 .82rem/1.3 var(--font-mono);color:var(--accent)}
.team-pricing[open] .tp-show,.tp-hide{display:none}.team-pricing[open] .tp-hide{display:inline}
@media (max-width:640px){.page-home .team-pricing>summary{position:relative;flex-wrap:wrap;align-items:flex-start;padding-right:3rem}.tp-side{justify-items:start;text-align:left;flex-basis:100%}.page-home .team-pricing>summary::after{position:absolute;top:1.45rem;right:1.3rem;width:.65rem;margin:0}}
@media (prefers-reduced-motion:reduce){.page-home .team-pricing>summary,.page-home .team-pricing>summary::after{transition:none}}

.page-home .team-pricing>summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* ---- assets/css/watch.css ---- */
/* The 60-second video: the home-page gallery tile (.showcase-video, .pick-video) and the /watch/ page (.watch-page).
   Portrait 9:16 video; aspect-ratio reserves the space so nothing shifts when the poster loads. No inline styles (CSP). */
.watch-frame { margin: 0; justify-self: center; width: min(100%, 22rem); }
.watch-frame video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--shot-bezel); border: 1px solid var(--panel-edge); border-radius: var(--radius-md); }
.watch-frame figcaption { margin-top: .6rem; font: var(--text-xs, .85rem)/1.5 var(--font-mono); color: var(--ink-faint); }
.watch-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2.5rem 4rem; align-items: center; }
.watch-copy h2 { margin: 0 0 1rem; }
.watch-copy p { max-width: var(--measure); color: var(--ink-dim); }
.watch-copy .text-link { display: inline-block; margin-top: .4rem; }
.watch-transcript { margin-top: 1.5rem; max-width: var(--measure); border-top: 1px solid var(--panel-edge); padding-top: .8rem; }
.watch-transcript summary { cursor: pointer; font: .9rem/1.6 var(--font-mono); color: var(--ink); }
.watch-transcript p { margin: .8rem 0 0; color: var(--ink-dim); }
.watch-page .watch-split { margin-top: 1rem; }
.watch-page .hero-actions { margin-top: 1.5rem; }
.watch-page .runs-note { margin-top: 1rem; color: var(--ink-dim); }
.watch-page .watch-frame { grid-column: 2; grid-row: 1; }
.watch-page .watch-copy { grid-column: 1; grid-row: 1; }
.watch-page .watch-transcript { border-top: 0; padding-top: 0; }
@media (max-width: 800px) {
  .watch-split { grid-template-columns: minmax(0, 1fr); }
  .watch-frame { width: min(100%, 20rem); }
  .watch-page .watch-frame, .watch-page .watch-copy { grid-column: 1; grid-row: auto; }
}

/* Home-page gallery: the video is one tile. Same 16:10 box as the screenshots on wide screens (portrait video,
   centred); a tall portrait box on phones. The video file loads only when Play is tapped (preload="none"). */
.showcase-main { min-width: 0; }
.showcase-stage[hidden], .showcase-video[hidden] { display: none; }
.showcase-video { margin: 0; }
.video-box { position: relative; aspect-ratio: 16 / 10; border: 6px solid var(--shot-bezel); border-radius: var(--radius-md); background: var(--shot-bezel);
  box-shadow: 0 30px 50px -30px rgba(6, 38, 63, 0.5); overflow: hidden; }
.video-box video { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; aspect-ratio: 9 / 16; background: var(--shot-bezel); }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; background: none; cursor: pointer; }
.video-play span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding-left: .25rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.3rem;
  box-shadow: 0 6px 24px rgba(6, 8, 10, .45); transition: transform .15s var(--ease-out); }
.video-play:hover span { transform: scale(1.06); }
.video-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.video-play[hidden] { display: none; }
.showcase-video figcaption { margin-top: .7rem; font-size: .92rem; line-height: 1.5; color: var(--ink-dim); }
.pick-video { position: relative; }
.pick-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 2rem; height: 2rem; padding-left: .12rem; margin: -1rem 0 0 -1rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .8rem; box-shadow: 0 2px 8px rgba(6, 8, 10, .45); pointer-events: none; }
@media (max-width: 800px) {
  .video-box { aspect-ratio: 9 / 16; width: min(100%, 18rem); margin-inline: auto; }
  .video-box video { left: 0; transform: none; width: 100%; }
}

/* ---- assets/css/banter.css ---- */
/* Stacks banter bubble (assets/js/banter.js). Sits inside .sh (fixed, bottom right) above the launcher, so it never moves
   page content. Site tokens only, so it follows light and dark. Hidden while the chat panel is open. */
.banter-bubble[hidden] { display: none; }
.banter-line { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.banter-x {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: -0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}
.banter-x:hover { background: var(--accent-soft); color: var(--ink); }
.banter-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sh.is-open .banter-bubble { display: none; }
.banter-bubble {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  width: min(16rem, calc(100vw - 2rem));
  margin-bottom: 0.25rem;
  padding: 0.6rem 0.4rem 0.6rem 0.9rem;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-md);
  border-bottom-right-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--tray-cast);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.banter-bubble::after {
  content: "";
  position: absolute;
  right: 1.6rem;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--panel-edge);
  border-bottom: 1px solid var(--panel-edge);
  background: var(--panel);
  transform: rotate(45deg);
}
.banter-bubble .banter-line { padding-top: 0.15rem; }
.banter-bubble .banter-x { width: 2rem; height: 2rem; margin: -0.2rem 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .banter-bubble { animation: banter-in 0.22s var(--ease-out); }
}
@keyframes banter-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media print { .banter-bubble { display: none; } }

/* ---- assets/css/lang.css ---- */
/* Language toggle (EN | ES | FR) in the header. Loaded only by pages that have an English, Spanish or French twin. */
.lang-toggle { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-sm); }
.lang-toggle .lang-link { display: inline-flex; align-items: center; min-width: 2.25rem; min-height: 2.25rem; justify-content: center; padding: 0 .4rem; color: var(--ink-dim); text-decoration: none; }
.lang-toggle .lang-link + .lang-link { border-left: 1px solid var(--panel-edge); }
.lang-toggle .lang-link[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.lang-toggle .lang-link:hover { color: var(--accent); }
.lang-toggle .lang-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 480px) {
  .site-header .wrap { gap: .4rem; }
  .site-header .brand { gap: .4rem; min-width: 0; }
  .site-header .brand span { font-size: 1.05rem; }
  .site-nav { gap: .15rem; }
  .site-nav .btn { padding: .5rem .6rem; font-size: .8rem; white-space: nowrap; }
  .lang-toggle .lang-link { min-width: 1.9rem; padding: 0 .2rem; }
  /* Brand, three language links, the theme and accent buttons and the Get Setliner button do not fit one
     375px row (about 440px). The brand keeps its width and the button moves to a second row under the
     controls, so nothing overlaps the wordmark. */
  .site-header .brand { flex: 0 0 auto; }
  .site-header .site-nav { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: .4rem; }
  .site-header .site-nav .btn { order: 5; }
}
/* A short notice that a page exists only in English (legal pages, FAQ). */
.lang-note { border: 1px solid var(--panel-edge); background: var(--panel); border-radius: 12px; padding: 1rem 1.25rem; color: var(--ink); line-height: 1.6; margin-block: 1rem; }
/* Small "this link goes to an English page" tag on the Spanish pages. */
.en-tag { font: .65em/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-faint, var(--ink-dim)); border: 1px solid var(--panel-edge); border-radius: 4px; padding: .1em .3em; vertical-align: .1em; }
/* The single Spanish home hero picture (the English page has a gallery). */
.es-shot { margin: 0; max-width: 60rem; }
.es-shot .showcase-cap { min-height: 0; margin: .8rem 0 0; }
/* Spanish and French nav labels are longer: keep each on one line, and hide the section links until the header
   has room for them next to the three language links (measured: Spanish fits from 1201px, French from 1241px
   with the tighter gaps below; .wrap stops growing at 1240px). */
.site-nav ul a { white-space: nowrap; }
@media (max-width: 1200px) { html[lang="es"] .site-nav ul { display: none; } }
@media (max-width: 1240px) { html[lang="fr"] .site-nav ul { display: none; } }
@media (min-width: 1241px) { html[lang="fr"] .site-nav { gap: 1.25rem; } html[lang="fr"] .site-nav ul { gap: 1rem; } }

/* ---- assets/css/features.css ---- */
/* Features page list and the home-page call-out. */
.feature-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; counter-reset: feat; }
.feature-item { counter-increment: feat; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 1.5rem; }
.feature-item h2 { font-size: 1.25rem; line-height: 1.2; margin-bottom: .75rem; }
.feature-item h2::before { content: counter(feat, decimal-leading-zero); display: block; font: 500 .8rem/1.6 var(--font-mono); color: var(--accent); margin-bottom: .35rem; }
.feature-item p { color: var(--ink-dim); line-height: 1.65; }
.feature-item .feature-tag { margin-top: .9rem; font: .8rem/1.5 var(--font-mono); color: var(--ink-faint, var(--ink-dim)); }
.feature-foot { color: var(--ink-dim); line-height: 1.7; padding-bottom: 1rem; }
.feature-foot:last-child { padding-bottom: 5rem; }
.features-callout { border-block: 1px solid var(--panel-edge); background: var(--panel); }
.features-callout .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; padding-block: 2rem; }
.features-callout h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; margin: 0; }
.features-callout p { color: var(--ink-dim); margin: .5rem 0 0; max-width: 46ch; }
@media (max-width: 600px) { .features-callout .btn { width: 100%; text-align: center; } }
/* Match the existing hero action text link below the three promises. */
.demo-lede .hero-promise .text-link { margin-top: 0; font-size: 1rem; color: var(--ink); }
.demo-lede .hero-promise .text-link:hover { color: var(--accent); }
.demo-lede .hero-promise .features-link-row { text-align: center; }