/* Guides, comparison and pillar pages: dark header, light reading column. Loaded after site.css. */
.g-hero { background: radial-gradient(900px 420px at 85% -20%, rgba(56,189,248,.16), transparent 70%), var(--ink); color: #fff; padding: 132px 0 56px; }
.g-hero .wrap { max-width: 820px; }
.g-crumbs { font-size: 13px; color: var(--mute); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.g-crumbs a:hover { color: #fff; }
.g-hero h1 { font-size: clamp(34px, 5vw, 52px); }
.g-hero .lead { margin-top: 18px; font-size: 19px; line-height: 1.55; color: var(--soft); max-width: 680px; }
.g-meta { margin-top: 18px; font-size: 13px; color: var(--mute); }
.g-body { background: #fff; color: #14171B; padding: 56px 0 72px; }
.g-body .wrap { max-width: 760px; }
.g-answer { border: 1px solid #D7EEF7; background: #F2FAFD; border-radius: 16px; padding: 20px 22px; font-size: 18px; line-height: 1.6; }
.g-answer b { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #0E7490; margin-bottom: 6px; }
.g-body h2 { font-size: clamp(25px, 3.4vw, 32px); margin: 48px 0 14px; }
.g-body h3 { font-size: 20px; margin: 28px 0 8px; letter-spacing: -0.02em; }
.g-body p, .g-body li { font-size: 17.5px; line-height: 1.7; color: #2A2F36; }
.g-body p + p { margin-top: 14px; }
.g-body ul, .g-body ol { margin: 12px 0 0 22px; }
.g-body ul { list-style: disc; } .g-body ol { list-style: decimal; }
.g-body li + li { margin-top: 8px; }
.g-body a { color: #0E7490; text-decoration: underline; text-underline-offset: 3px; }
.g-body strong { color: #07080A; }
.g-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15.5px; }
.g-scroll { overflow-x: auto; margin-top: 8px; }
.g-table th, .g-table td { text-align: left; padding: 12px 12px; border-bottom: 1px solid #E6E9ED; vertical-align: top; }
.g-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #6B7480; }
.g-table td:first-child { font-weight: 700; color: #07080A; }
.g-note { margin-top: 18px; font-size: 14.5px; color: #6B7480; }
.g-cta { margin-top: 48px; background: var(--ink); color: #fff; border-radius: 20px; padding: 28px; }
.g-cta h2 { color: #fff; margin: 0 0 8px; font-size: 26px; }
.g-cta p { color: var(--soft); }
.g-cta .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.g-cta .btn-line { color: #fff; }
.g-body .g-cta a.btn { text-decoration: none; }
.g-faq { margin-top: 8px; }
.g-faq details { border-bottom: 1px solid #E6E9ED; padding: 16px 0; }
.g-faq summary { cursor: pointer; font-weight: 700; font-size: 17.5px; color: #07080A; list-style: none; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq details p { margin-top: 10px; }
.g-related { margin-top: 48px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.g-body .g-related a { display: block; border: 1px solid #E6E9ED; border-radius: 14px; padding: 16px; text-decoration: none; color: #07080A; font-weight: 700; line-height: 1.35; transition: border-color .2s; }
.g-body .g-related a:hover { border-color: #38BDF8; }
.g-related a span { display: block; margin-top: 6px; font-weight: 500; font-size: 14.5px; color: #6B7480; }
.g-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 8px; }
.g-body .g-list a { display: block; border: 1px solid #E6E9ED; border-radius: 16px; padding: 20px; text-decoration: none; color: #07080A; }
.g-body .g-list a:hover { border-color: #38BDF8; }
.g-list b { display: block; font-size: 18px; line-height: 1.3; }
.g-list span { display: block; margin-top: 8px; color: #6B7480; font-size: 15px; line-height: 1.55; }
@media (max-width: 640px) { .g-hero { padding: 108px 0 40px; } .g-body { padding: 36px 0 56px; } .g-body p, .g-body li { font-size: 17px; } .g-cta { padding: 22px; } }