/* ==========================================================================
   Solar Junction — Stylesheet (v2: asymmetric layout system)
   Table of contents:
   1. Variables & base
   2. Typography
   3. Utilities & animation
   4. Navbar
   5. Hero (55/45 split + hairline stat strip)
   6. About (40/60 split, pull-quote)
   7. Packages (staggered/offset cards)
   8. BESS Incentive (60/40 dashboard split)
   9. Industries (horizontal scroll-snap)
   10. Process (alternating zig-zag timeline)
   11. FAQ (35/65 sticky intro + accordion)
   12. Lead form (45/55 overlapping card)
   13. Footer (asymmetric columns)
   14. Responsive tweaks
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Variables & base
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css {
  /* Brand palette */
  --navy: #161d4a;
  --navy-dark: #14103a;
  --coral: #e72544;
  /* true brand coral — decorative fills, icons, rings, gradients */
  --coral-strong: #c81d39;
  /* deepened coral — guarantees AA contrast for text & solid buttons */
  --cyan: #14b8ec;
  /* minority accent — used in 1-2 spots only, per brand nod */
  --white: #ffffff;
  --off-white: #f5f7fb;

  /* Derived tones */
  --navy-60: rgba(22, 29, 74, 0.6);
  --navy-10: rgba(22, 29, 74, 0.08);
  --coral-10: rgba(231, 37, 68, 0.1);
  --coral-20: rgba(231, 37, 68, 0.18);
  --cyan-15: rgba(20, 184, 236, 0.15);
  --border-soft: rgba(22, 29, 74, 0.1);

  /* Gradient — signature "power flow" motif: navy to coral, cyan appears once as a glow */
  --gradient-power: linear-gradient(120deg, var(--navy) 0%, var(--navy) 45%, var(--coral-strong) 100%);
  --gradient-coral: linear-gradient(135deg, var(--coral) 0%, var(--coral-strong) 100%);

  /* Type scale */
  --h1-size: 48px;
  --h1-size-mobile: 32px;
  --h2-size: 36px;
  --h3-size: 24px;
  --h4-size: 20px;
  --body-size: 16px;
  --small-size: 14px;

  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Spacing / effects */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 4px 16px rgba(22, 29, 74, 0.08);
  --shadow-md: 0 12px 32px rgba(22, 29, 74, 0.12);
  --shadow-lg: 0 24px 56px rgba(22, 29, 74, 0.2);
  --transition: 0.3s ease;
  --navbar-h: 76px;
}

.commercial-new-landing-page-css * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* was var(--navbar-h) — that custom property now lives on
     .commercial-new-landing-page-css, not :root, so html (its ancestor)
     can no longer see it. Hard-coded to the same 76px --navbar-h value. */
  scroll-padding-top: 76px;
  overflow-x: hidden;
}

.commercial-new-landing-page-css {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: 1.6;
  color: var(--navy);
  background-color: var(--white);
  /* NOT overflow-x: hidden here (unlike the body rule this came from) — the
     CSS spec forces the other axis to compute as `auto` whenever one axis is
     `hidden` and the other is left `visible`, which turns this div into its
     own independently-scrolling box the moment its content is even 1px
     taller than its own box (it is, by ~120px, from the lead-form-card's
     negative-margin overlap below) — a second scrollbar stacked next to the
     page's real one. The global `html { overflow-x: hidden }` rule above
     already contains this page's horizontal bg-vector bleed for the whole
     document, so this div doesn't need its own copy of the same rule. */
}

.commercial-new-landing-page-css img {
  max-width: 100%;
}

/* Note: intentionally no overflow:hidden here — it would disable position:sticky
   in the FAQ section and clip the lead-form card's intentional negative-margin
   overlap. Horizontal bleed from background vectors is instead contained by
   body { overflow-x: hidden } above; vertical bleed is self-masked by the
   next section's opaque background. */
.commercial-new-landing-page-css section {
  position: relative;
}

.commercial-new-landing-page-css a {
  text-decoration: none;
  color: var(--coral-strong);
}

.commercial-new-landing-page-css ::selection {
  background: var(--coral-20);
  color: var(--navy);
}

.commercial-new-landing-page-css a:focus-visible,
.commercial-new-landing-page-css button:focus-visible,
.commercial-new-landing-page-css input:focus-visible,
.commercial-new-landing-page-css select:focus-visible,
.commercial-new-landing-page-css textarea:focus-visible,
.commercial-new-landing-page-css .nav-link:focus-visible {
  outline: 2px solid var(--coral-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css h1,
.commercial-new-landing-page-css h2,
.commercial-new-landing-page-css h3,
.commercial-new-landing-page-css h4,
.commercial-new-landing-page-css h5,
.commercial-new-landing-page-css h6 {
  font-family: var(--font-heading);
  color: var(--navy);
  margin: 0;
}

.commercial-new-landing-page-css h1 {
  font-size: var(--h1-size);
  font-weight: 700;
  line-height: 1.15;
}

.commercial-new-landing-page-css h2 {
  font-size: var(--h2-size);
  font-weight: 700;
  line-height: 1.2;
}

.commercial-new-landing-page-css h3 {
  font-size: var(--h3-size);
  font-weight: 600;
  line-height: 1.3;
}

.commercial-new-landing-page-css h4 {
  font-size: var(--h4-size);
  font-weight: 600;
  line-height: 1.35;
}

.commercial-new-landing-page-css small,
.commercial-new-landing-page-css .text-small {
  font-size: var(--small-size);
}

.commercial-new-landing-page-css .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-strong);
  margin-bottom: 14px;
}

.commercial-new-landing-page-css .eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--coral-strong);
  display: inline-block;
}

.commercial-new-landing-page-css .eyebrow.eyebrow-light {
  color: #ffb7c2;
}

.commercial-new-landing-page-css .eyebrow.eyebrow-light::before {
  background: #ffb7c2;
}

/* Section-title accent — coral rule + a large soft quotation mark behind the
   text. Introduced on the About pull-quote; promoted here so every section
   heading on the site shares the same signature, not just that one quote. */
.commercial-new-landing-page-css .section-title {
  position: relative;
  padding-left: 20px;
  border-left: 4px solid var(--coral-strong);
}

.commercial-new-landing-page-css .section-title::before {
  content: "\201C";
  position: absolute;
  top: -4px;
  left: -2px;
  z-index: -1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--coral-10);
}

/* dark sections (navy backgrounds) need a pale accent instead of the light-coral tint */
.commercial-new-landing-page-css .on-dark.section-title::before {
  color: rgba(255, 255, 255, 0.12);
}

.commercial-new-landing-page-css .section-pad {
  padding: 100px 0;
}

.commercial-new-landing-page-css .bg-off-white {
  background-color: var(--off-white);
}

.commercial-new-landing-page-css .bg-white {
  background-color: var(--white);
}

.commercial-new-landing-page-css .text-coral {
  color: var(--coral-strong);
}

/* -------------------------------------------------------------------------
   3. Utilities & animation
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .bg-vector {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.commercial-new-landing-page-css .bg-vector img {
  width: 100%;
  height: 100%;
  display: block;
}

.commercial-new-landing-page-css .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.commercial-new-landing-page-css .reveal.reveal-left {
  transform: translateX(-32px);
}

.commercial-new-landing-page-css .reveal.reveal-right {
  transform: translateX(32px);
}

.commercial-new-landing-page-css .reveal.reveal-scale {
  transform: scale(0.94);
}

.commercial-new-landing-page-css .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

.commercial-new-landing-page-css .stagger .reveal:nth-child(1) {
  transition-delay: 0.05s;
}

.commercial-new-landing-page-css .stagger .reveal:nth-child(2) {
  transition-delay: 0.15s;
}

.commercial-new-landing-page-css .stagger .reveal:nth-child(3) {
  transition-delay: 0.25s;
}

.commercial-new-landing-page-css .stagger .reveal:nth-child(4) {
  transition-delay: 0.35s;
}

.commercial-new-landing-page-css .stagger .reveal:nth-child(5) {
  transition-delay: 0.45s;
}

.commercial-new-landing-page-css .stagger .reveal:nth-child(6) {
  transition-delay: 0.55s;
}

.commercial-new-landing-page-css .stagger .reveal:nth-child(7) {
  transition-delay: 0.65s;
}

.commercial-new-landing-page-css .stagger .reveal:nth-child(8) {
  transition-delay: 0.75s;
}

.commercial-new-landing-page-css .btn {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  padding: 13px 30px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  border: 2px solid transparent;
}

.commercial-new-landing-page-css .btn-coral {
  background: var(--gradient-coral);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.commercial-new-landing-page-css .btn-coral:hover,
.commercial-new-landing-page-css .btn-coral:focus-visible {
  background-position: 100% 50%;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.commercial-new-landing-page-css .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
  background: transparent;
}

.commercial-new-landing-page-css .btn-outline-light:hover,
.commercial-new-landing-page-css .btn-outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
  transform: translateY(-2px);
}

.commercial-new-landing-page-css .btn-outline-navy {
  border-color: var(--border-soft);
  color: var(--navy);
  background: var(--white);
}

.commercial-new-landing-page-css .btn-outline-navy:hover,
.commercial-new-landing-page-css .btn-outline-navy:focus-visible {
  border-color: var(--coral-strong);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.commercial-new-landing-page-css .btn-sm {
  padding: 9px 20px;
  font-size: 14px;
}

.commercial-new-landing-page-css .hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}

.commercial-new-landing-page-css .hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------------------------
   4. Navbar
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .navbar {
  padding: 16px 0;
  transition: padding var(--transition), box-shadow var(--transition), background var(--transition);
  background: var(--white);
  min-height: var(--navbar-h);
  border-bottom: 1px solid transparent;
}

.commercial-new-landing-page-css .navbar.scrolled {
  padding: 10px 0;
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--border-soft);
}

.commercial-new-landing-page-css .navbar-brand img {
  height: 42px;
  width: auto;
  display: block;
}

.commercial-new-landing-page-css .navbar .nav-link {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
  padding: 8px 4px;
  margin: 0 14px;
  /* multi-word labels ("BESS Incentive", "How It Works") must never break
     mid-phrase — a wrapped label doubles the navbar height */
  white-space: nowrap;
}

.commercial-new-landing-page-css .navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 2px;
  background: var(--coral-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.commercial-new-landing-page-css .navbar .nav-link:hover::after,
.commercial-new-landing-page-css .navbar .nav-link.active::after {
  transform: scaleX(1);
}

.commercial-new-landing-page-css .navbar .nav-link.active {
  color: var(--coral-strong);
}

.commercial-new-landing-page-css .nav-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin: 0 20px;
  white-space: nowrap;
}

.commercial-new-landing-page-css .nav-phone i {
  color: var(--coral-strong);
  font-size: 15px;
}

.commercial-new-landing-page-css .nav-phone:hover {
  color: var(--coral-strong);
}

.commercial-new-landing-page-css .nav-cta {
  position: relative;
  white-space: nowrap;
}

.commercial-new-landing-page-css .nav-cta::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--border-soft);
}

@media (max-width: 991.98px) {
  .commercial-new-landing-page-css .nav-cta::before {
    display: none;
  }
}

.commercial-new-landing-page-css .navbar-toggler {
  border: none;
  box-shadow: none !important;
}

/* Phone shows in the mobile drawer (where tap-to-call matters most) and on
   wide desktop — it's the first thing dropped in the tight 992–1199px band,
   since the container is only 960px there but the links still sit inline. */
.commercial-new-landing-page-css .nav-phone-item {
  display: none;
}

@media (max-width: 991.98px),
(min-width: 1200px) {
  .commercial-new-landing-page-css .nav-phone-item {
    display: flex;
  }
}

/* Keep the inline row on one line: below 1200px the container is 960px wide,
   which the six links + CTA overflow at default spacing and wrap. */
@media (min-width: 992px) {
  .commercial-new-landing-page-css .navbar-nav {
    flex-wrap: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .commercial-new-landing-page-css .navbar .nav-link {
    margin: 0 7px;
    font-size: 14px;
  }

  .commercial-new-landing-page-css .navbar-brand img {
    height: 30px;
  }

  .commercial-new-landing-page-css .nav-cta {
    padding: 8px 16px;
  }

  .commercial-new-landing-page-css .nav-cta::before {
    left: -10px;
  }

  .commercial-new-landing-page-css .navbar .nav-item.ms-lg-3 {
    margin-left: 10px !important;
  }
}

/* Mobile drawer: give the stacked links breathing room and separators */
@media (max-width: 991.98px) {
  .commercial-new-landing-page-css .navbar-collapse {
    padding: 8px 0 16px;
  }

  .commercial-new-landing-page-css .navbar .nav-link {
    margin: 0;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border-soft);
  }

  .commercial-new-landing-page-css .navbar .nav-link::after {
    display: none;
  }

  .commercial-new-landing-page-css .nav-phone-item {
    padding: 14px 0 4px;
  }

  .commercial-new-landing-page-css .nav-phone {
    margin: 0;
    font-size: 16px;
  }

  .commercial-new-landing-page-css .nav-cta {
    display: block;
    text-align: center;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   5. Hero — asymmetric 55/45 split + full-bleed hairline stat strip
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .hero {
  background: var(--gradient-power);
  color: var(--white);
  padding: 150px 0 0;
  position: relative;
}

.commercial-new-landing-page-css .hero::before {
  /* the single cyan accent stop — a soft glow, not a wash */
  content: "";
  position: absolute;
  top: -10%;
  right: 8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--cyan-15) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Grid (not flex) so the 55/45 split accounts for the gap correctly —
   flex-basis percentages ignore gap and would overflow the row. */
.commercial-new-landing-page-css .hero-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.commercial-new-landing-page-css .hero-copy {
  text-align: left;
  padding-bottom: 70px;
}

.commercial-new-landing-page-css .hero-visual {
  position: relative;
  align-self: stretch;
  min-width: 0;
}

.commercial-new-landing-page-css .hero-visual .bg-vector {
  position: absolute;
  top: -60px;
  left: 0;
  right: -140px;
  /* bleeds past the container/viewport edge */
  bottom: -20px;
  opacity: 1;
}

/* .bg-vector img {width:100%;height:100%} above stretches to fill whatever box
   it's in — fine for the abstract low-opacity textures elsewhere, but this box
   is rarely square, so the hero illustration (drawn on a square grid) was
   getting squashed non-uniformly and its isometric lines no longer lined up.
   object-fit:contain keeps its proportions correct at every viewport width. */
.commercial-new-landing-page-css .hero-visual .bg-vector img {
  width: 100%;
  height: 100%;
  object-position: right center;
}

.commercial-new-landing-page-css .hero-float-card {
  position: absolute;
  left: 4%;
  bottom: 10%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: floatCard 5s ease-in-out infinite;
}

.commercial-new-landing-page-css .hero-float-card .hero-float-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--gradient-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
}

.commercial-new-landing-page-css .hero-float-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}

.commercial-new-landing-page-css .hero-float-card span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.commercial-new-landing-page-css .hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.commercial-new-landing-page-css .hero-particles span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  90% {
    opacity: 0.5;
  }

  100% {
    transform: translateY(-420px) translateX(20px);
    opacity: 0;
  }
}

.commercial-new-landing-page-css .hero h1 {
  color: var(--white);
  margin-bottom: 20px;
}

.commercial-new-landing-page-css .hero h1 span {
  color: #ffb7c2;
}

.commercial-new-landing-page-css .hero p.lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  max-width: 480px;
  margin-bottom: 34px;
}

.commercial-new-landing-page-css .hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
  justify-content: flex-start;
}

.commercial-new-landing-page-css .hero-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.commercial-new-landing-page-css .hero-badge-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.commercial-new-landing-page-css .hero-badge-row i {
  color: #ffb7c2;
}

/* Stat strip — breaks the grid, full-bleed hairline band (not boxed cards) */
.commercial-new-landing-page-css .stats-strip {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.commercial-new-landing-page-css .stats-strip .stats-inner {
  display: flex;
}

.commercial-new-landing-page-css .stat-item {
  flex: 1;
  text-align: center;
  padding: 32px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.commercial-new-landing-page-css .stat-item:first-child {
  border-left: none;
}

.commercial-new-landing-page-css .stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 38px;
  color: var(--white);
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.commercial-new-landing-page-css .stat-number .suffix {
  font-size: 24px;
  color: #ffb7c2;
}

.commercial-new-landing-page-css .stat-label {
  margin-top: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------------------------------
   6. About — 40/60 split, top-aligned, pull-quote above body
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .about-section {
  overflow: clip;
}

.commercial-new-landing-page-css .about-section .bg-vector {
  left: -40px;
  bottom: -20px;
  width: 520px;
  height: 520px;
  opacity: 0.1;
}

.commercial-new-landing-page-css .about-grid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 56px;
  align-items: start;
}

.commercial-new-landing-page-css .about-visual {
  position: relative;
  min-width: 0;
}

.commercial-new-landing-page-css .about-copy {
  padding-top: 6px;
  min-width: 0;
}

/* offset outline frame behind the photo, like a card peeking out from underneath */
.commercial-new-landing-page-css .about-visual::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--coral-strong);
  border-radius: var(--radius);
  z-index: 0;
}

/* small dot-grid accent bleeding off the photo's top-right corner */
.commercial-new-landing-page-css .about-visual::after {
  content: "";
  position: absolute;
  top: -22px;
  right: -22px;
  width: 88px;
  height: 88px;
  background-image: radial-gradient(var(--coral-strong) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.35;
  z-index: 2;
  pointer-events: none;
}

.commercial-new-landing-page-css .about-image-wrap {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.commercial-new-landing-page-css .about-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.commercial-new-landing-page-css .about-image-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(22, 29, 74, 0.85);
  backdrop-filter: blur(4px);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.commercial-new-landing-page-css .about-image-badge .num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--coral);
}

/* floating pill, half off the top edge of the photo — mirrors the hero's floating stat card */
.commercial-new-landing-page-css .about-mini-badge {
  position: absolute;
  top: -16px;
  left: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  color: var(--navy);
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.commercial-new-landing-page-css .about-mini-badge i {
  color: var(--coral-strong);
  font-size: 14px;
}

.commercial-new-landing-page-css .pull-quote {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 22px;
  padding-left: 20px;
  border-left: 4px solid var(--coral-strong);
}

.commercial-new-landing-page-css .pull-quote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: -2px;
  z-index: -1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  color: var(--coral-10);
}

.commercial-new-landing-page-css .about-copy p.body-text {
  color: var(--navy-60);
  font-size: 17px;
  margin-bottom: 0;
}

.commercial-new-landing-page-css .trust-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  border-top: 1px solid var(--border-soft);
  padding-top: 28px;
}

.commercial-new-landing-page-css .trust-badge-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 18px 8px 10px;
  transition: var(--transition);
}

.commercial-new-landing-page-css .trust-badge-inline:hover {
  border-color: var(--coral-20);
  background: var(--coral-10);
}

.commercial-new-landing-page-css .trust-badge-inline i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--coral-10);
  color: var(--coral-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.commercial-new-landing-page-css .trust-badge-inline.accent-cyan i {
  background: var(--cyan-15);
  color: var(--cyan);
}

.commercial-new-landing-page-css .trust-badge-inline span.label {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}

/* -------------------------------------------------------------------------
   7. Packages — staggered/offset, middle card elevated
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .packages-section .bg-vector {
  right: -80px;
  top: 40px;
  width: 560px;
  height: 560px;
  opacity: 0.06;
}

.commercial-new-landing-page-css .packages-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.commercial-new-landing-page-css .package-col {
  flex: 1 1 0;
}

.commercial-new-landing-page-css .package-col.side {
  padding-bottom: 0;
}

.commercial-new-landing-page-css .package-col.featured-col {
  flex: 1.08 1 0;
}

.commercial-new-landing-page-css .package-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 34px 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.commercial-new-landing-page-css .package-col.side .package-card {
  box-shadow: none;
}

.commercial-new-landing-page-css .package-card.featured {
  border: none;
  box-shadow: var(--shadow-lg);
  padding: 46px 32px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
  /* clips the ribbon corner — see below */
}

.commercial-new-landing-page-css .package-card.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 2px;
  background: var(--gradient-coral);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* fixed-width band, wide enough to clear the corner at any card width — the
   card's own overflow:hidden clips it flush with the edge, so it can no
   longer hang past the viewport on narrow screens like it used to */
.commercial-new-landing-page-css .package-ribbon {
  position: absolute;
  top: 24px;
  right: -42px;
  transform: rotate(45deg);
  width: 170px;
  text-align: center;
  background: var(--gradient-coral);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 0;
  box-shadow: var(--shadow-sm);
}

.commercial-new-landing-page-css .package-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--coral-10);
  color: var(--coral-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  margin-bottom: 20px;
}

.commercial-new-landing-page-css .package-card.featured .package-icon {
  width: 66px;
  height: 66px;
  font-size: 28px;
  background: var(--gradient-coral);
  color: var(--white);
}

.commercial-new-landing-page-css .package-card h3 {
  margin-bottom: 10px;
}

.commercial-new-landing-page-css .package-card .desc {
  color: var(--navy-60);
  font-size: 15px;
  margin-bottom: 18px;
}

.commercial-new-landing-page-css .package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  flex-grow: 1;
}

.commercial-new-landing-page-css .package-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  padding: 7px 0;
  border-top: 1px solid var(--border-soft);
}

.commercial-new-landing-page-css .package-features li:first-child {
  border-top: none;
}

.commercial-new-landing-page-css .package-features i {
  color: var(--coral-strong);
  margin-top: 3px;
  flex-shrink: 0;
}

.commercial-new-landing-page-css .package-card .btn {
  align-self: flex-start;
}

/* -------------------------------------------------------------------------
   8. BESS Incentive — 60/40 dark dashboard split
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .bess-section {
  background: var(--navy);
  color: var(--white);
  position: relative;
}

.commercial-new-landing-page-css .bess-section .bg-vector {
  right: -40px;
  bottom: -60px;
  width: 620px;
  height: 420px;
  opacity: 0.14;
}

.commercial-new-landing-page-css .bess-section .bg-vector.left-battery {
  left: -10px;
  top: -10px;
  bottom: auto;
  right: auto;
  width: 200px;
  height: 130px;
  opacity: 0.12;
}

.commercial-new-landing-page-css .bess-grid {
  display: grid;
  grid-template-columns: 58fr 42fr;
  align-items: center;
  gap: 40px;
}

.commercial-new-landing-page-css .bess-copy {
  min-width: 0;
}

.commercial-new-landing-page-css .bess-visual {
  min-width: 0;
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding-bottom: 56px;
}

/* small dot-grid accent bleeding off the photo's top-right corner, same device
   used in the About section, so the two feel like one visual system */
.commercial-new-landing-page-css .bess-visual::before {
  content: "";
  position: absolute;
  top: -18px;
  right: -16px;
  width: 80px;
  height: 80px;
  background-image: radial-gradient(var(--coral) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}

.commercial-new-landing-page-css .bess-photo-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.commercial-new-landing-page-css .bess-photo-wrap img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.commercial-new-landing-page-css .bess-photo-wrap::after {
  /* darken the lower half so the floating dashboard reads clearly against the photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 58, 0.1) 0%, rgba(14, 16, 42, 0.65) 100%);
}

.commercial-new-landing-page-css .bess-mini-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  font-weight: 600;
}

.commercial-new-landing-page-css .bess-mini-badge i {
  color: var(--coral-strong);
  font-size: 13px;
}

.commercial-new-landing-page-css .bess-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--coral-10);
  border: 1px solid rgba(231, 37, 68, 0.4);
  color: #ff9caa;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.commercial-new-landing-page-css .bess-badge i {
  color: var(--coral);
}

.commercial-new-landing-page-css .bess-section h2 {
  color: var(--white);
}

.commercial-new-landing-page-css .bess-section p.lead-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  margin: 18px 0 30px;
  max-width: 520px;
}

.commercial-new-landing-page-css .bess-mini-stats {
  display: flex;
  gap: 26px;
  margin-bottom: 32px;
}

.commercial-new-landing-page-css .mini-stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.commercial-new-landing-page-css .mini-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.commercial-new-landing-page-css .bess-mini-stats .mini-stat .val {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--coral);
}

.commercial-new-landing-page-css .bess-mini-stats .mini-stat .lbl {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

/* Radial dashboard graphic — floats as a glass panel, half over the photo,
   half spilling onto the section background so the two visuals read as one */
.commercial-new-landing-page-css .radial-dashboard {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -56px;
  transform: translateX(-50%);
  width: 208px;
  height: 208px;
  padding: 14px;
  box-sizing: border-box;
  background: rgba(22, 29, 74, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.commercial-new-landing-page-css .radial-dashboard svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.commercial-new-landing-page-css .radial-dashboard .track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 16;
}

.commercial-new-landing-page-css .radial-dashboard .progress {
  fill: none;
  stroke: var(--coral);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 754;
  stroke-dashoffset: 754;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.commercial-new-landing-page-css .radial-dashboard.in-view .progress {
  stroke-dashoffset: var(--offset, 300);
}

.commercial-new-landing-page-css .radial-dashboard-label {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.commercial-new-landing-page-css .radial-dashboard-label .big {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 34px;
  color: var(--white);
  line-height: 1;
}

.commercial-new-landing-page-css .radial-dashboard-label .small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
  max-width: 140px;
}

.commercial-new-landing-page-css .bess-section .btn-coral-outline {
  border: 2px solid var(--coral);
  color: var(--white);
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 700;
}

.commercial-new-landing-page-css .bess-section .btn-coral-outline:hover {
  background: var(--coral);
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   9. Industries — bento grid, two photo-backed feature tiles among six
   compact icon tiles. Replaces the old horizontal scroll-snap strip, which
   hid half its content behind a hover state and a scroll gesture mobile
   users had no way to discover.
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .industries-section .bg-vector {
  inset: 0;
  opacity: 0.05;
}

.commercial-new-landing-page-css .industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: row dense;
  gap: 20px;
}

.commercial-new-landing-page-css .industry-tile {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.commercial-new-landing-page-css .industry-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--coral-strong);
}

.commercial-new-landing-page-css .industry-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--coral-10);
  color: var(--coral-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin-bottom: 16px;
  flex: 0 0 auto;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.commercial-new-landing-page-css .industry-tile:hover .industry-icon {
  background: var(--gradient-coral);
  color: var(--white);
  transform: scale(1.08);
}

.commercial-new-landing-page-css .industry-tile h4 {
  margin-bottom: 6px;
  font-size: 17px;
}

.commercial-new-landing-page-css .industry-tile .base-desc {
  font-size: 13.5px;
  color: var(--navy-60);
  margin-bottom: 8px;
}

.commercial-new-landing-page-css .industry-benefit {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--coral-strong);
  font-weight: 500;
  margin-top: auto;
  padding-top: 8px;
}

.commercial-new-landing-page-css .industry-benefit i {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Featured (photo) tiles — Manufacturing & Warehousing spans 2x2, Logistics
   & Cold Storage spans 2x1; grid dense auto-flow slots the six compact
   tiles into the remaining cells without any manual placement. */
.commercial-new-landing-page-css .industry-tile.featured {
  grid-column: span 2;
  padding: 0;
  border: none;
  color: var(--white);
}

.commercial-new-landing-page-css .industry-tile.featured.tall {
  grid-row: span 2;
}

.commercial-new-landing-page-css .industry-tile.featured img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.commercial-new-landing-page-css .industry-tile.featured:hover img {
  transform: scale(1.06);
}

.commercial-new-landing-page-css .industry-tile.featured .industry-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 29, 74, 0.15) 0%, rgba(14, 16, 42, 0.88) 100%);
}

.commercial-new-landing-page-css .industry-tile.featured .industry-tile-content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 24px;
}

.commercial-new-landing-page-css .industry-tile.featured .industry-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 18px;
  margin-bottom: 14px;
}

.commercial-new-landing-page-css .industry-tile.featured h4 {
  color: var(--white);
  font-size: 19px;
}

.commercial-new-landing-page-css .industry-tile.featured .base-desc {
  color: rgba(255, 255, 255, 0.8);
}

.commercial-new-landing-page-css .industry-tile.featured .industry-benefit {
  color: #ffb7c2;
  margin-top: 8px;
  padding-top: 0;
}

/* -------------------------------------------------------------------------
   10. Process — alternating zig-zag vertical timeline
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .process-section .bg-vector {
  inset: 0;
  opacity: 0.08;
}

.commercial-new-landing-page-css .zigzag-timeline {
  position: relative;
  margin-top: 20px;
}

.commercial-new-landing-page-css .zigzag-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--coral-strong) 100%);
  opacity: 0.25;
  transform: translateX(-50%);
}

.commercial-new-landing-page-css .zigzag-step {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 56px;
}

.commercial-new-landing-page-css .zigzag-step:last-child {
  margin-bottom: 0;
}

.commercial-new-landing-page-css .zigzag-text {
  flex: 0 0 44%;
  max-width: 44%;
}

.commercial-new-landing-page-css .zigzag-icon-col {
  flex: 0 0 12%;
  max-width: 12%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.commercial-new-landing-page-css .zigzag-image {
  flex: 0 0 44%;
  max-width: 44%;
}

.commercial-new-landing-page-css .zigzag-image img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.commercial-new-landing-page-css .zigzag-step:hover .zigzag-image img {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

.commercial-new-landing-page-css .zigzag-step.reverse {
  flex-direction: row-reverse;
}

.commercial-new-landing-page-css .zigzag-step.reverse .zigzag-text {
  text-align: left;
}

.commercial-new-landing-page-css .zigzag-step:not(.reverse) .zigzag-text {
  text-align: right;
}

.commercial-new-landing-page-css .zigzag-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--coral-strong);
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.commercial-new-landing-page-css .zigzag-step:hover .zigzag-num {
  background: var(--gradient-coral);
  color: var(--white);
  transform: scale(1.08);
}

.commercial-new-landing-page-css .zigzag-text h4 {
  margin-bottom: 8px;
}

.commercial-new-landing-page-css .zigzag-text p {
  color: var(--navy-60);
  font-size: 15px;
  margin: 0;
}

/* -------------------------------------------------------------------------
   10b. Mid-page CTA band — gradient spotlight card between Process and FAQ
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .mid-cta-section {
  background: var(--off-white);
  padding: 56px 0;
}

.commercial-new-landing-page-css .mid-cta-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--gradient-power);
  color: var(--white);
  border-radius: 28px;
  padding: 64px 40px;
  box-shadow: var(--shadow-lg);
}

.commercial-new-landing-page-css .mid-cta-card::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--cyan-15) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.commercial-new-landing-page-css .mid-cta-card::after {
  content: "";
  position: absolute;
  bottom: -30%;
  right: -6%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(231, 37, 68, 0.25) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.commercial-new-landing-page-css .mid-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.commercial-new-landing-page-css .mid-cta-card .eyebrow {
  justify-content: center;
}

.commercial-new-landing-page-css .mid-cta-card h2 {
  font-size: 34px;
  margin-top: 14px;
  border-left: none;
  padding-left: 0;
  color: var(--white);
}

.commercial-new-landing-page-css .mid-cta-card h2::before {
  content: none;
}

.commercial-new-landing-page-css .mid-cta-card p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  margin: 16px 0 32px;
}

/* -------------------------------------------------------------------------
   11. FAQ — 35/65 sticky intro + accordion
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .faq-grid {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: 48px;
  align-items: start;
}

.commercial-new-landing-page-css .faq-intro-col {
  position: sticky;
  top: calc(var(--navbar-h) + 24px);
  min-width: 0;
}

.commercial-new-landing-page-css .faq-accordion-col {
  min-width: 0;
}

.commercial-new-landing-page-css .faq-intro-card {
  background: var(--off-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.commercial-new-landing-page-css .faq-intro-card p {
  color: var(--navy-60);
  font-size: 15.5px;
  margin: 14px 0 24px;
}

.commercial-new-landing-page-css .faq-intro-card .btn {
  width: 100%;
  text-align: center;
}

/* photo bleeds to the card's own edges via negative margin, rather than the
   card padding being reworked around it */
.commercial-new-landing-page-css .faq-intro-photo {
  position: relative;
  margin: -32px -28px 20px;
  height: 150px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}

.commercial-new-landing-page-css .faq-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.commercial-new-landing-page-css .faq-intro-photo-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.commercial-new-landing-page-css .faq-intro-photo-badge i {
  color: var(--coral-strong);
}

.commercial-new-landing-page-css .faq-section .accordion-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm) !important;
  margin-bottom: 14px;
  overflow: hidden;
}

.commercial-new-landing-page-css .faq-section .accordion-button {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  background: var(--white);
  padding: 20px 24px;
}

.commercial-new-landing-page-css .faq-section .accordion-button:not(.collapsed) {
  color: var(--navy);
  background: var(--coral-10);
  box-shadow: none;
}

.commercial-new-landing-page-css .faq-section .accordion-button:focus {
  box-shadow: 0 0 0 3px var(--coral-20);
}

.commercial-new-landing-page-css .faq-section .accordion-button::after {
  background-size: 16px;
  filter: invert(21%) sepia(78%) saturate(3000%) hue-rotate(335deg) brightness(90%);
}

.commercial-new-landing-page-css .faq-section .accordion-body {
  padding: 6px 24px 22px;
  color: var(--navy-60);
  font-size: 15px;
}

/* -------------------------------------------------------------------------
   12. Lead form — 45/55, overlapping raised card
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .lead-section {
  /* Matches the real site footer's own background-color (css/style.css
     .footer, #00184c) exactly — not --navy-dark (#14103a). The footer has a
     50px rounded top-corner cut that reads fine sitting on the light
     sections every other page ends on, but against this page's own dark
     final section the two different navy shades met at a hard, visibly
     curved seam. Same colour on both sides makes that corner disappear. */
  background: #00184c;
  color: var(--white);
  position: relative;
  padding: 40px 0;
}

/* was opacity 0.5 — every other section's decorative vector sits at 0.05–0.14,
   so this one read as a harsh debug-grid overlay rather than a texture */
.commercial-new-landing-page-css .lead-section .bg-vector {
  inset: 0;
  opacity: 0.1;
}

.commercial-new-landing-page-css .lead-section::before {
  /* same two-glow device as the hero, so the darkest section on the page
     doesn't feel flatter than the ones either side of it */
  content: "";
  position: absolute;
  top: -14%;
  right: -4%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--coral-20) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.commercial-new-landing-page-css .lead-section::after {
  content: "";
  position: absolute;
  bottom: -18%;
  left: -8%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--cyan-15) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.commercial-new-landing-page-css .lead-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  grid-template-rows: auto auto;
  align-items: start;
}

.commercial-new-landing-page-css .lead-intro {
  position: relative;
  z-index: 1;
  padding-top: 56px;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.commercial-new-landing-page-css .lead-form-col {
  position: relative;
  z-index: 2;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Was left with no rules at all — it inherited plain block flow, so on the
   desktop grid it auto-placed into row 2 under .lead-intro but with no top
   spacing or icon styling, letting it butt up against (and visually read as
   overlapping) the form card beside it. Pin it explicitly under the intro
   copy, in its own column, with real spacing. */
.commercial-new-landing-page-css .lead-direct {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin-top: 8px;
  padding: 15px 0px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.commercial-new-landing-page-css .lead-direct-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 14px;
}

.commercial-new-landing-page-css .lead-direct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.commercial-new-landing-page-css .lead-direct-row:last-child {
  margin-bottom: 0;
}

.commercial-new-landing-page-css .lead-direct-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--coral);
  font-size: 15px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.commercial-new-landing-page-css .lead-direct-row a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 500;
  transition: color var(--transition);
}

.commercial-new-landing-page-css .lead-direct-row:hover .lead-direct-icon {
  background: var(--coral-strong);
  border-color: var(--coral-strong);
  color: var(--white);
  transform: translateY(-2px);
}

.commercial-new-landing-page-css .lead-direct-row:hover a {
  color: var(--coral);
}

/* Interactive spotlight: a soft glow that follows the cursor across the
   section, giving the otherwise-static navy background a subtle sense of
   depth/response. Position is driven by --spot-x/--spot-y custom properties
   set from JS on pointer move; purely decorative, so it stays inert (opacity
   0) until hovered and never intercepts clicks. */
.commercial-new-landing-page-css .lead-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(560px circle at var(--spot-x, 50%) var(--spot-y, 20%), rgba(231, 37, 68, 0.16), transparent 62%);
  transition: opacity 0.5s ease;
}

.commercial-new-landing-page-css .lead-section:hover .lead-spotlight {
  opacity: 1;
}

.commercial-new-landing-page-css .lead-section h2 {
  color: var(--white);
}

.commercial-new-landing-page-css .lead-section .lead-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  margin-top: 14px;
}

.commercial-new-landing-page-css .lead-perks {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}

.commercial-new-landing-page-css .lead-perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}

.commercial-new-landing-page-css .lead-perks i {
  color: var(--coral);
  font-size: 18px;
}

.commercial-new-landing-page-css .lead-form-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 36px 36px;
  color: var(--navy);
  margin-top: -100px;
  /* card straddles the section edge above for depth, without drifting far from the intro copy */
  /* layered shadow: navy depth + a faint coral glow so the card reads as
     spotlit against the dark section instead of a plain flat panel */
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 70px -20px rgba(231, 37, 68, 0.35);
}

/* accent bar across the top edge — the first thing the eye catches against the dark background */
.commercial-new-landing-page-css .lead-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 4px;
  background: var(--gradient-coral);
  border-radius: 0 0 4px 4px;
}

.commercial-new-landing-page-css .lead-form-badge {
  position: absolute;
  top: -18px;
  left: 36px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-coral);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}

.commercial-new-landing-page-css .lead-form-badge i {
  font-size: 13px;
}

.commercial-new-landing-page-css .lead-form-card .form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 6px;
}

.commercial-new-landing-page-css .lead-form-card .form-control,
.commercial-new-landing-page-css .lead-form-card .form-select {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 15px;
  background: var(--off-white);
  color: var(--navy);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.commercial-new-landing-page-css .lead-form-card .form-control:focus,
.commercial-new-landing-page-css .lead-form-card .form-select:focus {
  border-color: var(--coral-strong);
  box-shadow: 0 0 0 3px var(--coral-20);
  background: var(--white);
}

.commercial-new-landing-page-css .lead-form-card .invalid-feedback {
  font-size: 13px;
  color: var(--coral-strong);
}

.commercial-new-landing-page-css .lead-form-card .form-control.is-invalid,
.commercial-new-landing-page-css .lead-form-card .form-select.is-invalid {
  border-color: var(--coral-strong);
}

.commercial-new-landing-page-css .lead-form-card .form-control.is-valid,
.commercial-new-landing-page-css .lead-form-card .form-select.is-valid {
  border-color: #1fae5f;
}

/* "Interested In" — segmented pill-button toggle group (replaces the old
   select). The native radio is visually hidden but stays in the DOM/tab
   order for accessibility; the label itself is styled as the button. */
.commercial-new-landing-page-css .interest-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.commercial-new-landing-page-css .interest-pill {
  position: relative;
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--off-white);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.commercial-new-landing-page-css .interest-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.commercial-new-landing-page-css .interest-pill span {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
  transition: color var(--transition);
}

.commercial-new-landing-page-css .interest-pill:hover {
  border-color: var(--coral-20);
  background: var(--white);
}

.commercial-new-landing-page-css .interest-pill:has(input:checked) {
  border-color: transparent;
  background: var(--gradient-coral);
  box-shadow: var(--shadow-sm);
}

.commercial-new-landing-page-css .interest-pill:has(input:checked) span {
  color: var(--white);
}

.commercial-new-landing-page-css .interest-pill:has(input:focus-visible) {
  outline: 2px solid var(--coral-strong);
  outline-offset: 3px;
}

.commercial-new-landing-page-css .interest-pill-group.is-invalid .interest-pill {
  border-color: var(--coral-strong);
}

.commercial-new-landing-page-css #interestFeedback.show {
  display: block;
}

.commercial-new-landing-page-css .form-microcopy {
  font-size: 13px;
  color: var(--navy-60);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.commercial-new-landing-page-css .form-microcopy i {
  color: var(--coral-strong);
}

/* --------------------------------------------------------------------------
   Call-on-holiday consent — only rendered while the callon_holiday row is
   active, so these styles are dormant the rest of the year.
   -------------------------------------------------------------------------- */
.commercial-new-landing-page-css .holiday-call-block {
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--off-white);
  padding: 14px 16px;
}

.commercial-new-landing-page-css .holiday-call-msg {
  display: block;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 10px;
}

.commercial-new-landing-page-css .holiday-call-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.commercial-new-landing-page-css .holiday-call-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 20px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.commercial-new-landing-page-css .holiday-call-option input {
  accent-color: var(--coral);
  margin: 0;
}

.commercial-new-landing-page-css .holiday-call-option:hover {
  border-color: var(--coral);
}

.commercial-new-landing-page-css .holiday-call-option:has(input:checked) {
  border-color: var(--coral);
  background: rgba(231, 37, 68, 0.06);
  color: var(--coral-strong);
}

.commercial-new-landing-page-css .holiday-call-option:has(input:focus-visible) {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.commercial-new-landing-page-css .holiday-call-block.is-invalid {
  border-color: var(--coral-strong);
}

.commercial-new-landing-page-css .holiday-call-block.is-invalid .holiday-call-option {
  border-color: var(--coral-strong);
}

.commercial-new-landing-page-css #holidayFeedback.show {
  display: block;
}

/* --------------------------------------------------------------------------
   Mobile OTP verification — revealed (d-none removed) once form_list issues
   the challenge, in place of the submit button.
   -------------------------------------------------------------------------- */
.commercial-new-landing-page-css .verifyModal {
  border: 1.5px solid var(--coral);
  border-radius: var(--radius-sm);
  background: rgba(231, 37, 68, 0.04);
  padding: 16px;
}

.commercial-new-landing-page-css .verifyModal .form-label {
  margin-bottom: 8px;
}

.commercial-new-landing-page-css #mobileOtp {
  letter-spacing: 6px;
  font-weight: 600;
  text-align: center;
  max-width: 220px;
}

.commercial-new-landing-page-css #otpmsg {
  display: none;
  font-size: 13px;
  margin-top: 8px;
  color: #157347;
}

.commercial-new-landing-page-css #otpmsg.show {
  display: block;
}

.commercial-new-landing-page-css #otpmsg.is-error {
  color: var(--coral-strong);
}

.commercial-new-landing-page-css .form-submit-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
}

.commercial-new-landing-page-css .form-alert {
  display: none;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition);
}

.commercial-new-landing-page-css .form-alert.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.commercial-new-landing-page-css .form-alert.success {
  background: rgba(31, 174, 95, 0.1);
  color: #17914e;
  border: 1px solid rgba(31, 174, 95, 0.35);
}

.commercial-new-landing-page-css .form-alert.error {
  background: var(--coral-10);
  color: var(--coral-strong);
  border: 1px solid rgba(231, 37, 68, 0.35);
}

/* -------------------------------------------------------------------------
   13. Footer — asymmetric columns (wide brand col + narrower link cols)
   ------------------------------------------------------------------------- */
.commercial-new-landing-page-css .site-footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.commercial-new-landing-page-css .footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.commercial-new-landing-page-css .footer-brand-col {
  flex: 1 1 320px;
  max-width: 380px;
}

.commercial-new-landing-page-css .footer-link-col {
  flex: 0 1 160px;
}

.commercial-new-landing-page-css .footer-contact-col {
  flex: 1 1 220px;
  max-width: 260px;
}

.commercial-new-landing-page-css .site-footer img.footer-logo {
  height: 32px;
  margin-bottom: 14px;
}

.commercial-new-landing-page-css .site-footer p.tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 300px;
}

.commercial-new-landing-page-css .site-footer h5 {
  color: var(--white);
  font-size: 15px;
  margin-bottom: 18px;
}

.commercial-new-landing-page-css .site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.commercial-new-landing-page-css .site-footer ul li {
  margin-bottom: 10px;
}

.commercial-new-landing-page-css .site-footer ul li a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  transition: color var(--transition), padding-left var(--transition);
}

.commercial-new-landing-page-css .site-footer ul li a:hover {
  color: var(--coral);
  padding-left: 4px;
}

.commercial-new-landing-page-css .footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
}

.commercial-new-landing-page-css .footer-contact i {
  color: var(--coral);
  margin-top: 3px;
}

.commercial-new-landing-page-css .social-icons {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.commercial-new-landing-page-css .social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.commercial-new-landing-page-css .social-icons a:hover {
  background: var(--coral-strong);
  border-color: var(--coral-strong);
  transform: translateY(-3px);
}

.commercial-new-landing-page-css .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 44px;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------------------
   14. Responsive tweaks — asymmetric splits collapse to single column
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .commercial-new-landing-page-css .section-pad {
    padding: 84px 0;
  }
}

@media (max-width: 991.98px) {
  .commercial-new-landing-page-css {
    --h1-size: 38px;
    --h2-size: 30px;
  }

  .commercial-new-landing-page-css .section-pad {
    padding: 68px 0;
  }

  .commercial-new-landing-page-css .hero {
    padding-top: 118px;
  }

  .commercial-new-landing-page-css .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .commercial-new-landing-page-css .hero-copy {
    position: relative;
    z-index: 2;
    padding-bottom: 44px;
  }

  /* The illustration can't stay a stacked row here. It's a square SVG shown
     with object-fit:contain, so in a full-width 260px band it letterboxed
     into the right-hand third — half the band was empty navy — while still
     pushing the headline ~340px down (top:-60/bottom:-20 grow the box past
     its own height, and that overflow also ran up under the fixed navbar).
     Below 992px it becomes a top-right texture behind the copy instead: the
     same job .bg-vector does in every other section, and the hero opens on
     the headline again. */
  .commercial-new-landing-page-css .hero-visual {
    position: absolute;
    top: -18px;
    right: 0;
    left: auto;
    width: 74%;
    max-width: 420px;
    height: 300px;
    order: 0;
    margin: 0;
    opacity: 0.32;
    z-index: 0;
  }

  .commercial-new-landing-page-css .hero-visual .bg-vector {
    top: 0;
    bottom: 0;
    left: 0;
    right: -6%;
  }

  .commercial-new-landing-page-css .hero-visual .bg-vector img {
    object-position: right top;
  }

  .commercial-new-landing-page-css .hero-float-card {
    display: none;
  }

  .commercial-new-landing-page-css .stat-item {
    padding: 24px 10px;
  }

  .commercial-new-landing-page-css .stat-number {
    font-size: 30px;
  }

  .commercial-new-landing-page-css .about-grid {
    grid-template-columns: 1fr;
  }

  .commercial-new-landing-page-css .about-visual {
    max-width: 420px;
  }

  .commercial-new-landing-page-css .pull-quote {
    font-size: 22px;
  }

  .commercial-new-landing-page-css .packages-row {
    flex-direction: column;
  }

  .commercial-new-landing-page-css .package-col,
.commercial-new-landing-page-css .package-col.featured-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* order must be set on the flex item itself (.featured-col), not the
     .package-card descendant inside it — order has no effect on non-items */
  .commercial-new-landing-page-css .package-col.featured-col {
    order: -1;
  }

  .commercial-new-landing-page-css .package-card.featured {
    margin-bottom: 24px;
  }

  .commercial-new-landing-page-css .bess-grid {
    grid-template-columns: 1fr;
  }

  .commercial-new-landing-page-css .bess-visual {
    order: -1;
    margin-bottom: 32px;
  }

  /* sized/positioned for the desktop 2-column split, where it sits clear of
     the copy — once the column stacks to full-width on mobile it bleeds
     straight across the disclaimer text and button instead */
  .commercial-new-landing-page-css .bess-section .bg-vector:not(.left-battery) {
    opacity: 0.05;
    width: 420px;
    height: 300px;
  }

  .commercial-new-landing-page-css .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The alternating two-sided timeline collapses to a single left rail. It's
     a grid rather than a wrapping flex row: with flex, .zigzag-text sized off
     its own (long) content, so it never fit beside the 64px marker column and
     dropped to a second line at full width — the rail then ran straight
     through the paragraph — while .zigzag-image combined flex-basis:100% with
     a 64px left margin and overflowed the container by exactly that margin.
     Grid places both in a real second column, so neither can happen, and it
     also neutralises the base flex-direction/order/flex-basis rules. */
  .commercial-new-landing-page-css .zigzag-step,
.commercial-new-landing-page-css .zigzag-step.reverse {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    margin-bottom: 34px;
  }

  .commercial-new-landing-page-css .zigzag-icon-col {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
  }

  /* matches the base rules' selector specificity (.zigzag-step:not(.reverse)
     .zigzag-text is 3 classes deep) — a plain ".zigzag-text" here loses the
     specificity fight and silently never applies, which is what was leaving
     steps 1/3/5 right-aligned against the edge on mobile */
  .commercial-new-landing-page-css .zigzag-step:not(.reverse) .zigzag-text,
.commercial-new-landing-page-css .zigzag-step.reverse .zigzag-text {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    max-width: none;
    padding-top: 4px;
  }

  /* photo sits under the copy, sharing the copy column so it lines up with
     the heading instead of hanging off the rail */
  .commercial-new-landing-page-css .zigzag-image {
    grid-column: 2;
    grid-row: 2;
    max-width: 400px;
    margin: 14px 0 0;
  }

  .commercial-new-landing-page-css .zigzag-image img {
    height: 150px;
  }

  .commercial-new-landing-page-css .zigzag-num {
    width: 52px;
    height: 52px;
    font-size: 17px;
  }

  /* rail centred on the 52px marker column */
  .commercial-new-landing-page-css .zigzag-timeline::before {
    left: 26px;
  }

  .commercial-new-landing-page-css .faq-grid {
    grid-template-columns: 1fr;
  }

  .commercial-new-landing-page-css .faq-intro-col {
    position: static;
    margin-bottom: 32px;
  }

  .commercial-new-landing-page-css .lead-grid {
    grid-template-columns: 1fr;
  }

  .commercial-new-landing-page-css .lead-intro {
    padding-top: 0;
    margin-bottom: 32px;
    grid-column: auto;
    grid-row: auto;
  }

  .commercial-new-landing-page-css .lead-form-col {
    grid-column: auto;
    grid-row: auto;
  }

  .commercial-new-landing-page-css .lead-form-card {
    margin-top: 0;
  }

  /* Source order puts .lead-direct after the form card, so on the stacked
     single-column layout it naturally lands underneath it instead of tucked
     under the intro copy — give it its own top margin instead of the
     border-top rule (which assumed it followed the intro directly). */
  .commercial-new-landing-page-css .lead-direct {
    grid-column: auto;
    grid-row: auto;
    margin-top: 32px;
    padding-top: 24px;
  }

  .commercial-new-landing-page-css .footer-link-col {
    flex: 0 1 45%;
  }
}

@media (max-width: 767.98px) {
  .commercial-new-landing-page-css {
    --h1-size: var(--h1-size-mobile);
    --h2-size: 28px;
    --h3-size: 21px;
  }

  .commercial-new-landing-page-css .section-pad {
    padding: 56px 0;
  }

  .commercial-new-landing-page-css .hero {
    padding-top: 104px;
  }

  .commercial-new-landing-page-css .hero-copy {
    padding-bottom: 36px;
  }

  /* the headline wraps across the whole column at this width, so the texture
     shrinks and fades further to stay clear of the type it sits behind */
  .commercial-new-landing-page-css .hero-visual {
    top: -10px;
    width: 88%;
    max-width: 300px;
    height: 224px;
    opacity: 0.22;
  }

  .commercial-new-landing-page-css .hero p.lead {
    font-size: 17px;
    margin-bottom: 28px;
  }

  .commercial-new-landing-page-css .hero-badge-row {
    gap: 10px 20px;
  }

  .commercial-new-landing-page-css .stats-strip .stats-inner {
    flex-wrap: wrap;
  }

  .commercial-new-landing-page-css .stat-item {
    flex: 0 0 50%;
    max-width: 50%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .commercial-new-landing-page-css .stat-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  .commercial-new-landing-page-css .stat-item:first-child,
.commercial-new-landing-page-css .stat-item:nth-child(2) {
    border-top: none;
  }

  .commercial-new-landing-page-css .trust-badges-row {
    flex-direction: column;
    gap: 14px;
  }

  .commercial-new-landing-page-css .trust-badge-inline {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }

  .commercial-new-landing-page-css .industries-grid {
    grid-template-columns: 1fr;
  }

  .commercial-new-landing-page-css .industry-tile.featured,
.commercial-new-landing-page-css .industry-tile.featured.tall {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 240px;
  }

  .commercial-new-landing-page-css .lead-form-card {
    padding: 26px 20px;
  }
}

@media (max-width: 575.98px) {
  .commercial-new-landing-page-css .hero {
    padding-top: 96px;
  }

  .commercial-new-landing-page-css .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .commercial-new-landing-page-css .hero-cta-group .btn {
    text-align: center;
  }

  /* pull the texture into the top-right corner so it stops running under the
     start of every headline line at phone widths */
  .commercial-new-landing-page-css .hero-visual {
    width: 70%;
    max-width: 240px;
    height: 186px;
    opacity: 0.2;
  }

  .commercial-new-landing-page-css .stat-item {
    flex: 0 0 100%;
    max-width: 100%;
    border-right: none !important;
  }

  /* one per row now, so only the very first item sits against the strip's own
     top border — item 2 was still inheriting the two-up rule's border-top:none
     and losing its divider */
  .commercial-new-landing-page-css .stat-item:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* side-by-side at this width forces "Up to $350k+" onto two cramped lines
     next to its icon; full-width rows give the value room on one line */
  .commercial-new-landing-page-css .bess-mini-stats {
    flex-direction: column;
    gap: 16px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .commercial-new-landing-page-css * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .commercial-new-landing-page-css .reveal {
    opacity: 1;
    transform: none;
  }

  .commercial-new-landing-page-css .hero-particles {
    display: none;
  }

  .commercial-new-landing-page-css .radial-dashboard .progress {
    transition: none;
  }
}