.guide-header { gap: 1.5rem; flex-wrap: wrap; }
.guide-nav { display: flex; gap: 1.5rem; margin-left: auto; font-size: .95rem; }
.guide-nav a:hover, .guide-breadcrumb a:hover, .guide-back:hover { color: var(--purple, #6946c5); }
.guide-index { padding-top: 3rem; padding-bottom: 5rem; }
.guide-back { display: block; margin-bottom: 2.5rem; font-size: .9rem; }
.guide-index > .mono-label { display: block; margin-bottom: 1rem; }
.guide-index h1 { max-width: 16ch; margin: 0 0 1.5rem; font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1.06; letter-spacing: -.045em; }
.guide-intro { max-width: 65ch; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.65; }
.guide-index > p { max-width: 70ch; line-height: 1.75; }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; margin: 2.5rem 0; }
.guide-card { display: flex; flex-direction: column; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid #dcd4c5; border-radius: 1rem; background: #fffdf8; }
.guide-card h2, .guide-card h3 { margin: 1rem 0 .75rem; font-size: 1.45rem; line-height: 1.3; letter-spacing: -.025em; }
.guide-card h2 a, .guide-card h3 a { color: inherit; text-decoration: none; }
.guide-card h2 a:hover, .guide-card h3 a:hover { color: var(--purple, #6946c5); text-decoration: underline; text-underline-offset: .2em; }
.guide-card p { margin: 0 0 1.5rem; line-height: 1.75; }
.guide-card .guide-read { align-self: flex-start; margin-top: auto; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.guide-article { max-width: 56rem; padding-top: 2rem; padding-bottom: 2rem; }
.guide-breadcrumb { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 2.5rem; font-size: .85rem; line-height: 1.6; }
.guide-article-header h1 { margin: 1rem 0 1.5rem; font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.12; letter-spacing: -.04em; }
.guide-byline { margin: 1.5rem 0 2.5rem; font-size: .9rem; color: #625b50; }
.guide-toc { margin: 2rem 0 3rem; padding: 1.5rem 2rem; border-left: 3px solid var(--purple, #6946c5); background: #eee8fb; border-radius: 0 .75rem .75rem 0; }
.guide-toc h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.guide-toc ol { margin: 0; padding-left: 1.2rem; }
.guide-toc li { margin: .5rem 0; line-height: 1.5; }
.guide-toc a, .guide-body a { text-decoration: underline; text-underline-offset: .2em; }
.guide-body { font-size: 1.07rem; line-height: 1.85; overflow-wrap: break-word; }
.guide-body h2 { margin: 3rem 0 1rem; font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.3; letter-spacing: -.025em; scroll-margin-top: 1.5rem; }
.guide-body h3 { margin: 1.75rem 0 .75rem; font-size: 1.25rem; line-height: 1.4; }
.guide-body p { margin: 0 0 1.25rem; }
.guide-body ul, .guide-body ol { padding-left: 1.5rem; margin: 1.25rem 0; }
.guide-body li { padding-left: .3rem; margin: .85rem 0; }
.guide-body .guide-formula { padding: 1.2rem 1.5rem; border-radius: .65rem; background: #eee8fb; font-weight: 700; }
.guide-table { width: 100%; overflow-x: auto; margin: 1.75rem 0; border: 1px solid #dcd4c5; border-radius: .65rem; }
.guide-table:focus-visible { outline: 3px solid var(--purple, #6946c5); outline-offset: 4px; }
.guide-table table { width: 100%; min-width: 34rem; border-collapse: collapse; background: #fffdf8; font-size: .95rem; line-height: 1.6; }
.guide-table th, .guide-table td { padding: 1rem; border-bottom: 1px solid #e5dfd4; text-align: left; vertical-align: top; }
.guide-table thead { background: #eee8fb; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }
.guide-callout { margin: 3rem 0 1rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #cfc1ed; border-radius: 1rem; background: #eee8fb; }
.guide-callout h2 { margin: .75rem 0 1rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -.025em; }
.guide-callout p { max-width: 65ch; line-height: 1.75; }
.guide-callout .cta { margin-top: .75rem; }
.guide-related { padding-top: 1.5rem; padding-bottom: 4rem; }
.guide-related > h2 { font-size: 1.8rem; letter-spacing: -.025em; }
@media (max-width: 600px) {
  .guide-header { gap: 1rem; }
  .guide-header .wordmark { font-size: 1.3rem; }
  .guide-header .cta { font-size: .85rem; padding: .8rem 1rem; }
  .guide-nav { order: 3; flex-basis: 100%; margin-left: 0; }
  .guide-header > .cta { margin-left: auto; }
  .guide-index { padding-top: 2rem; }
  .guide-toc { padding: 1.25rem 1.5rem; }
  .guide-article { padding-top: 1rem; }
}