.seo-page { margin: 0; background: var(--color-page, #f6f3ee); color: var(--color-text, #1f2328); }
.seo-page > main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 80px; }
.seo-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; color: var(--color-text-muted, #667085); font-size: 14px; }
.seo-breadcrumbs a { color: inherit; }
.seo-hero, .seo-content-section, .seo-cta, .seo-related { margin-bottom: 28px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--color-border, #ded8cf); border-radius: 24px; background: var(--color-panel, #fff); }
.seo-hero h1 { max-width: 900px; margin: 0 0 20px; color: var(--color-text, #1f2328); font-size: clamp(36px, 6vw, 68px); line-height: 1.03; }
.seo-hero p, .seo-section-lead { max-width: 780px; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.seo-hero .primary-button, .seo-hero .secondary-button, .seo-cta .primary-button { display: inline-flex; margin: 16px 12px 0 0; text-decoration: none; }
.seo-content-section h2, .seo-cta h2, .seo-related h2 { margin-top: 0; font-size: clamp(28px, 4vw, 42px); }
.seo-content-section h3 { margin-top: 32px; font-size: 24px; }
.seo-content-section p, .seo-cta p { line-height: 1.7; }
.seo-content-section figure { margin: 32px 0 0; }
.seo-content-section img { display: block; width: 100%; height: auto; border-radius: 16px; }
.seo-content-section figcaption { margin-top: 10px; color: var(--color-text-muted, #667085); }
.seo-faq details { padding: 18px 0; border-top: 1px solid var(--color-border, #ded8cf); }
.seo-faq summary { cursor: pointer; font-weight: 700; }
.seo-related { display: flex; flex-wrap: wrap; gap: 16px; }
.seo-related h2 { flex-basis: 100%; }
.seo-related a { color: var(--color-accent, #c86f2d); font-weight: 700; }
.seo-article { margin-bottom: 28px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--color-border, #ded8cf); border-radius: 24px; background: var(--color-panel, #fff); }
.seo-article h2 { margin: 72px 0 20px; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.seo-article h2:first-child { margin-top: 0; }
.seo-article h3 { margin: 36px 0 14px; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25; }
.seo-article p, .seo-article li { font-size: 17px; line-height: 1.75; }
.seo-article ul, .seo-article ol { padding-left: 28px; }
.seo-article li + li { margin-top: 8px; }
.seo-article figure { margin: 36px 0; }
.seo-article img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border, #ded8cf); border-radius: 16px; }
.seo-article figcaption { margin-top: 10px; color: var(--color-text-muted, #667085); font-size: 14px; }
.seo-article figure.seo-evidence-primary { overflow-x: auto; }
.seo-article blockquote { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--color-accent, #c86f2d); }
.seo-article blockquote p { margin: 0; font-size: 19px; }
.seo-table-wrap { margin: 28px 0; overflow-x: auto; }
.seo-article table { width: 100%; min-width: 760px; border-collapse: collapse; }
.seo-article th, .seo-article td { padding: 14px; border: 1px solid var(--color-border, #ded8cf); text-align: left; vertical-align: top; line-height: 1.5; }
.seo-article th { background: var(--color-page, #f6f3ee); }
.seo-inline-cta { margin: 30px 0; }
.seo-inline-cta a { text-decoration: none; }
.seo-inline-cta-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 24px; border-radius: 16px; background: var(--color-page, #f6f3ee); }
.seo-inline-cta-primary span { color: var(--color-text-muted, #667085); }
.seo-process-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 28px 0; padding: 20px; border-radius: 16px; background: var(--color-page, #f6f3ee); }
.seo-process-flow strong { padding: 8px 12px; border: 1px solid var(--color-border, #ded8cf); border-radius: 999px; background: var(--color-panel, #fff); font-size: 14px; }
.seo-process-flow > span { color: var(--color-text-muted, #667085); }
.seo-story-anatomy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; }
.seo-story-anatomy > div { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 16px; border: 1px solid var(--color-border, #ded8cf); border-radius: 16px; background: var(--color-page, #f6f3ee); }
.seo-story-anatomy span { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--color-accent, #c86f2d); color: #fff; font-weight: 700; }
.seo-story-anatomy strong { line-height: 1.3; }
.seo-story-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 28px 0; }
.seo-story-comparison article { padding: 22px; border: 1px solid var(--color-border, #ded8cf); border-radius: 16px; background: var(--color-page, #f6f3ee); }
.seo-story-comparison article:last-child { border-color: var(--color-accent, #c86f2d); }
.seo-story-comparison span { display: block; margin-bottom: 10px; color: var(--color-text-muted, #667085); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.seo-story-comparison strong { display: block; font-size: 19px; line-height: 1.35; }
.seo-story-comparison p { margin-bottom: 0; font-size: 15px; }
.seo-change-cycle { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; margin: 30px 0 12px; }
.seo-change-cycle > div { display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 18px; border: 1px solid var(--color-border, #ded8cf); border-radius: 16px; background: var(--color-page, #f6f3ee); }
.seo-change-cycle > div:last-child { border-color: var(--color-accent, #c86f2d); }
.seo-change-cycle > div span { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--color-accent, #c86f2d); color: #fff; font-weight: 800; }
.seo-change-cycle > span { align-self: center; color: var(--color-text-muted, #667085); font-size: 24px; }
.seo-impact-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 30px 0 12px; }
.seo-impact-checklist > div { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 14px 16px; border: 1px solid var(--color-border, #ded8cf); border-radius: 14px; background: var(--color-page, #f6f3ee); }
.seo-impact-checklist span { color: var(--color-accent, #c86f2d); font-weight: 800; }
.seo-visual-note { margin-top: 10px; color: var(--color-text-muted, #667085); font-size: 14px !important; }
@media (max-width: 640px) { .seo-page > main { width: min(100% - 24px, 1120px); padding-top: 28px; } .seo-hero, .seo-content-section, .seo-cta, .seo-related, .seo-article { padding: 24px; border-radius: 18px; } .seo-article h2 { margin-top: 52px; } .seo-story-anatomy, .seo-story-comparison { grid-template-columns: 1fr; } .seo-article figure.seo-evidence-primary img { width: 900px; max-width: none; } }
@media (max-width: 640px) { .seo-change-cycle { grid-template-columns: 1fr; } .seo-change-cycle > span { transform: rotate(90deg); justify-self: center; } .seo-impact-checklist { grid-template-columns: 1fr; } }