/* TypeAtlas Compatibility — Phase 4 interaction experiments */
body{overflow-x:hidden}
.compat-hero{background:radial-gradient(circle at 84% 12%,rgba(94,196,201,.2),transparent 34%),radial-gradient(circle at 12% 88%,rgba(224,104,104,.13),transparent 38%)}
.compat-hero h1{max-width:23ch;margin-bottom:0}
.compat-title-cta{display:flex;margin:20px 0 24px}
.compat-title-cta .ta-primary{min-height:56px;padding:14px 22px;color:var(--ta-bg);box-shadow:0 12px 30px rgba(0,0,0,.22);transition:transform .2s ease,box-shadow .2s ease}
.compat-title-cta .ta-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.28)}
.compat-title-cta .ta-primary:focus-visible{outline:3px solid var(--ta-teal);outline-offset:4px}
.compat-intro{font-size:19px;line-height:1.8}
.compat-boundary,.compat-safety,.compat-demand-note{margin:24px 0;padding:20px;border:1px solid rgba(228,162,75,.46);border-radius:14px;background:rgba(228,162,75,.08)}
.compat-safety{border-color:rgba(224,104,104,.52);background:rgba(224,104,104,.08)}
.compat-demand-note{border-color:rgba(94,196,201,.45);background:rgba(94,196,201,.07)}
.compat-context-grid,.compat-pair-grid,.compat-step-grid{display:grid;gap:16px;margin-top:24px}
.compat-context-card,.compat-pair-card,.compat-step-card{padding:20px;border:1px solid var(--ta-border);border-radius:14px;background:var(--ta-card)}
.compat-context-card{position:relative;overflow:hidden}
.compat-context-card::after{content:attr(data-context-number);position:absolute;right:12px;top:4px;color:rgba(244,242,237,.055);font:800 72px/1 var(--ta-display)}
.compat-context-card>*{position:relative;z-index:1}
.compat-context-card h3,.compat-pair-card h3,.compat-step-card h3{margin:8px 0 10px;font-size:22px}
.compat-context-card dl{display:grid;gap:10px;margin:16px 0 0}
.compat-context-card dt{color:var(--ta-teal);font:700 12px/1.4 var(--ta-mono);letter-spacing:.06em;text-transform:uppercase}
.compat-context-card dd{margin:0;color:var(--ta-soft)}
.compat-context-code{display:inline-grid;place-items:center;min-height:34px;padding:0 10px;border:1px solid rgba(94,196,201,.42);border-radius:9px;background:rgba(94,196,201,.1);color:var(--ta-teal);font:800 12px/1 var(--ta-mono);letter-spacing:.04em;text-transform:uppercase}
.compat-script{margin:18px 0 0;padding:18px;border-left:4px solid var(--ta-gold);border-radius:0 12px 12px 0;background:rgba(228,162,75,.08);color:var(--ta-text)}
.compat-script strong{display:block;margin-bottom:6px;color:var(--ta-gold);font:700 12px/1.4 var(--ta-mono);letter-spacing:.06em;text-transform:uppercase}
.compat-countercheck{margin-top:14px;padding-top:14px;border-top:1px solid var(--ta-border);color:var(--ta-soft);font-size:15px}
.compat-table-region{overflow-x:auto;scrollbar-color:var(--ta-teal) var(--ta-raised)}
.compat-translator{min-width:900px}
.compat-translator th:first-child{min-width:150px}.compat-translator th:nth-child(2){min-width:220px}.compat-translator th:nth-child(3){min-width:220px}.compat-translator th:nth-child(4){min-width:260px}
.compat-repair{counter-reset:repair-step;display:grid;gap:14px;margin:24px 0 0;padding:0;list-style:none}
.compat-repair li{counter-increment:repair-step;padding:18px 18px 18px 62px;position:relative;border:1px solid var(--ta-border);border-radius:12px;background:var(--ta-card)}
.compat-repair li::before{content:counter(repair-step);position:absolute;left:18px;top:17px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ta-teal);color:var(--ta-bg);font:800 14px/1 var(--ta-mono)}
.compat-falsification{margin-top:22px;padding:20px;border-left:4px solid var(--ta-teal);border-radius:0 12px 12px 0;background:rgba(94,196,201,.07)}
.compat-source-list a{overflow-wrap:anywhere}
.compat-hub-directory{margin-top:28px}
.compat-pair-card{display:block;color:inherit;text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.compat-pair-card:hover{border-color:var(--ta-teal);transform:translateY(-2px)}
.compat-pair-card:focus-visible{outline:3px solid var(--ta-teal);outline-offset:4px}
.ta-main .ta-cta .ta-primary{color:var(--ta-bg)}
@media(min-width:680px){.compat-context-grid,.compat-pair-grid,.compat-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.compat-context-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compat-step-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.compat-title-cta .ta-primary{width:100%;justify-content:center;text-align:center}.compat-context-card,.compat-pair-card,.compat-step-card{padding:18px}.compat-repair li{padding-left:58px}}
@media(prefers-reduced-motion:reduce){.compat-title-cta .ta-primary,.compat-pair-card{transition:none}}
@media print{.compat-title-cta{display:none!important}.compat-context-card,.compat-pair-card,.compat-step-card{break-inside:avoid}}