: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";
  }
}

/* ==== FIX: Pricing when embedded into homepage (no body.pricing-page) ==== */
/* Scope all pricing selectors to EITHER body.pricing-page OR the in-page container .pricing-viewport */
:is(.pricing-page, .pricing-viewport) .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;
}
:is(.pricing-page, .pricing-viewport) .plans--quad .plans-title.quad-title{
  grid-area: title;
  text-align: left;
  margin: 0;
}
:is(.pricing-page, .pricing-viewport) .plans--quad .card-tr{ grid-area: tr; }
:is(.pricing-page, .pricing-viewport) .plans--quad .card-bl{ grid-area: bl; }
:is(.pricing-page, .pricing-viewport) .plans--quad .card-br{ grid-area: br; }

/* Use your dark “glass” card look (overrides the stray white-card rule near the bottom) */
:is(.pricing-page, .pricing-viewport) .plan-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  outline: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 24px;
  color: inherit;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

/* Space between the two 4-quadrant pricing sections */
:is(.pricing-page, .pricing-viewport) .plans--quad + .plans--quad {
  margin-block-start: clamp(28px, 5vw, 72px); /* adjust to taste */
}

/* (Optional) subtle divider line above the second block */
:is(.pricing-page, .pricing-viewport) .plans--quad + .plans--quad {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.10); /* switch to rgba(0,0,0,0.08) on light bg */
}

/* ===== About: morphing blob hero (works standalone + when embedded) ===== */

/* Layout grid */
.about-modern .about-hero__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 980px){
  .about-modern .about-hero__grid{ grid-template-columns: 1fr; }
}

/* Blob container on the right */
.about-modern .hero-media{ margin: 0; }
.about-modern .hero-media .blob{
  max-width: 420px;
  width: 100%;
  margin-left: auto;                /* push to the right edge */
  display: block;
  overflow: hidden;
  /* starting organic radius; animation below will morph it */
  border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
  transform: rotate(2deg);
  box-shadow: 0 16px 40px rgba(2,8,23,.25);
  will-change: border-radius, transform;
  animation: sb-blob-morph 14s ease-in-out infinite;
}
.about-modern .hero-media .blob img{
  width: 100%;
  height: auto;
  display: block;
}

/* Gentle, continual morph of the blob shape (and a tiny rock) */
@keyframes sb-blob-morph {
  0% {
    border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
    transform: rotate(2deg);
  }
  25% {
    border-radius: 53% 47% 65% 35% / 45% 55% 35% 65%;
    transform: rotate(1deg);
  }
  50% {
    border-radius: 62% 38% 45% 55% / 53% 47% 57% 43%;
    transform: rotate(-1deg);
  }
  75% {
    border-radius: 55% 45% 52% 48% / 48% 52% 44% 56%;
    transform: rotate(0deg);
  }
  100% {
    border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
    transform: rotate(2deg);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-modern .hero-media .blob{
    animation: none;
  }
}

/* === About page: morphing blob image (standalone + embedded) === */
:is(.about-modern, #main.about-modern) .about-hero__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 980px){
  :is(.about-modern, #main.about-modern) .about-hero__grid{
    grid-template-columns: 1fr;
  }
}

/* Blob container on the right */
:is(.about-modern, #main.about-modern) .hero-media{ margin: 0; }

/* The actual blob */
:is(.about-modern, #main.about-modern) .hero-media .blob{
  /* Keep it tasteful on desktop; much smaller on mobile */
  width: clamp(220px, 32vw, 380px);
  aspect-ratio: 1;               /* square box we’ll morph into an organic blob */
  margin-left: auto;             /* pushes it to the right column edge */
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
  box-shadow: 0 16px 40px rgba(2,8,23,.25);
  transform: rotate(2deg);
  will-change: border-radius, transform;
  animation: aboutBlobMorph 16s ease-in-out infinite;
  /* iOS/Safari: ensure rounded clipping is honored during animation */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}

/* Make the image fill the blob (and crop cleanly) */
:is(.about-modern, #main.about-modern) .hero-media .blob img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Continual, organic morph */
@keyframes aboutBlobMorph{
  0%   { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
  25%  { border-radius: 53% 47% 65% 35% / 45% 55% 35% 65%; transform: rotate(1deg); }
  50%  { border-radius: 62% 38% 45% 55% / 53% 47% 57% 43%; transform: rotate(0deg); }
  75%  { border-radius: 55% 45% 52% 48% / 48% 52% 44% 56%; transform: rotate(-1deg); }
  100% { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  :is(.about-modern, #main.about-modern) .hero-media .blob{ animation: none; }
}

/* On small screens, center the figure if it feels nicer */
@media (max-width: 980px){
  :is(.about-modern, #main.about-modern) .hero-media .blob{
    margin-left: 0;
    margin-inline: auto;
    width: clamp(200px, 60vw, 320px);
  }
}

/* === About page: morphing blob image (standalone + embedded) === */
:is(body.about-modern, #main.about-modern) .about-hero__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 3.5vw, 42px);
  align-items:center;
}
@media (max-width: 980px){
  :is(body.about-modern, #main.about-modern) .about-hero__grid{
    grid-template-columns: 1fr;
  }
}

/* Blob container (right column) */
:is(body.about-modern, #main.about-modern) .hero-media{ margin:0; }

/* The blob itself */
:is(body.about-modern, #main.about-modern) .hero-media .blob{
  width: clamp(220px, 32vw, 380px);  /* <- adjust this to taste */
  aspect-ratio: 1;                   /* perfect square box to morph */
  margin-left: auto;                 /* push to right edge */
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
  box-shadow: 0 16px 40px rgba(2,8,23,.25);
  transform: rotate(2deg);
  animation: aboutBlobMorph 16s ease-in-out infinite;
  will-change: border-radius, transform;
  /* Safari/iOS: ensure rounded clipping during animation */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
  contain: paint;
}

/* Make the image fill the blob cleanly */
:is(body.about-modern, #main.about-modern) .hero-media .blob img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Continual organic morph */
@keyframes aboutBlobMorph{
  0%   { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
  25%  { border-radius: 53% 47% 65% 35% / 45% 55% 35% 65%; transform: rotate(1deg); }
  50%  { border-radius: 62% 38% 45% 55% / 53% 47% 57% 43%; transform: rotate(0deg); }
  75%  { border-radius: 55% 45% 52% 48% / 48% 52% 44% 56%; transform: rotate(-1deg); }
  100% { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :is(body.about-modern, #main.about-modern) .hero-media .blob{ animation: none; }
}

/* === About page: morphing blob image (standalone + embedded) === */
/* Works whether the class sits on <body> (standalone) or on <main> (embedded) */
:is(body.about-modern, #main.about-modern) .about-hero__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 3.5vw, 42px);
  align-items: center;
}
@media (max-width: 980px){
  :is(body.about-modern, #main.about-modern) .about-hero__grid{
    grid-template-columns: 1fr;
  }
}

/* Keep the figure’s default margins tight */
:is(body.about-modern, #main.about-modern) .hero-media{ margin: 0; }

/* The blob wrapper */
:is(body.about-modern, #main.about-modern) .hero-media .blob{
  width: clamp(200px, 28vw, 340px);  /* <= smaller max to avoid "huge" photo */
  aspect-ratio: 1;                   /* square box that we morph into an organic blob */
  margin-left: auto;                 /* push it to the right column edge */
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
  box-shadow: 0 16px 40px rgba(2,8,23,.25);
  transform: rotate(2deg);
  animation: aboutBlobMorph 16s ease-in-out infinite;
  will-change: border-radius, transform;
  /* iOS/Safari – ensure rounded clipping during animation */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}

/* Make the image fill the shape and crop cleanly */
:is(body.about-modern, #main.about-modern) .hero-media .blob img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Continuous organic morph (gentle) */
@keyframes aboutBlobMorph{
  0%   { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
  25%  { border-radius: 53% 47% 65% 35% / 45% 55% 35% 65%; transform: rotate(1deg); }
  50%  { border-radius: 62% 38% 45% 55% / 53% 47% 57% 43%; transform: rotate(0deg); }
  75%  { border-radius: 55% 45% 52% 48% / 48% 52% 44% 56%; transform: rotate(-1deg); }
  100% { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  :is(body.about-modern, #main.about-modern) .hero-media .blob{ animation: none; }
}

/* === About page: morphing blob (standalone + embedded) === */
/* Works whether .about-modern is on <body> (standalone) or on <main> (embedded) */
:is(body.about-modern, #main.about-modern) .about-hero__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;      /* copy left, blob right */
  gap: clamp(16px, 3.5vw, 36px);
  align-items:center;
}
@media (max-width: 980px){
  :is(body.about-modern, #main.about-modern) .about-hero__grid{ grid-template-columns: 1fr; }
}

/* Keep the figure tight */
:is(body.about-modern, #main.about-modern) .hero-media{ margin:0; }

/* The blob wrapper (SMALLER size as requested) */
:is(body.about-modern, #main.about-modern) .hero-media .blob{
  width: clamp(140px, 20vw, 240px);          /* ← smaller; tweak last value to taste */
  aspect-ratio: 1;                            /* square box we morph */
  margin-left: auto;                          /* push to right edge */
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
  box-shadow: 0 16px 40px rgba(2,8,23,.25);
  transform: rotate(2deg);
  animation: aboutBlobMorph 16s ease-in-out infinite;
  will-change: border-radius, transform;

  /* Safari/iOS: ensure rounded clipping during animation */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}

/* Make the image fill + crop inside the blob */
:is(body.about-modern, #main.about-modern) .hero-media .blob img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gentle continuous morph */
@keyframes aboutBlobMorph{
  0%   { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
  25%  { border-radius: 53% 47% 65% 35% / 45% 55% 35% 65%; transform: rotate(1deg); }
  50%  { border-radius: 62% 38% 45% 55% / 53% 47% 57% 43%; transform: rotate(0deg); }
  75%  { border-radius: 55% 45% 52% 48% / 48% 52% 44% 56%; transform: rotate(-1deg); }
  100% { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :is(body.about-modern, #main.about-modern) .hero-media .blob{ animation:none; }
}

/* Optional: on small screens, center the blob and keep it modest */
@media (max-width: 980px){
  :is(body.about-modern, #main.about-modern) .hero-media .blob{
    margin-left: 0;
    margin-inline: auto;
    width: clamp(120px, 48vw, 200px);        /* even smaller on mobile */
  }
}

/* === About page: morphing blob (standalone + embedded) === */
/* Works whether .about-modern sits on <body> (standalone) or on <main> (embedded) */
:is(body.about-modern, #main.about-modern) .about-hero__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;    /* copy left, blob right */
  gap: clamp(16px, 3.5vw, 36px);
  align-items: center;
}
@media (max-width: 980px){
  :is(body.about-modern, #main.about-modern) .about-hero__grid{ grid-template-columns: 1fr; }
}

/* Keep the figure tight */
:is(body.about-modern, #main.about-modern) .hero-media{ margin: 0; }

/* The blob wrapper — SMALLER size as requested */
:is(body.about-modern, #main.about-modern) .hero-media .blob{
  width: clamp(120px, 18vw, 200px);  /* ↓ smaller cap; tweak last value for size */
  aspect-ratio: 1;                   /* square box we morph */
  margin-left: auto;                 /* push to the right edge */
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
  box-shadow: 0 16px 40px rgba(2,8,23,.25);
  transform: rotate(2deg);
  animation: aboutBlobMorph 16s ease-in-out infinite;
  will-change: border-radius, transform;

  /* Safari/iOS: ensure rounded clipping during animation */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}

/* Make the image fill + crop within the blob */
:is(body.about-modern, #main.about-modern) .hero-media .blob img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gentle continuous morph */
@keyframes aboutBlobMorph{
  0%   { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
  25%  { border-radius: 53% 47% 65% 35% / 45% 55% 35% 65%; transform: rotate(1deg); }
  50%  { border-radius: 62% 38% 45% 55% / 53% 47% 57% 43%; transform: rotate(0deg); }
  75%  { border-radius: 55% 45% 52% 48% / 48% 52% 44% 56%; transform: rotate(-1deg); }
  100% { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :is(body.about-modern, #main.about-modern) .hero-media .blob{ animation: none; }
}

/* On small screens, center it and keep it modest */
@media (max-width: 980px){
  :is(body.about-modern, #main.about-modern) .hero-media .blob{
    margin-left: 0;
    margin-inline: auto;
    width: clamp(110px, 44vw, 180px);
  }
}

/* === About page: morphing blob (standalone + embedded) === */
/* Works whether .about-modern is on <body> (standalone) or on <main> (embedded) */
:is(body.about-modern, #main.about-modern) .about-hero__grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;   /* copy left, blob right */
  gap: clamp(16px, 3.5vw, 36px);
  align-items: center;
}
@media (max-width: 980px){
  :is(body.about-modern, #main.about-modern) .about-hero__grid{ grid-template-columns: 1fr; }
}

/* Keep the figure tight */
:is(body.about-modern, #main.about-modern) .hero-media{ margin: 0; }

/* The blob wrapper — intentionally small */
:is(body.about-modern, #main.about-modern) .hero-media .blob{
  width: clamp(120px, 18vw, 200px);  /* ↓ adjust last value for smaller/larger cap */
  aspect-ratio: 1;                   /* square box we morph into a blob */
  margin-left: auto;                 /* push to right edge */
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
  box-shadow: 0 16px 40px rgba(2,8,23,.25);
  transform: rotate(2deg);
  animation: aboutBlobMorph 16s ease-in-out infinite;
  will-change: border-radius, transform;

  /* Safari/iOS: ensure rounded clipping during animation */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}

/* Make the image fill + crop cleanly */
:is(body.about-modern, #main.about-modern) .hero-media .blob img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gentle continuous morph */
@keyframes aboutBlobMorph{
  0%   { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
  25%  { border-radius: 53% 47% 65% 35% / 45% 55% 35% 65%; transform: rotate(1deg); }
  50%  { border-radius: 62% 38% 45% 55% / 53% 47% 57% 43%; transform: rotate(0deg); }
  75%  { border-radius: 55% 45% 52% 48% / 48% 52% 44% 56%; transform: rotate(-1deg); }
  100% { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  :is(body.about-modern, #main.about-modern) .hero-media .blob{ animation: none; }
}

/* On small screens, center the blob and keep it modest */
@media (max-width: 980px){
  :is(body.about-modern, #main.about-modern) .hero-media .blob{
    margin-left: 0;
    margin-inline: auto;
    width: clamp(110px, 44vw, 180px);
  }
}

/* === About hero: morphing blob (standalone + embedded via #sb-swap) === */

/* 2-col layout for the About hero */
body.about-modern #about-hero .about-hero__grid,
#main.about-modern #about-hero .about-hero__grid,
#sb-swap #about-hero .about-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* copy left, blob right */
  gap: clamp(16px, 3.5vw, 36px);
  align-items: center;
}

@media (max-width: 980px){
  body.about-modern #about-hero .about-hero__grid,
  #main.about-modern #about-hero .about-hero__grid,
  #sb-swap #about-hero .about-hero__grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the figure tight */
body.about-modern #about-hero .hero-media,
#main.about-modern #about-hero .hero-media,
#sb-swap #about-hero .hero-media {
  margin: 0;
}

/* The blob wrapper — SMALLER size as requested */
body.about-modern #about-hero .hero-media .blob,
#main.about-modern #about-hero .hero-media .blob,
#sb-swap #about-hero .hero-media .blob {
  width: clamp(200px, 28vw, 380px); /* adjust last value to taste */
  aspect-ratio: 1;                  /* square box we morph */
  margin-left: auto;                /* push to right edge */
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%;
  box-shadow: 0 16px 40px rgba(2,8,23,.25);
  transform: rotate(2deg);
  animation: aboutBlobMorph 16s ease-in-out infinite;
  will-change: border-radius, transform;

  /* Safari/iOS: ensure rounded clipping during animation */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}

/* Make the image fill + crop within the blob */
body.about-modern #about-hero .hero-media .blob img,
#main.about-modern #about-hero .hero-media .blob img,
#sb-swap #about-hero .hero-media .blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gentle continuous morph */
@keyframes aboutBlobMorph{
  0%   { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
  25%  { border-radius: 53% 47% 65% 35% / 45% 55% 35% 65%; transform: rotate(1deg); }
  50%  { border-radius: 62% 38% 45% 55% / 53% 47% 57% 43%; transform: rotate(0deg); }
  75%  { border-radius: 55% 45% 52% 48% / 48% 52% 44% 56%; transform: rotate(-1deg); }
  100% { border-radius: 58% 42% 55% 45% / 40% 60% 42% 58%; transform: rotate(2deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body.about-modern #about-hero .hero-media .blob,
  #main.about-modern #about-hero .hero-media .blob,
  #sb-swap #about-hero .hero-media .blob {
    animation: none;
  }
}

/* On small screens, center the blob and keep it modest */
@media (max-width: 980px){
  body.about-modern #about-hero .hero-media .blob,
  #main.about-modern #about-hero .hero-media .blob,
  #sb-swap #about-hero .hero-media .blob {
    margin-left: 0;
    margin-inline: auto;
    width: clamp(160px, 64vw, 300px);
  }
}

/* === Digital Marketing: "Waiting room" visual fits inside the card === */
/* Scope to any .card that contains the dm-room image */
.card picture {
  display: block;
  width: 100%;
  /* Choose the shape you want: 16/9 is a good default for a wall-mounted TV */
  aspect-ratio: 16 / 9;
  overflow: hidden;            /* clip any overflow */
  border-radius: 12px;         /* matches your card rounding */
}

.card .dm-room-img {
  display: block;
  width: 100%;
  height: 100%;                /* fill the aspect-ratio box */
  object-fit: cover;           /* crop gracefully instead of stretching */
}

/* Optional: tighten the caption and keep it inside the card rhythm */
.card figcaption.small {
  margin-top: 10px;
  color: var(--muted);
}

/* ===== ADS PAGE — lock footer identical to other pages ===== */
/* (Does NOT touch your promo note, which is now a <section class="note">) */
footer {
  padding: 28px 0 40px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important; /* same site line */
}

/* Same container width + stacked rows as the rest of the site */
footer .container {
  max-width: 1100px !important;   /* match global container width */
  margin: 0 auto !important;
  padding: 16px 24px !important;
  display: flex !important;
  flex-direction: column !important;  /* put links under the © line */
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Copyright line — same size & muted tone */
footer .small {
  font-size: 13px !important;     /* exact site size */
  line-height: 1.45 !important;
  color: #9FB2C8 !important;      /* site muted color */
}

/* Links row — same size & color as site */
footer .footer-links {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  margin-top: 2px !important;
}
footer .footer-links a,
footer .footer-links a:link,
footer .footer-links a:visited {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #9FB2C8 !important;      /* site muted color */
  text-decoration: none !important;
}
footer .footer-links a:hover {
  color: #E8EEF6 !important;
  text-decoration: underline !important;
}
footer .footer-links a + a::before {
  content: "·";
  opacity: .6;
  margin: 0 .5rem 0 .25rem;
}

/* === Sitewide layout tokens === */
:root{
  --container: 1100px;   /* same as your home page */
  --gutter: 24px;        /* left/right padding */
}

/* === Global containers & body margins (match home) === */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Any content wrapper / body section should honor the same margins */
.wrap, main, .prose{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter);
}

/* === Hero text layout consistency (match home hero) === */
.sb-hero{ text-align: left; }
.sb-hero__content.container{ padding-left: var(--gutter); padding-right: var(--gutter); }

.sb-hero .kicker{
  margin: 0 0 6px;
  font-size: clamp(.9rem, 1.2vw, 1rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}
.sb-hero__title{
  margin: 0 0 8px;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.sb-hero__sub{
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.45;
  opacity: .94;
}

/* === Layout tokens (if not present) === */
:root{
  --container: 1100px;
  --gutter: 24px;
}

/* === Global container/margins === */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap, main, .prose{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter);
}

/* === Hero alignment + rhythm (match /terms) === */
.sb-hero,
.page-hero{
  text-align: left;
}
.sb-hero__content.container,
.page-hero .container{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.sb-hero .kicker{
  margin: 0 0 6px;
  font-size: clamp(.9rem, 1.2vw, 1rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}
.sb-hero__title{
  margin: 0 0 8px;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.sb-hero__sub{
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.45;
  opacity: .94;
}

/* (Optional safety) If any page forces 1200px, pull it back to site default */
html body .container, html body .wrap{ max-width: var(--container) !important; }

/* === Sitewide: consistent width & gutters === */
:root{
  --container: 1100px;  /* matches your existing .container max width */
  --gutter: 20px;       /* matches your existing container padding */
}

/* Body/content wrappers share the same margins as home */
main, .wrap, .prose{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter);
}

/* === Heroes: force left alignment like /terms === */
.sb-hero,
.page-hero,
.sb-hero__content {
  text-align: left;
}

/* Keep hero gutters identical to your site container */
.sb-topbar .container,
.sb-hero .container,
.page-hero .container,
.sb-hero__content.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Make CTA rows align left consistently */
.sb-cta-row,
.sb-hero .cta-row,
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* === ADS page hero override: force left alignment === */
.ads-page .sb-hero,
.ads-page .sb-hero__content {
  text-align: left !important;
}

.ads-page .sb-hero__content.container {
  margin: 0 auto;
  padding-left: 20px;   /* match your global container gutters */
  padding-right: 20px;
  max-width: 1100px;    /* same width as other pages */
}

/* =========================================
   CONSISTENT HERO + BODY MARGINS (sitewide)
   Targets /ads, /faqs, /privacy, /terms
   ========================================= */

/* 1) Left-align all sb-hero text blocks */
.sb-hero,
.sb-hero__content,
.sb-hero .kicker,
.sb-hero__title,
.sb-hero__sub {
  text-align: left !important;
}

/* 2) Ensure hero containers honor the same gutters/width */
.sb-topbar .container,
.sb-hero .container,
.sb-hero__content.container {
  max-width: 1100px !important;     /* matches your .container */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;     /* matches your .container padding */
  padding-right: 20px !important;
}

/* 3) Normalize page body margins so FAQs matches others */
main,
.wrap,
.prose {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* ADS-only: force left-aligned hero + standard gutters */
.ads-page .sb-hero { text-align: left !important; }
.ads-page .sb-hero > .container {
  max-width: 1100px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* FAQ Accordions styled to match CTA */
.faq details {
  background: linear-gradient(90deg, var(--sb-accent), var(--sb-accent-2));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  margin: 10px 0;
  color: #000;
  transition: background 0.3s ease, transform 0.2s ease;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 600;
  color: #000;
}

.faq details:hover,
.faq summary:hover {
  background: linear-gradient(
    90deg,
    color-mix(in lab, var(--sb-accent), black 8%),
    color-mix(in lab, var(--sb-accent-2), black 8%)
  );
  transform: translateY(-1px);
}

.faq .answer {
  padding: 14px 16px;
  background: rgba(255,255,255,0.25);
  border-radius: 0 0 12px 12px;
  color: #000;
}

.blm-logo-wrap{ text-align:center; padding:.2rem 0 .05rem; }
.blm-img{ display:block; width:min(92vw, 720px); height:auto; margin:0 auto; }

#brightloop-logo {
  position: relative;
  text-align: center;
  padding: 1rem 0 0.5rem;
}
#brightloop-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(18,181,201,0.25),
    rgba(13,71,161,0) 70%
  );
  z-index: 0;
  pointer-events: none;
}
#brightloop-logo img {
  position: relative;
  z-index: 1;
  width: min(80vw, 700px);
  height: auto;
}

.blm-logo-wrap {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.blm-img {
  display: block;
  width: min(90vw, 720px);
  height: auto;
  margin: 0 auto;
}

.blm-tagline {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--sb-muted);
  letter-spacing: 0.4px;
}

/* Add soft fade on ALL edges (incl. top/bottom) */
.blm-img{
  /* keeps your existing sizing */
  width: min(90vw, 720px);
  height: auto;
  display: block;
  margin: 0 auto;

  /* transparent vignette: center solid, edges fade out */
  -webkit-mask-image: radial-gradient(120% 140% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(120% 140% at 50% 50%, #000 72%, transparent 100%);
}

/* Bigger, higher-contrast tagline */
.blm-tagline{
  margin-top: 8px;
  font-weight: 600;
  font-size: clamp(1.0rem, 2.2vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--sb-text, #0E2A47); /* falls back to your navy if var not set */
  opacity: 0.92;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
#brightloop-logo img {
  animation: fadeUp 1s ease-out;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.blm-tagline{ animation: fadeUp .6s ease .05s both; }

/* Soft fade on all edges (no hard top/bottom line) */
.blm-img{
  -webkit-mask-image: radial-gradient(150% 240% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(150% 240% at 50% 50%, #000 62%, transparent 100%);
}

/* Layout */
.blm-logo-wrap { text-align:center; padding: .6rem 0 .25rem; }
.blm-stage { position: relative; display:inline-block; }

/* Underlay SVG */
.blm-underlay{
  position:absolute;
  inset:-12% -14%;           /* grow past the logo edges */
  z-index:0;
  opacity:.9;                /* overall opacity; individual strokes already low */
}
.blm-underlay .loops{
  transform-origin:50% 50%;
  animation: blmOrbit 40s linear infinite;
}
@keyframes blmOrbit { to { transform: rotate(360deg); } }

/* Logo image (see fade below) */
.blm-img{
  position:relative;
  z-index:1;
  display:block;
  width:min(90vw, 720px);
  height:auto;
  margin:0 auto;
}

/* Bigger, clearer tagline */
.blm-tagline{
  margin-top:10px;
  font-weight:600;
  font-size: clamp(1.05rem, 2.3vw, 1.45rem);
  line-height:1.25;
  letter-spacing:.2px;
  color: var(--sb-text, #0E2A47);
  opacity:.95;
}

/* Flip card base – simple front/back toggle, no 3D clipping */
.flip-card {
  position: relative;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: auto; /* let content define height */
}

/* Faces share layout and padding from .plan-card */
.flip-card-face {
  display: none;           /* hidden by default */
  flex-direction: column;
  padding: inherit;        /* keep same padding as .plan-card */
}

/* show front by default */
.flip-card-front {
  display: flex;
}

/* when flipped, hide front and show back */
.flip-card.is-flipped .flip-card-front {
  display: none;
}

.flip-card.is-flipped .flip-card-back {
  display: flex;
}

/* Let the card grow naturally with its content */
.plan-card.flip-card {
  position: relative;
  overflow: visible;   /* don't clip tall content */
  min-height: 0;       /* no forced height */
}

/* Keep CTAs pinned to the bottom of each face */
.plan-card.flip-card .plan-cta {
  margin-top: auto;
}

/* Grid layout for the pricing flip cards */
.pricing-flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Tiny helper text under cards */
.muted.tiny {
  font-size: 0.75rem;
  margin-top: 0.75rem;
  opacity: 0.7;
}

/* Back side color so it's obvious when flipped – applies to ALL cards */
/* Back side color + comfortable padding */
.flip-card-back {
  background: #f2f6ff;      /* light blue */
  color: #0b1726;           /* keep text dark */
  border-radius: 18px;      /* match card radius */
  padding: 1.5rem 1.75rem;  /* <-- extra breathing room inside blue */
  box-sizing: border-box;   /* make sure padding doesn't overflow */
}

/* 3-across layout ONLY for Special Event Campaigns */
.pricing-flip-grid--events {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Ensure cards stretch to equal height */
.pricing-flip-grid--events .plan-card,
.pricing-flip-grid--events .flip-card-inner {
  height: 100%;
}

/* 3-across layout ONLY for Special Event Campaigns */
.pricing-flip-grid--events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Make the "Tap or click" line span across all three columns */
.pricing-flip-grid--events > p {
  grid-column: 1 / -1;
}

/* Equal-height cards within the events grid only */
.pricing-flip-grid--events .plan-card,
.pricing-flip-grid--events .flip-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* =============================== */
/* Featured Business: centered two */
/* =============================== */

.pricing-flip-grid--featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  justify-content: center;      /* centers the two-card row */
  gap: 24px;
  align-items: stretch;
}

/* Make the "Tap or click…" line span full width */
.pricing-flip-grid--featured > p {
  grid-column: 1 / -1;
  text-align: center;
}

/* Ensures equal-height cards */
.pricing-flip-grid--featured .plan-card,
.pricing-flip-grid--featured .flip-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Center the flip-text line in the Event section */
.pricing-flip-grid--events > p {
  grid-column: 1 / -1;
  text-align: center;
}

/* ==========================================
   GLOBAL FOOTER MOBILE FIX (all pages)
   ========================================== */
@media (max-width: 768px) {

  /* Stack footer content instead of squishing in a row */
  footer > .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  /* Footer links wrap nicely */
  footer .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem 1rem !important;
    margin-top: 0.5rem !important;
  }

  footer .footer-links a {
    padding: 0.15rem 0 !important;
  }

  /* Chamber badge: stop overlapping, move below content */
  footer > .container > div[style*="position:absolute"] {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: 1rem !important;
    text-align: left !important;
  }

  footer > .container > div[style*="position:absolute"] img {
    max-height: 80px !important;
    height: auto !important;
  }
}

/* ==========================================
   GLOBAL FOOTER MOBILE FIX (all pages)
   ========================================== */
@media (max-width: 768px) {

  /* Stack footer content vertically */
  footer > .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  /* Footer links: wrap nicely */
  footer .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem 1rem !important;
    margin-top: 0.5rem !important;
  }

  footer .footer-links a {
    padding: 0.15rem 0 !important;
  }

  /* Chamber badge block (the right-side div in your footer)
     - move it below content
     - center the text + logo on mobile
  */
  footer > .container > div[style*="position:absolute"] {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: 1rem !important;

    /* Centering */
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Inner text "Proud to be a part of the" */
  footer > .container > div[style*="position:absolute"] > div {
    width: 100% !important;
    text-align: center !important;
  }

  /* Chamber logo itself */
  footer > .container > div[style*="position:absolute"] img {
    display: block !important;
    margin: 0 auto !important;
    max-height: 80px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

<style>
  /* ============================================================
     BRIGHTLOOP: COMPETITION TABLE CARD
     ============================================================ */
  #blm-competition .blm-competition-card {
    margin-top: 1.5rem;
  }

  #blm-competition .blm-competition-card h3 {
    font-weight: 600;
    margin-bottom: 0.75rem;
  }

  .blm-table-wrap {
    margin-top: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .blm-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 540px; /* lets mobile scroll horizontally if needed */
  }

  .blm-comparison-table thead {
    background: rgba(11, 23, 48, 0.03);
  }

  .blm-comparison-table th,
  .blm-comparison-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-align: left;
  }

  .blm-comparison-table th {
    font-weight: 600;
    white-space: nowrap;
  }

  .blm-comparison-table td:nth-child(n+2) {
    text-align: center;
    white-space: nowrap;
  }

  .blm-comparison-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.01);
  }
</style>

/* ==========================================
   MOBILE TABLE SCROLL HINT (fade + arrow)
   ========================================== */
@media (max-width: 768px) {

  .blm-table-wrap {
    position: relative !important;
    background: #fff; /* ensures fade shows on white */
    overflow-x: auto !important;
    padding-bottom: 0.5rem; /* room for scroll bar */
  }

  /* Soft gradient fade on the right edge */
  .blm-table-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
      to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,1) 100%
    );
  }

  /* Right-side swipe indicator */
  .blm-table-wrap::after {
    content: "← swipe →";
    position: absolute;
    bottom: 6px;
    right: 12px;
    z-index: 4;
    font-size: 0.7rem;
    color: #444;
    padding: 2px 6px;
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  }
}

/* Text hint: only show on mobile so it doesn't clutter desktop */
.blm-scroll-hint {
  margin: 0 0 0.5rem;
  color: #666;
}

/* Hide the hint on larger screens */
@media (min-width: 769px) {
  .blm-scroll-hint {
    display: none;
  }
}

/* Ensure mobile can actually scroll horizontally */
@media (max-width: 768px) {
  .blm-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.pager{
  margin: 18px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.pager button{
  cursor:pointer;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--sb-text);
}
.pager button:hover{ border-color:rgba(18,194,233,.6); }
.pager button.active{
  background:linear-gradient(180deg, rgba(18,194,233,.35), rgba(18,194,233,.12));
  border-color:rgba(18,194,233,.7);
}
.pager button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* === Multi-select category dropdown === */
.multiselect { position: relative; }

.ms-btn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:transparent;
  border:none;
  color:var(--sb-text);
  font-size:14px;
  cursor:pointer;
}

.caret{ opacity:.7 }

.ms-menu{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  right:0;
  z-index:20;
  background:#0b1730;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:10px;
  display:none;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}

.ms-menu.open{ display:block; }

.ms-menu input{
  width:100%;
  padding:8px 10px;
  margin-bottom:8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  background:#0f1f3e;
  color:var(--sb-text);
}

.ms-actions{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}

.ms-actions button{
  background:none;
  border:none;
  color:var(--sb-text);
  font-size:12px;
  cursor:pointer;
  opacity:.8;
}

.ms-actions button:hover{ opacity:1 }

.ms-list{
  max-height:240px;
  overflow:auto;
}

.ms-item{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 6px;
  border-radius:8px;
  cursor:pointer;
}

.ms-item:hover{
  background:rgba(255,255,255,.08);
}

/* ===== Multi-select dropdown (Category) ===== */
.ctrl.multiselect { position: relative; }

/* Button should behave like the native ctrl: left aligned content */
.ms-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  border:none;
  color:var(--sb-text);
  font-size:14px;
  cursor:pointer;
  text-align:left;
}

/* Menu look */
.ms-menu{
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  right:0;
  z-index: 50;
  background: #0b1730;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  display:none;
}
.ms-menu.open{ display:block; }

.ms-menu input{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:#0f1f3e;
  color:var(--sb-text);
  outline:none;
}

/* Scroll list */
.ms-list{
  max-height: 260px;
  overflow:auto;
  padding: 6px 2px;
}

/* ✅ Fix: left align, checkbox + label aligned, allow wrapping */
.ms-item{
  display:flex;
  align-items:flex-start;      /* top align for wrapped text */
  justify-content:flex-start;  /* never center */
  gap:10px;
  padding: 8px 8px;
  border-radius: 10px;
  cursor:pointer;
  text-align:left;
}

.ms-item:hover{ background: rgba(255,255,255,.08); }

/* checkbox spacing */
.ms-item input{
  margin-top: 2px;     /* aligns with first line of text */
  flex: 0 0 auto;
}

/* ✅ Fix: allow long category names to wrap fully */
.ms-item span{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;         /* wrap */
  overflow: visible;           /* don’t clip */
  line-height: 1.25;
  word-break: break-word;
}

/* Make native selects match your dark UI */
.ctrl select{
  width:100%;
  appearance:none;
  background: transparent;
  color: var(--sb-text);
  border: none;
  outline: none;
  text-align:left;
}

/* Make the dropdown list readable (best effort by browser) */
.ctrl select option{
  background: #0b1730;
  color: #e6eefc;
}

/* Make native selects match your dark UI */
.ctrl select{
  width:100%;
  appearance:none;
  background: transparent;
  color: var(--sb-text);
  border: none;
  outline: none;
  text-align:left;
}

/* Make the dropdown list readable (best effort by browser) */
.ctrl select option{
  background: #0b1730;
  color: #e6eefc;
}

/* Category menu styling + left aligned rows */
.ms-menu{
  position:absolute;
  top: calc(100% + 8px);
  left:0; right:0;
  z-index: 50;
  background:#0b1730;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  display:none;
}
.ms-menu.open{ display:block; }

.ms-list{ max-height:260px; overflow:auto; padding:6px 2px; }

.ms-item{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  padding:8px 8px;
  border-radius:10px;
  cursor:pointer;
  text-align:left;
}
.ms-item:hover{ background: rgba(255,255,255,.08); }

.ms-item input{ margin-top:2px; flex:0 0 auto; }
.ms-item span{
  flex:1 1 auto;
  min-width:0;
  white-space:normal;       /* wrap */
  word-break:break-word;    /* don’t cut off */
  line-height:1.25;
}

/* Make dropdown menus wider than the control */
.ctrl.multiselect .ms-menu{
  min-width: 360px;        /* desktop width */
  width: max-content;     /* expand to fit text */
}

/* Keep within viewport on smaller screens */
@media (max-width: 480px){
  .ctrl.multiselect .ms-menu{
    min-width: calc(100vw - 32px);
    left: 0;
    right: auto;
  }
}

/* Never split words in dropdown rows */
.ms-item span{
  white-space: nowrap;      /* stay on one line */
  word-break: keep-all;     /* no mid-word breaks */
}

.ms-item{
  align-items: center;      /* checkbox & text align nicely */
}

/* ✅ Dropdown panel sizing: dynamic, but constrained to viewport */
.ctrl.multiselect { position: relative; }

.ctrl.multiselect .ms-menu{
  /* Always at least as wide as the button/control */
  min-width: 100%;

  /* But don’t exceed the viewport (prevents horizontal scrolling) */
  max-width: calc(100vw - 24px);

  /* Allow it to grow if content needs more room */
  width: fit-content;

  /* Keep it anchored to the control */
  left: 0;
  right: auto;

  /* If content is still wider, wrap instead of forcing horizontal scroll */
  overflow-x: hidden;
}

/* On small screens, just use full available width */
@media (max-width: 600px){
  .ctrl.multiselect .ms-menu{
    width: 100%;
    max-width: calc(100vw - 24px);
  }
}

/* ✅ Left aligned rows */
.ms-list{ text-align: left; }

.ms-item{
  display:flex;
  align-items:flex-start;       /* top align for wrapped lines */
  justify-content:flex-start;   /* never center */
  gap:10px;
  width:100%;
  text-align:left;
}

/* checkbox/radio column */
.ms-item input{
  flex: 0 0 auto;
  margin-top: 2px;
}

/* ✅ Label column: wrap at spaces, don’t cut off */
.ms-item span{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;     /* allows wrapping */
  word-break: normal;      /* prevents mid-word breaks in most cases */
  overflow-wrap: break-word; /* only breaks a word if it’s insanely long */
  line-height: 1.25;
}

.ms-btn span{
  white-space: nowrap;
}

/* ===== SORT MENU: one-line items + dynamic width ===== */
#sortMenu.ms-menu{
  /* allow it to expand beyond the button if needed */
  min-width: 100%;
  width: max-content;

  /* but never exceed the viewport */
  max-width: calc(100vw - 24px);

  /* keep anchored to the control */
  left: 0;
  right: auto;
}

#sortMenu .ms-item span{
  white-space: nowrap;      /* keep each option on one line */
  overflow: hidden;
  text-overflow: ellipsis;  /* safety if viewport is too small */
}

#sortMenu .ms-item{
  align-items: center;      /* radios + text align nicely */
}

/* =========================================
   DROPDOWN FIX — LEFT ALIGN SORT & CATEGORY
   ========================================= */

/* Ensure dropdown panels are left-aligned */
.ms-menu {
  text-align: left;
}

/* Ensure the list itself is left-aligned */
.ms-list {
  text-align: left;
}

/* Force each row to be left-aligned */
.ms-item {
  display: flex;
  justify-content: flex-start;   /* ⬅ key fix */
  align-items: center;
  text-align: left;
  width: 100%;
}

/* Keep checkbox / radio on the left */
.ms-item input {
  flex: 0 0 auto;
  margin-right: 10px;
}

/* Keep text aligned and readable */
.ms-item span {
  flex: 1 1 auto;
  text-align: left;
}

/* === Simple left-alignment for dropdown items === */
.ms-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.ms-item input {
  margin-right: 10px;
}

.ms-item span {
  text-align: left;
}

/* ===== Ads Directory: force left-align for BOTH dropdowns ===== */

/* 1) Sort (native select): left-align selected text */
.ads-page #sort{
  text-align: left;
  text-align-last: left;   /* key for Chrome/Edge/Safari */
}

/* 2) Category dropdown items: checkbox + label left aligned */
.ads-page #catMenu .ms-item{
  justify-content: flex-start;
}

.ads-page #catMenu .ms-item span{
  text-align: left;
}

/* === Dropdown item alignment: stop zig-zag by using a 2-column grid === */

/* Category list rows */
#catMenu .ms-item{
  display: grid;
  grid-template-columns: 28px 1fr; /* checkbox column + text column */
  column-gap: 14px;
  align-items: center;
  justify-items: start;           /* left-align content inside each cell */
  text-align: left;
}

#catMenu .ms-item input{
  margin: 0;                      /* remove any default weird spacing */
  justify-self: start;
}

#catMenu .ms-item span{
  justify-self: start;
  text-align: left;
}

/* Sort list rows (radio buttons) */
#sortMenu .ms-item{
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 14px;
  align-items: center;
  justify-items: start;
  text-align: left;
}

#sortMenu .ms-item input{
  margin: 0;
  justify-self: start;
}

#sortMenu .ms-item span{
  justify-self: start;
  text-align: left;
}

/* === Category dropdown width fix (after grid alignment) === */
#catMenu.ms-menu{
  min-width: 320px;          /* readable baseline */
  max-width: 90vw;           /* never overflow screen */
  width: auto;               /* allow content to define width */
}