/* ────────────────────────────────────────────────────────────────────────
   DSM Brand Overlay — site-wide retint to Designer Brand Guidelines
   Loaded AFTER each page's inline <style>; overrides tokens + topbar.
   Drop the <link> from any single page to roll it back individually.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Brand palette */
  --dsm-blue:#0A1BFF; --dsm-blue-dark:#071733; --dsm-red:#E31E24;

  /* Override the warm-paper palette */
  --bg:#F5F7FA !important;
  --bg-grad:radial-gradient(1400px 700px at 85% -15%, rgba(10,27,255,.06), transparent 55%),
            radial-gradient(1000px 600px at 0% 110%, rgba(227,30,36,.03), transparent 50%),
            #F5F7FA !important;
  --surface:#FFFFFF !important;
  --surface-hover:#FAFBFD !important;
  --hair:#D9DCE3 !important;
  --hair-strong:#C4C8D2 !important;
  --fg:#111827 !important;
  --fg-dim:#6B7280 !important;
  --fg-mute:#9CA3AF !important;
  --fg-faint:#C4C8D2 !important;
  --accent:#0A1BFF !important;
  --accent-soft:#0716D6 !important;
  --accent-bg:rgba(10,27,255,.06) !important;
  --accent-border:rgba(10,27,255,.24) !important;

  /* Swap font stacks */
  --wordmark:'Sora','Montserrat',system-ui,sans-serif !important;
  --display:'Sora','Montserrat',system-ui,sans-serif !important;
  --body:'Inter',system-ui,sans-serif !important;
}

/* Body antialiasing + base */
body{font-family:'Inter',system-ui,sans-serif !important; background:var(--bg-grad)}

/* ────────────────────────────────────────────────────────────────────────
   Topbar → DSM blue masthead band with centered white DSM lockup
   Mirrors v2/index.html (and dsm-monitor) header.
   ──────────────────────────────────────────────────────────────────────── */
.topbar{
  background:var(--dsm-blue) !important;
  border-bottom:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  padding:32px 24px 16px !important;
  gap:14px !important;
  position:sticky !important; top:0; z-index:50;
}

/* Centered white DSM lockup at top — replace the small left-aligned brandmark */
.topbar::before{
  content:'';
  display:block;
  width:240px; height:110px;
  flex:0 0 110px;          /* don't let flex column shrink the logo */
  background:url('/dsm-logo-white.png') center/contain no-repeat;
}
.topbar .brand-lockup{display:none !important}
.topbar .brandmark{display:none !important}
.topbar .made-in{display:none !important}

/* Nav row — white-on-blue */
.topbar .nav{
  flex:0 0 auto !important; margin:0 !important;
  display:flex !important; gap:24px !important; flex-wrap:wrap !important; justify-content:center !important;
}
.topbar .nav a{
  color:rgba(255,255,255,.85) !important; border-bottom-color:transparent !important;
  font-family:'Inter',system-ui,sans-serif !important; font-size:13px !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
}
.topbar .nav a:hover, .topbar .nav a.current{
  color:#fff !important; border-bottom-color:#fff !important;
}
/* Header CTA inverted to white-on-blue */
.topbar .cta-btn{
  background:#fff !important; color:var(--dsm-blue) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.18) !important;
  font-weight:600 !important;
}
.topbar .cta-btn:hover{background:#f5f7fa !important; color:var(--dsm-blue) !important}

/* Brand text replacement — fallback if any page shows brand text instead of logo */
.brand-name{display:none !important}

/* ────────────────────────────────────────────────────────────────────────
   Buttons (page-body CTA buttons, not topbar)
   ──────────────────────────────────────────────────────────────────────── */
main .cta-btn,
section .cta-btn,
.hero .cta-btn{
  background:var(--dsm-red) !important; color:#fff !important;
  height:52px; padding:0 24px; border-radius:12px !important;
  box-shadow:0 2px 12px rgba(227,30,36,.22) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}
main .cta-btn:hover,
section .cta-btn:hover,
.hero .cta-btn:hover{background:#c91920 !important; color:#fff !important}

/* Body headings get Sora upright (some pages use Fraunces italic) */
h1,h2,h3,.hero h1,.hero-title,.section-title{
  font-family:'Sora','Montserrat',system-ui,sans-serif !important;
  font-style:normal !important;
}

/* Card-ish surfaces: bigger radius + subtle shadow */
.card,.product-card,.feature-card,article{
  border-radius:16px !important;
  border:1px solid var(--hair) !important;
}

/* Selection */
::selection{background:var(--dsm-blue); color:#fff}