/* ZeroPercent brand primitives, shared by every page on the site.
   The rules behind these numbers are in docs/brand-sheet.md. Change them
   there first, then here.

   The lockup is always the 0% phone AND the ZeroPercent wordmark, together,
   at one size per context. It used to be drawn five different ways across the
   site, including a bare volt rectangle with no 0% on the legal pages. */

/* No padding or margin here: each page's own .logo rule spaces the lockup
   within its layout. This file only fixes what the lockup IS. */
.zp-lockup {
  display: flex; width: fit-content; align-items: center; gap: 10px;
  min-height: 44px; color: #f4f5ef; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.zp-lockup svg { display: block; flex: 0 0 auto; width: 19px; height: 34px; filter: none; }
.zp-lockup span {
  font: 800 20px/1 'Sora', system-ui, -apple-system, sans-serif;
  letter-spacing: -.02em; color: #f4f5ef;
}
a.zp-lockup:hover span { color: #fff; }
a.zp-lockup:focus-visible { outline: 2px solid #d8f000; outline-offset: 4px; border-radius: 8px; }

/* Compact: the footer and the rescue page's top bar. */
.zp-lockup.zp-sm { gap: 8px; min-height: 36px; }
.zp-lockup.zp-sm svg { width: 15px; height: 27px; }
.zp-lockup.zp-sm span { font-size: 17px; }

/* The App Store badge. One file, web/assets/app-store-badge.svg, used
   everywhere we link to the App Store, at Apple's minimum 40px height. */
.zp-badge { display: inline-block; line-height: 0; border-radius: 9px; }
.zp-badge img { display: block; height: 40px; width: auto; }
.zp-badge:focus-visible { outline: 2px solid #d8f000; outline-offset: 3px; }
.zp-badge.zp-lg img { height: 52px; }