/* Feature cards (#tools): QR hint overlay pointing at the app sign-up/download
 * landing. The overlay rides on top of the existing blob; card layout, copy and
 * hover behaviour in site.css are untouched. Load after site.css. */
.tool__qr-btn {
  position: absolute; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid rgba(23, 60, 50, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.85);
  font: 500 12px/1 var(--font-sans); letter-spacing: var(--landing-track-prose); color: var(--text-primary); cursor: pointer;
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.tool__qr-btn svg { width: 12px; height: 12px; fill: currentColor; }
.tool__qr-btn:hover { box-shadow: 0 8px 16px -12px rgba(13, 31, 25, 0.45); }
.tool__qr-btn:focus-visible { outline: 3px solid var(--focus-on-light); outline-offset: 2px; }
.tool__qr {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: calc(100% - 76px); /* JS pins this to the blob zone */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.tool--qr-show .tool__qr { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-out); }
.tool__qr-svg { width: clamp(108px, 50%, 124px); height: auto; aspect-ratio: 1; flex-shrink: 0; border-radius: 8px; box-shadow: 0 12px 26px -18px rgba(13, 31, 25, 0.5); }
.tool__qr-caption {
  max-width: 100%; margin: 0; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.92);
  font: 500 11px/1.45 var(--font-sans); letter-spacing: var(--landing-track-prose); color: var(--text-muted);
  text-align: center; overflow-wrap: break-word;
}
html:lang(zh) .tool__qr-caption { font-size: 12px; }
/* Reserve room before opening: the scan control must never cover QR modules. */
@media (max-width: 599.98px) {
  #tools .tool__blob { min-height: 248px; }
  .tool__qr { justify-content: flex-start; padding: 60px 10px 10px; gap: 8px; }
  .tool__qr-caption { padding-inline: 6px; }
}
@media (pointer: coarse) {
  .tool__qr-btn { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool__qr-btn, .tool__qr, .tool--qr-show .tool__qr { transition: none; }
}