/* Reading-first guides in AlliHat's existing type and colors. */
.guide-layout { max-width: 1100px; margin: auto; padding: 160px 32px 96px; display: grid; grid-template-columns: 190px minmax(0, 700px); gap: 0 64px; }
.guide-heading { grid-column: 2; margin-bottom: 56px; }
.guide-heading > a { color: #7355b0; font-size: .9rem; }
.guide-heading h1 { font-size: clamp(2.6rem, 5vw, 3.75rem); line-height: 1.08; margin: 20px 0 24px; letter-spacing: -.09rem; }
.guide-deck { font-size: 1.25rem; line-height: 1.65; }
.guide-byline { color: #555c68; font-size: .875rem; margin-top: 22px; }
.guide-contents { align-self: start; position: sticky; top: 124px; font-size: .9rem; line-height: 1.5; }
.guide-contents p { font-weight: 600; margin-bottom: 12px; }
.guide-contents a { display: block; color: #555c68; padding: 7px 0; }
.guide-body { min-width: 0; font-size: 1.08rem; line-height: 1.8; }
.guide-body section { margin-bottom: 56px; scroll-margin-top: 120px; }
.guide-body h2, .guide-next h2 { font-size: 1.9rem; line-height: 1.25; letter-spacing: -.04rem; margin: 0 0 22px; }
.guide-body h3 { font-family: inherit; font-size: 1.08rem; font-weight: 650; letter-spacing: 0; margin: 24px 0 6px; }
.guide-body p { margin-bottom: 18px; }
.guide-body a { color: #7355b0; text-decoration: underline; text-underline-offset: 3px; }
.guide-body ul { padding-left: 24px; list-style: disc; margin: 20px 0; }
.guide-body li { margin-bottom: 12px; }
.guide-steps { list-style: decimal; padding-left: 28px; }
.guide-steps li { padding-left: 8px; margin-bottom: 28px; }
.guide-steps li::marker { color: #7355b0; font-weight: 600; }
.guide-example { padding: 28px 32px; margin: 28px 0; background: #f3f0ff; border-radius: 10px; }
.guide-example .example-label { font-size: .85rem; color: #60418e; font-weight: 600; margin-bottom: 8px; }
.guide-example blockquote { margin: 0 0 24px; font-size: 1.15rem; line-height: 1.65; }
.guide-example blockquote:last-child { margin-bottom: 0; }
.guide-install { background: #faf9fc; padding: 32px; border-radius: 10px; }
.guide-next a { display: block; padding: 8px 0; }
.guide-skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: white; padding: 12px; }
.guide-skip:focus { top: 12px; }
.guide-layout a:focus-visible, .guide-skip:focus-visible { outline: 2px solid #7355b0; outline-offset: 4px; }
.provider-guide-addition { max-width: 820px; margin: auto; padding: 64px 24px; font-size: 1.08rem; line-height: 1.75; scroll-margin-top: 110px; }
.provider-guide-addition h2 { font-size: 2.1rem; line-height: 1.25; margin-bottom: 24px; }
.provider-guide-addition h3 { font-family: inherit; font-size: 1.1rem; font-weight: 650; line-height: 1.5; letter-spacing: 0; margin-top: 24px; }
.provider-guide-addition p { margin: 16px 0; }
.provider-guide-addition figure { margin: 28px 0; }
.provider-guide-addition img { display: block; width: 100%; height: auto; border-radius: 8px; }
.provider-guide-addition figcaption { font-size: .85rem; color: #555c68; margin-top: 8px; }
.provider-guide-addition a:not(.app-store-badge) { color: #7355b0; text-decoration: underline; text-underline-offset: 3px; }
.provider-guide-addition table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 24px 0; }
.provider-guide-addition th, .provider-guide-addition td { padding: 14px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #e8e6ee; }
.provider-guide-addition th { color: #60418e; }
@media (max-width: 800px) {
 .guide-layout { display: block; padding: 128px 24px 64px; }
 .guide-heading { margin-bottom: 32px; }
 .guide-contents { position: static; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
 .guide-contents p { flex-basis: 100%; margin-bottom: 0; }
 .guide-body { font-size: 1rem; }
 .guide-body h2 { font-size: 1.7rem; }
 .guide-example, .guide-install { padding: 24px; }
 .provider-guide-addition { padding: 40px 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }