/* Sales Tracker: moving vehicles, pulsing stops, live badge, claim cards */
.vehicle rect,.vehicle path{fill:var(--orange-bright);stroke:none;animation:none;filter:none;stroke-dasharray:none}
.vehicle circle{fill:#0b141d;stroke:#fff;stroke-width:1;stroke-dasharray:none;animation:none}
.vehicle .v-halo{fill:rgb(255 152 79/18%);stroke:none;animation:halo 1.8s ease-out infinite!important}
.vehicle-b rect,.vehicle-b path{fill:var(--cyan)}.vehicle-b .v-halo{fill:rgb(119 193 203/20%)}
.route-stop{animation:stop-ring 2.6s ease-out infinite}
.stop-two{animation-delay:.6s}.stop-three{animation-delay:1.2s}.stop-four{animation-delay:1.8s}
.route-status>i{animation:live 1.4s ease-in-out infinite}
.route-label{animation:float-drift 6s ease-in-out infinite}
.mini-product{transition:transform .5s var(--ease)}.mini-product:hover{transform:translateY(-6px) rotate(-1deg)}
.mini-product img{animation:float-drift 7s ease-in-out infinite}
.claim-grid article{position:relative;overflow:hidden;transition:transform .4s var(--ease)}
.claim-grid article::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--orange),var(--cyan));transition:transform 1.4s var(--ease)}
.claim-grid.in-view article::before{transform:scaleX(1)}
.claim-grid article:hover{transform:translateY(-6px)}
.signal-row i{position:relative;overflow:hidden}.signal-row i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform:translateX(-100%);animation:sweep 3.2s ease-in-out infinite}
.signal-row:nth-child(2) i::after{animation-delay:.4s}.signal-row:nth-child(3) i::after{animation-delay:.8s}.signal-row:nth-child(4) i::after{animation-delay:1.2s}.signal-row:nth-child(5) i::after{animation-delay:1.6s}
.signal-row:hover{transform:translateX(8px)}
@keyframes halo{from{transform:scale(.5);opacity:1}to{transform:scale(2.2);opacity:0}}
@keyframes stop-ring{0%{box-shadow:0 0 0 0 rgb(119 193 203/60%)}100%{box-shadow:0 0 0 18px rgb(119 193 203/0)}}
@keyframes live{50%{opacity:.35;scale:.7}}
@keyframes sweep{60%,100%{transform:translateX(100%)}}
@keyframes float-drift{0%,100%{translate:0 0}50%{translate:0 -7px}}



/* =========================================================

   SALES TRACKER — PAGE-SPECIFIC STYLES

   Dark precision • Cyan illumination • Restrained orange

   ========================================================= */

/* ---------------------------------------------------------

   1. PAGE FOUNDATION

   --------------------------------------------------------- */

.sales-page {

  --sales-cyan: #76c2c9;

  --sales-cyan-bright: #a2e7e8;

  --sales-cyan-soft: rgb(118 194 201 / 12%);

  --sales-orange: #dc8a51;

  --sales-text: #e9eff0;

  --sales-muted: #a7b5bc;

  --sales-border: rgb(195 220 227 / 13%);

  --sales-panel: #101a23;

  --sales-panel-light: #14232d;

  position: relative;

  isolation: isolate;

}

.sales-page .page-section {

  position: relative;

}

.sales-page .section-kicker > span {

  background: var(--sales-cyan);

  box-shadow: 0 0 10px rgb(118 194 201 / 45%);

}

.sales-page .page-copy,

.sales-page .customer-copy,

.sales-page .editorial-split > div,

.sales-page .section-heading-row {

  min-width: 0;

}

/* ---------------------------------------------------------

   2. HERO SECTION

   --------------------------------------------------------- */

.sales-page .product-hero {

  background:

    radial-gradient(

      ellipse at 82% 45%,

      rgb(52 119 133 / 17%),

      transparent 36%

    ),

    radial-gradient(

      ellipse at 15% 95%,

      rgb(220 138 81 / 5%),

      transparent 32%

    ),

    linear-gradient(

      112deg,

      #080d14 3%,

      #0d1823 58%,

      #080e15

    );

}

.sales-page .product-hero::before {

  position: absolute;

  z-index: -1;

  top: 8%;

  right: -10%;

  width: min(52vw, 680px);

  aspect-ratio: 1;

  border: 1px solid rgb(118 194 201 / 7%);

  border-radius: 50%;

  background: radial-gradient(

    circle,

    rgb(118 194 201 / 5%),

    transparent 68%

  );

  content: "";

  pointer-events: none;

  animation: sales-orbit-glow 9s ease-in-out infinite alternate;

}

.sales-page .product-hero .page-copy h1 em {

  color: #aab8bf;

  -webkit-text-fill-color: #aab8bf;

  -webkit-text-stroke-width: 0;

  -webkit-text-stroke-color: transparent;

}

.sales-page .page-copy .page-lede {

  max-width: 550px;

  color: #b4c0c6;

}

.sales-page .product-back-link {

  transition:

    color 220ms ease,

    transform 220ms ease;

}

.sales-page .product-back-link:hover {

  color: var(--sales-cyan-bright);

  transform: translateX(-3px);

}

.sales-page .page-hero-foot {

  border-top-color: rgb(195 220 227 / 10%);

}

/* ---------------------------------------------------------

   3. ROUTE VISUAL

   --------------------------------------------------------- */

.sales-page .route-visual {

  position: relative;

  min-width: 0;

  min-height: 400px;

  isolation: isolate;

}

.sales-page .route-map {

  position: absolute;

  inset: 0;

  overflow: hidden;

  border: 1px solid rgb(118 194 201 / 12%);

  background-color: #0b141d;

  background-image:

    linear-gradient(

      rgb(184 214 222 / 4%) 1px,

      transparent 1px

    ),

    linear-gradient(

      90deg,

      rgb(184 214 222 / 4%) 1px,

      transparent 1px

    );

  background-size: 34px 34px;

  box-shadow:

    inset 0 0 70px rgb(4 10 15 / 70%),

    0 22px 65px rgb(0 0 0 / 20%);

}

.sales-page .route-grid {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(

      ellipse at 53% 43%,

      transparent 10%,

      rgb(11 20 29 / 24%) 57%,

      #0b141d 100%

    );

  pointer-events: none;

}

.sales-page .route-map::before {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    120deg,

    transparent 30%,

    rgb(118 194 201 / 5%) 48%,

    transparent 65%

  );

  content: "";

  transform: translateX(-100%);

  animation: sales-map-scan 8s ease-in-out infinite;

  pointer-events: none;

}

.sales-page .route-map svg {

  position: absolute;

  inset: 9% 5% 14%;

  width: 90%;

  height: 77%;

  overflow: visible;

}

.sales-page .route-map path {

  fill: none;

  stroke: var(--sales-cyan);

  stroke-width: 2;

  stroke-dasharray: 7 8;

  filter: drop-shadow(0 0 5px rgb(119 193 203 / 55%));

  animation: sales-route-flow 16s linear infinite;

}

.sales-page .route-map path.route-secondary {

  stroke: var(--sales-orange);

  stroke-width: 1.3;

  stroke-dasharray: 3 10;

  opacity: 0.8;

  animation-direction: reverse;

}

.sales-page .route-stop {

  position: absolute;

  z-index: 2;

  width: 12px;

  height: 12px;

  border: 2px solid var(--sales-cyan-bright);

  border-radius: 50%;

  background: #132c34;

  box-shadow: 0 0 15px rgb(119 193 203 / 65%);

  animation: sales-stop-pulse 3s ease-in-out infinite;

}

.sales-page .stop-one {

  top: 73%;

  left: 12%;

}

.sales-page .stop-two {

  top: 47%;

  left: 35%;

  animation-delay: 0.6s;

}

.sales-page .stop-three {

  top: 57%;

  left: 57%;

  animation-delay: 1.2s;

}

.sales-page .stop-four {

  top: 22%;

  left: 83%;

  animation-delay: 1.8s;

}

.sales-page .route-label {

  position: absolute;

  color: #8499a2;

  font-size: 0.44rem;

  letter-spacing: 0.12em;

}

.sales-page .label-north {

  top: 12%;

  right: 8%;

}

.sales-page .label-south {

  bottom: 20%;

  left: 9%;

}

.sales-page .route-status {

  position: absolute;

  right: 5%;

  bottom: 6%;

  display: flex;

  min-width: min(78%, 290px);

  align-items: center;

  gap: 0.65rem;

  padding: 0.72rem;

  border: 1px solid rgb(216 235 239 / 17%);

  background: rgb(16 27 36 / 94%);

  box-shadow: 0 12px 30px rgb(5 9 13 / 60%);

  backdrop-filter: blur(12px);

  transition:

    border-color 250ms ease,

    box-shadow 250ms ease;

}

.sales-page .route-map:hover .route-status {

  border-color: rgb(118 194 201 / 35%);

  box-shadow:

    0 12px 30px rgb(5 9 13 / 60%),

    0 0 24px rgb(118 194 201 / 7%);

}

.sales-page .route-status > i {

  width: 7px;

  height: 7px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--sales-cyan-bright);

  box-shadow: 0 0 10px rgb(118 194 201 / 75%);

  animation: sales-status-pulse 2s ease-in-out infinite;

}

.sales-page .route-status span:nth-child(2) {

  display: flex;

  min-width: 0;

  flex-direction: column;

}

.sales-page .route-status b {

  color: #eff1ed;

  font-size: 0.68rem;

  font-weight: 600;

}

.sales-page .route-status small {

  color: #95a4ab;

  font-size: 0.54rem;

}

.sales-page .route-status .mono {

  margin-left: auto;

  color: #9eb4b9;

  font-size: 0.42rem;

  white-space: nowrap;

}

/* ---------------------------------------------------------

   4. PRODUCT APP PREVIEW

   --------------------------------------------------------- */

.sales-page .mini-product {

  position: absolute;

  z-index: 3;

  top: -14px;

  right: -10px;

  display: flex;

  width: clamp(115px, 14vw, 158px);

  flex-direction: column;

  gap: 0.35rem;

  padding: 0.42rem;

  border: 1px solid rgb(119 193 203 / 30%);

  background: #101b24;

  box-shadow: 0 18px 38px rgb(0 0 0 / 44%);

  transform: rotate(2deg);

  transform-origin: center;

  transition:

    transform 300ms ease,

    border-color 300ms ease,

    box-shadow 300ms ease;

}

.sales-page .mini-product:hover {

  border-color: rgb(118 194 201 / 60%);

  box-shadow:

    0 22px 44px rgb(0 0 0 / 48%),

    0 0 25px rgb(118 194 201 / 10%);

  transform: rotate(0deg) translateY(-4px);

}

.sales-page .mini-product .mono {

  color: #9cabb1;

  font-size: 0.4rem;

  letter-spacing: 0.08em;

}

.sales-page .mini-product img {

  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

  background: transparent;

}

/* ---------------------------------------------------------

   5. BUSINESS ACCELERATORS

   --------------------------------------------------------- */

.sales-page .sales-overview {

background:

radial-gradient(

ellipse at 5% 50%,

rgb(118 194 201 / 4%),

transparent 40%

),

#080d14;

}

.sales-page .sales-overview .editorial-prose {

padding-top: 0.75rem;

}

.sales-page .sales-overview .editorial-prose p {

color: #b4c0c6;

line-height: 1.85;

}

.sales-page .accelerator-ribbon {

display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 0;

margin-top: clamp(2rem, 4vw, 3rem);

padding-top: 0;

border-top: 1px solid var(--sales-border);

}

/* Individual capability */

.sales-page .accelerator-ribbon span {

position: relative;

display: flex;

min-width: 0;

min-height: 76px;

align-items: center;

gap: 1rem;

padding: 1.1rem 1.25rem;

overflow-wrap: anywhere;

border: 0;

border-bottom: 1px solid var(--sales-border);

background: transparent;

color: #c3cdd1;

font-size: 0.78rem;

line-height: 1.6;

transition:

color 250ms ease,

background 250ms ease,

padding-left 250ms ease;

}

.sales-page .sales-overview .editorial-split {

align-items: start;

column-gap: clamp(2rem, 6vw, 6rem);

}

.sales-page .accelerator-ribbon span::before {

  position: absolute;

  top: 14px;

  bottom: 14px;

  left: 0;

  width: 2px;

  background: var(--sales-cyan);

  opacity: 0.45;

  content: "";

  transition:

    opacity 240ms ease,

    box-shadow 240ms ease;

}

.sales-page .accelerator-ribbon span:hover {

  transform: translateY(-3px);

  border-color: rgb(118 194 201 / 35%);

  background:

    linear-gradient(

      120deg,

      rgb(118 194 201 / 10%),

      rgb(16 26 35 / 95%) 75%

    );

  box-shadow: 0 10px 24px rgb(0 0 0 / 18%);

}

.sales-page .accelerator-ribbon span:hover::before {

  opacity: 1;

  box-shadow: 0 0 12px rgb(118 194 201 / 50%);

}

/* ---------------------------------------------------------

   6. SOLUTION SECTION

   --------------------------------------------------------- */

.sales-page .customer-operations {

  background:

    radial-gradient(

      ellipse at 92% 25%,

      rgb(118 194 201 / 6%),

      transparent 38%

    ),

    linear-gradient(

      110deg,

      #0a1118,

      #111b25 63%,

      #0a1118

    );

}

.sales-page .customer-layout {

  display: grid;

  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);

  align-items: center;

  gap: clamp(2rem, 6vw, 6rem);

}

.sales-page .customer-copy > p:last-child {

  max-width: 480px;

  margin-top: 1.1rem;

  color: #acbac0;

  line-height: 1.85;

}

.sales-page .signal-board {

  border-top: 1px solid rgb(220 237 241 / 18%);

}

.sales-page .signal-row {

  position: relative;

  display: grid;

  min-height: 68px;

  grid-template-columns: 1fr 1.25fr 12px;

  align-items: center;

  gap: 1rem;

  padding: 0.6rem 0.55rem;

  border-bottom: 1px solid rgb(220 237 241 / 12%);

  transition:

    padding 250ms ease,

    background 250ms ease,

    border-color 250ms ease;

}

.sales-page .signal-row::before {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    90deg,

    rgb(118 194 201 / 6%),

    transparent 75%

  );

  content: "";

  opacity: 0;

  transition: opacity 250ms ease;

  pointer-events: none;

}

.sales-page .signal-row:hover {

  padding-right: 0.85rem;

  padding-left: 0.85rem;

  border-bottom-color: rgb(118 194 201 / 28%);

}

.sales-page .signal-row:hover::before {

  opacity: 1;

}

.sales-page .signal-row span,

.sales-page .signal-row strong,

.sales-page .signal-row i {

  position: relative;

  z-index: 1;

}

.sales-page .signal-row span {

  color: #8598a0;

  font-size: 0.47rem;

  letter-spacing: 0.07em;

}

.sales-page .signal-row strong {

  color: #e5e9e8;

  font-size: 0.81rem;

  font-weight: 500;

  line-height: 1.5;

}

.sales-page .signal-row i {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--sales-cyan);

  box-shadow: 0 0 10px rgb(119 193 203 / 45%);

  transition:

    transform 250ms ease,

    box-shadow 250ms ease;

}

.sales-page .signal-row:hover i {

  transform: scale(1.3);

  box-shadow: 0 0 15px rgb(119 193 203 / 75%);

}

/* ---------------------------------------------------------

   7. SOLUTION CAPABILITIES

   --------------------------------------------------------- */

.sales-page .capability-section {

  background:

    radial-gradient(

      ellipse at 0% 50%,

      rgb(118 194 201 / 3%),

      transparent 45%

    ),

    #080d14;

}

.sales-page .capability-section .section-heading-row {

  margin-bottom: clamp(1.25rem, 2vw, 1.8rem);

}

.sales-page .capability-ledger {

  border-top: 1px solid var(--sales-border);

}

.sales-page .capability-ledger > div {

  position: relative;

  display: grid;

  grid-template-columns: 48px minmax(170px, 0.85fr) minmax(0, 1.5fr);

  align-items: center;

  gap: 1.25rem;

  min-height: 78px;

  padding: 1rem 1.1rem;

  border-bottom: 1px solid var(--sales-border);

  background: transparent;

  transition:

    padding 240ms ease,

    background 240ms ease,

    border-color 240ms ease;

}

.sales-page .capability-ledger > div::before {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  width: 2px;

  background: var(--sales-cyan);

  content: "";

  opacity: 0;

  transform: scaleY(0.3);

  transition:

    opacity 240ms ease,

    transform 240ms ease;

}

.sales-page .capability-ledger > div:hover {

  padding-right: 1.35rem;

  padding-left: 1.45rem;

  border-bottom-color: rgb(118 194 201 / 25%);

  background: linear-gradient(

    90deg,

    rgb(118 194 201 / 7%),

    transparent 75%

  );

}

.sales-page .capability-ledger > div:hover::before {

  opacity: 1;

  transform: scaleY(1);

}

.sales-page .capability-ledger > div > span {

  color: var(--sales-cyan);

  font: 500 0.65rem/1 var(--font-mono, "DM Mono", monospace);

  letter-spacing: 0.08em;

}

.sales-page .capability-ledger > div > strong {

  color: #e3eaec;

  font-size: 0.87rem;

  font-weight: 500;

  line-height: 1.5;

}

.sales-page .capability-ledger > div > small {

  color: #98aab2;

  font-size: 0.73rem;

  line-height: 1.7;

}

/* ---------------------------------------------------------

   8. SOFTWARE AS A SERVICE

   --------------------------------------------------------- */

.sales-page .sales-delivery {

  border-top: 1px solid rgb(220 237 241 / 7%);

  border-bottom: 1px solid rgb(220 237 241 / 7%);

  background:

    radial-gradient(

      ellipse at 88% 50%,

      rgb(118 194 201 / 7%),

      transparent 40%

    ),

    #0c141c;

}

.sales-page .sales-delivery .editorial-prose {

  padding-top: 0.75rem;

}

.sales-page .sales-delivery .editorial-prose p {

  color: #b1bec4;

}

/* ---------------------------------------------------------

   9. FEATURE SECTIONS

   --------------------------------------------------------- */

.sales-page .sales-features {

  background:

    radial-gradient(

      ellipse at 100% 20%,

      rgb(118 194 201 / 4%),

      transparent 36%

    ),

    #080d14;

}

.sales-page .sales-features .section-heading-row {

  margin-bottom: 1.75rem;

}

.sales-page .sales-feature {

  position: relative;

  display: grid;

  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

  align-items: center;

  gap: clamp(1.5rem, 4vw, 3.5rem);

  padding-block: clamp(1.5rem, 3vw, 2.5rem);

  border-top: 1px solid var(--sales-border);

}

.sales-page .sales-feature:last-child {

  border-bottom: 1px solid var(--sales-border);

}

.sales-page .sales-feature-copy {

  position: relative;

  z-index: 1;

  min-width: 0;

}

.sales-page .sales-feature-copy .section-kicker {

  margin-bottom: 0.65rem;

  color: #91a8b0;

}

.sales-page .sales-feature-copy h3 {

  margin: 0;

  color: #e7edef;

  font: 600 clamp(1.35rem, 2.2vw, 1.85rem)/1.25 var(--font-display);

  letter-spacing: -0.035em;

}

.sales-page .sales-feature-copy > p:last-child {

  max-width: 460px;

  margin-top: 0.8rem;

  margin-bottom: 0;

  color: #aab8bf;

  font-size: 0.88rem;

  line-height: 1.85;

}

.sales-page .sales-feature-media {

  position: relative;

  min-width: 0;

  min-height: 190px;

  overflow: hidden;

  isolation: isolate;

  border: 1px solid rgb(118 194 201 / 17%);

  background-color: #0d1821;

  background-image:

    linear-gradient(

      rgb(184 214 222 / 3%) 1px,

      transparent 1px

    ),

    linear-gradient(

      90deg,

      rgb(184 214 222 / 3%) 1px,

      transparent 1px

    );

  background-size: 27px 27px;

  box-shadow:

    inset 0 0 45px rgb(0 0 0 / 24%),

    0 14px 36px rgb(0 0 0 / 13%);

  transition:

    border-color 300ms ease,

    box-shadow 300ms ease,

    transform 300ms ease;

}

.sales-page .sales-feature:hover .sales-feature-media {

  transform: translateY(-3px);

  border-color: rgb(118 194 201 / 40%);

  box-shadow:

    inset 0 0 45px rgb(0 0 0 / 20%),

    0 18px 42px rgb(0 0 0 / 25%),

    0 0 25px rgb(118 194 201 / 5%);

}

.sales-page .sales-feature-media::before,

.sales-page .sales-feature-media::after {

  position: absolute;

  content: "";

  pointer-events: none;

}

/* Live Tracking — animated location points */

.sales-page #live-tracking .sales-feature-media {

  background:

    radial-gradient(

      circle at 25% 35%,

      rgb(118 194 201 / 11%),

      transparent 25%

    ),

    radial-gradient(

      circle at 78% 70%,

      rgb(118 194 201 / 8%),

      transparent 28%

    ),

    #0d1821;

}

.sales-page #live-tracking .sales-feature-media::before {

  inset: 18% 12%;

  background:

    linear-gradient(

      145deg,

      transparent 0 24%,

      rgb(118 194 201 / 75%) 24.2% 24.7%,

      transparent 25% 49%,

      rgb(118 194 201 / 65%) 49.2% 49.7%,

      transparent 50% 72%,

      rgb(220 138 81 / 70%) 72.2% 72.7%,

      transparent 73%

    );

  opacity: 0.75;

}

.sales-page #live-tracking .sales-feature-media::after {

  top: 25%;

  left: 23%;

  width: 10px;

  height: 10px;

  border: 2px solid var(--sales-cyan-bright);

  border-radius: 50%;

  background: #122a32;

  box-shadow:

    0 0 0 7px rgb(118 194 201 / 8%),

    0 0 0 14px rgb(118 194 201 / 4%),

    100px 52px 0 -1px var(--sales-cyan),

    100px 52px 0 5px rgb(118 194 201 / 12%),

    215px 85px 0 -1px var(--sales-orange),

    215px 85px 0 5px rgb(220 138 81 / 12%);

  animation: sales-location-pulse 3s ease-in-out infinite;

}

/* Route Optimization — connected route paths */

.sales-page #route-optimization .sales-feature-media {

  background:

    radial-gradient(

      ellipse at 48% 48%,

      rgb(118 194 201 / 8%),

      transparent 55%

    ),

    #0d1821;

}

.sales-page #route-optimization .sales-feature-media::before {

  inset: 0;

  background:

    linear-gradient(

      28deg,

      transparent 0 18%,

      rgb(118 194 201 / 65%) 18.2% 18.7%,

      transparent 18.9% 42%,

      rgb(118 194 201 / 55%) 42.2% 42.7%,

      transparent 42.9% 66%,

      rgb(220 138 81 / 70%) 66.2% 66.7%,

      transparent 66.9%

    );

  clip-path: polygon(

    0 35%,

    22% 35%,

    22% 65%,

    45% 65%,

    45% 28%,

    69% 28%,

    69% 74%,

    100% 74%,

    100% 78%,

    65% 78%,

    65% 33%,

    49% 33%,

    49% 70%,

    18% 70%,

    18% 40%,

    0 40%

  );

  opacity: 0.9;

}

.sales-page #route-optimization .sales-feature-media::after {

  top: 28%;

  left: 22%;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--sales-cyan-bright);

  box-shadow:

    0 0 12px rgb(118 194 201 / 75%),

    110px 70px 0 var(--sales-cyan),

    110px 70px 0 5px rgb(118 194 201 / 10%),

    220px 0 0 var(--sales-orange),

    220px 0 0 5px rgb(220 138 81 / 10%);

}

/* Product Coverage — subtle coverage hotspots */

.sales-page #product-coverage .sales-feature-media {

  background:

    radial-gradient(

      circle at 25% 40%,

      rgb(118 194 201 / 23%),

      transparent 19%

    ),

    radial-gradient(

      circle at 65% 32%,

      rgb(220 138 81 / 20%),

      transparent 17%

    ),

    radial-gradient(

      circle at 72% 75%,

      rgb(118 194 201 / 15%),

      transparent 22%

    ),

    #0d1821;

}

.sales-page #product-coverage .sales-feature-media::before {

  inset: 0;

  background:

    radial-gradient(

      ellipse at 30% 40%,

      transparent 0 10%,

      rgb(118 194 201 / 25%) 10.3% 10.7%,

      transparent 11% 19%,

      rgb(118 194 201 / 16%) 19.3% 19.7%,

      transparent 20%

    ),

    radial-gradient(

      ellipse at 65% 32%,

      transparent 0 8%,

      rgb(220 138 81 / 28%) 8.3% 8.7%,

      transparent 9% 17%,

      rgb(220 138 81 / 15%) 17.3% 17.7%,

      transparent 18%

    );

  animation: sales-coverage-glow 6s ease-in-out infinite alternate;

}

.sales-page #product-coverage .sales-feature-media::after {

  top: 39%;

  left: 30%;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--sales-cyan-bright);

  box-shadow:

    0 0 14px rgb(118 194 201 / 75%),

    135px -14px 0 var(--sales-orange),

    135px -14px 0 5px rgb(220 138 81 / 12%),

    100px 75px 0 var(--sales-cyan),

    100px 75px 0 5px rgb(118 194 201 / 12%);

}

/* ---------------------------------------------------------

   10. IMPLEMENTATION

   --------------------------------------------------------- */

.sales-page .sales-implementation {

  background:

    radial-gradient(

      ellipse at 0% 40%,

      rgb(118 194 201 / 5%),

      transparent 38%

    ),

    #0b131b;

}

.sales-page .sales-implementation .editorial-prose {

  padding-top: 0.75rem;

}

.sales-page .sales-implementation .editorial-prose p {

  color: #b1bec4;

}

/* ---------------------------------------------------------

   11. SUMMARY

   --------------------------------------------------------- */

.sales-page .sales-summary {

  border-top: 1px solid rgb(220 237 241 / 9%);

  background:

    radial-gradient(

      ellipse at 90% 60%,

      rgb(118 194 201 / 6%),

      transparent 42%

    ),

    #080d14;

}

.sales-page .sales-summary .editorial-prose {

  padding-top: 0.75rem;

}

.sales-page .sales-summary .editorial-prose p {

  color: #b8c3c8;

}

/* ---------------------------------------------------------

   12. PRODUCTIVITY METRICS

   Kept available if the existing metrics band is reused.

   --------------------------------------------------------- */

.sales-page .claim-band {

  padding-block: clamp(2rem, 3vw, 2.75rem);

  border-block: 1px solid rgb(229 239 242 / 9%);

  background: linear-gradient(100deg, #111b24, #0b131b);

}

.sales-page .claim-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

}

.sales-page .claim-grid article {

  position: relative;

  min-width: 0;

  min-height: 150px;

  padding: 1.4rem;

  border: 1px solid rgb(118 194 201 / 12%);

  border-left: 2px solid rgb(118 194 201 / 48%);

  background: linear-gradient(

    130deg,

    rgb(118 194 201 / 6%),

    transparent 70%

  );

  transition:

    border-color 250ms ease,

    background 250ms ease,

    transform 250ms ease;

}

.sales-page .claim-grid article:hover {

  transform: translateY(-3px);

  border-color: rgb(118 194 201 / 32%);

  background: linear-gradient(

    130deg,

    rgb(118 194 201 / 10%),

    transparent 75%

  );

}

.sales-page .claim-grid article:nth-child(2) {

  border-left-color: rgb(220 138 81 / 60%);

  background: linear-gradient(

    130deg,

    rgb(220 138 81 / 5%),

    transparent 70%

  );

}

.sales-page .claim-grid .mono {

  color: #9eabb1;

  font-size: 0.55rem;

}

.sales-page .claim-grid strong {

  display: block;

  margin-top: 0.5rem;

  color: #f4f4f1;

  font: 600 clamp(2.25rem, 3.5vw, 3.25rem)/1 var(--font-display);

  letter-spacing: -0.06em;

}

.sales-page .claim-grid p {

  max-width: 420px;

  margin: 0.75rem 0 0;

  color: #aab6bc;

  font-size: 0.78rem;

  line-height: 1.65;

}

/* ---------------------------------------------------------

   13. ANIMATIONS

   --------------------------------------------------------- */

@keyframes sales-route-flow {

  to {

    stroke-dashoffset: -240;

  }

}

@keyframes sales-stop-pulse {

  0%,

  100% {

    box-shadow: 0 0 8px rgb(119 193 203 / 35%);

  }

  50% {

    box-shadow:

      0 0 16px rgb(119 193 203 / 75%),

      0 0 0 5px rgb(119 193 203 / 7%);

  }

}

@keyframes sales-status-pulse {

  0%,

  100% {

    opacity: 0.7;

    box-shadow: 0 0 6px rgb(118 194 201 / 50%);

  }

  50% {

    opacity: 1;

    box-shadow: 0 0 13px rgb(118 194 201 / 85%);

  }

}

@keyframes sales-map-scan {

  0%,

  20% {

    transform: translateX(-100%);

    opacity: 0;

  }

  45% {

    opacity: 1;

  }

  75%,

  100% {

    transform: translateX(100%);

    opacity: 0;

  }

}

@keyframes sales-orbit-glow {

  from {

    opacity: 0.55;

    transform: scale(0.97);

  }

  to {

    opacity: 1;

    transform: scale(1.03);

  }

}

@keyframes sales-location-pulse {

  0%,

  100% {

    box-shadow:

      0 0 0 7px rgb(118 194 201 / 8%),

      0 0 0 14px rgb(118 194 201 / 4%),

      100px 52px 0 -1px var(--sales-cyan),

      100px 52px 0 5px rgb(118 194 201 / 12%),

      215px 85px 0 -1px var(--sales-orange),

      215px 85px 0 5px rgb(220 138 81 / 12%);

  }

  50% {

    box-shadow:

      0 0 0 11px rgb(118 194 201 / 5%),

      0 0 0 20px rgb(118 194 201 / 2%),

      100px 52px 0 -1px var(--sales-cyan),

      100px 52px 0 8px rgb(118 194 201 / 8%),

      215px 85px 0 -1px var(--sales-orange),

      215px 85px 0 8px rgb(220 138 81 / 7%);

  }

}

@keyframes sales-coverage-glow {

  from {

    opacity: 0.65;

    transform: scale(0.99);

  }

  to {

    opacity: 1;

    transform: scale(1.015);

  }

}

/* ---------------------------------------------------------

   14. TABLET RESPONSIVENESS

   --------------------------------------------------------- */

@media (max-width: 900px) {

  .sales-page .product-hero-layout {

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  }

  .sales-page .route-visual {

    min-height: 350px;

  }

  .sales-page .customer-layout {

    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: 2rem;

  }

  .sales-page .accelerator-ribbon {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .sales-page .capability-ledger > div {

    grid-template-columns: 36px minmax(140px, 0.9fr) minmax(0, 1.3fr);

    gap: 0.85rem;

  }

  .sales-page .sales-feature {

    gap: 1.5rem;

  }

  .sales-page .sales-feature-media {

    min-height: 175px;

  }

}

/* ---------------------------------------------------------

   15. MOBILE RESPONSIVENESS

   --------------------------------------------------------- */

@media (max-width: 640px) {

  .sales-page .product-hero-layout {

    grid-template-columns: minmax(0, 1fr);

  }

  .sales-page .product-hero .page-copy h1 {

    font-size: clamp(2.3rem, 8vw, 3rem);

  }

  .sales-page .page-copy .page-lede {

    font-size: 0.92rem;

    line-height: 1.75;

  }

  .sales-page .route-visual {

    min-height: 285px;

    margin-top: 0.8rem;

  }

  .sales-page .mini-product {

    top: -8px;

    right: 8px;

    width: 112px;

  }

  .sales-page .route-status {

    right: 3%;

    bottom: 4%;

    min-width: 75%;

    gap: 0.5rem;

    padding: 0.6rem;

  }

  .sales-page .route-status b {

    font-size: 0.62rem;

  }

  .sales-page .route-status small {

    font-size: 0.5rem;

  }

  .sales-page .route-status .mono {

    font-size: 0.38rem;

  }

  .sales-page .page-hero-foot {

    gap: 0.5rem;

    font-size: 0.48rem;

  }

  .sales-page .editorial-split {

    grid-template-columns: minmax(0, 1fr);

    gap: 0.8rem;

  }

  .sales-page .sales-overview .editorial-prose,

  .sales-page .sales-delivery .editorial-prose,

  .sales-page .sales-implementation .editorial-prose,

  .sales-page .sales-summary .editorial-prose {

    padding-top: 0;

  }

  .sales-page .accelerator-ribbon {

    grid-template-columns: minmax(0, 1fr);

    gap: 0.5rem;

    margin-top: 1.5rem;

  }

  .sales-page .accelerator-ribbon span {

    min-height: 48px;

    padding: 0.7rem 0.85rem 0.7rem 1rem;

  }

  .sales-page .customer-layout {

    grid-template-columns: minmax(0, 1fr);

    gap: 1.5rem;

  }

  .sales-page .signal-row {

    grid-template-columns: minmax(95px, 0.85fr) minmax(0, 1.2fr) 8px;

    gap: 0.55rem;

    min-height: 62px;

    padding-inline: 0.25rem;

  }

  .sales-page .signal-row span {

    font-size: 0.42rem;

  }

  .sales-page .signal-row strong {

    font-size: 0.74rem;

  }

  .sales-page .capability-ledger > div {

    grid-template-columns: 28px minmax(0, 1fr);

    gap: 0.45rem 0.75rem;

    padding: 0.9rem 0.55rem;

  }

  .sales-page .capability-ledger > div > small {

    grid-column: 2;

    font-size: 0.7rem;

  }

  .sales-page .capability-ledger > div > strong {

    font-size: 0.82rem;

  }

  .sales-page .sales-feature {

    grid-template-columns: minmax(0, 1fr);

    gap: 1rem;

    padding-block: 1.5rem;

  }

  .sales-page .sales-feature-copy h3 {

    font-size: 1.45rem;

  }

  .sales-page .sales-feature-copy > p:last-child {

    font-size: 0.84rem;

  }

  .sales-page .sales-feature-media {

    min-height: 165px;

  }

  .sales-page .claim-grid {

    grid-template-columns: minmax(0, 1fr);

  }

  .sales-page .claim-grid article {

    min-height: 125px;

    padding: 1.2rem;

  }

}

/* ---------------------------------------------------------

   16. SMALL MOBILE SCREENS

   --------------------------------------------------------- */

@media (max-width: 380px) {

  .sales-page .route-visual {

    min-height: 245px;

  }

  .sales-page .mini-product {

    width: 94px;

  }

  .sales-page .route-status {

    min-width: 82%;

  }

  .sales-page .route-status .mono {

    display: none;

  }

  .sales-page .signal-row {

    grid-template-columns: minmax(78px, 0.8fr) minmax(0, 1.2fr) 7px;

  }

  .sales-page .sales-feature-media {

    min-height: 145px;

  }

}

/* ---------------------------------------------------------

   17. ACCESSIBILITY — REDUCED MOTION

   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .sales-page \*,

  .sales-page \*::before,

  .sales-page \*::after {

    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}



/* =========================================================
   REFINED LAYOUT OVERRIDES
   Compact vertical rhythm • Smaller editorial imagery
   ========================================================= */

/* Keep sections connected instead of leaving oversized gaps. */
.sales-page .page-section:not(.product-hero) {
  padding-block: clamp(2rem, 3.1vw, 3.1rem);
}

.sales-page .sales-overview .editorial-prose,
.sales-page .sales-delivery .editorial-prose,
.sales-page .sales-implementation .editorial-prose,
.sales-page .sales-summary .editorial-prose {
  padding-top: 0;
}

.sales-page .sales-overview .editorial-split,
.sales-page .sales-delivery .editorial-split,
.sales-page .sales-implementation .editorial-split,
.sales-page .sales-summary .editorial-split {
  align-items: start;
  row-gap: 1.1rem;
}

.sales-page .sales-overview .accelerator-ribbon {
  margin-top: clamp(1.25rem, 2.2vw, 1.8rem);
}

.sales-page .capability-section .section-heading-row {
  margin-bottom: 1rem;
}

/* Business accelerators: compact, distinct cards rather than long rows. */
.sales-page .accelerator-ribbon {
  gap: 0.65rem;
  margin-top: 1.4rem;
  border-top: 0;
}

.sales-page .accelerator-ribbon span {
  min-height: 62px;
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  border: 1px solid rgb(195 220 227 / 12%);
  background: linear-gradient(135deg, rgb(17 29 39 / 88%), rgb(9 16 23 / 88%));
  border-radius: 3px;
  font-size: 0.76rem;
  line-height: 1.45;
}

.sales-page .accelerator-ribbon span::before {
  top: 12px;
  bottom: 12px;
  left: 0;
}

.sales-page .accelerator-ribbon span:hover {
  transform: translateY(-2px);
  padding-left: 1.2rem;
  border-color: rgb(118 194 201 / 28%);
  background: linear-gradient(125deg, rgb(118 194 201 / 8%), rgb(16 26 35 / 96%) 78%);
  box-shadow: 0 8px 18px rgb(0 0 0 / 16%);
}

/* Capabilities: a tidy two-column card grid with less vertical bulk. */
.sales-page .capability-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  border-top: 0;
}

.sales-page .capability-ledger > div {
  grid-template-columns: 28px minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 0.7rem;
  min-height: 68px;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgb(195 220 227 / 12%);
  border-radius: 3px;
  background: linear-gradient(135deg, rgb(17 29 39 / 72%), rgb(8 14 20 / 84%));
}

.sales-page .capability-ledger > div:hover {
  padding: 0.8rem 0.9rem 0.8rem 1.05rem;
  border-color: rgb(118 194 201 / 27%);
  background: linear-gradient(100deg, rgb(118 194 201 / 7%), rgb(10 18 25 / 92%) 76%);
}

.sales-page .capability-ledger > div > strong {
  font-size: 0.81rem;
}

.sales-page .capability-ledger > div > small {
  font-size: 0.69rem;
  line-height: 1.55;
}

/* Editorial feature rows: compact spacing and varied image compositions. */
.sales-page .sales-features {
  padding-top: clamp(1.5rem, 2.5vw, 2.3rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2.3rem);
}

.sales-page .sales-features .section-heading-row {
  margin-bottom: 0.5rem;
}

.sales-page .sales-feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2.6rem);
  padding-block: clamp(1.25rem, 2vw, 1.8rem);
}

.sales-page .sales-feature-copy .section-kicker {
  margin-bottom: 0.45rem;
}

.sales-page .sales-feature-copy > p:last-child {
  margin-top: 0.6rem;
  line-height: 1.7;
}

/* Images stay inside small, restrained frames instead of dominating the page. */
.sales-page .sales-feature-media {
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 218px;
  justify-self: end;
  overflow: hidden;
  border-radius: 3px;
  background-color: #0b141c;
  box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
}

.sales-page .sales-feature-media .feature-image,
.sales-page .sales-feature-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

/* First image: restrained landscape crop. */
.sales-page #live-tracking .sales-feature-media {
  max-width: 410px;
  aspect-ratio: 16 / 9;
}

/* Second feature reverses the composition and uses a narrower, taller frame. */
.sales-page #route-optimization {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.sales-page #route-optimization .sales-feature-media {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  max-width: 330px;
  aspect-ratio: 5 / 4;
}

.sales-page #route-optimization .sales-feature-copy {
  grid-column: 2;
  grid-row: 1;
}

/* Third image is smaller and aligned to the outside edge for a less repetitive rhythm. */
.sales-page #product-coverage .sales-feature-media {
  max-width: 365px;
  aspect-ratio: 3 / 2;
  justify-self: end;
}

/* Real image assets replace the CSS-generated map artwork. */
.sales-page #live-tracking .sales-feature-media::before,
.sales-page #live-tracking .sales-feature-media::after,
.sales-page #route-optimization .sales-feature-media::before,
.sales-page #route-optimization .sales-feature-media::after,
.sales-page #product-coverage .sales-feature-media::before,
.sales-page #product-coverage .sales-feature-media::after {
  display: none;
  content: none;
}

/* Prevent the text/media rows from creating oversized empty areas on tablets. */
@media (max-width: 900px) {
  .sales-page .page-section:not(.product-hero) {
    padding-block: 2rem;
  }

  .sales-page .sales-feature {
    gap: 1.25rem;
    padding-block: 1.25rem;
  }

  .sales-page .sales-feature-media {
    max-height: 190px;
  }

  .sales-page #route-optimization .sales-feature-media {
    max-width: 290px;
  }
}

/* Mobile: tighter spacing, small images, and natural text-first flow. */
@media (max-width: 640px) {
  .sales-page .page-section:not(.product-hero) {
    padding-block: 1.65rem;
  }

  .sales-page .accelerator-ribbon {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin-top: 1.1rem;
  }

  .sales-page .accelerator-ribbon span {
    min-height: 54px;
    padding: 0.75rem 0.9rem 0.75rem 1rem;
  }

  .sales-page .capability-ledger {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .sales-page .capability-ledger > div {
    grid-template-columns: 24px minmax(0, 0.9fr) minmax(0, 1.2fr);
    min-height: 60px;
    gap: 0.6rem;
    padding: 0.7rem;
  }

  .sales-page .sales-features {
    padding-block: 1.3rem;
  }

  .sales-page .sales-feature,
  .sales-page #route-optimization {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    padding-block: 1.15rem;
  }

  .sales-page .sales-feature-copy,
  .sales-page #route-optimization .sales-feature-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .sales-page .sales-feature-media,
  .sales-page #live-tracking .sales-feature-media,
  .sales-page #route-optimization .sales-feature-media,
  .sales-page #product-coverage .sales-feature-media {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: min(88%, 340px);
    max-width: 340px;
    max-height: 170px;
    aspect-ratio: 16 / 9;
  }

  .sales-page #route-optimization .sales-feature-media {
    order: 2;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .sales-page .accelerator-ribbon span,
  .sales-page .capability-ledger > div,
  .sales-page .sales-feature-media {
    transition: none;
  }
}



/* =========================================================
   SECTION REDESIGN — BUSINESS ACCELERATORS / SAAS /
   IMPLEMENTATION / SUMMARY
   ========================================================= */

/* Shared: stack the section title above its body content.
   Keep the existing heading typography untouched. */
.sales-page .sales-overview > .shell.editorial-split,
.sales-page .sales-delivery > .shell.editorial-split,
.sales-page .sales-implementation > .shell.editorial-split,
.sales-page .sales-summary > .shell.editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.8rem;
}

.sales-page .sales-overview > .shell.editorial-split > div:first-child,
.sales-page .sales-delivery > .shell.editorial-split > div:first-child,
.sales-page .sales-implementation > .shell.editorial-split > div:first-child,
.sales-page .sales-summary > .shell.editorial-split > div:first-child {
  max-width: 760px;
}

.sales-page .sales-overview .editorial-prose,
.sales-page .sales-delivery .editorial-prose,
.sales-page .sales-implementation .editorial-prose,
.sales-page .sales-summary .editorial-prose {
  max-width: 900px;
  padding-top: 0;
}

.sales-page .sales-overview .editorial-prose p,
.sales-page .sales-delivery .editorial-prose p,
.sales-page .sales-implementation .editorial-prose p,
.sales-page .sales-summary .editorial-prose p {
  margin-block: 0 0.7rem;
  line-height: 1.72;
}

.sales-page .sales-overview .editorial-prose p:last-child,
.sales-page .sales-delivery .editorial-prose p:last-child,
.sales-page .sales-implementation .editorial-prose p:last-child,
.sales-page .sales-summary .editorial-prose p:last-child {
  margin-bottom: 0;
}

/* BUSINESS ACCELERATORS
   Stronger visual treatment: a compact feature-card grid beneath
   the intro, rather than plain horizontal list items. */
.sales-page .sales-overview {
  padding-block: clamp(2.1rem, 3.4vw, 3rem);
  background:
    radial-gradient(ellipse at 4% 12%, rgb(118 194 201 / 8%), transparent 36%),
    linear-gradient(180deg, #0a1118 0%, #080d14 100%);
}

.sales-page .sales-overview > .shell.editorial-split {
  gap: 0.65rem;
}

.sales-page .sales-overview .editorial-prose {
  margin-top: 0;
}

.sales-page .sales-overview .accelerator-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: clamp(1.25rem, 2vw, 1.7rem);
  padding: 0;
  border: 0;
}

.sales-page .sales-overview .accelerator-ribbon span {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(195 220 227 / 13%);
  border-radius: 4px;
  background:
    linear-gradient(140deg, rgb(22 37 47 / 94%), rgb(10 17 24 / 96%));
  color: #d4dfe2;
  font-size: 0.77rem;
  line-height: 1.5;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.sales-page .sales-overview .accelerator-ribbon span::before {
  top: 15px;
  bottom: 15px;
  opacity: 0.75;
}

.sales-page .sales-overview .accelerator-ribbon span:hover {
  transform: translateY(-2px);
  padding-left: 1rem;
  border-color: rgb(118 194 201 / 38%);
  background:
    linear-gradient(140deg, rgb(118 194 201 / 10%), rgb(12 22 30 / 98%) 78%);
  box-shadow: 0 9px 22px rgb(0 0 0 / 20%);
}

/* SAAS
   A distinct, contained panel with a quiet cyan edge and a compact
   two-paragraph reading width. */
.sales-page .sales-delivery {
  margin-inline: auto;
  padding-block: clamp(1.8rem, 2.8vw, 2.5rem);
  border-block: 0;
  background:
    radial-gradient(ellipse at 95% 10%, rgb(118 194 201 / 8%), transparent 34%),
    #0b1219;
}

.sales-page .sales-delivery > .shell.editorial-split {
  gap: 0.7rem;
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
  border: 1px solid rgb(118 194 201 / 17%);
  border-left: 2px solid rgb(118 194 201 / 62%);
  border-radius: 4px;
  background: linear-gradient(115deg, rgb(17 29 38 / 88%), rgb(9 16 23 / 88%));
  box-shadow: 0 14px 32px rgb(0 0 0 / 15%);
}

.sales-page .sales-delivery .editorial-prose {
  max-width: 850px;
}

.sales-page .sales-delivery .editorial-prose p + p {
  margin-top: 0.45rem;
  color: #c0cdd1;
}

/* IMPLEMENTATION
   The title now sits directly above the paragraph; a small top rule
   gives the section its own identity without adding excess whitespace. */
.sales-page .sales-implementation {
  padding-block: clamp(1.8rem, 2.8vw, 2.5rem);
  background:
    radial-gradient(ellipse at 0% 50%, rgb(118 194 201 / 4%), transparent 42%),
    #080d14;
}

.sales-page .sales-implementation > .shell.editorial-split {
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(195 220 227 / 15%);
}

.sales-page .sales-implementation .editorial-prose {
  max-width: 850px;
}

/* SUMMARY
   A concise closing panel; heading and copy form one vertical unit. */
.sales-page .sales-summary {
  padding-block: clamp(1.8rem, 2.8vw, 2.5rem);
  border-top: 1px solid rgb(220 237 241 / 9%);
  background:
    radial-gradient(ellipse at 100% 50%, rgb(118 194 201 / 7%), transparent 38%),
    linear-gradient(180deg, #0b131b 0%, #080d14 100%);
}

.sales-page .sales-summary > .shell.editorial-split {
  gap: 0.7rem;
  padding: clamp(1.1rem, 2.2vw, 1.55rem);
  border: 1px solid rgb(195 220 227 / 12%);
  border-radius: 4px;
  background: linear-gradient(120deg, rgb(17 29 38 / 70%), rgb(8 14 20 / 62%));
}

.sales-page .sales-summary .editorial-prose {
  max-width: 900px;
}

/* Smaller screens: preserve the stacked hierarchy and compact rhythm. */
@media (max-width: 900px) {
  .sales-page .sales-overview .accelerator-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sales-page .sales-overview,
  .sales-page .sales-delivery,
  .sales-page .sales-implementation,
  .sales-page .sales-summary {
    padding-block: 1.5rem;
  }

  .sales-page .sales-overview .accelerator-ribbon {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .sales-page .sales-overview .accelerator-ribbon span {
    min-height: 54px;
    padding: 0.75rem 0.85rem;
  }

  .sales-page .sales-delivery > .shell.editorial-split,
  .sales-page .sales-summary > .shell.editorial-split {
    padding: 1rem;
  }
}

/* =========================================================
   VISUAL BALANCE PASS — LIGHTER SECTIONS + STRONGER CLOSING
   This final layer intentionally softens the page's black-heavy
   look without changing any heading font sizes or HTML content.
   ========================================================= */

/* Give the lower half of the page a more visible blue-slate surface. */
.sales-page .sales-implementation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 4.2vw, 4rem);
  background:
    radial-gradient(ellipse at 8% 0%, rgb(112 202 216 / 19%), transparent 38%),
    radial-gradient(ellipse at 92% 100%, rgb(89 132 190 / 18%), transparent 42%),
    linear-gradient(125deg, #14232e 0%, #101d29 52%, #14212e 100%);
}

.sales-page .sales-implementation::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 7%;
  width: min(34vw, 430px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #8bd6df, #e1a16f, transparent);
  content: "";
  opacity: 0.85;
}

.sales-page .sales-implementation > .shell.editorial-split {
  position: relative;
  gap: 1.1rem;
  padding: clamp(1.25rem, 2.7vw, 2rem);
  border: 1px solid rgb(180 220 229 / 20%);
  border-radius: 8px;
  background: linear-gradient(115deg, rgb(28 47 61 / 86%), rgb(20 35 48 / 78%));
  box-shadow: 0 20px 55px rgb(0 0 0 / 14%), inset 0 1px 0 rgb(255 255 255 / 4%);
}

.sales-page .sales-implementation .section-kicker {
  color: #a9dce2;
}

.sales-page .sales-implementation .editorial-prose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  max-width: none;
}

.sales-page .sales-implementation .editorial-prose p {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 1.2rem 1.2rem 1.25rem 1.35rem;
  border: 1px solid rgb(167 210 221 / 16%);
  border-top: 2px solid rgb(126 207 218 / 76%);
  border-radius: 5px;
  background: linear-gradient(145deg, rgb(46 70 85 / 88%), rgb(30 49 63 / 88%));
  color: #d5e1e5;
  line-height: 1.78;
  box-shadow: 0 10px 26px rgb(0 0 0 / 10%);
}

.sales-page .sales-implementation .editorial-prose p + p {
  border-top-color: rgb(225 161 111 / 82%);
  background: linear-gradient(145deg, rgb(49 64 75 / 90%), rgb(33 47 59 / 90%));
}

.sales-page .sales-implementation .editorial-prose p::before {
  display: block;
  margin-bottom: 0.65rem;
  color: #8fd5df;
  content: "01 / INTEGRATE";
  font: 600 0.64rem/1.3 var(--font-mono, monospace);
  letter-spacing: 0.13em;
}

.sales-page .sales-implementation .editorial-prose p + p::before {
  color: #e4ad81;
  content: "02 / PILOT & ADOPT";
}

/* Make Summary feel like a deliberate, memorable conclusion—not another dark block. */
.sales-page .sales-summary {
  position: relative;
  padding-block: clamp(2.6rem, 4.5vw, 4.2rem) clamp(1.5rem, 2.5vw, 2.5rem);
  border-top: 0;
  background:
    radial-gradient(ellipse at 90% 8%, rgb(121 204 215 / 24%), transparent 34%),
    linear-gradient(120deg, #dce9ec 0%, #cbdce3 46%, #e8e8e1 100%);
  color: #172b37;
}

.sales-page .sales-summary > .shell.editorial-split {
  position: relative;
  gap: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  overflow: hidden;
  border: 1px solid rgb(31 65 80 / 16%);
  border-left: 4px solid #68b9c5;
  border-radius: 8px;
  background: linear-gradient(115deg, rgb(247 250 249 / 94%), rgb(232 241 242 / 91%));
  box-shadow: 0 22px 50px rgb(18 44 57 / 12%), inset 0 1px 0 rgb(255 255 255 / 85%);
}

.sales-page .sales-summary > .shell.editorial-split::after {
  position: absolute;
  right: -2.5rem;
  bottom: -5.5rem;
  width: 13rem;
  height: 13rem;
  border: 1px solid rgb(74 151 166 / 20%);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5rem rgb(74 151 166 / 5%), 0 0 0 3rem rgb(74 151 166 / 4%);
  content: "";
  pointer-events: none;
}

.sales-page .sales-summary .section-kicker {
  color: #387e8c;
}

.sales-page .sales-summary .editorial-prose {
  position: relative;
  z-index: 1;
  max-width: 920px;
  padding: 0;
}

.sales-page .sales-summary .editorial-prose p {
  margin: 0;
  color: #314b57;
  font-size: 1rem;
  line-height: 1.9;
}

.sales-page .sales-summary .editorial-prose p::before {
  display: block;
  width: 2.8rem;
  height: 3px;
  margin-bottom: 1rem;
  border-radius: 3px;
  background: linear-gradient(90deg, #58adba 0 65%, #df9b6b 65% 100%);
  content: "";
}

/* Reduce the all-black impression between sections as well. */
.sales-page .sales-delivery {
  background:
    radial-gradient(ellipse at 10% 20%, rgb(118 194 201 / 12%), transparent 38%),
    linear-gradient(115deg, #101d28, #14232e 55%, #101a25);
}

.sales-page .sales-delivery > .shell.editorial-split {
  border-color: rgb(142 202 212 / 23%);
  background: linear-gradient(120deg, rgb(34 53 67 / 94%), rgb(23 40 53 / 94%));
}

@media (max-width: 700px) {
  .sales-page .sales-implementation .editorial-prose {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-page .sales-implementation .editorial-prose p {
    padding: 1rem;
  }

  .sales-page .sales-summary > .shell.editorial-split {
    padding: 1.2rem;
  }
}

/* =========================================================
   FINAL POLISH — COHESIVE NEON-NAVY SUMMARY + PREMIUM HOVERS
   Keep the entire page in the same dark technology palette.
   No white/light section break; cyan is the main glow and orange
   remains a small, deliberate accent. Heading sizes are untouched.
   ========================================================= */

.sales-page .sales-summary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.4rem, 4.2vw, 4rem);
  border-top: 1px solid rgb(121 204 215 / 14%);
  background:
    radial-gradient(ellipse at 12% 18%, rgb(73 185 206 / 15%), transparent 37%),
    radial-gradient(ellipse at 88% 72%, rgb(93 108 211 / 13%), transparent 36%),
    linear-gradient(125deg, #101c29 0%, #122331 48%, #0c1722 100%);
  color: #e7f0f2;
}

.sales-page .sales-summary::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 8%;
  width: min(42vw, 520px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #70d8e5 48%, #e2a071 78%, transparent);
  content: "";
  opacity: 0.9;
  filter: drop-shadow(0 0 7px rgb(112 216 229 / 58%));
}

.sales-page .sales-summary > .shell.editorial-split {
  position: relative;
  isolation: isolate;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.35rem);
  overflow: hidden;
  border: 1px solid rgb(112 202 216 / 26%);
  border-left: 3px solid #70d8e5;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(85 179 202 / 12%), transparent 43%),
    linear-gradient(120deg, rgb(25 44 59 / 96%), rgb(17 32 46 / 96%));
  box-shadow:
    0 18px 48px rgb(0 0 0 / 18%),
    0 0 28px rgb(80 188 208 / 6%),
    inset 0 1px 0 rgb(210 245 248 / 5%);
  transition:
    transform 320ms cubic-bezier(.2,.75,.25,1),
    border-color 320ms ease,
    box-shadow 320ms ease,
    background 320ms ease;
}

.sales-page .sales-summary > .shell.editorial-split::after {
  position: absolute;
  z-index: -1;
  right: -2.5rem;
  bottom: -6rem;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgb(112 216 229 / 22%);
  border-radius: 50%;
  box-shadow:
    0 0 0 1.3rem rgb(112 216 229 / 4%),
    0 0 0 2.7rem rgb(112 216 229 / 3%),
    0 0 45px rgb(82 193 211 / 8%);
  content: "";
  pointer-events: none;
  transition: transform 500ms ease, border-color 350ms ease, box-shadow 350ms ease;
}

.sales-page .sales-summary .section-kicker {
  color: #91dbe4;
}

.sales-page .sales-summary .editorial-prose {
  position: relative;
  z-index: 1;
  max-width: 920px;
  padding: 0;
}

.sales-page .sales-summary .editorial-prose p {
  margin: 0;
  color: #c8d8df;
  font-size: 1rem;
  line-height: 1.85;
  transition: color 280ms ease;
}

.sales-page .sales-summary .editorial-prose p::before {
  display: block;
  width: 3.2rem;
  height: 3px;
  margin-bottom: 1rem;
  border-radius: 3px;
  background: linear-gradient(90deg, #70d8e5 0 72%, #e2a071 72% 100%);
  box-shadow: 0 0 12px rgb(112 216 229 / 24%);
  content: "";
  transition: width 300ms ease, box-shadow 300ms ease;
}

/* Summary gets a restrained lift and luminous edge, not a white-card look. */
@media (hover: hover) and (pointer: fine) {
  .sales-page .sales-summary > .shell.editorial-split:hover {
    transform: translateY(-4px);
    border-color: rgb(112 216 229 / 58%);
    box-shadow:
      0 24px 58px rgb(0 0 0 / 24%),
      0 0 0 1px rgb(112 216 229 / 10%),
      0 0 34px rgb(72 194 214 / 14%),
      inset 0 1px 0 rgb(210 245 248 / 9%);
  }

  .sales-page .sales-summary > .shell.editorial-split:hover::after {
    transform: scale(1.08) translate(-5px, -5px);
    border-color: rgb(112 216 229 / 36%);
    box-shadow:
      0 0 0 1.3rem rgb(112 216 229 / 6%),
      0 0 0 2.7rem rgb(112 216 229 / 4%),
      0 0 55px rgb(82 193 211 / 14%);
  }

  .sales-page .sales-summary .editorial-prose p:hover {
    color: #edf8fa;
  }

  .sales-page .sales-summary .editorial-prose p:hover::before {
    width: 4.6rem;
    box-shadow: 0 0 16px rgb(112 216 229 / 42%);
  }

  .sales-page .sales-implementation .editorial-prose p:hover {
    transform: translateY(-5px);
    border-color: rgb(126 207 218 / 55%);
    background: linear-gradient(145deg, rgb(53 83 101 / 96%), rgb(31 55 72 / 96%));
    box-shadow:
      0 16px 34px rgb(0 0 0 / 20%),
      0 0 24px rgb(112 216 229 / 10%);
  }

  .sales-page .sales-implementation .editorial-prose p + p:hover {
    border-color: rgb(225 161 111 / 58%);
    background: linear-gradient(145deg, rgb(58 72 84 / 97%), rgb(34 50 64 / 97%));
    box-shadow:
      0 16px 34px rgb(0 0 0 / 20%),
      0 0 24px rgb(225 161 111 / 9%);
  }
}

.sales-page .sales-implementation .editorial-prose p {
  transition:
    transform 300ms cubic-bezier(.2,.75,.25,1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 300ms ease;
}

/* Keep the accent ribbon and SaaS panel feeling responsive to interaction. */
.sales-page .sales-overview .accelerator-ribbon span,
.sales-page .sales-delivery > .shell.editorial-split {
  transition:
    transform 300ms cubic-bezier(.2,.75,.25,1),
    border-color 300ms ease,
    box-shadow 300ms ease,
    background 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .sales-page .sales-delivery > .shell.editorial-split:hover {
    transform: translateY(-3px);
    border-color: rgb(112 216 229 / 45%);
    box-shadow: 0 18px 42px rgb(0 0 0 / 18%), 0 0 28px rgb(72 194 214 / 9%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sales-page .sales-summary > .shell.editorial-split,
  .sales-page .sales-summary > .shell.editorial-split::after,
  .sales-page .sales-summary .editorial-prose p,
  .sales-page .sales-summary .editorial-prose p::before,
  .sales-page .sales-implementation .editorial-prose p,
  .sales-page .sales-delivery > .shell.editorial-split,
  .sales-page .sales-overview .accelerator-ribbon span {
    transition: none !important;
  }
}

/* =========================================================
   FINAL COHESION PASS — SOLUTION GRID + NEON NAVY SUMMARY
   Keep the page premium and dark-blue, not black-heavy or white.
   Heading sizes and HTML content remain unchanged.
   ========================================================= */

/* Solution: replace the vertical ledger with a compact, responsive
   capability grid. Each item feels like an interactive product tile. */
.sales-page section.customer-operations {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 4vw, 4rem);
  background:
    radial-gradient(ellipse at 10% 8%, rgb(91 199 216 / 12%), transparent 36%),
    radial-gradient(ellipse at 95% 88%, rgb(93 116 202 / 11%), transparent 35%),
    linear-gradient(125deg, #101c28 0%, #142432 48%, #0e1a26 100%) !important;
}

.sales-page section.customer-operations .customer-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.sales-page section.customer-operations .signal-board {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  align-content: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.sales-page section.customer-operations .signal-row {
  position: relative;
  display: grid !important;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0.65rem 0.8rem;
  min-height: 112px;
  padding: 1.1rem 1rem;
  overflow: hidden;
  border: 1px solid rgb(125 202 216 / 21%);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(89 188 211 / 10%), transparent 58%),
    linear-gradient(145deg, rgb(34 55 71 / 94%), rgb(21 39 54 / 96%));
  box-shadow: inset 0 1px 0 rgb(225 246 248 / 4%), 0 10px 24px rgb(0 0 0 / 12%);
  transition: transform 320ms cubic-bezier(.2,.75,.25,1), border-color 320ms ease, box-shadow 320ms ease, background 320ms ease;
}

.sales-page section.customer-operations .signal-row::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, #83e0e8, rgb(112 216 229 / 8%));
  content: "";
  opacity: 0.8;
  transition: width 320ms ease, opacity 320ms ease;
}

.sales-page section.customer-operations .signal-row:nth-child(4n + 2)::before {
  --solution-accent: #e1a16f;
}

.sales-page section.customer-operations .signal-row .mono {
  --solution-accent: #8bdce5;
}

.sales-page section.customer-operations .signal-row .mono {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgb(126 207 218 / 30%);
  border-radius: 6px;
  background: rgb(99 196 211 / 8%);
  color: var(--solution-accent, #8bdce5);
  font-size: 0.7rem;
}

.sales-page section.customer-operations .signal-row strong {
  align-self: center;
  color: #e7f2f4;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}

.sales-page section.customer-operations .signal-row i {
  display: block;
  grid-column: 2;
  width: 2.6rem;
  height: 2px;
  margin-top: 0.25rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--solution-accent, #75d1dc), transparent);
  opacity: 0.8;
  transition: width 320ms ease, opacity 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .sales-page section.customer-operations .signal-row:hover {
    z-index: 1;
    transform: translateY(-6px) scale(1.015);
    border-color: rgb(126 220 231 / 58%);
    background:
      radial-gradient(ellipse at 95% 5%, rgb(93 205 224 / 18%), transparent 62%),
      linear-gradient(145deg, rgb(42 73 91 / 98%), rgb(23 47 65 / 98%));
    box-shadow: 0 18px 36px rgb(0 0 0 / 22%), 0 0 26px rgb(83 197 216 / 14%), inset 0 1px 0 rgb(235 252 255 / 9%);
  }

  .sales-page section.customer-operations .signal-row:hover::before {
    width: 4px;
    opacity: 1;
  }

  .sales-page section.customer-operations .signal-row:hover i {
    width: 4.4rem;
    opacity: 1;
  }

  .sales-page section.customer-operations .signal-row:nth-child(4n + 2):hover {
    border-color: rgb(225 161 111 / 56%);
    box-shadow: 0 18px 36px rgb(0 0 0 / 22%), 0 0 24px rgb(225 161 111 / 10%);
  }
}

/* Summary: keep the same neon-navy atmosphere as the other sections.
   No white/light card; the glow is part of the full-width section. */
.sales-page main section.sales-summary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.6rem, 4.5vw, 4.2rem) clamp(1.5rem, 2.5vw, 2.5rem);
  border-top: 1px solid rgb(122 207 220 / 18%);
  background:
    radial-gradient(ellipse at 12% 30%, rgb(76 198 219 / 16%), transparent 38%),
    radial-gradient(ellipse at 88% 72%, rgb(91 112 205 / 13%), transparent 38%),
    linear-gradient(115deg, #101d2a 0%, #142635 50%, #0e1a27 100%) !important;
  color: #e5f0f3;
}

.sales-page main section.sales-summary::before {
  position: absolute;
  top: 0;
  left: 8%;
  width: min(46vw, 560px);
  height: 2px;
  background: linear-gradient(90deg, transparent, #72d9e5 48%, #e1a16f 78%, transparent);
  content: "";
  filter: drop-shadow(0 0 8px rgb(112 216 229 / 50%));
}

.sales-page main section.sales-summary > .shell.editorial-split {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.3rem);
  border: 1px solid rgb(122 207 220 / 25%);
  border-left: 3px solid #72d9e5;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(84 184 207 / 10%), transparent 48%),
    linear-gradient(125deg, rgb(29 49 65 / 90%), rgb(19 37 52 / 92%)) !important;
  box-shadow: 0 18px 46px rgb(0 0 0 / 17%), inset 0 1px 0 rgb(218 246 250 / 5%);
  transition: transform 350ms cubic-bezier(.2,.75,.25,1), border-color 350ms ease, box-shadow 350ms ease;
}

.sales-page main section.sales-summary .section-kicker {
  color: #91dce5;
}

.sales-page main section.sales-summary .editorial-prose p {
  color: #c9dbe1;
  line-height: 1.85;
}

/* Product-page scroll reveals use the shared base transition and JS observer. */
.motion-ready .sales-page [data-reveal] {
  transition-delay: var(--product-reveal-delay, 0ms);
}

@media (hover: hover) and (pointer: fine) {
  .sales-page main section.sales-summary > .shell.editorial-split:hover {
    transform: translateY(-4px);
    border-color: rgb(122 220 231 / 55%);
    box-shadow: 0 24px 55px rgb(0 0 0 / 22%), 0 0 32px rgb(72 194 214 / 12%), inset 0 1px 0 rgb(218 246 250 / 8%);
  }
}

@media (max-width: 820px) {
  .sales-page section.customer-operations .customer-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 560px) {
  .sales-page section.customer-operations .signal-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-page section.customer-operations .signal-row {
    min-height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sales-page [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sales-page section.customer-operations .signal-row,
  .sales-page section.customer-operations .signal-row::before,
  .sales-page section.customer-operations .signal-row i,
  .sales-page main section.sales-summary > .shell.editorial-split {
    transition: none !important;
  }
}