/* Monitor CRMS Design System tokens (as used by CustomerDataManager) */
:root {
  --bright-blue:#12c3f4; --bright-blue-600:#0fa9d6; --bright-blue-100:#d6f4fd; --bright-blue-050:#ecfaff;
  --dark-blue:#262262; --dark-blue-800:#1b1849; --dark-blue-400:#4b4789; --dark-blue-100:#dddcec;
  --blood-orange:#f05125; --orange:#f79024; --yellow:#fdce12; --pink:#ee759b; --purple:#63288a;
  --grey:#f3f3f3; --white:#ffffff;
  --ink:#262262; --ink-700:#3c3a6b; --ink-500:#6f6d92; --ink-300:#a6a4c0; --line:#e4e4ee;
  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(38,34,98,.06),0 1px 3px rgba(38,34,98,.08);
  --shadow-md:0 4px 12px rgba(38,34,98,.08),0 2px 4px rgba(38,34,98,.06);
  --shadow-blue:0 8px 24px rgba(18,195,244,.28);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:15px/1.65 var(--font-sans); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; }
a { color:var(--bright-blue-600); }
code { font:13px/1.4 var(--font-mono); background:var(--bright-blue-050); color:var(--dark-blue); padding:2px 7px; border-radius:6px; overflow-wrap:anywhere; }
.wrap { max-width:1100px; margin:0 auto; padding:0 20px; }

header.top { position:sticky; top:0; z-index:5; background:var(--dark-blue); }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.logo { display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none; }
.logo img { height:40px; width:auto; display:block; }
.logo .product { padding-left:14px; border-left:1px solid rgba(255,255,255,.25); font-weight:600; font-size:15px; letter-spacing:.06em; }
nav { display:flex; align-items:center; }
nav a { color:var(--dark-blue-100); text-decoration:none; font-size:14px; font-weight:500; margin-left:24px; }
nav a:hover { color:#fff; }
@media (max-width:800px) { nav a:not(.btn) { display:none; } }

.btn { display:inline-flex; align-items:center; gap:8px; font:600 14px var(--font-sans); border-radius:var(--r-pill); padding:11px 22px;
       text-decoration:none; transition:all .15s; border:1.5px solid var(--line); background:var(--white); color:var(--dark-blue); }
.btn:hover { border-color:var(--dark-blue-100); }
.btn.primary { background:var(--bright-blue); border-color:var(--bright-blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn.primary:hover { background:var(--bright-blue-600); border-color:var(--bright-blue-600); }
nav .btn { padding:8px 18px; font-size:13px; margin-left:24px; }

.hero { padding:92px 0 84px; background:var(--dark-blue); color:#fff; position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; right:-180px; top:-120px; width:620px; height:420px; border:3px solid rgba(18,195,244,.35); border-radius:50%; transform:rotate(-14deg); pointer-events:none; }
.hero .wrap { position:relative; z-index:1; }
.eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bright-blue); margin-bottom:16px; }
.hero h1 { font-size:clamp(34px,5.4vw,58px); font-weight:700; line-height:1.08; letter-spacing:-.015em; margin:0 0 22px; max-width:820px; }
.hero h1 em { font-style:normal; color:var(--bright-blue); }
.hero p.lead { font-size:clamp(16px,2vw,19px); font-weight:300; color:var(--dark-blue-100); max-width:700px; margin:0 0 34px; }
.hero .actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero .btn:not(.primary) { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.assistants { display:flex; flex-wrap:wrap; gap:8px; margin-top:48px; }
.chip { font-size:13px; font-weight:500; padding:6px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:var(--dark-blue-100); }

section { padding:80px 0; }
section.alt { background:var(--grey); }
h2 { font-size:clamp(26px,3.4vw,36px); font-weight:700; letter-spacing:-.01em; line-height:1.2; margin:0 0 12px; }
p.intro { color:var(--ink-500); font-size:17px; max-width:740px; margin:0 0 40px; }
h3 { font-size:17px; font-weight:600; margin:0 0 6px; }

.grid { display:grid; gap:20px; }
.g3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:28px; }
.card p { margin:0; color:var(--ink-500); }
.num { width:40px; height:40px; border-radius:12px; color:#fff; font-weight:700; display:grid; place-items:center; margin-bottom:16px; background:var(--bright-blue); }
.g3 .card:nth-child(2) .num { background:var(--orange); }
.g3 .card:nth-child(3) .num { background:var(--purple); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:860px) { .split { grid-template-columns:1fr; gap:24px; } }
ul.ticks { list-style:none; padding:8px 24px; margin:0; background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
ul.ticks li { padding:16px 0 16px 36px; border-bottom:1px solid var(--line); position:relative; }
ul.ticks li:last-child { border-bottom:0; }
ul.ticks li::before { content:""; position:absolute; left:0; top:18px; width:22px; height:22px; border-radius:50%; background:var(--bright-blue-100); }
ul.ticks li::after { content:""; position:absolute; left:7px; top:24px; width:8px; height:5px; border-left:2px solid var(--bright-blue-600); border-bottom:2px solid var(--bright-blue-600); transform:rotate(-45deg); }
ul.ticks strong { display:block; font-weight:600; }
ul.ticks span { color:var(--ink-500); font-size:14px; }

.table-wrap { overflow-x:auto; border-radius:var(--r-lg); background:var(--white); box-shadow:var(--shadow-sm); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-300); }
.tag { font-size:12px; font-weight:600; padding:3px 10px; border-radius:var(--r-pill); background:var(--bright-blue-100); color:var(--dark-blue); white-space:nowrap; }
.tag.p { background:var(--dark-blue-100); }
.tag.w { background:#fdeedd; color:#a85a0a; }

.endpoint { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:20px 24px; margin-bottom:24px; }
.endpoint code { font-size:15px; padding:7px 12px; }
details { background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:0 24px; margin-bottom:10px; }
summary { cursor:pointer; padding:18px 0; font-weight:600; }
details[open] summary { border-bottom:1px solid var(--line); margin-bottom:14px; }
details ol, details p { margin:0 0 18px; color:var(--ink-500); }
details li { margin-bottom:6px; }

.cta-band { background:var(--dark-blue); color:#fff; border-radius:var(--r-xl); padding:52px 44px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; left:-80px; bottom:-160px; width:420px; height:280px; border:3px solid rgba(18,195,244,.3); border-radius:50%; transform:rotate(-14deg); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { margin:0 0 8px; }
.cta-band p { margin:0; color:var(--dark-blue-100); max-width:620px; }
@media (max-width:500px) { .cta-band { padding:34px 24px; } }

footer { padding:32px 0 48px; color:var(--ink-500); font-size:13px; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
  

/* ---- Shared additions (multi-page site) ---- */
nav a.active { color:#fff; }
.page-hero { padding:64px 0 56px; }
.page-hero h1 { font-size:clamp(30px,4.4vw,46px); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.section-head p.intro { margin-bottom:0; }

/* Use cases */
.theme { margin-top:44px; }
.theme:first-of-type { margin-top:0; }
.theme-label { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); margin-bottom:16px; }
.theme-label::before { content:""; width:28px; height:4px; border-radius:2px; background:var(--accent,var(--bright-blue)); }
.uc-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.uc { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:28px; border-top:4px solid var(--accent,var(--bright-blue)); display:flex; flex-direction:column; }
.uc h3 { font-size:18px; margin-bottom:10px; }
.uc p { margin:0 0 16px; color:var(--ink-500); }
.uc .outcome { margin-top:auto; padding:14px 16px; border-radius:var(--r-md); background:var(--bright-blue-050); font-size:14px; color:var(--ink-700); }
.uc .outcome strong { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); margin-bottom:4px; }
.t-capture { --accent:var(--bright-blue); }
.t-lists { --accent:var(--orange); }
.t-quality { --accent:var(--pink); }
.t-report { --accent:var(--purple); }

.flow { display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); counter-reset:step; }
.flow div { padding:0 20px 0 0; }
.flow div::before { counter-increment:step; content:counter(step); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--bright-blue); color:#fff; font-weight:700; margin-bottom:12px; }
.flow p { margin:0; color:var(--ink-500); font-size:14px; }
@media (max-width:640px) { .flow { gap:24px; } }

/* Security page */
.banner { background:#fff6e5; color:#7a4a00; border-radius:var(--r-md); padding:14px 18px; font-size:14px; margin-bottom:28px; }
.rating { font-size:12px; font-weight:600; padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.rating.high { background:#fde7e0; color:#b8391a; }
.rating.med { background:#fff3d6; color:#8a5a00; }
.rating.low { background:#e4f7ef; color:#13774f; }
td.today { color:var(--ink-700); }
td .planned { display:block; margin-top:8px; font-size:13px; color:var(--ink-500); }
td .planned::before { content:"Planned: "; font-weight:600; color:var(--ink-700); }
.facts { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.facts .chip { font-size:13px; }
.anchor-nav { display:flex; gap:8px; flex-wrap:wrap; margin-top:32px; }
.anchor-nav a { font-size:13px; font-weight:500; padding:6px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; text-decoration:none; }
.anchor-nav a:hover { background:rgba(255,255,255,.16); }