/* Caliph v2: flat paper, existing green, concise steps and real screenshots. */
.setup-guide { background: var(--sky-surface); color: var(--sky-ink); }
.setup-guide .content-width { width: min(1040px, calc(100% - 40px)); margin-inline: auto; }
.guide-width { width: min(960px, calc(100% - 40px)); margin: 24px auto 80px; }
.guide-intro { max-width: 660px; margin-bottom: 48px; }
.setup-guide h1 { font: 400 clamp(34px, 5vw, 52px)/1.12 var(--sky-font-serif); letter-spacing: -.03em; margin: 0 0 20px; }
.setup-guide h2 { font: 400 28px/1.15 var(--sky-font-serif); letter-spacing: -.02em; margin: 0 0 12px; }
.setup-guide p { font-size: 17px; line-height: 1.55; margin: 0 0 16px; }
.setup-guide .guide-note { color: var(--sky-secondary); font-size: 14px; }
.guide-step { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.55fr); gap: 44px; padding: 36px 0; border-top: 1px solid var(--sky-hairline); align-items: start; }
.step-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sky-ring-track); margin-bottom: 16px; font-weight: 600; }
.guide-images { display: flex; align-items: flex-start; gap: 16px; }
.guide-shot { position: relative; flex: 1; min-width: 0; max-width: 300px; margin: 0; overflow: hidden; border-radius: var(--sky-radius-field); background: var(--sky-inset); }
.guide-shot img { position: absolute; inset: 0; display: block; width: 100%; height: auto; }
.guide-shot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.guide-shot rect { fill: none; stroke: #d72828; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.guide-help { max-width: 660px; padding-top: 32px; border-top: 1px solid var(--sky-hairline); }
.guide-help details { border-bottom: 1px solid var(--sky-hairline); padding: 16px 0; }
.guide-help summary { cursor: pointer; min-height: 28px; font-size: 16px; font-weight: 600; }
.guide-help details p { margin: 12px 0 0; }
.guide-help > p:first-of-type { margin-top: 24px; }
.guide-help a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 660px) {
  .guide-width { margin-top: 16px; }
  .guide-intro { margin-bottom: 32px; }
  .guide-step { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .guide-images { flex-direction: column; align-items: center; gap: 20px; }
  .guide-shot { width: 100%; flex: auto; }
  .guide-copy { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }