@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =================================================================
   BMBW Design Tokens — Build My Business Design System v2
   Cobalt brand blue · Tangerine accent · Ink darks · Sand paper
   ================================================================= */

:root {

  /* ─ Brand: Cobalt ───────────────────────────────── */
  --cobalt-50:  #EDF1FE;
  --cobalt-100: #D7E0FD;
  --cobalt-200: #B0C1FB;
  --cobalt-300: #809CF8;
  --cobalt-400: #5378F2;
  --cobalt-500: #2F5BEA;   /* brand primary */
  --cobalt-600: #1F45C7;
  --cobalt-700: #1A37A0;
  --cobalt-800: #182F80;
  --cobalt-900: #162A66;

  /* ─ Accent: Tangerine ──────────────────────────── */
  --tangerine-50:  #FFF1EB;
  --tangerine-100: #FFE0D2;
  --tangerine-200: #FFC1A6;
  --tangerine-300: #FF9C71;
  --tangerine-400: #FF7A45;  /* accent */
  --tangerine-500: #F65C20;
  --tangerine-600: #D9450F;

  /* ─ Ink: warm-cool navy (text + dark surfaces) ────────── */
  --ink-950: #0D1626;
  --ink-900: #14203A;   /* primary text + dark sections */
  --ink-800: #1F2E4D;
  --ink-700: #2E4066;

  /* ─ Sand: warm neutral gray ramp ──────────────────── */
  --sand-50:  #FAF8F4;
  --sand-100: #F3F0E9;
  --sand-200: #E9E4D9;
  --sand-300: #D8D2C4;
  --sand-400: #B6AE9C;
  --sand-500: #8C8676;
  --sand-600: #6B665A;
  --sand-700: #4D4A41;
  --white:    #FFFFFF;

  /* ─ Semantic status ────────────────────────────── */
  --mint-50:   #E7F7F0;
  --mint-500:  #16A975;
  --amber-50:  #FEF4E2;
  --amber-500: #E69412;
  --rose-50:   #FDECEC;
  --rose-500:  #E0443E;

  /* ─ BMBW semantic aliases ─────────────────────────── */

  /* Surfaces */
  --bmbw-base:          var(--sand-50);    /* page bg — warm paper */
  --bmbw-surface:       var(--sand-100);   /* card / sunken bg */
  --bmbw-white:         var(--white);
  --bmbw-dark:          var(--ink-950);    /* deepest dark: hero */
  --bmbw-dark-mid:      var(--ink-900);    /* dark sections, footer */

  /* Text */
  --bmbw-primary:       var(--ink-900);    /* headings */
  --bmbw-body:          var(--ink-800);    /* body copy */
  --bmbw-subtle:        var(--sand-500);   /* captions, meta */
  --bmbw-muted:         var(--sand-600);   /* placeholders, labels */

  /* Brand */
  --bmbw-accent:        var(--cobalt-500); /* primary action blue */
  --bmbw-accent-hover:  var(--cobalt-600);
  --bmbw-accent-active: var(--cobalt-700);
  --bmbw-accent-tint:   var(--cobalt-50);
  --bmbw-accent-soft:   var(--cobalt-100);

  /* Secondary accent */
  --bmbw-amber:         var(--tangerine-400);  /* energy / highlight */
  --bmbw-amber-hover:   var(--tangerine-500);
  --bmbw-amber-tint:    var(--tangerine-50);

  /* Borders */
  --bmbw-border:        var(--sand-200);
  --bmbw-border-mid:    var(--sand-300);

  /* ─ Typography ────────────────────────────────── */
  --bmbw-font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
  --bmbw-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --bmbw-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ─ Type scale ────────────────────────────────── */
  --bmbw-display: clamp(2.75rem, 1.6rem + 5.7vw, 5rem);
  --bmbw-h1:      clamp(2.25rem, 1.5rem + 3.7vw, 3.5rem);
  --bmbw-h2:      clamp(1.75rem, 1.2rem + 2.7vw, 2.5rem);
  --bmbw-h3:      clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
  --bmbw-h4:      1.25rem;
  --bmbw-body-lg: 1.125rem;
  --bmbw-body:    1rem;
  --bmbw-small:   0.875rem;
  --bmbw-caption: 0.75rem;

  /* ─ Spacing (4px base) ──────────────────────────── */
  --bmbw-space-1:   0.25rem;   /* 4  */
  --bmbw-space-2:   0.5rem;    /* 8  */
  --bmbw-space-3:   0.75rem;   /* 12 */
  --bmbw-space-4:   1rem;      /* 16 */
  --bmbw-space-5:   1.5rem;    /* 24 */
  --bmbw-space-6:   2rem;      /* 32 */
  --bmbw-space-8:   3rem;      /* 48 */
  --bmbw-space-10:  5rem;      /* 80 */
  --bmbw-space-12:  7.5rem;    /* 120 */

  /* ─ Border radius ─────────────────────────────── */
  --bmbw-radius-xs:   4px;
  --bmbw-radius-sm:   8px;
  --bmbw-radius-md:   12px;
  --bmbw-radius-lg:   16px;
  --bmbw-radius-xl:   24px;
  --bmbw-radius-2xl:  32px;
  --bmbw-radius-pill: 999px;

  /* ─ Layout ──────────────────────────────────── */
  --bmbw-container:    1200px;
  --bmbw-container-sm: 720px;
  --bmbw-gutter:       clamp(1.25rem, 4vw, 3rem);
  --bmbw-section-y:    7.5rem;   /* 120px */
  --bmbw-section-y-sm: 4.5rem;   /* 72px */

  /* ─ Elevation (warm-tinted, never harsh black) ────────── */
  --bmbw-shadow-xs: 0 1px 2px rgba(20,32,58,.06);
  --bmbw-shadow-sm: 0 1px 2px rgba(20,32,58,.06), 0 2px 6px rgba(20,32,58,.06);
  --bmbw-shadow-md: 0 2px 4px rgba(20,32,58,.05), 0 8px 20px rgba(20,32,58,.08);
  --bmbw-shadow-lg: 0 4px 8px rgba(20,32,58,.06), 0 18px 40px rgba(20,32,58,.12);
  --bmbw-shadow-xl: 0 10px 24px rgba(20,32,58,.10), 0 40px 80px rgba(20,32,58,.16);
  --bmbw-shadow-brand:  0 6px 18px rgba(47,91,234,.35);
  --bmbw-shadow-accent: 0 6px 18px rgba(255,122,69,.35);

  /* ─ Motion ─────────────────────────────────── */
  --bmbw-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --bmbw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bmbw-dur-fast:    120ms;
  --bmbw-dur-base:    200ms;
  --bmbw-dur-slow:    320ms;
  --bmbw-transition:  all var(--bmbw-dur-base) var(--bmbw-ease-out);
}

/* =================================================================
   Base Resets
   ================================================================= */
body {
  font-family: var(--bmbw-font-body);
  font-size: var(--bmbw-body);
  line-height: 1.6;
  color: var(--bmbw-body);
  background-color: var(--bmbw-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bmbw-font-heading);
  color: var(--bmbw-primary);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* =================================================================
   Button System
   ================================================================= */
.bmbw-btn-primary.elementor-button {
  background-color: var(--bmbw-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--bmbw-radius-pill);
  font-family: var(--bmbw-font-body);
  font-weight: 600;
  box-shadow: var(--bmbw-shadow-brand);
  transition: var(--bmbw-transition);
}
.bmbw-btn-primary.elementor-button:hover {
  background-color: var(--bmbw-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(47,91,234,.40);
}
.bmbw-btn-primary.elementor-button:active {
  transform: translateY(0);
  background-color: var(--bmbw-accent-active);
}

.bmbw-btn-ghost.elementor-button {
  background-color: transparent;
  color: var(--bmbw-primary);
  border: 1.5px solid var(--bmbw-border-mid);
  border-radius: var(--bmbw-radius-pill);
  font-family: var(--bmbw-font-body);
  font-weight: 600;
  transition: var(--bmbw-transition);
}
.bmbw-btn-ghost.elementor-button:hover {
  background-color: var(--bmbw-accent-tint);
  border-color: var(--bmbw-accent);
  color: var(--bmbw-accent);
  transform: translateY(-1px);
}

/* Inverse button — for dark sections */
.bmbw-btn-inverse.elementor-button {
  background-color: #ffffff;
  color: var(--ink-900);
  border: none;
  border-radius: var(--bmbw-radius-pill);
  font-family: var(--bmbw-font-body);
  font-weight: 600;
  transition: var(--bmbw-transition);
}
.bmbw-btn-inverse.elementor-button:hover {
  background-color: var(--sand-100);
  transform: translateY(-1px);
}

/* Accent/tangerine button */
.bmbw-btn-accent.elementor-button {
  background-color: var(--bmbw-amber);
  color: #ffffff;
  border: none;
  border-radius: var(--bmbw-radius-pill);
  font-family: var(--bmbw-font-body);
  font-weight: 700;
  box-shadow: var(--bmbw-shadow-accent);
  transition: var(--bmbw-transition);
}
.bmbw-btn-accent.elementor-button:hover {
  background-color: var(--bmbw-amber-hover);
  transform: translateY(-1px);
}

/* =================================================================
   Eyebrow / Overline Labels  (JetBrains Mono)
   ================================================================= */
.bmbw-eyebrow {
  font-family: var(--bmbw-font-mono);
  font-size: var(--bmbw-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bmbw-accent);
}

/* =================================================================
   Value Breakdown — DIY List
   ================================================================= */
.bmbw-diy-list { width: 100%; }
.bmbw-diy-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  gap: 16px;
}
.bmbw-diy-row:last-child { border-bottom: none; }
.bmbw-diy-row span:first-child {
  font-family: var(--bmbw-font-body);
  font-size: 13.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}
.bmbw-diy-row span:last-child {
  font-family: var(--bmbw-font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
  flex-shrink: 0;
}

/* vs_row equal-height boxes */
.elementor-element[data-id="vs_row"] > .e-con-inner,
.elementor-element[data-id="vs_row"] > .elementor-container {
  align-items: stretch;
}

/* Value breakdown CTA on right box */
.bmbw-vs-cta.elementor-button {
  background-color: #FFFFFF !important;
  color: var(--cobalt-600) !important;
  border: none;
  transition: var(--bmbw-transition);
}
.bmbw-vs-cta.elementor-button:hover {
  background-color: var(--cobalt-50) !important;
  color: var(--cobalt-700) !important;
  transform: translateY(-1px);
}

/* =================================================================
   Pricing Toggle
   ================================================================= */
.bmbw-pt-wrap { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:4px; }
.bmbw-pt-switch { position:relative; width:52px; height:28px; background:var(--sand-300); border:none; border-radius:100px; cursor:pointer; padding:0; transition:background .2s ease; flex-shrink:0; }
.bmbw-pt-switch.is-on { background:var(--cobalt-500); }
.bmbw-pt-thumb { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .2s ease; display:block; }
.bmbw-pt-switch.is-on .bmbw-pt-thumb { transform:translateX(24px); }
.bmbw-pt-label { font-family:var(--bmbw-font-body); font-size:14px; font-weight:500; color:var(--sand-600); transition:color .15s; white-space:nowrap; }
.bmbw-pt-label.active { color:var(--ink-900); font-weight:600; }
.bmbw-pt-badge { display:inline-block; background:var(--tangerine-50); color:var(--tangerine-500); font-family:var(--bmbw-font-mono); font-size:10px; font-weight:500; letter-spacing:.03em; padding:2px 7px; border-radius:100px; margin-left:6px; vertical-align:middle; border:1px solid var(--tangerine-300); }

/* =================================================================
   Icon Grid  (2-col icon list)
   ================================================================= */
.bmbw-icon-grid .elementor-icon-list-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.bmbw-icon-grid .elementor-icon-list-item {
  padding: 9px 0;
  border-bottom: 1px solid var(--sand-200);
}
.bmbw-icon-grid .elementor-icon-list-icon {
  background: var(--cobalt-50);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
}
.bmbw-icon-grid .elementor-icon-list-icon i { font-size: 10px !important; line-height: 1; }
.bmbw-icon-grid .elementor-icon-list-text { font-size: 14.5px; color: var(--ink-900); line-height: 1.4; }

@media (max-width: 640px) {
  .bmbw-icon-grid .elementor-icon-list-items { grid-template-columns: 1fr; }
  .bmbw-icon-grid .elementor-icon-list-item { border-bottom: 1px solid var(--sand-200); }
  .elementor-element[data-id="vs_left"], .elementor-element[data-id="vs_right"] {
    width: 100% !important; border-radius: 16px !important;
  }
  .elementor-element[data-id="vs_mid"] { width: 100% !important; padding: 12px 0 !important; }
}

@media (max-width: 767px) {
  .elementor-element[data-id="vs_row"] > .e-con-inner { flex-direction: column !important; }
}