.dte-journey {
  --dte-surface: var(--dte-ui-color-surface, #ffffff);
  --dte-surface-subtle: var(--dte-ui-color-surface-subtle, #eaf5fb);
  --dte-blue: var(--dte-ui-color-blue, #075985);
  --dte-blue-dark: var(--dte-ui-color-blue-dark, #064b70);
  --dte-navy: var(--dte-ui-color-navy, #123044);
  --dte-ink: var(--dte-ui-color-ink, #17222b);
  --dte-muted: var(--dte-ui-color-muted, #526779);
  --dte-line: var(--dte-ui-color-line, #d6e2ea);
  --dte-soft: var(--dte-ui-color-soft, #eaf5fb);
  background: var(--dte-surface);
  border: 1px solid var(--dte-line);
  border-radius: var(--dte-ui-radius-card, 18px);
  box-shadow: var(--dte-ui-shadow-card, 0 14px 38px rgba(16, 35, 53, .07));
  color: var(--dte-ink);
  font: 16px/1.5 var(--dte-ui-font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  margin: 1rem auto 2rem;
  max-width: var(--dte-ui-container, 1080px);
  overflow: hidden;
  padding: 1rem;
  width: min(calc(100% - var(--dte-ui-page-gutter, 1rem)), var(--dte-ui-container, 1080px));
}

.dte-journey * {
  box-sizing: border-box;
}

.dte-journey :focus-visible {
  box-shadow: var(--dte-ui-focus-ring, 0 0 0 3px #fff, 0 0 0 6px #075985);
  outline: 0;
}

.dte-journey--embedded {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: .75rem 0 0;
  max-width: none;
  width: 100%;
}

.dte-journey__header {
  max-width: 760px;
}

.dte-journey__eyebrow {
  color: var(--dte-blue);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  margin: 0 0 .55rem;
  text-transform: uppercase;
}

.dte-journey h2 {
  color: var(--dte-navy);
  font-size: clamp(1.75rem, 8vw, 2.4rem);
  letter-spacing: -.045em;
  line-height: 1.05;
  margin: 0;
}

.dte-journey__header p:last-child {
  color: var(--dte-muted);
  font-size: .98rem;
  margin: .75rem 0 0;
}

.dte-journey ol {
  display: grid;
  gap: .65rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 1.1rem 0;
  padding: 0;
}

.dte-journey li {
  background: var(--dte-surface);
  border: 1px solid var(--dte-line);
  border-radius: 16px;
  display: grid;
  gap: .65rem;
  grid-template-columns: auto 1fr;
  padding: .85rem;
}

.dte-journey li span {
  align-items: center;
  background: var(--dte-blue);
  border-radius: 14px;
  color: #fff;
  display: inline-flex;
  font-size: .92rem;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.dte-journey li a {
  color: var(--dte-blue);
  font-weight: 850;
  text-decoration: none;
}

.dte-journey li a:hover,
.dte-journey li a:focus-visible {
  color: var(--dte-blue-dark);
  text-decoration: underline;
}

.dte-journey li p {
  color: var(--dte-muted);
  font-size: .86rem;
  margin: .3rem 0 0;
}

.dte-journey__footer {
  align-items: center;
  background: var(--dte-soft);
  border-radius: 16px;
  display: grid;
  gap: 1rem;
  padding: .9rem 1rem;
}

.dte-journey__footer strong {
  color: var(--dte-navy);
}

.dte-journey__footer span {
  color: var(--dte-muted);
  font-size: .875rem;
}

@media (min-width: 42rem) {
  .dte-journey {
    border-radius: 22px;
    padding: 1.25rem;
    width: min(calc(100% - 1.5rem), var(--dte-ui-container, 1080px));
  }

  .dte-journey--embedded {
    width: 100%;
  }

  .dte-journey ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56.25rem) {
  .dte-journey {
    padding: 1.45rem;
    width: min(calc(100% - 2rem), var(--dte-ui-container, 1080px));
  }

  .dte-journey--embedded {
    width: 100%;
  }

  .dte-journey ol {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: 1.25rem 0;
  }

  .dte-journey li {
    grid-template-columns: 1fr;
    min-height: 118px;
  }

  .dte-journey__footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
}