.seo-page { color: #173b35; background: #f7faf8; }
.seo-hero { position: relative; min-height: 520px; background-size: cover; background-position: center; display: flex; align-items: center; }
.seo-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(255,255,255,.93) 40%, rgba(255,255,255,.05) 85%); }
.seo-hero-copy { position: relative; max-width: 620px; padding: 48px 32px; }
.seo-brand { font-weight: 700; font-size: 22px; }
.seo-hero h1 { font: 700 44px/1.12 Georgia, serif; margin: 16px 0; overflow-wrap: anywhere; }
.seo-hero-copy > p { line-height: 1.65; }
.seo-signin { margin-left: 18px; text-decoration: underline; }
.seo-content, .seo-faq, .seo-related { width: min(1000px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0; }
.seo-content h2, .seo-faq h2, .seo-related h2 { font: 700 27px/1.25 Georgia, serif; }
.seo-content p, .seo-faq p { line-height: 1.75; max-width: 680px; }
.seo-example { margin: 0 0 32px; }
.seo-example img { max-width: 100%; max-height: 420px; object-fit: contain; display: block; }
.seo-example figcaption { margin-top: 10px; font-size: 14px; }
.seo-faq details { padding: 18px 0; border-bottom: 1px solid #cbd8cf; }
.seo-faq summary { cursor: pointer; font-weight: 600; }
.seo-related { border-top: 1px solid #cbd8cf; }
.seo-related a { display: block; padding: 8px 0; text-decoration: underline; }
@media (max-width: 600px) {
    .seo-hero { min-height: 540px; align-items: flex-end; }
    .seo-hero::before { background: linear-gradient(0deg, rgba(255,255,255,.98), rgba(255,255,255,.94) 70%, rgba(255,255,255,.3)); }
    .seo-hero-copy { padding: 28px 20px; }
    .seo-hero h1 { font-size: 34px; }
}