.tool-visual {
  --tool-accent: #2536b0;
  --tool-tint: #e8ebfb;
}

.tool-visual--quality {
  --tool-accent: #17665c;
  --tool-tint: #e2f2ee;
}

html:not(#_) .tool-visual .tool-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 13rem);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  text-align: left;
}

.tool-visual .tool-intro > div { min-width: 0; }
.tool-visual .tool-intro .post-title { text-align: left; }
.tool-visual .tool-intro .post-lead { text-align: left; margin-inline: 0; }
.tool-visual .tool-intro .pg-badges { justify-content: flex-start; }

.tool-preview {
  margin: 0;
  padding: 1rem;
  border-radius: 16px;
  background: var(--tool-tint);
  color: #12212a;
  border: 1px solid #d6dfe5;
}

.tool-preview svg {
  display: block;
  width: 100%;
  height: 72px;
  color: var(--tool-accent);
  margin-bottom: .7rem;
}

.tool-preview strong, .tool-preview span { display: block; }
.tool-preview strong { font-size: .95rem; line-height: 1.3; }
.tool-preview span { font-size: .83rem; line-height: 1.45; margin-top: .3rem; }

.tool-visual #dl-quiz, .tool-visual #dq-sliders {
  background: #fff;
  border: 1px solid #d6dfe5;
  border-radius: 16px;
  padding: clamp(.85rem, 3vw, 1.5rem);
}

.tool-visual .dq-slider-row:last-child { border-bottom: 0; }
.tool-visual .dq-slider:focus-visible { outline: 2px solid var(--tool-accent); outline-offset: 5px; }
.tool-visual .dq-gauge-wrap {
  background: var(--tool-tint);
  border: 1px solid #d6dfe5;
  border-radius: 16px;
  padding: 1.25rem;
}
.tool-visual .dq-gauge-wrap svg { max-width: 100%; height: auto; }
.tool-visual .pg-prog { border-bottom-color: #d6dfe5; }
.tool-visual .pg-prog-b { height: 10px; }

@media (max-width: 600px) {
  html:not(#_) .tool-visual .tool-intro { grid-template-columns: minmax(0, 1fr); }
  .tool-preview { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: .85rem; }
  .tool-preview svg { height: 48px; margin: 0; }
}