:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #fbfaf8; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.65; }
a { color: #135f59; }
.seo-header { min-height: 76px; padding: 14px clamp(18px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #112d79; color: white; }
.seo-brand { display: inline-flex; align-items: center; gap: 12px; color: white; text-decoration: none; font-weight: 800; font-size: 1.1rem; }
.seo-brand img { border-radius: 10px; }
main, .seo-footer { width: min(1100px, calc(100% - 36px)); margin-inline: auto; }
.seo-breadcrumb { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 24px 0 0; font-size: .9rem; color: #667085; }
.seo-hero { padding: clamp(42px, 8vw, 82px) 0 38px; max-width: 880px; }
.seo-eyebrow { color: #0b7770; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 8px 0 16px; color: #102a70; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 6vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em; }
h2 { color: #172b61; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.2; }
.seo-lead { font-size: clamp(1.08rem, 2vw, 1.32rem); color: #475467; max-width: 760px; }
.seo-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.seo-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 19px; border-radius: 10px; background: #087f77; color: white; text-decoration: none; font-weight: 800; }
.seo-button--quiet { background: white; color: #163476; border: 1px solid #cbd5e1; }
.seo-header .seo-button--quiet { color: white; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
.seo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 52px; }
.seo-stats div { padding: 22px; border: 1px solid #d9e2e8; border-radius: 14px; background: white; }
.seo-stats strong, .seo-stats span { display: block; }
.seo-stats strong { color: #0b7770; font-size: 1.7rem; }
.seo-stats span { color: #667085; }
.seo-section { padding: 28px 0 36px; border-top: 1px solid #e4e7ec; max-width: 940px; }
.seo-section p, .seo-section li { color: #475467; }
.seo-section li + li { margin-top: 9px; }
.seo-song-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.seo-song-list li { padding: 14px 16px; border: 1px solid #dce4e8; border-radius: 10px; background: white; }
.seo-song-list strong, .seo-song-list span { display: block; }
.seo-song-list span { font-size: .9rem; }
.seo-translation { color: #0b7770 !important; }
.seo-text-link { font-weight: 800; }
.seo-card-grid, .seo-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seo-card, .seo-link-grid a { padding: 18px; border: 1px solid #dce4e8; border-radius: 12px; background: white; text-decoration: none; }
.seo-card strong, .seo-card span { display: block; }
.seo-card strong { color: #163476; }
.seo-card span { margin-top: 5px; color: #667085; font-size: .92rem; }
.seo-help { border: 0; padding: 28px; margin: 18px 0 36px; border-radius: 16px; background: #edf9f6; }
.seo-faq-item { padding: 18px 20px; margin-top: 12px; border: 1px solid #dce4e8; border-radius: 12px; background: white; }
.seo-faq-item h3 { margin: 0; color: #163476; font-size: 1.02rem; line-height: 1.35; }
.seo-faq-item p { margin: 8px 0 0; }
.seo-watch-hero { padding: clamp(30px, 5vw, 54px) 0 30px; }
.seo-watch-hero h1 { max-width: 960px; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.08; }
.seo-video-frame { width: 100%; margin-top: 28px; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: #071334; box-shadow: 0 14px 34px rgba(16, 42, 112, .16); }
.seo-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.seo-video-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 46px; }
.seo-video-facts div { min-width: 0; padding: 15px 17px; border: 1px solid #d9e2e8; border-radius: 12px; background: white; }
.seo-video-facts strong, .seo-video-facts span { display: block; }
.seo-video-facts strong { color: #163476; font-size: .82rem; }
.seo-video-facts span { margin-top: 3px; color: #475467; overflow-wrap: anywhere; }
.seo-verification { max-width: 1100px; }
.seo-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seo-check-grid div { padding: 18px; border: 1px solid #cfdbe8; border-radius: 12px; background: #f7f9fc; }
.seo-check-grid strong, .seo-check-grid span { display: block; }
.seo-check-grid strong { color: #163476; }
.seo-check-grid span { margin-top: 7px; color: #475467; font-size: .94rem; }
.seo-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.seo-video-card { overflow: hidden; border: 1px solid #dce4e8; border-radius: 14px; background: white; color: #163476; text-decoration: none; }
.seo-video-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #e6ecf2; }
.seo-video-card span { display: block; padding: 13px 15px 15px; }
.seo-video-card strong, .seo-video-card small { display: block; }
.seo-video-card small { margin-top: 5px; color: #667085; line-height: 1.4; }
.seo-footer { margin-top: 40px; padding: 32px 0 48px; border-top: 1px solid #d0d5dd; color: #667085; font-size: .9rem; }
.seo-footer nav { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 700; }
@media (max-width: 720px) { .seo-header { align-items: flex-start; } .seo-header .seo-button { min-height: 40px; padding: 8px 12px; font-size: .86rem; } .seo-brand span { max-width: 120px; line-height: 1.15; } .seo-stats, .seo-card-grid, .seo-link-grid, .seo-song-list, .seo-video-facts, .seo-video-grid, .seo-check-grid { grid-template-columns: 1fr; } h1 { font-size: 2.3rem; } .seo-video-frame { margin-inline: -18px; width: calc(100% + 36px); border-radius: 0; } }