/* Use-case diagnostic section ("#results").
   Mobile first. The visitor picks the problem that costs their team the most time,
   and the matching agent card is shown. Without JavaScript every card stays visible,
   so all the content is in the HTML for search engines. */

.dx {
  font-family: 'Geist', system-ui, sans-serif;
  --dx-card: #11141d;
  --dx-line: #1d2230;
  --dx-line-strong: #2a3042;
  --dx-ink: #eceef5;
  --dx-soft: #c5cadb;
  --dx-muted: #9ea5ba;
  --dx-tint: rgba(91, 110, 245, 0.12);
  --dx-tint-strong: rgba(91, 110, 245, 0.14);
  --dx-accent-ink: #b3bcff;
}

.dx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }

.dx-eyebrow {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--dx-accent-ink); margin-bottom: 12px;
}
.dx h2 { letter-spacing: -0.02em; font-weight: 700; }
.dx-sub { color: var(--dx-muted); font-size: 1rem; line-height: 1.5; margin-bottom: 24px; }

.dx-options { display: flex; flex-direction: column; gap: 8px; }
.dx-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 56px; padding: 12px 16px; border-radius: 14px;
  background: var(--dx-card); border: 1px solid var(--dx-line);
  color: var(--dx-ink); font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.35;
  text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.dx-opt:hover { border-color: var(--dx-line-strong); }
.dx-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-radio {
  flex: none; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid #4a5068; transition: border .2s, background .2s;
}
.dx-opt[aria-pressed="true"] { background: var(--dx-tint-strong); border-color: var(--accent); }
.dx-opt[aria-pressed="true"] .dx-radio { border: 6px solid var(--accent); background: #fff; }
/* Before the script runs the choices are not interactive yet. */
.dx:not(.dx-js) .dx-options { display: none; }

.dx-note { font-size: 0.8rem; color: var(--dx-muted); margin-top: 16px; }

.dx-panels { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 90px; }
.dx-panel {
  background: var(--dx-card); border: 1px solid #232838; border-radius: 22px;
  padding: 22px; display: flex; flex-direction: column; gap: 22px;
}
.dx-panel[hidden] { display: none; }
.dx-head { display: flex; flex-direction: column; gap: 14px; }
.dx-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dx-kicker { font-size: 0.82rem; color: var(--dx-muted); }
.dx-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 0.75rem; font-weight: 500; padding: 5px 10px; border-radius: 999px;
  color: #0a0c12; background: var(--dx-ink);
}
.dx-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dx-panel h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.dx-result { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dx-result strong { font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.dx-result span { font-size: 0.95rem; color: var(--dx-soft); }
.dx-context { font-size: 0.82rem; color: #8a91a6; }

.dx-label { font-size: 0.82rem; font-weight: 500; color: var(--dx-muted); margin-bottom: 12px; }
.dx-steps { list-style: none; display: flex; flex-direction: column; gap: 12px; counter-reset: dx-step; }
.dx-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; }
.dx-steps li::before {
  counter-increment: dx-step; content: counter(dx-step);
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: -2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--accent);
}

.dx-hand { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--dx-tint); }
.dx-hand svg { flex: none; color: var(--dx-accent-ink); margin-top: 2px; }
.dx-hand b { display: block; font-size: 0.82rem; font-weight: 500; color: var(--dx-accent-ink); margin-bottom: 2px; }
.dx-hand p { font-size: 0.95rem; line-height: 1.5; }

.dx-tools { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.dx-tools li { font-size: 0.82rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--dx-line-strong); color: var(--dx-soft); }

.dx-actions { display: flex; flex-direction: column; gap: 4px; }
.dx-cta {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  border-radius: 12px; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 500;
  text-decoration: none; transition: opacity .2s;
}
.dx-cta:hover { opacity: .9; }
.dx-more {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  font-size: 0.95rem; color: var(--dx-accent-ink); text-decoration: none;
}
.dx-more:hover { color: #fff; }
.dx-panel-text { font-size: 1rem; line-height: 1.55; color: var(--dx-soft); }

@media (min-width: 960px) {
  .dx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; align-items: start; }
  .dx-intro { position: sticky; top: 100px; }
  .dx-opt { min-height: 60px; padding: 12px 18px; font-size: 1.05rem; }
  .dx-panel { padding: 32px; gap: 24px; }
  .dx-panel h3 { font-size: 1.75rem; }
  .dx-result strong { font-size: 3.5rem; }
  .dx-actions { flex-direction: row; align-items: center; gap: 20px; }
  .dx-more { justify-content: flex-start; }
}

.dx-note a { color: var(--dx-accent-ink); text-decoration: none; }
.dx-note a:hover { color: #fff; }