.service-seo-page { --seo-structural: #2f5cf4; background: var(--color-bg-primary); }
.seo-hero { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-9); }
.seo-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr); gap: var(--space-7); align-items: start; }
.seo-hero h1 { max-width: 760px; margin-bottom: var(--space-5); }
.seo-hero .lead { max-width: 720px; margin-bottom: var(--space-6); }
.seo-hero__note { max-width: 620px; color: var(--color-text-muted); font-size: var(--font-size-small); }
.signal-card { position: relative; min-height: 500px; padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.seo-editorial-art { display: block; width: 100%; height: auto; }
.seo-editorial-art--hero { margin: calc(var(--space-3) * -1) 0 var(--space-5); border-radius: var(--radius-md); }
.seo-hero-visual { position: relative; margin: 0; padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); overflow: hidden; }
.seo-hero-visual .seo-editorial-art--hero { margin: 0; min-height: 430px; object-fit: cover; object-position: center; }
.seo-editorial-figure { margin: 0; overflow: hidden; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.seo-editorial-figure img { display: block; width: 100%; height: auto; }
.seo-editorial-figure--wide { margin-bottom: var(--space-6); }
.signal-card__top { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-7); }
.signal-card__top span { padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--color-success-soft); color: var(--color-success); font-family: var(--font-mono); font-size: var(--font-size-caption); text-transform: uppercase; }
.signal-line { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-bottom: var(--space-6); padding-top: var(--space-6); }
.signal-line::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: var(--color-border-strong); }
.signal-line span { position: relative; color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: var(--line-height-small); }
.signal-line span::before { content: ""; position: absolute; top: calc(var(--space-6) * -1); left: 0; width: 14px; height: 14px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-border-strong); background: var(--color-bg-secondary); }
.signal-line span.active { color: var(--color-text-primary); font-weight: var(--font-weight-bold); }
.signal-line span.active::before { background: var(--color-accent); border-color: var(--color-text-primary); }
.signal-panel { padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-primary); }
.signal-panel strong { display: block; margin-block: var(--space-3); font-size: var(--font-size-h3); line-height: var(--line-height-heading); }
.signal-panel p:last-child { color: var(--color-text-secondary); }
.signal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.signal-stats div { padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.signal-stats strong { display: block; font-size: var(--font-size-h3); line-height: 1; }
.signal-stats span { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: var(--line-height-small); }
.quick-answer { padding-top: 0; }
.quick-answer__box { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.8fr); gap: var(--space-6); padding: var(--space-7); border-radius: var(--radius-lg); background: var(--color-surface-strong); color: var(--color-text-inverse); }
.quick-answer .dc-label { color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent); }
.quick-answer h2 { margin-bottom: var(--space-4); }
.quick-answer p:last-child { color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent); font-size: 1.125rem; }
.audience-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.audience-grid article, .task-list article, .module-stack article, .decision-grid article, .metric-grid article, .related-grid article, .faq-list details { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.audience-grid article { min-height: 250px; padding: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; }
.seo-context-icon { width: 48px; height: 48px; padding: 9px; border: 1px solid var(--seo-structural); border-radius: var(--radius-md); background: var(--color-bg-primary); object-fit: contain; }
.audience-grid h3 { margin-top: var(--space-5); margin-bottom: var(--space-3); }
.audience-grid p { color: var(--color-text-secondary); font-size: var(--font-size-small); }
.audience-tasks-section { background: var(--color-bg-secondary); }
.audience-tasks-section .audience-grid { margin-bottom: var(--space-8); }
.audience-task-story { display: grid; grid-template-columns: minmax(380px, 0.95fr) minmax(0, 1.05fr); gap: var(--space-6); align-items: start; padding-top: var(--space-7); border-top: var(--border-width) solid var(--color-border-strong); }
.audience-task-story__visual { position: sticky; top: calc(var(--header-height-desktop) + var(--space-5)); }
.audience-task-story__visual h2 { margin-block: var(--space-4) var(--space-5); }
.audience-task-story__visual .seo-editorial-figure { box-shadow: none; }
.tasks-section, .metrics-section, .faq-section { background: var(--color-bg-secondary); }
.task-list { display: grid; gap: var(--space-3); }
.task-list article { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1.2fr); gap: var(--space-5); padding: var(--space-5); align-items: start; }
.task-list b { font-size: 1.0625rem; line-height: 1.32; }
.task-list p, .task-list span { color: var(--color-text-secondary); font-size: var(--font-size-small); }
.modules-layout { display: grid; grid-template-columns: minmax(420px, 0.85fr) minmax(0, 1.15fr); gap: var(--space-7); align-items: start; }
.modules-aside { position: sticky; top: calc(var(--header-height-desktop) + var(--space-5)); padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.modules-aside h2 { margin-block: var(--space-4); font-size: 1.75rem; }
.modules-aside p:last-child { color: var(--color-text-secondary); }
.seo-editorial-art--modules { margin-top: var(--space-5); min-height: 360px; border-radius: var(--radius-md); object-fit: cover; }
.module-stack { display: grid; gap: var(--space-3); }
.module-stack article { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border: 0; border-bottom: var(--border-width) solid var(--color-border); border-radius: 0; box-shadow: none; }
.module-stack article > span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-md); border: var(--border-width) solid var(--color-accent); background: var(--color-accent-soft); font-family: var(--font-mono); font-weight: var(--font-weight-bold); }
.module-stack h3 { margin-bottom: var(--space-3); }
.module-stack p { color: var(--color-text-secondary); }
.start-section { background: var(--color-surface); }
.decision-grid, .metric-grid, .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.decision-grid article, .metric-grid article, .related-grid article { min-height: 230px; padding: var(--space-5); }
.decision-grid h3, .metric-grid h3, .related-grid h3 { margin-block: var(--space-4) var(--space-3); }
.decision-grid p:not(.dc-label), .metric-grid p:not(.dc-label), .related-grid p:not(.dc-label) { color: var(--color-text-secondary); }
.decision-grid .is-primary { background: var(--color-surface-strong); color: var(--color-text-inverse); }
.decision-grid .is-primary .dc-label, .decision-grid .is-primary p:not(.dc-label) { color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent); }
.seo-diagram { margin: var(--space-6) 0 0; padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-top: 3px solid var(--seo-structural); border-radius: var(--radius-lg); background: var(--color-bg-primary); overflow: hidden; }
.seo-diagram img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.seo-diagram--dark { border-color: color-mix(in srgb, var(--color-text-inverse) 18%, transparent); border-top-color: var(--seo-structural); background: var(--color-surface-strong); }
.process-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.process-rail article { min-height: 270px; position: relative; padding: var(--space-5); border-right: var(--border-width) solid var(--color-border); }
.process-rail article:last-child { border-right: 0; }
.process-rail span { font-family: var(--font-mono); color: var(--color-text-muted); font-size: var(--font-size-label); }
.process-rail span::after { content: ""; display: block; width: 16px; height: 16px; margin-block: var(--space-4) var(--space-5); border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-border-strong); background: var(--color-bg-secondary); }
.process-rail article:nth-child(3) span::after { background: var(--color-accent); border-color: var(--color-text-primary); }
.process-rail p { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-small); }
.metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.measurement-story { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr); gap: var(--space-6); align-items: stretch; }
.measurement-story .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.measurement-story .metric-grid,
.measurement-story .metric-grid > *,
.geo-note { min-width: 0; max-width: 100%; }
.measurement-story .metric-grid article { min-height: 180px; }
.measurement-story .metric-grid article:last-child { grid-column: 1 / -1; }
.geo-note { padding: var(--space-7); border-radius: var(--radius-lg); background: var(--color-surface-strong); color: var(--color-text-inverse); }
.geo-note h3 { margin-block: var(--space-4); font-size: var(--font-size-h2); }
.geo-note p, .geo-note li, .geo-note .dc-label { color: color-mix(in srgb, var(--color-text-inverse) 74%, transparent); }
.geo-note ul { margin: var(--space-5) 0 0; padding-left: var(--space-5); }
.geo-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: var(--space-5); }
.geo-grid > div, .geo-grid aside { padding: var(--space-7); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.geo-grid h2 { margin-block: var(--space-4); }
.geo-grid p:not(.dc-label), .geo-grid li { color: var(--color-text-secondary); }
.geo-grid ul { margin: var(--space-5) 0 0; padding-left: var(--space-5); }
.seo-layer-art { display: block; width: 100%; height: auto; max-height: 290px; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 2px solid var(--seo-structural); object-fit: contain; }
.result-section { background: var(--color-surface-strong); color: var(--color-text-inverse); }
.result-section .dc-label, .result-section p { color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent); }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.result-grid article { min-height: 128px; padding: var(--space-5); border: var(--border-width) solid color-mix(in srgb, var(--color-text-inverse) 18%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-text-inverse) 4%, transparent); }
.result-proof-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: var(--space-6); }
.proof-method { padding: var(--space-6); border-left: 3px solid var(--seo-structural); background: color-mix(in srgb, var(--color-text-inverse) 5%, transparent); }
.proof-method h3 { margin-block: var(--space-4); color: var(--color-text-inverse); }
.proof-method ol { margin: 0 0 var(--space-5); padding-left: var(--space-5); }
.proof-method li { margin-bottom: var(--space-3); }
.faq-related-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); gap: var(--space-6); align-items: start; }
.related-editorial { padding: var(--space-6); border-top: 3px solid var(--seo-structural); background: var(--color-surface); }
.related-editorial article { padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.related-editorial article:last-child { border-bottom: 0; }
.related-editorial h3 { margin-bottom: var(--space-2); }
.related-editorial p { color: var(--color-text-secondary); }
.proof-box { padding: var(--space-7); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.proof-box strong { display: block; margin-bottom: var(--space-3); font-size: var(--font-size-h3); }
.proof-box p { color: var(--color-text-secondary); }
.proof-box--method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr); gap: var(--space-6); align-items: center; border-top: 3px solid var(--seo-structural); }
.proof-box--method img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; }
.final-cta { padding-block: 0 var(--section-space-desktop); }
.final-cta__box { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr); gap: var(--space-6); align-items: center; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-surface-strong); color: var(--color-text-inverse); overflow: hidden; }
.final-cta__box .dc-button { margin-top: var(--space-5); }
.seo-editorial-art--cta { border-radius: var(--radius-md); }
.final-cta .dc-label, .final-cta p { color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent); }
.final-cta h2 { margin-block: var(--space-4); max-width: 820px; }
.final-cta .dc-button--primary { background: var(--color-accent); color: var(--color-accent-text); }
.final-cta .dc-button--primary:hover { background: var(--color-accent-hover); }
@media (hover: hover) { .audience-grid article:hover, .module-stack article:hover, .metric-grid article:hover, .related-grid article:hover { border-color: var(--color-border-strong); transform: translateY(-2px); transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } }
@media (max-width: 1180px) {
  .seo-hero__grid, .section-head, .modules-layout, .geo-grid, .quick-answer__box, .final-cta__box { grid-template-columns: 1fr; }
  .audience-grid, .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-rail article { border-bottom: var(--border-width) solid var(--color-border); }
  .process-rail article:nth-child(2n) { border-right: 0; }
  .modules-aside { position: static; }
  .proof-box--method { grid-template-columns: 1fr; }
  .audience-task-story, .measurement-story, .result-proof-layout, .faq-related-layout { grid-template-columns: 1fr; }
  .audience-task-story__visual { position: static; }
}
@media (max-width: 760px) {
  .seo-hero { padding-block: var(--space-6) var(--space-8); }
  .seo-hero h1 { font-size: 2.25rem; }
  .hero-actions { display: grid; }
  .anchor-nav a { flex: 1 1 140px; justify-content: center; }
  .signal-card, .quick-answer__box, .geo-grid > div, .geo-grid aside, .proof-box, .final-cta__box { padding: var(--space-5); }
  .seo-editorial-figure--wide { margin-inline: calc(var(--space-3) * -1); border-radius: var(--radius-md); }
  .signal-card { min-height: auto; }
  .seo-hero-visual { padding: var(--space-3); }
  .seo-hero-visual .seo-editorial-art--hero { min-height: 300px; }
  .signal-card__top { margin-bottom: var(--space-5); }
  .signal-card__top span { padding-inline: var(--space-2); font-size: 0.625rem; }
  .signal-line { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-4); padding-top: var(--space-6); }
  .signal-line::before { display: block; top: 7px; }
  .signal-line span { min-height: auto; padding-left: 0; display: block; font-size: 0.625rem; }
  .signal-line span::before { top: calc(var(--space-6) * -1); left: 0; width: 12px; height: 12px; }
  .signal-panel { padding: var(--space-4); }
  .signal-panel strong { font-size: 1.25rem; }
  .signal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .signal-stats div { padding: var(--space-3); }
  .signal-stats strong { font-size: 1.375rem; }
  .signal-stats span { font-size: 0.625rem; }
  .audience-grid, .decision-grid, .metric-grid, .result-grid, .faq-list, .related-grid, .process-rail { grid-template-columns: 1fr; }
  .task-list article, .module-stack article { grid-template-columns: 1fr; }
  .module-stack article > span { width: 54px; height: 54px; }
  .audience-task-story { padding-top: var(--space-6); }
  .measurement-story .metric-grid { grid-template-columns: 1fr; }
  .measurement-story .metric-grid article:last-child { grid-column: auto; }
  .process-rail article, .process-rail article:nth-child(2n) { border-right: 0; }
  .process-rail article:last-child { border-bottom: 0; }
  .final-cta { padding-bottom: var(--section-space-mobile); }
}
@media (max-width: 380px) {
  .seo-hero h1 { font-size: 2rem; }
  .dc-button { width: 100%; padding-inline: var(--space-3); }
  .brand__text { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-seo-page *, .service-seo-page *::before, .service-seo-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}