.dcx-ecom-page{
  --navy:#071722;--navy2:#0b2330;--teal:#0bb7b3;--teal2:#37d1cc;--blue:#1478d1;
  --paper:#f7fafb;--soft:#edf6f8;--text:#45545f;--line:#dce8ec;
  color:var(--text);background:#fff
}
.dcx-ecom-page *{box-sizing:border-box}.dcx-ecom-page .dcx-shell{width:min(1180px,calc(100% - 40px));margin:auto}
.dcx-ecom-kicker{margin:0 0 14px;color:#049f9b;font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.dcx-ecom-hero{padding:90px 0 82px;background:linear-gradient(140deg,#071722 0%,#092a31 100%);overflow:hidden}
.dcx-ecom-hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);gap:58px;align-items:center}
.dcx-ecom-hero h1{margin:0; padding-bottom: 15px; color:#fff;font:800 clamp(3rem,5vw,57px)/1.04 Manrope,sans-serif;letter-spacing:-.045em}
.dcx-ecom-hero h1 span{color:var(--teal2)}.dcx-ecom-lead{max-width:650px;margin:25px 0 0;color:#d8e4e9;font-size:18px;line-height:1.72}
.dcx-ecom-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}.dcx-ecom-btn{display:inline-flex;min-height:52px;padding:0 23px;align-items:center;justify-content:center;border-radius:8px;text-decoration:none;font-weight:800}
.dcx-ecom-btn.primary{background:var(--blue);color:#fff}.dcx-ecom-btn.secondary{border:1px solid rgba(255,255,255,.28);color:#fff}
.dcx-ecom-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:27px}.dcx-ecom-tags span{padding:7px 11px;border:1px solid rgba(55,209,204,.25);border-radius:999px;color:#d7f7f5;font-size:12px;font-weight:700}
.dcx-ecom-hero-visual{position:relative}.dcx-ecom-browser{overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:17px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.dcx-ecom-browserbar{height:36px;display:flex;align-items:center;gap:6px;padding:0 13px;background:#eef3f5}.dcx-ecom-browserbar i{width:8px;height:8px;border-radius:50%;background:#c9d4d8}.dcx-ecom-browserbar span{margin-left:8px;font-size:10px;color:#7b8991}
.dcx-ecom-store{color:#182932}.dcx-ecom-store-nav{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;font-size:10px}.dcx-ecom-store-nav strong{font-size:12px;letter-spacing:.08em}.dcx-ecom-store-nav b{font-size:10px}
.dcx-ecom-store-hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:280px;padding:35px 34px;background:#eaf3ef}.dcx-ecom-store-hero small{font-weight:800;letter-spacing:.14em}.dcx-ecom-store-hero h2{margin:10px 0;font:800 36px/1.04 Manrope,sans-serif;color:#10262b}.dcx-ecom-store-hero p{max-width:280px;font-size:12px;line-height:1.55}.dcx-ecom-shopbtn{display:inline-flex;margin-top:9px;padding:10px 14px;border-radius:4px;background:#10262b;color:#fff;font-size:10px;font-weight:700}
.dcx-ecom-product-scene{position:relative;min-height:210px}.dcx-ecom-product-scene span{position:absolute;bottom:0;display:block;border-radius:10px 10px 4px 4px;box-shadow:0 13px 25px rgba(7,23,34,.12)}.dcx-ecom-product-scene .bottle{width:60px;height:155px;left:45%;background:#dfb688}.dcx-ecom-product-scene .box{width:95px;height:115px;left:8%;background:#315a50}.dcx-ecom-product-scene .jar{width:82px;height:72px;left:62%;background:#faf4e8}
.dcx-ecom-product-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px}.dcx-ecom-product-row>div{display:grid;grid-template-columns:50px 1fr;grid-template-rows:1fr 1fr;column-gap:10px;padding:9px;background:#f7f9f8;border-radius:6px}.dcx-ecom-product-row .prod{grid-row:1/3;width:50px;height:55px;border-radius:5px}.prod.a{background:#c89d76}.prod.b{background:#476b62}.prod.c{background:#dbcfae}.dcx-ecom-product-row b{font-size:10px;align-self:end}.dcx-ecom-product-row small{font-size:9px;color:#6e7c83}
.dcx-ecom-floating-card{position:absolute;right:-18px;bottom:-26px;display:flex;gap:12px;align-items:center;width:260px;padding:14px 17px;border-radius:10px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.18)}.dcx-ecom-floating-card>span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#daf7f5;color:#048d89;font-weight:900}.dcx-ecom-floating-card strong,.dcx-ecom-floating-card small{display:block}.dcx-ecom-floating-card strong{font-size:12px;color:var(--navy)}.dcx-ecom-floating-card small{margin-top:2px;font-size:10px}
.dcx-ecom-proof{background:#fff;border-bottom:1px solid var(--line)}.dcx-ecom-proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}.dcx-ecom-proof-grid div{padding:23px 26px;border-right:1px solid var(--line)}.dcx-ecom-proof-grid div:first-child{border-left:1px solid var(--line)}.dcx-ecom-proof strong,.dcx-ecom-proof span{display:block}.dcx-ecom-proof strong{color:var(--navy);font-size:14px}.dcx-ecom-proof span{margin-top:4px;font-size:12px}
.dcx-ecom-journey,.dcx-ecom-capabilities,.dcx-ecom-process,.dcx-ecom-faq{padding:92px 0}.dcx-ecom-heading{max-width:760px}.dcx-ecom-heading.centered{text-align:center;margin:0 auto}.dcx-ecom-heading h2,.dcx-ecom-example h2,.dcx-ecom-cap-top h2,.dcx-ecom-platforms h2,.dcx-ecom-faq h2,.dcx-ecom-cta h2{margin:0;color:var(--navy);font:800 clamp(2.3rem,4vw,55px)/1.08 Manrope,sans-serif;letter-spacing:-.035em}.dcx-ecom-heading>p:last-child{font-size:17px;line-height:1.7}
.dcx-ecom-journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}.dcx-ecom-journey-grid article{padding:28px 25px;border:1px solid var(--line);border-radius:11px;background:#fff}.dcx-ecom-journey-grid b{color:var(--teal);font-size:13px}.dcx-ecom-journey-grid h3{margin:24px 0 10px;color:var(--navy);font:800 21px Manrope,sans-serif}.dcx-ecom-journey-grid p{margin:0;line-height:1.65;font-size:14px}
.dcx-ecom-example{padding:88px 0;background:var(--soft)}.dcx-ecom-example-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:center}.dcx-ecom-example-image img{display:block;width:100%;height:auto}.dcx-ecom-example-copy p{font-size:16px;line-height:1.72}.dcx-ecom-checks{display:grid;gap:10px;margin:25px 0;padding:0;list-style:none}.dcx-ecom-checks li:before{content:"✓";margin-right:10px;color:var(--teal);font-weight:900}.dcx-ecom-textlink{color:#087d9b;font-weight:800;text-decoration:none}
.dcx-ecom-capabilities{background:#fff}.dcx-ecom-cap-top{display:grid;grid-template-columns:1fr .75fr;gap:60px;align-items:end}.dcx-ecom-cap-top>p{font-size:16px;line-height:1.7}.dcx-ecom-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:45px}.dcx-ecom-cap-grid article{min-height:215px;padding:27px;border-radius:11px;background:var(--paper);border:1px solid #e5ecef}.dcx-ecom-cap-grid span{color:var(--teal);font-size:12px;font-weight:800}.dcx-ecom-cap-grid h3{margin:25px 0 9px;color:var(--navy);font:800 20px Manrope,sans-serif}.dcx-ecom-cap-grid p{margin:0;font-size:14px;line-height:1.65}
.dcx-ecom-platforms{padding:90px 0;background:var(--navy);color:#dce8ec}.dcx-ecom-platform-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:68px;align-items:center}.dcx-ecom-platforms h2{color:#fff; margin-bottom: 15px;}.dcx-ecom-platforms p{line-height:1.7}.dcx-ecom-platform-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px}.dcx-ecom-platform-cards article{padding:27px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.05)}.dcx-ecom-platform-cards span{font-size:11px;color:var(--teal2);font-weight:800;letter-spacing:.08em}.dcx-ecom-platform-cards h3{margin:18px 0 10px;color:#fff;font:800 20px Manrope,sans-serif}
.dcx-ecom-process{background:#fff}.dcx-ecom-process-list{margin:42px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}.dcx-ecom-process-list li{display:grid;grid-template-columns:100px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}.dcx-ecom-process-list b{color:var(--teal);font:800 26px Manrope,sans-serif}.dcx-ecom-process-list h3{margin:0;color:var(--navy);font:800 20px Manrope,sans-serif}.dcx-ecom-process-list p{margin:7px 0 0}
.dcx-ecom-faq{background:var(--paper)}.dcx-ecom-faq-grid{display:grid;grid-template-columns:330px 1fr;gap:70px}.dcx-ecom-faq-list{display:grid;gap:12px}.dcx-ecom-faq-item{border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}.dcx-ecom-faq-item summary{position:relative;padding:21px 58px 21px 22px;color:var(--navy);font-weight:800;cursor:pointer;list-style:none}.dcx-ecom-faq-item summary::-webkit-details-marker{display:none}.dcx-ecom-faq-item summary:after{content:"+";position:absolute;right:22px;color:var(--teal);font-size:24px}.dcx-ecom-faq-item[open] summary:after{content:"−"}.dcx-ecom-faq-item p{margin:0;padding:0 22px 22px;line-height:1.7}
.dcx-ecom-cta-wrap{padding:82px 0 100px}.dcx-ecom-cta{display:grid;grid-template-columns:1fr .72fr;gap:65px;padding:56px 60px;border-radius:16px;background:linear-gradient(135deg,#071722,#092a31);color:#dbe7eb}.dcx-ecom-cta h2{color:#fff}.dcx-ecom-cta p{line-height:1.72}.dcx-ecom-cta .dcx-ecom-btn{margin-top:16px}
@media(max-width:980px){.dcx-ecom-hero-grid,.dcx-ecom-example-grid,.dcx-ecom-platform-grid,.dcx-ecom-faq-grid,.dcx-ecom-cta{grid-template-columns:1fr}.dcx-ecom-hero-grid{gap:55px}.dcx-ecom-journey-grid{grid-template-columns:repeat(2,1fr)}.dcx-ecom-cap-grid{grid-template-columns:repeat(2,1fr)}.dcx-ecom-cap-top{grid-template-columns:1fr}.dcx-ecom-hero-visual{max-width:740px}.dcx-ecom-proof-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dcx-ecom-page .dcx-shell{width:min(100% - 28px,1180px)}.dcx-ecom-hero{padding:70px 0 74px}.dcx-ecom-hero-grid{display:block}.dcx-ecom-hero-copy{margin-bottom:50px}.dcx-ecom-actions{flex-direction:column}.dcx-ecom-btn{width:100%}.dcx-ecom-store-nav span{display:none}.dcx-ecom-store-hero{grid-template-columns:1fr;padding:25px}.dcx-ecom-store-hero h2{font-size:28px}.dcx-ecom-product-scene{min-height:180px}.dcx-ecom-floating-card{right:4px;bottom:-33px}.dcx-ecom-product-row{grid-template-columns:1fr}.dcx-ecom-proof-grid,.dcx-ecom-journey-grid,.dcx-ecom-cap-grid,.dcx-ecom-platform-cards{grid-template-columns:1fr}.dcx-ecom-proof-grid div{border-left:1px solid var(--line)}.dcx-ecom-journey,.dcx-ecom-capabilities,.dcx-ecom-process,.dcx-ecom-faq{padding:70px 0}.dcx-ecom-example{padding:68px 0}.dcx-ecom-process-list li{grid-template-columns:58px 1fr}.dcx-ecom-cta{padding:40px 25px}}

/* =========================================================
   V3 REALISTIC ECOMMERCE VISUALS
   Uses user-approved source images unchanged.
   ========================================================= */
.dcx-ecom-hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dcx-ecom-hero-image{
  display:block;
  width:100%;
  max-width:760px;
  height:auto;
  object-fit:contain;
}
.dcx-ecom-showcase{
  padding:96px 0;
  background:#fff;
}
.dcx-ecom-showcase-collection{
  background:var(--soft);
}
.dcx-ecom-showcase-product{
  background:#fff;
}
.dcx-ecom-showcase-grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:58px;
  align-items:center;
}
.dcx-ecom-showcase-grid.reverse{
  grid-template-columns:1.22fr .78fr;
}
.dcx-ecom-showcase-copy h2,
.dcx-ecom-checkout-intro h2{
  margin:0;
  color:var(--navy);
  font:800 clamp(2.3rem,4vw,50px)/1.08 Manrope,sans-serif;
  letter-spacing:-.035em;
}
.dcx-ecom-showcase-copy p,
.dcx-ecom-checkout-intro>p{
  font-size:16px;
  line-height:1.72;
}
.dcx-ecom-showcase-image img,
.dcx-ecom-checkout-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.dcx-ecom-showcase-image{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 60px rgba(7,23,34,.08);
}
.dcx-ecom-showcase-image.wide{
  padding:0;
}
.dcx-ecom-showcase-image.wide img{
  border-radius:11px;
}
.dcx-ecom-showcase-checkout{
  padding:96px 0;
  background:var(--paper);
}
.dcx-ecom-checkout-intro{
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:60px;
  align-items:end;
}
.dcx-ecom-checkout-image{
  margin-top:42px !important;
  margin-bottom: 42px !important;
}
.dcx-ecom-checkout-image img{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 60px rgba(7,23,34,.08);
}
.dcx-ecom-checkout-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px;
}
.dcx-ecom-checkout-points article{
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}
.dcx-ecom-checkout-points strong,
.dcx-ecom-checkout-points span{
  display:block;
}
.dcx-ecom-checkout-points strong{
  color:var(--navy);
  font:800 16px Manrope,sans-serif;
}
.dcx-ecom-checkout-points span{
  margin-top:7px;
  font-size:13px;
  line-height:1.6;
}

@media(max-width:980px){
  .dcx-ecom-showcase-grid,
  .dcx-ecom-showcase-grid.reverse,
  .dcx-ecom-checkout-intro{
    grid-template-columns:1fr;
  }
  .dcx-ecom-showcase-grid.reverse .dcx-ecom-showcase-image{
    order:2;
  }
  .dcx-ecom-showcase-grid.reverse .dcx-ecom-showcase-copy{
    order:1;
  }
  .dcx-ecom-checkout-points{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .dcx-ecom-showcase,
  .dcx-ecom-showcase-checkout{
    padding:70px 0;
  }
  .dcx-ecom-showcase-grid{
    gap:32px;
  }
  .dcx-ecom-checkout-intro{
    gap:18px;
  }
  .dcx-ecom-checkout-image{
    margin-top:28px;
  }
}


/* =========================================================
   V3.1 DOTCONNEX HEADING + CHECKOUT SCALE ALIGNMENT
   Matches the current DotConnex title colour system.
   ========================================================= */

/* Hero uses the stronger DotConnex blue used on current service/location heroes. */
.dcx-ecom-hero h1 span{
  color:#1478d1;
}

/* Light-background section headings keep navy as the anchor colour,
   with the selected phrase using the established DotConnex teal. */
.dcx-ecom-page .dcx-ecom-heading h2 span,
.dcx-ecom-page .dcx-ecom-showcase-copy h2 span,
.dcx-ecom-page .dcx-ecom-checkout-intro h2 span,
.dcx-ecom-page .dcx-ecom-cap-top h2 span,
.dcx-ecom-page .dcx-ecom-process h2 span,
.dcx-ecom-page .dcx-ecom-faq h2 span{
  color:#0bb7b3;
}

.dcx-ecom-faq h2{font: 800 clamp(2.3rem,4vw,52px)/1.08 Manrope,sans-serif}

.dcx-ecom-process h2{font: 800 clamp(2.3rem,4vw,61px)/1.08 Manrope,sans-serif }

/* Dark sections use the brighter teal for the highlighted phrase. */
.dcx-ecom-page .dcx-ecom-platforms h2 span,
.dcx-ecom-page .dcx-ecom-cta h2 span{
  color:#37d1cc;
}

/* Keep checkout proof substantial without allowing it to dominate large screens. */
.dcx-ecom-checkout-image{
  width:100%;
  max-width:1000px;
  margin:42px auto 0;
}
.dcx-ecom-checkout-image img{
  width:100%;
  max-width:1000px;
  margin:0 auto;
}

@media(max-width:980px){
  .dcx-ecom-checkout-image{
    max-width:900px;
  }
}

@media(max-width:640px){
  .dcx-ecom-checkout-image{
    max-width:none;
    margin-top:28px;
  }
}