/* =====================================================================
   SEV-1 PREVIEW CHROME
   Shared header / footer / nav design extracted verbatim from the
   approved HTML previews (sev1db-content/_preview-*.html).
   Class names are unique (.topstrip, header.site, nav.main, .subband,
   footer.site, .mobnav) so this stylesheet can load globally without
   colliding with the legacy theme. The :root tokens below are additive
   (--sev1, --line, --ink ...) and do NOT redefine the legacy theme's
   own variables. The preview `body{}` base is intentionally omitted here
   and lives inline in each marketing page template instead.
   ===================================================================== */

:root{
  --sev1:#e11d48; --sev1-dark:#be123c; --ink:#0f172a; --slate:#475569;
  --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc; --card:#ffffff;
  --code-bg:#0b1220; --code-ink:#e2e8f0; --ok:#16a34a; --ok-bg:#f0fdf4;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-line:#fde68a;
  --pro:#7c3aed; --pro-bg:#f5f3ff; --pro-line:#ddd6fe;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Consolas,monospace;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* top strip */
.topstrip{background:#0b1220;color:#cbd5e1;font-size:12.5px;font-family:var(--mono)}
.topstrip .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:7px 20px}
.topstrip .node{display:flex;align-items:center;gap:7px}
.topstrip .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot--rose{background:#fb7185}.dot--green{background:#22c55e}.dot--blue{background:#60a5fa}
.topstrip b{color:#fff}
.topstrip .sp{margin-left:auto;color:#64748b}
.topstrip a{color:inherit}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .nav{display:flex;align-items:center;gap:26px;height:62px}
header.site .brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:800;
  font-size:16px;color:var(--ink);letter-spacing:-.01em;text-decoration:none}
header.site .brand:hover{text-decoration:none}
header.site .brand .mk{width:28px;height:28px;border-radius:7px;background:var(--sev1);color:#fff;
  display:grid;place-items:center;font-size:15px;box-shadow:0 2px 6px rgba(225,29,72,.35)}
header.site .brand .sev{color:var(--sev1)}
nav.main{display:flex;gap:22px;margin-left:6px}
nav.main a{color:var(--slate);font-size:14.5px;font-weight:600;text-decoration:none}
nav.main a:hover{color:var(--ink);text-decoration:none}
nav.main a.on,nav.main a.current-menu-item{color:var(--sev1)}
header.site .nav .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.navsearch{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:7px 11px;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:none}
.navsearch:hover{text-decoration:none}
.navsearch kbd{font-size:11px;background:#f1f5f9;border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;color:var(--slate)}
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;
  padding:9px 16px;border-radius:9px;cursor:pointer;border:1px solid transparent;text-decoration:none}
.btn:hover{text-decoration:none}
.btn--pro{background:var(--pro);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.3)}
.btn--pro:hover{background:#6d28d9;text-decoration:none}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--slate)}
.btn--rose{background:var(--sev1);color:#fff;box-shadow:0 2px 8px rgba(225,29,72,.28)}
.btn--rose:hover{background:var(--sev1-dark);text-decoration:none}

.shell{max-width:880px;margin:0 auto;padding:0 20px}
.crumb{font-size:13px;color:var(--muted);margin:24px 0 12px;font-family:var(--mono)}
.crumb a{color:var(--slate)}.crumb .sep{color:#cbd5e1;margin:0 7px}

/* substack newsletter band (GLOBAL — appears on every page above footer) */
.subband{background:linear-gradient(120deg,#fff1f2,#fff 62%);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:36px 0}
.subband .sb-in{display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.subband .sb-copy{max-width:520px}
.subband .sb-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  font-weight:800;letter-spacing:.04em;color:var(--sev1);margin-bottom:10px}
.subband .sb-tag .ico{width:20px;height:20px;border-radius:5px;background:#ff6719;color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:900}
.subband h3{margin:0 0 7px;font-size:23px;letter-spacing:-.01em}
.subband p{margin:0;font-size:14.5px;color:var(--slate)}
.subband p b{color:var(--ink)}
.subband .sb-form{display:flex;gap:10px;flex-wrap:wrap}
.subband .sb-form input{min-width:230px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 15px;font-size:14px}
.subband .sb-proof{display:flex;gap:24px;margin-top:20px;padding-top:18px;border-top:1px dashed #fecdd3;
  font-family:var(--mono);font-size:13px;color:var(--muted);flex-wrap:wrap}
.subband .sb-proof b{color:var(--ink)}

/* footer */
footer.site{background:#0b1220;color:#94a3b8;padding:46px 0 30px;font-size:14px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer.site h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px}
footer.site a{color:#94a3b8;display:block;padding:4px 0;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:none}
footer.site .brand{color:#fff;margin-bottom:12px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:800;font-size:16px}
footer.site .brand .mk{width:28px;height:28px;border-radius:7px;background:var(--sev1);color:#fff;
  display:grid;place-items:center;font-size:15px;box-shadow:none}
footer.site .bottom{border-top:1px solid #1e293b;margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#64748b}

/* Mobile nav (hamburger) */
.navtoggle{display:none;margin-left:auto;width:42px;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;align-items:center;justify-content:center;padding:0}
.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{content:"";display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.navtoggle .bars{position:relative}
.navtoggle .bars::before{position:absolute;top:-6px;left:0}
.navtoggle .bars::after{position:absolute;top:6px;left:0}
header.site.navopen .navtoggle .bars{background:transparent}
header.site.navopen .navtoggle .bars::before{top:0;transform:rotate(45deg)}
header.site.navopen .navtoggle .bars::after{top:0;transform:rotate(-45deg)}
header.site.navopen{background:#fff}
.mobnav{display:none;flex-direction:column;padding:8px 0 12px}
.mobnav>a{padding:12px 2px;font-size:15px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none}
.mobnav>a:hover{text-decoration:none;color:var(--sev1)}
.mobnav .mobnav-cta{display:flex;gap:10px;margin-top:14px}
.mobnav .mobnav-cta a{flex:1;text-align:center;padding:11px}
header.site.navopen .mobnav{display:flex}

@media(max-width:900px){
  nav.main,.navsearch,header.site .nav .right{display:none}
  .navtoggle{display:inline-flex}
  footer.site .cols{grid-template-columns:1fr 1fr}
}