/* Editorial tool pages share the existing ScanAtlas controls and dark/gold theme. */
.seo-tools-page { background: #050505; }
.seo-tool-intro { padding: 0 0 48px; }
.seo-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; font-size: 14px; color: #aeb4bc; }
.seo-tool-intro h1 { max-width: 920px; margin: 0; font: 700 clamp(32px, 4.5vw, 56px)/1.08 Figtree, sans-serif; letter-spacing: -.04em; text-wrap: balance; }
.seo-tool-intro > .container > p { max-width: 790px; margin: 20px 0 0; color: #bac0c7; font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.seo-intro-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }
.seo-intro-links a, .seo-breadcrumbs a, .seo-plan-note a, .seo-sources a, .seo-faq p a { color: #e7c48a; text-underline-offset: 4px; }
.seo-intro-links a { padding: 8px 0; }
.seo-section { padding: 64px 0; border-top: 1px solid rgb(255 255 255 / .09); }
.seo-section h2 { margin: 0 0 18px; font: 600 clamp(25px, 3vw, 36px)/1.2 Figtree, sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.seo-section h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.35; }
.seo-section p, .seo-section dd { color: #b6bec7; font-size: 16px; line-height: 1.75; text-wrap: pretty; }
.seo-tool-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.seo-tool-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid rgb(231 196 138 / .16); border-radius: 20px; background: #0c0c0d; color: #f6f4ef; text-decoration: none; transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.seo-tool-card > span:first-child { font-size: 13px; color: #e7c48a; }
.seo-tool-card h3, .seo-tool-card p { margin: 0; }
.seo-tool-card-action { margin-top: auto; padding-top: 14px; color: #e7c48a; font-weight: 600; }
.seo-guide-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 64px; align-items: start; }
.seo-steps { padding-left: 24px; margin: 32px 0 0; }
.seo-steps li { padding-left: 12px; margin-bottom: 30px; }
.seo-steps li::marker { color: #e7c48a; font-weight: 700; }
.seo-plan-note { padding: 28px; border-radius: 20px; background: #101011; border: 1px solid rgb(231 196 138 / .2); }
.seo-plan-note h2 { font-size: 24px; }
.seo-plan-list { margin: 30px 0 0; }
.seo-plan-list > div { border-top: 1px solid rgb(255 255 255 / .1); padding: 20px 0; }
.seo-plan-list dt { font-size: 18px; font-weight: 600; color: #e7c48a; }
.seo-plan-list dd { margin: 8px 0 0; }
.seo-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.seo-reading-grid h2 { font-size: 25px; }
.seo-faq { display: grid; gap: 24px; }
.container.seo-faq { grid-template-columns: 1fr 1.4fr; gap: 64px; }
.seo-faq details { border-bottom: 1px solid rgb(255 255 255 / .13); }
.seo-faq summary { cursor: pointer; padding: 20px 4px; font-size: 18px; line-height: 1.5; color: #f6f4ef; }
.seo-faq details p { margin: 0; padding: 0 4px 22px; }
.seo-example { margin: 24px 0 0; padding: 20px; border-radius: 16px; background: #111112; border: 1px solid rgb(255 255 255 / .12); }
.seo-example figcaption { color: #b6bec7; font-size: 14px; margin-bottom: 16px; }
.seo-example pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 14px; line-height: 1.8; color: #e7c48a; }
.seo-related, .seo-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.seo-related a, .seo-app-links a { display: block; padding: 16px 0; color: #e7c48a; text-underline-offset: 5px; }
.seo-app-cta { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: center; padding: 40px; border: 1px solid rgb(231 196 138 / .22); border-radius: 24px; background: linear-gradient(120deg, #18150f, #090909 70%); }
.seo-actions { margin-top: 24px; }
.seo-app-links a + a { border-top: 1px solid rgb(255 255 255 / .1); }
.seo-nojs { padding: 20px; color: #e7c48a; }
.seo-sources { color: #aeb4bc; font-size: 14px; }
.seo-tools-page a:focus-visible, .seo-tools-page summary:focus-visible { outline: 2px solid #e7c48a; outline-offset: 5px; }
/* Above site navigation (40) and dropdowns (60), below modal overlays (100). */
.seo-skip-link { position: fixed; left: 16px; top: -100px; z-index: 70; background: #e7c48a; color: #050505; padding: 14px 20px; border-radius: 8px; }
.seo-skip-link:focus { top: 12px; }
@media (hover: hover) and (pointer: fine) { .seo-tool-card:hover { border-color: #a8875e; background: #131211; } }
@media (max-width: 960px) { .seo-tool-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seo-guide-grid, .seo-reading-grid, .container.seo-faq, .seo-app-cta { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 600px) { .seo-tool-intro { padding-bottom: 40px; } .seo-tool-directory { grid-template-columns: minmax(0, 1fr); } .seo-section { padding: 44px 0; } .seo-app-cta { padding: 24px; } .seo-actions { flex-direction: column; align-items: stretch; } .seo-breadcrumbs { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .seo-tool-card { transition: none; } }