/* SURGE MEDIA — one brand layer for every page a client taps (9/5).
   Served at portal.surgemedia.dev/brand.css and injected after each page's own
   <style> by portal_server._html(), so these rules win. Tokens come from the
   website (surgesitehome0905m2x8.html): navy #060B14, Inter, blue #0A84FF → #38BDF8. */
:root{ --blu:#0A84FF !important; --blu2:#0a6fd6 !important; --blue:#0A84FF !important; --blud:#0a6fd6 !important;
       --brand:#0A84FF; --brand-bright:#38BDF8; --sm-navy:#060B14; --sm-text:#F4F7FB; --sm-muted:#A9B6C8; --sm-line:rgba(255,255,255,.09); }
html, body, button, input, select, textarea, h1, h2, h3, h4, p, a, span, div, label{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; }
body{ -webkit-font-smoothing:antialiased; }

/* ---- the bar every page shares ---- */
.sm-bar{ display:flex; align-items:center; justify-content:center; gap:12px; background:#060B14; color:#F4F7FB;
  padding:12px 18px; padding-top:calc(env(safe-area-inset-top) + 12px); border-bottom:1px solid rgba(255,255,255,.08);
  position:relative; z-index:500; }
.sm-bar a{ color:inherit; text-decoration:none; display:flex; align-items:center; gap:10px; }
.sm-bar img{ height:26px; width:auto; display:block; }
.sm-bar .sm-wm{ font-weight:700 !important; font-size:14px; letter-spacing:.10em; text-transform:uppercase; }
.sm-bar .sm-wm i{ font-style:normal; font-weight:500 !important; color:#A9B6C8; margin-left:5px; }
.sm-bar .sm-tel{ font-weight:500 !important; color:#A9B6C8; font-size:13px; letter-spacing:.01em; }
@media (max-width:420px){ .sm-bar .sm-tel span{ display:none; } }

/* ---- the footer every page shares ---- */
.sm-foot{ background:#060B14; color:#A9B6C8; font-size:12.5px; line-height:1.8; text-align:center;
  padding:22px 18px calc(env(safe-area-inset-bottom) + 22px); margin-top:40px; border-top:1px solid rgba(255,255,255,.08); }
.sm-foot b{ color:#F4F7FB; font-weight:600 !important; }
.sm-foot a{ color:#A9B6C8; text-decoration:none; margin:0 7px; }

/* ---- each page's own old header goes away (the bar replaces it) ---- */
body[data-sm="setup"] .nav, body[data-sm="flow"] .nav, body[data-sm="intake"] .nav, body[data-sm="intake"] .topbar,
body[data-sm="how"] .nav, body[data-sm="how"] .topbar, body[data-sm="film"] header .brand{ display:none !important; }

/* ---- one blue, one button ---- */
#next, .go, .cta, .selbtn, .btn-primary, button.primary, .sm-btn{
  background:linear-gradient(135deg,#0A84FF 0%,#38BDF8 100%) !important; color:#fff !important; border:0 !important;
  border-radius:999px !important; font-weight:600 !important; letter-spacing:.01em; box-shadow:0 10px 30px -10px rgba(10,132,255,.55) !important; }
body[data-sm="getleads"] #nav{ background:linear-gradient(135deg,#0A84FF 0%,#38BDF8 100%) !important; }
body[data-sm="getleads"] #next{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
/* the lead form is a fixed full-screen modal: the bar sits above it, fixed too */
body[data-sm="getleads"] .sm-bar{ position:fixed !important; top:0; left:0; right:0; z-index:60; }
body[data-sm="getleads"] #quiz{ top:calc(env(safe-area-inset-top) + 52px) !important; }

/* ---- dark pages: the website's navy, not pure black ---- */
body[data-sm="getleads"], body[data-sm="setup"], body[data-sm="book"]{ background:#060B14 !important; }
body[data-sm="getleads"] html, body[data-sm="setup"]{ background:#060B14 !important; }

/* ---- light pages: the same soft ground ---- */
body[data-sm="intake"], body[data-sm="film"], body[data-sm="start"], body[data-sm="how"], body[data-sm="flow"],
body[data-sm="privacy"], body[data-sm="terms"]{ background:#F4F7FB !important; }
body[data-sm="film"] header{ padding-top:14px !important; }

/* ---- stale plan tiers on /start: the offer is one plan, $400 a month ---- */
body[data-sm="start"] .tiers .tier:not(:first-child){ display:none !important; }
body[data-sm="start"] .tiers .tier .tag{ display:none !important; }

/* ---- proof pages already use the tokens; just the bar spacing ---- */
body[data-sm="report"] .wrap{ padding-top:28px; }

/* How page: sentence case like the website, secondary button stays quiet */
body[data-sm="how"] .hero h1{ text-transform:none !important; letter-spacing:-.02em !important; }
body[data-sm="how"] .ctarow a:not(:first-child){ background:transparent !important; color:#0A84FF !important; border:2px solid #0A84FF !important; box-shadow:none !important; }

/* lead form: the modal backdrop is the website navy too */
body[data-sm="getleads"] #quiz{ background:#060B14 !important; }