/* ============================================================
   Digital Experts - home page refinements (from 2026.10.06)
   Scoped to main.dx. Loaded after de-home-screens.css.
   Small follow-up changes live here so the larger files do not
   need rewriting for each tweak. Merge into de-home-screens.css
   when the page settles.
   ============================================================ */

/* --- Learn heading: same 01 / 02 / 03 pattern as Know and Answer --- */

.dx .dx-learn-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
  margin-bottom: var(--dx-gap-l);
}

.dx .dx-learn-top .dx-step-copy { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 14px; }
.dx .dx-learn-top .dx-num { color: var(--dx-mustard); }
.dx .dx-learn-top .dx-display { color: var(--dx-cream); }
.dx .dx-learn-top .dx-reply { color: var(--dx-lavender); font-size: clamp(24px, 2.2vw, 32px); }

.dx .dx-learn-top > .dx-body {
  grid-column: 8 / -1;
  font-size: var(--dx-t-body);
  color: var(--dx-cream-70);
  max-width: 40ch;
}

@media (max-width: 900px) {
  .dx .dx-learn-top { row-gap: var(--dx-gap-s); }
  .dx .dx-learn-top .dx-step-copy,
  .dx .dx-learn-top > .dx-body { grid-column: 1 / -1; }
}

/* --- Hero body: a touch smaller, set on three even lines (6 Oct) --- */

main.dx .dx-hero-foot > .dx-body {
  font-size: 15px;
  line-height: 1.5;
  max-width: 50ch;
  text-wrap: balance;
}

@media (min-width: 901px) {
  main.dx:not(.dx-j2) .dx-hero-foot > .dx-body { grid-column: 1 / span 6; }
}

/* --- Serif used sparingly (Jye, 6 Oct): only the hook line keeps it --- */

main.dx .dx-statement .dx-reply,
main.dx .dx-display .dx-reply {
  display: block;
  font-family: inherit;
  font-stretch: inherit;
  font-variation-settings: inherit;
  font-style: normal;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-size: 1em;
  margin: 0;
}

main.dx h2.dx-reply {
  font-family: var(--dx-sans);
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(28px, 3vw, 44px);
}

main.dx p.dx-reply:not(.dx-hero-kicker):not(.dx-hook .dx-reply) {
  font-family: var(--dx-sans);
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-size: clamp(18px, 1.5vw, 22px);
}

main.dx .dx-who-q,
main.dx .dx-card-q { font-family: var(--dx-sans); font-style: normal; font-weight: 500; }

/* --- Hero kicker: sans caps in mustard (6 Oct) --- */

main.dx .dx-hero .dx-hero-kicker {
  font-family: var(--dx-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dx-mustard);
}

/* --- The answers exist: cream ground, questions as chat bubbles (Jye direction, 6 Oct) --- */

.dx .dx-exist { background: #F2F0EA; color: #15301F; }

.dx .dx-exist .dx-statement,
.dx .dx-exist .dx-statement .dx-reply {
  font-family: var(--dx-wide);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #15301F;
}

main.dx .dx-exist .dx-statement {
  line-height: 0.95;
  max-width: 17.5ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

.dx .dx-exist .dx-statement .dx-reply { display: inline; font-size: 1em; line-height: inherit; margin: 0; }

.dx .dx-exist .dx-exist-sub { color: rgba(29, 42, 34, 0.75); }

.dx .dx-ghost {
  max-width: none;
  white-space: nowrap;
  padding: 9px 15px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1D2A22;
  font-family: var(--dx-sans);
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(21, 48, 31, 0.08);
}

.dx .dx-ghost:nth-child(5n+1) { background: var(--dx-lavender); color: #1B2A6B; }
.dx .dx-ghost:nth-child(7n+3) { background: var(--dx-orange); color: #FFFFFF; }
.dx .dx-ghost:nth-child(6n+4) { background: var(--dx-mustard); color: #15301F; }

@media (max-width: 900px) {
  .dx .dx-ghost { white-space: normal; max-width: 16ch; }
}