.compat-hero{padding:88px 5vw 78px;color:#fff;background:radial-gradient(circle at 18% 18%,rgba(25,143,234,.22),transparent 33%),linear-gradient(135deg,#04162f,#082b52 63%,#04162f)}
.compat-hero-inner{width:min(1080px,100%);margin:auto;text-align:center}.compat-hero h1{margin:18px 0;font-size:clamp(48px,5vw,76px);line-height:1.03;letter-spacing:-.045em}.compat-hero h1 span{color:var(--cyan)}.compat-hero p{max-width:780px;margin:0 auto;color:#d0deed;font-size:19px}.compat-hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:27px}
.compat-toc{position:sticky;top:84px;z-index:16;display:flex;gap:8px;overflow-x:auto;padding:12px 4vw;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);scrollbar-width:none}.compat-toc::-webkit-scrollbar{display:none}.compat-toc a{flex:0 0 auto;padding:9px 13px;border:1px solid #c6dbef;border-radius:999px;background:#fff;color:#24415f;font-size:12px;font-weight:800}
.compat-section{padding:75px 6vw;scroll-margin-top:150px}.compat-section-alt{background:var(--soft)}.compat-heading{max-width:880px;margin:0 auto 42px;text-align:center}.compat-heading>span{color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.09em}.compat-heading h2{margin:9px 0 12px;font-size:clamp(32px,3.5vw,49px);line-height:1.1;letter-spacing:-.035em}.compat-heading p{margin:0;color:var(--muted);font-size:17px}
.compat-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:18px;width:min(1150px,100%);margin:auto}.compat-flow article{height:100%;padding:25px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:center;box-shadow:0 10px 28px rgba(23,65,110,.06)}.compat-flow article>span{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 12px;border-radius:50%;background:#e3f2ff;color:var(--blue);font-weight:900}.compat-flow h3{margin:0 0 8px}.compat-flow p{margin:0;color:var(--muted)}.compat-arrow{color:var(--blue);font-size:28px;font-weight:900}
.compat-callout{width:min(1000px,100%);margin:32px auto 0;padding:20px 22px;border-radius:13px;border-left:5px solid}.compat-callout strong{display:block;margin-bottom:5px}.compat-callout p{margin:0;color:#53687e}.compat-callout-info{border-color:#1588ec;background:#eaf6ff}.compat-callout-warning{border-color:#e6a22d;background:#fff7e5}
.compat-card-grid,.compat-measure-grid,.equipment-grid,.ecosystem-grid,.validated-grid,.not-required-grid,.testing-grid{display:grid;gap:18px;width:min(1250px,100%);margin:auto}.compat-card-grid{grid-template-columns:repeat(4,1fr)}.compat-card{position:relative;padding:26px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(23,65,110,.06)}.compat-card-confirmed{border-color:#85c9a6}.compat-status{position:absolute;top:14px;right:14px;padding:5px 8px;border-radius:999px;background:#e8f4ff;color:var(--blue);font-size:9px;font-weight:900;letter-spacing:.06em}.compat-card-confirmed .compat-status{background:#e6f8ed;color:#16874b}.compat-icon,.equipment-icon{display:grid;place-items:center;width:50px;height:50px;margin-bottom:16px;border-radius:14px;background:#eaf6ff;font-size:26px}.compat-card h3,.equipment-grid h3{margin:0 0 8px}.compat-card p,.equipment-grid p{margin:0;color:var(--muted)}
.compat-measure-grid{grid-template-columns:repeat(4,1fr)}.compat-measure-grid article{padding:24px;border:1px solid var(--line);border-radius:15px;background:#fff}.compat-measure-grid article>span{display:inline-block;margin-bottom:13px;color:var(--blue);font-size:20px;font-weight:900}.compat-measure-grid h3{margin:0 0 7px}.compat-measure-grid p{margin:0;color:var(--muted)}
.equipment-grid{grid-template-columns:repeat(4,1fr)}.equipment-grid article{padding:25px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 9px 24px rgba(23,65,110,.05)}.equipment-grid code,.validated-grid code{padding:2px 5px;border-radius:5px;background:#eaf2f8;color:#164c7e}
.ecosystem-grid{grid-template-columns:repeat(4,1fr)}.ecosystem-grid article{position:relative;padding:24px;border:1px solid var(--line);border-radius:15px;background:#fff}.ecosystem-grid strong{display:block;padding-right:65px;font-size:17px}.ecosystem-grid span{position:absolute;top:20px;right:16px;color:var(--blue);font-size:10px;font-weight:900;text-transform:uppercase}.ecosystem-grid p{margin:9px 0 0;color:var(--muted)}
.validated-grid{grid-template-columns:repeat(3,1fr)}.validated-card{padding:26px;border:1px solid #9dd6b7;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(23,65,110,.05)}.validated-card-generic{border-color:var(--line)}.validated-badge{display:inline-block;margin-bottom:15px;padding:6px 9px;border-radius:999px;background:#e6f8ed;color:#16874b;font-size:10px;font-weight:900}.validated-card-generic .validated-badge{background:#eaf4ff;color:var(--blue)}.validated-card h3{margin:0 0 8px}.validated-card p{margin:0;color:var(--muted)}
.not-required-grid{grid-template-columns:repeat(3,1fr)}.not-required-grid article{padding:25px;border:1px solid var(--line);border-radius:15px;background:#fff}.not-required-grid article>span{display:grid;place-items:center;width:38px;height:38px;margin-bottom:14px;border-radius:50%;background:#ffebeb;color:#c43939;font-size:24px;font-weight:700}.not-required-grid h3{margin:0 0 8px}.not-required-grid p{margin:0;color:var(--muted)}
.compat-summary{width:min(900px,100%);margin:48px auto 0}.compat-summary h3{text-align:center;font-size:28px}.compat-summary-table{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff}.compat-summary-table>div{display:flex;justify-content:space-between;gap:20px;padding:15px 19px;border-bottom:1px solid var(--line)}.compat-summary-table>div:last-child{border-bottom:0}.compat-summary-table .yes{color:#16874b}.compat-summary-table .no{color:#c43939}
.testing-grid{grid-template-columns:repeat(3,1fr)}.testing-grid article{padding:25px;border:1px solid #e5d4a9;border-radius:15px;background:#fffaf0}.testing-grid span{color:#a86e09;font-size:10px;font-weight:900;letter-spacing:.07em}.testing-grid h3{margin:9px 0}.testing-grid p{margin:0;color:var(--muted)}
.compat-final-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:0 5vw 65px;padding:35px 42px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#087fe5,#0758b9)}.compat-final-cta h2{margin:0;font-size:clamp(28px,3vw,40px)}.compat-final-cta p{margin:6px 0 0;color:#dbeaff}
@media(max-width:1050px){.compat-card-grid,.compat-measure-grid,.equipment-grid,.ecosystem-grid{grid-template-columns:repeat(2,1fr)}.validated-grid,.not-required-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.compat-flow{grid-template-columns:1fr}.compat-arrow{transform:rotate(90deg);text-align:center}.testing-grid{grid-template-columns:1fr}}
@media(max-width:700px){.compat-hero{padding:65px 20px 55px}.compat-hero h1{font-size:44px}.compat-toc{top:76px;padding-inline:16px}.compat-section{padding:58px 20px}.compat-card-grid,.compat-measure-grid,.equipment-grid,.ecosystem-grid,.validated-grid,.not-required-grid{grid-template-columns:1fr}.compat-summary-table>div{align-items:flex-start}.compat-final-cta{display:grid;margin:0 20px 45px;padding:28px}}