/* PQI brand layer: self-hosted fonts (SIL OFL) + shared CoJoMojo lockup. */
@font-face{font-family:"D-DIN Condensed";src:url("/fonts/D-DINCondensed-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/fonts/Inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/fonts/Inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/fonts/Inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/fonts/Inter-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--cojo-blue:#57A3D5}

/* The CoJoMojo mark: always live text, D-DIN Condensed Bold, uppercase, brand blue. */
.cojomojo-mark{font-family:"D-DIN Condensed","Arial Narrow",sans-serif;font-weight:700;text-transform:uppercase;color:var(--cojo-blue);letter-spacing:.02em;line-height:1}

/* Header lockup: PQI by COJOMOJO */
.pqi-lockup{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none!important;flex-shrink:0;white-space:nowrap}
.pqi-lockup .lk-pqi{font-family:"D-DIN Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:26px;line-height:1;letter-spacing:.03em;color:#F2F2F2}
.pqi-lockup .lk-by{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:12px;color:#A8A8A8;letter-spacing:.02em}
.pqi-lockup .cojomojo-mark{font-size:19px}
.pqi-lockup:hover .lk-pqi{color:#fff}
.pqi-lockup .lk-pqi{display:inline-flex;flex-direction:column;align-items:flex-start}
.pqi-lockup .lk-pre{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#7ec0ea;margin-bottom:2px}
.cojomojo-mark{color:var(--cojo-blue)!important;letter-spacing:.02em!important;font-weight:700!important}
@media (max-width:480px){.pqi-lockup .lk-pqi{font-size:22px}.pqi-lockup .cojomojo-mark{font-size:16px}.pqi-lockup{gap:6px}}

/* 2026-10-06 header nav fix (nav.site on home / how it works / about).
   Root cause: nav.site had a fixed 56px height while .nav-links could wrap to two rows
   between 641px and ~830px (iPad portrait), so the top row overflowed and was clipped.
   Fix: the bar may grow instead of clipping; link labels never break; at tablet widths the
   links stay on one row with tighter spacing and, if they still don't fit, drop below the
   lockup as one row. "body" prefix outranks the per-page inline nav rules. */
body nav.site{height:auto;min-height:var(--nav-h,56px)}
body .nav-links a{white-space:nowrap}
@media (min-width:641px) and (max-width:960px){
  body nav.site{flex-wrap:wrap;padding:4px 14px;row-gap:2px}
  body .nav-links{flex-wrap:nowrap;margin-left:auto;gap:0 4px;font-size:13px}
  body .nav-links a{padding:6px 3px}
  body .nav-links a.cta-nav{padding:7px 12px}
}