/* Shared utility pages use the same quiet palette as the home and login. */
:root { --bg-950:#0c0c13; --bg-900:#0c0c13; --bg-850:#14111c; --panel:#0c0c13; --panel-strong:#0c0c13; --line:#34343f; --text:#f5f5f7; --muted:#b7b6c2; --accent:#b28aff; --accent-strong:#9c63f5; --success:#76d9ad; --warning:#f0c980; --shadow:none; --radius-xl:10px; --radius-lg:8px; --radius-md:8px; --max-width:1120px; color-scheme:dark; }
body { background:#0c0c13!important; color:#f5f5f7; }
body::before,body::after,.page-orb { display:none!important; }
.site-header { background:#0c0c13!important; border-bottom:1px solid #292731; backdrop-filter:none; box-shadow:none; }
.header-inner { min-height:78px; }
.brand-lockup img { width:38px; height:38px; filter:none; box-shadow:none; }
.brand-lockup strong { color:#f5f5f7; font-size:19px; }
.brand-lockup span { color:#b7b6c2; }
.header-nav a { color:#c4bfce; font-weight:600; }
.header-nav a.is-active { color:#b28aff; background:#29193f; }
.page-main { padding-top:24px; }
.hero-section { padding:24px 0 0; background:none!important; }
.page-section { margin-top:0; margin-bottom:40px; }
.page-head { max-width:800px; padding:20px 0 28px!important; }
.page-head.glass-card { border:0; }
.page-main :is(h1,h2,h3,h4,strong,summary,li) { color:#f5f5f7; }
.page-main span { color:#b7b6c2; }
.page-main h1 span { color:inherit; }
.page-main :is(p,small,.list,.list-compact,.support-card span,.note-card span,.app-card span,.plan-card span) { color:#b7b6c2; }
.page-main :is(.status-summary,.status-node-row,.status-incident-row) span { color:#b7b6c2; }
.page-main .status-badge.is-ok { color:#76d9ad; background:#142c24; }
.page-main .status-badge.is-warning { color:#f0c980; background:#312719; }
.page-head h1 { color:#f5f5f7!important; font-size:clamp(30px,4vw,48px); line-height:1.15; letter-spacing:-1.3px; max-width:780px; }
.page-head p { max-width:650px; font-size:16px; line-height:1.7; color:#b7b6c2; }
.glass-card,.section-card,.support-card,.app-card,.faq-card,.note-card,.plan-card,.access-preview,.status-summary,.status-node,.legal-card { background:#0c0c13!important; box-shadow:none!important; backdrop-filter:none; border-color:#34343f!important; }
.glass-card::before,.glass-card::after,.plan-card::before,.plan-card::after,.featured::before,.featured::after { display:none!important; }
.section-card,.faq-card { border:0; padding:24px 0; border-top:1px solid #34343f; border-radius:0; }
.note-card { padding:16px 0; border:0; border-bottom:1px solid #292731; border-radius:0; }
.section-card h2,.faq-card h2 { font-size:25px; line-height:1.3; letter-spacing:-.5px; }
.section-card h3 { font-size:18px; }
.plan-card,.app-card,.support-card { padding:24px; border:1px solid #34343f; border-radius:8px; }
.plan-card.featured { transform:none; background:#0c0c13!important; }
.plan-meta>span,.plan-feature { display:none; }
.plan-price { color:#f5f5f7; font-size:34px; }
.plan-type-switch { background:#14111c; border-color:#34343f; border-radius:8px; padding:4px; }
.plan-type-switch button { color:#b7b6c2; border-radius:6px; min-height:44px; }
.plan-type-switch button.is-active { color:#f5f5f7; background:#0c0c13; box-shadow:0 1px 3px #00000012; }
.button-primary,.button-secondary { border-radius:8px; min-height:44px; font-size:14px; font-weight:650; box-shadow:none!important; transform:none!important; }
.button-primary { background:#b28aff!important; border-color:#b28aff!important; color:#0c0c13!important; }
.button-primary:hover { background:#9c63f5!important; }
.button-primary :is(strong,span) { color:#0c0c13!important; }
.button-secondary { background:#0c0c13!important; color:#b28aff!important; border:1px solid #5e576c!important; }
.button-secondary:hover { background:#22172e!important; border-color:#b28aff!important; }
.site-footer { background:#0c0c13!important; border-top:1px solid #34343f; margin-top:48px; }
.footer-copy { color:#b7b6c2; }
.page-main :is(.container,.glass-card,.support-card,.app-card) { min-width:0; }
.footer-links a { color:#b7b6c2; font-size:13px; }
.text-link,a:not([class]) { color:#b28aff; }
.faq-list details { background:#0c0c13; border-color:#34343f; border-radius:0; border-width:0 0 1px; }
.faq-list summary { font-size:16px; color:#f5f5f7; padding-block:18px; }
.nav-toggle span { background:#f5f5f7; }
.nav-toggle,.site-header .brand-lockup { position:relative; z-index:20; }
.device-filter { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.device-filter button { font:inherit; font-size:14px; padding:10px 16px; border:1px solid #34343f; border-radius:7px; background:white; color:#c4bfce; cursor:pointer; min-height:44px; }
.device-filter button[aria-pressed=true] { color:#b28aff; background:#29193f; border-color:#b28aff; }
.guide-disclosure { border-top:1px solid #34343f; padding:20px 0; }
.guide-disclosure>summary { cursor:pointer; font-size:19px; font-weight:650; }
.guide-disclosure .section-card { margin-top:12px; border:0; }
body[data-page="apps"] .apps-grid { align-items:start; }
body[data-page="apps"] #karing-guide { scroll-margin-top:140px; }
body[data-page="apps"] .app-card .guide-disclosure { padding:8px 0 0; }
body[data-page="apps"] .guide-disclosure>summary { min-height:44px; padding:10px 0; box-sizing:border-box; font-size:16px; }
@media(min-width:1100px) { body[data-page="apps"] .apps-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
:focus-visible { outline:3px solid #b28aff!important; outline-offset:4px; }
[hidden] { display:none!important; }
@media(max-width:960px) { .header-nav { background:#0c0c13!important; border-color:#34343f; box-shadow:0 12px 24px #00000012; } }
@media(max-width:640px) { .page-main { padding-top:8px; } .page-head { padding-top:12px!important; } .page-section { margin-bottom:28px; } .two-col-grid,.plan-grid,.support-grid { grid-template-columns:minmax(0,1fr); } .plan-card,.app-card,.support-card { padding:20px; } .header-inner { min-height:68px; } }
@media(max-width:820px) { .header-nav { max-height:calc(100dvh - 90px); overflow-y:auto; } .header-nav a { color:#c4bfce; border-radius:8px; } .header-nav a.is-active { color:#b28aff; background:#29193f; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }