/* ── TeliportMe nav (tn-) ── phone first; dropdown panels from 992px ───────── */
.tn { position: sticky; top: 0; z-index: 60; background: var(--ink); color: var(--text-on-ink); font-family: var(--font); }
.tn-in { display: flex; align-items: center; height: 64px; gap: 12px; }
.tn-logo { display: inline-flex; flex: 0 0 auto; margin-right: auto; }
.tn-logo img { display: block; width: 132px; height: auto; }
:where(.tn) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.tn) a { color: inherit; text-decoration: none; }
:where(.tn) ul { list-style: none; margin: 0; padding: 0; }
:where(.tn) p { margin: 0; }
.tn p::before, .tn p::after { content: none; display: none; }

/* Actions in the bar */
.tn-actions { display: flex; align-items: center; gap: 4px; }
.tn-signin { display: none; }
.tn-cta { display: inline-flex; align-items: center; padding: 9px 12px; border-radius: var(--r-button); background: var(--paper); color: var(--ink) !important; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background var(--dur) var(--ease); }
.tn-cta:hover { background: var(--white); }
.tn-burger { position: relative; width: 44px; height: 44px; margin-right: -10px; }
.tn-burger span { position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px; background: var(--paper); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.tn-burger span:nth-child(1) { top: 15px; }
.tn-burger span:nth-child(2) { top: 21px; }
.tn-burger span:nth-child(3) { top: 27px; }
.tn.is-sheet .tn-cta { visibility: hidden; }
.tn.is-sheet .tn-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tn.is-sheet .tn-burger span:nth-child(2) { opacity: 0; }
.tn.is-sheet .tn-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Phone sheet */
.tn-main { display: none; position: fixed; left: 0; right: 0; top: 64px; bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--ink); padding: 4px 24px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair-on-ink); }
.tn.is-sheet .tn-main { display: flex; flex-direction: column; }
/* the blog's Ghost theme spaces and indents every list item (li+li margin, li padding); the nav is a list, so reset it here */
.tn li { margin: 0; padding: 0; line-height: inherit; }
.tn-li { border-bottom: 1px solid var(--hair-on-ink); }
.tn-trig { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; font-size: 18px; font-weight: 600; text-align: left; }
.tn-chev { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: transform var(--dur) var(--ease); }
.tn-li.is-open .tn-chev { transform: rotate(180deg); }
.tn-panel { display: none; padding: 2px 0 20px; }
.tn-li.is-open > .tn-panel { display: grid; gap: 20px; }

.tn-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px !important; font-size: 12px; font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-on-ink-3); }
.tn-t { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.tn-d { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text-on-ink-2); }
.tn-links a, .tn-linkbtn { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 0; font-size: 16px; font-weight: 500; text-align: left; }
.tn-links.is--desc a { min-height: 56px; }

.tn-feats { display: grid; gap: 4px; }
.tn-feat { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 0; }
.tn-thumb { flex: 0 0 auto; width: 56px; height: 40px; overflow: hidden; border-radius: var(--r-button); background: var(--navy); }
.tn-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tn-thumb.is--art img { object-fit: contain; background: var(--paper); }
.tn-thumb.is--top img { object-position: center 20%; }
.tn-apps { display: flex; gap: 16px; margin-top: 4px; }
.tn-apps a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--hl-on-ink) !important; }
.tn-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--hl-on-ink) !important; }
.tn-foot { display: flex; flex-wrap: wrap; gap: 0 24px; padding-top: 8px; border-top: 1px solid var(--hair-on-ink); }
.tn-foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--text-on-ink-2) !important; }
.tn-tour { display: none; }

.tn-sheet-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 28px; }
.tn-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r-button); font-size: 16px; font-weight: 600; }
.tn-btn.is--primary { background: var(--paper); color: var(--ink) !important; }
.tn-btn.is--ghost { border: 1px solid var(--hair-on-ink); color: var(--paper) !important; }
/* lock the page, not body: an overflow on body turns it into the sticky header's scroller, and the bar (with the close button) snaps back to the page top */
html.tn-lock { overflow: hidden; }
/* the Freshworks chat launcher sits above everything; keep it off the open sheet */
html.tn-lock #fc_frame { visibility: hidden !important; }

/* ── Desktop: inline bar + paper dropdown cards ─────────────────────────── */
@media screen and (min-width: 992px) {
  .tn-in { height: 80px; gap: 0; position: relative; }
  .tn-logo { margin-right: 40px; }
  .tn-logo img { width: 160px; }
  .tn-burger, .tn-sheet-foot { display: none; }
  .tn-main { display: block; position: static; padding: 0; overflow: visible; background: none; border: 0; margin-right: auto; }
  .tn-list { display: flex; align-items: center; gap: 4px; }
  .tn-li { border: 0; }
  .tn-trig { position: relative; width: auto; min-height: 44px; gap: 6px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--text-on-ink-2); transition: color var(--dur) var(--ease); }
  .tn-trig:hover, .tn-li.is-open > .tn-trig { color: var(--paper); }
  .tn-li.is-open > .tn-trig::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--hl-on-ink); }
  .tn-trig:focus-visible, .tn-cta:focus-visible, .tn-signin:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: var(--r-button); }

  .tn-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--text-on-ink-2) !important; transition: color var(--dur) var(--ease); }
  .tn-signin:hover { color: var(--paper) !important; }
  .tn-cta { padding: 10px 16px; font-size: 15px; }

  .tn-panel { display: grid !important; position: absolute; top: calc(100% - 6px); left: 0; padding: 24px; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--hair-on-paper), 0 24px 48px -12px rgba(10, 10, 30, 0.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
  .tn-li.is-open > .tn-panel { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s; }
  .tn-panel--product { width: 760px; grid-template-columns: 1.55fr 1fr; gap: 20px 32px; }
  .tn-panel--solutions { width: 820px; grid-template-columns: 1fr 1.15fr 220px; gap: 32px; }
  .tn-panel--resources { width: 440px; grid-template-columns: 1fr 1fr; gap: 32px; }

  .tn-panel .tn-eyebrow { color: var(--text-on-paper-3); margin-bottom: 10px !important; }
  .tn-panel .tn-d { color: var(--text-on-paper-2); }
  .tn-panel .tn-t { font-size: 15px; }
  .tn-links a, .tn-linkbtn { min-height: 0; margin: 0 -10px; padding: 7px 10px; border-radius: var(--r-card); font-size: 15px; transition: background var(--dur) var(--ease); }
  .tn-links.is--desc a { min-height: 0; padding: 9px 10px; }
  .tn-links a:hover, .tn-linkbtn:hover, .tn-feat:hover { background: rgba(var(--ink-rgb), 0.05); }
  .tn-links a:hover .tn-t, .tn-feat:hover .tn-t { color: var(--hl-on-paper); }
  .tn-links a:focus-visible, .tn-linkbtn:focus-visible, .tn-feat:focus-visible, .tn-panel a:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }

  .tn-feats { grid-template-columns: 1fr; gap: 2px; }
  .tn-feat { min-height: 0; margin: 0 -10px; padding: 8px 10px; border-radius: var(--r-card); transition: background var(--dur) var(--ease); }
  .tn-thumb { width: 88px; height: 56px; background: var(--ink); }
  .tn-apps a { min-height: 0; color: var(--hl-on-paper) !important; }
  .tn-more { min-height: 0; margin-top: 10px; font-size: 14px; color: var(--hl-on-paper) !important; }
  .tn-more:hover, .tn-apps a:hover { text-decoration: underline !important; }
  .tn-foot { grid-column: 1 / -1; margin: 0 -24px -24px; padding: 12px 24px; gap: 28px; border-top: 1px solid var(--hair-on-paper); border-radius: 0 0 10px 10px; background: rgba(var(--ink-rgb), 0.03); }
  .tn-foot a { min-height: 0; font-size: 13px; color: var(--text-on-paper-2) !important; }
  .tn-foot a:hover { color: var(--ink) !important; }

  .tn-tour { display: flex; flex-direction: column; align-self: start; padding: 0; border-radius: var(--r-card); }
  .tn-tour-img { display: block; height: 136px; margin-bottom: 12px; overflow: hidden; border-radius: var(--r-card); background: var(--navy); }
  .tn-tour-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
  .tn-tour:hover .tn-tour-img img { transform: scale(1.04); }
  .tn-tour .tn-d { margin-top: 6px; font-weight: 600; color: var(--hl-on-paper); }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .tn-logo { margin-right: 20px; }
  .tn-logo img { width: 140px; }
  .tn-trig { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tn *, .tn *::after { transition: none !important; }
}

/* Hide while scrolling down, return on scroll up (replaces the old nav-hidden script) */
.tn { transition: transform 260ms var(--ease); }
.tn.is-hidden { transform: translateY(-100%); }