/* The landing site's guide pages (server/landing-pages.ts): FAQ, families, how it works, groups, cities.
   On top of landing.css (tokens, paper, steam buttons, footer). Headings in Bangers (h1-h3 only),
   everything else DM Sans; gold for the one main action. */
.guide-top { border-bottom: 2px solid rgba(185, 120, 30, 0.45); background: rgba(16, 35, 45, 0.92); }
.guide-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 6px; padding-bottom: 6px; }
.guide-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.03em; color: var(--sh-gold); }
.guide-brand img { width: 40px; height: 40px; }
.guide-bar nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0; padding: 0; }
.guide-bar nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--sh-paper); font-weight: 600; text-underline-offset: 3px; }
.guide-bar nav a[aria-current="page"] { color: var(--sh-gold); }

.guide { padding-top: 20px; padding-bottom: 32px; max-width: 820px; }
.guide h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); line-height: 1.05; color: var(--sh-gold); margin: 8px 0 12px; }
.guide-lead { font-size: 1.125rem; color: #efe2bf; max-width: 64ch; }
.crumbs { font-size: 0.9375rem; color: #d9cca8; }
.crumbs a { color: var(--sh-paper); display: inline-flex; align-items: center; min-height: 48px; }

.guide-sec { margin-top: 28px; }
.guide-sec h2 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
.guide-sec p, .guide-sec li { color: #efe2bf; line-height: 1.6; max-width: 70ch; }
.guide-sec a, .guide-lead a, .small-print a { color: var(--sh-gold); text-underline-offset: 3px; }
.guide-sec ul { padding-left: 1.2em; }

.faq { padding: 12px 0; border-bottom: 1px solid rgba(185, 120, 30, 0.3); }
.faq h3 { font-family: var(--body, "DM Sans", system-ui, sans-serif); font-weight: 700; font-size: 1.125rem; letter-spacing: 0; color: var(--sh-paper); margin: 0 0 6px; }
.faq p { margin: 0; }

.toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; }
.toc a { display: inline-flex; align-items: center; min-height: 48px; color: var(--sh-ink); font-weight: 700; }

.guide-steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; counter-reset: step; }
.guide-steps li { counter-increment: step; }
.guide-steps h2 { font-size: 1.6rem; color: var(--sh-ink); margin: 0 0 6px; }
.guide-steps h2::before { content: counter(step) ". "; color: var(--sh-red); }
.guide-steps p { margin: 0; color: var(--sh-ink); }

.city-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 18px; }
.city-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; border-bottom: 1px solid rgba(185, 120, 30, 0.25); }
.city-list a { color: var(--sh-paper); font-weight: 600; display: inline-flex; align-items: center; min-height: 48px; }
.city-list span { color: #c9b98f; font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.guide-cta { margin-top: 36px; }
.guide-cta p { margin: 0 0 12px; }