/* SaltQuill Labs: extra light mini-UIs for the Growth service pages (seo.html, ads.html, analytics.html).
   Load after assets/site.css. Built only from site.css tokens; every block is decorative (aria-hidden). */

/* hero overlay: search result card (.hsr) on .hmedia */
.hsr{position:absolute;z-index:2;left:18px;bottom:18px;width:min(340px,calc(100% - 36px));display:grid;gap:8px;padding:12px;border-radius:18px}
.hsr .sres{padding:7px 11px}

/* checklist rows (.chk) inside a card .vin */
.chk{display:grid;gap:5px}
.chk span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 11px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 12.5px var(--body);color:var(--ink-2)}
.chk em{font-style:normal;flex-shrink:0;padding:2px 8px;border-radius:999px;background:rgba(94,234,212,.2);color:#0F6B5E;font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.chk em.w{background:rgba(232,176,75,.22);color:#7A5310}

/* mini-UI panels (.wv) inside a card .vis: clear the number tag */
.vis>.wv{padding-top:46px}

/* code snippet (.code) for structured data */
.code{margin:0;padding:12px 14px;border-radius:14px;background:var(--ink);color:#C9CFDF;font:500 12px/1.65 var(--mono);white-space:pre;overflow:hidden;box-shadow:0 16px 30px -18px rgba(15,21,40,.8)}
.code .k{color:var(--gold)}.code .s{color:var(--teal)}

/* heatmap in a light card: reuses .heat from site.css, fills the .vis and shows its blobs */
.vis .heat{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:linear-gradient(160deg,#FBF6EA,#F1E7D1)}
.vis .heat .pg{inset:48px 18px 0;border-radius:12px 12px 0 0}
.vis .heat .blob{opacity:.8}
@supports not (aspect-ratio:1){.vis .heat{height:auto;padding-top:0}}

@media (max-width:720px){
  .hsr{left:12px;bottom:12px;width:calc(100% - 24px);padding:10px;gap:6px}
  .hsr .sres:not(.hi){display:none}
  .chk span:nth-child(n+4){display:none}
}