/* Public documentation and status pages use their own rendering templates. */
.docs-cinematic,
.status-cinematic { background: #f3f7fa; color: #0a1a28; font-family: 'Inter', system-ui, sans-serif; }
.docs-cinematic h1,
.docs-cinematic h2,
.docs-cinematic h3,
.status-cinematic h1,
.status-cinematic h2 { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; letter-spacing: -.045em; }
.docs-cinematic .navbar {
    background: #050b13 !important;
    border-color: rgba(206, 231, 249, .2) !important;
    box-shadow: 0 8px 24px rgba(4, 12, 21, .1);
}
.docs-cinematic .navbar-brand,
.docs-cinematic .docs-nav-links a { color: #e1eef7; }
.docs-cinematic .docs-nav-links a:hover { color: #9bdcff; }
.docs-cinematic .hero {
    position: relative;
    overflow: hidden;
    padding: clamp(78px, 10vw, 135px) 0;
    background: radial-gradient(circle at 82% 20%, rgba(46, 145, 223, .24), transparent 35%), #050b13;
}
.docs-cinematic .hero h1 { max-width: 16ch; color: #fff; font-size: clamp(3.1rem, 6vw, 6rem); line-height: .97; }
.docs-cinematic .hero-copy { max-width: 760px; color: #d1e0eb; }
.docs-cinematic .hero .btn { border-radius: 5px; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.docs-cinematic .hero .btn:hover { transform: translateY(-3px); }
.docs-cinematic .mcard,
.docs-cinematic .feature { border-color: #d7e3eb; border-radius: 6px; box-shadow: none; }
.docs-cinematic .mcard:hover { border-color: #9ec7df; }
.docs-cinematic pre { border-radius: 6px; }

.status-cinematic .wrap { max-width: 1020px; padding-top: clamp(34px, 5vw, 72px); }
.status-cinematic .top {
    min-height: 160px;
    margin-bottom: 22px;
    padding: 28px clamp(22px, 4vw, 48px);
    border-radius: 6px;
    background: radial-gradient(circle at 90% 15%, rgba(46, 145, 223, .25), transparent 35%), #050b13;
}
.status-cinematic .top img { width: 50px; height: 50px; background: #fff; }
.status-cinematic .top .nm { color: #fff; font-size: clamp(1.45rem, 3vw, 2.15rem); }
.status-cinematic .top .nm small { margin-top: 5px; color: #bed2e0; }
.status-cinematic .banner,
.status-cinematic .card { border-radius: 6px; }
.status-cinematic .banner { padding: 22px 26px; }
.status-cinematic .card { border-color: #d7e3eb; }
.status-cinematic .svc .name { color: #0a1a28; }
.status-cinematic .foot a { color: #126ca8; }

@media (max-width: 575.98px) {
    .docs-cinematic .navbar .container { gap: 12px; }
    .docs-cinematic .hero { padding: 56px 0 70px; }
    .docs-cinematic .hero h1 { font-size: clamp(2.7rem, 11vw, 4rem); }
    .status-cinematic .top { min-height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
    .docs-cinematic .hero .btn { transition: none; }
    .docs-cinematic .hero .btn:hover { transform: none; }
}