/* ============ Variant E — "Blueprint" ============
   Technical light: cool gray-blue paper with engineering grid,
   monospace labels, signal blue, sharp corners. */

:root {
  --ink: #f3f5f7;
  --ink-soft: #eaeef2;
  --ink-card: #ffffff;
  --line: rgba(15, 23, 42, 0.14);
  --bone: #0f172a;
  --bone-dim: #404a5e;
  --bone-faint: #6b7689;
  --accent: #1d4ed8;
  --accent-deep: #1e40af;
  --accent-glow: rgba(29, 78, 216, 0.2);
  --live: #047857;
  --dev: #926600;
  --danger: #b91c1c;
  --radius: 8px;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.section-alt, .band, .cta { background-color: var(--ink-soft); }

/* mono for every label / data surface */
.eyebrow, .pill, .seg, .shot-title, .shot-filter, .shot-action,
.st-head, .st-time, .mc, .pt-head, .bp-label, .trust-strip li,
.shot-status, .panel-title, .phone-card-top, .mg-head,
.feed-item em, .mg-row > span:first-child {
  font-family: var(--font-mono);
}
.eyebrow { letter-spacing: 0.14em; }

.nav { background: rgba(243, 245, 247, 0.88); }
.hero-glow { background: radial-gradient(ellipse, rgba(29, 78, 216, 0.09), transparent 65%); }

.btn { border-radius: 8px; }
.btn-primary {
  background: var(--accent);
  box-shadow: 0 2px 12px rgba(29, 78, 216, 0.3);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(29, 78, 216, 0.36); }
.btn-ghost { background: #ffffff; }
.btn-ghost:hover { background: #eef1f5; }
.shot-action { background: var(--accent); border-radius: 6px; }

.hero-points li::before { background: var(--accent); border-radius: 2px; }
.trust-strip li { background: #ffffff; border-radius: 6px; font-size: 11px; }
.why-item { background: #ffffff; }
.why-icon { background: rgba(29, 78, 216, 0.08); color: var(--accent); border-radius: 8px; }

.pill { border-radius: 4px; letter-spacing: 0.05em; }
.pill-live { background: rgba(4, 120, 87, 0.1); color: var(--live); }
.pill-dev { background: rgba(146, 102, 0, 0.1); color: var(--dev); }
.pill-soon { background: rgba(15, 23, 42, 0.07); color: var(--bone-faint); }
.check-list li::before, .module-list li::before { color: var(--live); }

.module-node { background: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12); border-radius: 3px; }
.spine-line { background: linear-gradient(180deg, var(--accent), rgba(29, 78, 216, 0.06)); }
.module-card { box-shadow: none; }
.module-card:hover { border-color: rgba(29, 78, 216, 0.5); }
.module-flagship {
  border-color: rgba(29, 78, 216, 0.45);
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.05), #ffffff 45%);
}
.seg { border-radius: 5px; }
.seg.active { background: rgba(29, 78, 216, 0.1); color: var(--accent); }
.cta {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(29, 78, 216, 0.1), transparent 60%),
    var(--ink-soft);
}

/* ---- mockups: white drafting panels, hairline rules ---- */
.panel, .shot { box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1); }
.panel-head .dot { background: rgba(15, 23, 42, 0.16); }
.phone-notch { background: rgba(15, 23, 42, 0.16); }
.shot-bar { background: rgba(15, 23, 42, 0.025); }
.st-cell { background: #ffffff; border-radius: 5px; }
.pt-row:not(.pt-head):not(:last-child) { border-bottom-color: rgba(15, 23, 42, 0.07); }
.feed-item:not(:last-child) { border-bottom-color: rgba(15, 23, 42, 0.07); }
.phone-panel { background: #ffffff; border: 1px solid var(--line); }
.phone-card { background: rgba(15, 23, 42, 0.03); }
.phone-toast {
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.35);
  color: var(--accent-deep);
}
.shot-phone-wrap { background: none; border: none; box-shadow: none; }
.big-phone {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}
.bp-card { background: rgba(15, 23, 42, 0.03); border-radius: 10px; }
.bp-next { border-color: rgba(29, 78, 216, 0.4); background: rgba(29, 78, 216, 0.06); }
.bp-next .bp-label { color: var(--accent); }
.bp-line i.up { color: var(--accent); }
.bp-checkin { border-color: rgba(4, 120, 87, 0.4); background: rgba(4, 120, 87, 0.07); color: var(--live); }
.mg-assign .off.pulse { color: var(--accent); }

/* solid drafting-ink chips */
.mc { border-radius: 4px; }
.chip { border-radius: 4px; }
.c1 { background: #1d4ed8; }
.c2 { background: #6d28d9; }
.c3 { background: #0f766e; }
.st-warn { border-color: rgba(185, 28, 28, 0.5); background: rgba(185, 28, 28, 0.05); }
.fi { border-radius: 6px; }
.fi-warn { background: rgba(185, 28, 28, 0.08); } .fi-warn::after { background: var(--danger); }
.fi-ok { background: rgba(4, 120, 87, 0.08); } .fi-ok::after { background: var(--live); }
.fi-info { background: rgba(146, 102, 0, 0.08); } .fi-info::after { background: var(--dev); }
.fi-acc { background: rgba(29, 78, 216, 0.08); } .fi-acc::after { background: var(--accent); }
.fi-pay { background: rgba(109, 40, 217, 0.08); } .fi-pay::after { background: #6d28d9; }

.dswitch a.active { background: #1d4ed8; }