/* Article-only layout. Product and generated locale pages keep their shared styles. */
.guide-page .guide { max-width: 800px; padding-top: 64px; line-height: 1.85; }
.guide-page .guide h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.2; letter-spacing: -.025em; }
.guide-page .guide h2 { margin-top: 2.5rem; font-size: 1.6rem; line-height: 1.4; }
.guide-page .guide h3 { margin-top: 2rem; font-size: 1.2rem; }
.guide p, .guide li { overflow-wrap: anywhere; }
.guide a:not(.button) { text-decoration: underline; text-underline-offset: .2em; }
.guide .guide-meta { font-size: .85rem; color: var(--muted); margin-bottom: 2rem; }
.guide ol, .guide ul { padding-inline-start: 1.5rem; }
.guide li + li { margin-top: .85rem; }
.guide strong { color: var(--text); }
.guide kbd { font-family: inherit; font-size: .9em; overflow-wrap: normal; }
.guide-contents { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2rem 0; font-size: .9rem; }
.guide [id] { scroll-margin-top: 100px; }
.guide figure { margin: 2rem 0; }
.guide figure img { display: block; width: 100%; height: auto; border-radius: 18px; }
.guide figcaption { color: var(--muted); font-size: .85rem; margin-top: .65rem; }
.guide-callout { padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .04); }
.guide-page .guide-callout h2 { margin-top: 0; }
.guide-callout > :last-child { margin-bottom: 0; }
.guide .button { max-width: 100%; white-space: normal; text-align: center; }
.guide-page .nav > .locale-switch { display: inline-flex; }
@media (max-width: 480px) {
  .guide-page .guide { padding-top: 40px; }
  .guide-page .guide h1 { font-size: 2rem; }
  .guide-page .guide h2 { font-size: 1.4rem; }
  .guide-callout { padding: 1rem; }
  .guide-page .site-header { gap: 8px; }
  .guide-page .site-header .site-key { display: none; }
}