/* A reading surface within StreakGuard's after-hours glass design. */
.guide-layout { padding-block: var(--space-2xl); }
.guide-copy { width: min(100%, 1000px); margin-inline: auto; }
.guide-intro { position: relative; isolation: isolate; text-align: center; padding-block: var(--space-xl); }
.guide-intro::before { content: ''; position: absolute; z-index: -1; inset: -100px -10% -40px; pointer-events: none; background: radial-gradient(ellipse at center, var(--color-orange-haze), var(--color-transparent) 65%); }
.guide-intro h1 { font-size: clamp(2.75rem, 5.1vw, 4.75rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
.guide-intro h1 span { color: var(--color-accent); }
.guide-intro .lead { max-width: 62ch; margin: var(--space-lg) auto 0; color: var(--color-ink-2); line-height: 1.65; }
.guide-contents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-sm); margin-block: var(--space-xl) var(--space-2xl); border-radius: var(--radius-card); background: var(--color-glass); box-shadow: var(--shadow-glass); }
.guide-contents a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: var(--space-sm); border-radius: 10px; color: var(--color-ink-2); text-align: center; text-decoration: none; font-size: var(--text-sm); }
.guide-contents a:hover { background: var(--color-glass-light); color: var(--color-accent); }
.guide-copy section { max-width: 72ch; margin-inline: auto; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.guide-copy section h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.guide-copy section p { color: var(--color-ink-2); margin-top: var(--space-md); line-height: 1.8; }
.guide-copy section a { color: var(--color-accent); text-underline-offset: 5px; }
.guide-attribution { max-width: 72ch; margin: var(--space-lg) auto 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.7; }
@media (max-width: 820px) { .guide-layout { padding-block: var(--space-xl) var(--space-2xl); } .guide-intro { padding-block: var(--space-lg); } .guide-intro .lead { font-size: 18px; } }
@media (max-width: 520px) { .guide-intro { text-align: left; } .guide-intro h1 { font-size: clamp(2.25rem, 10vw, 3.25rem); } .guide-intro .lead { font-size: 16px; } .guide-contents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-block: var(--space-lg) var(--space-xl); padding: var(--space-xs); } .guide-contents a { min-height: 52px; padding: var(--space-xs); font-size: 13px; } .guide-copy section { padding-block: var(--space-lg) var(--space-xl); } }