/* Long-form pages use the marketing site's shared tokens, nav and badge. */
.guide { max-width: 792px; padding-top: 64px; padding-bottom: 96px; }
.guide h1, .guide h2, .guide h3 { font-family: var(--font-rounded); line-height: 1.2; text-wrap: balance; }
.guide h1 { font-size: clamp(34px, 6vw, 52px); letter-spacing: -0.035em; margin: 16px 0 28px; }
.guide h2 { font-size: 28px; margin: 0 0 20px; }
.guide h3 { font-size: 21px; margin: 28px 0 12px; }
.guide p, .guide li, .guide dd { font-size: 17px; line-height: 1.8; }
.guide p, .guide li { color: var(--ink); }
.guide p { margin: 0 0 20px; }
.guide section { margin-top: 52px; }
.guide [id] { scroll-margin-top: 92px; }
.guide a:not(.appstore-badge), .guide-contents a { text-decoration: underline; text-underline-offset: 3px; }
.guide a:not(.appstore-badge):hover { color: var(--accent-deepest); }
.guide-answer { padding: 24px; border-radius: var(--radius-md); margin-bottom: 24px; }
.guide-answer p { margin: 0; }
.guide-contents { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 20px 0; border-block: 1px solid var(--glass-stroke); }
.guide-facts { padding: 8px 24px; border-radius: var(--radius-md); margin: 0 0 24px; }
.guide-facts div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 0; }
.guide-facts dt { font-weight: 700; line-height: 1.8; }
.guide-facts dd { margin: 0; }
.guide-exercises { padding-left: 28px; }
.guide-exercises li { padding: 5px 0 5px 8px; }
.guide-exercises span { white-space: nowrap; }
.guide .appstore-badge { margin-top: 8px; }
.guide-sources { border-top: 1px solid var(--glass-stroke); padding-top: 32px; overflow-wrap: anywhere; }
.guide-sources li { font-size: 15px; margin-bottom: 16px; }
.guide-skip { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px; background: var(--ink); color: white; border-radius: 8px; }
.guide-skip:focus { top: 12px; }
a:focus-visible { outline: 3px solid var(--accent-deepest); outline-offset: 5px; }
@media (max-width: 560px) {
  .guide { padding-top: 40px; }
  .guide h2 { font-size: 25px; }
  .guide-answer { padding: 20px; }
  .guide-facts div { grid-template-columns: 1fr; gap: 2px; }
  .guide-facts dd { font-size: 16px; }
  .guide-exercises span { white-space: normal; }
}