/* =============================================================
   TK-NAV — V38 Stage K trust-kit. Slim LP header.
   Ported/adapted from homepage-37-opta.html .v7-nav. Uses lemon.css
   tokens only (--ink, --cream, --pink, --pink-dark, --mute, --rule).
   ============================================================= */
.tk-nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,0);
  transition: background .22s, box-shadow .22s, border-color .22s;
  border-bottom: 1px solid transparent;
}
.tk-nav.tk-nav--scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}
.tk-nav .tk-nav-row {
  max-width: 1200px; margin: 0 auto;
  padding: 16px 32px;
  display: flex; align-items: center; gap: 20px;
}
.tk-nav .tk-nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 20px; letter-spacing: -.015em; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  /* Loop5 fix agent — walkthrough-evidence/loop5-38d (MAJOR). A page's
     dark-hero override (e.g. homepage-38d.html's
     #tk-nav-host.tk-nav:not(.tk-nav--scrolled) rule) swaps this color the
     instant .tk-nav--scrolled toggles, while .tk-nav's own background
     fades over .22s (below) — with no transition here, the text color
     jumped to its new value well before the background finished fading
     to match it, producing a real (if narrow) low-contrast frame.
     Matching the timing keeps both properties in lockstep. */
  transition: color .22s;
}
.tk-nav .tk-nav-links {
  display: flex; gap: 24px; margin-left: 12px; flex: 1;
}
.tk-nav .tk-nav-links a {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 14px; color: var(--ink); text-decoration: none;
  transition: color .15s;
}
.tk-nav .tk-nav-links a:hover { color: var(--pink); }
.tk-nav .tk-nav-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--pink-dark);
  background: var(--blush-2);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}
.tk-nav .tk-nav-chip svg { width: 12px; height: 12px; fill: var(--lemon); }
.tk-nav .tk-nav-phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color .22s; /* loop5-38d MAJOR — see .tk-nav-brand above */
}
.tk-nav .tk-nav-phone svg { width: 15px; height: 15px; stroke: var(--pink); }
.tk-nav .tk-nav-phone:hover { color: var(--pink); }
.tk-nav .tk-nav-cta {
  background: var(--ink); color: var(--cream);
  padding: 10px 18px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform .12s, background .15s;
  white-space: nowrap;
}
.tk-nav .tk-nav-cta:hover { background: var(--pink-dark); transform: translateY(-1px); }
.tk-nav .tk-nav-hamb {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
  margin-left: auto;
}
.tk-nav .tk-nav-hamb span {
  display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0;
}
@media (max-width: 860px) {
  .tk-nav .tk-nav-links, .tk-nav .tk-nav-chip { display: none; }
  .tk-nav .tk-nav-phone span.tk-nav-phone-text { display: none; }
  .tk-nav .tk-nav-hamb { display: block; }
}
@media (max-width: 480px) {
  .tk-nav .tk-nav-row { padding: 12px 16px; gap: 10px; }
  .tk-nav .tk-nav-cta { padding: 9px 14px; font-size: 13px; }
}
/* Stage Q fix: the deck's longer verbatim CTA strings (e.g. "Show me my
   real monthly price") plus the new nav tagline (COPY-DECK-V3.md §1) no
   longer fit next to the brand block and hamburger below ~480px — the
   pill was clipping past the viewport edge (unreadable, unclickable tail)
   while overflow-x:clip hid the evidence of it. The hero repeats the same
   CTA one scroll down, so drop the nav copy of it rather than render it
   broken. */
@media (max-width: 480px) {
  .tk-nav .tk-nav-cta { display: none; }
}

/* Loop1 D1 (walkthrough-evidence/loop1-38c) — mobile menu panel the
   hamburger opens. Only relevant at the widths where the hamburger itself
   is shown (<=860px); hidden entirely above that regardless of the
   [hidden] attribute so a stray class toggle can never surface it on
   desktop. */
.tk-nav-mobile-panel {
  display: none;
}
@media (max-width: 860px) {
  .tk-nav-mobile-panel {
    display: flex;
  }
  .tk-nav-mobile-panel[hidden] { display: none; }
  .tk-nav-mobile-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4px 16px 16px;
    border-top: 1px solid var(--rule);
  }
  .tk-nav-mobile-links {
    display: flex;
    flex-direction: column;
  }
  .tk-nav-mobile-links a,
  .tk-nav-mobile-phone {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    padding: 12px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--rule);
  }
  /* The mobile CTA reuses .tk-nav-cta for its base button styling, but
     that class is unconditionally display:none at <=480px (Stage Q fix,
     above) so the nav row's own copy never clips. Explicitly re-show it
     here, scoped to the panel only, at a specificity that beats that
     rule regardless of source order. */
  .tk-nav-mobile-panel .tk-nav-cta.tk-nav-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    width: 100%;
    text-align: center;
    min-height: 44px;
  }
}