/* ==========================================================================
   Atout Audio — base styles
   ========================================================================== */

:root {
  --bg-0: #0a0a0b;
  --bg-1: #101113;
  --bg-2: #17181b;
  --bg-3: #1e1f23;
  --border: #2a2b30;
  --border-soft: #232428;

  --text-0: #f3f2ee;
  --text-1: #c7c6c2;
  --text-2: #8d8d92;
  --text-3: #616267;

  --accent: #e0a458;
  --accent-strong: #eeb571;
  --accent-dim: #4a3a24;
  --accent-ink: #1b1408;

  --ok: #7fae6c;
  --warn: #c8935c;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --max-width: 1160px;
}

* { box-sizing: border-box; }
/* scroll-behavior: smooth is intentionally NOT set globally on html — it
   conflicts with the initial-load hash-anchor scroll (see js/main.js), even
   with an instant-then-restore workaround, on longer image-heavy pages.
   In-page anchor clicks get smooth scrolling from JS instead. */
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  color: var(--text-0);
  font-weight: 650;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; color: var(--text-1); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 88px 0; }
section.tight { padding: 56px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent);
}

.lede {
  color: var(--text-2);
  font-size: 1.1rem;
  max-width: 640px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: var(--accent-ink);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-0);
}
.btn-ghost:hover { border-color: var(--text-2); }

.btn-disabled,
.btn[disabled] {
  background: var(--bg-3);
  color: var(--text-3);
  border-color: var(--border);
  cursor: not-allowed;
}

.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.note {
  font-size: 0.82rem;
  color: var(--text-3);
  margin-top: 10px;
}

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-0);
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-1);
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-0);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border-soft);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 18px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn-ghost { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 96px 0 60px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 480px;
  background: radial-gradient(ellipse at center, rgba(224, 164, 88, 0.14), transparent 70%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
}

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

.hero h1 { margin-bottom: 20px; }
.hero-sub { font-size: 1.15rem; color: var(--text-2); max-width: 520px; margin-bottom: 32px; }

.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  border-radius: 100px;
}
.badge svg { width: 13px; height: 13px; }

/* ---------- Panels / device mockup ---------- */
.panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.console-frame {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}

.console-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.console-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.console-titlebar span {
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--text-3);
  font-family: var(--font-mono);
}

.console-caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 16px;
}

.screenshot-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
  background: var(--bg-1);
}
.screenshot-img {
  width: 100%;
  display: block;
}
.shot-crop {
  position: relative;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}
.shot-crop img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shot-crop.top { padding-top: 33.8%; }
.shot-crop.top img { object-position: top; }
.shot-crop.bottom { padding-top: 31%; }
.shot-crop.bottom img { object-position: bottom; }

/* ---------- Feature cards ---------- */
.grid {
  display: grid;
  gap: 24px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--border); }

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--accent);
}
.card-icon svg { width: 22px; height: 22px; }

.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 0.94rem; margin-bottom: 0; }

.tier-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 100px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}
.tier-tag.free { background: var(--bg-3); color: var(--text-2); border: 1px solid var(--border); }
.tier-tag.pro { background: var(--accent-dim); color: var(--accent-strong); border: 1px solid rgba(224,164,88,0.35); }

/* ---------- Section headers ---------- */
.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head.left { margin: 0 0 48px; text-align: left; }

/* ---------- Divider band ---------- */
.band {
  background: var(--bg-1);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ---------- Pricing ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.price-card.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 24px 60px -30px rgba(224,164,88,0.25);
  position: relative;
}
.price-card.highlight::before {
  content: "RECOMMENDED";
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 100px;
}

.price-tier { font-size: 0.9rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.price-value { font-size: 2.6rem; font-weight: 700; color: var(--text-0); margin: 10px 0 4px; }
.price-value small { font-size: 1rem; font-weight: 500; color: var(--text-3); }
.price-desc { color: var(--text-2); font-size: 0.92rem; margin-bottom: 24px; }

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-grow: 1;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92rem;
  color: var(--text-1);
}
.price-features li:last-child { border-bottom: none; }
.price-features li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--ok); }
.price-features li.disabled { color: var(--text-3); }
.price-features li.disabled svg { color: var(--text-3); }

/* comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: var(--bg-2);
}
table.compare th, table.compare td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92rem;
}
table.compare th { color: var(--text-0); font-weight: 600; background: var(--bg-3); }
table.compare th.th-group { background: var(--bg-1); text-align: center; }
table.compare td.center, table.compare th.center { text-align: center; }
table.compare tr:last-child td { border-bottom: none; }
table.compare td.yes { color: var(--ok); }
table.compare td.na { color: var(--text-3); text-align: center; }

/* Preset comparison tables (Film & Video / Music / Gaming) — 2-tier group header.
   table-layout:fixed + <colgroup> alone let some browsers size columns by
   content instead of respecting the hint (Strong/Extreme values are usually
   longer text than Subtle, so that column visibly widens). To force truly
   equal widths regardless of content or engine, width is set explicitly on
   every real (non-colspan) row: the second header row and every body row.
   .cols-5 = Film & Video / Music (Preset + 2 groups); .cols-7 = Gaming
   (Preset + 3 groups). */
table.compare.preset-table { table-layout: fixed; }
table.compare.preset-table th, table.compare.preset-table td { border-bottom: 1px solid var(--border); }
/* Header row 2 has no Use Case cell (it's rowspan=2 from row 1), so its
   real :first-child is "EQ Subtle" — :not(:first-child) alone would wrongly
   left-align just that one label. Centering is scoped per header row instead. */
table.compare.preset-table thead tr:first-child th:not(:first-child),
table.compare.preset-table thead tr:last-child th,
table.compare.preset-table tbody td:not(:first-child) { text-align: center; }
table.compare.preset-table td a { display: block; width: 100%; text-align: center; }
table.compare.preset-table .group-start { border-left: 1px solid var(--border); }
table.compare.preset-table.cols-5 thead tr:first-child th:first-child,
table.compare.preset-table.cols-5 tbody td:first-child { width: 28%; }
table.compare.preset-table.cols-5 thead tr:last-child th,
table.compare.preset-table.cols-5 tbody td:not(:first-child) { width: 18%; }
table.compare.preset-table.cols-7 thead tr:first-child th:first-child,
table.compare.preset-table.cols-7 tbody td:first-child { width: 28%; }
table.compare.preset-table.cols-7 thead tr:last-child th,
table.compare.preset-table.cols-7 tbody td:not(:first-child) { width: 12%; }
table.compare th .th-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-3);
}
table.compare td.pending { color: var(--text-3); font-style: italic; }
table.compare td.no { color: var(--text-3); }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--border-soft);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  padding: 22px 4px;
  cursor: pointer;
}
.faq-q .plus { color: var(--accent); font-size: 1.3rem; flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  color: var(--text-2);
  font-size: 0.94rem;
  padding: 0 4px;
}
.faq-a-inner { padding-bottom: 22px; }
.faq-item.open .faq-a { max-height: 600px; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-soft);
}
.step:last-child { border-bottom: none; }
.step::before {
  content: counter(step);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h4 { margin-bottom: 6px; color: var(--text-0); }
.step p { color: var(--text-2); margin-bottom: 0; font-size: 0.94rem; }

/* ---------- Callout ---------- */
.callout {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  font-size: 0.92rem;
  color: var(--text-1);
  margin: 24px 0;
}
.callout strong { color: var(--text-0); }
.callout.warn { border-left-color: var(--warn); }

/* ---------- System requirements ---------- */
.req-list { list-style: none; padding: 0; margin: 0; }
.req-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92rem;
}
.req-list li:last-child { border-bottom: none; }
.req-list span:first-child { color: var(--text-2); }
.req-list span:last-child { color: var(--text-0); font-weight: 500; text-align: right; }

/* ---------- Legal content ---------- */
.legal-content { max-width: 760px; }
.legal-content h2 { margin-top: 2.2em; font-size: 1.3rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.05rem; margin-top: 1.6em; color: var(--text-0); }
.legal-content p, .legal-content li { color: var(--text-2); font-size: 0.95rem; }
.legal-content ul, .legal-content ol { padding-left: 1.2em; }
.legal-content li { margin-bottom: 0.5em; }
.legal-updated { color: var(--text-3); font-size: 0.85rem; margin-bottom: 40px; }

.placeholder-tag {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent-strong);
  border: 1px solid rgba(224,164,88,0.35);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-1);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

.footer-brand p { color: var(--text-2); font-size: 0.9rem; max-width: 280px; }

.footer-col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text-1); font-size: 0.9rem; }
.footer-col a:hover { color: var(--accent); }

.footer-legal-info {
  border-top: 1px solid var(--border-soft);
  padding-top: 28px;
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.9;
}
.footer-legal-info .biz-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  font-size: 0.82rem;
  color: var(--text-3);
}

/* ---------- Misc ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.text-accent { color: var(--accent); }

.knob-decoration {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Guide layout ---------- */
.guide-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

.guide-toc {
  position: sticky;
  top: 88px;
}

.guide-toc-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

.guide-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--border-soft);
  color: var(--text-2);
  font-size: 0.87rem;
  line-height: 1.3;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.guide-toc a:hover { color: var(--text-0); }
.guide-toc a.active { color: var(--accent); border-left-color: var(--accent); }

.guide-content h2 { scroll-margin-top: 96px; }
.guide-content h3 { scroll-margin-top: 96px; }

.guide-section {
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--border-soft);
}
.guide-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.guide-shot {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  margin: 24px 0;
}
.guide-shot img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: inline-block;
}
.guide-shot-caption {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-3);
}
.guide-shot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-soft);
  }
  .guide-toc-label { width: 100%; }
  .guide-toc a { border-left: none; padding: 4px 0; }
  .guide-shot-row { grid-template-columns: 1fr; }
}

.log-path-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.log-path-text {
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  padding: 4px 8px;
  border-radius: 4px;
}