/* AEU DNS — shared guide-page CSS (one template for every SEO guide page).
 * r.10b: every colour/size via theme tokens (var(--*)); no hex, no inline style.
 * Pages use these generic .guide-* classes and keep only their base body/font
 * rules + any page-specific component in their own <style> block. */
.guide-hero { padding: 56px 24px 40px; text-align: center;
    background: radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%), var(--surface);
    border-bottom: 1px solid var(--border); }
.guide-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); padding: 5px 14px; border-radius: 999px; margin-bottom: 18px; }
.guide-hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.16; color: var(--text);
    letter-spacing: -.3px; max-width: 760px; margin: 0 auto 16px; }
.guide-hero p { font-size: clamp(.98rem, 1.4vw, 1.12rem); color: var(--muted); max-width: 700px; margin: 0 auto; }
.guide-hero p strong { color: var(--text); font-weight: 700; }

.guide-wrap { max-width: 960px; margin: 0 auto; padding: 52px 24px; }
.guide-block { margin-top: 44px; }
.guide-section-title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 700; color: var(--text);
    letter-spacing: -.2px; margin-bottom: 8px; text-align: center; }
.guide-section-sub { font-size: 14.5px; color: var(--muted); text-align: center; max-width: 620px; margin: 0 auto 30px; }

.guide-prose { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; }
.guide-prose p { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.guide-prose p strong { color: var(--accent); font-weight: 700; }

.guide-cta { margin-top: 8px; text-align: center; padding: 40px 24px; border-radius: 16px; border: 1px solid var(--border);
    background: radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%), var(--surface-card); }
.guide-cta h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--text); margin-bottom: 8px; }
.guide-cta p { font-size: 14.5px; color: var(--muted); max-width: 560px; margin: 0 auto 20px; }
.guide-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, black 22%));
    color: var(--on-accent); border-radius: 10px; font-size: 15px; font-weight: 600;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent); transition: transform 180ms cubic-bezier(.34,1.61,.7,1.3); }
.guide-btn-primary:hover { transform: scale(1.03); }
.guide-btn-primary svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.guide-links { padding: 20px 22px; background: var(--surface-card); border: 1px solid var(--border);
    border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; }
.guide-links h2 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.guide-links p { font-size: 14px; color: var(--muted); line-height: 1.7; }
.guide-links a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.guide-faq { display: flex; flex-direction: column; gap: 12px; }
.guide-faq-item { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
.guide-faq-item h3 { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.guide-faq-item p { font-size: 14px; color: var(--muted); line-height: 1.6; }

@media (max-width: 600px) {
    .guide-hero { padding: 40px 18px 30px; }
    .guide-wrap { padding: 36px 18px; }
    .guide-cta { padding: 30px 18px; }
}