.guide-header, .guide-main, .guide-footer { max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 72px); }
.guide-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 26px; border-bottom: 1px solid var(--line); }
.guide-header a, .guide-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.guide-header .brand { gap: 12px; }
.guide-header .brand img { width: 38px; height: 38px; border-radius: 10px; }
.guide-header nav { display: flex; align-items: center; gap: 20px; }
.guide-main { padding-block: clamp(44px, 7vw, 92px); }
.guide-main .eyebrow { color: var(--accent); margin-bottom: 18px; }
.guide-main h1 { max-width: 15ch; font-size: clamp(42px, 6vw, 78px); margin-bottom: 24px; }
.guide-main .lede { max-width: 65ch; font-size: clamp(18px, 2vw, 22px); color: var(--muted); }
.guide-main section { margin-top: 68px; padding-top: 26px; border-top: 1px solid var(--line); }
.guide-main h2 { font-size: clamp(30px, 3.5vw, 48px); margin-bottom: 20px; }
.guide-main p, .guide-main li { max-width: 70ch; line-height: 1.75; }
.guide-main p + p { margin-top: 16px; }
.guide-main ul { padding-left: 1.25em; margin: 16px 0 0; }
.guide-main li + li { margin-top: 12px; }
.guide-figure { margin-top: 28px; padding: 28px; background: var(--stage); border-radius: var(--corner); display: grid; justify-items: center; gap: 16px; }
.guide-figure img { width: min(100%, 250px); height: auto; border-radius: 15px; }
.guide-figure figcaption { max-width: 60ch; color: var(--muted); font-size: 14px; text-align: center; }
.guide-callout { margin-top: 26px; padding: 20px 24px; border-left: 4px solid var(--accent); background: var(--stage); }
.guide-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 30px; }
.guide-actions a { min-height: 48px; display: inline-flex; align-items: center; }
.guide-actions .primary { background: var(--accent); color: var(--paper); border-radius: 50px; padding: 10px 20px; text-decoration: none; font-weight: 700; }
.guide-footer { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 30px 60px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
@media (max-width: 550px) { .guide-header { align-items: flex-start; } .guide-header nav { flex-direction: column; align-items: flex-end; gap: 0; } .guide-figure { padding: 20px; } }