/* The top bar on the pages outside the studio (prompts, pricing, legal). Same buttons as the studio's,
   self-contained (own colors) so it looks identical whatever stylesheet the page uses. */
.pnav { position: fixed; inset: 0 0 auto; z-index: 60; height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 28px; background: rgba(8, 8, 10, .86); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border-bottom: 1px solid rgba(255, 255, 255, .075); font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.pnav a { text-decoration: none; }
.pnav [hidden] { display: none !important; }
.pnav-brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: #f5f3ef; }
.pnav-brand svg { width: 26px; height: 26px; color: #f5f3ef; flex: none; }
.pnav-brand span { font-size: 20px; font-weight: 800; font-stretch: 112%; letter-spacing: -.04em; line-height: 1; padding-bottom: 2px; }
.pnav-pages { justify-self: center; display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(12, 12, 14, .55); border: 1px solid rgba(255, 255, 255, .12); }
.pnav-pages a { height: 32px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 10px; font-size: 13.5px; font-weight: 650; font-stretch: 108%; color: rgba(245, 243, 239, .66); transition: background .16s, color .16s; }
.pnav-pages a:hover { color: #f5f3ef; background: rgba(255, 255, 255, .08); }
.pnav-pages a[aria-current=page], .pnav-pages a[aria-current=page]:hover { background: #f5f3ef; color: #08080a; }
.pnav-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.pnav-btn { height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 650; font-stretch: 106%; color: #f5f3ef; white-space: nowrap; transition: background .15s, border-color .15s, transform .12s; }
.pnav-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); }
.pnav-btn:active { transform: scale(.97); }
.pnav-btn.light { background: #f5f3ef; border-color: transparent; color: #08080a; }
.pnav-btn.light:hover { background: #fff; }
@media (max-width: 720px) {
  .pnav { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 16px; }
  .pnav-brand span, .pnav .hide-sm { display: none !important; }
  .pnav-pages a { height: 30px; padding: 0 9px; font-size: 12.5px; }
  .pnav-btn { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 11px; }
}