/* Tools bento: the audit alone gets the kit's double bezel. */
.ti-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ti-tool {
  display: flex;
  min-width: 0;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r-lg);
  background: var(--wb-surface-solid);
  box-shadow: var(--wb-shadow-sm);
  color: var(--wb-text);
  transition: transform 180ms var(--wb-ease);
}
.ti-tool:hover { transform: translateY(-2px); }
.ti-tool__core { display: flex; flex-direction: column; gap: 20px; width: 100%; min-width: 0; padding: 22px; }
.ti-tool__head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ti-tool__ico { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--wb-r-sm); background: var(--wb-surface-sunk); color: var(--wb-accent); }
.ti-tool__txt { min-width: 0; }
.ti-tool__txt h2 { margin: 0 0 6px; font-family: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif; font-size: 1.2rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
.ti-tool__txt p { margin: 0; color: var(--wb-text-soft); font-size: .9rem; line-height: 1.55; }
.ti-result { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border-radius: var(--wb-r); background: var(--wb-surface-sunk); font-variant-numeric: tabular-nums; }
.ti-result__label { margin: 0; color: var(--wb-text-soft); font-size: .75rem; font-weight: 650; letter-spacing: .03em; }
.ti-result--example .ti-result__label { color: var(--wb-muted); }
.ti-result__body { display: grid; gap: 10px; min-width: 0; }
.ti-result__name { display: block; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .98rem; font-weight: 600; line-height: 1.4; }
.ti-meta { margin: 0; color: var(--wb-text-soft); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.ti-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 9px; border-radius: var(--wb-r-pill); background: var(--wb-surface-solid); color: var(--wb-text-soft); font-size: .73rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.ti-chip--ok { color: var(--wb-ok); background: var(--wb-ok-bg); }
.ti-chip--warn { color: var(--wb-warn); background: var(--wb-warn-bg); }
.ti-chip--bad { color: var(--wb-bad); background: var(--wb-bad-bg); }
.ti-tool__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.ti-secondary { color: var(--wb-text-soft); font-size: .8rem; text-underline-offset: 3px; }
.ti-secondary:hover { color: var(--wb-accent); }
.ti-tool a:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 4px; }
.ti-number { display: block; margin: 0; font-family: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif; font-size: 1.5rem; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.ti-stat { font-family: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif; font-size: 2rem; line-height: 1; }
.ti-scan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.ti-scan-row > div { min-width: 0; }
.ti-spark { width: 84px; height: 36px; flex-shrink: 1; min-width: 40px; color: var(--wb-accent); }
.ti-qr-example { display: flex; align-items: center; gap: 18px; }
.ti-qr-example > div { display: grid; gap: 8px; min-width: 0; }
.ti-qr { width: 92px; height: 92px; flex-shrink: 0; color: var(--wb-text); padding: 7px; background: var(--wb-surface-solid); border-radius: var(--wb-r-sm); }
.ti-qr__logo { fill: var(--wb-accent); stroke: var(--wb-surface-solid); stroke-width: 4px; }
.ti-file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ti-file > div { min-width: 0; }
.ti-file__icon { color: var(--wb-accent); flex-shrink: 0; }
.ti-image-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ti-image { position: relative; overflow: hidden; border-radius: var(--wb-r-sm); background: var(--wb-surface-solid); }
.ti-image svg { display: block; width: 100%; height: 88px; fill: var(--wb-accent); }
.ti-image svg > circle { opacity: .45; }
.ti-image--before svg { opacity: .6; }
.ti-image__ridge { fill: var(--wb-surface-solid); }
.ti-image__grid { fill: none; stroke: var(--wb-text); opacity: .15; stroke-width: 1; }
.ti-image > span { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: var(--wb-r-pill); background: var(--wb-surface-solid); color: var(--wb-text-soft); font-size: .7rem; }
.ti-conversion { margin: 0; font-size: .9rem; font-weight: 650; }
.ti-domain { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ti-score { flex-shrink: 0; font-family: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif; font-size: 1.6rem; font-weight: 650; }
.ti-score small { color: var(--wb-muted); font: 500 .75rem 'Geist', system-ui, sans-serif; }
.ti-verdict { margin: 0; color: var(--wb-text-soft); font-size: .9rem; line-height: 1.55; }

.ti-tool--lead { grid-column: 1 / -1; background: var(--wb-surface-sunk); box-shadow: var(--wb-shadow); }
.ti-tool--lead .ti-tool__core { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 22px 36px; padding: 28px; }
.ti-tool--lead .ti-tool__head { align-items: center; gap: 18px; }
.ti-tool--lead .ti-tool__txt h2 { font-size: 1.7rem; }
.ti-tool--lead .ti-tool__txt p { max-width: 43ch; }
.ti-tool--lead .ti-tool__ico { width: 54px; height: 54px; border-radius: var(--wb-r); }
.ti-tool--lead .ti-result { grid-column: 2; grid-row: 1 / 3; }
.ti-tool--lead .ti-tool__foot { justify-content: flex-start; margin: 0; }
.ti-audit { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ti-ring.wk-ring { width: 96px; height: 96px; }
.ti-ring.wk-ring::before { inset: 8px; background: var(--wb-surface-sunk); }
.ti-ring.wk-ring strong { font-size: 2rem; }
.ti-ring.wk-ring span { font-size: .65rem; }

@media (max-width: 1199px) and (min-width: 900px) {
  .ti-tool__core { padding: 16px; }
  .ti-tool__head { flex-direction: column; }
  .ti-tool--lead .ti-tool__head { flex-direction: row; }
  .ti-result { padding: 14px; }
  .ti-qr-example { gap: 10px; }
  .ti-qr { width: 76px; height: 76px; }
}
@media (max-width: 899px) {
  .ti-grid { grid-template-columns: minmax(0, 1fr); }
  .ti-tool--lead .ti-tool__core { display: flex; align-items: stretch; padding: 22px; gap: 20px; }
  .ti-tool--lead .ti-tool__head { align-items: flex-start; }
  .ti-tool--lead .ti-tool__foot { justify-content: space-between; }
  .ti-tool--lead .ti-result { width: 100%; }
}
@media (max-width: 440px) {
  .ti-tool__core, .ti-tool--lead .ti-tool__core { padding: 16px; }
  .ti-tool--lead .ti-tool__txt h2 { font-size: 1.4rem; }
  .ti-tool--lead .ti-tool__head { gap: 12px; }
  .ti-tool--lead .ti-tool__ico { width: 44px; height: 44px; }
  .ti-result { padding: 14px; }
  .ti-audit { gap: 12px; }
  .ti-ring.wk-ring { width: 78px; height: 78px; }
  .ti-ring.wk-ring strong { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ti-tool, .ti-tool .wk-cta { transition: none; }
  .ti-tool:hover, .ti-tool .wk-cta:active { transform: none; }
}