/* Loomi.Ai site navigation (2026-10-08): ONE header for every page, styled to match the Desk app's own nav bar exactly
   (white 40px pill bar, Loomi.Ai wordmark + black Desk pill, 11.5px tabs, glyph dropdowns). Markup comes from /assets/loomi-nav.js. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/app/assets/fonts/dm-sans-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/app/assets/9573a26f.woff2") format("woff2"); }

.lnav, .lnav * { box-sizing: border-box; }
.lnav {
  --lnav-ink: #1E1D1B; --lnav-white: #FFFFFF; --lnav-border: #E7E2D6; --lnav-ctl: #DFDACD; --lnav-hover: #F4F2ED;
  --lnav-muted: #807B6F; --lnav-blue: #4E86A8;
  position: relative; z-index: 10000; display: block;
  width: 100vw; max-width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 14px 28px 8px;
  background: transparent; color: var(--lnav-ink); font-family: "Jost", sans-serif; line-height: 1; text-align: left;
}
.lnav a { color: var(--lnav-ink); text-decoration: none; }
.lnav [hidden] { display: none !important; }
.lnav__bar {
  width: 100%; max-width: 1800px; height: 40px; margin: 0 auto; padding: 0 8px 0 14px;
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--lnav-border); border-radius: 18px; background: var(--lnav-white);
  box-shadow: 0 2px 14px rgba(30, 29, 27, .08);
}
/* Wordmark: identical to the Desk app (.northtape-nav-mark, Chris 2026-10-06: Loomi 700, italic blue .Ai 700, 21px Source Serif 4) */
.lnav__logo {
  display: inline-block; flex-shrink: 0;
  font: 700 21px/1.25 "Source Serif 4", Georgia, serif; letter-spacing: -.02em; white-space: nowrap; color: #111111 !important;
}
.lnav__logo b { color: var(--lnav-blue); font-weight: 700; font-style: italic; }
.lnav__logo:focus-visible { outline: 2px solid var(--lnav-blue); outline-offset: 4px; border-radius: 2px; }
.lnav__desk {
  flex-shrink: 0; margin-left: 4px; padding: 6px 14px; border-radius: 18px; background: var(--lnav-ink); color: var(--lnav-white) !important;
  font: 600 11.5px/1 "Jost", sans-serif; letter-spacing: .02em; white-space: nowrap;
}
.lnav__desk:hover { background: #000; }
/* Familiar Desk badge beside the logo, with compact purchase and desk buttons. */
header[data-loomi-audience="marketing"] a.lnav__desk{background:#FFFFFF;color:#1E1D1B!important;font:600 11.5px/1 "Jost",sans-serif;padding:6px 14px;margin-left:4px;border-radius:18px;letter-spacing:.02em}
header[data-loomi-audience="marketing"] a.lnav__desk:hover{background:#F4F2ED}
header[data-loomi-audience="marketing"] a.lnav__lab,header[data-loomi-audience="marketing"] a.lnav__cta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font:600 10px/1 "Jost",sans-serif;letter-spacing:0;height:22px;min-height:22px;padding:0 7px;border-radius:11px;white-space:nowrap;width:auto;flex:0 0 auto}
.lnav__links { min-width: 0; margin: 0 auto; display: flex; align-items: center; gap: 2px; }
.lnav__tab {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 6px 8px; border: 0; border-radius: 18px;
  background: transparent; color: var(--lnav-ink); font: 500 11.5px/1 "Jost", sans-serif; white-space: nowrap; cursor: pointer;
}
.lnav__tab:hover, .lnav__tab:focus-visible, .lnav__dd[open] > .lnav__tab { background: var(--lnav-hover); outline: none; }
.lnav__tab.is-current { background: var(--lnav-ink); color: var(--lnav-white) !important; }
.lnav__dd { position: relative; flex-shrink: 0; }
.lnav__dd > summary { list-style: none; }
.lnav__dd > summary::-webkit-details-marker { display: none; }
.lnav__caret { font-size: 9px; opacity: .7; }
.lnav__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 300; min-width: 210px; padding: 4px;
  display: flex; flex-direction: column; gap: 1px; border: 1px solid rgba(30, 29, 27, .12); border-radius: 10px; background: #FFFFFF;
  box-shadow: 0 10px 15px -3px rgba(30, 29, 27, .08), 0 4px 6px -4px rgba(30, 29, 27, .06); animation: lnavIn .14s cubic-bezier(.16, 1, .3, 1);
}
.lnav__dd:last-child .lnav__panel { left: auto; right: 0; }
@keyframes lnavIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lnav__head { padding: 6px 8px 5px; color: var(--lnav-muted); font: 600 11px/1.2 "Jost", sans-serif; }
.lnav__item {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 7px;
  color: var(--lnav-ink); font: 500 13px/1 "Jost", sans-serif; white-space: nowrap; transition: background .12s;
}
.lnav__item:hover, .lnav__item:focus-visible, .lnav__item.is-current { background: var(--lnav-hover); outline: none; }
.lnav__glyph {
  flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(30, 29, 27, .35);
  border-radius: 4px; color: var(--lnav-ink); font: 700 8.5px/1 "Jost", sans-serif; letter-spacing: .02em; opacity: .6;
}
.lnav__label { display: flex; align-items: center; gap: 6px; }
.lnav__live { width: 6px; height: 6px; border-radius: 50%; background: #5FA65F; box-shadow: 0 0 0 2px rgba(95, 166, 95, .18); }
.lnav__arrow { flex: none; margin-left: auto; padding-left: 10px; color: rgba(30, 29, 27, .35); font-size: 12px; opacity: 0; transition: opacity .12s; }
.lnav__item:hover .lnav__arrow, .lnav__item.is-current .lnav__arrow { opacity: 1; }
.lnav__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lnav__signin, .lnav__signout {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1px solid var(--lnav-ctl); border-radius: 18px;
  background: transparent; color: var(--lnav-ink); font: 600 11.5px/1 "Jost", sans-serif; white-space: nowrap; cursor: pointer;
}
.lnav__signin:hover, .lnav__signout:hover { background: var(--lnav-hover); }
.lnav__cta {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 13px; border-radius: 18px; background: var(--lnav-blue);
  color: #FFFFFF !important; font: 600 11.5px/1 "Jost", sans-serif; white-space: nowrap; box-shadow: 0 3px 10px rgba(78, 134, 168, .35);
}
.lnav__cta:hover { background: #3F6E8C; }
/* phone / tablet drawer */
.lnav__menu { display: none; position: relative; margin-left: auto; }
.lnav__menu > summary {
  width: 34px; height: 34px; display: grid; place-content: center; gap: 3px; border: 1px solid var(--lnav-ctl); border-radius: 10px;
  background: #FFFFFF; cursor: pointer; list-style: none;
}
.lnav__menu > summary::-webkit-details-marker { display: none; }
.lnav__menu > summary span { width: 16px; height: 2px; border-radius: 2px; background: var(--lnav-ink); }
.lnav__menu[open] > summary { background: var(--lnav-hover); }
.lnav__drawer {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(300px, calc(100vw - 32px)); max-height: 75vh; overflow-y: auto;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--lnav-border); border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 8px 30px rgba(30, 29, 27, .22);
}
.lnav__mdesk, .lnav__mlink, .lnav__mgroup > summary, .lnav__mcta {
  width: 100%; min-height: 44px; padding: 12px 10px; display: flex; align-items: center; border-radius: 10px;
  color: var(--lnav-ink); font: 500 16px/1.2 "Jost", sans-serif; text-align: left;
}
.lnav__mlink:hover, .lnav__mlink:focus-visible { background: var(--lnav-hover); outline: none; }
.lnav__mlink.is-current { background: var(--lnav-hover); font-weight: 700; }
.lnav__mdesk { background: var(--lnav-ink); color: #FFFFFF !important; font-weight: 600; }
.lnav__mcta { justify-content: center; margin-top: 4px; background: var(--lnav-blue); color: #FFFFFF !important; font-weight: 600; }
.lnav__mgroup > summary {
  justify-content: space-between; margin-top: 4px; color: #8E897D; cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.lnav__mgroup > summary::-webkit-details-marker { display: none; }
.lnav__mgroup[open] > summary { background: var(--lnav-hover); color: var(--lnav-ink); }
.lnav__mgroup > div { display: grid; gap: 2px; }
.lnav__mgroup > div .lnav__mlink { padding-left: 20px; }
.lnav__msep { margin: 6px 2px; border-top: 1px solid #EFECE4; }
.lnav__drawer .lnav__signout { width: 100%; min-height: 44px; justify-content: center; font-size: 15px; }
@media (max-width: 1240px) { /* keep in step with "collapseAt" in loomi-nav.js */
  .lnav__links, .lnav__signin, .lnav__right .lnav__signout { display: none !important; }
  .lnav__right { margin-left: auto; }
  .lnav__menu { display: block; margin-left: 8px; }
}
@media (max-width: 940px) { .lnav { padding: 10px 12px 6px; } }
@media (max-width: 480px) { .lnav__right { display: none; } .lnav__menu { margin-left: auto; } }
@media (max-width: 380px) { .lnav { padding-inline: 8px; } .lnav__bar { padding-left: 10px; } .lnav__logo { font-size: 19px; } }
@media print { .lnav { display: none !important; } }

/* 2026-10-09 (Chris: official logo = his supplied ink-blue "Loomi.Ai" image, as Codex shipped it on the Desk).
   Shows /assets/loomi-ai-ink-blue-italic4-clear.png in place of the text wordmark in the one menu; the text stays for screen readers via aria-label. */
.lnav__logo {
  width: 122px; min-width: 122px; height: 30px; display: inline-flex; align-items: center; overflow: hidden;
  color: transparent !important; font-size: 0 !important;
  background: transparent url("/assets/loomi-ai-ink-blue-italic4-clear.png") left center / 116px auto no-repeat;
}
.lnav__logo b { color: transparent !important; }

/* 2026-10-12 (Chris: "menu bar color and the logo needs to switch to white version and we need to shrink by 30 percent"):
   the one header on every page goes gunmetal grey (Chris picked #353839 from six swatches, 2026-10-14), the logo becomes
   the white/blue image, and the logo box shrinks 30% (116px image -> 81px; 122x30 box -> 85x21). Dropdown panels and
   the phone drawer stay white; only the bar changes. Additive block (A26): every rule above is untouched. */
.lnav { --lnav-bar: #353839; --lnav-on-bar: #FFFFFF; --lnav-on-bar-dim: rgba(255, 255, 255, .78); --lnav-on-bar-hover: rgba(255, 255, 255, .12); --lnav-on-bar-line: rgba(255, 255, 255, .22); }
.lnav__bar { background: var(--lnav-bar); border-color: var(--lnav-on-bar-line); box-shadow: 0 2px 14px rgba(30, 29, 27, .28); }
.lnav__logo {
  width: 85px; min-width: 85px; height: 21px;
  background-image: url("/assets/loomi-ai-white-blue-italic4-clear.png"); background-size: 81px auto;
}
.lnav__desk { background: var(--lnav-on-bar); color: var(--lnav-ink) !important; }
.lnav__desk:hover { background: #F4F2ED; }
/* ".lnav a" (class+element) outranks ".lnav__tab" (class), so the tab rules are written at the same depth as the base link rule */
.lnav a.lnav__tab, .lnav summary.lnav__tab { color: var(--lnav-on-bar-dim); }
.lnav a.lnav__tab:hover, .lnav a.lnav__tab:focus-visible, .lnav summary.lnav__tab:hover, .lnav summary.lnav__tab:focus-visible, .lnav .lnav__dd[open] > summary.lnav__tab { background: var(--lnav-on-bar-hover); color: var(--lnav-on-bar); }
.lnav a.lnav__tab.is-current { background: var(--lnav-on-bar); color: var(--lnav-ink) !important; }
.lnav__right .lnav__signin, .lnav__right .lnav__signout { color: var(--lnav-on-bar); border-color: var(--lnav-on-bar-line); }
.lnav__right .lnav__signin:hover, .lnav__right .lnav__signout:hover { background: var(--lnav-on-bar-hover); }
.lnav__menu > summary { background: transparent; border-color: var(--lnav-on-bar-line); }
.lnav__menu > summary span { background: var(--lnav-on-bar); }
.lnav__menu[open] > summary { background: var(--lnav-on-bar-hover); }
@media (max-width: 380px) { .lnav__logo { font-size: 0 !important; } }

/* Supplied cream/blue/gold logo: show the mark within the transparent header canvas. */
.lnav__logo { width: 85px; min-width: 85px; height: 23px; background-image: url("/assets/loomi-wordmark-gold-dot-header.png"); background-size: 133px auto; background-position: center 43%; background-repeat: no-repeat; }

/* Compact menu control and primary shop destination. */
.lnav__menu > summary{width:30px;height:30px;border-radius:9px;gap:2.5px}.lnav__menu > summary span{width:14px;height:1.8px}.lnav a.lnav__lab{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 11px;margin-left:5px;border-radius:16px;background:#4E86A8;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}.lnav a.lnav__lab:hover{background:#3F708D}

/* Compact menu control and primary shop destination. */
.lnav__menu > summary{width:30px;height:30px;border-radius:9px;gap:2.5px}.lnav__menu > summary span{width:14px;height:1.8px}.lnav a.lnav__lab{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 11px;margin-left:5px;border-radius:16px;background:#4E86A8;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}.lnav a.lnav__lab:hover{background:#3F708D}

/* White Desk badge with black text on the gunmetal menu. */
.lnav a.lnav__desk{background:#FFFFFF;color:#1E1D1B!important}.lnav a.lnav__desk:hover{background:#F4F2ED}

/* Small white Desk pill beside the logo. */
header.lnav a.lnav__desk{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:20px;min-height:20px;padding:0 8px;font:600 10px/1 Jost,sans-serif;border-radius:10px;margin-left:3px}