/* Guides (/guides) and long-form article pages. Builds on site.css / marketing.css tokens. */
.guide-index { padding: clamp(40px, 6vw, 72px) 0; }
.guide-index .mk-head h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; margin: .5rem 0 .9rem; }
.guide-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.guide-card { display: flex; flex-direction: column; padding: 26px; border-radius: var(--pm-radius-lg, 18px); background: #fff; border: 1px solid var(--pm-line, #e6e8f0); box-shadow: var(--pm-shadow, 0 8px 24px -12px rgba(15,23,42,.15)); transition: transform .3s, box-shadow .3s; }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow-lg, 0 20px 40px -18px rgba(15,23,42,.25)); }
.guide-card-cat { font-size: .82rem; font-weight: 600; color: var(--pm-muted, #64748b); margin: 0 0 .5rem; }
.guide-card h2 { font-size: 1.22rem; line-height: 1.3; font-weight: 700; margin: 0 0 .6rem; }
.guide-card h2 a { color: var(--pm-ink, #0f172a); text-decoration: none; }
.guide-card h2 a:hover { color: var(--pm-primary, #4f46e5); }
.guide-card p { color: var(--pm-ink-2, #334155); margin: 0 0 1rem; line-height: 1.6; }
.guide-card-more { margin-top: auto; font-weight: 600; text-decoration: none; }

.guide { max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) 0; }
.guide-crumbs { font-size: .88rem; color: var(--pm-muted, #64748b); margin-bottom: 1.5rem; }
.guide-crumbs a { color: inherit; }
.guide-header h1 { font-size: clamp(2rem, 4.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; margin: .4rem 0 1rem; }
.guide-lede { font-size: 1.15rem; color: var(--pm-ink-2, #334155); line-height: 1.65; }
.guide-meta { font-size: .9rem; color: var(--pm-muted, #64748b); padding-bottom: 1.5rem; border-bottom: 1px solid var(--pm-line, #e6e8f0); margin-bottom: 2rem; }

.guide-body h2 { font-size: 1.5rem; letter-spacing: -.02em; font-weight: 750; margin: 2.6rem 0 .8rem; scroll-margin-top: 80px; }
.guide-body h3 { font-size: 1.15rem; font-weight: 700; margin: 1.8rem 0 .6rem; }
.guide-body p, .guide-body li { color: var(--pm-ink-2, #334155); line-height: 1.8; font-size: 1.04rem; }
.guide-body ul, .guide-body ol { padding-left: 1.3rem; }
.guide-body li { margin-bottom: .35rem; }
.guide-body code { font-size: .9em; color: var(--pm-primary, #4f46e5); background: var(--pm-primary-soft, #eef2ff); padding: .1em .35em; border-radius: 5px; }
.guide-toc { padding: 18px 22px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--pm-line, #e6e8f0); margin: 0 0 2rem; }
.guide-toc strong { display: block; margin-bottom: .4rem; }
.guide-toc ol { margin: 0; }
.guide-tip { padding: 16px 18px; border-radius: 14px; background: #eef2ff; border: 1px solid #c7d2fe; margin: 1.5rem 0; }
.guide-tip p { margin: 0; }
.guide-warn { padding: 16px 18px; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; margin: 1.5rem 0; }
.guide-warn p { margin: 0; color: #78350f; }
.guide-example { margin: 1.2rem 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--pm-line, #e6e8f0); }
.guide-example > div { padding: 14px 18px; }
.guide-example .bad { background: #fef2f2; border-bottom: 1px solid #fecaca; }
.guide-example .good { background: #f0fdf4; }
.guide-example b { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }
.guide-example .bad b { color: #b91c1c; }
.guide-example .good b { color: #15803d; }
.guide-example p { margin: 0; }
.guide-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .96rem; }
.guide-table th, .guide-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--pm-line, #e6e8f0); vertical-align: top; }
.guide-table th { background: #f8fafc; font-weight: 700; }
.guide-table-wrap { overflow-x: auto; }

.guide-cta { margin: 3rem 0 2rem; padding: 26px; border-radius: 18px; background: linear-gradient(135deg, #eef2ff, #faf5ff); border: 1px solid #ddd6fe; }
.guide-cta h2 { font-size: 1.3rem; font-weight: 750; margin: 0 0 .4rem; }
.guide-cta p { color: var(--pm-ink-2, #334155); }
.guide-related h2 { font-size: 1.2rem; font-weight: 700; }
.guide-related ul { list-style: none; padding: 0; margin: 0; }
.guide-related li { display: flex; justify-content: space-between; gap: 1rem; padding: 12px 0; border-bottom: 1px solid var(--pm-line, #e6e8f0); }
.guide-related li span { color: var(--pm-muted, #64748b); font-size: .88rem; white-space: nowrap; }

.about-values { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 1.2rem 0; }
.about-values div { padding: 18px; border-radius: 14px; border: 1px solid var(--pm-line, #e6e8f0); background: #fff; }
.about-values strong { display: block; margin-bottom: .3rem; }
.about-values p { margin: 0; font-size: .96rem; }