.compat-hero { padding-top: var(--space-16); padding-bottom: var(--space-10); }
.compat-hero__inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr); gap: var(--space-8); align-items: center; }
@media (max-width: 900px) { .compat-hero__inner { grid-template-columns: minmax(0, 1fr); } }
.compat-hero__content > p { max-width: 38rem; }
.compat-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.compat-hero__card { background: var(--color-surface); }
.compat-hero__subtitle { margin-bottom: var(--space-2); font-size: var(--font-size-xl); }
.compat-hero__text { margin-bottom: var(--space-4); }
.compat-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); padding-left: 0; list-style: none; }
.compat-breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; color: var(--gray-400); }
.compat-quick-form { display: grid; gap: var(--space-3); }
.compat-quick-form__field { display: flex; flex-direction: column; gap: 0.25rem; }
.compat-quick-form__submit { width: 100%; margin-top: var(--space-1); }
.compat-quick-form__result { min-height: 1.5rem; font-size: var(--font-size-sm); margin: 0; }

.compat-section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.compat-section__header { max-width: 46rem; margin-bottom: var(--space-6); }
.compat-section__split { gap: var(--space-8); align-items: center; }
.compat-section__text ul { margin-bottom: var(--space-3); }
.compat-section__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

.compat-filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.compat-filter-card h3 { margin-bottom: var(--space-2); font-size: var(--font-size-lg); }

.compat-icons__grid { margin-bottom: var(--space-4); }
.compat-icon__symbol { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); background-color: var(--color-primary-soft); color: var(--color-primary-strong); font-size: var(--font-size-xs); font-weight: 600; margin-bottom: var(--space-2); }
.compat-icons__note { font-size: var(--font-size-sm); }

.compat-standards__grid article h3,
.compat-quality__grid article h3,
.compat-brands__columns h3,
.compat-learning__grid article h3 { margin-bottom: var(--space-2); font-size: var(--font-size-lg); }
.compat-standards__note,
.compat-brands__note { margin-top: var(--space-4); font-size: var(--font-size-sm); }

.compat-quality__grid,
.compat-brands__columns,
.compat-learning__grid { gap: var(--space-5); }

.compat-faq__item { padding: var(--space-3) 0; border-bottom: 1px solid var(--gray-200); }
.compat-faq__item:last-of-type { border-bottom: none; }
.compat-faq__item summary { cursor: pointer; list-style: none; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.compat-faq__item summary::-webkit-details-marker { display: none; }
.compat-faq__item summary::after { content: "+"; font-weight: 600; color: var(--gray-500); }
.compat-faq__item[open] summary::after { content: "−"; }
.compat-faq__item p { margin-top: var(--space-2); }

.compat-learning__footer { margin-top: var(--space-4); font-size: var(--font-size-sm); }

@media (max-width: 768px) { .compat-section { padding-top: var(--space-8); padding-bottom: var(--space-8); } .compat-hero { padding-top: var(--space-12); padding-bottom: var(--space-8); } .compat-section__header { margin-bottom: var(--space-4); } }