.qtool-section {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.qtool-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.qtool-heading h3 { margin: 0 0 8px; color: var(--navy); font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.qtool-heading p:not(.eyebrow) { margin: 0; max-width: 850px; color: var(--ink-soft); }
.qtool-groups { display: grid; gap: 16px; }
.qtool-group {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.qtool-group--must { background: linear-gradient(145deg, rgba(23,184,179,.08), #fff 46%); border-color: rgba(23,184,179,.28); }
.qtool-group--useful { background: linear-gradient(145deg, rgba(15,36,67,.045), #fff 48%); }
.qtool-group--optional { background: #fbfcfd; }
.qtool-group__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 13px;
}
.qtool-group__title > span { color: var(--navy); font-weight: 850; font-size: 1.05rem; }
.qtool-group__title small { color: var(--ink-soft); }
.qtool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qtool-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas:
    "top top"
    "visual title"
    "visual why"
    "visual meta"
    "visual button";
  column-gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
}
.qtool-card__topline { grid-area: top; display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.qtool-level, .qtool-ad, .qtool-neutral {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}
.qtool-level { color: var(--navy); background: rgba(15,36,67,.07); }
.qtool-card--must .qtool-level { color: #08736f; background: rgba(23,184,179,.14); }
.qtool-ad { color: #685016; background: #fff5cf; }
.qtool-neutral { color: var(--ink-soft); background: var(--surface-soft); }
.qtool-image, .qtool-icon { grid-area: visual; width: 92px; height: 92px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.qtool-image { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.qtool-image img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.qtool-icon { display: flex; align-items: center; justify-content: center; color: var(--teal); background: var(--surface-soft); font-size: 2rem; font-weight: 800; }
.qtool-card h4 { grid-area: title; margin: 0 0 6px; color: var(--navy); font-size: 1rem; line-height: 1.28; }
.qtool-why { grid-area: why; margin: 0 0 9px; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.qtool-meta { grid-area: meta; margin: 0 0 10px; color: var(--ink-soft); font-size: .78rem; }
.qtool-button { grid-area: button; justify-self: start; min-height: 38px !important; padding: 8px 12px !important; font-size: .82rem !important; }
.qtool-disclosure { margin: 14px 0 0; color: var(--ink-soft); font-size: .8rem; }
.qtool-disclosure strong { color: var(--ink); }
.qtool-loading { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); color: var(--ink-soft); }

@media (max-width: 820px) {
  .qtool-section { margin-top: 22px; padding-top: 22px; }
  .qtool-grid { grid-template-columns: 1fr; }
  .qtool-group__title { display: grid; gap: 2px; }
}
@media (max-width: 480px) {
  .qtool-card {
    grid-template-columns: 74px minmax(0, 1fr);
    column-gap: 11px;
    padding: 13px;
  }
  .qtool-image, .qtool-icon { width: 74px; height: 74px; }
}