/* Landing page Insights section (2026.10.14): the Know, Deploy, Answer,
   Learn loop from the home page, recoloured for burgundy, plus a few
   short chips and one line. Replaces the long list and promise box.
   Alignment: the loop sits under the "Insights" label (columns 1 to 4,
   its viewBox cropped so LEARN starts on the label's edge and KNOW sits
   on the top line); the chips sit under the headline (column 5). */
.dx-lp .dx-lp-learn-grid { align-items: start; }
.dx-lp .dx-lp-loop { grid-column: 1 / span 4; width: 100%; max-width: none; margin: 0; color: var(--dx-cream); }
.dx-lp .dx-lp-loop .dx-loop-arc { stroke: var(--dx-cream); stroke-opacity: 0.35; }
.dx-lp .dx-lp-loop marker path { fill: var(--dx-cream); fill-opacity: 0.6; }
.dx-lp .dx-lp-loop .dx-loop-node { fill: var(--dx-burgundy); stroke: var(--dx-mustard); }
.dx-lp .dx-lp-loop .dx-loop-orbit circle { fill: var(--dx-mustard); }
.dx-lp .dx-lp-loop .dx-loop-label { fill: var(--dx-cream); }
.dx-lp .dx-lp-loop .dx-loop-mid { fill: var(--dx-mustard); }

.dx-lp .dx-lp-learn-side { grid-column: 5 / -1; }
.dx-lp .dx-lp-learn-side .dx-label { color: var(--dx-mustard); margin: 0 0 18px; line-height: 1; }
.dx-lp .dx-lp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dx-lp .dx-lp-chips li {
  margin: 0;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--dx-cream-line);
  background: rgba(237, 228, 211, 0.06);
  font-family: var(--dx-sans);
  font-size: 17px;
  line-height: 1.2;
  color: var(--dx-cream);
}
.dx-lp .dx-lp-learn-line {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--dx-cream-line);
  font-family: var(--dx-serif);
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: var(--dx-mustard);
}

/* Actions table only ("Curiosity becomes an enrolment."): each row sits
   on the same 12 column grid as the section head, so "The next step
   appears" lines up with the headline (column 5). The cost table is
   left as it was. */
@media (min-width: 641px) {
  .dx-lp .dx-lp-actions .dx-lp-table, .dx-lp .dx-lp-actions .dx-lp-table thead, .dx-lp .dx-lp-actions .dx-lp-table tbody { display: block; width: 100%; }
  .dx-lp .dx-lp-actions .dx-lp-table tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .dx-lp .dx-lp-actions .dx-lp-table thead tr { border-bottom: 1px solid var(--dx-burgundy); }
  .dx-lp .dx-lp-actions .dx-lp-table tbody tr { border-bottom: 1px solid var(--dx-ink-line); }
  .dx-lp .dx-lp-actions .dx-lp-table th, .dx-lp .dx-lp-actions .dx-lp-table td { border-bottom: 0 !important; padding-right: 0; width: auto !important; }
  .dx-lp .dx-lp-actions .dx-lp-table th:first-child, .dx-lp .dx-lp-actions .dx-lp-table td:first-child { grid-column: 1 / span 4; }
  .dx-lp .dx-lp-actions .dx-lp-table th:last-child, .dx-lp .dx-lp-actions .dx-lp-table td:last-child { grid-column: 5 / -1; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .dx-lp .dx-lp-actions .dx-lp-table th:first-child, .dx-lp .dx-lp-actions .dx-lp-table td:first-child { grid-column: 1 / span 6; }
  .dx-lp .dx-lp-actions .dx-lp-table th:last-child, .dx-lp .dx-lp-actions .dx-lp-table td:last-child { grid-column: 7 / -1; }
}

@media (max-width: 900px) {
  .dx-lp .dx-lp-loop, .dx-lp .dx-lp-learn-side { grid-column: 1 / -1; }
  .dx-lp .dx-lp-loop { max-width: 380px; }
}
@media (max-width: 640px) {
  .dx-lp .dx-lp-chips li { font-size: 15px; padding: 10px 16px; }
}
