/* PepPin capsule nav, shared by the homepage and the legal pages (ported from the previous site).
   At the top of the page the logo, links and "Get the app" sit grouped in one dark glass capsule,
   centred. On scroll the capsule widens out to the sides and each part glides to its place.
   Phones and narrow tablets: logo plus "Get the app" only. Reduce Motion: the same two states,
   switched without animation. Self-contained: no tokens from site.css or styles.css. */

.cnav {
  --cnav-ink: #f3f1ec;
  --cnav-mute: rgba(243, 241, 236, .72);
  --cnav-ease: cubic-bezier(.16, 1, .3, 1);
  --cnav-h: 56px;
  position: fixed; z-index: 60; top: 14px; left: clamp(12px, 2.6vw, 40px); right: clamp(12px, 2.6vw, 40px);
  height: var(--cnav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  pointer-events: none; color: var(--cnav-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* shown once nav.js has measured the grouped layout (or after 1.2s without it, spread) */
  opacity: 0; animation: cnav-show .5s ease 1.2s forwards;
}
.cnav.is-ready { opacity: 1; animation: none; transition: opacity .5s ease; }
@keyframes cnav-show { to { opacity: 1; } }
.cnav > :not(.cnav__capsule) { pointer-events: auto; position: relative; }

.cnav__capsule {
  position: absolute; left: 50%; top: 0; z-index: 0; height: var(--cnav-h);
  width: var(--cap-open, 100%); transform: translateX(-50%); border-radius: 999px; pointer-events: none;
  background: rgba(13, 13, 13, .66);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 44px -26px rgba(0, 0, 0, .95);
  transition: width .9s var(--cnav-ease);
}
/* light legal pages: a denser capsule, so it reads black on white */
body.legal .cnav__capsule { background: rgba(10, 10, 10, .9); }
.cnav.is-compact .cnav__capsule { width: var(--cap-w, var(--cap-open, 100%)); }

.cnav__brand { z-index: 1; justify-self: start; display: inline-flex; align-items: center; height: 44px; padding: 0 12px 0 10px; margin-left: 6px; border-radius: 999px; }
.cnav__brand img, .cnav__brand svg { display: block; height: 28px; width: auto; aspect-ratio: 806 / 240; fill: currentColor; color: var(--cnav-ink); }

.cnav__links { z-index: 1; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
.cnav__links a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 clamp(10px, 1.1vw, 16px); border-radius: 999px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: var(--cnav-mute); text-decoration: none; transition: color .3s, background-color .3s;
}
.cnav__links a:hover { color: var(--cnav-ink); background: rgba(255, 255, 255, .07); }

.cnav__end { z-index: 1; justify-self: end; display: flex; align-items: center; margin-right: 6px; }
.cnav__cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: -.005em; line-height: 1; text-decoration: none;
  background: var(--cnav-ink); color: #050505; transition: background-color .3s, transform .4s var(--cnav-ease);
}
.cnav__cta:hover { background: #fff; transform: translateY(-1px); }

.cnav a:focus-visible { outline: 2px solid #cfe8dd; outline-offset: 2px; border-radius: 999px; }

/* grouped at the top: each part shifted toward the centre by the offsets nav.js measures */
.cnav__brand, .cnav__links, .cnav__end { transition: transform .9s var(--cnav-ease); }
.cnav.is-compact .cnav__brand { transform: translateX(var(--dx-b, 0px)); }
.cnav.is-compact .cnav__links { transform: translateX(var(--dx-l, 0px)); }
.cnav.is-compact .cnav__end { transform: translateX(var(--dx-e, 0px)); }
.cnav.no-anim .cnav__capsule, .cnav.no-anim .cnav__brand, .cnav.no-anim .cnav__links, .cnav.no-anim .cnav__end { transition: none; }

/* phones and narrow tablets: logo and "Get the app" */
@media (max-width: 999px) {
  .cnav { grid-template-columns: 1fr 1fr; }
  .cnav__links { display: none; }
}
@media (max-width: 767px) {
  .cnav { --cnav-h: 54px; top: 10px; }
  .cnav__brand { margin-left: 5px; padding: 0 10px 0 8px; }
  .cnav__brand img, .cnav__brand svg { height: 26px; }
  .cnav__end { margin-right: 5px; }
  .cnav__cta { padding: 0 18px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cnav, .cnav.is-ready { animation: none; opacity: 1; transition: none; }
  .cnav__capsule, .cnav__brand, .cnav__links, .cnav__end, .cnav__cta { transition: none !important; }
}