/* Approved raster artwork is unchanged; only transparent outer margins are clipped. */
a.approved-brand,
.site-header a.approved-brand {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 144px; min-width: 0; max-width: 100%; height: 116px;
  overflow: hidden; line-height: 0;
}
a.approved-brand img.slepok-approved-logo {
  display: block; flex: none; width: 144px; height: 144px;
  max-width: none; aspect-ratio: 1; object-fit: contain; margin: 0;
}
.access-card img.slepok-approved-logo,
.gate-card img.slepok-approved-logo {
  display: block; width: 156px; height: 156px; object-fit: contain;
  max-width: 100%; aspect-ratio: 1; margin: -16px auto 0;
}
.topbar a.approved-brand { width: 108px; height: 86px; }
.topbar a.approved-brand img.slepok-approved-logo { width: 108px; height: 108px; }
/* The fixed homepage header needs an explicit, compact height for a square logo. */
main > .site-header { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
.home-hub { padding-top: 190px; }
.brand-row { gap: 16px; }
.approved-brand:focus-visible { outline: 3px solid #74242a; outline-offset: 4px; }
/* Quiet paper-cut accents stay behind the labels and never receive pointer events. */
#format-cards .format-link {
  position: relative; isolation: isolate; overflow: hidden;
  min-width: 172px; padding-right: 26px;
}
#format-cards .format-link-label { position: relative; z-index: 1; }
#format-cards .format-link::before,
#format-cards .format-link::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  color: var(--format-color);
}
#format-cards .format-link::before {
  width: 90px; height: 90px; right: -30px; top: -51px;
  border: 15px solid currentColor; border-radius: 50%; opacity: .09;
}
#format-cards .format-link::after {
  width: 74px; height: 35px; right: -12px; bottom: -18px;
  background: currentColor; transform: rotate(-24deg); opacity: .10;
}
#format-cards .format-link:nth-child(3n + 2)::before {
  width: 70px; height: 70px; top: 7px; right: -30px;
  border-width: 13px; border-radius: 50% 50% 12% 50%; transform: rotate(-35deg);
}
#format-cards .format-link:nth-child(3n + 2)::after {
  width: 38px; height: 38px; right: 41px; bottom: -19px; border-radius: 50%;
}
#format-cards .format-link:nth-child(3n)::before {
  border: 0; background: currentColor; border-radius: 0; width: 76px; height: 64px;
  top: -25px; right: -18px; transform: rotate(32deg); opacity: .08;
}
#format-cards .format-link:nth-child(3n)::after {
  width: 65px; height: 65px; right: 20px; bottom: -45px; border-radius: 50%;
}
.how-to-find .how-to-find-heading {
  min-height: 0; justify-content: center; gap: 0;
}
@media (hover: hover) {
  #format-cards .format-link:hover::before,
  #format-cards .format-link:hover::after { color: #fff; }
}
@media (max-width: 767px) {
  a.approved-brand,
  .site-header a.approved-brand { width: 116px; height: 94px; }
  a.approved-brand img.slepok-approved-logo { width: 116px; height: 116px; }
  main > .site-header { padding-top: 3px; padding-bottom: 3px; }
  .home-hub { padding-top: 150px; }
  .topbar a.approved-brand { width: 90px; height: 74px; }
  .topbar a.approved-brand img.slepok-approved-logo { width: 90px; height: 90px; }
  #format-cards .format-link { min-width: 0; padding-right: 12px; }
  .how-to-find .how-to-find-heading { padding: 22px 20px; }
}
/* Two independent CSS windows into the approved PNG: symbol left, wordmark right.
   No artwork is regenerated; the original image supplies the accessible alt text. */
a.approved-brand,
.site-header a.approved-brand,
.topbar a.approved-brand {
  --brand-mark-width: 62px;
  --brand-name-width: 164px;
  position: relative; display: inline-flex; align-items: center;
  justify-content: flex-start; gap: 12px; width: max-content;
  height: 76px; min-width: 0; overflow: visible;
}
a.approved-brand img.slepok-approved-logo,
.topbar a.approved-brand img.slepok-approved-logo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
a.approved-brand::before,
a.approved-brand::after {
  content: ''; display: block; flex: none; pointer-events: none;
  background-image: url('/home-assets/logo-approved-20260927.png');
  background-repeat: no-repeat;
}
a.approved-brand::before {
  width: var(--brand-mark-width); height: calc(var(--brand-mark-width) * 1.14035);
  background-size: 220% auto;
  background-position: calc(var(--brand-mark-width) * -.5614) calc(var(--brand-mark-width) * -.27193);
}
a.approved-brand::after {
  transform: translateY(3px);
  width: var(--brand-name-width); height: calc(var(--brand-name-width) * .28);
  background-size: 125.4% auto;
  background-position: calc(var(--brand-name-width) * -.118) calc(var(--brand-name-width) * -.83);
}
.topbar a.approved-brand { --brand-mark-width: 44px; --brand-name-width: 118px; gap: 8px; height: 54px; }
.home-hub { padding-top: 154px; }
@media (max-width: 767px) {
  a.approved-brand,
  .site-header a.approved-brand { --brand-mark-width: 50px; --brand-name-width: 144px; gap: 9px; height: 62px; }
  .topbar a.approved-brand { --brand-mark-width: 36px; --brand-name-width: 98px; gap: 6px; height: 46px; }
  .home-hub { padding-top: 120px; }
}