/* ===== LEAN INTELLIGENCE — brand design system ===== */
:root{
  --bg:#070b16; --bg2:#0b1222; --panel:#0f1830; --panel2:#13203c;
  --ink:#eaf1ff; --muted:#9fb0cc; --faint:#62748f; --line:#1e2c4a;
  --cyan:#22d3ee; --blue:#3b82f6; --violet:#8b5cf6; --magenta:#e052c7;
  --emerald:#10d9a3; --amber:#fbbf24; --rose:#fb7185;
  --grad-hero:linear-gradient(120deg,#22d3ee 0%,#3b82f6 38%,#8b5cf6 72%,#e052c7 100%);
  --grad-cool:linear-gradient(120deg,#22d3ee,#3b82f6);
  --grad-warm:linear-gradient(120deg,#8b5cf6,#e052c7);
  --grad-secure:linear-gradient(120deg,#10d9a3,#22d3ee);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.45; letter-spacing:.1px;
}
.page{position:relative; overflow:hidden; background:
  radial-gradient(900px 500px at 12% -8%, rgba(59,130,246,.18), transparent 60%),
  radial-gradient(800px 520px at 105% 8%, rgba(224,82,199,.16), transparent 55%),
  radial-gradient(700px 600px at 50% 120%, rgba(16,217,163,.12), transparent 60%),
  linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
}
.grid-bg::before{content:none}  /* removed decorative grid (could cross text like strikethrough) */
.wrap{position:relative;z-index:1}

/* logo + brand */
.brandrow{display:flex;align-items:center;gap:14px}
.logo{width:46px;height:46px;flex:none}
.brandname{font-weight:800;font-size:22px;letter-spacing:.8px}
.brandname .b1{color:#34d8f0}
.brandname .b2{color:#ef6fd6}
.byline{color:var(--muted);font-size:11px;letter-spacing:2.4px;text-transform:uppercase}

/* solid accent colors — robust in print/PDF (no fragile background-clip:text) */
.gradtext{color:#46d8ff}
.c-cyan{color:#34d8f0}.c-blue{color:#5b9cff}.c-violet{color:#a78bfa}
.c-magenta{color:#ef6fd6}.c-emerald{color:#19e0ad}.c-amber{color:#fbbf24}
.eyebrow{color:var(--cyan);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:11px}
h1.hero{font-size:46px;line-height:1.04;font-weight:800;letter-spacing:-.5px}
h2.sec{font-size:19px;font-weight:800;letter-spacing:.2px;margin-bottom:12px;display:flex;align-items:center;gap:9px}
h2.sec::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--grad-cool)}
.lede{color:var(--muted);font-size:15px;max-width:60ch}

/* chips / badges */
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:12.5px;color:var(--ink);font-weight:600}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chip.secure{border-color:rgba(16,217,163,.4);background:rgba(16,217,163,.08)}
.chip.secure .dot{background:var(--emerald)}

/* cards */
.card{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:16px;padding:18px 18px 16px;position:relative;overflow:hidden}
.card .accent{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-cool)}
.card h3{font-size:15px;font-weight:800;margin-bottom:5px;display:flex;align-items:center;gap:9px}
.card p{color:var(--muted);font-size:12.6px}
.ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:none;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.stat{background:linear-gradient(165deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:14px;padding:15px 14px;text-align:center}
.stat .n{font-size:27px;font-weight:800;line-height:1}
.stat .l{color:var(--muted);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;margin-top:6px}

/* flow */
.flow{display:flex;align-items:stretch;gap:0;margin-top:6px}
.node{flex:1;background:linear-gradient(165deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:14px;padding:13px 12px;text-align:center;position:relative}
.node .nt{font-weight:800;font-size:12.5px;margin-bottom:3px}
.node .nd{color:var(--muted);font-size:10.5px;line-height:1.35}
.node .nemoji{font-size:18px}
.arrow{align-self:center;width:34px;flex:none;text-align:center;color:var(--cyan);font-size:20px;font-weight:800}

table.cmp{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:12.5px}
table.cmp th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;padding:0 12px 4px}
table.cmp td{background:rgba(255,255,255,.025);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 12px;vertical-align:middle}
table.cmp td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px;font-weight:700}
table.cmp td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}
.col-li{color:#c9f7ec}
.li-cell{background:rgba(16,217,163,.08)!important;border-color:rgba(16,217,163,.30)!important}
.yes{color:var(--emerald);font-weight:800}.no{color:var(--rose);font-weight:800}.mid{color:var(--amber);font-weight:800}

.kvs{display:grid;grid-template-columns:1fr 1fr;gap:9px 26px}
.kv{display:flex;gap:9px;font-size:12.6px;color:var(--muted)}
.kv b{color:var(--ink);font-weight:700}
.tick{color:var(--emerald);font-weight:900;flex:none}

.foot{display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-size:10.5px;
  border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.foot b{color:var(--muted)}