/* Site-wide brand touches, loaded on every page after the page's own styles. */

/* Footer Join: a solid, readable field on the sky (it was too see-through) */
.join-box form { --tint: .92; --blur: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(255, 255, 255, .6), 0 22px 44px -20px rgba(5, 22, 55, .5); transition: box-shadow .2s ease; }
.join-box form:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 3px rgba(255, 255, 255, .9), 0 22px 44px -20px rgba(5, 22, 55, .5); }
.join-box input { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.join-box input::placeholder { color: #6E7480; font-weight: 550; }
.join-box .done { width: fit-content; height: 52px; padding: 0 22px; margin: 30px auto 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 22px 44px -20px rgba(5, 22, 55, .5); }

/* Join, when you press it: the piq mark breathes in the button while it sends (the brand's loading motion),
   then the field gives way to a "You're in" pill where the two bodies come together. */
.join .btn { position: relative; }
.join .btn .bl { transition: opacity .18s ease; }
.join .btn .bm { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; overflow: visible; opacity: 0; transition: opacity .18s ease; }
.join[data-state="sending"] .btn .bl { opacity: 0; }
.join[data-state="sending"] .btn .bm { opacity: 1; }
.join[data-state="sending"] input { pointer-events: none; }
.join[data-state="leaving"] form { opacity: 0; transform: scale(.96); transition: opacity .2s ease, transform .24s ease; }
.join .done .jm { width: 20px; height: 20px; flex: none; overflow: visible; }
.join .done.has-mark > svg.i { display: none; }
.join[data-state="done"] .done { animation: piq-join-in 460ms cubic-bezier(.23, 1, .32, 1) both; }
.join[data-state="done"] .done .jt { animation: piq-join-text 320ms ease 420ms both; }
.join form.shake { animation: piq-shake 380ms cubic-bezier(.36, .07, .19, .97); }
@keyframes piq-join-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes piq-join-text { from { opacity: 0; } to { opacity: 1; } }
@keyframes piq-shake { 20%, 80% { transform: translateX(-3px); } 40%, 60% { transform: translateX(5px); } }

/* Header logo, laid out as on piqfinance.com: the 26px mark, 9px, then the name (in the piq wordmark, sized to the
   x-height of the live site's 20px "piq"). The mark plays the brand motion on load and on hover. */
.bar .brand-l { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.bar .brand-l .bmk { width: 26px; height: 26px; flex: none; overflow: visible; }
.bar .brand-l .bwm { width: 31.7px; height: 20px; flex: none; }
.hero .lockup { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .join[data-state="done"] .done, .join[data-state="done"] .done .jt, .join form.shake { animation: none; }
}