/* Premium skin for the hand-built tool pages (text to speech, key and BPM
   finder, pitch changer, slowed and reverb, nightcore, recorder, batch
   renamer, melody generator, stem supply).

   Those pages each shipped with their own private CSS from different weeks,
   so they drifted: lavender cards on a lavender ground, 140px of dead space
   above every headline, and type at a different size on every page. Rather
   than rewrite nine bespoke stylesheets, this sheet is linked LAST in each
   head and re-skins the parts they have in common, using the same surface
   tokens as the hub and the generated tool pages (see --tool-* in styles.css).

   It only touches surfaces, spacing, and type. Every page keeps its own
   layout and its own interactive pieces (the wheel, the waveform, the
   keyboard, the modal). */

/* ── hero: reclaim the dead space, tighten the type ── */
[class$="-hero"] { padding-top: 104px !important; padding-bottom: 26px !important; }
[class$="-hero"] h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 58px) !important;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.06;
  margin: 0 0 14px;
  color: var(--text);
}
[class$="-hero"] h1 em {
  font-style: normal;
  background: var(--tool-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[class$="-hero"] > p {
  font-size: clamp(15px, 1.6vw, 17.5px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

/* ── eyebrow pill ── */
[class$="-eyebrow"] {
  font: 600 11.5px 'Inter', sans-serif !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(111, 91, 211, .18) !important;
  border-radius: 999px;
  padding: 7px 15px !important;
  box-shadow: 0 1px 2px rgba(45, 42, 55, .04);
}
[class$="-eyebrow"] .dot { width: 6px !important; height: 6px !important; background: var(--accent-2) !important; box-shadow: 0 0 8px var(--accent-2) !important; }

/* ── the working card: white raised surface with the brand hairline ── */
[class$="-card"]:not([class*="modal"]):not([class*="hub"]),
[class$="-panel"]:not([class*="modal"]),
[class$="-stage"]:not([class*="toolkit"]) {
  position: relative;
  background: var(--tool-surface) !important;
  border: 1px solid var(--tool-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--tool-shadow) !important;
}
[class$="-card"]:not([class*="modal"]):not([class*="hub"])::before,
[class$="-panel"]:not([class*="modal"])::before {
  content: '';
  position: absolute;
  left: 28px; right: 28px; top: -1px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 91, 211, .55), rgba(193, 58, 239, .55), transparent);
}

/* Drop zones inside those cards step back down to the lavender inset. */
[class$="-drop"], [class*="-drop"]:not([class*="dropdown"]) {
  background: var(--tool-inset) !important;
  border: 1.5px dashed var(--tool-border-str) !important;
  border-radius: 18px !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
[class$="-drop"]:hover, [class*="-drop"]:not([class*="dropdown"]):hover,
[class*="-drop"].is-over { border-color: var(--accent) !important; background: var(--tool-inset-hov) !important; transform: translateY(-1px); }

/* ── primary buttons become gradient pills ── */
[class$="-btn"].primary, [class*="-btn"].primary,
[class$="-go"], [class$="-dl"] {
  background: var(--tool-grad) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -14px rgba(111, 91, 211, .85) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
[class$="-btn"].primary:hover, [class*="-btn"].primary:hover,
[class$="-go"]:hover, [class$="-dl"]:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(111, 91, 211, .9) !important; }

/* Secondary buttons: white chips instead of lavender-on-lavender. */
[class$="-btn"]:not(.primary):not([class*="modal"]) {
  background: var(--tool-surface) !important;
  border: 1px solid var(--tool-border) !important;
  color: var(--text) !important;
  transition: transform .14s ease, border-color .14s ease !important;
}
[class$="-btn"]:not(.primary):not([class*="modal"]):hover { transform: translateY(-2px); border-color: var(--tool-border-str) !important; }

/* ── selects and inputs ── */
[class$="-card"] select, [class$="-card"] input[type="text"], [class$="-card"] input[type="number"], [class$="-card"] textarea,
[class$="-panel"] select, [class$="-panel"] input[type="text"], [class$="-panel"] textarea {
  background: var(--tool-inset) !important;
  border: 1px solid var(--tool-border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}
[class$="-card"] select:focus, [class$="-card"] input:focus, [class$="-card"] textarea:focus,
[class$="-panel"] select:focus, [class$="-panel"] input:focus, [class$="-panel"] textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(111, 91, 211, .15);
}

/* ── the shared long-form block at the bottom of these pages ── */
.tool-info { max-width: 720px !important; padding: 34px 24px 8px !important; }
.tool-info h2 {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 27px) !important;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 34px 0 12px !important;
}
.tool-info p, .tool-info ol, .tool-info ul { font-size: 15.5px !important; line-height: 1.75 !important; color: var(--text-dim); }
.tool-info a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(111, 91, 211, .3); }

.tool-faq details {
  background: var(--tool-surface);
  border: 1px solid var(--tool-border) !important;
  border-radius: 16px;
  padding: 0 20px !important;
  margin: 0 0 10px;
  box-shadow: 0 1px 2px rgba(45, 42, 55, .03);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.tool-faq details:hover { border-color: var(--tool-border-str) !important; box-shadow: var(--tool-shadow); }
.tool-faq details summary { font-size: 15.5px !important; padding: 17px 0 !important; }
.tool-faq details summary::after {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--tool-border); border-radius: 50%;
  font: 400 15px var(--font-mono); color: var(--accent);
}
.tool-faq details p { font-size: 15px !important; line-height: 1.7 !important; margin: 0 0 17px !important; }

@media (max-width: 640px) {
  [class$="-hero"] { padding-top: 76px !important; padding-bottom: 20px !important; }
  [class$="-hero"] h1 { font-size: clamp(30px, 8vw, 38px) !important; }
  [class$="-card"]:not([class*="modal"])::before { left: 18px; right: 18px; }
  .tool-info { padding-left: 20px !important; padding-right: 20px !important; }
}