/* =================== hc-compat.css =================== */
.hc-compat {margin: var(--hc-sp-4) 0 var(--hc-sp-5); padding: var(--hc-sp-5)}
.hc-compat__head {display: flex; justify-content: space-between; align-items: flex-start; gap: var(--hc-sp-3); margin-bottom: var(--hc-sp-4)}
.hc-compat__title {font-size: var(--hc-fs-xl); margin-top: var(--hc-sp-1)}
.hc-compat__lead {margin-top: 6px; max-width: 52ch}
.hc-compat__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hc-sp-3); margin-bottom: var(--hc-sp-4)}
.hc-compat__result {border-radius: var(--hc-r-md); margin-bottom: var(--hc-sp-3)}
.hc-compat__result--ok {display: flex; align-items: flex-start; gap: var(--hc-sp-3); padding: var(--hc-sp-4); background: var(--hc-success-soft); border: 1px solid var(--hc-success)}
.hc-compat__result-ico {font-size: 24px; color: var(--hc-success); line-height: 1}
.hc-compat__result-title {display: block}
.hc-compat__result-text {margin-top: 4px}
.hc-compat__result--warn {padding: var(--hc-sp-4); background: var(--hc-warning-soft); border: 1px solid var(--hc-warning); font-size: var(--hc-fs-sm)}
.hc-compat__warn-title {color: var(--hc-warning); display: block; margin-bottom: 4px}
.hc-compat__warn-btn {margin-top: var(--hc-sp-3)}
.hc-compat__actions {display: flex; flex-wrap: wrap; gap: var(--hc-sp-2); margin-top: var(--hc-sp-3)}
@media(max-width:1024px) {
  .hc-compat__cta, [data-compat-submit] {white-space: normal; line-height: 1.3; padding: 14px 24px; min-height: 48px}
}