/* Plenee shared nav and footer brand — plenee.com and plenee.com/academy/ use this,
   and app.plenee.com carries the same rules in its own stylesheet.
   One file so the three surfaces cannot drift apart, and so 237 Academy pages fetch it
   once and reuse it rather than carrying their own copy.

   Owns every `nav` rule. The per-page <style> blocks used to define these; they were
   removed when this file landed. Load it AFTER the page's own <style>. */

nav {
  position: sticky; top: 0; z-index: 300;
  background: #0C1929;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  height: 72px; display: flex; align-items: center; gap: 24px;
  padding: 0 48px;
  transition: height .22s ease;
  /* Scroll anchoring treats content below a height-changing sticky header as the anchor
     and fights the collapse. Disabled document-wide in the app for the same reason. */
  overflow-anchor: none;
}
nav.is-collapsed { height: 44px; }
@media (prefers-reduced-motion: reduce) { nav { transition: none; } }

/* ─── lockup: only the mark navigates, the wordmark is a label ─── */
.nav-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.nav-home {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: block; line-height: 0; border-radius: 8px; flex-shrink: 0;
}
.nav-home img {
  width: 40px; height: 40px; display: block;
  transition: width .22s ease, height .22s ease;
}
nav.is-collapsed .nav-home img { width: 30px; height: 30px; }
.nav-home:focus-visible { outline: 2px solid #0FA8BC; outline-offset: 3px; }

.nav-word {
  font-family: 'Varela Round', 'Segoe UI', sans-serif;
  line-height: 1.02; cursor: default;
  overflow: hidden; white-space: nowrap;
  max-width: 152px; opacity: 1;
  transition: max-width .24s ease, opacity .15s ease, transform .24s ease;
}
nav.is-collapsed .nav-word { max-width: 0; opacity: 0; transform: translateX(-6px); }
.nav-word .nw-1 { display: block; font-size: 17px; letter-spacing: -.4px; color: #fff; }
.nav-word .nw-1 em { font-style: normal; color: #2D9CB8; }
.nav-word .nw-2 {
  display: block; font-size: 8.5px; letter-spacing: .85px;
  text-transform: uppercase; color: #F5A04A; margin-top: 1px;
}

/* ─── section links ─── */
.nav-links { display: flex; gap: 4px; align-items: center; flex: 1; min-width: 0; }
.nav-links a {
  color: #B6C6D6; text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 6px 10px; border-radius: 7px; white-space: nowrap; transition: color .2s;
}
.nav-links a:hover { color: #0FA8BC; }
.nav-links a.active { color: #0FA8BC; }
.nav-links a:focus-visible { outline: 2px solid #0FA8BC; outline-offset: 1px; }

/* ─── right cluster ─── */
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-cta {
  background: #F5A04A; color: #0C1929; border: none;
  padding: 6px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; display: inline-block; text-decoration: none; white-space: nowrap;
  transition: background .2s;
}
.nav-cta:hover { background: #E08A2E; }
.nav-cta[hidden] { display: none; }
.nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nav-acct { position: relative; display: flex; align-items: center; }
.nav-user {
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  background: transparent; color: #B6C6D6;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  transition: background .18s, color .18s;
}
.nav-user:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-user:focus-visible { outline: 2px solid #0FA8BC; outline-offset: 2px; }
.nav-user.is-signed { background: #0FA8BC; color: #fff; }
.nav-user.is-signed:hover { background: #0A8A9E; }

.nav-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 194px;
  background: #fff; border: 1px solid #DDE8F0; border-radius: 11px;
  box-shadow: 0 16px 38px -12px rgba(12,25,41,.42), 0 2px 6px rgba(12,25,41,.08);
  padding: 6px; z-index: 320;
}
.nav-menu[hidden] { display: none; }
.nav-mi {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: #0C1929;
  padding: 8px 10px; border-radius: 7px; text-decoration: none;
}
.nav-mi:hover { background: #F6F9FB; }
.nav-mi:focus-visible { outline: 2px solid #0FA8BC; outline-offset: -2px; }
.nav-sep { height: 1px; background: #DDE8F0; margin: 5px 9px; }
/* filled = that tab is open right now; hollow = choosing it will open one */
.nav-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: transparent; box-shadow: inset 0 0 0 1.5px #8A9EB0;
}
.nav-dot.is-live { background: #0FA8BC; box-shadow: 0 0 0 3px rgba(15,168,188,.2); }
.nav-dot.is-blank { box-shadow: none; }

.nav-toggle {
  display: none; background: none; border: none; color: #fff;
  cursor: pointer; padding: 8px; align-items: center; justify-content: center;
}

@media (max-width: 768px) {
  nav { padding: 0 20px; height: 56px; gap: 12px; }
  nav.is-collapsed { height: 44px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0C1929; border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 4px 20px 10px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; }
  .nav-word { max-width: 120px; }
  .nav-word .nw-1 { font-size: 15px; }
  .nav-word .nw-2 { display: none; }
}

/* ─── footer lockup ───────────────────────────────────────────────────────
   Same construction as the nav: the mark plus HTML text, so each surface names
   itself here too. Replaced the single full-lockup SVG, which said "Plenee
   Navigator" on all three surfaces regardless of which one you were on. */
.foot-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.foot-brand img { width: 44px; height: 44px; display: block; flex-shrink: 0; }
.foot-brand:focus-visible { outline: 2px solid #0FA8BC; outline-offset: 3px; }
.foot-word { font-family: 'Varela Round', 'Segoe UI', sans-serif; line-height: 1.02; }
.foot-word .fw-1 { display: block; font-size: 19px; letter-spacing: -.4px; color: #fff; }
.foot-word .fw-1 em { font-style: normal; color: #2D9CB8; }
.foot-word .fw-2 {
  display: block; font-size: 9px; letter-spacing: .9px;
  text-transform: uppercase; color: #F5A04A; margin-top: 2px;
}