/* ============================================================================
   Safety Lab Aero — shared styles for marketing content (SEO) pages
   Palette mirrors landing.html / safety_lab_brand.py — keep in sync.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --brand-blue:#007aff; --brand-purple:#af52de;
  --ink-navy:#0A1F44; --ink-body:#181B22; --ink-muted:#555B6B;
  --bg:#0b0d12; --bg-soft:#11141b; --bg-card:#161a23;
  --border-hair:#1f2532; --border:#2a3142;
  --text:#e2e6f0; --text-strong:#f3f5fa; --text-muted:#9aa3b8;
  --r-md:10px; --r-lg:16px;
  --font-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --grad:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-purple) 100%);
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme:light;
    --bg:#ffffff; --bg-soft:#f7f8fb; --bg-card:#ffffff;
    --border-hair:#e3e6ee; --border:#d4d8e3;
    --text:var(--ink-body); --text-strong:var(--ink-navy); --text-muted:var(--ink-muted);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:820px; margin:0 auto; padding:0 24px}
a{color:var(--brand-blue); text-decoration:none}
a:hover{text-decoration:underline}

/* nav */
.nav{position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(12px);
  background:rgba(11,13,18,0.78); border-bottom:1px solid var(--border-hair)}
@media (prefers-color-scheme: light){.nav{background:rgba(255,255,255,0.85)}}
.nav-inner{max-width:1080px; margin:0 auto; padding:12px 24px; display:flex;
  align-items:center; justify-content:space-between}
.nav-brand{display:flex; align-items:center; gap:10px; font-weight:700;
  color:var(--text-strong)!important; text-decoration:none!important}
.brand-mark{width:26px; height:26px; border-radius:7px; background:var(--grad);
  display:inline-flex; align-items:center; justify-content:center}
.brand-mark svg{width:15px; height:15px}
.nav-links{display:flex; align-items:center; gap:22px; font-size:15px}
.nav-links a{color:var(--text-muted)}
.nav-cta{padding:8px 16px; border-radius:8px; background:var(--grad);
  color:#fff!important; font-weight:600; text-decoration:none!important}

/* hero / content */
.page-hero{padding:64px 0 28px; border-bottom:1px solid var(--border-hair)}
.eyebrow{font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--brand-blue); margin:0 0 14px}
h1{font-size:40px; line-height:1.12; letter-spacing:-.02em; margin:0 0 16px;
  color:var(--text-strong); font-weight:700}
.lede{font-size:20px; color:var(--text-muted); margin:0 0 8px}
article{padding:40px 0 8px}
article h2{font-size:26px; letter-spacing:-.01em; margin:40px 0 12px;
  color:var(--text-strong); font-weight:700}
article h3{font-size:19px; margin:28px 0 8px; color:var(--text-strong); font-weight:600}
article p{margin:0 0 16px}
article ul{margin:0 0 18px; padding-left:22px}
article li{margin:6px 0}
.grad-text{background:var(--grad); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
code{font-family:var(--font-mono); font-size:.88em; background:var(--bg-soft);
  border:1px solid var(--border-hair); border-radius:6px; padding:1px 6px}

/* callout / CTA */
.callout{background:var(--bg-card); border:1px solid var(--border-hair);
  border-radius:var(--r-lg); padding:24px 26px; margin:28px 0}
.cta-band{margin:48px 0 8px; padding:32px 28px; border-radius:var(--r-lg);
  background:var(--bg-soft); border:1px solid var(--border-hair); text-align:center}
.cta-band h2{margin:0 0 10px}
.btn{display:inline-block; padding:12px 22px; border-radius:10px; font-weight:600}
.btn-primary{background:var(--grad); color:#fff!important; text-decoration:none!important}
.related{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0}
.related a{font-size:14px; padding:6px 12px; border:1px solid var(--border);
  border-radius:999px; color:var(--text-muted)}

/* footer */
footer{margin-top:56px; border-top:1px solid var(--border-hair);
  padding:28px 0; color:var(--text-muted); font-size:14px}
.foot-inner{max-width:1080px; margin:0 auto; padding:0 24px; display:flex;
  flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.foot-links{display:flex; flex-wrap:wrap; gap:18px}
.foot-links a{color:var(--text-muted)}
.foot-copy{max-width:1080px; margin:14px auto 0; padding:0 24px; font-size:13px;
  color:var(--text-muted)}
@media (max-width:640px){h1{font-size:32px} .nav-links a:not(.nav-cta){display:none}}

/* ============================================================================
   Phase 62.6 — flight recorder identity. Forced light paper + ink (matches
   landing.html), squared corners everywhere, gradient held to the brand spine.
   These come last so they win over the dark defaults and media queries above.
   ============================================================================ */
:root{
  color-scheme:light;
  --bg:#F7F4EC; --bg-soft:#F1EDE2; --bg-card:#FFFFFF;
  --border-hair:#E4DFD1; --border:#CFC9B8;
  --text:#16181D; --text-strong:#0A1F44; --text-muted:#565B66;
  --r-md:0; --r-lg:0;
}
*{border-radius:0 !important;}
body{font-family:var(--font-sans);}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:2000;pointer-events:none;}
.nav{background:rgba(247,244,236,0.88) !important;}
a{color:#0A63CC;}