/* Reading layouts for Nesia guides. */
.guide-body { padding-bottom: 24px; }
.guide-body > p, .guide-body > h2, .guide-body > h3, .guide-example, .guide-related { max-width: 66ch; }
.guide-body h2 { color: var(--ink); font-size: clamp(24px, 3vw, 32px); line-height: 1.25; margin-top: 40px; margin-bottom: 18px; }
.guide-body h3 { color: var(--ink); font-size: 23px; line-height: 1.3; }
.guide-body p { line-height: 1.75; margin-bottom: 20px; }
.guide-body a:not(.primary-action), .guide-index h2 a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.guide-body a:hover, .guide-index h2 a:hover { color: var(--accent-text); }
.guide-example { padding: 24px; border: 1px solid var(--hairline); border-radius: var(--r-card); margin-block: 24px; }
.guide-example h3 { margin-bottom: 14px; }
.guide-example p:last-child { margin-bottom: 0; }
.guide-table { max-width: 76ch; margin-block: 24px; }
.guide-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; font-variant-numeric: tabular-nums; }
.guide-table caption { text-align: left; color: var(--ink); font-weight: 600; margin-bottom: 14px; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.guide-table th { color: var(--ink); }
.guide-related { border-top: 1px solid var(--hairline); margin-top: 48px; }
.guide-related a { display: block; padding-block: 12px; }
.guide-index { padding-bottom: 24px; }
@media (max-width: 480px) { .guide-table th, .guide-table td { padding: 10px 6px; font-size: 13px; } }