/* 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 mark is a twin of console.css's .mb4 mark — canonical source
   packages/brand/mark/; keep treatment, colours and timing in sync across all
   three. The namespaces stay separate because a free-tool page loads BOTH
   stylesheets, and console.css binds the mark's ink to a theme token this page
   does not have. */

/* 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 -------------------------------------------------------- */
/* The lockup owns the size, so the mark and the word can both read it. The two
   constants below are what tie them together:

   --mbl-bar  the tallest bar is 15.8 of the mark's 24-unit box (0.6583). The
              box is not the mark — the bars sit inside it — so sizing the word
              against the box would make it too small by a third.
   --mbl-cap  Libre Caslon Text's cap height is 0.77 of its em.

   font-size = box x bar / cap puts the word's CAP HEIGHT exactly on the tallest
   bar, which is the whole rule of the lockup: both stand on one baseline and
   reach the same height. Before this the word was set at a flat 19px against a
   32px box — a ratio of 0.59 where the rule wants 0.855 — so the wordmark sat
   visibly short of the mark it was paired with. */
.mb-nav-logo {
  --mbl-size: 32px; --mbl-bar: .6583; --mbl-cap: .77;
  display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;
}
.mbl-word {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-weight: 400;
  font-size: calc(var(--mbl-size) * var(--mbl-bar) / var(--mbl-cap));
  letter-spacing: 0; color: #141821;
}
/* The 4e mark: four bars on a common baseline, the tallest carrying the accent.
   No tile — that container was the old identity. 32px here, comfortably over
   the 20px four-bar floor. Colours are literal, not tokens: this stylesheet
   serves the fixed-light marketing palette. A page that floats the bar over a
   dark band (index.html does) overrides --mbl-ink to the reverse cream. */
/* Falls back to 32px so a mark used OUTSIDE the lockup still has a size; inside
   the lockup it inherits the one the lockup set, so the two cannot drift. */
.mbl-mark { --mbl-ink: #1A1A18; --mbl-accent: #C24E2E;
  flex: none; width: var(--mbl-size, 32px); height: var(--mbl-size, 32px); display: inline-flex; }
.mbl-mark svg { width: 100%; height: 100%; display: block; }
.mbl-mark .b { fill: var(--mbl-ink); }
.mbl-mark .b-accent { fill: var(--mbl-accent); }

/* Arrival: bars rise left to right, shortest first, the accent landing last.
   750ms total. nav.js gates it to the first view of a session — see .mbl-seen. */
.mbl-d .b { transform-box: fill-box; transform-origin: bottom;
  animation: mbl-rise 420ms cubic-bezier(.2,.85,.25,1) both; }
.mbl-d .b1 { animation-delay: 0ms }
.mbl-d .b2 { animation-delay: 90ms }
.mbl-d .b3 { animation-delay: 180ms }
.mbl-d .b4 { animation-delay: 270ms }
.mbl-d .mbl-word { animation: mbl-word .5s cubic-bezier(.2,.7,.2,1) .28s both; }
@keyframes mbl-rise { from{transform:scaleY(.05);opacity:0} to{transform:scaleY(1);opacity:1} }
@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 .b, .mbl-seen .mbl-word { animation: none !important; transform: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .mbl-mark .b, .mbl-word { animation: none !important; transform: none !important; opacity: 1 !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; }

/* nowrap on every label: the bar is a flex row, so a squeeze it cannot absorb
   comes out of the TEXT first — "Why GEO", "Why us", "Free tools" and "Sign in"
   each broke onto two lines rather than the row admitting it had run out of
   width. Two-line labels inside a 69px bar read as a broken header, and because
   the bar's own height never changed there was nothing to notice in a DOM
   measurement. With nowrap the row can only run out of room, which the
   breakpoint below turns into the mobile sheet. */
.mb-navlink { color: #3A3330; font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.mb-navlink:hover { color: #EC6B4C; }
.mb-nav-signin { color: #3A3330; font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; 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;
  white-space: nowrap;
  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 1100px. */
.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); }

/* The bar switches to the sheet at 1100px, not 900px. Six top-level entries
   plus the logo, Sign in and the CTA need about 1090px to sit on one line; the
   old 900px breakpoint left a ~190px band (every 1024-wide laptop and every
   landscape tablet) where the bar was technically "desktop" but four of its
   labels were folded in half. The number below and the two that match it —
   the sheet's own display guard, and the resize handler in nav.js that releases
   the scroll lock — have to move together or the sheet and the bar are both
   visible, or neither is. */
@media (max-width: 1100px) {
  .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: 1101px) { .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; }
}