/* Guide & comparison pages (/seo/guide.css). Builds on /seo/landing.css variables. */
.guide-hero{grid-template-columns:1fr 1fr;padding-block:56px 64px}
.guide-hero h1{font-size:clamp(36px,4vw,54px);letter-spacing:-2.2px}
.guide-hero .hero-description{max-width:460px}
.guide-facts{margin:18px 0 0;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.3px}
.guide-figure{margin:0;background:var(--surface) var(--studio-backdrop) center/cover;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 18px 40px var(--shadow)}
.guide-figure img{width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:10px}
.guide-figure figcaption{font-size:11px;line-height:1.6;color:var(--muted);text-align:center;padding-top:12px}
.guide-body{max-width:820px;padding-block:24px 64px;font-size:15px;line-height:1.85}
.guide-section+.guide-section{margin-top:48px}
.guide-body h2{font-size:30px;letter-spacing:-1px;margin:0 0 16px}
.guide-body p,.guide-body li{color:var(--muted)}
.guide-body p{margin:0 0 14px}
.guide-body strong,.guide-body em{color:var(--ink)}
.guide-body ul,.guide-body ol{padding-left:22px;margin:0 0 14px}
.guide-body li{margin-bottom:8px}
.guide-body kbd{font:600 12px/1 ui-monospace,monospace;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 5px;background:var(--raised);color:var(--ink)}
.text-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.table-scroll{overflow-x:auto;margin:0 0 12px}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.6;background:var(--raised);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 12px}
.table-scroll .spec-table{margin:0;min-width:560px}
.spec-table th,.spec-table td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
.spec-table thead th{background:var(--tint);color:var(--ink);font-weight:800}
.spec-table tbody th{font-weight:700;color:var(--ink);width:28%}
.spec-table td{color:var(--muted)}
.spec-table tr:last-child>*{border-bottom:0}
.table-note{font-size:12px!important;line-height:1.7}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.related{padding-block:8px 56px}
.related h2{font-size:26px;letter-spacing:-.8px;margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.related-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:transform .2s,box-shadow .2s}
.related-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow)}
.related-card strong{font-size:14px}
.related-card span{font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:1024px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.guide-hero{grid-template-columns:1fr;padding-block:28px 40px}.guide-figure{padding:14px}.guide-body{font-size:14px}.guide-body h2{font-size:24px}.related-grid{grid-template-columns:1fr}}