/* Store home only (nx-sf-home-*). The shared storefront pieces live in _shared/store.css. */
/* the hero's two columns line up on the card's top edge when the lead runs long (big Site Title / meta description) */
@media (min-width: 64rem) { .nx-sf-hero-in { align-items: center; } }

/* a tool card with the tool's full logo (wordmark, task 490): the wordmark on a white chip in the tile's place (white in dark mode
   too: wordmarks are drawn for a light background), then the name (with its plan) and the category on one line */
.nx-sf-tool-head-full { flex-direction: column; align-items: flex-start; gap: .625rem; }
.nx-sf-wordmark { max-width: 100%; }
.nx-sf-wordmark a { display: inline-flex; align-items: center; height: 3rem; max-width: 100%; padding: .5rem .875rem; border-radius: 10px;
  border: 1px solid var(--nx-line-strong); background: #fff; transition: border-color .15s; }
.nx-sf-wordmark a:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--nx-line-strong)); }
.nx-sf-wordmark img { display: block; height: 100%; width: auto; max-width: min(100%, 13rem); object-fit: contain; object-position: left center; }
.dark .nx-sf-wordmark a { border-color: transparent; }
.dark .nx-sf-wordmark a:hover { border-color: color-mix(in oklab, var(--primary) 55%, transparent); }
.nx-sf-tool-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; min-width: 0; }
.nx-sf-tool-title { font-size: .9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--mono); }