/* Integration-only surfaces. The reference's hero/scene geometry is untouched. */
.reference-status{background:#080b0b;padding:28px clamp(24px,4.6vw,70px) 40px;color:#c6cec6}
.reference-status details{border-top:1px solid #38423a;border-bottom:1px solid #38423a}
.reference-status summary{min-height:56px;padding:16px 0;cursor:pointer;display:flex;justify-content:space-between;gap:20px;color:#f1e7d8}
.reference-status #product-state{font-size:12px;align-self:center;color:#c0c9be}
.reference-status-content{max-width:780px;padding:14px 0 30px}
.reference-status h2{font-size:clamp(24px,3vw,36px);line-height:1.15;margin:12px 0}
.reference-status p{font-size:14px;line-height:1.65;margin:12px 0}
.reference-status [hidden]{display:none!important}
.reference-footer-links{display:flex;flex-wrap:wrap;gap:4px 20px;padding-top:16px}
.reference-footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:#d3dacf}
.reference-footer-links a:hover{color:#f4d49d;text-decoration:underline}
.reference-status :focus-visible{outline:2px solid #e8c98f;outline-offset:4px}
#public-status{scroll-margin-top:32px}
@media(max-width:600px){.reference-status summary{flex-direction:column;gap:4px}.reference-status #product-state{align-self:flex-start}}
/* Let the educational copy reserve space above the 44px scene control. */
@media(min-width:901px){
  .hero{aspect-ratio:auto;min-height:max(490px,47.8516cqw);display:grid;align-items:start}
  .hero-copy{position:relative;top:auto;left:auto;margin:max(52px,4.8cqw) 0 calc(44px + 1.6cqw) var(--gutter)}
}