:root{
  --primary:#0E2A47;
  --accent:#12B5C9;
  --bg:#0B1726;
  --text:#E8EEF6;
  --muted:#9FB2C8;
  --card:rgba(255,255,255,0.04);
  --line:rgba(255,255,255,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg) 0%,#0D1F35 100%);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--accent)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

header{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(11,23,38,.6);border-bottom:1px solid var(--line);z-index:100}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
nav a.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
nav a.logo span{font-weight:800;letter-spacing:.2px;color:var(--text)}
nav .menu a{color:var(--muted);text-decoration:none;margin-left:22px;font-weight:600}
nav .menu a:hover{color:var(--text)}
.cta-btn{display:inline-block;padding:12px 18px;border-radius:10px;background:var(--accent);color:#06222A;font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(18,181,201,.25)}
header {
  background-color: #ffffff
}

.hero{padding:86px 0 48px}
.hero .eyebrow{color:var(--accent);text-transform:uppercase;font-weight:800;letter-spacing:.12em}
.hero h1{font-size:clamp(32px,6vw,56px);line-height:1.1;margin:12px 0}
.hero p{color:var(--muted);max-width:680px}
.hero .actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

.section{padding:56px 0}
.section h2{font-size:28px;margin-top:0}
.kicker{color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.badge{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-weight:700;color:var(--muted)}

.process-steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.process-steps .step{position:relative;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.process-steps .step:before{counter-increment:step;content:counter(step);position:absolute;top:-12px;left:-12px;width:32px;height:32px;border-radius:10px;background:var(--accent);color:#06222A;display:grid;place-items:center;font-weight:800}

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.price-card h3{margin:0 0 6px 0}
.price{font-size:26px;font-weight:900;margin:8px 0}
.ul{margin:0;padding-left:18px}
blockquote.testimonial{margin:0;padding:24px;border-left:4px solid var(--accent);background:var(--card);border-radius:10px}

footer{padding:28px 0 40px;color:var(--muted);border-top:1px solid var(--line)}
footer a{color:var(--muted);text-decoration:none}
.small{font-size:13px;color:var(--muted)}

.banner{position:fixed;bottom:16px;left:16px;right:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:12px;align-items:center;z-index:200}
.banner button{margin-left:auto}

table.compare{width:100%;border-collapse:collapse}
table.compare td, table.compare th{border:1px solid var(--line);padding:10px;text-align:left}

/* === Lock header height, keep logo big === */
:root {
  --nav-h: 80px;          /* header height you want */
  --nav-pad-y: -48px;       /* vertical padding inside header */
}

/* Make the header a fixed-height flex bar */
header {
  background:#fff;                     /* optional: white header */
  box-shadow: 0 2px 4px rgba(0,0,0,.05); /* optional: subtle shadow */
}

header .container {
  min-height: var(--nav-h);
  padding: var(--nav-pad-y) 0;         /* control vertical padding */
  display: flex;
  align-items: center;                 /* center content vertically */
}

/* Ensure the <nav> distributes space correctly */
header nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

/* Logo group alignment */
header .logo {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
}

/* Make the image big but NEVER exceed the bar */
header .logo img {
  height: calc(var(--nav-h) - 2 * var(--nav-pad-y)); /* fills the bar */
  max-height: 100%;
  width: auto;
  display:block;
}

/* Prevent the "ScaleBeacon" text from increasing bar height */
header .logo span {
  line-height: 1;     /* no extra vertical expansion */
  display: block;
}

/* Keep menu items from adding extra vertical height */
header .menu a {
  padding: 0 .75rem;  /* horizontal only; no vertical padding */
  line-height: 1.1;   /* tight vertical line height */
}

/* (Optional) If something still pushes height, clamp it hard */
header, header .container, header nav {
  max-height: var(--nav-h);
  overflow: hidden;   /* hide any overflow-y just in case */
}

/* Stack contact form fields vertically */
form.contact {
  display: flex;
  flex-direction: column;
  gap: 12px;              /* space between fields */
  max-width: 640px;       /* optional: keep a nice readable width */
}

form.contact input,
form.contact textarea,
form.contact button {
  width: 100%;
}

/* Optional: tidy the inputs to match your theme */
form.contact input,
form.contact textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
}

/* Optional: keep the button from stretching if you prefer */
form.contact button {
  width: auto;            /* remove this line if you want full-width button */
  align-self: flex-start; /* keeps it left-aligned */
}

@media (max-width: 900px) {
  #why-now .container { grid-template-columns: 1fr !important; }
}

/* Case Studies split */
.cs-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* image a bit wider */
  gap: 28px;
  align-items: center;
}

.cs-media img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid var(--line);
}

.cs-copy .cta-btn { margin-top: 8px; }

@media (max-width: 900px) {
  .cs-split { grid-template-columns: 1fr; }
  .cs-copy { order: 2; }
  .cs-media { order: 1; }
}

.cred-band { 
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.logo-row {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin-top: 10px;
}
.logo-row img {
  height: 28px; filter: grayscale(100%) contrast(1.1) opacity(.8);
}
.logo-row img:hover { filter: grayscale(0%) opacity(1); }

.logo-row img {
  height: 96px;
  filter: grayscale(100%) contrast(1.2) opacity(0.9);
  transition: filter 0.2s ease;
}
.logo-row img:hover {
  filter: grayscale(0%) opacity(1);
}

/* Container: keep it centered with breathing room */
.beacon-section {
  padding: clamp(2rem, 6vw, 5rem) 1rem;
  display: grid;
  place-items: center;
  position: relative;
}

/* Wrapper controls max width and the glow backdrop */
.beacon-wrap {
  position: relative;
  max-width: 1100px;           /* tune as needed */
  width: min(92vw, 1100px);
  margin-inline: auto;
  isolation: isolate;          /* so the pseudo glow stays behind */
}

/* The image itself */
.beacon-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;         /* soften edges to match glass look */
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.35);   /* subtle depth */
  will-change: transform;
}

/* Neon-ish glow behind image (not too heavy) */
.beacon-wrap::before {
  content: "";
  position: absolute;
  inset: -6% -4% -8%;          /* slightly larger than image */
  z-index: -1;
  background:
    radial-gradient(60% 60% at 50% 40%,
      rgba(0, 214, 255, 0.25) 0%,
      rgba(0, 214, 255, 0.08) 35%,
      rgba(0, 0, 0, 0) 70%),
    radial-gradient(50% 50% at 75% 60%,
      rgba(0, 255, 170, 0.25) 0%,
      rgba(0, 255, 170, 0.08) 35%,
      rgba(0, 0, 0, 0) 70%);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
}

/* Optional: slight hover lift for desktop */
@media (hover:hover) and (pointer:fine) {
  .beacon-img {
    transition: transform 300ms ease, box-shadow 300ms ease;
  }
  .beacon-img:hover {
    transform: translateY(-2px);
    box-shadow:
      0 18px 60px rgba(0, 0, 0, 0.42),
      0 0 24px rgba(0, 214, 255, 0.22);
  }
}

.confusion-img {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.confusion-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px; /* match framework cards */
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

/* Glow matches the How it Works framework */
.confusion-img::before {
  content: "";
  position: absolute;
  inset: -6% -6% -8%;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 50% 40%,
      rgba(0, 214, 255, 0.25) 0%,
      rgba(0, 214, 255, 0.08) 35%,
      transparent 70%),
    radial-gradient(50% 50% at 75% 60%,
      rgba(0, 255, 170, 0.25) 0%,
      rgba(0, 255, 170, 0.08) 35%,
      transparent 70%);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
  border-radius: inherit;
}

.glow-beacon {
  position: relative;
  isolation: isolate; /* makes the glow sit behind the image */
  display: inline-block; /* or block if you want full-width */
  max-width: 100%;
}

.glow-beacon img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;           /* match the framework image radius */
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

/* The actual glow behind the image */
.glow-beacon::before {
  content: "";
  position: absolute;
  inset: -6% -6% -8%;            /* slightly larger than the image */
  z-index: -1;
  background:
    radial-gradient(60% 60% at 50% 40%,
      rgba(0, 214, 255, 0.25) 0%,
      rgba(0, 214, 255, 0.08) 35%,
      transparent 70%),
    radial-gradient(50% 50% at 75% 60%,
      rgba(0, 255, 170, 0.25) 0%,
      rgba(0, 255, 170, 0.08) 35%,
      transparent 70%);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
  border-radius: inherit;
}

img.confusion-glow {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;

  /* Base subtle glow (tight around image) */
  filter:
    drop-shadow(0 3px 10px rgba(0,214,255,0.18))   /* teal */
    drop-shadow(0 0 14px rgba(0,255,170,0.14));    /* green */

  transition: filter 300ms ease;
}

/* Hover glow – slightly stronger */
img.confusion-glow:hover {
  filter:
    drop-shadow(0 4px 14px rgba(0,214,255,0.28))
    drop-shadow(0 0 20px rgba(0,255,170,0.22));
}

/* ===============================
   Pricing Page (isolated)
   =============================== */

.pricing-page .pricing-viewport {
  --sb-bg: #0b1220;
  --sb-bg-elev: #111a2e;
  --sb-text: #e6eefc;
  --sb-muted: #9fb1d1;
  --sb-border: rgba(255,255,255,0.08);
  --sb-primary: #0ea5e9;
  --sb-primary-2: #22d3ee;
  --sb-accent: #8b5cf6;
  --sb-success: #22c55e;
  --maxw: 1120px;
  --radius: 18px;
  --radius-lg: 22px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.25);

  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,0.10), rgba(0,0,0,0)) no-repeat,
    linear-gradient(180deg, #0a0f1c 0%, var(--sb-bg) 100%);
  color: var(--sb-text);
}
.pricing-page .pricing-viewport .container {
  width: min(100%, calc(var(--maxw) + 48px));
  margin-inline: auto;
  padding: 24px;
}

/* Intro */
.pricing-page .pricing-intro { padding: 48px 0 16px; text-align: center; }
.pricing-page .pricing-intro h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px;
  background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pricing-page .pricing-intro p {
  color: var(--sb-muted); font-size: clamp(15px, 2.4vw, 18px);
  margin: 0 auto 24px; max-width: 760px;
}
.pricing-page .pricing-intro .cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary-2));
  color: #03101a; font-weight: 700; padding: 14px 20px; border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(34,211,238,0.1), 0 10px 24px rgba(14,165,233,0.35);
  border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-page .pricing-intro .cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 8px rgba(34,211,238,0.12), 0 14px 28px rgba(14,165,233,0.45); }

/* Plans */
.pricing-page .plans { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 36px auto 14px; max-width: var(--maxw); }
@media (min-width: 860px) { .pricing-page .plans { grid-template-columns: 1fr 1fr; } }

.pricing-page .plan-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  outline: 1px solid var(--sb-border); box-shadow: var(--shadow-soft);
  padding: 24px; isolation: isolate;
}
.pricing-page .plan-card::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: radial-gradient(600px 220px at 20% -20%, rgba(14,165,233,0.25), rgba(0,0,0,0));
  filter: blur(12px);
}
.pricing-page .plan-head { display:flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pricing-page .plan-name { font-size: 18px; letter-spacing: .2px; font-weight: 800; }
.pricing-page .badge { font-size: 12px; background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary-2)); color:#021016; padding:6px 10px; border-radius: 999px; font-weight: 800; }

.pricing-page .price { font-size: clamp(26px, 4.2vw, 34px); font-weight: 900; margin: 6px 0 4px; }
.pricing-page .sub { color: var(--sb-muted); font-size: 14px; margin-bottom: 14px; }
.pricing-page .deliverables-title { margin: 0 0 8px; font-size: 15px; letter-spacing: .2px; }

.pricing-page .deliverables { margin: 14px 0 18px; display:grid; gap:10px; padding-left: 0; }
.pricing-page .deliverables li { list-style:none; position: relative; padding-left: 28px; }
.pricing-page .deliverables li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 4px;
  background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary-2));
  box-shadow: 0 0 0 4px rgba(14,165,233,0.1);
}

.pricing-page .plan-cta { display:flex; gap:12px; flex-wrap: wrap; }
.pricing-page .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius: 12px; border:1px solid var(--sb-border); cursor:pointer; font-weight: 700;
  background: rgba(255,255,255,0.04); color: var(--sb-text);
  transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.pricing-page .btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.18); box-shadow: 0 0 40px rgba(34,211,238,0.15); }
.pricing-page .btn-primary { background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary-2)); color:#05202c; border:0; }
.pricing-page .btn-primary:hover { box-shadow: 0 12px 26px rgba(14,165,233,0.32); }

.pricing-page .divider { height: 1px; background: var(--sb-border); margin: 28px 0; }

/* Credibility */
.pricing-page .cred { margin-top: 34px; border-radius: var(--radius-lg); outline: 1px solid var(--sb-border); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)); padding: 26px; }
.pricing-page .cred h2 { font-size: 22px; margin: 0 0 12px; letter-spacing: .2px; }
.pricing-page .cred-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pricing-page .cred-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.pricing-page .panel { background: rgba(255,255,255,0.02); border:1px solid var(--sb-border); border-radius: 16px; padding: 18px; }

/* FAQ */
.pricing-page .faq { margin-top: 34px; }
.pricing-page .faq h2 { font-size: 22px; margin: 0 0 10px; }
.pricing-page .faq details { border:1px solid var(--sb-border); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,0.02); }
.pricing-page .faq details + details { margin-top: 10px; }
.pricing-page .faq summary { cursor: pointer; font-weight: 800; }
.pricing-page .faq p { color: var(--sb-muted); margin: 10px 0 0; }

/* Lead form: stacked layout */
.pricing-page .lead-form { margin: 40px auto; max-width: var(--maxw); }
.pricing-page .lead-form .form-grid {
  display: grid;
  grid-template-columns: 1fr;   /* one column everywhere */
  gap: 16px;
}
/* keep the rest as-is */
.pricing-page .lead-form .field { display: flex; flex-direction: column; gap: 6px; }
.pricing-page .lead-form .field span { font-size: 14px; color: var(--sb-muted); font-weight: 600; }
.pricing-page .lead-form .field-full { grid-column: 1 / -1; }
.pricing-page .lead-form input,
.pricing-page .lead-form select,
.pricing-page .lead-form textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
  border-radius: 12px;
  padding: 12px 14px;
}
.pricing-page .lead-form input::placeholder,
.pricing-page .lead-form textarea::placeholder { color: var(--sb-muted); }
.pricing-page .lead-form input:focus,
.pricing-page .lead-form select:focus,
.pricing-page .lead-form textarea:focus {
  outline: 2px solid rgba(14,165,233,0.35);
  border-color: rgba(14,165,233,0.35);
}
.pricing-page .lead-form .actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.pricing-page .lead-form .hidden { display: none; }

.pricing-page .plans-title {
  margin: 0 0 8px 6px;
  font-size: 16px;
  letter-spacing: .2px;
  color: var(--sb-muted);
  text-transform: uppercase;
}

/* Bonus ribbon inside plan cards */
.pricing-page .bonus {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(34,211,238,0.08), rgba(34,211,238,0.03));
  box-shadow: 0 8px 20px rgba(14,165,233,0.12) inset;
  font-weight: 600;
}
.pricing-page .bonus em { font-style: normal; text-decoration: underline; text-underline-offset: 2px; }
.pricing-page .bonus .value { color: var(--sb-muted); font-weight: 700; margin-left: 6px; }

/* small print */
.pricing-page .small { font-size: 12px; }

/* Make the fine print span across the full plans grid */
.pricing-page .plans .fineprint {
  grid-column: 1 / -1;   /* span all columns */
  margin-top: 6px;
  text-align: left;      /* or center if you prefer */
}

/* (optional) subtle separator so it clearly applies to the whole section */
.pricing-page .plans .fineprint {
  padding-top: 8px;
  border-top: 1px dashed var(--sb-border);
}

/* Anchor the launch section for absolute positioning */
.pricing-page #launch-packages-title { position: relative; }
.pricing-page .plans { position: relative; }

/* Launch image base style */
.pricing-page .launch-art {
  position: absolute;
  top: 0;           /* JS will place exact top */
  left: 8px;        /* small left gutter */
  width: clamp(160px, 24vw, 300px);
  height: auto;
  pointer-events: none;
  z-index: 0;       /* behind the cards/text */
  opacity: 0.85;
  mix-blend-mode: screen;  /* remove if too light on your bg */
}

/* Keep the oval/circular look */
.pricing-page .launch-art.is-blob {
  clip-path: ellipse(48% 43% at 50% 50%);
}
.pricing-page .launch-art.is-round {
  clip-path: none;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255,255,255,0.03);
}

/* Ensure real content sits above the decorative image */
.pricing-page .plans > :not(.launch-art) {
  position: relative;
  z-index: 1;
}

/* Mobile: tuck it back a bit or hide if you prefer */
@media (max-width: 640px) {
  .pricing-page .launch-art { width: clamp(120px, 32vw, 180px); opacity: 0.65; }
  /* Or hide on very small screens:
  .pricing-page .launch-art { display: none; }
  */
}

/* Remove any white card overrides from earlier versions
   (delete the block if you see something like: background:#fff; ...) */
/* main.about-modern .card { ... }  <-- delete this if it sets white */

/* Use your site’s exact card surface + border */
main.about-modern .card--navy {
  background: var(--card);     /* rgba(255,255,255,0.04) */
  border: 1px solid var(--line); /* rgba(255,255,255,0.08) */
  box-shadow: none;            /* let your global depth/glow lead */
}

/* If any About cards are missing .card--navy, you can force all About cards to match: */
main.about-modern .card {
  background: var(--card);
  border: 1px solid var(--line);
}

/* ===== About page: force cards to use your navy surface ===== */
/* Targets only sections that exist on /about/ so other pages are untouched */
#about-pillars .card,
#about-impact .card,
#about-services .card,
#about-values .card,
#about-cta .card,
#about-local-ads .card {
  background: var(--card);        /* from your theme (rgba(255,255,255,.04)) */
  border: 1px solid var(--line);  /* from your theme (rgba(255,255,255,.08)) */
  box-shadow: none;               /* let your global depth/glow decide */
}

/* If any card has its own hard-coded white background elsewhere,
   this higher-specificity rule will win. Remove if not needed. */
body #main #about-pillars .card,
body #main #about-impact .card,
body #main #about-services .card,
body #main #about-values .card,
body #main #about-cta .card,
body #main #about-local-ads .card {
  background: var(--card);
  border-color: var(--line);
}

/* Last resort (only if something still overrides): uncomment the !important version
#about-pillars .card,
#about-impact .card,
#about-services .card,
#about-values .card,
#about-cta .card,
#about-local-ads .card {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
*/

/* ===== About page — APPROACH (creative stepper) ===== */
#about-process.approach-beacon { position: relative; }

#about-process.approach-beacon .kicker { margin-bottom: 8px; }
#about-process.approach-beacon .section-lead { margin-bottom: 22px; }

/* Accent picks up site vars if present, else falls back to blue→teal */
#about-process.approach-beacon {
  --accent1: var(--accent-1, #2563eb);
  --accent2: var(--accent-2, #06b6d4);
}

/* Grid: [step][connector][step][connector]… */
#about-process.approach-beacon .beacon-stepper{
  display:grid;
  grid-template-columns: 1fr 64px 1fr 64px 1fr 64px 1fr 64px 1fr;
  gap: 16px;
  align-items:center;
}

/* Connector between steps */
#about-process.approach-beacon .connector{
  height:4px; border-radius:999px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  opacity:.9;
}

/* Step cards — navy surface to match the rest of the site */
#about-process.approach-beacon .step{
  background: var(--card);               /* from your theme */
  border: 1px solid var(--line);         /* from your theme */
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
}

#about-process.approach-beacon .step:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--line), white 16%);
  box-shadow: 0 10px 28px rgba(2,8,23,.35);
}

/* Number badge with gradient ring */
#about-process.approach-beacon .badge{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  font-weight:800; font-size:14px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.12), transparent 66%),
    linear-gradient(90deg, var(--accent1), var(--accent2));
  color:#fff;
  box-shadow: 0 6px 14px rgba(2,8,23,.35);
  margin-bottom: 10px;
}

/* Step headings tighten up */
#about-process.approach-beacon .step h5{
  margin: 6px 0 6px;
  font-size: 15px; letter-spacing:.02em;
}

/* Step small text remains readable on dark */
#about-process.approach-beacon .step small{
  opacity:.9;
}

/* Mobile / tablet: stack the steps, hide connectors */
@media (max-width: 980px){
  #about-process.approach-beacon .beacon-stepper{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #about-process.approach-beacon .connector{ display:none; }
}

/* Optional: add a soft background “signal” behind the section */
#about-process.approach-beacon::before{
  content:"";
  position:absolute; inset:-20px 0 auto 0; height:180px;
  background:
    radial-gradient(600px 200px at 20% 40%, color-mix(in oklab, var(--accent1), transparent 82%), transparent 60%),
    radial-gradient(600px 220px at 80% 60%, color-mix(in oklab, var(--accent2), transparent 82%), transparent 60%);
  pointer-events:none; filter: blur(0.2px);
  opacity:.35;
}

/* Lottie blob shares the same look/size as your video blob */
.lottie-blob{
  --size: clamp(260px, 36vw, 520px);
  position: relative; width: var(--size); height: var(--size);
  border-radius: 56% 44% 57% 43% / 48% 52% 48% 52%;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  animation: blobMorph 12s ease-in-out infinite alternate;
}
.lottie-blob .glow{
  position: absolute; inset: -8%;
  background: radial-gradient(closest-side, color-mix(in lab, var(--sb-accent), transparent 20%), transparent 70%),
              radial-gradient(closest-side, color-mix(in lab, var(--sb-accent-2), transparent 15%), transparent 72%);
  filter: blur(48px); z-index: -1; animation: glowPulse 5.5s ease-in-out infinite;
}
.lottie{ width:100%; height:100%; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .lottie-blob, .lottie-blob .glow{ animation: none; }
}

/* === ScaleBeacon Logo Animation (pure CSS/SVG) === */
:root{
  --sb-bg: #0b1224;
  --sb-ink: #e6eefc;
  --sb-ink-dim: #c9d5ef;
  --sb-accent: #27c4b5;
  --sb-accent-2: #4ea1ff;
  --sb-tempo: 1;          /* 0.8 = calmer, 1.2 = more energy */
}

.beacon-blob{
  --size: clamp(260px, 36vw, 520px);
  position: relative; width: var(--size); height: var(--size);
  border-radius: 56% 44% 57% 43% / 48% 52% 48% 52%;
  overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  animation: blobMorph calc(12s / var(--sb-tempo)) ease-in-out infinite alternate;
  isolation: isolate;
}

.beacon-blob .glow{
  position: absolute; inset: -10%;
  background:
    radial-gradient(closest-side, color-mix(in lab, var(--sb-accent), transparent 25%), transparent 70%),
    radial-gradient(closest-side, color-mix(in lab, var(--sb-accent-2), transparent 20%), transparent 72%);
  filter: blur(42px);
  z-index: -1;
  animation: glowPulse calc(6s / var(--sb-tempo)) ease-in-out infinite;
}

.beacon-svg{
  position:absolute; inset:0; width:100%; height:100%;
  filter: contrast(115%) saturate(110%);
  mix-blend-mode: screen;
}

/* Pulsing rings */
.rings .ring{
  transform-origin: center;
  opacity: 0;
  stroke-linecap: round;
  animation: ringPulse calc(4.8s / var(--sb-tempo)) ease-out infinite;
}
.rings .ring:nth-child(1){ animation-delay: 0s; }
.rings .ring:nth-child(2){ animation-delay: .6s; }
.rings .ring:nth-child(3){ animation-delay: 1.2s; }
.rings .ring:nth-child(4){ animation-delay: 1.8s; }
.rings .ring:nth-child(5){ animation-delay: 2.4s; }

@keyframes ringPulse{
  0%   { transform: scale(.30); opacity: 0;   stroke-width: 3; }
  10%  { opacity: .95; }
  55%  { opacity: .6; }
  100% { transform: scale(5.8); opacity: 0;  stroke-width: 1; }
}

/* Orbiters */
.orbit{ transform-origin: 100px 100px; }
.orbit-a{
  animation: orbitRotateA calc(9s / var(--sb-tempo)) linear infinite;
}
.orbit-b{
  animation: orbitRotateB calc(12s / var(--sb-tempo)) linear infinite reverse;
}
.orbit-a .orb{ transform: translateX(36%); }
.orbit-b .orb{ transform: translateX(52%); opacity: .9; }

@keyframes orbitRotateA{ to{ transform: rotate(360deg); } }
@keyframes orbitRotateB{ to{ transform: rotate(360deg); } }

/* Logo */
.beacon-logo{
  width: 30%;
  min-width: 84px;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.beacon-logo.on-dark{
  /* If your logo is dark on a dark bg, invert to white */
  filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* Sweep highlight (subtle moving sheen) */
.sweep{
  position:absolute; inset:-2%;
  background:
    conic-gradient(from 0deg,
      transparent 0 70%,
      rgba(255,255,255,.08) 76%,
      transparent 84% 100%);
  mix-blend-mode: overlay;
  animation: sweepSpin calc(10s / var(--sb-tempo)) linear infinite;
  pointer-events:none;
}
@keyframes sweepSpin{ to{ transform: rotate(360deg); } }

/* Blob + glow motions (reuse from earlier hero) */
@keyframes blobMorph{
  0%   { border-radius: 56% 44% 57% 43% / 48% 52% 48% 52%; transform: rotate(0deg); }
  100% { border-radius: 42% 58% 40% 60% / 60% 42% 58% 40%; transform: rotate(3deg); }
}
@keyframes glowPulse{
  0%,100%{ opacity: .65; transform: scale(.98); }
  50%    { opacity: .9;  transform: scale(1.02); }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .beacon-blob, .beacon-blob .glow, .rings .ring, .orbit-a, .orbit-b, .sweep{
    animation: none !important;
  }
}
/* === /ScaleBeacon Logo Animation === */

/* === Landing hero (no header/footer; full-screen center) === */
:root{
  --sb-bg: #0b1224;         /* deep navy */
  --sb-ink: #e6eefc;        /* light ink */
  --sb-ink-dim: #c9d5ef;
  --sb-accent: #27c4b5;     /* teal */
  --sb-accent-2: #4ea1ff;   /* blue accent */
  --sb-tempo: 1.05;         /* 1 = default energy; up for more */
}

/* Hide site chrome on this page */
body.landing header,
body.landing footer { display: none !important; }

/* Full-viewport centered hero */
.home-hero{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 600px at 85% 20%, rgba(39,196,181,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 80%, rgba(78,161,255,.16), transparent 60%),
    var(--sb-bg);
  color: var(--sb-ink);
  padding: clamp(32px, 4vw, 56px);
  isolation: isolate;
}

.hero-inner{
  width: min(1200px, 92vw);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  justify-items: center;
}
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; text-align: center; }
}

.kicker{
  letter-spacing:.04em; text-transform: uppercase; font-size:.9rem;
  color: var(--sb-ink-dim); margin:0 0 8px;
}
.home-hero h1{ font-size: clamp(30px, 5.6vw, 64px); line-height:1.06; margin:0 0 14px; }
.home-hero .subhead{ font-size: clamp(16px, 2.1vw, 20px); color: var(--sb-ink-dim); margin:0 0 22px; }
.nowrap{ white-space: nowrap; }

.cta-row{ display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 999px; text-decoration:none; font-weight:700;
  border:1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn:focus-visible{ outline:3px solid color-mix(in lab, var(--sb-accent), white 25%); outline-offset:2px; }
.btn-primary{
  background: linear-gradient(90deg, var(--sb-accent), var(--sb-accent-2));
  color:#071021;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 10px 30px rgba(39,196,181,.35); }
.btn-outline{
  background: transparent; color: var(--sb-ink);
  border-color: color-mix(in lab, var(--sb-ink), transparent 70%);
}
.btn-outline:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }

.hero-visual{ display:grid; place-items:center; }

/* Blob container (continuous morph) */
.beacon-blob{
  --size: clamp(300px, 40vw, 620px);  /* bigger blob */
  position: relative; width: var(--size); height: var(--size);
  border-radius: 56% 44% 57% 43% / 48% 52% 48% 52%;
  overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  animation: blobMorph 22s ease-in-out infinite; /* continuous (no alternate) */
  isolation: isolate;
}

/* Larger logo in blob */
.beacon-logo{
  width: 50%;                /* was ~30% before */
  min-width: 140px;
  z-index: 1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}
.beacon-logo.on-dark{
  /* If your logo is dark on dark bg, invert it; remove class if not needed */
  filter: brightness(0) invert(1) drop-shadow(0 8px 22px rgba(0,0,0,.35));
}

/* Animated ambience */
.beacon-blob .glow{
  position: absolute; inset: -10%;
  background:
    radial-gradient(closest-side, color-mix(in lab, var(--sb-accent), transparent 25%), transparent 70%),
    radial-gradient(closest-side, color-mix(in lab, var(--sb-accent-2), transparent 20%), transparent 72%);
  filter: blur(46px);
  z-index: -1;
  animation: glowPulse calc(6s / var(--sb-tempo)) ease-in-out infinite;
}
.beacon-svg{ position:absolute; inset:0; width:100%; height:100%; filter: contrast(115%) saturate(110%); mix-blend-mode: screen; }
.rings .ring{
  transform-origin:center; opacity:0; stroke-linecap:round;
  animation: ringPulse calc(4.8s / var(--sb-tempo)) ease-out infinite;
}
.rings .ring:nth-child(2){ animation-delay:.6s; }
.rings .ring:nth-child(3){ animation-delay:1.2s; }
.rings .ring:nth-child(4){ animation-delay:1.8s; }
.rings .ring:nth-child(5){ animation-delay:2.4s; }

@keyframes ringPulse{
  0%   { transform: scale(.30); opacity: 0;   stroke-width: 3; }
  10%  { opacity: .95; }
  55%  { opacity: .6; }
  100% { transform: scale(6.2); opacity: 0;  stroke-width: 1; }
}
.orbit{ transform-origin:100px 100px; }
.orbit-a{ animation: orbitRotateA calc(9s / var(--sb-tempo)) linear infinite; }
.orbit-b{ animation: orbitRotateB calc(12s / var(--sb-tempo)) linear infinite reverse; }
.orbit-a .orb{ transform: translateX(36%); }
.orbit-b .orb{ transform: translateX(52%); opacity: .9; }
@keyframes orbitRotateA{ to{ transform: rotate(360deg); } }
@keyframes orbitRotateB{ to{ transform: rotate(360deg); } }

/* Continuous multi-shape morph (no alternate, smooth loop) */
@keyframes blobMorph{
  0%   { border-radius: 56% 44% 57% 43% / 48% 52% 48% 52%; transform: rotate(0deg); }
  20%  { border-radius: 60% 40% 50% 50% / 42% 58% 48% 52%; transform: rotate(1deg); }
  40%  { border-radius: 44% 56% 62% 38% / 55% 45% 60% 40%; transform: rotate(2deg); }
  60%  { border-radius: 58% 42% 40% 60% / 62% 38% 44% 56%; transform: rotate(3deg); }
  80%  { border-radius: 48% 52% 46% 54% / 40% 60% 42% 58%; transform: rotate(4deg); }
  100% { border-radius: 56% 44% 57% 43% / 48% 52% 48% 52%; transform: rotate(5deg); }
}

/* Ambient sweep & glow pulse */
.sweep{
  position:absolute; inset:-2%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.08) 76%, transparent 84% 100%);
  mix-blend-mode: overlay; pointer-events:none;
  animation: sweepSpin calc(10s / var(--sb-tempo)) linear infinite;
}
@keyframes sweepSpin{ to{ transform: rotate(360deg); } }

@keyframes glowPulse{
  0%,100%{ opacity:.65; transform: scale(.98); }
  50%    { opacity:.9;  transform: scale(1.02); }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .beacon-blob, .beacon-blob .glow, .rings .ring, .orbit-a, .orbit-b, .sweep{
    animation: none !important;
  }
}
/* === /Landing hero === */

/* --- Mobile/Safari blob clipping fixes --- */

/* 1) Force proper clipping on iOS Safari */
.beacon-blob{
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* solid mask to respect border-radius */
  mask-image: radial-gradient(white, black);
  contain: paint;
  will-change: border-radius, transform;
}

/* 2) Make all animated layers inherit the blob’s rounded shape */
.beacon-svg,
.beacon-blob .sweep,
.beacon-blob .glow{
  border-radius: inherit;
  overflow: hidden;
}

/* 3) iOS sometimes draws a square when drop-shadow is applied to SVG <img>.
      Remove the filter on small screens to avoid the boxy artifact. */
@media (max-width: 900px){
  .beacon-logo{
    filter: none; /* keeps your real colors; avoids square artifact */
  }
  .beacon-blob{
    --size: min(78vw, 560px); /* keeps proportions tidy on small screens */
  }
}

/* ===== ScaleBeacon Hero + Switcher ===== */
:root{
  --sb-navy:#0b1730;
  --sb-navy-2:#0f1f3e;
  --sb-teal:#07e0c4;
  --sb-blue:#1a8cff;
  --sb-text:#e6eefc;
  --sb-muted:#9fb2d9;
}

.sb-container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Hero */
.sb-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background: radial-gradient(1200px 900px at 15% 25%, rgba(7,224,196,.18), transparent 60%),
              radial-gradient(1000px 700px at 85% 20%, rgba(26,140,255,.15), transparent 60%),
              linear-gradient(180deg, var(--sb-navy), var(--sb-navy-2));
  color:var(--sb-text);
  min-height:76vh; display:flex; align-items:center;
  padding:88px 0 104px; /* keeps space below for visual glow */
}
.sb-hero__bg{
  position:absolute; inset:-15%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.08), transparent 60%) 20% 35% / 800px 800px no-repeat,
    conic-gradient(from 0deg at 20% 35%, rgba(7,224,196,.25), rgba(26,140,255,.25), transparent 70%);
  filter:blur(12px) saturate(120%);
  animation:sb-spin 36s linear infinite;
}
@keyframes sb-spin{ to{ transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce){
  .sb-hero__bg{ animation:none }
}

.sb-eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--sb-muted);margin-bottom:.75rem}
.sb-hero__title{font-size:clamp(2rem,4.8vw,3.6rem);line-height:1.1;margin:0 0 10px}
.sb-hero__sub{max-width:62ch;opacity:.92;margin:0 0 20px}
.sb-cta-row{display:flex;gap:12px;flex-wrap:wrap}

.sb-btn{display:inline-block;border:1px solid rgba(255,255,255,.2);padding:.85rem 1.1rem;border-radius:999px;text-decoration:none;color:var(--sb-text);font-weight:600}
.sb-btn--primary{background:var(--sb-teal);color:var(--sb-navy);border-color:transparent}
.sb-btn--primary:hover{opacity:.95;transform:translateY(-1px)}
.sb-btn--ghost:hover{background:rgba(255,255,255,.08)}

/* Switcher wrapper (background shifts by active tab) */
.sb-switcher{
  background: linear-gradient(180deg, #0f1f3e 0%, #0b1730 100%);
  color:var(--sb-text); padding:38px 0 64px; position:relative; overflow:hidden;
}
.sb-switcher::before{
  content:""; position:absolute; inset:-10%; pointer-events:none; opacity:.5;
  background:
    radial-gradient(900px 700px at 15% 20%, rgba(7,224,196,.15), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(26,140,255,.12), transparent 60%);
  transition:opacity .4s ease, transform .6s ease;
}
.sb-switcher[data-active="ads"]::before{ transform:translateY(-6px) scale(1.02); opacity:.65 }

/* Tabs */
.sb-tabs{display:flex;gap:8px;margin-bottom:18px}
.sb-tab{
  appearance:none; background:rgba(255,255,255,.06); color:var(--sb-text);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.6rem .95rem;
  cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:.4rem
}
.sb-tab.is-active{ background:var(--sb-teal); color:var(--sb-navy); border-color:transparent }
.sb-tab:focus-visible{ outline:2px solid var(--sb-blue); outline-offset:2px }

/* Panels */
.sb-panel{ margin-top:10px }
.sb-panel[hidden]{ display:none }

.sb-panel__grid{
  display:grid; gap:24px; align-items:center;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 900px){
  .sb-panel__grid{ grid-template-columns: 1fr; }
}

.sb-panel__copy h2{font-size:clamp(1.4rem,3.2vw,2rem);margin:0 0 .6rem}
.sb-list{margin:0 0 16px;padding-left:1.1em;opacity:.95}
.sb-list li{margin:.25rem 0}

/* Simple motion visualizers */
.sb-panel__viz{min-height:220px;display:flex;align-items:center;justify-content:center}
.sb-viz{position:relative; width:min(520px,92%); height:220px; border-radius:20px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); overflow:hidden}
.sb-viz::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(500px 220px at 100% 0%, rgba(26,140,255,.12), transparent 60%);
}

/* Launch: rising bars */
.sb-viz--launch{display:grid;place-items:end center; padding:20px}
.sb-pip{width:46px;background:linear-gradient(180deg, rgba(7,224,196,.9), rgba(26,140,255,.85)); border-radius:10px}
.sb-pip--1{height:50px; animation:rise 3.6s ease-in-out infinite}
.sb-pip--2{height:88px; animation:rise 3.6s .25s ease-in-out infinite}
.sb-pip--3{height:132px; animation:rise 3.6s .5s ease-in-out infinite}
@keyframes rise{ 0%,100%{transform:translateY(6px)} 50%{transform:translateY(-6px)} }

/* Ads: pulsing pings */
.sb-viz--ads{background:radial-gradient(300px 180px at 50% 50%, rgba(7,224,196,.12), transparent 60%)}
.sb-ping{
  position:absolute; width:18px;height:18px;border-radius:50%; background:var(--sb-teal);
  box-shadow:0 0 0 0 rgba(7,224,196,.35);
  animation:ping 2.8s ease-out infinite;
}
.sb-ping--a{left:18%; top:54%}
.sb-ping--b{left:56%; top:28%; animation-delay:.6s}
.sb-ping--c{left:78%; top:66%; animation-delay:1.2s}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(7,224,196,.35)}
  70%{box-shadow:0 0 0 30px rgba(7,224,196,0)}
  100%{box-shadow:0 0 0 0 rgba(7,224,196,0)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sb-pip,.sb-ping,.sb-hero__bg,.sb-switcher::before{ animation:none; }
}

/* Typography niceties on dark */
.sb-switcher h2, .sb-hero h1, .sb-hero p, .sb-list{ text-wrap:pretty }

/* --- Hero alignment & margins (override) --- */

/* Ensure the hero content sits inside your site's normal margins */
.sb-hero .container,
.sb-topbar .container,
#sb-swap.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Left-align everything in the hero */
.sb-hero__content { text-align: left; }

/* Make sure CTAs don’t center themselves */
.sb-hero .cta-row {
  display: flex;           /* in case earlier CSS changed it */
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;   /* <-- key: left alignment */
}

/* Tight vertical rhythm, but left-aligned spacing */
.sb-hero .kicker { margin: 0 0 4px; }
.sb-hero__title { margin: 0 0 6px; }
.sb-hero__sub   { margin: 0 0 8px; }

/* Safety: if you still have older markup with .sb-container, keep it aligned too */
.sb-hero .sb-container { margin: 0 auto; padding: 0 20px; text-align: left; }

/* === Left-align logo + hero to match site content === */

/* Ensure the topbar (logo) and hero use the site's container spacing */
.sb-topbar .container,
.sb-hero .container,
#sb-swap.container,
.sb-hero__content.container,
.sb-hero__content.sb-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;   /* match your site's container gutter */
  padding-right: 20px;  /* adjust if your site uses a different gutter */
  /* If your .container already sets a max-width, you can omit the next line */
  /* max-width: 1200px; */
}

/* Force left alignment (in case any global rule was centering the hero) */
.sb-topbar,
.sb-hero,
.sb-hero__content {
  text-align: left;
}

/* Make sure hero text blocks are left-aligned and not auto-centered anywhere */
.sb-hero .kicker,
.sb-hero__title,
.sb-hero__sub {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* Keep the CTAs left-aligned with even spacing */
.sb-hero .cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; /* <- key */
}

/* Safety: if any older style targeted .sb-container specifically, keep it aligned too */
.sb-hero .sb-container { 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: 20px; 
  padding-right: 20px; 
  text-align: left; 
}

/* === FORCE left alignment & shared gutters for logo + hero === */
.sb-topbar .container,
.sb-hero .container,
#sb-swap.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;  /* matches your .container gutters */
  padding-right: 20px;
  max-width: 1100px;   /* matches your .container max-width */
}

.sb-hero,
.sb-hero__content,
.sb-hero .kicker,
.sb-hero__title,
.sb-hero__sub { text-align: left; margin-left: 0; margin-right: 0; }

/* Keep buttons left */
.sb-hero .cta-row { justify-content: flex-start; }

.sb-topbar { overflow: visible; } /* ensure no clipping */
.sb-topbar__logo{
  transform: scale(1.15);         /* tweak 1.05–1.35 to taste */
  transform-origin: left top;     /* grows from the top-left */
}

/* ===== Pricing: 4-Quadrant Layout ===== */
.pricing-page .plans--quad .quad-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "title tr"
    "bl    br";
  gap:24px;
  align-items:start;
}

.pricing-page .plans--quad .plans-title.quad-title{
  grid-area:title;
  text-align:left;
  margin:0;
}

.pricing-page .plans--quad .card-tr{ grid-area:tr; }
.pricing-page .plans--quad .card-bl{ grid-area:bl; }
.pricing-page .plans--quad .card-br{ grid-area:br; }

/* Make cards fill their quadrant nicely */
.pricing-page .plans--quad .plan-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Responsive stacking: title first, then each card */
@media (max-width: 900px){
  .pricing-page .plans--quad .quad-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "tr"
      "bl"
      "br";
  }
}

/* ===== Pricing: 4-Quadrant Layout ===== */
.pricing-page .plans--quad .quad-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "title tr"
    "bl    br";
  gap:24px;
  align-items:start;
}

.pricing-page .plans--quad .plans-title.quad-title{
  grid-area:title;
  text-align:left;
  margin:0;
}

.pricing-page .plans--quad .card-tr{ grid-area:tr; }
.pricing-page .plans--quad .card-bl{ grid-area:bl; }
.pricing-page .plans--quad .card-br{ grid-area:br; }

/* Make cards stretch nicely within their quadrant */
.pricing-page .plans--quad .plan-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Mobile: stack sensibly (title → TR → BL → BR) */
@media (max-width: 900px){
  .pricing-page .plans--quad .quad-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "tr"
      "bl"
      "br";
  }
}

/* ===== Pricing: 4-Quadrant Layout ===== */
.pricing-page .plans--quad .quad-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "title tr"
    "bl    br";
  gap:24px;
  align-items:start;
}

.pricing-page .plans--quad .plans-title.quad-title{
  grid-area:title;
  text-align:left;
  margin:0;
}

.pricing-page .plans--quad .card-tr{ grid-area:tr; }
.pricing-page .plans--quad .card-bl{ grid-area:bl; }
.pricing-page .plans--quad .card-br{ grid-area:br; }

/* Make cards fill their quadrant nicely */
.pricing-page .plans--quad .plan-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Ensure plan cards look like "cards" even if base styles vary */
.pricing-page .plan-card{
  background:#fff;
  color:#0b1730;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:20px;
}

/* Responsive stacking: title → TR → BL → BR */
@media (max-width: 900px){
  .pricing-page .plans--quad .quad-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "tr"
      "bl"
      "br";
  }
}