/* 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; }
}

/* Mobile menu (founder 2026-10-27: on the phone the header must show the pages). At 860px and below the bar keeps
   the logo and Join, and a Menu button at its right end opens the five pages in a glass panel under the bar.
   It is a <details>, so it opens and the links work with no script; brand.js adds aria-expanded, focus,
   Escape, a tap outside and the closing fade. Above 860px it is not shown and the bar is exactly as before. */
.bar .mnav { display: none; }
@media (max-width: 860px) {
  .bar .mnav { display: block; }
  .bar .bar-in { padding-right: 54px; }
  .mnav > summary { position: absolute; top: 50%; right: 5px; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; color: var(--ink);
    list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
    transition: transform 160ms var(--ease-out), background-color .2s ease; }
  .mnav > summary::-webkit-details-marker { display: none; }
  .mnav > summary:active { transform: scale(.94); background: rgba(11, 11, 12, .06); }
  .mnav-i { position: absolute; left: 13px; top: 16px; width: 18px; height: 12px; }
  .mnav-i i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--ease-out); }
  .mnav-i i:first-child { top: 1px; }
  .mnav-i i:last-child { bottom: 1px; }
  .mnav[open]:not(.closing) .mnav-i i:first-child { transform: translateY(4px) rotate(45deg); }
  .mnav[open]:not(.closing) .mnav-i i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .bar .mnav-panel.lg { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 8px; display: grid; gap: 2px;
    --r: 27px; --tint: .88; --blur: 28px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: #1E2633; transform-origin: 50% 0; }
  .bar .mnav-panel a { display: flex; align-items: center; min-height: 52px; padding: 0 18px; border-radius: 19px; transition: background-color .2s ease; }
  .bar .mnav-panel a[aria-current="page"] { color: var(--ink); font-weight: 800; }
  .bar .mnav-panel a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: currentColor; }
  .bar .mnav-panel a:active { background: rgba(11, 11, 12, .06); }
  .bar .mnav-panel a:focus-visible { outline-offset: -2px; border-radius: 19px; }
  .mnav[open] .mnav-panel { animation: mnav-in 220ms var(--ease-out); }
  .mnav.closing .mnav-panel { animation: mnav-out 160ms var(--ease-out) forwards; }
}
@media (max-width: 860px) and (hover: hover) and (pointer: fine) {
  .mnav > summary:hover, .bar .mnav-panel a:hover { background: rgba(11, 11, 12, .05); }
}
@keyframes mnav-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes mnav-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .mnav[open] .mnav-panel, .mnav.closing .mnav-panel { animation: none; }
  .mnav > summary, .mnav > summary:active, .mnav-i i { transition: none; transform: none; }
  .mnav[open]:not(.closing) .mnav-i i:first-child { transform: translateY(4px) rotate(45deg); }
  .mnav[open]:not(.closing) .mnav-i i:last-child { transform: translateY(-4px) rotate(-45deg); }
}