/* Scoped composition; shared tokens own typography, colors and theme. */
.eco-page { --eco-accent: var(--ui-primary); color: var(--ui-text); }
[data-theme='dark'] .eco-page { --eco-accent: #5eead4; }
.eco-page .home-keyword { color: var(--eco-accent); background: transparent; font: inherit; padding: 0; }
.eco-page h1, .eco-page h2, .eco-page h3 { color: var(--ui-text); font-weight: 600; margin: 0; line-height: 1.4; }
.eco-page h1 { font-size: clamp(28px, 3.5vw, 44px); max-width: 1000px; }
.eco-page h2 { font-size: clamp(24px, 2.5vw, 28px); }
.eco-page h3 { font-size: 20px; overflow-wrap: anywhere; }
.eco-page p { color: var(--ui-muted); margin: 0; line-height: 1.7; }
.eco-page .eco-eyebrow { font-size: 14px; color: var(--eco-accent); margin-bottom: 16px; font-weight: 500; }
.eco-hero { position: relative; overflow: hidden; padding: 48px 0; text-align: center; border-bottom: 1px solid var(--ui-border); background: radial-gradient(ellipse at 50% 0, var(--ui-selected), transparent 72%); }
.eco-hero::before { content: ''; position: absolute; width: 680px; height: 680px; border: 1px solid var(--ui-border); border-radius: 50%; left: 50%; top: -340px; transform: translateX(-50%); pointer-events: none; }
.eco-hero > .container { position: relative; max-width: 880px; }
.eco-hero h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em; margin-inline: auto; text-wrap: balance; }
.eco-hero .eco-lead { max-width: 620px; margin: 24px auto 0; font-size: 18px; }
.eco-hero .eco-actions { justify-content: center; margin-top: 32px; }
.eco-hero .eco-actions > .eco-link { justify-content: center; }
.eco-dental-mark { display: inline-flex; justify-content: center; align-items: center; width: 64px; height: 64px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); color: var(--eco-accent); margin-bottom: 16px; }
.eco-dental-mark svg { width: 44px; height: 44px; }
.eco-signals { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 24px; padding: 0; margin: 24px 0 0; list-style: none; }
.eco-signals li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ui-muted); }
.eco-signals svg, .eco-journey svg { width: 24px; height: 24px; color: var(--eco-accent); flex-shrink: 0; }
.eco-heading > p:last-child { margin-top: 16px; }
.eco-journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; list-style: none; margin-block: 0; padding-block: 32px 0; }
.eco-journey li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; border-bottom: 2px solid var(--eco-accent); }
.eco-faq details { border-bottom: 1px solid var(--ui-border); }
.eco-faq summary { min-height: 44px; padding-block: 16px; cursor: pointer; font-weight: 600; }
.eco-faq details p { padding-bottom: 24px; max-width: 80ch; }
.eco-faq summary:focus-visible { outline: 2px solid var(--eco-accent); outline-offset: 4px; }
.eco-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.eco-page .btn { min-height: 44px; white-space: normal; }
.eco-page .btn svg, .eco-link svg { width: 20px; height: 20px; flex: 0 0 20px; }
.eco-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--eco-accent); font-weight: 500; }
.eco-section { padding-block: 48px; }
.eco-hero.eco-hero--group { padding-block: 32px; }
.eco-hero--group .eco-dental-mark { width: 48px; height: 48px; border-radius: 16px; margin-bottom: 8px; }
.eco-hero--group .eco-dental-mark svg { width: 32px; height: 32px; }
.eco-hero--group .eco-lead { margin-top: 16px; }
.eco-hero--group .eco-actions { margin-top: 24px; }
.eco-benefits .eco-card { border: 0; background: transparent; border-radius: 0; padding: 16px 0; }
.eco-clinic-flow .eco-card { border: 0; border-top: 3px solid var(--eco-accent); }
.eco-clinic-feature { background: radial-gradient(ellipse at top left, var(--ui-selected), transparent 75%), var(--ui-surface); }
.eco-page .eco-more-title { margin-top: 32px; }
.eco-product-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; list-style: none; padding: 0; margin: 16px 0 0; }
.eco-product-list li { display: flex; align-items: flex-start; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--ui-border); min-width: 0; }
.eco-product-list .eco-icon { flex-shrink: 0; }
.eco-product-list h3 { font-size: 16px; }
.eco-product-list p { font-size: 14px; margin-top: 8px; }
.eco-ai-example { padding-bottom: 32px; }
.eco-ai-steps { list-style: none; counter-reset: ai-step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; }
.eco-ai-steps li { counter-increment: ai-step; border-left: 2px solid var(--ui-border); padding-left: 16px; }
.eco-ai-steps li::before { content: '0' counter(ai-step); display: block; color: var(--eco-accent); font-weight: 600; margin-bottom: 8px; }
.eco-ai-steps .eco-eyebrow { display: block; margin-bottom: 8px; }
.eco-heading { margin-bottom: 24px; }
.eco-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.eco-card { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.eco-card--featured { border-color: var(--eco-accent); }
.eco-card > .eco-link { margin-top: auto; }
.eco-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--eco-accent); background: var(--ui-selected); }
.eco-icon svg { width: 24px; height: 24px; }
.eco-preview { list-style: none; display: grid; gap: 16px; margin: 8px 0; padding: 0; }
.eco-preview li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.eco-preview svg { width: 20px; height: 20px; color: var(--eco-accent); flex: 0 0 20px; }
.eco-context { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 48px; }
.eco-context .eco-icon { margin-bottom: 16px; }
.eco-band { background: var(--ui-selected); border-block: 1px solid var(--ui-border); }
.eco-page .eco-note { font-size: 14px; margin-block: 16px; }
.eco-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eco-related { text-decoration: none; }
.eco-related > svg { width: 24px; height: 24px; color: var(--eco-accent); }
.eco-related:hover { border-color: var(--eco-accent); }
.eco-closing { border-top: 1px solid var(--ui-border); }
.eco-closing > p { margin-top: 16px; }
.eco-page a:focus-visible { outline: 2px solid var(--eco-accent); outline-offset: 4px; }
@media (max-width: 1000px) { .eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eco-card { padding: 24px; } }
@media (max-width: 640px) {
    .eco-hero { padding-block: 40px; }
    .eco-hero .eco-lead { font-size: 16px; }
    .eco-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eco-section { padding-block: 32px; }
    .eco-grid, .eco-context { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .eco-product-list, .eco-ai-steps { grid-template-columns: minmax(0, 1fr); }
    .eco-actions { align-items: stretch; flex-direction: column; }
}