/* ============================================================
   Super Migrator — shared brand layer
   Loaded by every page BEFORE its inline <style> so page-local
   rules can still override.

   COLOUR BUDGET — each colour has one job. Hold this line:
     indigo  brand only — mark, kickers, informational chips,
             inline links, the Super Migrator column label
     yellow  ACTION — every primary CTA, nothing else
     green   WIN / yes / included
     rose    LOSS / no / excluded
     navy    the hero band and the closing band
   ============================================================ */

:root{
  /* --- brand --- */
  --indigo:#263acf; --indigo-deep:#1d2cae; --indigo-dark:#1e2aa0; --sky:#6478ff;
  --tint:#EEF0FD;            /* chips and washes only — never a section ground */
  --glow:rgba(38,58,207,.16);

  /* --- GoHighLevel brand kit (marketing.gohighlevel.com/brandkit) ---
     The three-colour trim is GHL's palette, shared across the Super suite.
     Do NOT retune these to match Super Migrator's own indigo. */
  --ghl-yellow:#FFD000;   /* Capture Yellow */
  --ghl-blue:#2896FB;     /* Nurture Blue   */
  --ghl-green:#17D94B;    /* Close Green    */

  /* --- semantic (derived from the GHL accents) --- */
  --yellow:var(--ghl-yellow); --yellow-deep:#E0B800; --tint-yellow:#FFF9E0;
  --green:var(--ghl-green);   --green-deep:#0FA838;  --tint-green:#ECFDF1;
  --rose:#E11D48;             --rose-soft:#FFF1F2;

  /* --- grounds --- */
  --navy:#0a1130; --navy-2:#0e1840;
  --bg:#FFFFFF; --bg-soft:#F6F8FA; --card:#FFFFFF;
  --ink:#0A1A2F; --ink-soft:#46586E; --ink-faint:#6B7C90;
  --on-navy:#C7D3DF;
  --border:#E4E9EF; --line:#E4E9EF; --line-2:rgba(10,26,47,.06);

  /* --- scale --- */
  --shadow:0 1px 3px rgba(10,17,48,.08),0 1px 2px rgba(10,17,48,.06);
  --shadow-lg:0 10px 30px -10px rgba(10,17,48,.18);
  --shadow-sm:var(--shadow);
  --r-sm:8px; --r:12px; --r-lg:14px; --r-xl:18px;
  --radius:var(--r-lg);
  --ease:cubic-bezier(.32,.72,0,1);

  /* legacy aliases — older pages still reference these names */
  --blue:var(--indigo); --blue-deep:var(--indigo-deep); --blue-dark:var(--indigo-dark);
  --red:var(--rose); --muted:var(--ink-soft);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.display{font-family:"Sora",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;line-height:1.12}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.wrap-sm{max-width:820px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
.band-soft{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---- family stripe — GHL brand colours, shared across the Super suite ---- */
.stripe{display:flex;height:5px;position:sticky;top:0;z-index:70}
.stripe span{flex:1}
.stripe .y{background:var(--ghl-yellow)}
.stripe .b{background:var(--ghl-blue)}
.stripe .g{background:var(--ghl-green)}
.stripe.bottom{position:static}

/* ---- sticky nav (flat bar, not a floating glass pill) ---- */
.nav-shell{
  position:sticky;top:5px;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s var(--ease);
}
.nav-shell.scrolled{box-shadow:0 6px 20px -12px rgba(10,17,48,.28)}
.nav{
  max-width:1140px;margin:0 auto;min-height:60px;padding:10px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand,.foot-brand{display:inline-flex;align-items:center;gap:10px;font-family:"Sora",sans-serif;font-weight:700;font-size:18px;color:var(--ink);white-space:nowrap}
/* official mark — the SVG carries its own circle and brand blue, so it
   sits correctly on white, tinted and navy grounds without adjustment */
.brand .mark,.foot-brand .mark{width:30px;height:30px;flex:none;display:block}
.brand .mark svg,.foot-brand .mark svg{display:block;width:100%;height:100%}
.nav-links{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500}
.nav-links a{white-space:nowrap;color:var(--ink-soft);padding:6px 11px;border-radius:var(--r-sm);transition:color .25s var(--ease),background .25s var(--ease)}
.nav-links a:hover{color:var(--ink);background:var(--bg-soft)}
.nav-cta{white-space:nowrap;padding:9px 16px;font-size:14px}
.menu-btn{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px}
.menu-btn svg{transition:transform .35s var(--ease)}
.menu-btn[aria-expanded="true"] svg{transform:rotate(90deg)}
.mobile-menu{
  display:none;flex-direction:column;gap:2px;max-width:1140px;margin:0 auto;
  padding:10px 16px 16px;background:#fff;border-top:1px solid var(--border);
}
.mobile-menu a:not(.mm-cta){padding:11px 12px;border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--ink-soft)}
.mobile-menu a:not(.mm-cta):hover{background:var(--bg-soft);color:var(--ink)}
.mobile-menu .mm-cta{margin-top:8px;justify-content:center}
.mobile-menu.open{animation:mmIn .28s var(--ease)}
@keyframes mmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Collapse the links at 1000px. The old 680px breakpoint let them overlap
   the CTA everywhere between 681px and ~1000px. The CTA itself stays in the
   bar down to 560px so the buy path never disappears behind a hamburger. */
@media(max-width:1000px){
  .nav-links{display:none}
  /* with the links gone, space-between would strand the CTA mid-bar */
  .nav-cta{margin-left:auto}
  .menu-btn{display:grid;place-items:center}
  .mobile-menu.open{display:flex}
}
@media(max-width:560px){
  .nav-cta{display:none!important}
}

/* ---- buttons ----
   .btn-y is the action button. .btn-primary / .btn-blue are kept as aliases so
   existing markup across 12 pages keeps working.

   Each variant carries the full button SHAPE, not just its colours. Several
   content pages define their own `.btn`, so anything shared (the nav CTA) must
   stand on a variant class alone and never depend on `.btn` being ours. */
.btn,.btn-y,.btn-primary,.btn-blue,.btn-ghost,.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:15px;line-height:1;
  padding:13px 20px;border-radius:var(--r-sm);border:none;cursor:pointer;
  text-decoration:none;
  transition:filter .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),background .25s var(--ease);
}
.btn .ic,.btn-y .ic,.btn-primary .ic,.btn-blue .ic,.btn-ghost .ic,.btn-dark .ic{
  width:20px;height:20px;flex:none;display:grid;place-items:center;transition:transform .35s var(--ease)
}
.btn:active,.btn-y:active,.btn-ghost:active,.btn-dark:active{transform:scale(.98)}
.btn-y,.btn-primary,.btn-blue{background:var(--yellow);color:var(--navy)!important;box-shadow:var(--shadow)}
.btn-y:hover,.btn-primary:hover,.btn-blue:hover{filter:brightness(.95);box-shadow:var(--shadow-lg)}
.btn-y .ic,.btn-primary .ic,.btn-blue .ic{background:none}
.btn-y:hover .ic,.btn-primary:hover .ic,.btn-blue:hover .ic{transform:translateX(3px)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--border);box-shadow:var(--shadow)}
.btn-ghost:hover{background:var(--bg-soft);border-color:rgba(38,58,207,.35)}
.btn-dark{background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.btn-dark:hover{filter:brightness(1.15)}
.btn-link{
  display:inline-flex;align-items:center;gap:6px;padding:0;background:none;border:none;
  font-family:inherit;font-weight:700;font-size:15px;color:var(--indigo-dark);cursor:pointer;
}
.btn-link:hover{text-decoration:underline;text-underline-offset:4px}
.on-navy .btn-link,.btn-link.on-navy{color:var(--sky)}

/* ---- section headers ---- */
.kicker{
  display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--indigo-dark);border-bottom:1px solid var(--border);
  padding-bottom:8px;margin-bottom:20px;
}
.kicker.center{text-align:center}
.sec-h,.sec-title{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.14;margin-bottom:12px}
.sec-sub{color:var(--ink-soft);font-size:1.02rem;max-width:62ch;margin-bottom:40px}
.sec-center .kicker{text-align:center}
.sec-center .sec-h,.sec-center .sec-title{text-align:center;max-width:24ch;margin-left:auto;margin-right:auto}
.sec-center .sec-sub{text-align:center;margin-left:auto;margin-right:auto}

/* pill eyebrow — hero use only, not section headers */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--indigo-dark);
  background:var(--tint);border:1px solid rgba(38,58,207,.22);
  padding:6px 13px;border-radius:999px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 4px var(--glow)}

/* ---- reveal on scroll (see the <noscript> fallback on each page) ---- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- shared footer ---- */
footer,.site-foot{background:var(--bg-soft);border-top:1px solid var(--border);padding:56px 0 32px;margin-top:0}
footer .wrap,.foot-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-grid p,.foot-desc{font-size:13.5px;color:var(--ink-soft);max-width:300px;margin-top:14px;line-height:1.6}
.foot-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:14px;font-weight:800}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-soft);padding:4px 0;transition:color .25s var(--ease)}
.foot-col a:hover{color:var(--indigo-dark)}
.foot-base{border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--ink-faint)}
.foot-base .disc{max-width:560px}
.foot-base a{color:var(--ink-soft);font-weight:600}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;gap:28px}}

@media(max-width:680px){
  section{padding:56px 0}
}