/* Guides: long-form reading layout. */
.guide { padding: 20px 0 32px; }
.g-wrap { max-width: 780px; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.guide h1 { margin-bottom: 8px; }
.g-meta { color: var(--muted); font-size: .92rem; margin: 0 0 18px; }
.g-meta a { color: inherit; font-weight: 600; }
.g-answer { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid #30d158; border-radius: 12px; padding: 14px 18px; margin: 0 0 16px; }
.g-answer-h { margin: 0 0 6px; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.g-answer p:last-child, .g-answer ul:last-child { margin-bottom: 0; }
.g-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 20px; }
.g-cta > div { flex: 1 1 220px; }
.g-cta p { margin: 0; }
.g-cta-t { font-weight: 700; }
.g-cta .btn { text-decoration: none; }
.g-toc { border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; margin: 0 0 24px; background: var(--surface); }
.g-toc > p { margin: 0 0 6px; font-weight: 700; }
.g-toc ol { margin: 0; padding-inline-start: 20px; columns: 2 240px; column-gap: 28px; }
.g-toc li { margin: 3px 0; break-inside: avoid; }
.g-sec { margin: 0 0 26px; scroll-margin-top: 16px; }
.g-sec h2 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.01em; }
.g-sec h3 { font-size: 1.12rem; margin: 18px 0 6px; }
.g-sec p, .g-sec li { max-width: 72ch; }
.g-sec li { margin-bottom: 6px; }
.g-sec table { width: 100%; margin: 10px 0 14px; font-size: .94rem; }
.g-sec th { background: var(--surface); }
.g-sec th, .g-sec td { padding: 8px 10px; border: 1px solid var(--line); vertical-align: top; }
.tbl { overflow-x: auto; }
.g-sec figure { margin: 14px 0 18px; }
.g-sec figure svg { width: 100%; height: auto; max-width: 640px; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.g-sec figcaption { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.note, .warn, .tip { border-radius: 12px; padding: 12px 16px; margin: 12px 0; border: 1px solid var(--line); background: var(--surface); }
.warn { border-inline-start: 4px solid #ff9f0a; }
.note { border-inline-start: 4px solid #0a84ff; }
.tip { border-inline-start: 4px solid #30d158; }
.note p:last-child, .warn p:last-child, .tip p:last-child { margin-bottom: 0; }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps > li { counter-increment: s; position: relative; padding-inline-start: 40px; margin-bottom: 12px; }
.steps > li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: var(--primary-ink); font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.g-sources ol { font-size: .9rem; padding-inline-start: 22px; }
.g-sources li { margin-bottom: 6px; word-break: break-word; }
.author-box { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 8px 0 24px; }
.author-box p { margin: 0 0 4px; }
.author-name { font-weight: 700; }
.author-role { color: var(--muted); font-size: .9rem; }
.author-av { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
  color: #fff; background: conic-gradient(#ff453a 0 33%, #30d158 0 66%, #0a84ff 0); }
.author-av.big { width: 76px; height: 76px; font-size: 2rem; }
.author-head { display: flex; gap: 16px; align-items: center; }
.author-head h1 { margin: 0; }
.guide-cards .card small { display: block; }