/* Entune website: the guides' reading layout.
   Reads only the variables in tokens.css; shared components are in site.css. */

.guide { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 112px; }
.guide__intro { display: grid; gap: 20px; }
.guide h1 { font: var(--h2-weight) var(--h2-size)/1.08 var(--font-display); letter-spacing: var(--h2-track); text-wrap: balance; }
.guide__lead { font-size: var(--lead-lg); line-height: 1.55; color: var(--text-soft); text-wrap: pretty; }
.guide .note { font-size: var(--caption); color: var(--text-muted); }
.guide__action { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; font-size: 14.5px; }

.guide section { margin-top: 64px; scroll-margin-top: 24px; }
.guide h2 { margin-bottom: 18px; font: 600 30px/1.15 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.guide section p, .guide li { font-size: var(--lead); line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }
.guide strong { font-weight: 600; color: var(--text-strong); }
.guide section > * + p, .guide section > * + ul, .guide section > * + ol, .guide section > * + .get { margin-top: 16px; }
.guide ul, .guide ol { padding-left: 22px; }
.guide ul { list-style: disc; }
.guide ol { list-style: decimal; }
.guide li + li { margin-top: 12px; }
.guide li::marker { color: var(--text-faint); }
.guide li a { text-decoration: underline; text-decoration-color: var(--accent-ring); text-underline-offset: 3px; }
.guide li a:hover { text-decoration-color: currentColor; }
.guide pre {
  margin-top: 16px; padding: 16px 18px; overflow-x: auto; border-radius: var(--r-12);
  background: var(--card); box-shadow: var(--shadow-command); font: 14px/1.6 var(--font-mono);
}
.guide__example { margin-top: 24px; padding: 22px 24px; border-radius: var(--r-18); background: var(--card); box-shadow: var(--shadow-edge); }
.guide__example p { font-size: var(--title-sm); color: var(--text-strong); }
.guide__example p + p { margin-top: 16px; }
.guide__example s { color: var(--text-faint); }
.guide__example strong { color: var(--accent-text); }
.guide .kicker { display: inline-block; margin-bottom: 4px; font-size: var(--label-size); font-weight: 600; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-muted); }
.guide .get { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
.guide .get + p { margin-top: 20px; }

@media (max-width: 560px) {
  .guide { padding-top: 40px; }
  .guide h2 { font-size: 25px; }
  .guide section p, .guide li { font-size: var(--body); }
}