/* Guide pages (server-rendered static HTML). Uses tokens from styles.css. */
.guide-header-nav { display: flex; align-items: center; gap: 14px; }
.guide-header-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.guide-header-nav a:hover { color: var(--text); }
.guide-header-nav .btn { color: var(--accent-ink); padding: 8px 14px; font-size: 0.9rem; }
.guide { max-width: 44rem; padding: 20px 0 40px; }
.guide .crumbs { font-size: 0.85rem; color: var(--muted); margin: 0 0 14px; }
.guide .crumbs a { color: var(--muted); }
.guide h1 { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 6.4vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 12px; }
.guide h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 4.6vw, 1.7rem); line-height: 1.2; margin: 36px 0 10px; }
.guide h3 { font-size: 1.08rem; margin: 22px 0 6px; }
.guide p, .guide li { font-size: 1.05rem; }
.guide ul, .guide ol { padding-left: 1.25rem; }
.guide li { margin: 6px 0; }
.guide .byline { color: var(--muted); font-size: 0.9rem; margin: 0 0 18px; }
.guide .lede { font-size: 1.15rem; color: var(--text); }
.guide .toc { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 22px 0; }
.guide .toc p { margin: 0 0 6px; font-weight: 700; }
.guide .toc ol { margin: 0; }
.guide .toc a { color: var(--text); }
.guide .example { background: var(--bg-elev); border-left: 3px solid var(--gold); border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.guide .example p { margin: 6px 0; }
.guide .example .tag { color: var(--gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.guide .note { background: rgba(61, 220, 151, 0.08); border: 1px solid rgba(61, 220, 151, 0.35); border-radius: 12px; padding: 12px 16px; margin: 16px 0; }
.guide .warn { background: rgba(240, 113, 103, 0.08); border: 1px solid rgba(240, 113, 103, 0.4); border-radius: 12px; padding: 12px 16px; margin: 16px 0; }
.guide figure { margin: 22px 0; }
.guide figure img { display: block; width: 100%; max-width: 320px; border-radius: 14px; border: 1px solid var(--line); }
.guide figcaption { color: var(--muted); font-size: 0.88rem; margin-top: 8px; }
.guide .table-wrap { overflow-x: auto; margin: 14px 0; -webkit-overflow-scrolling: touch; }
.guide table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.95rem; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.guide th { color: var(--text); background: var(--bg-elev); }
.guide td { color: var(--muted); }
.guide .script-block { position: relative; background: #070b11; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 14px 0; }
.guide .script-block pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; font: 0.98rem/1.6 var(--font); color: var(--text); }
.guide .copy-btn { margin-top: 12px; }
.guide .faq details { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
.guide .faq summary { cursor: pointer; font-weight: 700; }
.guide .faq details p { margin: 10px 0 2px; color: var(--muted); }
.guide-cta { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 30px 0; }
.guide-cta h2 { margin-top: 0 !important; }
.guide-cta p { color: var(--muted); }
.guide-cta .btn { margin-top: 6px; width: 100%; max-width: 360px; }
.guide-related { margin: 30px 0 0; }
.guide-related ul { list-style: none; padding: 0; }
.guide-related li a { display: block; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); text-decoration: none; font-weight: 600; }
.guide-related li a:hover { border-color: var(--accent); }
.guide-related li span { display: block; color: var(--muted); font-weight: 400; font-size: 0.92rem; margin-top: 2px; }
@media (max-width: 420px) {
  .guide-header-nav .hide-sm { display: none; }
}
.skip-link { top: -80px; }
.guide .disclosure { background: rgba(240, 193, 75, 0.08); border: 1px solid rgba(240, 193, 75, 0.4); border-radius: 12px; padding: 12px 16px; margin: 16px 0; font-size: 0.93rem; }
.guide .disclosure p { margin: 0; }
.guide .compare-table { min-width: 46rem; font-size: 0.9rem; }
.guide .compare-table th small { color: var(--muted); font-weight: 400; }
.guide sup a { text-decoration: none; font-size: 0.75em; }
.guide .sources { font-size: 0.9rem; color: var(--muted); }
.guide .sources a { word-break: break-word; }