/* ============================================================
   Vinyl ID — Setup guide
   Same system as About: light, monochrome, restrained. Red
   appears only where it means something (the right-channel RCA
   plug); rust is the step-number accent. Layers on styles.css +
   design2.css + simple.css.
   ============================================================ */

body.setup { background: #fff; color: var(--ink); }

/* Nav: permanently solid (no dark hero on this page) */
.setup .nav {
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  color: #000;
  border-bottom: 1px solid var(--grey-15);
}
.setup .nav .nav-cta { border-color: #000; }
.setup .nav .nav-cta:hover { background: #000; }
.setup .nav .nav-cta:hover span { color: #fff; }
.setup .nav-links a.active { border-bottom-color: var(--rust); }

/* ── Intro ──────────────────────────────────────────────── */
.setup-hero { padding: calc(var(--nav-h) + 104px) var(--gutter) 0; }
.setup-hero .inner { max-width: var(--maxw); margin: 0 auto; }
.setup-hero h1 {
  font-weight: 500; font-size: clamp(40px, 6vw, 90px);
  line-height: 0.96; letter-spacing: -0.04em; margin: 18px 0 20px;
  max-width: 14ch; text-wrap: balance;
}
.setup-hero .lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--grey-60); max-width: 54ch; line-height: 1.5; }
.setup-hero .lede strong { color: var(--ink); font-weight: 600; }

/* ── Choose a path ──────────────────────────────────────── */
.paths { padding: 56px var(--gutter) 0; }
.paths-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.path {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--grey-15); border-radius: 14px; padding: 28px 30px 32px; background: #fff;
  transition: border-color .2s, transform .3s cubic-bezier(.16,1,.3,1);
}
.path:hover { border-color: var(--ink); transform: translateY(-2px); }
.path-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.path .tag { font-weight: 600; color: var(--ink); }
.path .jump { color: var(--grey-60); text-transform: none; letter-spacing: 0; font-size: 13px; }
.path-ico { width: 64px; height: 64px; margin: 26px 0 18px; }
.path-ico svg { width: 100%; height: 100%; display: block; }
.path h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 10px; }
.path p { font-size: 15px; line-height: 1.6; color: var(--grey-60); max-width: 44ch; }

/* ── What you need ──────────────────────────────────────── */
.need { padding: 96px var(--gutter) 0; }
.need-inner { max-width: var(--maxw); margin: 0 auto; }
.need-head h2 { font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.035em; line-height: 1.0; margin-top: 16px; max-width: 18ch; text-wrap: balance; }
.need-head p { margin-top: 16px; font-size: 16px; color: var(--grey-60); max-width: 60ch; line-height: 1.55; }
.need-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.need-item { border: 1px solid var(--grey-15); border-radius: 12px; padding: 26px 26px 28px; background: #fafafa; }
.need-ico { width: 96px; height: 64px; margin-bottom: 18px; }
.need-ico svg { width: 100%; height: 100%; display: block; }
.need-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.need-name .for { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-60); border: 1px solid var(--grey-30); border-radius: 999px; padding: 3px 8px; }
.need-item p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--grey-60); }

/* ── Method sections ────────────────────────────────────── */
.method { padding: 116px var(--gutter) 0; }
.method.alt { padding-top: 132px; }
.method-inner { max-width: var(--maxw); margin: 0 auto; }
.method-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.method-head h2 { font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.035em; line-height: 1.0; margin-top: 16px; max-width: 14ch; text-wrap: balance; }
.method-head p { font-size: 17px; color: var(--grey-60); max-width: 50ch; line-height: 1.55; }

/* Diagram panel */
.diagram { margin: 40px 0 0; border: 1px solid var(--grey-15); border-radius: 16px; background: #fafafa; padding: 36px 40px 22px; }
.diagram svg { width: 100%; height: auto; display: block; font-family: inherit; }
.diagram .lbl { font-size: 15px; font-weight: 600; fill: var(--ink); letter-spacing: -0.01em; }
.diagram .sub { font-size: 12.5px; fill: var(--grey-60); }
.diagram .callout circle { fill: var(--rust); }
.diagram .callout text { font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; }
.diagram figcaption { margin-top: 18px; text-align: center; font-size: 13px; color: var(--grey-60); }

/* Steps */
.steps-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.steps-list li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; border: 1px solid var(--grey-15); border-radius: 12px; padding: 26px 28px 28px; background: #fff; }
.steps-list .num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--rust); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.steps-list h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; }
.steps-list p { font-size: 15px; line-height: 1.6; color: var(--grey-60); }
.steps-list p strong { color: var(--ink); font-weight: 600; }

/* Note */
.note { margin-top: 14px; display: grid; grid-template-columns: 160px 1fr; gap: 24px; border-left: 3px solid var(--rust); padding: 6px 0 6px 22px; }
.note-k { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding-top: 4px; }
.note p { font-size: 15px; line-height: 1.6; color: var(--grey-60); max-width: 72ch; }
.note em { font-style: normal; color: var(--ink); font-weight: 600; }

/* ── Troubleshooting ────────────────────────────────────── */
.trouble { margin-top: 132px; padding: 116px var(--gutter); border-top: 1px solid var(--grey-15); background: #fafafa; }
.trouble-inner { max-width: var(--maxw); margin: 0 auto; }
.trouble-head h2 { font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.035em; line-height: 1.0; margin-top: 16px; }
.trouble-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.tcard { border: 1px solid var(--grey-15); border-radius: 12px; padding: 26px 26px 28px; background: #fff; }
.tcard h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 10px; }
.tcard p { font-size: 14.5px; line-height: 1.6; color: var(--grey-60); }
.trouble-cta { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.trouble-cta p { font-size: 16px; color: var(--grey-60); }
.trouble-cta .s-btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background .2s, color .2s;
}
.trouble-cta .s-btn:hover { background: var(--ink); color: #fff; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .setup-hero { padding: calc(var(--nav-h) + 72px) var(--gutter) 0; }
  .paths-grid { grid-template-columns: 1fr; }
  .need-grid { grid-template-columns: 1fr; }
  .method-head { grid-template-columns: 1fr; gap: 14px; }
  .steps-list { grid-template-columns: 1fr; }
  .trouble-grid { grid-template-columns: 1fr 1fr; }
  .method { padding-top: 84px; }
  .method.alt { padding-top: 96px; }
  .trouble { margin-top: 96px; padding: 84px var(--gutter); }
  .diagram { padding: 24px 20px 16px; }
  .diagram .lbl { font-size: 20px; }
  .diagram .sub { font-size: 16px; }
  .diagram .callout circle { r: 17; }
  .diagram .callout text { font-size: 17px; }
  .footer-slim { padding: 32px var(--gutter); }
}
@media (max-width: 760px) {
  .setup-hero h1 { font-size: clamp(32px, 9vw, 48px); }
  .setup-hero .lede { max-width: 100%; }
  .note { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .setup-hero { padding-top: calc(var(--nav-h) + 56px); }
  .trouble-grid { grid-template-columns: 1fr; }
  .steps-list li { grid-template-columns: 36px 1fr; gap: 14px; padding: 22px 20px; }
  .steps-list .num { width: 36px; height: 36px; font-size: 14px; }
  .diagram { padding: 16px 10px 12px; border-radius: 12px; }
  .diagram .lbl { font-size: 26px; }
  .diagram .sub { font-size: 20px; }
  .diagram .callout circle { r: 22; }
  .diagram .callout text { font-size: 22px; }
  .trouble { padding: 64px 16px; }
}