/* Preview bar for comparing the two design versions. Remove this file and the .compare
   element from both pages once the client has chosen a version. */
:root { --compare-h: 34px; }
.compare {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--compare-h);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(30, 26, 22, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #fff;
}
.compare__label { opacity: .6; margin-right: 10px; }
.compare__tab {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.28); transition: background .25s, border-color .25s;
}
.compare__tab:hover { border-color: #fff; }
.compare__tab[aria-current="page"] { background: #fff; color: #2b2825; border-color: #fff; }
.compare ~ .site-head { top: var(--compare-h); }
.compare ~ main .hero { padding-top: var(--compare-h); }
@media (max-width: 480px) { .compare__label { display: none; } }