/* =========================================================================
   Free Chromatic Tuner — web port of the in-app tuner UI.
   Scoped under .ps-tuner / .ps-tuner-page so it doesn't fight site styles.
   ========================================================================= */

.ps-tuner-frame {
  /* Frames the tuner widget on the page. Fixed-aspect-ish region so the
     widget feels like a "product" embedded in the marketing page. */
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  height: clamp(520px, 78vh, 760px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #04060f 0%, #08102a 35%, #04060f 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(92, 215, 255, 0.04) inset;
  overflow: hidden;
}

.ps-tuner {
  /* ============ palette ============ */
  --bg-0: #04060f;
  --bg-1: #08102a;
  --ink: #f4f3ee;
  --ink-dim: #aab1c8;
  --ink-faint: rgba(244, 243, 238, 0.32);

  --brand: #004AAC;
  --in-tune: #5cd7ff;
  --in-tune-soft: #9eecff;
  --sharp: #ff9d6f;
  --sharp-soft: #ffd1aa;
  --flat: #9b8cff;
  --flat-soft: #c9b3ff;

  --display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', 'Inter', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;

  --tune-magnitude: 0;
  --needle-angle: 0deg;
  --halo-opacity: 0.22;
  --logo-saturation: 1;
  --logo-opacity: 1;

  --active-color: var(--in-tune);
  --active-glow: rgba(92, 215, 255, 0.65);

  position: relative;
  width: 100%;
  height: 100%;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(92, 215, 255, 0.08) 0%, rgba(0, 74, 172, 0.05) 40%, transparent 70%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0, 74, 172, 0.10), transparent 60%);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: clamp(8px, 1.5vh, 18px);
  padding: clamp(14px, 2.5vh, 28px) clamp(14px, 4vw, 48px);
  box-sizing: border-box;
}

/* directional color blends — derived from --tune-magnitude. */
.ps-tuner[data-direction="sharp"] {
  --active-color: color-mix(in srgb, var(--in-tune), var(--sharp) calc(var(--tune-magnitude) * 100%));
  --active-glow: color-mix(in srgb, rgba(92, 215, 255, 0.65), rgba(255, 157, 111, 0.65) calc(var(--tune-magnitude) * 100%));
  --halo-opacity: calc(0.22 + var(--tune-magnitude) * 0.06);
  --logo-saturation: calc(1 - var(--tune-magnitude) * 0.20);
}
.ps-tuner[data-direction="flat"] {
  --active-color: color-mix(in srgb, var(--in-tune), var(--flat) calc(var(--tune-magnitude) * 100%));
  --active-glow: color-mix(in srgb, rgba(92, 215, 255, 0.65), rgba(155, 140, 255, 0.65) calc(var(--tune-magnitude) * 100%));
  --halo-opacity: calc(0.22 + var(--tune-magnitude) * 0.06);
  --logo-saturation: calc(1 - var(--tune-magnitude) * 0.20);
}
.ps-tuner[data-gated="true"] {
  --active-color: rgba(244, 243, 238, 0.55);
  --active-glow: rgba(92, 215, 255, 0.20);
  --halo-opacity: 0.06;
  --logo-saturation: 0.55;
  --logo-opacity: 0.65;
}

/* starfield wash */
.ps-tuner::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 13% 22%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 28% 78%, rgba(255, 255, 255, 0.40), transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 12%, rgba(158, 236, 255, 0.50), transparent 100%),
    radial-gradient(1px 1px at 62% 65%, rgba(255, 255, 255, 0.30), transparent 100%),
    radial-gradient(1px 1px at 78% 18%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 70%, rgba(158, 236, 255, 0.36), transparent 100%),
    radial-gradient(1px 1px at 8% 88%, rgba(255, 255, 255, 0.40), transparent 100%),
    radial-gradient(1px 1px at 92% 32%, rgba(255, 255, 255, 0.28), transparent 100%);
  opacity: 0.6;
  z-index: 0;
}

/* ============ topbar ============ */
.ps-tuner__topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  z-index: 5;
  flex-wrap: nowrap;
}
.ps-tuner__brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.ps-tuner__brand-wm {
  font: 700 14px/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.ps-tuner__brand-wm em {
  font-style: normal; color: var(--in-tune-soft); font-weight: 300;
}
.ps-tuner__top-controls {
  display: flex; gap: 10px; align-items: center;
}
.ps-tuner__a4-input {
  display: flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--mono);
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
.ps-tuner__a4-input input {
  width: 50px;
  font: 500 11px/1 var(--mono);
  color: var(--in-tune-soft);
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
}
.ps-tuner__a4-input input::-webkit-outer-spin-button,
.ps-tuner__a4-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-tuner__a4-input input { -moz-appearance: textfield; }

/* device picker (compact pill) */
.ps-tuner__device-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
.ps-tuner__device-icon { color: var(--ink-dim); flex-shrink: 0; }
.ps-tuner__device-select {
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 18px 4px 0;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(244, 243, 238, 0.55) 50%),
    linear-gradient(135deg, rgba(244, 243, 238, 0.55) 50%, transparent 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.ps-tuner__device-select:hover,
.ps-tuner__device-select:focus-visible { color: var(--in-tune-soft); }
.ps-tuner__device-select option { background: #0b1432; color: var(--ink); }
.ps-tuner__device-refresh {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 160ms, background 160ms;
}
.ps-tuner__device-refresh:hover {
  color: var(--in-tune-soft);
  background: rgba(255, 255, 255, 0.05);
}

/* ============ stage ============ */
.ps-tuner__stage {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 2;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ps-tuner__composition {
  position: relative;
  width: 100%;
  max-width: 820px;
  height: 100%;
}
.ps-tuner__halo {
  position: absolute;
  left: 50%; top: 50%;
  height: 88%;
  aspect-ratio: 8 / 6;
  max-width: 88%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 60% 55% at 50% 50%, var(--active-color) 0%, transparent 60%);
  opacity: var(--halo-opacity);
  filter: blur(40px);
  z-index: 0;
  transition: opacity 700ms;
  animation: ps-tuner-halo-pulse 3.6s ease-in-out infinite;
}
@keyframes ps-tuner-halo-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.06); }
}
.ps-tuner__svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ps-tuner__logo-path {
  fill: var(--brand);
  transition: filter 700ms, opacity 700ms;
  opacity: var(--logo-opacity);
  filter:
    drop-shadow(0 0 16px var(--active-glow))
    saturate(var(--logo-saturation));
}
.ps-tuner__horizon {
  stroke: rgba(244, 243, 238, 0.08);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  transition: stroke 600ms;
}
.ps-tuner[data-in-tune="true"] .ps-tuner__horizon {
  stroke: rgba(92, 215, 255, 0.40);
  stroke-dasharray: none;
}

/* needle pivots at (165, 425); transform driven by --needle-angle */
.ps-tuner__needle {
  transform-origin: 165px 425px;
  transform: rotate(var(--needle-angle));
  transition: transform 80ms linear;
}
.ps-tuner[data-gated="true"] .ps-tuner__needle {
  animation: ps-tuner-needle-search 4.2s ease-in-out infinite;
  transition: none;
}
@keyframes ps-tuner-needle-search {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
.ps-tuner__needle-shaft, .ps-tuner__needle-tip {
  fill: var(--active-color);
  filter: drop-shadow(0 0 6px var(--active-glow))
          drop-shadow(0 0 14px var(--active-glow));
  transition: fill 400ms;
}
.ps-tuner__needle-cap {
  fill: var(--bg-0);
  stroke: var(--active-color);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px var(--active-glow));
  transition: stroke 400ms;
}
.ps-tuner__needle-cap-inner { fill: var(--active-color); transition: fill 400ms; }

.ps-tuner__note-letter, .ps-tuner__note-octave {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 400;
  fill: var(--active-color);
  filter: drop-shadow(0 0 14px var(--active-glow));
  transition: fill 400ms, filter 400ms;
}
.ps-tuner__note-octave { filter: drop-shadow(0 0 8px var(--active-glow)); }

/* status badge */
.ps-tuner__status {
  justify-self: center;
  z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-color) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--active-color) 30%, transparent);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: background 500ms, border-color 500ms;
}
.ps-tuner__status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--active-color);
  box-shadow: 0 0 12px var(--active-color);
  animation: ps-tuner-tag-blink 1.8s ease-in-out infinite;
}
@keyframes ps-tuner-tag-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.ps-tuner__status-text {
  font: italic 500 12px/1 var(--display);
  letter-spacing: 0.04em;
  color: var(--active-color);
  text-transform: lowercase;
  transition: color 500ms;
}
.ps-tuner__status-text b {
  font-style: normal;
  font-family: var(--sans); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-right: 6px;
  color: var(--ink);
  font-size: 11px;
}

/* notices */
.ps-tuner__notices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 6;
  position: relative;
}
.ps-tuner__notices:empty { display: none; }
.ps-tuner__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font: 400 12px/1.45 var(--sans);
  backdrop-filter: blur(8px);
}
.ps-tuner__notice--warn {
  background: rgba(255, 200, 110, 0.06);
  border: 1px solid rgba(255, 200, 110, 0.28);
  color: rgba(255, 222, 184, 0.95);
}
.ps-tuner__notice--info {
  background: rgba(92, 215, 255, 0.05);
  border: 1px solid rgba(92, 215, 255, 0.22);
  color: rgba(180, 230, 250, 0.92);
}
.ps-tuner__notice-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11px/1 var(--sans);
  color: var(--bg-0);
  margin-top: 1px;
}
.ps-tuner__notice--warn .ps-tuner__notice-icon { background: rgba(255, 200, 110, 0.85); }
.ps-tuner__notice--info .ps-tuner__notice-icon { background: rgba(158, 236, 255, 0.85); }
.ps-tuner__notice-text { flex: 1; }
.ps-tuner__notice-text b { font-weight: 600; color: var(--ink); }
.ps-tuner__notice-dismiss {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  transition: border-color 160ms;
  margin-top: -1px;
}
.ps-tuner__notice-dismiss:hover { border-color: rgba(255, 255, 255, 0.40); }

/* ============ readouts ============ */
.ps-tuner__readouts {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  padding: clamp(12px, 2vh, 22px) clamp(16px, 3vw, 30px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  position: relative; z-index: 2;
}
.ps-tuner__readouts-col {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 clamp(8px, 1.5vw, 16px);
  min-width: 0;
  align-items: center;
  text-align: center;
}
.ps-tuner__readouts-label {
  font: 500 clamp(8px, 1vw, 10px)/1 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ps-tuner__readouts-value {
  font: italic 400 clamp(20px, 3.6vw, 36px)/1 var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ps-tuner__readouts-value.is-cents { color: var(--active-color); transition: color 400ms; }
.ps-tuner__readouts-value .unit {
  font: 500 clamp(9px, 1.1vw, 12px)/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  margin-left: 6px;
  vertical-align: 0.4em;
  text-transform: uppercase;
}
.ps-tuner__readouts-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}

/* meter widget */
.ps-tuner__readouts-value--meter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
}
.ps-tuner__meter-wrap {
  position: relative;
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: ew-resize;
  touch-action: none;
}
.ps-tuner__meter-bar {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.ps-tuner__meter-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(170, 177, 200, 0.55) 0%,
    var(--in-tune) 55%,
    var(--sharp) 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--in-tune) 60%, transparent);
  transition: width 80ms linear;
}
.ps-tuner__meter-gate {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  border-radius: 1px;
  pointer-events: none;
  outline: none;
  z-index: 2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
  transition: background 160ms, box-shadow 160ms;
}
.ps-tuner__meter-wrap:hover .ps-tuner__meter-gate { background: var(--in-tune-soft); }
.ps-tuner__meter-gate:focus-visible {
  background: var(--in-tune-soft);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--in-tune) 45%, transparent),
    0 0 4px rgba(0, 0, 0, 0.55);
}
.ps-tuner__meter-db {
  font: 500 clamp(10px, 1.1vw, 12px)/1 var(--mono);
  letter-spacing: 0.10em;
  color: var(--ink-dim);
  text-align: center;
}
.ps-tuner__meter-db-unit {
  margin-left: 4px;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* start overlay */
.ps-tuner__start-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  background: rgba(4, 6, 15, 0.65);
  backdrop-filter: blur(10px);
}
.ps-tuner__start-card {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 32px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  text-align: center;
  max-width: 380px;
}
.ps-tuner__start-card h2 {
  font: italic 400 22px/1.2 var(--display);
  color: var(--ink);
}
.ps-tuner__start-card p {
  font: 400 13px/1.5 var(--sans);
  color: var(--ink-dim);
}
.ps-tuner__start-btn {
  font: 500 13px/1 var(--sans);
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--in-tune-soft);
  color: var(--bg-0);
  border: 1px solid var(--in-tune);
  cursor: pointer;
  transition: all 160ms;
}
.ps-tuner__start-btn:hover { background: var(--in-tune); }
.ps-tuner__start-error {
  font: 400 12px/1.4 var(--sans);
  color: #ff8da3;
  margin-top: 6px;
}

/* narrow widths */
@media (max-width: 880px) {
  .ps-tuner__a4-input { font-size: 10px; padding: 5px 8px; }
  .ps-tuner__device-select { max-width: 130px; font-size: 10px; }
  .ps-tuner__device-picker { padding-left: 10px; }
}
@media (max-width: 520px) {
  .ps-tuner__topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* =========================================================================
   Page content around the tuner (compact head + SEO content + CTA).
   ========================================================================= */

/* The tuner widget is the first visible thing on the page. The fixed site nav
   is ~72px tall, so the widget wrap needs at least that much top padding plus
   breathing room. */
.ps-tuner-widget-wrap {
  padding: clamp(96px, 13vh, 128px) 0 clamp(28px, 4vh, 48px);
}

/* Compact heading section sits BELOW the widget. The h1 stays in the document
   for SEO; visually it acts as a section label for everything that follows. */
.ps-tuner-head {
  padding: clamp(16px, 3vh, 32px) 0 clamp(24px, 4vh, 40px);
  text-align: center;
}
.ps-tuner-head__title {
  font: 700 clamp(26px, 3.6vw, 38px)/1.2 var(--font-primary);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.ps-tuner-head__subtitle {
  font: 400 clamp(14px, 1.4vw, 16px)/1.55 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
  max-width: 620px;
  margin: 0 auto;
}

.ps-tuner-cta {
  padding: clamp(40px, 6vh, 80px) 0;
  background: linear-gradient(180deg, transparent, rgba(91, 76, 255, 0.04));
}
.ps-tuner-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.ps-tuner-cta__eyebrow {
  font: 500 11px/1 var(--font-primary);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #9eecff;
  margin-bottom: 14px;
}
.ps-tuner-cta__title {
  font: 700 clamp(26px, 3.6vw, 38px)/1.2 var(--font-primary);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.ps-tuner-cta__body {
  font: 400 16px/1.6 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
  margin-bottom: 26px;
}
.ps-tuner-cta__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ps-tuner-content {
  padding: clamp(40px, 6vh, 80px) 0;
}
.ps-tuner-content__heading {
  font: 700 clamp(24px, 3.2vw, 34px)/1.2 var(--font-primary);
  letter-spacing: -0.01em;
  margin-bottom: 32px;
  text-align: center;
}
.ps-tuner-content__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.ps-tuner-content__card {
  background: var(--color-bg-card, #1a1a1a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: var(--border-radius-md, 12px);
  padding: 26px 26px 22px;
}
.ps-tuner-content__card h3 {
  font: 600 18px/1.3 var(--font-primary);
  margin-bottom: 10px;
  color: var(--color-text-primary, #fff);
}
.ps-tuner-content__card p {
  font: 400 15px/1.6 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
}
.ps-tuner-content__card p + p { margin-top: 10px; }
.ps-tuner-content__card a { color: #9eecff; text-decoration: underline; text-underline-offset: 2px; }
.ps-tuner-content__card a:hover { color: #5cd7ff; }

/* FAQ-ish list */
.ps-tuner-faq {
  padding: clamp(40px, 6vh, 80px) 0;
}
.ps-tuner-faq__heading {
  font: 700 clamp(24px, 3.2vw, 34px)/1.2 var(--font-primary);
  letter-spacing: -0.01em;
  margin-bottom: 32px;
  text-align: center;
}
.ps-tuner-faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-tuner-faq__item {
  background: var(--color-bg-card, #1a1a1a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: var(--border-radius-md, 12px);
  padding: 18px 22px;
}
.ps-tuner-faq__item summary {
  cursor: pointer;
  font: 600 16px/1.4 var(--font-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ps-tuner-faq__item summary::-webkit-details-marker { display: none; }
.ps-tuner-faq__item summary::after {
  content: '+';
  font: 400 22px/1 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
  transition: transform 200ms;
}
.ps-tuner-faq__item[open] summary::after { content: '−'; }
.ps-tuner-faq__item p {
  font: 400 15px/1.6 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
  margin-top: 12px;
}
.ps-tuner-faq__item a { color: #9eecff; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   Per-instrument SEO sections.
   ========================================================================= */
.ps-tuner-instruments {
  padding: clamp(40px, 6vh, 80px) 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015));
}
.ps-tuner-instruments__heading {
  font: 700 clamp(24px, 3.2vw, 34px)/1.2 var(--font-primary);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  text-align: center;
}
.ps-tuner-instruments__intro {
  font: 400 15px/1.6 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
  max-width: 680px;
  margin: 0 auto 36px;
  text-align: center;
}
.ps-tuner-instruments__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.ps-tuner-instruments__card {
  background: var(--color-bg-card, #1a1a1a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: var(--border-radius-md, 12px);
  padding: 22px 24px 20px;
}
.ps-tuner-instruments__card h3 {
  font: 600 17px/1.3 var(--font-primary);
  margin-bottom: 8px;
  color: var(--color-text-primary, #fff);
}
.ps-tuner-instruments__card p {
  font: 400 14.5px/1.6 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
}
.ps-tuner-instruments__card p + p { margin-top: 10px; }
.ps-tuner-instruments__card b {
  color: #9eecff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* =========================================================================
   Newsletter capture (overrides the homepage default to keep tuner-page tight).
   ========================================================================= */
.ps-tuner-newsletter {
  padding: clamp(40px, 6vh, 80px) 0;
}

/* =========================================================================
   "Add this tuner to your site" section.
   ========================================================================= */
.ps-tuner-embed {
  padding: clamp(40px, 6vh, 80px) 0;
  background: linear-gradient(180deg, rgba(91, 76, 255, 0.03), transparent);
}
.ps-tuner-embed__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.ps-tuner-embed__heading {
  font: 700 clamp(22px, 2.8vw, 30px)/1.2 var(--font-primary);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.ps-tuner-embed__body {
  font: 400 15px/1.6 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
  margin-bottom: 22px;
}
.ps-tuner-embed__code-wrap {
  position: relative;
  text-align: left;
  margin-bottom: 14px;
}
.ps-tuner-embed__code {
  font: 400 13px/1.55 ui-monospace, 'DM Mono', monospace;
  color: #c9b3ff;
  background: #0a0a0a;
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 10px;
  padding: 18px 110px 18px 20px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}
.ps-tuner-embed__copy {
  position: absolute;
  top: 12px;
  right: 12px;
  font: 500 12px/1 var(--font-primary);
  padding: 8px 14px;
  background: rgba(92, 215, 255, 0.12);
  color: #9eecff;
  border: 1px solid rgba(92, 215, 255, 0.30);
  border-radius: 999px;
  cursor: pointer;
  transition: all 160ms;
}
.ps-tuner-embed__copy:hover {
  background: rgba(92, 215, 255, 0.20);
  border-color: rgba(92, 215, 255, 0.50);
}
.ps-tuner-embed__note {
  font: 400 13px/1.55 var(--font-primary);
  color: var(--color-text-secondary, #a0a0a0);
  text-align: center;
}
.ps-tuner-embed__note a { color: #9eecff; text-decoration: underline; text-underline-offset: 2px; }
.ps-tuner-embed__note code {
  font: 500 12.5px/1 ui-monospace, monospace;
  color: #9eecff;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
}

/* =========================================================================
   Embed mode (?embed=1): hide the site chrome and show only the tuner.
   ========================================================================= */
.ps-tuner-embed-mode .navbar,
.ps-tuner-embed-mode .mobile-menu-overlay,
.ps-tuner-embed-mode .footer,
.ps-tuner-embed-mode .ps-tuner-head,
.ps-tuner-embed-mode .ps-tuner-cta,
.ps-tuner-embed-mode .ps-tuner-content,
.ps-tuner-embed-mode .ps-tuner-faq,
.ps-tuner-embed-mode .ps-tuner-instruments,
.ps-tuner-embed-mode .ps-tuner-newsletter,
.ps-tuner-embed-mode .ps-tuner-embed { display: none !important; }

.ps-tuner-embed-mode body { overflow: hidden; }
.ps-tuner-embed-mode .ps-tuner-widget-wrap {
  /* No nav, so kill the nav-clearance top padding. */
  padding: 0;
}
.ps-tuner-embed-mode .ps-tuner-frame {
  /* Fill the iframe viewport completely. */
  height: 100vh;
  max-width: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.ps-tuner-embed-mode .container {
  max-width: none;
  padding: 0;
}