﻿.guide-article { background: #fff; padding: 40px 20px 60px; min-height: 70vh; }
.guide-inner { max-width: 760px; margin: 0 auto; }
.guide-breadcrumb { font-size: 13px; color: #6c757d; margin-bottom: 18px; }
.guide-breadcrumb a { color: #6c757d; text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--color-3); }
.guide-breadcrumb span { margin: 0 4px; }
.guide-article h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; }
.guide-meta { color: #6c757d; font-size: 14px; margin-bottom: 32px; }
.guide-article h2 { font-size: clamp(22px, 3.5vw, 28px); font-weight: 700; margin-top: 36px; margin-bottom: 14px; letter-spacing: -0.01em; }
.guide-article h3 { font-size: 19px; font-weight: 700; margin-top: 24px; margin-bottom: 10px; }
.guide-article p, .guide-article li { font-size: 17px; line-height: 1.65; color: #1a1a1a; }
.guide-article ul, .guide-article ol { padding-left: 22px; margin-bottom: 18px; }
.guide-article li { margin-bottom: 6px; }
.guide-article a { color: var(--color-3); }
.guide-article blockquote { border-left: 4px solid var(--color-3); background: #f8f9fa; padding: 14px 18px; margin: 22px 0; font-style: italic; color: #495057; }
.guide-cta { margin-top: 48px; padding: 28px; background: linear-gradient(135deg, var(--color-3), var(--color-4, #5a32a3)); color: #fff; border-radius: 18px; text-align: center; }
.guide-cta h2 { color: #fff; margin-top: 0; }
.guide-cta p { color: rgba(255,255,255,0.9); margin-bottom: 18px; font-size: 16px; }
.guide-cta .btn { background: #fff; color: var(--color-3); }
.guide-cta .btn:hover { background: #f8f9fa; color: var(--color-4, #5a32a3); }
.guide-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--landing-border, rgba(0,0,0,0.08)); }
.guide-related h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.guide-related ul { list-style: none; padding: 0; }
.guide-related li { margin-bottom: 6px; font-size: 15px; }

/* Hub */
.guide-hub { background: var(--landing-bg, #f8f9fa); padding: 50px 20px 70px; min-height: 70vh; }
.guide-hub-inner { max-width: 980px; margin: 0 auto; }
.guide-hub h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; margin-bottom: 8px; }
.guide-hub .lede { color: #495057; font-size: 17px; margin-bottom: 36px; max-width: 680px; }
.guide-card-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px) { .guide-card-grid { grid-template-columns: repeat(2, 1fr); } }
.guide-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 22px; text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; display: block; }
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.12); color: inherit; }
.guide-card h2 { font-size: 19px; font-weight: 700; margin-bottom: 6px; color: var(--color-3); }
.guide-card p { color: #6c757d; font-size: 15px; margin: 0; }