/* nav.css — THE marketing navigation. One source for every public page.
   Loaded by index.html and by each free-tool page. Do not fork it: if the bar
   needs to change, change it here and every page moves together. (The app's
   own in-product chrome is separate — it lives in console.css.)

   Markup contract (identical on every page; only the link lists differ):

     <nav class="mb-nav" id="mb-nav">
       <div class="mb-nav-inner">
         <a class="mb-nav-logo mbl-d" ...>   mark + wordmark
         <div class="mb-nav-links">          section links
         <div class="mb-nav-end">            sign-in + CTA + hamburger
     <div class="mb-mobile-menu" id="mb-mobile-menu">   same links, stacked

   Behaviour (scroll shadow, mobile toggle, once-per-session logo reveal) is in
   nav.js. The animated mark is a twin of console.css's .mb-* mark — canonical
   source packages/brand/logo-motion/; keep treatment, colours and timing in
   sync across all three. */

/* Always reserve the scrollbar track. A long page (the homepage) has a
   scrollbar and a short one (a tool page) does not, so without this the whole
   centred layout — header included — jumps sideways by the scrollbar's width
   as you navigate between them. */
html { scrollbar-gutter: stable; }

/* ---- skip link ----------------------------------------------------------- */
/* Offscreen until it takes keyboard focus, then a normal button in the top-left.
   Positioned rather than display:none or visibility:hidden — either of those
   removes it from the focus order, so it could never appear. Pairs with the
   #mb-main target at the end of nav.html. WCAG 2.4.1. */
.mb-skip {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 200;
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  background: #141821;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.mb-skip:focus, .mb-skip:focus-visible { top: 12px; outline: 2px solid #EC6B4C; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mb-skip { transition: none; } }

/* ---- bar ---------------------------------------------------------------- */
.mb-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(246,247,249,.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  /* Warm hairline, not a cool grey one — it sits over the hero's accent bloom on
     every marketing page, where a grey line reads as a seam. */
  border-bottom: 1px solid rgba(239,229,221,.9);
  transition: box-shadow .3s ease, background .3s ease;
}
.mb-nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 30px;
  height: 68px; display: flex; align-items: center; gap: 14px;
}
/* every public page clears the fixed bar by the same amount */
.mb-has-nav { padding-top: 68px; }

/* ---- logo lockup -------------------------------------------------------- */
.mb-nav-logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.mbl-word {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: 19px; letter-spacing: -.02em; color: #141821;
}
.mbl-mark { position: relative; flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.mbl-tile { width: 100%; height: 100%; border-radius: 9px; background: linear-gradient(180deg,#F17A5A,#DE5A38); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px rgba(236,107,76,.6); }
.mbl-tile svg { width: 18px; height: 18px; display: block; }
.mbl-ring { position: absolute; inset: 0; border-radius: 9px; border: 2px solid #EC6B4C; opacity: 0; pointer-events: none; }

/* variant d "reveal to rest" — nav.js strips .mbl-d after the first view */
.mbl-d .mbl-tile { transform-origin: center; animation: mbl-ti .5s cubic-bezier(.34,1.4,.5,1) both; }
.mbl-d .mbl-b { stroke-dasharray: 1; animation: mbl-draw .55s cubic-bezier(.5,0,.3,1) .1s both; }
.mbl-d .mbl-p { stroke-dasharray: 1; transform-box: fill-box; transform-origin: center; animation: mbl-draw .45s cubic-bezier(.4,0,.3,1) .55s both, mbl-th .62s cubic-bezier(.3,.9,.3,1) 1s both; }
.mbl-d .mbl-ring { animation: mbl-rg .8s ease-out 1s both; }
.mbl-d .mbl-word { animation: mbl-word .5s cubic-bezier(.2,.7,.2,1) .28s both; }
@keyframes mbl-ti { 0%{opacity:0;transform:scale(.7)} 40%{opacity:1} 70%{transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }
@keyframes mbl-draw { from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
@keyframes mbl-th { 0%{transform:scale(1)} 22%{transform:scale(1.16)} 44%{transform:scale(1)} 64%{transform:scale(1.09)} 100%{transform:scale(1)} }
@keyframes mbl-rg { 0%{opacity:0;transform:scale(.88)} 30%{opacity:.45} 100%{opacity:0;transform:scale(1.5)} }
@keyframes mbl-word { from{opacity:0;transform:translateX(-7px)} to{opacity:1;transform:none} }
/* Return view (nav.js sets .mbl-seen on <html> during head parse) and
   reduced-motion both render the finished mark, no replay. */
.mbl-seen .mbl-mark *, .mbl-seen .mbl-word { animation: none !important; }
.mbl-seen .mbl-b, .mbl-seen .mbl-p { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
.mbl-seen .mbl-ring { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .mbl-mark *, .mbl-word { animation: none !important; }
  .mbl-b, .mbl-p { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .mbl-ring { opacity: 0 !important; }
}

/* ---- link groups -------------------------------------------------------- */
.mb-nav-links { display: flex; align-items: center; gap: 30px; margin-left: 38px; }
.mb-nav-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.mb-navlink { color: #3A3330; font-size: 14.5px; font-weight: 500; text-decoration: none; transition: color .2s ease; }
.mb-navlink:hover { color: #EC6B4C; }
.mb-nav-signin { color: #3A3330; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.mb-nav-signin:hover { color: #EC6B4C; }

.mb-nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg,#F17A5A,#DE5A38); color: #fff;
  border-radius: 10px; padding: 10px 17px; font-size: 14px; font-weight: 600;
  text-decoration: none; box-shadow: 0 10px 22px -10px rgba(236,107,76,.7);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
  /* Without this the label breaks to "Get / started / free" on a narrow phone
     and the whole bar grows to three lines to contain it. */
  white-space: nowrap;
}
.mb-nav-cta:hover { filter: brightness(1.05); color: #fff; transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(236,107,76,.9); }
.mb-nav-cta:active { transform: translateY(0); }

/* ---- dropdown menus ------------------------------------------------------ */
/* Three of them: Product, Free tools, Blog. Six tools is too many for the bar,
   and naming three of them per page is what made every page's nav different.
   One menu, same everywhere. */
.mb-navitem { position: relative; display: flex; align-items: center; }
.mb-navtrigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; font-family: inherit;
  color: #3A3330; font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: color .2s ease;
}
.mb-navtrigger:hover, .mb-navitem.mb-open .mb-navtrigger { color: #EC6B4C; }
.mb-navtrigger svg { transition: transform .22s ease; }
.mb-navitem.mb-open .mb-navtrigger svg { transform: rotate(180deg); }

.mb-dropdown {
  position: absolute; top: calc(100% + 15px); left: 50%; z-index: 60;
  transform: translateX(-50%) translateY(-6px);
  width: 380px; padding: 10px; display: grid; gap: 2px;
  background: #fff; border: 1px solid #EFE5DD; border-radius: 16px;
  box-shadow: 0 30px 64px -30px rgba(20,24,33,.42);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mb-navitem.mb-open .mb-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* invisible bridge: the pointer can cross the gap without the menu closing */
.mb-dropdown::before { content: ""; position: absolute; top: -15px; left: 0; right: 0; height: 15px; }

/* Two-column mega panel — for Product and Blog, which have eight destinations
   each. A single column that long runs past the fold on a laptop.

   Edge anchoring, not centring: a 680px panel centred under "Product" (about
   150px in from the container edge) hangs off the left of the viewport, and the
   same panel centred under "Blog" hangs off the right. So each mega states
   which edge it hugs, and the width collapses on narrow viewports before the
   bar switches to the mobile sheet at 900px. */
.mb-dropdown.mb-mega { width: min(680px, calc(100vw - 48px)); grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.mb-dropdown.mb-mega-left { left: 0; transform: translateX(0) translateY(-6px); }
.mb-dropdown.mb-mega-right { left: auto; right: 0; transform: translateX(0) translateY(-6px); }
.mb-navitem.mb-open .mb-mega-left,
.mb-navitem.mb-open .mb-mega-right { transform: translateX(0) translateY(0); }

/* The overview entry ("Platform overview", "All posts") spans both columns and
   sits above a divider — it is the parent of the eight, not a ninth sibling. */
.mb-dd-wide { grid-column: 1 / -1; margin-bottom: 6px; padding-bottom: 14px;
  border-bottom: 1px solid #F6EFEA; border-radius: 11px 11px 0 0; }

.mb-dd-link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 11px; text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.mb-dd-link:hover, .mb-dd-link:focus-visible { background: #FAF6F2; transform: translateX(2px); }
.mb-dd-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #FBEAE3; display: flex; align-items: center; justify-content: center; }

/* Title and description are two LINES, not a run-on sentence. Both were plain
   inline spans, so `margin-top` on the description was a no-op and the two ran
   together as one string — "Platform overviewThe measure → improve → prove
   loop". They have to be block-level for any of the spacing below to apply.
   min-width:0 on the text column lets a long description wrap inside the flex
   row instead of pushing the row wider than the panel. */
.mb-dd-link > span + span { display: block; min-width: 0; }
.mb-dd-t { display: block; font-size: 14px; font-weight: 600; color: #141821; line-height: 1.3; }
.mb-dd-s { display: block; font-size: 12.5px; color: #6B6158; line-height: 1.45; margin-top: 4px; }
/* the page you're on, marked in its own menu */
.mb-dd-link[aria-current="page"] { background: #FAF6F2; }
.mb-dd-link[aria-current="page"] .mb-dd-t { color: #DE5A38; }

/* current top-level section */
.mb-navlink[aria-current="page"] { color: #EC6B4C; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .mb-dd-link:hover, .mb-dd-link:focus-visible { transform: none; }
  .mb-navitem.mb-open .mb-dropdown { transform: translateX(-50%); }
  .mb-navitem.mb-open .mb-mega-left, .mb-navitem.mb-open .mb-mega-right { transform: none; }
}

/* Six top-level entries fit the 1240 bar, but only just — tighten the gap
   between them before the mobile breakpoint takes over. */
@media (max-width: 1150px) { .mb-nav-links { gap: 22px; margin-left: 28px; } }

/* Below ~1120px a 680px two-column panel no longer fits between its trigger and
   the edge it hugs: "Blog" sits far enough right that the panel's left edge goes
   negative. Collapse both megas to one column there — taller, but on screen. */
@media (max-width: 1120px) {
  .mb-dropdown.mb-mega { width: min(380px, calc(100vw - 40px)); grid-template-columns: 1fr; }
}

/* ---- mobile ------------------------------------------------------------- */
.mb-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid #EFE5DD; border-radius: 10px;
  background: #fff; color: #141821; cursor: pointer; flex: none;
  transition: border-color .2s ease;
}
.mb-hamburger:hover { border-color: #E3D7CE; }
/* Bars while closed, cross while open — the same button, so there is never a
   second control to hunt for once the sheet covers the screen. */
.mb-hamburger .mb-ham-x { display: none; }
.mb-hamburger[aria-expanded="true"] { background: #FBF5F1; border-color: #E3D7CE; }
.mb-hamburger[aria-expanded="true"] .mb-ham-bars { display: none; }
.mb-hamburger[aria-expanded="true"] .mb-ham-x { display: block; }

/* The sheet hugs its contents but can never grow past the bottom of the screen.
   It is position:fixed, so anything below the fold of a taller-than-viewport
   panel is simply unreachable — the list has to scroll INSIDE the sheet
   (.mb-mob-scroll), not the sheet inside the page. 100dvh so a phone's
   collapsing address bar doesn't crop the footer. */
.mb-mobile-menu {
  display: none; position: fixed; top: 68px; left: 0; right: 0; z-index: 49;
  background: #FCFAF8;
  border-top: 1px solid rgba(239,229,221,.9);
  border-radius: 0 0 20px 20px;
  flex-direction: column; overflow: hidden;
  max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px);
  box-shadow: 0 26px 50px -28px rgba(20,24,33,.45);
}
.mb-mobile-menu.mb-open { display: flex; animation: mb-sheet .22s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mb-sheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Page frozen behind the sheet: without this the body scrolls under a menu that
   cannot itself move, which reads as a broken screen. */
html.mb-menu-open, body.mb-menu-open { overflow: hidden; }

.mb-mob-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 6px 20px 14px;
  display: flex; flex-direction: column;
}

/* Top level: six rows, one hairline each. The old sheet drew a border under all
   27 destinations, and that stack of rules was most of the mess. */
.mb-mob-trigger, .mb-mob-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 15px 2px; font: inherit; font-size: 16px; font-weight: 600;
  color: #141821; text-decoration: none; text-align: left;
  background: none; border: 0; border-bottom: 1px solid rgba(239,229,221,.9);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mb-mob-trigger svg { flex: none; color: #A08D80; transition: transform .2s ease; }
.mb-mob-trigger[aria-expanded="true"] { color: #DE5A38; }
.mb-mob-trigger[aria-expanded="true"] svg { transform: rotate(180deg); color: #DE5A38; }
/* A section you are currently inside, marked even while collapsed. */
.mb-mob-trigger[aria-current="page"] { color: #DE5A38; }
/* The last row's rule would land right on top of the footer's own border. */
.mb-mob-scroll > :last-child, .mb-mob-group:last-child .mb-mob-trigger { border-bottom: 0; }

/* Children are grouped by indentation and one accent rule — not by a card, and
   not by another 8 hairlines. */
.mb-mob-panel { display: none; }
.mb-mob-panel.mb-open { display: block; padding: 6px 0 12px 2px; border-left: 2px solid rgba(222,90,56,.16); margin-left: 4px; }
.mb-mob-sub {
  display: block; padding: 10px 4px 10px 14px; font-size: 15px; font-weight: 500;
  color: #5A4F47; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.mb-mob-sub[aria-current="page"] { color: #DE5A38; font-weight: 600; }

/* Sign in and the CTA stay pinned to the bottom of the sheet, so they are one
   tap away no matter how far down the list you have scrolled. */
.mb-mob-foot {
  flex: none; display: grid; gap: 10px; padding: 14px 20px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: #FBF6F2; border-top: 1px solid rgba(239,229,221,.9);
}
.mb-mob-signin, .mb-mob-start {
  display: block; padding: 13px; border-radius: 11px; text-align: center;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
}
.mb-mob-signin { background: #fff; border: 1px solid #EFE5DD; color: #141821; }
.mb-mob-start { background: linear-gradient(180deg,#F17A5A,#DE5A38); color: #fff; box-shadow: 0 10px 22px -12px rgba(222,90,56,.7); }

@media (max-width: 900px) {
  .mb-nav-links { display: none !important; }
  .mb-hamburger { display: inline-flex; }
  .mb-nav-inner { padding-left: 20px; padding-right: 20px; }
  /* While the sheet is open the bar keeps only the logo and the close button:
     the sheet carries its own CTA, and two identical "Get started free" buttons
     one above the other was the loudest thing on the screen. */
  body.mb-menu-open .mb-nav-cta, body.mb-menu-open .mb-nav-signin { display: none; }
  /* The bar sits ABOVE the scrim, so its translucent background would show the
     dimmed page through it and read as a grey band. Match the sheet instead.
     !important because nav.js sets this background inline on scroll. */
  body.mb-menu-open .mb-nav { background: #FCFAF8 !important; box-shadow: none !important; }
  /* Page dimmed behind the sheet — and tapping the dim closes it (nav.js). */
  body.mb-menu-open::after {
    content: ""; position: fixed; inset: 0; z-index: 48;
    background: rgba(28,20,16,.34);
    animation: mb-scrim .2s ease both;
  }
}
@keyframes mb-scrim { from { opacity: 0; } to { opacity: 1; } }
/* Below ~420px the row is mark + wordmark + CTA + hamburger against 350px of
   usable width, and something has to give. The wordmark goes rather than the
   CTA: the mark alone still identifies the site, and the CTA is the only thing
   on the bar a visitor can act on. */
@media (max-width: 420px) {
  .mbl-word { display: none; }
  .mb-nav-cta { padding: 9px 14px; font-size: 13.5px; }
  .mb-nav-cta svg { display: none; }
}
@media (min-width: 901px) { .mb-mobile-menu { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .mb-nav-cta:hover { transform: none !important; }
  .mb-mobile-menu.mb-open { animation: none; }
  .mb-mob-trigger svg { transition: none; }
}