/* =========================================================
   delivery.css — Delivery & Partner Enablement page
   Reuses style.css / service-providers.css / builder.css patterns
   (hero, eyebrow, help-card accordion, builder-cta, footer) and adds
   the page-specific custom sections.
   ========================================================= */

/* -----------------------------------------------------
   HERO — same treatment as the platform heroes.
   ----------------------------------------------------- */
.sp-hero--delivery .sp-breadcrumb { top: 0; font-size: 16px; }
.sp-hero--delivery .sp-hero__copy { max-width: 717px; gap: 40px; }
.sp-hero--delivery .sp-hero__text { display: flex; flex-direction: column; gap: 20px; }
.sp-hero--delivery .sp-hero__title { max-width: 717px; }
.sp-hero--delivery .sp-hero__overlay {
  background:
    linear-gradient(215.93deg, rgba(7, 9, 58, 0) 21.21%, rgba(7, 9, 58, 0.8) 100.35%),
    linear-gradient(134.48deg, rgba(7, 9, 58, 0.8) 1.2%, rgba(7, 9, 58, 0) 69.66%);
}

/* -----------------------------------------------------
   Shared section helpers
   ----------------------------------------------------- */
.dpe-title {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
  color: #000;
  margin: 0;
}
.dpe-title strong { font-weight: 700; }
/* Compact secondary section heading (Marketplace / Controller) */
.dpe-title--sub { font-size: 28px; font-weight: 500; }
.dpe-title--sub strong { font-weight: 600; }
.dpe-lede { font-size: 18px; line-height: 1.5; color: #000; margin: 0; }

/* -----------------------------------------------------
   SECTION: Opportunity 1 (text left + image right)
   ----------------------------------------------------- */
.dpe-opp { background: #fff; padding: 100px 0; }
.dpe-opp__grid {
  display: grid;
  grid-template-columns: minmax(0, 608px) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}
.dpe-opp__copy { display: flex; flex-direction: column; gap: 24px; }
.dpe-opp__media {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 582 / 395;
}
.dpe-opp__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -----------------------------------------------------
   SECTION: Delivery intro (centered eyebrow + title + subtitle)
   ----------------------------------------------------- */
.dpe-intro { background: #fff; padding: 100px 0 0; }
.dpe-intro__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.dpe-intro__head .eyebrow { margin-bottom: 4px; }
.dpe-intro__title { max-width: 1078px; }
.dpe-intro__sub { font-size: 18px; line-height: 1.4; color: #000; margin: 0; max-width: 936px; }

/* -----------------------------------------------------
   SECTION: App Builder (heading + image left, accordion right)
   Reuses .capabilities + .help-card. Just a shorter photo.
   ----------------------------------------------------- */
.dpe-builder { background: #fff; padding: 60px 0 100px; }
/* Figma node 7241:19090 — left column 606px, 23px gap, heading 32px Medium on
   one line with a 43px gap above the 540×381 image. */
.dpe-builder .capabilities__grid {
  grid-template-columns: minmax(0, 606px) minmax(0, 611px);
  gap: 23px;
}
.dpe-builder .capabilities__left { gap: 43px; }
.dpe-builder .capabilities__title {
  font-size: 32px;
  font-weight: 500;
  white-space: nowrap;
}
/* Align the accordion with the image: top starts at the image top (title 38px +
   43px column gap), and it fills the 381px image height so the bottom lines up. */
.dpe-builder .help__accordion {
  margin-top: 81px;
  min-height: 381px;
  justify-content: space-between;
}
.dpe-builder__photo {
  border-radius: 8px;
  overflow: hidden;
  height: 381px;
  width: 540px;
  max-width: 100%;
  background: #07093a;
}
.dpe-builder__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -----------------------------------------------------
   SECTION: Marketplace (text + 2 cards left, diagram right)
   ----------------------------------------------------- */
.dpe-market { background: #fff; padding: 100px 0 60px; }
.dpe-market__grid {
  display: grid;
  grid-template-columns: minmax(0, 608px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.dpe-market__copy { display: flex; flex-direction: column; gap: 20px; }
.dpe-market__intro { font-size: 18px; line-height: 1.4; color: #000; margin: 0; }
.dpe-market__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 10px;
}
.dpe-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
}
.dpe-card__icon { width: 28px; height: 28px; }
.dpe-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.dpe-card__title { font-size: 18px; font-weight: 600; line-height: 1.3; color: #000; margin: 0; }
.dpe-card__copy { font-size: 14px; line-height: 1.5; color: #50505e; margin: 0; }
.dpe-market__diagram {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.dpe-market__diagram img { width: 100%; max-width: 611px; height: auto; display: block; }

/* -----------------------------------------------------
   SECTION: Controller (centered head + 2 image cards)
   ----------------------------------------------------- */
.dpe-controller { background: #fff; padding: 0 0 100px; }
.dpe-controller__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  margin-bottom: 42px;
}
.dpe-controller__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dpe-deploy-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 24px;
}
.dpe-deploy-card__media {
  border-radius: 0;
  overflow: hidden;
  height: 235px;
}
.dpe-deploy-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dpe-deploy-card__title { font-size: 22px; font-weight: 600; line-height: 1.3; color: #000; margin: 0; }
.dpe-deploy-card__copy { font-size: 16px; line-height: 1.5; color: #50505e; margin: 0; }

/* -----------------------------------------------------
   SECTION: Challenges (dark image panel left + content right)
   ----------------------------------------------------- */
.dpe-challenges {
  position: relative;
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  background: #fff;
  color: #000;
  isolation: isolate;
  /* Pad by the outer gutter so content aligns to the 1440px grid while the
     section background stays full-bleed. */
  padding-left: max(0px, calc((100vw - 1440px) / 2));
  padding-right: max(0px, calc((100vw - 1440px) / 2));
}
.dpe-challenges__media { position: relative; }
.dpe-challenges__media img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  /* Bleed the photo to the viewport's left edge; max-width:none defeats the
     global img max-width:100% so the explicit width applies. */
  width: calc(100% + max(0px, (100vw - 1440px) / 2));
  max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Navy solid at the top fading to clear at the bottom (Figma node 7241:19228). */
.dpe-challenges__media::after {
  content: "";
  position: absolute;
  inset: 0;
  left: min(0px, calc((1440px - 100vw) / 2));
  background: linear-gradient(178.46deg, rgb(20, 0, 78) 22.48%, rgba(20, 0, 78, 0) 99.17%);
}
.dpe-challenges__panel {
  position: absolute;
  top: 0;
  left: 100px;
  width: 350px;
  max-width: calc(100% - 132px);
  padding: 70px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  z-index: 1;
}
.dpe-challenges__heading {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.dpe-challenges__subtitle {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  max-width: 333px;
}
.dpe-challenges__body {
  padding: 52px 100px 52px 80px;
  background: #eff2f7;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.dpe-challenges__intro { font-size: 18px; line-height: 1.4; color: #303d48; margin: 0; max-width: 737px; }
.dpe-challenges__list { display: flex; flex-direction: column; gap: 32px; }
.dpe-chitem { display: flex; flex-direction: column; gap: 12px; }
.dpe-chitem__head { display: flex; align-items: center; gap: 12px; }
.dpe-chitem__icon { width: 40px; height: 40px; flex-shrink: 0; }
.dpe-chitem__icon img { width: 100%; height: 100%; object-fit: contain; }
.dpe-chitem__title { font-size: 24px; font-weight: 600; line-height: 1.3; color: #000; margin: 0; white-space: nowrap; }
.dpe-chitem__copy { font-size: 18px; line-height: 1.5; color: #50505e; margin: 0; }
.dpe-chitem__bullets { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dpe-chitem__bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.4;
  color: #50505e;
}
.dpe-chitem__bullets li strong { color: #000; font-weight: 600; }
.dpe-chitem__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39cdd8;
}

/* -----------------------------------------------------
   SECTION: Partner-First Model (text + image, stage band, stats)
   ----------------------------------------------------- */
.dpe-partner { background: #fff; padding: 100px 0 56px; }
.dpe-partner__grid {
  display: grid;
  grid-template-columns: minmax(0, 608px) minmax(0, 1fr);
  gap: 72px;
  align-items: stretch;
}
.dpe-partner__title { margin: 0 0 24px; }
.dpe-partner__copy { display: flex; flex-direction: column; gap: 20px; }
.dpe-partner__items { display: flex; flex-direction: column; gap: 20px; }
/* Each item is a bordered card (Figma node 7241:21033) */
.dpe-pitem {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #e5e9ee;
  border-radius: 8px;
  padding: 20px;
}
.dpe-pitem__icon { width: 40px; height: 40px; }
.dpe-pitem__icon img { width: 100%; height: 100%; object-fit: contain; }
.dpe-pitem__title { font-size: 24px; font-weight: 500; line-height: 1.4; color: #000; margin: 0; }
.dpe-pitem__copy { font-size: 16px; line-height: 1.4; color: #181819; margin: 0; }
/* Image fills the column height so it lines up top-to-bottom with the copy. */
.dpe-partner__media {
  border-radius: 12px;
  overflow: hidden;
  min-height: 100%;
}
.dpe-partner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dpe-partner__note {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  text-align: center;
  margin: 80px 0 0;
}

/* Stage cards over a dark band (same idea as the strategy band) */
.dpe-stages-wrap { position: relative; padding-top: 72px; isolation: isolate; }
.dpe-stages-band {
  position: absolute;
  top: 192px;
  bottom: -56px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  overflow: hidden;
}
.dpe-stages-band img { width: 100%; height: 100%; object-fit: cover; }
.dpe-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dpe-stage {
  background: #fff;
  filter: drop-shadow(5px -4px 8px rgba(0, 0, 0, 0.07));
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dpe-stage__num { font-size: 20px; font-weight: 600; line-height: 1.3; color: #2b3990; margin: 0; }
.dpe-stage__title { font-size: 20px; font-weight: 600; line-height: 1.3; color: #181819; margin: 0; }
.dpe-stage__copy { font-size: 16px; line-height: 1.4; color: #181819; margin: 0; }

/* Stats row */
.dpe-stats { background: #fff; padding: 56px 0 100px; }
.dpe-stats__title {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 600;
  color: #000;
  text-align: center;
  margin: 0 0 36px;
}
.dpe-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.dpe-stat {
  text-align: center;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.dpe-stat + .dpe-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 124px;
  width: 1px;
  background: rgba(0, 0, 0, 0.12);
}
.dpe-stat__num { font-size: 72px; line-height: 1.4; font-weight: 700; color: #2b3990; margin: 0; }
.dpe-stat:nth-child(1) .dpe-stat__num { color: #1c62cb; }
.dpe-stat:nth-child(2) .dpe-stat__num { color: #662d91; }
.dpe-stat:nth-child(3) .dpe-stat__num { color: #10304b; }
.dpe-stat__label { font-size: 24px; font-weight: 500; line-height: 1.4; color: #181819; margin: 6px 0 0; max-width: 238px; }
.dpe-stat__sub { font-size: 16px; line-height: 1.4; color: #181819; margin: 0; }

/* -----------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------- */
@media (max-width: 1024px) {
  .dpe-opp__grid,
  .dpe-market__grid,
  .dpe-partner__grid { grid-template-columns: 1fr; gap: 40px; }
  .dpe-controller__grid { grid-template-columns: 1fr; }
  .dpe-partner__media { min-height: 0; aspect-ratio: 561 / 642; }
  .dpe-challenges { grid-template-columns: 1fr; }
  .dpe-challenges__media { min-height: 420px; }
  .dpe-challenges__panel { left: 32px; right: 32px; width: auto; max-width: none; padding: 48px 0; }
  .dpe-challenges__heading { font-size: 28px; }
  .dpe-challenges__subtitle { font-size: 20px; }
  .dpe-challenges__body { padding: 48px 32px; }
  .dpe-builder .capabilities__grid { grid-template-columns: 1fr; gap: 40px; }
  .dpe-builder__photo { width: 100%; }
  .dpe-builder .capabilities__title { white-space: normal; }
  .dpe-builder .help__accordion { margin-top: 0; }
  .dpe-stages { grid-template-columns: 1fr; }
  .dpe-stages-band { inset: 0; }
  .dpe-stats__grid { grid-template-columns: 1fr; gap: 32px; }
  .dpe-stat + .dpe-stat::before { display: none; }
}

@media (max-width: 640px) {
  .dpe-opp, .dpe-market, .dpe-partner { padding: 60px 0; }
  .dpe-intro { padding: 60px 0 0; }
  .dpe-title, .dpe-intro__title, .dpe-stats__title { font-size: 28px; }
  .dpe-market__cards { grid-template-columns: 1fr; }
  .dpe-stat__num { font-size: 56px; }
  .dpe-chitem__title { white-space: normal; font-size: 22px; }
}

/* =========================================================
   Delivery & Partner Enablement — "Five-Step Approach" page
   (hero + 5 alternating image/accordion steps + CTA).
   Self-contained: includes the help-card accordion system because
   service-providers.css (its usual home) is not enqueued here.
   ========================================================= */

/* ---------- hero ---------- */
.dpe-hero { background: #fff; }
.dpe-hero__crumb { background: #f6f6f6; }
.dpe-hero__crumb .container { display: flex; align-items: center; gap: 8px; padding-block: 12px; font-size: 15px; color: #5b6770; }
.dpe-hero__crumb a { color: #5b6770; text-decoration: none; }
.dpe-hero__crumb a:hover { color: var(--color-link-blue, #1a73e8); }
.dpe-hero__crumb-sep { color: #c2c9d0; }
.dpe-hero__crumb-current { color: #303d48; font-weight: 500; }

.dpe-hero__banner { position: relative; min-height: 555px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.dpe-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dpe-hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 16, 64, 0.92) 0%, rgba(20, 16, 64, 0.6) 42%, rgba(20, 16, 64, 0.05) 70%),
    linear-gradient(0deg, rgba(10, 8, 40, 0.35) 0%, rgba(10, 8, 40, 0) 50%);
}
.dpe-hero__inner { display: flex; flex-direction: column; gap: 24px; padding-block: 56px; }
.dpe-hero__title { max-width: 75%; margin: 0; font-size: 48px; font-weight: 500; line-height: 1.2; color: #fff; }
.dpe-hero__copy { max-width: 75%; margin: 0; font-size: 16px; line-height: 1.55; color: #ffffff; }
.dpe-hero__cta { align-self: flex-start; margin-top: 8px; }

/* ---------- step section ---------- */
.dpe-step { background: #fff; padding: 72px 0 80px; }
.dpe-step + .dpe-step { border-top: 1px solid #eef1f4; }
.dpe-step__head { max-width: 940px; margin: 0 auto 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dpe-step__head .eyebrow { justify-content: center; font-weight: 400; }
.dpe-step__title { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.2; color: #000; }
.dpe-step__sub { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.3; color: #000; }
.dpe-step__intro { margin: 0; font-size: 18px; line-height: 1.6; color: #000; }

.dpe-step__grid { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.dpe-step--img-right .dpe-step__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
.dpe-step--img-right .dpe-step__media { order: 2; }
.dpe-step--img-right .dpe-step__accordion { order: 1; }

/* image stretches to the accordion's full height (top + bottom aligned) */
.dpe-step__media { border-radius: 16px; overflow: hidden; background: #0b1020; }
.dpe-step__media img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block; }

/* ---------- accordion (self-contained help-card) ---------- */
.dpe-step__accordion { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dpe-step .help-card { border-bottom: 1px solid rgba(0, 0, 0, 0.18); background: transparent; }
.dpe-step .help-card__head { display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 4px; text-align: left; color: inherit; cursor: pointer; background: transparent; border: 0; transition: opacity 0.3s ease; }
.dpe-step .help-card:not(.help-card--open) .help-card__head { opacity: 0.6; }
.dpe-step .help-card:not(.help-card--open):hover .help-card__head { opacity: 1; }
.dpe-step .help-card__icon { flex-shrink: 0; width: 48px; height: 48px; display: inline-flex; }
.dpe-step .help-card__icon img { width: 48px; height: 48px; display: block; border-radius: 10px; }
.dpe-step .help-card__title { flex: 1; font-size: 24px; font-weight: 500; line-height: 1.2; color: #000; }
.dpe-step .help-card--open .help-card__title { font-weight: 600; }
.dpe-step .help-card__caret { flex-shrink: 0; width: 24px; height: 24px; color: #303d48; display: inline-flex; transition: transform 0.3s ease; }
.dpe-step .help-card__caret svg { width: 100%; height: 100%; }
.dpe-step .help-card--open .help-card__caret { transform: rotate(180deg); }
.dpe-step .help-card__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.dpe-step .help-card__body > * { min-height: 0; overflow: hidden; }
.dpe-step .help-card--open .help-card__body { grid-template-rows: 1fr; }
.dpe-step .help-card__body-inner { padding: 0 4px 22px 4px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s; }
.dpe-step .help-card--open .help-card__body-inner { opacity: 1; transform: translateY(0); }
.dpe-step .help-card__body-inner > p { margin: 0; font-size: 16px; line-height: 1.6; color: #000; }

/* ---------- demo / stat card inside an open accordion item ---------- */
.dpe-demo { border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: #f1f1f4; border: 1px solid rgba(0, 0, 0, 0.18); }
.dpe-demo__tag { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: rgba(0, 0, 0, 0.47); }
.dpe-demo__text { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: #000; }
.dpe-demo__link { align-self: flex-start; font-size: 16px; font-weight: 600; color: #2b3990; text-decoration: none; }
.dpe-demo__link:hover { text-decoration: underline; }

/* ---------- closing CTA ---------- */
.dpe-cta { background: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .dpe-step__grid,
  .dpe-step--img-right .dpe-step__grid { grid-template-columns: 1fr; gap: 32px; }
  .dpe-step--img-right .dpe-step__media,
  .dpe-step--img-right .dpe-step__accordion { order: 0; }
  .dpe-step__media { max-width: 540px; margin: 0 auto; width: 100%; aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .dpe-hero__title { font-size: 32px; }
  .dpe-step__title { font-size: 28px; }
  .dpe-step__sub { font-size: 19px; }
  .dpe-step .help-card__body-inner { padding-left: 4px; }
}