/* ═══════════════════════════════════════════════════════════════
   The public site's header — the one stylesheet for it.

   The homepage's header, used unchanged by every public page: index.html
   (homepage and the public in-app views) and every static page
   (scripts/sync-public-nav.mjs adds the link). Markup and links come from
   /public-nav.js. The rules below are the homepage's own, in its cascade
   order: index.html's header block, its ≥900px padding, then the
   ≥1440px / 1140–1439px rules that used to be injected by
   marketing-upgrades.js. The first section only pins what a header would
   otherwise inherit from its page, at the values it has on the homepage.
   ═══════════════════════════════════════════════════════════════ */

/* What the header needs from the homepage, so a static page renders it
   identically: its tokens, and the type it inherits inside .hp (17px / 1.6). */
.hp-nav,.hp-nav-band{--hp-navy:#061A28;--hp-ink:#0A2233;--hp-ivory:#FFFFFF;--hp-gold:#D8A64B;--hp-cta:#D8A64B;--hp-cta-2:#EAC97A;--hp-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.hp-nav,.hp-nav *,.hp-nav *::before,.hp-nav *::after{box-sizing:border-box}
.hp-nav *{margin:0}
.hp-nav{font-size:17px;line-height:1.6;font-weight:400;letter-spacing:normal;text-align:start}
/* The navy the header sits on at the top of a page, as the homepage's hero
   does; it scrolls away with the page, so further down the header frosts
   whatever is under it — again as on the homepage. */
.hp-nav-band{position:absolute;top:0;left:0;right:0;height:73px;background:#08283A;pointer-events:none}

/* The logo link reaches a 40px tap target without changing how it looks:
   vertical padding, and it stays centred in the 72px row. */
.hp-nav .hp-brand{padding:3px 0}

/* The header's buttons (the homepage's .hp-btn / -gold / -sm, scoped here) */
.hp-nav .hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;border-radius:12px;font-size:16px;font-weight:700;font-family:inherit;line-height:1;letter-spacing:-.01em;cursor:pointer;border:1.5px solid transparent;text-decoration:none;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.hp-nav .hp-btn:active{transform:translateY(0) scale(.99)}
.hp-nav .hp-btn:focus-visible,.hp-nav .hp-link:focus-visible,.hp-nav .hp-signin:focus-visible{outline:2px solid var(--hp-gold);outline-offset:3px}
.hp-nav .hp-btn-gold{background:linear-gradient(180deg,var(--hp-cta-2),var(--hp-cta));color:var(--hp-navy);box-shadow:0 10px 24px -10px rgba(216,166,75,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.hp-nav .hp-btn-gold:hover{transform:translateY(-1px);box-shadow:0 16px 30px -10px rgba(216,166,75,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.hp-nav .hp-btn-sm{padding:11px 18px;font-size:15px;border-radius:10px}
@media (prefers-reduced-motion:reduce){.hp-nav .hp-btn{transition:none}.hp-nav .hp-btn:hover{transform:none}}

/* Header (index.html) */
.hp-nav{position:sticky;top:0;z-index:80;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-family:var(--hp-sans);-webkit-font-smoothing:antialiased}
.hp-nav--dark{background:rgba(6,26,40,.74);border-bottom:1px solid rgba(232,238,242,.08);color:var(--hp-ivory)}
.hp-nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;width:100%;max-width:1280px;margin:0 auto;padding:0 22px}
.hp-brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;color:inherit;flex:none}
.hp-brand b{font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.hp-links{display:flex;align-items:center;gap:2px}
.hp-link{font-size:15px;font-weight:600;padding:9px 13px;border-radius:9px;cursor:pointer;background:none;border:none;font-family:inherit;color:inherit;opacity:.74;text-decoration:none;white-space:nowrap;transition:opacity .15s,background .15s;line-height:1}
.hp-link:hover{opacity:1;background:rgba(127,127,127,.12)}
.hp-link.on{opacity:1;box-shadow:inset 0 -2px 0 var(--hp-gold)}
.hp-nav-actions{display:flex;align-items:center;gap:8px;flex:none}
.hp-links-actions{display:none}
.hp-signin{text-decoration:none;font-size:15px;font-weight:600;padding:10px 14px;border-radius:10px;cursor:pointer;color:inherit;opacity:.85;white-space:nowrap;transition:opacity .15s,background .15s}
.hp-signin:hover{opacity:1;background:rgba(127,127,127,.12)}
.hp-burger{padding:0;display:none;width:44px;height:44px;border-radius:10px;border:1px solid rgba(127,127,127,.3);background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.hp-burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.hp-nav.open .hp-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hp-nav.open .hp-burger span:nth-child(2){opacity:0}
.hp-nav.open .hp-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1140px) and (max-width:1279px){
  .hp-link{font-size:14px;padding:8px 10px}
  .hp-signin{font-size:14px;padding:9px 10px}
}
@media (max-width:1139px){
  .hp-links{display:none}
  .hp-burger{display:flex}
  .hp-nav.open .hp-links{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:absolute;left:0;right:0;top:72px;max-height:calc(100vh - 72px);overflow:auto;padding:12px 22px 22px;border-bottom:1px solid rgba(127,127,127,.2);box-shadow:0 30px 40px -20px rgba(6,26,40,.35)}
  .hp-nav--dark.open .hp-links{background:#061A28}
  .hp-nav.open .hp-link{padding:14px 12px;font-size:17px;text-align:left;opacity:.92}
  .hp-links-actions{display:flex;flex-direction:column;gap:10px;padding-top:14px;margin-top:8px;border-top:1px solid rgba(127,127,127,.2)}
  .hp-links-actions .hp-btn,.hp-links-actions .hp-signin{width:100%;text-align:center;padding:15px 18px;font-size:16px}
}
@media (max-width:639px){
  .hp-nav-actions{display:none}
  .hp-brand b{font-size:16px}
}

/* Wider desktop rhythm (index.html) */
@media (min-width:900px){.hp-nav-in{padding:0 40px}}

/* The full twelve-item nav is ~1,650px at 15px, so it shows from 1440px in
   compact form; below that the menu button carries it
   (formerly injected by marketing-upgrades.js). */
@media(min-width:1440px){.hp-nav-in{max-width:1440px}.hp-link{font-size:14px;padding:8px 8px}.hp-signin{font-size:14px;padding:9px 10px}.hp-nav-actions{padding-left:14px;border-left:1px solid rgba(127,127,127,.28)}}
  @media(min-width:1140px) and (max-width:1439px){.hp-links{display:none}.hp-burger{display:flex}.hp-nav.open .hp-links{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:absolute;left:0;right:0;top:72px;max-height:calc(100vh - 72px);overflow:auto;padding:12px 22px 22px;border-bottom:1px solid rgba(127,127,127,.2);box-shadow:0 30px 40px -20px rgba(6,26,40,.35)}.hp-nav--dark.open .hp-links{background:#061A28}.hp-nav.open .hp-link{padding:14px 12px;font-size:17px;text-align:left;opacity:.92}.hp-links-actions{display:flex;flex-direction:column;gap:10px;padding-top:14px;margin-top:8px;border-top:1px solid rgba(127,127,127,.2)}.hp-links-actions .hp-btn,.hp-links-actions .hp-signin{width:100%;text-align:center;padding:15px 18px;font-size:16px}}

/* Tablet widths (640–1439px), where the bar shows the menu button and the
   gold button beside it: a 40px tap target — one pixel taller than its
   natural 39px, still centred. Nothing else about it changes; the menu's
   own copy of the button and the ≥1440px desktop bar are untouched. */
@media (min-width:640px) and (max-width:1439px){.hp-nav .hp-nav-actions .hp-btn-sm{min-height:40px}}