:root { color-scheme: light; --ink: #17191c; --seo-muted: #62676c; --seo-line: #e0e4e6; --green: #146d49; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: "Noto Sans SC", sans-serif; font-size: 16px; background: #fff; letter-spacing: 0; }
main, .site-footer { color: var(--ink); line-height: 1.7; }
#seo-header-root { position: sticky; top: 0; z-index: 20; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid #227aef; outline-offset: 5px; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 10; padding: 10px 16px; background: #fff; }
.skip-link:focus { top: 10px; }
.site-header { min-height: 78px; padding: 16px 5%; display: flex; align-items: center; gap: 40px; border-bottom: 1px solid var(--seo-line); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 25px; font-weight: 750; }
.brand-square { width: 9px; height: 9px; background: #38a776; }
.site-header nav { display: flex; gap: 28px; font-size: 14px; }
.site-header nav a:hover, .site-footer a:hover { color: var(--green); }
.header-action { margin-left: auto; font-size: 14px; font-weight: 600; }
.header-action span { margin-left: 8px; }
.hero { position: relative; isolation: isolate; min-height: 590px; height: 650px; max-height: 76vh; overflow: hidden; background: #f1f5f3; }
.hero-media { position: absolute; z-index: -2; width: 56%; height: 100%; right: 3%; top: 0; object-fit: contain; object-position: right center; }
.hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 43%; background: #f1f5f3; }
.hero-pink, .hero-pink::before { background: #f7f0f2; }
.hero-blue, .hero-blue::before { background: #eff4f9; }
.hero-copy { width: 42%; padding: 70px 0 70px 8%; position: relative; }
.eyebrow { margin: 0 0 26px; font-size: 12px; font-weight: 650; color: var(--green); }
main h1 { margin: 0 0 24px; font-size: 48px; line-height: 1.25; font-weight: 750; overflow-wrap: anywhere; }
.hero-intro { margin: 0 0 32px; max-width: 350px; color: #42494a; font-size: 17px; }
.tool-availability { margin: -12px 0 24px; max-width: 350px; font-size: 13px; line-height: 1.7; color: #62676c; }
.tool-status { display: inline-block; margin-right: 8px; font-size: 12px; color: #9d3e19; }
.primary-action { display: inline-flex; gap: 26px; align-items: center; justify-content: space-between; min-height: 50px; padding: 11px 24px; background: var(--ink); color: #fff; border-radius: 4px; font-weight: 600; white-space: nowrap; transition: background .15s; }
.primary-action:hover { background: var(--green); }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; margin-left: 20px; text-decoration: underline; text-underline-offset: 5px; }
.hero-copy > .text-link { display: flex; margin: 24px 0 0; }
.section { padding: 64px max(7%, calc((100% - 1120px) / 2)); border-bottom: 1px solid var(--seo-line); }
.section-heading { display: flex; gap: 24px; align-items: baseline; }
.section-number { color: var(--seo-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
main h2 { font-size: 30px; line-height: 1.4; margin: 0; font-weight: 650; }
.section-lead { max-width: 710px; color: var(--seo-muted); margin: 22px 0 40px 52px; }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.feature-list article { border-top: 1px solid #a9bcb3; padding-top: 18px; }
.feature-number { color: var(--green); font-size: 12px; }
main h3 { font-size: 19px; margin: 12px 0; }
.feature-list p { color: var(--seo-muted); font-size: 15px; margin: 0; }
.workflow { background: #f6f8f7; }
.workflow ol { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 28px 0; margin: 0; }
.workflow li { counter-increment: step; border-bottom: 1px solid #ccd5d0; padding: 10px 0 20px; }
.workflow li::before { content: "0" counter(step); display: block; margin-bottom: 18px; color: var(--green); font-size: 26px; }
.workflow > .primary-action { margin-top: 8px; }
.faq-list { margin: 28px 0 0 52px; }
details { border-bottom: 1px solid var(--seo-line); padding: 20px 0; }
summary { cursor: pointer; font-weight: 550; padding-right: 20px; }
details p { color: var(--seo-muted); max-width: 850px; margin-bottom: 0; }
.related-list { margin: 28px 0 0 52px; }
.related-list a { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--seo-line); padding: 19px 0; font-size: 18px; }
.related-list a:hover { color: var(--green); }
.site-footer { padding: 42px 7%; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.site-footer p { color: var(--seo-muted); font-size: 13px; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; font-size: 13px; }
.directory-heading { padding: 68px 8% 40px; }
.directory-heading main h1 { font-size: 48px; }
.directory-heading > p:last-child { color: var(--seo-muted); }
.tool-directory { padding: 0 8% 60px; }
.directory-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; border-top: 1px solid var(--seo-line); padding: 38px 0; }
.directory-copy main h2 { font-size: 28px; margin: 12px 0; }
.directory-copy > p { color: var(--seo-muted); max-width: 430px; }
.directory-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.directory-actions .text-link { margin-left: 0; }
.directory-preview img { width: 100%; height: auto; display: block; border: 1px solid var(--seo-line); border-radius: 4px; }
@media (min-width: 1700px) { .hero-copy { padding-left: max(8%, calc((100vw - 1440px) / 2)); width: 45%; } }
@media (max-width: 900px) { .site-header { gap: 24px; } .hero { height: 720px; max-height: none; } .hero-copy { width: 58%; padding: 48px 6%; } .hero-media { width: 80%; right: -22%; } main h1 { font-size: 40px; } .feature-list { gap: 22px; } .directory-row { gap: 28px; } }
@media (max-width: 600px) { .site-header { min-height: 66px; padding: 12px 5%; gap: 18px; flex-wrap: wrap; } .wordmark { font-size: 22px; } .site-header nav { gap: 16px; font-size: 13px; margin-left: auto; } .header-action { display: none; } .hero { height: auto; min-height: 630px; max-height: none; } .hero-copy { width: 100%; padding: 38px 6% 300px; } .hero-media { width: 94%; height: 275px; top: auto; bottom: 12px; right: 3%; object-position: center; } .hero::before { display: none; } main h1 { font-size: 34px; max-width: 310px; margin-bottom: 18px; } .eyebrow { margin-bottom: 18px; } .hero-intro { font-size: 15px; margin-bottom: 23px; max-width: 350px; } .hero-copy > .text-link { display: inline-flex; margin: 0 0 0 16px; } .primary-action { min-height: 46px; padding: 10px 20px; gap: 22px; } .section { padding: 38px 6%; } main h2 { font-size: 24px; } .section-heading { gap: 15px; } .section-lead, .faq-list, .related-list { margin-left: 0; } .feature-list, .workflow ol { grid-template-columns: 1fr; gap: 26px; } .workflow li { padding-top: 0; } .workflow li::before { display: inline-block; margin: 0 18px 0 0; font-size: 19px; } .site-footer { padding: 30px 6%; gap: 14px; } .site-footer p { width: 100%; margin: 0; } .site-footer nav { margin-left: 0; gap: 18px; } .directory-heading { padding: 38px 6% 24px; } .directory-heading main h1 { font-size: 34px; } .tool-directory { padding: 0 6% 35px; } .directory-row { grid-template-columns: 1fr; gap: 26px; padding: 30px 0; } .directory-copy main h2 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .primary-action { transition: none; } }