/* ==========================================================================
   Turbo Link Studio — the shared top toolbar
   --------------------------------------------------------------------------
   ONE toolbar across every marketing page. Structure, layout, type, link
   order, logo, CTA shape and behaviour are IDENTICAL everywhere; only the
   colour skin changes so the bar sits inside each vertical's design world.

   This file is deliberately self-contained:
     - every rule is scoped under .nav / .meganav / .mn-* — no bare-element
       selectors, no resets, nothing that can leak into a page's own world;
     - every colour reads from a --tlnav-* property declared right here, so
       the file does NOT depend on the host page's tokens. The vertical pages
       each define their own --ink / --muted / --hairline / --text with
       different meanings, and the bar must not inherit any of them.

   Themes — put ONE of these on the <nav> alongside .nav:
     .tl-bar--paper      warm paper          index, pricing, get-a-demo,
                                             social-studio, for-tattoo
     .tl-bar--dark       steel black         the 7 photography pages
     .tl-bar--cream      plaster + brass     for-salons
     .tl-bar--tile       tile + oxblood      for-barbers
     .tl-bar--blueprint  blueprint + hi-vis  the contractor pages

   The bar uses the host page's own .wrap for its gutter, so the wordmark
   lines up with the content below it on every page (System A wraps to
   1140px, the vertical pages to min(1180px, 91vw)).
   ========================================================================== */

/* ---------- Theme: paper (default) ---------- */
.nav,
.nav.tl-bar--paper{
  --tlnav-bg: rgba(244,243,239,0.82);
  --tlnav-bg-scrolled: rgba(244,243,239,0.92);
  /* The dropdown is opaque on purpose. The BAR is translucent because content
     scrolling under it reads as depth; a MENU letting the page ghost through
     just reads as a rendering fault — badly so on the dark theme, where the
     hero headline is near-white. */
  --tlnav-menu-bg: #F4F3EF;
  --tlnav-ink: #16191F;
  --tlnav-link: #646B79;
  --tlnav-link-hover: #16191F;
  --tlnav-hairline: rgba(22,25,31,0.10);
  --tlnav-hairline-strong: rgba(22,25,31,0.28);
  --tlnav-hover-fill: #ECEAE4;
  --tlnav-accent: #FF5B36;
  --tlnav-focus: #FF5B36;

  --tlnav-cta-bg: linear-gradient(100deg, #FFB020, #FF5B36, #E0409B);
  --tlnav-cta-ink: #0B0E15;
  --tlnav-cta-inset: 0 0 0 0 transparent;
  --tlnav-cta-shadow: 0 14px 34px -10px rgba(255,91,54,0.5);

  --tlnav-panel-bg: #FFFFFF;
  --tlnav-panel-rail: #F4F3EF;
  --tlnav-panel-rail-on: #FFFFFF;
  --tlnav-panel-ink: #16191F;
  --tlnav-panel-muted: #646B79;
  --tlnav-panel-shadow: 0 34px 70px -30px rgba(11,14,21,0.35);
}

/* ---------- Theme: dark (photography) ---------- */
.nav.tl-bar--dark{
  --tlnav-bg: rgba(11,12,15,0.86);
  --tlnav-bg-scrolled: rgba(11,12,15,0.95);
  --tlnav-menu-bg: #0B0C0F;
  --tlnav-ink: #F4F2EC;
  --tlnav-link: #B7BAC2;
  --tlnav-link-hover: #FFB066;
  --tlnav-hairline: rgba(255,255,255,0.09);
  --tlnav-hairline-strong: rgba(255,255,255,0.24);
  --tlnav-hover-fill: rgba(255,255,255,0.06);
  --tlnav-accent: #FF7A1E;
  --tlnav-focus: #FFB066;

  --tlnav-cta-bg: linear-gradient(180deg, #FFB066, #FF7A1E);
  --tlnav-cta-ink: #191308;
  --tlnav-cta-inset: inset 0 1px 0 rgba(255,255,255,0.35);
  --tlnav-cta-shadow: 0 10px 22px -12px rgba(255,122,30,0.7);

  --tlnav-panel-bg: #1B1D22;
  --tlnav-panel-rail: #121317;
  --tlnav-panel-rail-on: #232529;
  --tlnav-panel-ink: #F4F2EC;
  --tlnav-panel-muted: #B7BAC2;
  --tlnav-panel-shadow: 0 26px 50px -24px rgba(0,0,0,0.75);
}

/* ---------- Theme: cream (salon) ---------- */
.nav.tl-bar--cream{
  --tlnav-bg: rgba(249,242,233,0.88);
  --tlnav-bg-scrolled: rgba(249,242,233,0.96);
  --tlnav-menu-bg: #F9F2E9;
  --tlnav-ink: #3B2F28;
  --tlnav-link: #6B5A4E;
  --tlnav-link-hover: #8A5F31;
  --tlnav-hairline: rgba(59,47,40,0.12);
  --tlnav-hairline-strong: rgba(59,47,40,0.32);
  --tlnav-hover-fill: rgba(185,138,78,0.10);
  --tlnav-accent: #B98A4E;
  --tlnav-focus: #8A5F31;

  --tlnav-cta-bg: linear-gradient(180deg, #D9B06C, #B98A4E);
  --tlnav-cta-ink: #2C2118;
  --tlnav-cta-inset: inset 0 1px 0 rgba(255,255,255,0.5);
  --tlnav-cta-shadow: 0 12px 26px -14px rgba(138,95,49,0.7);

  --tlnav-panel-bg: #FFFAF3;
  --tlnav-panel-rail: #F9F2E9;
  --tlnav-panel-rail-on: #FFFAF3;
  --tlnav-panel-ink: #3B2F28;
  --tlnav-panel-muted: #6B5A4E;
  --tlnav-panel-shadow: 0 30px 60px -28px rgba(59,47,40,0.42);
}

/* ---------- Theme: tile (barber) ---------- */
.nav.tl-bar--tile{
  --tlnav-bg: rgba(251,252,252,0.88);
  --tlnav-bg-scrolled: rgba(251,252,252,0.97);
  --tlnav-menu-bg: #FBFCFC;
  --tlnav-ink: #16202B;
  --tlnav-link: #55636F;
  --tlnav-link-hover: #7A2B2F;
  --tlnav-hairline: rgba(22,32,43,0.12);
  --tlnav-hairline-strong: rgba(22,32,43,0.34);
  --tlnav-hover-fill: rgba(122,43,47,0.08);
  --tlnav-accent: #7A2B2F;
  --tlnav-focus: #7A2B2F;

  --tlnav-cta-bg: linear-gradient(180deg, #8E353A, #6B2327);
  --tlnav-cta-ink: #FBFCFC;
  --tlnav-cta-inset: inset 0 1px 0 rgba(255,255,255,0.18);
  --tlnav-cta-shadow: 0 12px 26px -14px rgba(107,35,39,0.75);

  --tlnav-panel-bg: #FFFFFF;
  --tlnav-panel-rail: #F2F4F5;
  --tlnav-panel-rail-on: #FFFFFF;
  --tlnav-panel-ink: #16202B;
  --tlnav-panel-muted: #55636F;
  --tlnav-panel-shadow: 0 30px 60px -28px rgba(22,32,43,0.40);
}

/* ---------- Theme: blueprint (contractors) ----------
   Blueprint navy ground, drafting cyan for structure, hi-vis amber as the one
   accent. Deliberately the coolest, most technical skin in the set: photography
   is steel + orange, this is navy + amber, and the two must not be mistaken for
   each other at a glance. Amber, never orange, is the contractor accent. */
.nav.tl-bar--blueprint{
  --tlnav-bg: rgba(12,27,42,0.86);
  --tlnav-bg-scrolled: rgba(12,27,42,0.96);
  --tlnav-menu-bg: #0C1B2A;
  --tlnav-ink: #EAF2F8;
  --tlnav-link: #A9C0D4;
  --tlnav-link-hover: #FFC64B;
  --tlnav-hairline: rgba(234,242,248,0.11);
  --tlnav-hairline-strong: rgba(234,242,248,0.26);
  --tlnav-hover-fill: rgba(111,179,224,0.10);
  --tlnav-accent: #FFC64B;
  --tlnav-focus: #6FB3E0;

  --tlnav-cta-bg: linear-gradient(180deg, #FFD470, #E0A21F);
  --tlnav-cta-ink: #12293F;
  --tlnav-cta-inset: inset 0 1px 0 rgba(255,255,255,0.42);
  --tlnav-cta-shadow: 0 12px 26px -14px rgba(224,162,31,0.75);

  --tlnav-panel-bg: #12293F;
  --tlnav-panel-rail: #0C1B2A;
  --tlnav-panel-rail-on: #16334D;
  --tlnav-panel-ink: #EAF2F8;
  --tlnav-panel-muted: #A9C0D4;
  --tlnav-panel-shadow: 0 30px 60px -28px rgba(0,0,0,0.72);
}

/* ---------- Theme: stack (the brand family, v2) ----------
   Near-black indigo with one live accent pair. The bar is a piece of the
   same instrument canvas the homepage rig sits on, so the CTA is cyan and
   nothing on it glows. */
.nav.tl-bar--stack{
  --tlnav-bg: rgba(9,11,17,0.82);
  --tlnav-bg-scrolled: rgba(9,11,17,0.96);
  --tlnav-menu-bg: #090B11;
  --tlnav-ink: #EFF4FB;
  --tlnav-link: #98A5BE;
  --tlnav-link-hover: #9BF0FF;
  --tlnav-hairline: rgba(176,198,255,0.12);
  --tlnav-hairline-strong: rgba(176,198,255,0.26);
  --tlnav-hover-fill: rgba(79,216,240,0.08);
  --tlnav-accent: #4FD8F0;
  --tlnav-focus: #4FD8F0;

  --tlnav-cta-bg: linear-gradient(180deg, #7BE7F8, #3FCBE6);
  --tlnav-cta-ink: #04131A;
  --tlnav-cta-inset: inset 0 1px 0 rgba(255,255,255,0.45);
  --tlnav-cta-shadow: 0 12px 26px -14px rgba(79,216,240,0.75);

  --tlnav-panel-bg: #141926;
  --tlnav-panel-rail: #0C0F18;
  --tlnav-panel-rail-on: #1A2133;
  --tlnav-panel-ink: #EFF4FB;
  --tlnav-panel-muted: #98A5BE;
  --tlnav-panel-shadow: 0 30px 60px -28px rgba(0,0,0,0.9);
}

/* ---------- Theme: parchment (the tattoo family) ----------
   The Flash Wall's paper: parchment ground, heavy ink, one traditional red.
   Replaces the legacy --paper skin on the seven tattoo pages so the bar's
   CTA is the family's red instead of the retired coral gradient. */
.nav.tl-bar--parchment{
  --tlnav-bg: rgba(244,239,230,0.88);
  --tlnav-bg-scrolled: rgba(244,239,230,0.97);
  --tlnav-menu-bg: #F4EFE6;
  --tlnav-ink: #14110F;
  --tlnav-link: #55524B;
  --tlnav-link-hover: #B32127;
  --tlnav-hairline: rgba(20,17,15,0.12);
  --tlnav-hairline-strong: rgba(20,17,15,0.32);
  --tlnav-hover-fill: rgba(179,33,39,0.07);
  --tlnav-accent: #B32127;
  --tlnav-focus: #B32127;

  --tlnav-cta-bg: linear-gradient(180deg, #C42B31, #A21B21);
  --tlnav-cta-ink: #FBF8F2;
  --tlnav-cta-inset: inset 0 1px 0 rgba(255,255,255,0.18);
  --tlnav-cta-shadow: 0 12px 26px -14px rgba(162,27,33,0.75);

  --tlnav-panel-bg: #FBF8F2;
  --tlnav-panel-rail: #F4EFE6;
  --tlnav-panel-rail-on: #FBF8F2;
  --tlnav-panel-ink: #14110F;
  --tlnav-panel-muted: #55524B;
  --tlnav-panel-shadow: 0 30px 60px -28px rgba(20,17,15,0.4);
}

/* ---------- Theme: ledger (the homepage) ----------
   Bottle-green buckram cloth with stamped gold foil. The homepage's Master
   Book world: the fifth material family in the estate (cloth + foil), so the
   bar must never read as the photography steel or the salon brass. Foil is
   stamped, not lit: no glows, the CTA is a gilt bar that catches light. */
.nav.tl-bar--ledger{
  --tlnav-bg: rgba(10,37,28,0.88);
  --tlnav-bg-scrolled: rgba(10,37,28,0.97);
  --tlnav-menu-bg: #0A251C;
  --tlnav-ink: #F2EDDC;
  --tlnav-link: #B9C7B7;
  --tlnav-link-hover: #E6C878;
  --tlnav-hairline: rgba(230,200,120,0.16);
  --tlnav-hairline-strong: rgba(230,200,120,0.34);
  --tlnav-hover-fill: rgba(230,200,120,0.08);
  --tlnav-accent: #C9A445;
  --tlnav-focus: #E6C878;

  --tlnav-cta-bg: linear-gradient(175deg, #E6C878, #C9A445 55%, #B08D30);
  --tlnav-cta-ink: #241D07;
  --tlnav-cta-inset: inset 0 1px 0 rgba(255,255,255,0.45);
  --tlnav-cta-shadow: 0 12px 26px -14px rgba(154,120,38,0.8);

  --tlnav-panel-bg: #10382B;
  --tlnav-panel-rail: #0A251C;
  --tlnav-panel-rail-on: #154434;
  --tlnav-panel-ink: #F2EDDC;
  --tlnav-panel-muted: #B9C7B7;
  --tlnav-panel-shadow: 0 30px 60px -28px rgba(3,15,11,0.8);
}

/* ==========================================================================
   BAR
   ========================================================================== */
.nav{
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 15px 0;
  background: var(--tlnav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms var(--tlnav-ease), background 260ms var(--tlnav-ease);

  /* owned locally so the bar animates identically on pages whose --ease differs */
  --tlnav-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.nav.is-scrolled{
  border-bottom-color: var(--tlnav-hairline);
  background: var(--tlnav-bg-scrolled);
}
.nav-inner{ display: flex; align-items: center; justify-content: space-between; gap: 18px; }

/* ---------- Wordmark ---------- */
.nav .wordmark{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--tlnav-ink);
  text-decoration: none;
  white-space: nowrap; /* never wrap to "Turbo / Link / Studio" on phones */
}
.nav .wm-mark{ width: 26px; height: 26px; flex: none; display: inline-block; line-height: 0; }
.nav .wm-mark svg{ display: block; width: 100%; height: 100%; overflow: visible; }
/* The unlit link is stroked in the bar's own ink, so the mark is visible in
   every theme. The old <img> + invert() approach rendered a white mark on the
   cream salon bar, i.e. nothing at all. */
.nav .wm-mark .ink{ fill: none; stroke: var(--tlnav-ink); }
.nav .wm-mark .loop{ stroke-dasharray: 100; stroke-dashoffset: 0; }
.nav .wm-mark .wk{ opacity: 1; }

/* draw-on plays once per session (tls-topbar.js adds .logo-intro to <html>) */
.logo-intro .nav .wm-mark .loop{ animation: tlnavDraw .8s var(--tlnav-ease) both; }
.logo-intro .nav .wm-mark .loop.two{ animation-delay: .28s; }
.logo-intro .nav .wm-mark .wk{ animation: tlnavFade .3s var(--tlnav-ease) .95s both; }
@keyframes tlnavDraw{ from{ stroke-dashoffset: 100; } to{ stroke-dashoffset: 0; } }
@keyframes tlnavFade{ from{ opacity: 0; } to{ opacity: 1; } }

/* ---------- Links ---------- */
/* Tracking and type size are set for EIGHT links (five verticals + Social
   Studio + Done For You + Work) inside a 1140px page column. They were 30px /
   14px when the bar carried six; at eight that ran the CTA off the right edge
   of the viewport, so the row gives up tracking first, then half a pixel of
   type, rather than moving the wordmark off the page grid. */
.nav-links{ display: flex; align-items: center; gap: 24px; }
.nav-links-inline{ display: flex; gap: 16px; }
.nav .nav-links a:not(.tlnav-cta){
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: var(--tlnav-link);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap; /* labels must never break to "For / Contractors" */
  transition: color 200ms var(--tlnav-ease);
}
.nav .nav-links a:not(.tlnav-cta):hover{ color: var(--tlnav-link-hover); }
.nav .nav-links a.is-current{ color: var(--tlnav-ink); }

/* Below the full page column and above the hamburger, the row tightens again. */
@media (max-width: 1279px) and (min-width: 1160px){
  .nav-links-inline{ gap: 10px; }
  .nav-links{ gap: 14px; }
  .nav-inner{ gap: 12px; }
  .nav .nav-links a:not(.tlnav-cta){ font-size: 13px; }
  .nav .tlnav-cta{ padding: 9px 15px; font-size: 13px; }
}

/* ---------- CTA ----------
   Topbar-owned, NOT .btn — the vertical pages each define their own .btn with
   a different radius, size and casing, which is exactly the drift we're removing. */
.nav .tlnav-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: var(--tlnav-cta-bg);
  color: var(--tlnav-cta-ink);
  box-shadow: var(--tlnav-cta-inset);
  transition: transform 220ms var(--tlnav-ease), box-shadow 220ms var(--tlnav-ease);
}
.nav .tlnav-cta:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--tlnav-cta-inset), var(--tlnav-cta-shadow);
}
.nav .tlnav-cta:active{ transform: translateY(0) scale(1); }

/* ---------- Focus ---------- */
.nav a:focus-visible,
.nav button:focus-visible{
  outline: 2px solid var(--tlnav-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Hamburger ---------- */
.nav-toggle{ display: none; }
.nav-toggle-bars{ position: relative; display: block; width: 18px; height: 12px; }
.nav-toggle-bars span{
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--tlnav-ink);
  transition: transform 300ms var(--tlnav-ease), opacity 200ms var(--tlnav-ease);
}
.nav-toggle-bars span:nth-child(1){ top: 0; }
.nav-toggle-bars span:nth-child(2){ top: 5px; }
.nav-toggle-bars span:nth-child(3){ top: 10px; }
.nav.is-open .nav-toggle-bars span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav-toggle-bars span:nth-child(2){ opacity: 0; }
.nav.is-open .nav-toggle-bars span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* 1159px, not 820px: with five verticals, Social Studio, Done For You and Work
   listed, the inline bar needs roughly 1040px of content plus gutters, so it
   collapses to the menu earlier. Raised from 1060px when Done For You was added
   (2026-08-09); below this the eight-link row ran the CTA off the viewport. */
@media (max-width: 1159px){
  .nav-toggle{
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--tlnav-hairline);
    transition: border-color 200ms var(--tlnav-ease), background 200ms var(--tlnav-ease);
  }
  .nav-toggle:hover{ border-color: var(--tlnav-hairline-strong); background: var(--tlnav-hover-fill); }
  .nav-links{ gap: 12px; }
  .nav-links-inline{
    flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--tlnav-menu-bg);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tlnav-hairline);
    padding: 6px clamp(20px, 5vw, 40px) 14px;
    box-shadow: 0 24px 40px -28px rgba(11,14,21,0.45);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 250ms var(--tlnav-ease), transform 250ms var(--tlnav-ease), visibility 250ms var(--tlnav-ease);
  }
  .nav.is-open .nav-links-inline{ opacity: 1; visibility: visible; transform: translateY(0); }
  .nav .nav-links-inline a:not(.tlnav-cta){
    padding: 13px 4px; font-size: 16px; color: var(--tlnav-ink);
    border-bottom: 1px solid var(--tlnav-hairline);
  }
  .nav .nav-links-inline a:not(.tlnav-cta):last-child{ border-bottom: 0; }
}

/* Small phones: keep the one-line wordmark AND the CTA inside the gutter.
   Must follow the 1159px block, which otherwise re-widens .nav-links. */
@media (max-width: 520px){
  .nav-inner{ gap: 10px; }
  .nav .wordmark{ font-size: 15px; gap: 7px; }
  .nav .wm-mark{ width: 21px; height: 21px; }
  .nav-links{ gap: 8px; }
  .nav .tlnav-cta{ padding: 9px 13px; font-size: 13px; }
}

/* ==========================================================================
   MEGA-MENU
   Markup is injected by tls-nav.js; the menu CONTENT lives there, once.
   Desktop: hover/click opens a 3-zone panel. Mobile: the same data becomes
   an accordion inside the hamburger menu and this panel never shows.
   ========================================================================== */
.mn-trigger{ display: inline-flex; align-items: center; gap: 6px; }
.mn-trigger::after{
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 240ms var(--tlnav-ease);
}
.mn-trigger.is-open::after{ transform: rotate(225deg) translate(-2px,-2px); }
/* Below the hamburger breakpoint the accordion toggle is the disclosure
   affordance, so the trigger's own chevron would be a second one on the row. */
@media (max-width: 1159px){ .mn-trigger::after{ display: none; } }

.meganav{
  position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
  padding: 10px clamp(20px, 5vw, 40px) 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 240ms var(--tlnav-ease), transform 240ms var(--tlnav-ease), visibility 240ms var(--tlnav-ease);
  pointer-events: none;
}
.meganav.is-open{ opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mn-card{
  max-width: 1140px; margin: 0 auto;
  background: var(--tlnav-panel-bg);
  border: 1px solid var(--tlnav-hairline);
  border-radius: 18px;
  box-shadow: var(--tlnav-panel-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1.1fr 0.9fr;
}
.mn-rail{
  background: var(--tlnav-panel-rail);
  border-right: 1px solid var(--tlnav-hairline);
  padding: 18px 0; display: flex; flex-direction: column;
}
.mn-item{
  display: flex; align-items: center; gap: 9px;
  padding: 13px 22px; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 14.5px; letter-spacing: 0; text-transform: none;
  color: var(--tlnav-panel-ink);
  border-top: 1px solid var(--tlnav-hairline);
}
.mn-item:first-child{ border-top: 0; }
.mn-item .mi-arrow{
  width: 0; height: 0; border-style: solid; border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent var(--tlnav-accent);
  opacity: 0; flex: none; transition: opacity 160ms var(--tlnav-ease);
}
.mn-item.on{ background: var(--tlnav-panel-rail-on); }
.mn-item.on .mi-arrow{ opacity: 1; }

.mn-mid{ padding: 26px 28px; border-right: 1px solid var(--tlnav-hairline); }
.mn-mid h3{
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.02em; text-transform: none;
  font-size: 1.35rem; margin: 0 0 10px; color: var(--tlnav-panel-ink);
}
.mn-mid p{
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  margin: 0 0 20px; color: var(--tlnav-panel-muted); font-size: 0.95rem; max-width: 38ch;
}
.mn-mid .tlnav-cta{ font-size: 14px; padding: 11px 20px; }
.mn-mid .mn-demo{
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0 0 2px; font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 0.93rem; color: var(--tlnav-link-hover); text-decoration: none;
}
.mn-mid .mn-demo:hover{ text-decoration: underline; }

.mn-side{ padding: 26px 28px; }
.mn-side .ms-k{
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: 1.02rem; margin: 0 0 14px; color: var(--tlnav-panel-ink);
}
.mn-side a{
  display: block; padding: 9px 0; text-decoration: none;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: var(--tlnav-panel-muted); font-size: 0.95rem; font-weight: 500;
  transition: color 180ms var(--tlnav-ease);
}
.mn-side a:hover{ color: var(--tlnav-panel-ink); }

.mn-foot{
  grid-column: 1 / -1;
  border-top: 1px solid var(--tlnav-hairline);
  padding: 15px 28px;
}
.mn-foot a{
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 0.95rem; color: var(--tlnav-panel-ink);
}
.mn-foot a .arrow{ transition: transform 200ms var(--tlnav-ease); }
.mn-foot a:hover .arrow{ transform: translateX(4px); }

@media (max-width: 1159px){ .meganav{ display: none; } }

/* ---------- Mobile accordion inside the hamburger menu ---------- */
.mn-acc-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: auto;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.mn-acc-toggle::after{
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid var(--tlnav-link); border-bottom: 2px solid var(--tlnav-link);
  transform: rotate(45deg); transition: transform 240ms var(--tlnav-ease);
}
.mn-acc-toggle[aria-expanded="true"]::after{ transform: rotate(225deg); }
/* desktop: the wrapper must not disturb the inline flex row of nav links */
.mn-acc-row{ display: contents; }
@media (max-width: 1159px){
  .mn-acc-row{ display: flex; align-items: center; border-bottom: 1px solid var(--tlnav-hairline); }
  .mn-acc-row > a{ border-bottom: 0 !important; flex: 1; }
}
.mn-acc-panel{ display: none; padding: 2px 0 10px 14px; }
.mn-acc-panel.open{ display: block; }
.nav .mn-acc-panel a{
  display: block; padding: 9px 4px; font-size: 15px;
  color: var(--tlnav-link) !important; border-bottom: 0 !important;
}
.nav .mn-acc-panel a:hover,
.nav .mn-acc-panel a:active{ color: var(--tlnav-ink) !important; }
@media (min-width: 1160px){ .mn-acc-toggle, .mn-acc-panel{ display: none !important; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .nav .tlnav-cta:hover{ transform: none; }
  .nav-toggle-bars span{ transition: none; }
  .logo-intro .nav .wm-mark .loop,
  .logo-intro .nav .wm-mark .wk{ animation: none !important; }
}

/* ==========================================================================
   STACK WORLD TYPEFACES. Grep marker: tl-stack-chrome-typeface
   --------------------------------------------------------------------------
   ADDITIVE OVERRIDE. Do not fold this back into the base rules above.

   The base bar deliberately sets Bricolage Grotesque and Hanken Grotesk. That
   stays true for every other theme (--paper, --cream, --tile, --parchment,
   --blueprint, --dark, --ledger): each vertical has its own look on purpose,
   because these pages demo the templates the studio sells.

   The Stack world (index, pricing, get-a-demo, social-studio, done-for-you)
   runs a one-family system: Schibsted Grotesk for everything that reads as
   text, Geist Mono for labels. Those five pages were the only place the
   shared chrome broke that rule, dragging two extra sans families onto the
   page. Scoping to .tl-bar--stack fixes it there and nowhere else.

   Families come from the --f-sans / --f-mono tokens in tls-stack.css, which
   every .tl-bar--stack page loads. The literal stack is repeated inside var()
   as a fallback so this rule is still correct if the token ever goes missing.
   ========================================================================== */
.nav.tl-bar--stack .wordmark,
.nav.tl-bar--stack .nav-links a:not(.tlnav-cta),
.nav.tl-bar--stack .tlnav-cta,
.nav.tl-bar--stack .mn-item,
.nav.tl-bar--stack .mn-mid h3,
.nav.tl-bar--stack .mn-mid p,
.nav.tl-bar--stack .mn-mid .mn-demo,
.nav.tl-bar--stack .mn-side .ms-k,
.nav.tl-bar--stack .mn-side a,
.nav.tl-bar--stack .mn-foot a{
  font-family: var(--f-sans, "Schibsted Grotesk", system-ui, -apple-system, sans-serif);
}