/* ============================================================
   Digital Experts - 04 Deploy (2026.10.07)
   The fourth step after Know, Answer and Learn. The section reuses
   the Learn markup (dx-learn, dx-learn-top) on a burgundy ground so
   it reads as the same pattern; this file adds the three panels
   (website, socials, real world) and the coming soon line.
   Panels size their contents with container units so the mock
   screens scale cleanly from desktop to phone.
   ============================================================ */

.dx .dx-deploy.dx-burgundy { background: var(--dx-burgundy); color: var(--dx-cream); }
.dx .dx-deploy .dx-learn-top .dx-reply { color: var(--dx-mustard); }

.dx .dx-dep {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.dx .dx-dep > li { margin: 0; display: flex; flex-direction: column; gap: 18px; }

.dx .dx-dep-vis {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
}

.dx .dx-dep-cap h3 { margin: 0 0 6px; font-family: var(--dx-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; color: var(--dx-cream); }
.dx .dx-dep-cap p { margin: 0; font-family: var(--dx-sans); font-size: 15px; line-height: 1.5; color: var(--dx-cream-70); max-width: 34ch; }

/* 1. On your site: a browser window with the ask bar */
.dx .dx-dep-site { background: #F2F0EA; display: flex; flex-direction: column; }
.dx .dx-dep-bar { display: flex; align-items: center; gap: 1.6cqw; padding: 3.6cqw 4.5cqw; background: #E6E1D6; }
.dx .dx-dep-bar i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: rgba(62, 11, 25, 0.25); }
.dx .dx-dep-bar span { margin-left: 3cqw; flex: 1; height: 5.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.7); }
.dx .dx-dep-head { display: flex; justify-content: space-between; align-items: center; padding: 4.5cqw 6cqw; }
.dx .dx-dep-head b { font-family: var(--dx-sans); font-weight: 700; font-size: 4cqw; letter-spacing: 0.08em; text-transform: uppercase; color: #15301F; }
.dx .dx-dep-head span { display: flex; gap: 2.4cqw; }
.dx .dx-dep-head span i { width: 7cqw; height: 1.4cqw; border-radius: 99px; background: rgba(21, 48, 31, 0.25); }
.dx .dx-dep-hero { position: relative; margin: 0 6cqw; flex: 1; border-radius: 4cqw; background-size: cover; background-position: center; }
.dx .dx-dep-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(14, 10, 8, 0) 30%, rgba(14, 10, 8, 0.55) 100%); }
.dx .dx-dep-ask {
  position: relative;
  z-index: 1;
  margin: -9cqw 10cqw 8cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  padding: 2.4cqw 2.4cqw 2.4cqw 5cqw;
  border-radius: 99px;
  background: #FFFFFF;
  box-shadow: 0 3cqw 8cqw rgba(21, 48, 31, 0.18);
  font-family: var(--dx-sans);
  font-size: 4.2cqw;
  font-weight: 500;
  color: #1D2A22;
}
.dx .dx-dep-ask b { flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--dx-burgundy); color: var(--dx-cream); display: flex; align-items: center; justify-content: center; font-size: 4.6cqw; }

/* 2. On your socials: a post that sends people to ask */
.dx .dx-dep-social { background-size: cover; background-position: center; color: #FFFFFF; display: flex; flex-direction: column; justify-content: space-between; padding: 6%; }
.dx .dx-dep-social::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 10, 8, 0.55) 0%, rgba(14, 10, 8, 0.1) 40%, rgba(14, 10, 8, 0.75) 100%); }
.dx .dx-dep-who { display: flex; align-items: center; gap: 2.6cqw; font-family: var(--dx-sans); font-size: 3.8cqw; font-weight: 600; }
.dx .dx-dep-who i { width: 8.5cqw; height: 8.5cqw; border-radius: 50%; background: var(--dx-cream); color: var(--dx-burgundy); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 4cqw; }
.dx .dx-dep-who small { font-weight: 500; opacity: 0.75; font-size: 3.2cqw; }
.dx .dx-dep-q { margin: 0; font-family: var(--dx-sans); font-weight: 600; font-size: 8.4cqw; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.dx .dx-dep-cta { display: inline-flex; align-self: flex-start; gap: 2cqw; margin-top: 4cqw; padding: 2.6cqw 4.4cqw; border-radius: 99px; background: var(--dx-mustard); color: var(--dx-burgundy); font-family: var(--dx-sans); font-weight: 600; font-size: 3.8cqw; }
.dx .dx-dep-dots { display: flex; gap: 1.6cqw; margin-top: 5cqw; }
.dx .dx-dep-dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.dx .dx-dep-dots i:first-child { background: #FFFFFF; }

/* 3. In the real world: a sign with a QR code */
.dx .dx-dep-world { background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: 8%; }
.dx .dx-dep-world::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14, 10, 8, 0.35); }
.dx .dx-dep-sign {
  width: 78cqw;
  padding: 7cqw 7cqw 6cqw;
  border-radius: 4cqw;
  background: var(--dx-forest);
  color: var(--dx-cream);
  box-shadow: 0 5cqw 12cqw rgba(0, 0, 0, 0.35);
  text-align: left;
}
.dx .dx-dep-sign p { margin: 0 0 5cqw; font-family: var(--dx-sans); font-weight: 600; font-size: 6.6cqw; line-height: 1.12; letter-spacing: -0.015em; }
.dx .dx-dep-qr { display: flex; align-items: center; gap: 5cqw; }
.dx .dx-dep-qr svg { flex: none; width: 30cqw; height: 30cqw; padding: 2.4cqw; background: #FFFFFF; border-radius: 2cqw; }
.dx .dx-dep-qr span { font-family: var(--dx-sans); font-size: 3.8cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dx-mustard); line-height: 1.4; }

/* Coming soon */
.dx .dx-dep-soon {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: var(--dx-gap-m) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--dx-cream-line);
  font-family: var(--dx-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--dx-cream-70);
}
.dx .dx-dep-soon b {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--dx-mustard);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dx-mustard);
}

/* Platform and sector pages: ticks and product label sit right */
.dx-pf .dx-deploy .dx-pf-ticks li { color: var(--dx-cream-70); }
.dx-pf .dx-deploy .dx-pf-ticks li::before { color: var(--dx-mustard); }

@media (max-width: 900px) {
  .dx .dx-dep { grid-template-columns: 1fr; gap: 40px; }
  .dx .dx-dep-vis { max-width: 420px; }
}

/* Bigger step numbers (01 to 04) */
.dx .dx-step-copy .dx-num { display: inline-block; margin-bottom: 14px; font-size: 32px; line-height: 1; letter-spacing: 0.04em; font-weight: 500; }
@media (max-width: 760px) { .dx .dx-step-copy .dx-num { font-size: 26px; margin-bottom: 10px; } }