/* Guide pages (About and the how-to and price pages): the legal reading layout plus
   answer-first blocks, figures, tables and a short design list. tools/guide-pages.mjs. */

.guide-lede p { font-size: 18px; line-height: 1.6; }
.guide-block { scroll-margin-top: 24px; }
.guide .guide-answer { font-size: 18px; line-height: 1.6; }
.guide-block ol li, .guide-block ul li { line-height: 1.55; }
.guide-figure { margin-top: 24px; }
.guide-figure img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); background: var(--page-soft); }
.guide-figure figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.guide-figure.is-phone img { max-width: 340px; margin-inline: auto; }
.guide-table { margin-top: 18px; overflow-x: auto; }
.guide-table caption { caption-side: top; text-align: left; padding-bottom: 8px; color: var(--muted); font-size: 14px; }
.guide-limits { margin-top: 48px; padding: 4px 24px 22px; border: 1px solid var(--line); border-radius: 3px; background: var(--page-soft); }
.guide-cta { margin-top: 48px; }
.guide-designs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.guide-designs a { padding: 9px 16px; border: 1px solid var(--line-strong, var(--line)); border-radius: 999px; text-decoration: none; font-size: 15px; }
.guide-designs a:hover { border-color: currentColor; }
.guide-related a[data-requires] { font-weight: 400; }
/* Wide tables break out of the reading column on large screens. */
@media (min-width: 900px) {
  .guide-table { width: min(72rem, calc(100vw - 2 * var(--gutter))); position: relative; left: 50%; transform: translateX(-50%); }
  .guide-table table { font-size: 14px; }
}