:root {
    --seo-navy: #0b1f33;
    --seo-navy-soft: #13314d;
    --seo-amber: #f5b700;
    --seo-slate: #526170;
    --seo-border: #dce4e9;
    --seo-soft: #f6f8fa;
}

.seo-container { width: min(100% - 2.5rem, 80rem); margin-inline: auto; }
.seo-hero { position: relative; overflow: hidden; background: #fff; }
.seo-hero::after { position: absolute; z-index: 0; top: 0; right: 0; width: 39%; height: 100%; background: linear-gradient(135deg, #fff8dc 0%, #fff 70%); content: ""; }
.seo-hero-grid { position: relative; z-index: 1; display: grid; min-height: 43rem; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 4.5rem; padding-block: 4.5rem 5rem; }
.seo-hero-copy h1 { max-width: 12.5ch; color: var(--seo-navy); font: 700 clamp(2.8rem, 5.1vw, 4.7rem)/1.03 Sora, sans-serif; letter-spacing: -.055em; }
.seo-hero-copy > p { max-width: 38rem; margin-top: 1.6rem; color: var(--seo-slate); font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.7; }
.seo-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.seo-hero-copy > small { display: block; max-width: 38rem; margin-top: 1rem; color: #70808d; font-size: .78rem; font-weight: 700; line-height: 1.55; }

.seo-workspace-preview { overflow: hidden; border: 1px solid #d4dde4; border-radius: 1rem; background: #fff; box-shadow: 0 2.2rem 4rem rgb(11 31 51 / 17%); }
.seo-window-bar { display: flex; height: 3rem; align-items: center; gap: .38rem; border-bottom: 1px solid var(--seo-border); padding: 0 1rem; color: #748390; }
.seo-window-bar > span { width: .55rem; height: .55rem; border-radius: 50%; background: #d6dfe5; }
.seo-window-bar strong { margin-left: auto; font-size: .67rem; }
.seo-workspace-body { display: grid; min-height: 29rem; grid-template-columns: 4rem 1fr; }
.seo-workspace-body > nav { display: flex; align-items: center; flex-direction: column; gap: 1rem; background: var(--seo-navy); padding-top: 1.5rem; }
.seo-workspace-body > nav i { display: block; width: 1.35rem; height: .32rem; border-radius: 1rem; background: #486075; }
.seo-workspace-body > nav i:first-child { width: 1.7rem; height: 1.7rem; border: .35rem solid var(--seo-amber); border-radius: 50%; background: transparent; }
.seo-workspace-body > nav i.is-active { height: 1.6rem; border-radius: .35rem; background: var(--seo-amber); }
.seo-workspace-main { padding: 1.8rem; }
.seo-workspace-main > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--seo-border); padding-bottom: 1.2rem; }
.seo-workspace-main header div { display: grid; gap: .28rem; }
.seo-workspace-main header small { color: #81909c; font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.seo-workspace-main header b { color: var(--seo-navy); font-size: .9rem; }
.seo-workspace-main header em { border-radius: 999px; background: #fff5ce; padding: .38rem .65rem; color: #805f00; font-size: .58rem; font-style: normal; font-weight: 850; }
.seo-workspace-main ol { display: grid; gap: .7rem; margin-top: 1.2rem; }
.seo-workspace-main li { display: flex; align-items: center; gap: .8rem; border: 1px solid #e2e8ec; border-radius: .65rem; padding: .85rem; color: #85929d; }
.seo-workspace-main li > span { display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #eef2f4; font-size: .62rem; font-weight: 850; }
.seo-workspace-main li div { display: grid; gap: .15rem; }
.seo-workspace-main li b { color: var(--seo-navy); font-size: .68rem; }
.seo-workspace-main li small { font-size: .57rem; }
.seo-workspace-main li.is-done > span { background: #dff3e8; color: #1f7450; }
.seo-workspace-main li.is-current { border-color: #e0ad13; box-shadow: 0 0 0 3px rgb(245 183 0 / 12%); }
.seo-workspace-main li.is-current > span { background: var(--seo-amber); color: var(--seo-navy); }
.seo-workspace-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.seo-workspace-summary div { display: grid; gap: .25rem; border-radius: .6rem; background: var(--seo-navy); padding: .8rem; }
.seo-workspace-summary span { color: #9fb0be; font-size: .55rem; }
.seo-workspace-summary strong { color: #fff; font-size: .78rem; }

.seo-audience-band { border-block: 1px solid var(--seo-border); background: #fff; }
.seo-audience-band .seo-container { display: flex; min-height: 5.3rem; align-items: center; justify-content: space-between; gap: 2rem; }
.seo-audience-band strong { color: var(--seo-navy); font-size: .9rem; }
.seo-audience-band ul { display: flex; flex-wrap: wrap; gap: .8rem 1.7rem; color: var(--seo-slate); font-size: .78rem; font-weight: 700; }
.seo-audience-band li::before { margin-right: .55rem; color: var(--seo-amber); content: "◆"; font-size: .6rem; }

.seo-section { padding-block: 7.5rem; background: #fff; }
.seo-section-soft { background: var(--seo-soft); }
.seo-editorial-grid, .seo-document-content-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 7rem; }
.seo-section-heading h2, .seo-dark-heading h2 { color: var(--seo-navy); font: 700 clamp(2rem, 3.5vw, 3.35rem)/1.12 Sora, sans-serif; letter-spacing: -.045em; }
.seo-section-heading > p, .seo-dark-heading > p { margin-top: 1.2rem; color: var(--seo-slate); font-size: 1rem; line-height: 1.75; }
.seo-open-list { border-top: 1px solid var(--seo-border); }
.seo-open-list article { display: grid; grid-template-columns: 3.3rem 1fr; gap: 1rem; border-bottom: 1px solid var(--seo-border); padding-block: 1.5rem; }
.seo-open-list article > span { color: #aa7e00; font: 700 .75rem Sora, sans-serif; }
.seo-open-list h3, .seo-document-index h3 { color: var(--seo-navy); font: 700 1.08rem Sora, sans-serif; letter-spacing: -.02em; }
.seo-open-list p, .seo-document-index p { margin-top: .45rem; color: var(--seo-slate); font-size: .87rem; line-height: 1.7; }

.seo-dark-section { overflow: hidden; background: var(--seo-navy); padding-block: 7.5rem; color: #fff; }
.seo-dark-heading { max-width: 50rem; }
.seo-dark-heading h2 { color: #fff; }
.seo-dark-heading > p { color: #b9c5cf; }
.seo-process-rail { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4rem; border-block: 1px solid rgb(255 255 255 / 16%); }
.seo-process-rail li { position: relative; display: grid; gap: 1rem; border-right: 1px solid rgb(255 255 255 / 16%); padding: 2rem; }
.seo-process-rail li:last-child { border-right: 0; }
.seo-process-rail li > span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid rgb(245 183 0 / 55%); border-radius: 50%; color: var(--seo-amber); font-size: .75rem; font-weight: 850; }
.seo-process-rail h3 { font: 700 1.05rem Sora, sans-serif; }
.seo-process-rail p { color: #9fb0be; font-size: .8rem; line-height: 1.6; }

.seo-capabilities { display: grid; gap: 4.5rem; }
.seo-capabilities .seo-section-heading { max-width: 50rem; }
.seo-capability-columns { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid #cad5dc; }
.seo-capability-columns > div { border-right: 1px solid #cad5dc; padding: 2rem 2.5rem 2.2rem 0; }
.seo-capability-columns > div + div { padding-left: 2.5rem; }
.seo-capability-columns > div:last-child { border-right: 0; }
.seo-capability-columns h3 { color: var(--seo-navy); font: 700 1.05rem Sora, sans-serif; }
.seo-capability-columns ul { display: grid; gap: .75rem; margin-top: 1.2rem; }
.seo-capability-columns li, .seo-check-list li { position: relative; padding-left: 1.1rem; color: var(--seo-slate); font-size: .82rem; line-height: 1.55; }
.seo-capability-columns li::before, .seo-check-list li::before { position: absolute; left: 0; color: #b18300; content: "—"; font-weight: 900; }

.seo-price-panel { display: grid; grid-template-columns: 1fr .7fr; align-items: center; gap: 5rem; border: 1px solid var(--seo-border); border-left: .45rem solid var(--seo-amber); padding: 3.3rem; box-shadow: 0 1.4rem 3rem rgb(11 31 51 / 7%); }
.seo-price-panel h2 { color: var(--seo-navy); font: 700 clamp(1.8rem, 3vw, 2.8rem)/1.15 Sora, sans-serif; letter-spacing: -.04em; }
.seo-price-panel p { margin-top: 1rem; color: var(--seo-slate); line-height: 1.75; }
.seo-price-summary { display: grid; justify-items: start; }
.seo-price-summary > span { color: var(--seo-slate); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.seo-price-summary > strong { margin-top: .45rem; color: var(--seo-navy); font: 700 2.7rem Sora, sans-serif; letter-spacing: -.05em; }
.seo-price-summary > strong small { margin-left: .2rem; color: var(--seo-slate); font: 700 .85rem Manrope, sans-serif; }
.seo-price-summary > em { margin-block: .2rem 1.2rem; color: var(--seo-slate); font-size: .78rem; font-style: normal; }

.seo-faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 7rem; }
.seo-faq-list { border-top: 1px solid var(--seo-border); }
.seo-faq-list details { border-bottom: 1px solid var(--seo-border); }
.seo-faq-list summary { position: relative; padding: 1.45rem 2.5rem 1.45rem 0; color: var(--seo-navy); font-size: .9rem; font-weight: 850; cursor: pointer; list-style: none; }
.seo-faq-list summary::-webkit-details-marker { display: none; }
.seo-faq-list summary span::before, .seo-faq-list summary span::after { position: absolute; top: 50%; right: .3rem; width: .9rem; height: 2px; background: #9b7400; content: ""; transform: translateY(-50%); }
.seo-faq-list summary span::after { transform: translateY(-50%) rotate(90deg); transition: transform .2s; }
.seo-faq-list details[open] summary span::after { transform: translateY(-50%) rotate(0); }
.seo-faq-list details p { max-width: 44rem; padding: 0 2rem 1.35rem 0; color: var(--seo-slate); font-size: .84rem; line-height: 1.7; }

.seo-related { background: #fff4c7; }
.seo-related .seo-container { display: flex; min-height: 14rem; align-items: center; justify-content: space-between; gap: 3rem; }
.seo-related h2 { color: var(--seo-navy); font: 700 clamp(1.5rem, 2.6vw, 2.25rem)/1.18 Sora, sans-serif; letter-spacing: -.035em; }
.seo-related p { margin-top: .65rem; color: var(--seo-slate); }
.seo-related a { display: flex; align-items: center; gap: .65rem; color: var(--seo-navy); font-size: .85rem; font-weight: 850; text-decoration: none; }
.seo-related svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .2s; }
.seo-related a:hover svg { transform: translateX(.25rem); }

.seo-document-stage { position: relative; min-height: 36rem; }
.seo-document-back, .seo-document-sheet { position: absolute; width: min(29rem, 85%); aspect-ratio: .72; border: 1px solid #d6dfe5; background: #fff; }
.seo-document-back { top: 2.5rem; right: 0; transform: rotate(5deg); box-shadow: 0 1.3rem 3rem rgb(11 31 51 / 10%); }
.seo-document-sheet { z-index: 1; top: 0; right: 3rem; display: flex; overflow: hidden; flex-direction: column; padding: 2rem; box-shadow: 0 2.2rem 4rem rgb(11 31 51 / 19%); }
.seo-document-sheet > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--seo-border); padding-bottom: 1.1rem; }
.seo-document-logo { display: flex; align-items: center; gap: .5rem; color: var(--seo-navy); font-size: .65rem; font-weight: 900; }
.seo-document-logo img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.seo-document-sheet > header > small { color: #9a7300; font-size: .52rem; font-weight: 850; letter-spacing: .1em; }
.seo-document-title { padding-block: 2rem 1.5rem; }
.seo-document-title > span { color: #9a7300; font-size: .52rem; font-weight: 850; text-transform: uppercase; }
.seo-document-title h2 { margin-top: .4rem; color: var(--seo-navy); font: 700 1.55rem Sora, sans-serif; letter-spacing: -.04em; }
.seo-document-title p { margin-top: .3rem; color: var(--seo-slate); font-size: .65rem; }
.seo-document-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--seo-border); padding-block: 1rem; }
.seo-document-metrics > div { display: grid; gap: .25rem; border-right: 1px solid var(--seo-border); padding-inline: .8rem; }
.seo-document-metrics > div:first-child { padding-left: 0; }
.seo-document-metrics > div:last-child { border-right: 0; }
.seo-document-metrics small { color: #82909b; font-size: .48rem; }
.seo-document-metrics strong { color: var(--seo-navy); font-size: .72rem; }
.seo-document-chart { display: flex; height: 8rem; align-items: flex-end; gap: .42rem; margin-top: 2rem; border-bottom: 1px solid #cfd8df; }
.seo-document-chart i { height: var(--bar); flex: 1; border-radius: .25rem .25rem 0 0; background: linear-gradient(#ffc52b, #f5b700); }
.seo-document-sheet > footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; border-radius: .55rem; background: var(--seo-navy); padding: 1rem; color: #fff; }
.seo-document-sheet > footer span { color: #aebbc5; font-size: .58rem; }
.seo-document-sheet > footer strong { color: var(--seo-amber); font-size: .9rem; }

.seo-document-index ol { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--seo-border); }
.seo-document-index li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; border-right: 1px solid var(--seo-border); border-bottom: 1px solid var(--seo-border); padding: 1.5rem; }
.seo-document-index li:nth-child(even) { border-right: 0; }
.seo-document-index li > span { color: #a57b00; font-size: .68rem; font-weight: 850; }

.seo-calculation-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: 7rem; }
.seo-calculation-table { border-top: 1px solid rgb(255 255 255 / 18%); }
.seo-calculation-table > div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 1rem; border-bottom: 1px solid rgb(255 255 255 / 18%); padding: 1.3rem 0; }
.seo-calculation-table dt { color: var(--seo-amber); font-size: .72rem; font-weight: 850; }
.seo-calculation-table dd { color: #c1ccd4; font-size: .82rem; }

.seo-centered-heading { max-width: 52rem; margin-inline: auto; text-align: center; }
.seo-seven-steps { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 4rem; border-block: 1px solid #cad5dc; }
.seo-seven-steps li { position: relative; display: grid; justify-items: center; gap: .8rem; border-right: 1px solid #cad5dc; padding-block: 1.6rem; text-align: center; }
.seo-seven-steps li:last-child { border-right: 0; }
.seo-seven-steps span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: var(--seo-navy); color: var(--seo-amber); font-size: .66rem; font-weight: 850; }
.seo-seven-steps b { color: var(--seo-navy); font-size: .66rem; }

.seo-brand-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7rem; }
.seo-brand-sample { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 1.5rem; }
.seo-brand-swatches { display: grid; gap: .7rem; }
.seo-brand-swatches i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--seo-navy); box-shadow: 0 .5rem 1rem rgb(11 31 51 / 12%); }
.seo-brand-swatches i:nth-child(2) { background: var(--seo-amber); }
.seo-brand-swatches i:nth-child(3) { border: 1px solid var(--seo-border); background: #fff; }
.seo-brand-page { display: flex; min-height: 29rem; flex-direction: column; border: 1px solid var(--seo-border); background: var(--seo-navy); padding: 2rem; box-shadow: 0 1.5rem 3rem rgb(11 31 51 / 18%); }
.seo-brand-page header { display: flex; align-items: center; gap: .6rem; color: #fff; font-size: .58rem; font-weight: 850; }
.seo-brand-page header img { width: 1.8rem; }
.seo-brand-page > strong { margin-top: 5rem; color: #fff; font: 700 2rem/1.12 Sora, sans-serif; letter-spacing: -.04em; }
.seo-brand-page > small { margin-top: .8rem; color: #aebcc7; }
.seo-brand-page footer { height: .45rem; margin-top: auto; background: var(--seo-amber); }
.seo-check-list { display: grid; gap: .75rem; margin-top: 1.5rem; }

@media (max-width: 1024px) {
    .seo-hero-grid { min-height: auto; grid-template-columns: 1fr; gap: 3rem; padding-block: 4rem; }
    .seo-hero-copy h1 { max-width: 14ch; }
    .seo-workspace-preview { width: min(100%, 43rem); }
    .seo-document-stage { width: min(100%, 38rem); margin-inline: auto; }
    .seo-editorial-grid, .seo-document-content-grid, .seo-faq-grid, .seo-calculation-grid, .seo-brand-section { grid-template-columns: 1fr; gap: 3.5rem; }
    .seo-process-rail { grid-template-columns: 1fr 1fr; }
    .seo-process-rail li:nth-child(2) { border-right: 0; }
    .seo-process-rail li:nth-child(-n+2) { border-bottom: 1px solid rgb(255 255 255 / 16%); }
    .seo-price-panel { grid-template-columns: 1fr; gap: 2.5rem; }
    .seo-seven-steps { grid-template-columns: repeat(4, 1fr); }
    .seo-seven-steps li:nth-child(4) { border-right: 0; }
    .seo-seven-steps li:nth-child(-n+4) { border-bottom: 1px solid #cad5dc; }
}

@media (max-width: 720px) {
    .seo-container { width: min(100% - 2rem, 80rem); }
    .seo-hero::after { width: 100%; height: 42%; }
    .seo-hero-grid { padding-block: 3rem 4rem; }
    .seo-hero-copy h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
    .seo-actions { align-items: stretch; flex-direction: column; }
    .seo-actions .button { width: 100%; }
    .seo-workspace-body { grid-template-columns: 2.7rem 1fr; }
    .seo-workspace-main { padding: 1rem; }
    .seo-workspace-main > header { align-items: flex-start; flex-direction: column; }
    .seo-workspace-summary { grid-template-columns: 1fr; }
    .seo-audience-band .seo-container { align-items: flex-start; flex-direction: column; padding-block: 1.4rem; }
    .seo-audience-band ul { display: grid; grid-template-columns: 1fr 1fr; }
    .seo-section, .seo-dark-section { padding-block: 5rem; }
    .seo-process-rail, .seo-capability-columns, .seo-document-index ol, .seo-seven-steps { grid-template-columns: 1fr; }
    .seo-process-rail li, .seo-process-rail li:nth-child(2), .seo-process-rail li:nth-child(-n+2) { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 16%); }
    .seo-process-rail li:last-child { border-bottom: 0; }
    .seo-capability-columns > div, .seo-capability-columns > div + div { border-right: 0; border-bottom: 1px solid #cad5dc; padding: 1.6rem 0; }
    .seo-capability-columns > div:last-child { border-bottom: 0; }
    .seo-price-panel { padding: 2rem 1.4rem; }
    .seo-related .seo-container { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 2.5rem; }
    .seo-document-stage { min-height: 31rem; }
    .seo-document-back, .seo-document-sheet { width: 88%; }
    .seo-document-sheet { right: 1.5rem; padding: 1.3rem; }
    .seo-document-metrics { grid-template-columns: 1fr; }
    .seo-document-metrics > div, .seo-document-metrics > div:first-child { border-right: 0; border-bottom: 1px solid var(--seo-border); padding: .55rem 0; }
    .seo-document-metrics > div:last-child { border-bottom: 0; }
    .seo-document-chart { height: 5rem; margin-top: 1rem; }
    .seo-document-index li, .seo-document-index li:nth-child(even) { border-right: 0; }
    .seo-seven-steps li, .seo-seven-steps li:nth-child(4), .seo-seven-steps li:nth-child(-n+4) { border-right: 0; border-bottom: 1px solid #cad5dc; }
    .seo-seven-steps li:last-child { border-bottom: 0; }
    .seo-brand-sample { grid-template-columns: 2.8rem 1fr; gap: 1rem; }
    .seo-brand-page { min-height: 24rem; padding: 1.4rem; }
    .seo-brand-page > strong { margin-top: 4rem; font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .seo-related svg, .seo-faq-list summary span::after { transition: none; }
}